@mblinkov/whats-missing 20.0.23 → 20.0.25

package/src/Game.tsx

@@ -3,44 +3,41 @@ import { themes } from "./themes";
 import { styles } from "./Game.styles";
 import type { Theme } from "./themes";
 
-
 type ImageItem = { src: string; name: string };
 type RoundResult = {
- round: number;
- answer: string;
- correct: string;
- result: "correct" | "almost" | "wrong";
+  round: number;
+  answer: string;
+  correct: string;
+  result: "correct" | "almost" | "wrong";
 };
 
-
 // ✅ базовый reset (ограничен корнем игры)
 const globalReset = () => {
   const style = document.createElement("style");
   style.textContent = `
-    /* scope only inside game root */
     #whats-missing-root, #whats-missing-root * { box-sizing: border-box; }
     #whats-missing-root img { max-width:100%; height:auto; display:block; user-select:none; }
   `;
   document.head.appendChild(style);
 };
 
-
+// ✅ расстояние Левенштейна — для проверки “почти правильно”
 const levenshtein = (a: string, b: string) => {
- const dp = Array.from({ length: a.length + 1 }, () => Array(b.length + 1).fill(0));
- for (let i = 0; i <= a.length; i++) dp[i][0] = i;
- for (let j = 0; j <= b.length; j++) dp[0][j] = j;
- for (let i = 1; i <= a.length; i++) {
-   for (let j = 1; j <= b.length; j++) {
-     dp[i][j] =
-       a[i - 1] === b[j - 1]
-         ? dp[i - 1][j - 1]
-         : Math.min(dp[i - 1][j - 1], dp[i][j - 1], dp[i - 1][j]) + 1;
-   }
- }
- return dp[a.length][b.length];
+  const dp = Array.from({ length: a.length + 1 }, () => Array(b.length + 1).fill(0));
+  for (let i = 0; i <= a.length; i++) dp[i][0] = i;
+  for (let j = 0; j <= b.length; j++) dp[0][j] = j;
+  for (let i = 1; i <= a.length; i++) {
+    for (let j = 1; j <= b.length; j++) {
+      dp[i][j] =
+        a[i - 1] === b[j - 1]
+          ? dp[i - 1][j - 1]
+          : Math.min(dp[i - 1][j - 1], dp[i][j - 1], dp[i - 1][j]) + 1;
+    }
+  }
+  return dp[a.length][b.length];
 };
 
