@js-gamifications/word-search-react 1.0.1

package/dist/index.js

@@ -0,0 +1,699 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  WordSearchBoard: () => WordSearchBoard
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/wordSearchBoard.tsx
+var import_word_search_core = require("@js-gamifications/word-search-core");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function playSound(frequency, duration) {
+  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+  const oscillator = audioContext.createOscillator();
+  const gainNode = audioContext.createGain();
+  oscillator.connect(gainNode);
+  gainNode.connect(audioContext.destination);
+  oscillator.frequency.value = frequency;
+  oscillator.type = "sine";
+  gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
+  gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + duration);
+  oscillator.start(audioContext.currentTime);
+  oscillator.stop(audioContext.currentTime + duration);
+}
+function playSuccessSound() {
+  playSound(800, 0.15);
+  setTimeout(() => {
+    playSound(1e3, 0.15);
+  }, 150);
+}
+function playWinnerSound() {
+  playSound(523.25, 0.2);
+  setTimeout(() => {
+    playSound(659.25, 0.2);
+  }, 220);
+  setTimeout(() => {
+    playSound(783.99, 0.4);
+  }, 440);
+}
+var TRANSLATIONS = {
+  ES: {
+    title: "B\xFAsqueda de Palabras",
+    found: "encontradas",
+    instructions: "Haz clic y arrastra sobre las letras para seleccionar una palabra.",
+    clearProgress: "Reiniciar",
+    newPuzzle: "Nuevo Juego",
+    words: "Palabras",
+    allWordsFound: "Todas las palabras encontradas",
+    squareText: "El tablero se muestra en un contenedor cuadrado para un seguimiento m\xE1s f\xE1cil.",
+    timer: "Tiempo",
+    completionTitle: "Puzzle completado",
+    completionMessage: "Excelente trabajo, encontraste todas las palabras.",
+    completionTime: "Tiempo total",
+    completionWords: "Palabras encontradas",
+    completionGrid: "Tamanio de tablero",
+    completionDiagonal: "Diagonal habilitada",
+    completionAt: "Completado a las",
+    yes: "Si",
+    no: "No"
+  },
+  EN: {
+    title: "Word Search",
+    found: "found",
+    instructions: "Hold click and drag over letters to select a word.",
+    clearProgress: "Clear Progress",
+    newPuzzle: "New Puzzle",
+    words: "Words",
+    allWordsFound: "All words found",
+    squareText: "Board is rendered in a square container for easier tracking.",
+    timer: "Time",
+    completionTitle: "Puzzle Completed",
+    completionMessage: "Great job, you found every word.",
+    completionTime: "Total time",
+    completionWords: "Words found",
+    completionGrid: "Grid size",
+    completionDiagonal: "Diagonal enabled",
+    completionAt: "Completed at",
+    yes: "Yes",
+    no: "No"
+  },
+  AR: {
+    title: "\u0627\u0644\u0628\u062D\u062B \u0639\u0646 \u0627\u0644\u0643\u0644\u0645\u0627\u062A",
+    found: "\u0645\u0648\u062C\u0648\u062F\u0629",
+    instructions: "\u0627\u0636\u063A\u0637 \u0648\u0627\u0633\u062D\u0628 \u0641\u0648\u0642 \u0627\u0644\u062D\u0631\u0648\u0641 \u0644\u062A\u062D\u062F\u064A\u062F \u0643\u0644\u0645\u0629",
+    clearProgress: "\u0645\u0633\u062D \u0627\u0644\u062A\u0642\u062F\u0645",
+    newPuzzle: "\u0644\u0639\u0628\u0629 \u062C\u062F\u064A\u062F\u0629",
+    words: "\u0627\u0644\u0643\u0644\u0645\u0627\u062A",
+    allWordsFound: "\u062A\u0645 \u0627\u0644\u0639\u062B\u0648\u0631 \u0639\u0644\u0649 \u062C\u0645\u064A\u0639 \u0627\u0644\u0643\u0644\u0645\u0627\u062A",
+    squareText: "\u064A\u062A\u0645 \u062A\u0642\u062F\u064A\u0645 \u0627\u0644\u0644\u0648\u062D\u0629 \u0641\u064A \u062D\u0627\u0648\u064A\u0629 \u0645\u0631\u0628\u0639\u0629 \u0644\u062A\u062A\u0628\u0639 \u0623\u0633\u0647\u0644",
+    timer: "\u0627\u0644\u0648\u0642\u062A",
+    completionTitle: "\u0627\u0643\u062A\u0645\u0644 \u0627\u0644\u0644\u063A\u0632",
+    completionMessage: "\u0639\u0645\u0644 \u0631\u0627\u0626\u0639\u060C \u0644\u0642\u062F \u0639\u062B\u0631\u062A \u0639\u0644\u0649 \u062C\u0645\u064A\u0639 \u0627\u0644\u0643\u0644\u0645\u0627\u062A",
+    completionTime: "\u0627\u0644\u0648\u0642\u062A \u0627\u0644\u0643\u0644\u064A",
+    completionWords: "\u0627\u0644\u0643\u0644\u0645\u0627\u062A \u0627\u0644\u062A\u064A \u062A\u0645 \u0627\u0644\u0639\u062B\u0648\u0631 \u0639\u0644\u064A\u0647\u0627",
+    completionGrid: "\u062D\u062C\u0645 \u0627\u0644\u0634\u0628\u0643\u0629",
+    completionDiagonal: "\u0627\u0644\u0642\u0637\u0631\u064A \u0645\u0641\u0639\u0644",
+    completionAt: "\u0627\u0643\u062A\u0645\u0644 \u0641\u064A",
+    yes: "\u0646\u0639\u0645",
+    no: "\u0644\u0627"
+  }
+};
+function toCellKey(cell) {
+  return `${cell.row}:${cell.col}`;
+}
+function normalizeWord(word) {
+  return word.trim().toUpperCase().replace(/\s+/g, "");
+}
+function buildPath(start, end) {
+  const rowDiff = end.row - start.row;
+  const colDiff = end.col - start.col;
+  const absRowDiff = Math.abs(rowDiff);
+  const absColDiff = Math.abs(colDiff);
+  const isHorizontal = rowDiff === 0;
+  const isVertical = colDiff === 0;
+  const isDiagonal = absRowDiff === absColDiff;
+  if (!isHorizontal && !isVertical && !isDiagonal) {
+    return [start];
+  }
+  const rowStep = rowDiff === 0 ? 0 : rowDiff / absRowDiff;
+  const colStep = colDiff === 0 ? 0 : colDiff / absColDiff;
+  const steps = Math.max(absRowDiff, absColDiff);
+  return Array.from({ length: steps + 1 }, (_, index) => ({
+    row: start.row + rowStep * index,
+    col: start.col + colStep * index
+  }));
+}
+function toPathFromPlacement(placement) {
+  return Array.from({ length: placement.word.length }, (_, index) => ({
+    row: placement.startRow + placement.deltaRow * index,
+    col: placement.startCol + placement.deltaCol * index
+  }));
+}
+function matchesPlacement(path, placement) {
+  if (path.length !== placement.word.length) {
+    return false;
+  }
+  const expectedForward = toPathFromPlacement(placement);
+  const forwardMatch = expectedForward.every((expectedCell, index) => {
+    const selected = path[index];
+    return selected?.row === expectedCell.row && selected?.col === expectedCell.col;
+  });
+  if (forwardMatch) {
+    return true;
+  }
+  return expectedForward.every((expectedCell, index) => {
+    const selected = path[path.length - 1 - index];
+    return selected?.row === expectedCell.row && selected?.col === expectedCell.col;
+  });
+}
+function WordSearchBoard(props) {
+  const [puzzleSeed, setPuzzleSeed] = (0, import_react.useState)(0);
+  const [language, setLanguage] = (0, import_react.useState)("EN");
+  const [elapsedSeconds, setElapsedSeconds] = (0, import_react.useState)(0);
+  const [showCelebration, setShowCelebration] = (0, import_react.useState)(false);
+  const [completionReport, setCompletionReport] = (0, import_react.useState)(null);
+  const t = TRANSLATIONS[language];
+  const puzzle = (0, import_react.useMemo)(() => {
+    const options = {
+      rows: props.rows,
+      cols: props.cols,
+      words: props.words
+    };
+    if (props.allowDiagonal !== void 0) {
+      Object.assign(options, { allowDiagonal: props.allowDiagonal });
+    }
+    const generated = (0, import_word_search_core.createWordSearch)(options);
+    props.onGenerated?.(generated);
+    return generated;
+  }, [props.rows, props.cols, props.words, props.allowDiagonal, props.onGenerated, puzzleSeed]);
+  const normalizedInputWords = (0, import_react.useMemo)(
+    () => props.words.map(normalizeWord).filter(Boolean),
+    [props.words]
+  );
+  const [foundWords, setFoundWords] = (0, import_react.useState)(/* @__PURE__ */ new Set());
+  const [isDragging, setIsDragging] = (0, import_react.useState)(false);
+  const [dragStart, setDragStart] = (0, import_react.useState)(null);
+  const [dragCurrent, setDragCurrent] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    setFoundWords(/* @__PURE__ */ new Set());
+    setIsDragging(false);
+    setDragStart(null);
+    setDragCurrent(null);
+    setElapsedSeconds(0);
+    setShowCelebration(false);
+    setCompletionReport(null);
+  }, [puzzle]);
+  (0, import_react.useEffect)(() => {
+    const interval = setInterval(() => {
+      setElapsedSeconds((previous) => previous + 1);
+    }, 1e3);
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+  const formatTime = (seconds) => {
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor(seconds % 3600 / 60);
+    const secs = seconds % 60;
+    if (hours > 0) {
+      return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
+    }
+    return `${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
+  };
+  const currentPath = (0, import_react.useMemo)(() => {
+    if (!dragStart || !dragCurrent) {
+      return [];
+    }
+    return buildPath(dragStart, dragCurrent);
+  }, [dragStart, dragCurrent]);
+  const foundPlacements = (0, import_react.useMemo)(
+    () => puzzle.placements.filter((placement) => foundWords.has(placement.word)),
+    [puzzle.placements, foundWords]
+  );
+  const foundCellKeys = (0, import_react.useMemo)(() => {
+    const result = /* @__PURE__ */ new Set();
+    for (const placement of foundPlacements) {
+      for (const cell of toPathFromPlacement(placement)) {
+        result.add(toCellKey(cell));
+      }
+    }
+    return result;
+  }, [foundPlacements]);
+  const currentPathKeys = (0, import_react.useMemo)(() => {
+    const result = /* @__PURE__ */ new Set();
+    for (const cell of currentPath) {
+      result.add(toCellKey(cell));
+    }
+    return result;
+  }, [currentPath]);
+  const pendingWords = (0, import_react.useMemo)(
+    () => normalizedInputWords.filter((word) => !foundWords.has(word)),
+    [normalizedInputWords, foundWords]
+  );
+  const completeSelection = () => {
+    if (!dragStart || !dragCurrent) {
+      setIsDragging(false);
+      setDragStart(null);
+      setDragCurrent(null);
+      return;
+    }
+    const path = buildPath(dragStart, dragCurrent);
+    const match = puzzle.placements.find((placement) => matchesPlacement(path, placement));
+    if (match) {
+      setFoundWords((previous) => {
+        const next = new Set(previous);
+        next.add(match.word);
+        playSuccessSound();
+        if (next.size === normalizedInputWords.length) {
+          const report = {
+            elapsedSeconds,
+            foundWords: next.size,
+            totalWords: normalizedInputWords.length,
+            rows: props.rows,
+            cols: props.cols,
+            allowDiagonal: props.allowDiagonal ?? true,
+            completedAt: (/* @__PURE__ */ new Date()).toISOString()
+          };
+          setTimeout(() => {
+            playWinnerSound();
+            setShowCelebration(true);
+            setCompletionReport(report);
+            props.onCompleted?.(report);
+            setTimeout(() => {
+              setShowCelebration(false);
+            }, 3e3);
+          }, 100);
+        }
+        return next;
+      });
+    }
+    setIsDragging(false);
+    setDragStart(null);
+    setDragCurrent(null);
+  };
+  (0, import_react.useEffect)(() => {
+    if (!isDragging) {
+      return;
+    }
+    const handleMouseUp = () => {
+      completeSelection();
+    };
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging, dragStart, dragCurrent, puzzle.placements]);
+  const startSelection = (row, col) => {
+    setIsDragging(true);
+    setDragStart({ row, col });
+    setDragCurrent({ row, col });
+  };
+  const moveSelection = (row, col) => {
+    if (!isDragging) {
+      return;
+    }
+    setDragCurrent({ row, col });
+  };
+  const finishSelection = () => {
+    if (!isDragging) {
+      return;
+    }
+    completeSelection();
+  };
+  const resetProgress = () => {
+    setFoundWords(/* @__PURE__ */ new Set());
+    setIsDragging(false);
+    setDragStart(null);
+    setDragCurrent(null);
+  };
+  const generateNewPuzzle = () => {
+    resetProgress();
+    setPuzzleSeed((previous) => previous + 1);
+  };
+  const boardSize = (0, import_react.useMemo)(() => {
+    const maxDimension = Math.max(props.rows, props.cols);
+    return Math.min(560, Math.max(280, maxDimension * 38));
+  }, [props.rows, props.cols]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: props.className,
+      style: {
+        width: "100%",
+        borderRadius: "16px",
+        border: "1px solid #e4e4e7",
+        background: "linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(248, 250, 252, 1) 100%)",
+        boxShadow: "0 10px 30px rgba(15, 23, 42, 0.06)",
+        padding: "16px",
+        position: "relative",
+        overflow: "hidden"
+      },
+      children: [
+        showCelebration && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              pointerEvents: "none",
+              zIndex: 20,
+              borderRadius: "inherit"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    inset: 0,
+                    background: "linear-gradient(45deg, rgba(34, 197, 94, 0.3) 0%, rgba(34, 197, 94, 0) 100%)",
+                    animation: "pulse 0.6s ease-out"
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
+            @keyframes pulse {
+              0% { opacity: 1; }
+              100% { opacity: 0; }
+            }
+            @keyframes bounce {
+              0%, 100% { transform: scale(1); }
+              50% { transform: scale(1.1); }
+            }
+          ` }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: "50%",
+                    left: "50%",
+                    transform: "translate(-50%, -50%)",
+                    fontSize: "48px",
+                    fontWeight: "bold",
+                    color: "#22c55e",
+                    animation: "bounce 0.6s ease-out",
+                    textShadow: "0 4px 12px rgba(34, 197, 94, 0.4)"
+                  },
+                  children: "\u{1F389}"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              marginBottom: "12px",
+              gap: "10px",
+              flexWrap: "wrap"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { style: { fontSize: "16px", color: "#111827" }, children: t.title }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "12px",
+                      color: "#374151",
+                      background: "#f3f4f6",
+                      padding: "4px 8px",
+                      borderRadius: "999px"
+                    },
+                    children: [
+                      foundWords.size,
+                      "/",
+                      normalizedInputWords.length,
+                      " ",
+                      t.found
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "12px",
+                      color: "#374151",
+                      background: "#f3f4f6",
+                      padding: "4px 8px",
+                      borderRadius: "999px"
+                    },
+                    children: [
+                      t.timer,
+                      ": ",
+                      formatTime(elapsedSeconds)
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: "12px", color: "#6b7280" }, children: t.instructions })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              gap: "8px",
+              marginBottom: "12px",
+              flexWrap: "wrap"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { style: { fontSize: "12px", color: "#6b7280", marginRight: "6px" }, children: "Language:" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "select",
+                  {
+                    value: language,
+                    onChange: (event) => setLanguage(event.target.value),
+                    style: {
+                      fontSize: "12px",
+                      padding: "4px 8px",
+                      borderRadius: "6px",
+                      border: "1px solid #d4d4d8",
+                      background: "#ffffff",
+                      cursor: "pointer"
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "EN", children: "English" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "ES", children: "Espa\xF1ol" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "AR", children: "\u0627\u0644\u0639\u0631\u0628\u064A\u0629" })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: resetProgress,
+                    style: {
+                      border: "1px solid #d4d4d8",
+                      background: "#ffffff",
+                      color: "#374151",
+                      borderRadius: "8px",
+                      fontSize: "12px",
+                      padding: "6px 10px",
+                      cursor: "pointer"
+                    },
+                    children: t.clearProgress
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: generateNewPuzzle,
+                    style: {
+                      border: "1px solid #0ea5e9",
+                      background: "#0ea5e9",
+                      color: "#ffffff",
+                      borderRadius: "4px",
+                      fontSize: "12px",
+                      padding: "6px 10px",
+                      cursor: "pointer"
+                    },
+                    children: t.newPuzzle
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: "100%", display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            style: {
+              width: `min(100%, ${boardSize}px)`,
+              aspectRatio: "1 / 1",
+              display: "grid",
+              gridTemplateColumns: `repeat(${props.cols}, minmax(0, 1fr))`,
+              gridTemplateRows: `repeat(${props.rows}, minmax(0, 1fr))`,
+              gap: "1px",
+              userSelect: "none",
+              touchAction: "none"
+            },
+            onMouseLeave: finishSelection,
+            children: puzzle.grid.flatMap(
+              (row, rowIndex) => row.map((cell, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onMouseDown: () => startSelection(rowIndex, colIndex),
+                  onMouseEnter: () => moveSelection(rowIndex, colIndex),
+                  onMouseUp: finishSelection,
+                  style: {
+                    display: "inline-flex",
+                    width: "100%",
+                    height: "100%",
+                    minWidth: 0,
+                    alignItems: "center",
+                    justifyContent: "center",
+                    border: "1px solid #d4d4d8",
+                    borderRadius: "8px",
+                    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace",
+                    fontWeight: 700,
+                    fontSize: "clamp(12px, 1.8vw, 16px)",
+                    color: "#111827",
+                    background: foundCellKeys.has(toCellKey({ row: rowIndex, col: colIndex })) ? "#bae6fd" : currentPathKeys.has(toCellKey({ row: rowIndex, col: colIndex })) ? "#e0f2fe" : "#ffffff",
+                    cursor: "pointer",
+                    transition: "background 120ms ease, transform 120ms ease"
+                  },
+                  children: cell
+                },
+                `${rowIndex}-${colIndex}`
+              ))
+            )
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            style: {
+              marginTop: "14px",
+              display: "grid",
+              gridTemplateColumns: "1fr",
+              gap: "8px"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: "12px", color: "#6b7280" }, children: t.words }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", gap: "8px", flexWrap: "wrap" }, children: normalizedInputWords.map((word) => {
+                const found = foundWords.has(word);
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "span",
+                  {
+                    style: {
+                      display: "inline-flex",
+                      alignItems: "center",
+                      padding: "6px 10px",
+                      borderRadius: "999px",
+                      border: found ? "1px solid #22c55e" : "1px solid #d4d4d8",
+                      background: found ? "#dcfce7" : "#fafafa",
+                      color: found ? "#166534" : "#3f3f46",
+                      fontSize: "12px",
+                      fontWeight: 600,
+                      letterSpacing: "0.04em",
+                      textDecoration: found ? "line-through" : "none",
+                      textDecorationThickness: found ? "2px" : void 0,
+                      textDecorationColor: found ? "#166534" : void 0
+                    },
+                    children: word
+                  },
+                  word
+                );
+              }) }),
+              pendingWords.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "12px", color: "#16a34a", fontWeight: 600 }, children: t.allWordsFound }) : null
+            ]
+          }
+        ),
+        completionReport ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            style: {
+              marginTop: "14px",
+              border: "1px solid #86efac",
+              background: "linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%)",
+              borderRadius: "12px",
+              padding: "12px"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: "14px", fontWeight: 700, color: "#166534", marginBottom: "4px" }, children: t.completionTitle }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: "12px", color: "#166534", marginBottom: "10px" }, children: t.completionMessage }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "div",
+                {
+                  style: {
+                    display: "grid",
+                    gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
+                    gap: "8px"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: "12px", color: "#14532d" }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { children: [
+                        t.completionTime,
+                        ":"
+                      ] }),
+                      " ",
+                      formatTime(completionReport.elapsedSeconds)
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: "12px", color: "#14532d" }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { children: [
+                        t.completionWords,
+                        ":"
+                      ] }),
+                      " ",
+                      completionReport.foundWords,
+                      "/",
+                      completionReport.totalWords
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: "12px", color: "#14532d" }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { children: [
+                        t.completionGrid,
+                        ":"
+                      ] }),
+                      " ",
+                      completionReport.rows,
+                      "x",
+                      completionReport.cols
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: "12px", color: "#14532d" }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { children: [
+                        t.completionDiagonal,
+                        ":"
+                      ] }),
+                      " ",
+                      completionReport.allowDiagonal ? t.yes : t.no
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: "12px", color: "#14532d" }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { children: [
+                        t.completionAt,
+                        ":"
+                      ] }),
+                      " ",
+                      new Date(completionReport.completedAt).toLocaleTimeString()
+                    ] })
+                  ]
+                }
+              )
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  WordSearchBoard
+});
+//# sourceMappingURL=index.js.map