/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import { boggleSolver } from "https://esm.town/v/alexwein/boggleSolverTownie"; import { getRandomWord } from "https://esm.town/v/alexwein/getRandomWord"; import { retryFill } from "https://esm.town/v/alexwein/gridRetryFill"; function App({ board, solution }) { return (

Boggle Board Solver

Solutions

{word}

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export async function fabw() { // Import d3 and Plot with a server-side compatible approach const d3 = await import("https://cdn.jsdelivr.net/npm/d3@7/+esm"); const Plot = await import("https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6.14/+esm"); // Create a mock document object to prevent undefined errors const { document } = await import("https://cdn.jsdelivr.net/npm/linkedom@0.16.1/+esm").then((m) => m.parseHTML(``) ); // Ensure global is defined for server-side rendering globalThis.document = document; globalThis.window = { document } as any; const randomWord = await getRandomWord(null, 8, 16); const board = retryFill(randomWord.toUpperCase()); const solution = boggleSolver(board); const chart = Plot.plot({ width: 400, height: 400, marks: [ Plot.cell(board, { // cells x: "x", y: "y", stroke: "black", strokeWidth: 3, }), Plot.cell(board, { // blanks x: "x", y: "y", filter: (d) => d.letter === "_", stroke: "black", fill: "black", }), Plot.text(board, { x: "x", y: "y", text: "letter", fill: "black", fontSize: 400 / 10, }), ], x: { type: "band", axis: false, padding: 0 }, y: { type: "band", axis: false, padding: 0 }, }); const boardSVG = `${chart}`.replace( /^ Boggle Board Solver

`, { headers: { "Content-Type": "text/html", }, }); }