-
+// ✅ фикс визуального подзума (например, на 1366×768)
 export function useNeutralizeBodyZoom(
   ref: React.RefObject<HTMLDivElement | null>,
   opts: { minDesktopWidth?: number; forceResize?: boolean } = { minDesktopWidth: 1200, forceResize: false }
@@ -57,15 +54,11 @@ export function useNeutralizeBodyZoom(
       try {
         const body = document.body;
         const cs = getComputedStyle(body) as CSSStyleDeclaration & { zoom?: string };
-
-        // 1) existing inline/computed zoom if present
         const zoomInline = parseFloat((body.style && body.style.zoom) || "");
         if (zoomInline && !isNaN(zoomInline) && zoomInline > 0) return zoomInline;
         const zoomComputed = parseFloat((cs.zoom as string) || "");
         if (zoomComputed && !isNaN(zoomComputed) && zoomComputed > 0) return zoomComputed;
 
-        // 2) robust probe: insert a 100px element and measure its bounding rect.
-        //    This detects any effective visual scale applied to the page (transform on ancestors, UA scaling, etc).
         const probe = document.createElement("div");
         probe.style.position = "absolute";
         probe.style.left = "0";
@@ -81,25 +74,20 @@ export function useNeutralizeBodyZoom(
           const measured = rect.width / 100;
           if (!isNaN(measured) && measured > 0) return measured;
         }
-      } catch (e) {
-        // ignore
-      }
+      } catch {}
       return 1;
     };
 
     const apply = () => {
-      // only on desktop view
       if (minDesktopWidth && window.innerWidth < minDesktopWidth) {
         restore();
         return;
       }
-
       const scale = getBodyScale();
       if (!scale || scale === 1) {
         restore();
         return;
       }
-
       if (!saved.current) {
         saved.current = {
           transform: el.style.transform || null,
@@ -109,44 +97,25 @@ export function useNeutralizeBodyZoom(
           willChange: el.style.willChange || null,
         };
       }
-
       const inv = 1 / scale;
-
-      // safer default: только визуальная компенсация (не трогаем layout), опция forceResize включит width/height
       if (forceResize) {
         el.style.width = `${scale * 100}%`;
         el.style.height = `${scale * 100}%`;
       }
-
-      // масштабируем относительно центра, чтобы не сдвигать центрированный контент
       el.style.transformOrigin = "50% 50%";
       el.style.transform = `scale(${inv})`;
       el.style.willChange = "transform";
-
-      if (typeof process !== "undefined" && process.env?.NODE_ENV === "development") {
-        // eslint-disable-next-line no-console
-        console.debug("[useNeutralizeBodyZoom] applied scale:", { scale, inv, forceResize });
-      }
     };
 
     const restore = () => {
       if (!saved.current) return;
       const s = saved.current;
-      if (s.transform === null) el.style.removeProperty("transform");
-      else el.style.transform = s.transform as string;
-      if (s.transformOrigin === null) el.style.removeProperty("transform-origin");
-      else el.style.transformOrigin = s.transformOrigin as string;
-      if (s.width === null) el.style.removeProperty("width");
-      else el.style.width = s.width as string;
-      if (s.height === null) el.style.removeProperty("height");
-      else el.style.height = s.height as string;
-      if (s.willChange === null) el.style.removeProperty("will-change");
-      else el.style.willChange = s.willChange as string;
+      el.style.transform = s.transform ?? "";
+      el.style.transformOrigin = s.transformOrigin ?? "";
+      el.style.width = s.width ?? "";
+      el.style.height = s.height ?? "";
+      el.style.willChange = s.willChange ?? "";
       saved.current = null;
-      if (typeof process !== "undefined" && process.env?.NODE_ENV === "development") {
-        // eslint-disable-next-line no-console
-        console.debug("[useNeutralizeBodyZoom] restored original styles");
-      }
     };
 
     let raf = 0;
@@ -154,19 +123,15 @@ export function useNeutralizeBodyZoom(
       cancelAnimationFrame(raf);
       raf = requestAnimationFrame(apply);
     };
-
-    const mo = new MutationObserver((mutations) => {
-      for (const m of mutations) {
-        if (m.type === "attributes" && (m.attributeName === "style" || m.attributeName === "class")) {
+    const mo = new MutationObserver((m) => {
+      for (const x of m)
+        if (x.type === "attributes" && (x.attributeName === "style" || x.attributeName === "class")) {
           scheduled();
           break;
         }
-      }
     });
     mo.observe(document.body, { attributes: true, attributeFilter: ["style", "class"] });
-
     window.addEventListener("resize", scheduled);
-    // initial
     scheduled();
 
     return () => {
@@ -178,45 +143,51 @@ export function useNeutralizeBodyZoom(
   }, [ref, minDesktopWidth, forceResize]);
 }
 
-
-export default function Game() {
+// =====================================
+//              ИГРА
+// =====================================
+
+export default function Game({
+  gameCubeSize,
+  screenHeight,
+  screenWidth,
+}: {
+  gameCubeSize?: number;
+  screenHeight?: number;
+  screenWidth?: number;
+}) {
   const containerRef = useRef<HTMLDivElement | null>(null);
-  // ref на видимый квадрат (тот, что width/height выставлены в px или %)
   const squareRef = useRef<HTMLDivElement | null>(null);
   const [squareSize, setSquareSize] = useState<number | null>(null);
-   useNeutralizeBodyZoom(containerRef, { minDesktopWidth: 1200, forceResize: false });
- 
-
- useEffect(() => {
-   globalReset();
-   return () => {
-     document.body.style.overflow = "";
-   };
- }, []);
-
-
- const [theme, setTheme] = useState<Theme | null>(null);
- const [files, setFiles] = useState<ImageItem[]>([]);
- const [rounds, setRounds] = useState(4);
- const [started, setStarted] = useState(false);
- const [currentRound, setCurrentRound] = useState(1);
- const [hiddenIndex, setHiddenIndex] = useState<number | null>(null);
- const [phase, setPhase] = useState<"ready" | "memorize" | "guess">("ready");
- const [readyTime, setReadyTime] = useState(3);
- const [memorizeTime, setMemorizeTime] = useState(10);
- const [timeLeft, setTimeLeft] = useState(20);
- const [score, setScore] = useState(0);
- const [finished, setFinished] = useState(false);
- const [inputValue, setInputValue] = useState("");
- const [answered, setAnswered] = useState(false);
- const [animating, setAnimating] = useState(false);
- const [result, setResult] = useState<"correct" | "almost" | "wrong" | null>(null);
- const [resultsTable, setResultsTable] = useState<RoundResult[]>([]);
- const [usedHidden, setUsedHidden] = useState<string[]>([]);
- const [isMobile, setIsMobile] = useState(false);
- const [containerSize, setContainerSize] = useState<number | null>(null);
-
-  // наблюдаем за реальным render-size квадрата — это даёт надежную базу для расчета карточек
+  useNeutralizeBodyZoom(containerRef, { minDesktopWidth: 1200, forceResize: false });
+
+  useEffect(() => {
+    globalReset();
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, []);
+
+  const [theme, setTheme] = useState<Theme | null>(null);
+  const [files, setFiles] = useState<ImageItem[]>([]);
+  const [rounds, setRounds] = useState(4);
+  const [started, setStarted] = useState(false);
+  const [currentRound, setCurrentRound] = useState(1);
+  const [hiddenIndex, setHiddenIndex] = useState<number | null>(null);
+  const [phase, setPhase] = useState<"ready" | "memorize" | "guess">("ready");
+  const [readyTime, setReadyTime] = useState(3);
+  const [memorizeTime, setMemorizeTime] = useState(10);
+  const [timeLeft, setTimeLeft] = useState(20);
+  const [score, setScore] = useState(0);
+  const [finished, setFinished] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const [answered, setAnswered] = useState(false);
+  const [animating, setAnimating] = useState(false);
+  const [result, setResult] = useState<"correct" | "almost" | "wrong" | null>(null);
+  const [resultsTable, setResultsTable] = useState<RoundResult[]>([]);
+  const [usedHidden, setUsedHidden] = useState<string[]>([]);
+  const [isMobile, setIsMobile] = useState(false);
+
   useLayoutEffect(() => {
     const el = squareRef.current;
     if (!el || typeof window === "undefined") return;
@@ -229,442 +200,376 @@ export default function Game() {
         }
       });
       ro.observe(el);
-      // init
       setSquareSize(Math.round(Math.min(el.clientWidth, el.clientHeight)));
-    } catch (err) {
-      // ResizeObserver may not be available — fallback to initial measurement
+    } catch {
       setSquareSize(Math.round(Math.min(el.clientWidth, el.clientHeight)));
     }
-    return () => {
-      if (ro) ro.disconnect();
-    };
+    return () => ro?.disconnect();
   }, [isMobile]);
 
-
- // ✅ адаптив под мобилки, планшеты и десктоп
- useEffect(() => {
-    const resize = () => {
-      const vv = (window as any).visualViewport;
-      const vw = vv ? Math.round(vv.width) : window.innerWidth;
-      const vh = vv ? Math.round(vv.height) : window.innerHeight;
-
-      // treat narrow screens as mobile.
-      // Also treat portrait tablets (iPad portrait) as mobile:
-      // - use a slightly larger mobile breakpoint (820px),
-      // - or if device is touch-capable and height > width (portrait).
-      const MOBILE_BREAKPOINT = 820;
-      const isTouchDevice = typeof navigator !== "undefined" && (navigator.maxTouchPoints > 0 || "ontouchstart" in window);
-      const mobile = vw <= MOBILE_BREAKPOINT || (isTouchDevice && vh > vw);
-
-      setIsMobile(mobile);
-
-      if (mobile) {
-        setContainerSize(null);
-        return;
+  const getRandomSix = (arr: ImageItem[]) => [...arr].sort(() => Math.random() - 0.5).slice(0, 6);
+
+  const startGame = () => {
+    if (!theme) return;
+    const selected = getRandomSix(themes[theme]);
+    setFiles(selected);
+    setStarted(true);
+    setFinished(false);
+    setCurrentRound(1);
+    setScore(0);
+    setResultsTable([]);
+    setUsedHidden([]);
+    startRound(selected, [], true);
+  };
+
+  const startRound = (images = files, used: string[] = usedHidden, isFirst = false) => {
+    const roundSet = getRandomSix(images.length ? images : themes[theme!]);
+    let idx = Math.floor(Math.random() * roundSet.length);
+    let candidate = roundSet[idx].name;
+    let attempts = 0;
+    while (used.includes(candidate) && attempts < 20) {
+      idx = Math.floor(Math.random() * roundSet.length);
+      candidate = roundSet[idx].name;
+      attempts++;
+    }
+    setFiles(roundSet);
+    setHiddenIndex(idx);
+    setUsedHidden([...used, candidate]);
+    setAnswered(false);
+    setInputValue("");
+    setTimeLeft(20);
+    setResult(null);
+    if (isFirst) {
+      setPhase("ready");
+      setReadyTime(3);
+      setMemorizeTime(10);
+    } else {
+      setPhase("memorize");
+      setMemorizeTime(10);
+    }
+  };
+
+  useEffect(() => {
+    if (!started || finished || answered) return;
+    if (phase === "ready") {
+      if (readyTime <= 0) setPhase("memorize");
+      else {
+        const t = setTimeout(() => setReadyTime((r) => r - 1), 1000);
+        return () => clearTimeout(t);
       }
-
-      // tablets & desktop: conservative square
-      const safeFactor = 0.88; // leave margins for browser UI
-      const maxSquare = 1000;
-      const gutter = 40;
-      const availableW = Math.max(360, vw - gutter);
-      const availableH = Math.max(360, vh - gutter);
-      const available = Math.min(availableW, availableH);
-      const sizePx = Math.max(360, Math.round(available * safeFactor));
-      const finalSize = Math.min(sizePx, maxSquare);
-      setContainerSize(finalSize);
-    };
-
-    // run once
-    resize();
-
-    // listen to both window and visualViewport (if available) since some browsers update only visualViewport on zoom
-    window.addEventListener("resize", resize);
-    const vv = (window as any).visualViewport;
-    if (vv && typeof vv.addEventListener === "function") {
-      vv.addEventListener("resize", resize);
-      vv.addEventListener("scroll", resize);
     }
-
-    return () => {
-      window.removeEventListener("resize", resize);
-      if (vv && typeof vv.removeEventListener === "function") {
-        vv.removeEventListener("resize", resize);
-        vv.removeEventListener("scroll", resize);
+    if (phase === "memorize") {
+      if (memorizeTime <= 0) setPhase("guess");
+      else {
+        const t = setTimeout(() => setMemorizeTime((m) => m - 1), 1000);
+        return () => clearTimeout(t);
       }
-    };
-  }, []);
-
-
- const getRandomSix = (arr: ImageItem[]) =>
-   [...arr].sort(() => Math.random() - 0.5).slice(0, 6);
-
-
- const startGame = () => {
-   if (!theme) return;
-   const selected = getRandomSix(themes[theme]);
-   setFiles(selected);
-   setStarted(true);
-   setFinished(false);
-   setCurrentRound(1);
-   setScore(0);
-   setResultsTable([]);
-   setUsedHidden([]);
-   startRound(selected, [], true);
- };
-
-
- const startRound = (images = files, used: string[] = usedHidden, isFirst = false) => {
-   const roundSet = getRandomSix(images.length ? images : themes[theme!]);
-   let idx = Math.floor(Math.random() * roundSet.length);
-   let candidate = roundSet[idx].name;
-   let attempts = 0;
-   while (used.includes(candidate) && attempts < 20) {
-     idx = Math.floor(Math.random() * roundSet.length);
-     candidate = roundSet[idx].name;
-     attempts++;
-   }
-   setFiles(roundSet);
-   setHiddenIndex(idx);
-   setUsedHidden([...used, candidate]);
-   setAnswered(false);
-   setInputValue("");
-   setTimeLeft(20);
-   setResult(null);
-   if (isFirst) {
-     setPhase("ready");
-     setReadyTime(3);
-     setMemorizeTime(10);
-   } else {
-     setPhase("memorize");
-     setMemorizeTime(10);
-   }
- };
-
-
- useEffect(() => {
-   if (!started || finished || answered) return;
-   if (phase === "ready") {
-     if (readyTime <= 0) setPhase("memorize");
-     else {
-       const t = setTimeout(() => setReadyTime((r) => r - 1), 1000);
-       return () => clearTimeout(t);
-     }
-   }
-   if (phase === "memorize") {
-     if (memorizeTime <= 0) setPhase("guess");
-     else {
-       const t = setTimeout(() => setMemorizeTime((m) => m - 1), 1000);
-       return () => clearTimeout(t);
-     }
-   }
-   if (phase === "guess") {
-     if (timeLeft <= 0) {
-       setAnswered(true);
-       setResult("wrong");
-       const correct = files[hiddenIndex!].name;
-       setResultsTable((prev) => [
-         ...prev,
-         { round: currentRound, answer: inputValue, correct, result: "wrong" },
-       ]);
-       return;
-     }
-     const t = setTimeout(() => setTimeLeft((s) => s - 1), 1000);
-     return () => clearTimeout(t);
-   }
- }, [phase, readyTime, memorizeTime, timeLeft, started, finished, answered, files, hiddenIndex, currentRound, inputValue]);
-
-
- const checkAnswer = () => {
-   if (hiddenIndex === null || animating) return;
-   const correct = files[hiddenIndex].name;
-   const userAnswer = inputValue.toLowerCase().trim();
-   let roundResult: "correct" | "almost" | "wrong" = "wrong";
-   if (userAnswer === correct) {
-     setScore((s) => s + 1);
-     setResult("correct");
-     roundResult = "correct";
-   } else if (levenshtein(userAnswer, correct) === 1) {
-     setScore((s) => s + 0.5);
-     setResult("almost");
-     roundResult = "almost";
-   } else {
-     setResult("wrong");
-     roundResult = "wrong";
-   }
-   setResultsTable((prev) => [...prev, { round: currentRound, answer: userAnswer, correct, result: roundResult }]);
-   setAnimating(true);
-   setTimeout(() => {
-     setAnimating(false);
-     setAnswered(true);
-   }, 600);
- };
-
-
- const nextRound = () =>
-   currentRound < rounds ? (setCurrentRound((r) => r + 1), startRound()) : setFinished(true);
-
-
- const exitGame = () => {
-   setStarted(false);
-   setFinished(false);
-   setTheme(null);
- };
-
-
- const MemoizedLogo = useMemo(
-   () => (
-     // ensure logo is positioned inside the square container
-     <div style={{ ...styles.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }}>
-       <picture>
-         <source srcSet={window.origin + "/cloud/speakid/games/whatsmissing/logo.svg"} type="image/svg+xml" />
-         <img src={window.origin + "/cloud/speakid/games/whatsmissing/logo.png"} alt="SPEAKID Logo" style={styles.gmLogoImg} loading="lazy" />
-       </picture>
-     </div>
-   ),
-   []
- );
-
-
- return (
-   <div
-     ref={containerRef}
-     style={{
-       // center relative to viewport so site layout doesn't push the game off-center
-       position: "absolute",
-       inset: 0,
-       display: "flex",
-       justifyContent: "center",
-       alignItems: "center",
-       background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
-       transition: "background 0.3s ease",
-       overflow: "hidden",
-       zIndex: 1,
-       pointerEvents: "auto",
-     }}
-   >
-     <div
-       // visible square that should fit on tablets
-       ref={squareRef}
-       style={{
-         width: isMobile ? "100%" : containerSize ? `${containerSize}px` : "1000px",
-         height: isMobile ? "100%" : containerSize ? `${containerSize}px` : "1000px",
-         maxWidth: "calc(100vw - 24px)",
-         maxHeight: "calc(100vh - 40px)",
-         display: "flex",
-         justifyContent: "center",
-         alignItems: "center",
-         overflow: "hidden",
-         borderRadius: isMobile ? 0 : "20px",
-         background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
-         boxShadow: isMobile ? "none" : "0 0 40px rgba(0,0,0,0.08)",
-         position: "relative",
-       }}
-     >
-       <div
-         style={{
-           transform: "none",
-           transformOrigin: "50% 50%",
-           width: "100%",
-           height: "100%",
-           display: "flex",
-           justifyContent: "center",
-           alignItems: "center",
-         }}
-       >
-         <div id="whats-missing-root">
-           {!isMobile && MemoizedLogo}
-           {/* ====== ИГРОВАЯ ЛОГИКА ====== */}
-           {!theme && !started && (
-             <div style={styles.gmCenterScreen}>
-               <h1 style={styles.gmHeadline1}>WHAT'S MISSING?</h1>
-               <p style={styles.gmBodyM}>Select a theme:</p>
-               <div style={{ display: "flex", gap: 16 }}>
-                 {["animals", "food", "toys"].map((t) => (
-                   <button key={t} style={styles.gmButton} onClick={() => setTheme(t as Theme)}>
-                     {t === "animals" ? "🐶 Animals" : t === "food" ? "🍎 Food" : "🧸 Toys"}
-                   </button>
-                 ))}
-               </div>
-               <div style={{ marginTop: 24 }}>
-                 <p style={styles.gmBodyS}>Choose number of rounds:</p>
-                 <div style={{ display: "flex", gap: 12, marginTop: 8 }}>
-                   {[3, 4, 5].map((n) => (
-                     <button
-                       key={n}
-                       style={{
-                         ...styles.gmButton,
-                         ...(rounds === n ? styles.gmButtonActive : {}),
-                       }}
-                       onClick={() => setRounds(n)}
-                     >
-                       {n}
-                     </button>
-                   ))}
-                 </div>
-               </div>
-             </div>
-           )}
-           {theme && !started && (
-             <div style={styles.gmCenterScreen}>
-               <h1 style={styles.gmHeadline1}>Theme selected: {theme}</h1>
-               <p style={styles.gmBodyM}>Rounds: {rounds}</p>
-               <button style={styles.gmButton} onClick={startGame}>
-                 ▶ Start game
-               </button>
-             </div>
-           )}
-           {finished && (
-             <div style={styles.gmCenterScreen}>
-               <h1 style={styles.gmHeadline1}>Results</h1>
-               <h2 style={styles.gmHeadline3}>
-                 Your score: {score} / {rounds}
-               </h2>
-               <p style={{ ...styles.gmBodyM, color: "#10b981", marginTop: 12 }}>Yahoo! You did it! 🍬✨</p>
-               <table style={styles.gmTable}>
-                 <thead>
-                   <tr>
-                     <th>Round</th>
-                     <th>Your Answer</th>
-                     <th>Correct</th>
-                     <th>Result</th>
-                   </tr>
-                 </thead>
-                 <tbody>
-                   {resultsTable.map((r, i) => (
-                     <tr key={i}>
-                       <td style={styles.gmTableCell}>{r.round}</td>
-                       <td style={styles.gmTableCell}>{r.answer || "—"}</td>
-                       <td style={styles.gmTableCell}>{r.correct}</td>
-                       <td style={styles.gmTableCell}>
-                         {r.result === "correct"
-                           ? "✔ Correct"
-                           : r.result === "almost"
-                           ? "◐ Almost (0.5)"
-                           : "✘ Wrong"}
-                       </td>
-                     </tr>
-                   ))}
-                 </tbody>
-               </table>
-               <div style={{ display: "flex", gap: 12, marginTop: 24 }}>
-                 <button style={styles.gmButton} onClick={startGame}>
-                   🔁 Play again
-                 </button>
-                 <button style={styles.gmButton} onClick={exitGame}>
-                   ⬅️ Choose theme
-                 </button>
-               </div>
-             </div>
-           )}
-           {started && !finished && (
-             <div style={styles.gmGameLayout}>
-               <div
-                 style={{
-                   minHeight: 160,
-                   display: "flex",
-                   flexDirection: "column",
-                   justifyContent: "center",
-                   alignItems: "center",
-                 }}
-               >
-                 {phase === "ready" && (
-                   <>
-                     <h1 style={{ ...styles.gmHeadline1, color: "#ec4c44" }}>GET READY</h1>
-                     <div style={styles.gmHourglass}>⏳</div>
-                   </>
-                 )}
-                 {phase === "memorize" && (
-                   <p style={{ ...styles.gmBodyM, color: "#10b981" }}>
-                     MEMORIZE ({memorizeTime})
-                   </p>
-                 )}
-                 {phase === "guess" && !answered && (
-                   <p style={styles.gmBodyM}>⏳ Time left: {timeLeft}s</p>
-                 )}
-               </div>
-               {phase !== "ready" && (() => {
-                 // compute card size from real measured square size (fallback to containerSize)
-                 const gap = isMobile ? 12 : 20;
-                 const innerGutters = 32; // logo / paddings estimation
-                 const effective = squareSize ?? containerSize ?? (isMobile ? 360 : 1000);
-                 const columns = isMobile ? 2 : 3;
-                 const cardSize = Math.max(
-                   90,
-                   Math.floor((effective - innerGutters - gap * (columns - 1)) / columns)
-                 );
-
-                 return (
-                   <div
-                     style={{
-                       ...styles.gmGrid,
-                       gridTemplateColumns: `repeat(${columns}, ${cardSize}px)`,
-                       gridAutoRows: `${cardSize}px`,
-                       gap: `${gap}px`,
-                       justifyContent: "center",
-                       justifyItems: "center",
-                       padding: 8,
-                       boxSizing: "border-box",
-                     }}
-                   >
-                     {files.map((file, i) => {
-                       const isHidden = hiddenIndex === i && phase === "guess" && !answered;
-                       return (
-                         <div
-                           key={i}
-                           style={{
-                             ...styles.gmCard,
-                             width: `${cardSize}px`,
-                             height: `${cardSize}px`,
-                             padding: isMobile ? 8 : 10,
-                             boxSizing: "border-box",
-                             ...(result === "correct" && hiddenIndex === i ? styles.gmCorrect : {}),
-                             ...(result === "wrong" && hiddenIndex === i ? styles.gmWrong : {}),
-                           }}
-                         >
-                           {!isHidden && (
-                             <img
-                               src={file.src}
-                               alt={file.name}
-                               style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
-                             />
-                           )}
-                         </div>
-                       );
-                     })}
-                   </div>
-                 );
-               })()}
-               <div style={{ marginTop: 16, height: 80 }}>
-                 {phase === "guess" && !answered && (
-                   <div>
-                     <input
-                       type="text"
-                       placeholder="Type the missing word"
-                       value={inputValue}
-                       onChange={(e) => setInputValue(e.target.value)}
-                       style={styles.gmInput}
-                     />
-                     <button
-                       style={{ ...styles.gmButton, marginLeft: 8 }}
-                       onClick={checkAnswer}
-                       disabled={animating}
-                     >
-                       {animating ? "..." : "Check"}
-                     </button>
-                   </div>
-                 )}
-                 {answered && (
-                   <button type="button" style={styles.gmButton} onClick={nextRound}>
-                     Next round
-                   </button>
-                 )}
-               </div>
-             </div>
-           )}
-         </div>
-       </div>
-     </div>
-   </div>
- );
+    }
+    if (phase === "guess") {
+      if (timeLeft <= 0) {
+        setAnswered(true);
+        setResult("wrong");
+        const correct = files[hiddenIndex!].name;
+        setResultsTable((prev) => [...prev, { round: currentRound, answer: inputValue, correct, result: "wrong" }]);
+        return;
+      }
+      const t = setTimeout(() => setTimeLeft((s) => s - 1), 1000);
+      return () => clearTimeout(t);
+    }
+  }, [phase, readyTime, memorizeTime, timeLeft, started, finished, answered, files, hiddenIndex, currentRound, inputValue]);
+
+  const checkAnswer = () => {
+    if (hiddenIndex === null || animating) return;
+    const correct = files[hiddenIndex].name;
+    const userAnswer = inputValue.toLowerCase().trim();
+    let roundResult: "correct" | "almost" | "wrong" = "wrong";
+    if (userAnswer === correct) {
+      setScore((s) => s + 1);
+      setResult("correct");
+      roundResult = "correct";
+    } else if (levenshtein(userAnswer, correct) === 1) {
+      setScore((s) => s + 0.5);
+      setResult("almost");
+      roundResult = "almost";
+    } else {
+      setResult("wrong");
+      roundResult = "wrong";
+    }
+    setResultsTable((prev) => [...prev, { round: currentRound, answer: userAnswer, correct, result: roundResult }]);
+    setAnimating(true);
+    setTimeout(() => {
+      setAnimating(false);
+      setAnswered(true);
+    }, 600);
+  };
+
+  const nextRound = () => (currentRound < rounds ? (setCurrentRound((r) => r + 1), startRound()) : setFinished(true));
+
+  const exitGame = () => {
+    setStarted(false);
+    setFinished(false);
+    setTheme(null);
+  };
+
+  const MemoizedLogo = useMemo(
+    () => (
+      <div style={{ ...styles.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }}>
+        <picture>
+          <source srcSet={window.origin + "/cloud/speakid/games/whatsmissing/logo.svg"} type="image/svg+xml" />
+          <img src={window.origin + "/cloud/speakid/games/whatsmissing/logo.png"} alt="SPEAKID Logo" style={styles.gmLogoImg} loading="lazy" />
+        </picture>
+      </div>
+    ),
+    []
+  );
+
+  return (
+    <div
+      ref={containerRef}
+      style={{
+        position: "fixed",
+        inset: 0,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
+        transition: "background 0.3s ease",
+        overflow: "hidden",
+        zIndex: 9999,
+        pointerEvents: "auto",
+      }}
+    >
+      <div
+        ref={squareRef}
+        style={{
+          width: gameCubeSize ? `${gameCubeSize}px` : isMobile ? "100%" : "1000px",
+          height: gameCubeSize ? `${gameCubeSize}px` : isMobile ? "100%" : "1000px",
+          maxWidth: "calc(100vw - 24px)",
+          maxHeight: "calc(100vh - 20px)",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          overflow: "hidden",
+          borderRadius: isMobile ? 0 : "20px",
+          background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
+          boxShadow: isMobile ? "none" : "0 0 40px rgba(0,0,0,0.08)",
+          position: "relative",
+        }}
+      >
+        <div
+          style={{
+            transform: "none",
+            transformOrigin: "50% 50%",
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <div id="whats-missing-root">
+            {!isMobile && MemoizedLogo}
+
+            {/* ====== ЛОББИ ====== */}
+            {!theme && !started && (
+              <div style={styles.gmCenterScreen}>
+                <h1 style={styles.gmHeadline1}>WHAT'S MISSING?</h1>
+                <p style={styles.gmBodyM}>Select a theme:</p>
+                <div style={{ display: "flex", gap: 16 }}>
+                  {["animals", "food", "toys"].map((t) => (
+                    <button key={t} style={styles.gmButton} onClick={() => setTheme(t as Theme)}>
+                      {t === "animals" ? "🐶 Animals" : t === "food" ? "🍎 Food" : "🧸 Toys"}
+                    </button>
+                  ))}
+                </div>
+                <div style={{ marginTop: 24 }}>
+                  <p style={styles.gmBodyS}>Choose number of rounds:</p>
+                  <div style={{ display: "flex", gap: 12, marginTop: 8 }}>
+                    {[3, 4, 5].map((n) => (
+                      <button
+                        key={n}
+                        style={{
+                          ...styles.gmButton,
+                          ...(rounds === n ? styles.gmButtonActive : {}),
+                        }}
+                        onClick={() => setRounds(n)}
+                      >
+                        {n}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* ====== ПОДТВЕРЖДЕНИЕ ====== */}
+            {theme && !started && (
+              <div style={styles.gmCenterScreen}>
+                <h1 style={styles.gmHeadline1}>Theme selected: {theme}</h1>
+                <p style={styles.gmBodyM}>Rounds: {rounds}</p>
+                <button style={styles.gmButton} onClick={startGame}>
+                  ▶ Start game
+                </button>
+              </div>
+            )}
+
+            {/* ====== РЕЗУЛЬТАТЫ ====== */}
+            {finished && (
+              <div style={styles.gmCenterScreen}>
+                <h1 style={styles.gmHeadline1}>Results</h1>
+                <h2 style={styles.gmHeadline3}>
+                  Your score: {score} / {rounds}
+                </h2>
+                <p style={{ ...styles.gmBodyM, color: "#10b981", marginTop: 12 }}>Yahoo! You did it! 🍬✨</p>
+                <table style={styles.gmTable}>
+                  <thead>
+                    <tr>
+                      <th>Round</th>
+                      <th>Your Answer</th>
+                      <th>Correct</th>
+                      <th>Result</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {resultsTable.map((r, i) => (
+                      <tr key={i}>
+                        <td style={styles.gmTableCell}>{r.round}</td>
+                        <td style={styles.gmTableCell}>{r.answer || "—"}</td>
+                        <td style={styles.gmTableCell}>{r.correct}</td>
+                        <td style={styles.gmTableCell}>
+                          {r.result === "correct"
+                            ? "✔ Correct"
+                            : r.result === "almost"
+                            ? "◐ Almost (0.5)"
+                            : "✘ Wrong"}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+                <div style={{ display: "flex", gap: 12, marginTop: 24 }}>
+                  <button style={styles.gmButton} onClick={startGame}>
+                    🔁 Play again
+                  </button>
+                  <button style={styles.gmButton} onClick={exitGame}>
+                    ⬅️ Choose theme
+                  </button>
+                </div>
+              </div>
+            )}
+
+            {/* ====== ИГРОВОЙ ЭКРАН ====== */}
+            {started && !finished && (
+              <div style={styles.gmGameLayout}>
+                <div
+                  style={{
+                    minHeight: 160,
+                    display: "flex",
+                    flexDirection: "column",
+                    justifyContent: "center",
+                    alignItems: "center",
+                  }}
+                >
+                  {phase === "ready" && (
+                    <>
+                      <h1 style={{ ...styles.gmHeadline1, color: "#ec4c44" }}>GET READY</h1>
+                      <div style={styles.gmHourglass}>⏳</div>
+                    </>
+                  )}
+                  {phase === "memorize" && (
+                    <p style={{ ...styles.gmBodyM, color: "#10b981" }}>
+                      MEMORIZE ({memorizeTime})
+                    </p>
+                  )}
+                  {phase === "guess" && !answered && (
+                    <p style={styles.gmBodyM}>⏳ Time left: {timeLeft}s</p>
+                  )}
+                </div>
+
+                {/* Сетка карточек */}
+                {phase !== "ready" && (() => {
+                  const gap = isMobile ? 12 : 20;
+                  const innerGutters = 32;
+                  const effective = gameCubeSize ?? squareSize ?? (isMobile ? 360 : 1000);
+                  const columns = isMobile ? 2 : 3;
+                  const cardSize = Math.max(
+                    90,
+                    Math.floor((effective - innerGutters - gap * (columns - 1)) / columns)
+                  );
+
+                  return (
+                    <div
+                      style={{
+                        ...styles.gmGrid,
+                        gridTemplateColumns: `repeat(${columns}, ${cardSize}px)`,
+                        gridAutoRows: `${cardSize}px`,
+                        gap: `${gap}px`,
+                        justifyContent: "center",
+                        justifyItems: "center",
+                        padding: 8,
+                        boxSizing: "border-box",
+                      }}
+                    >
+                      {files.map((file, i) => {
+                        const isHidden = hiddenIndex === i && phase === "guess" && !answered;
+                        return (
+                          <div
+                            key={i}
+                            style={{
+                              ...styles.gmCard,
+                              width: `${cardSize}px`,
+                              height: `${cardSize}px`,
+                              padding: isMobile ? 8 : 10,
+                              boxSizing: "border-box",
+                              ...(result === "correct" && hiddenIndex === i ? styles.gmCorrect : {}),
+                              ...(result === "wrong" && hiddenIndex === i ? styles.gmWrong : {}),
+                            }}
+                          >
+                            {!isHidden && (
+                              <img
+                                src={file.src}
+                                alt={file.name}
+                                style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
+                              />
+                            )}
+                          </div>
+                        );
+                      })}
+                    </div>
+                  );
+                })()}
+
+                {/* Инпут и кнопки */}
+                <div style={{ marginTop: 16, height: 80 }}>
+                  {phase === "guess" && !answered && (
+                    <div>
+                      <input
+                        type="text"
+                        placeholder="Type the missing word"
+                        value={inputValue}
+                        onChange={(e) => setInputValue(e.target.value)}
+                        style={styles.gmInput}
+                      />
+                      <button
+                        style={{ ...styles.gmButton, marginLeft: 8 }}
+                        onClick={checkAnswer}
+                        disabled={animating}
+                      >
+                        {animating ? "..." : "Check"}
+                      </button>
+                    </div>
+                  )}
+                  {answered && (
+                    <button type="button" style={styles.gmButton} onClick={nextRound}>
+                      Next round
+                    </button>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 }