@mblinkov/whats-missing 20.0.19 → 20.0.21

package/src/Game.tsx

@@ -1,404 +1,622 @@
-import { useState, useEffect, useMemo, useRef } from "react";
+import { useState, useEffect, useMemo, useRef, useLayoutEffect } from "react";
 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 = `
-    #whats-missing-root, #whats-missing-root * {
-      box-sizing: border-box;
-      font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
-    }
-    #whats-missing-root img {
-      max-width: 100%;
-      height: auto;
-      display: block;
-      user-select: none;
-    }
-    html, body { margin: 0; padding: 0; }
+    /* 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];
 };
 
-export default function Game() {
-  const containerRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    globalReset();
-    return () => {
-      document.body.style.overflow = "";
-    };
-  }, []);
+export function useNeutralizeBodyZoom(
+  ref: React.RefObject<HTMLDivElement | null>,
+  opts: { minDesktopWidth?: number; forceResize?: boolean } = { minDesktopWidth: 1200, forceResize: false }
+) {
+  const saved = useRef<Record<string, string | null> | null>(null);
+  // извлекаем значение, чтобы использовать в deps
+  const minDesktopWidth = opts.minDesktopWidth ?? 1200;
+  const forceResize = !!opts.forceResize;
 
-  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);
-  const [pageScale, setPageScale] = useState<number>(1);
-
-  // ✅ адаптив под мобилки, планшеты и десктоп
-  useEffect(() => {
-    const resize = () => {
-      const mobile = window.innerWidth < 768;
-      setIsMobile(mobile);
-      if (mobile) {
-        // mobile: fluid full-width layout
-        setContainerSize(null);
-        return;
-      }
-      // tablets and desktops: fit into a centered square (max 1000)
-      const safeFactor = 0.97;
-      const maxSquare = 1000;
-      const available = Math.min(window.innerWidth, window.innerHeight);
-      const sizePx = Math.max(360, Math.round(available * safeFactor)); // don't go too small
-      const finalSize = Math.min(sizePx, maxSquare);
-      setContainerSize(finalSize);
-    };
+  useLayoutEffect(() => {
+    if (typeof window === "undefined" || !ref || !ref.current) return;
+    const el = ref.current;
 
-    const detectBodyScale = () => {
+    const getBodyScale = (): number => {
       try {
-        const el = document.body;
-        const cs = getComputedStyle(el);
-        const zoomVal = parseFloat((cs.zoom as string) || "");
-        if (zoomVal && !isNaN(zoomVal) && zoomVal > 0) {
-          setPageScale(zoomVal);
-          return;
-        }
-        const tf = cs.transform;
+        const body = document.body;
+        const cs = getComputedStyle(body) as CSSStyleDeclaration & {
+          zoom?: string;
+          webkitTransform?: string;
+          mozTransform?: string;
+        };
+
+        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;
+
+        const tf = cs.transform || cs.webkitTransform || cs.mozTransform;
         if (tf && tf !== "none") {
           const m = tf.match(/matrix\(([^)]+)\)/);
           if (m) {
             const parts = m[1].split(",").map((p) => parseFloat(p));
             const a = parts[0];
-            if (a && !isNaN(a)) {
-              setPageScale(a);
-              return;
-            }
+            if (a && !isNaN(a)) return a;
           }
         }
       } catch (e) {
         // ignore
       }
-      setPageScale(1);
+      return 1;
     };
 
-    resize();
-    detectBodyScale();
-    window.addEventListener("resize", resize);
-    window.addEventListener("resize", detectBodyScale);
-    const mo = new MutationObserver(detectBodyScale);
+    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,
+          transformOrigin: el.style.transformOrigin || null,
+          width: el.style.width || null,
+          height: el.style.height || null,
+          willChange: el.style.willChange || null,
+        };
+      }
+
+      const inv = 1 / scale;
+
+      // safer default: не трогаем width/height, только визуально инвертируем внутри.
+      // если нужен "flow" компенсации, включать forceResize: true
+      if (forceResize) {
+        el.style.width = `${scale * 100}%`;
+        el.style.height = `${scale * 100}%`;
+      }
+      el.style.transform = `scale(${inv})`;
+      el.style.transformOrigin = "top left";
+      el.style.willChange = "transform";
+
+      if (typeof process !== "undefined" && process.env && 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;
+      saved.current = null;
+      if (process.env.NODE_ENV === "development") {
+        // eslint-disable-next-line no-console
+        console.debug("[useNeutralizeBodyZoom] restored original styles");
+      }
+    };
+
+    let raf = 0;
+    const scheduled = () => {
+      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")) {
+          scheduled();
+          break;
+        }
+      }
+    });
     mo.observe(document.body, { attributes: true, attributeFilter: ["style", "class"] });
 
+    window.addEventListener("resize", scheduled);
+    // initial
+    scheduled();
+
     return () => {
-      window.removeEventListener("resize", resize);
-      window.removeEventListener("resize", detectBodyScale);
+      cancelAnimationFrame(raf);
       mo.disconnect();
+      window.removeEventListener("resize", scheduled);
+      restore();
     };
-  }, []);
+  }, [ref, minDesktopWidth, forceResize]);
+}
 
-  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);
+
+export default function Game() {
+ const containerRef = useRef<HTMLDivElement | 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 [scale, setScale] = useState(1);
+ const [containerSize, setContainerSize] = useState<number | null>(null);
+
+
+ // ✅ адаптив под мобилки, планшеты и десктоп
+ useEffect(() => {
+    const resize = () => {
+      // Prefer visualViewport when available — it's more accurate under page zoom
+      const vv = (window as any).visualViewport;
+      const vw = vv ? Math.round(vv.width) : window.innerWidth;
+      const vh = vv ? Math.round(vv.height) : window.innerHeight;
+
+      const mobile = vw < 768;
+      // tablet flag kept for possible future use
+      const tablet = vw >= 768 && vw < 1200;
+
+      // treat only phones as "mobile" so tablets use the desktop (square/centered) layout
+      setIsMobile(mobile);
+
+      if (mobile) {
+        // mobile: fluid full-width layout
+        setContainerSize(null);
+        setScale(1);
+      } else {
+        // tablets and desktops: fit into a centered square (max 1000)
+        const safeFactor = 0.97;
+        const maxSquare = 1000;
+        const available = Math.min(vw, vh);
+        const sizePx = Math.max(360, Math.round(available * safeFactor)); // don't go too small
+        const finalSize = Math.min(sizePx, maxSquare);
+        setContainerSize(finalSize);
+        setScale(1);
       }
+    };
+
+    // 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);
     }
-    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;
+
+    return () => {
+      window.removeEventListener("resize", resize);
+      if (vv && typeof vv.removeEventListener === "function") {
+        vv.removeEventListener("resize", resize);
+        vv.removeEventListener("scroll", resize);
       }
-      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={{
-        width: "100%",
-        height: "100vh",
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
-        transition: "background 0.3s ease",
-        overflowX: "clip",
-      }}
-    >
-      <div
-        style={{
-          width: isMobile ? "100%" : containerSize ? `${Math.round(containerSize * pageScale)}px` : `${Math.round(1000 * pageScale)}px`,
-          height: isMobile ? "100%" : containerSize ? `${Math.round(containerSize * pageScale)}px` : `${Math.round(1000 * pageScale)}px`,
-          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.1)",
-          margin: isMobile ? "0 auto" : "unset",
-          position: "relative",
-        }}
-      >
-        <div
-          style={{
-            transform: pageScale && pageScale !== 1 ? `scale(${1 / pageScale})` : "none",
-            transformOrigin: "top left",
-            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" && (
-                  <div style={{ ...styles.gmGrid, gridTemplateColumns: isMobile ? "repeat(2, 1fr)" : "repeat(3, 210px)", gridAutoRows: isMobile ? "150px" : "210px", gap: isMobile ? "12px" : "20px", justifyItems: "center" }}>
-                    {files.map((file, i) => {
-                      const isHidden = hiddenIndex === i && phase === "guess" && !answered;
-                      return (
-                        <div key={i} style={{ ...styles.gmCard, ...(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" }} />}
-                        </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 style={styles.gmButton} onClick={nextRound}>Next round</button>}
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
+    };
+  }, []);
+
+
+ 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={{
+       width: "100%",
+       height: "100vh",
+       display: "flex",
+       justifyContent: "center",
+       alignItems: "center",
+       background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
+       transition: "background 0.3s ease",
+       overflowX: "clip"
+     }}
+   >
+     <div
+       style={{
+         width: isMobile ? "100%" : containerSize || 1000,
+         height: isMobile ? "100%" : containerSize || 1000,
+         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.1)",
+         margin: isMobile ? "0 auto" : "unset",
+         position: "relative", // needed so absolute logo is inside the square
+       }}
+     >
+       <div
+         style={{
+           transform: "none",
+           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" && (
+                 <div
+                   style={{
+                     ...styles.gmGrid,
+                     gridTemplateColumns: isMobile
+                       ? "repeat(2, 1fr)"
+                       : "repeat(3, 210px)",
+                     gridAutoRows: isMobile ? "150px" : "210px",
+                     gap: isMobile ? "12px" : "20px",
+                     justifyItems: "center",
+                   }}
+                 >
+                   {files.map((file, i) => {
+                     const isHidden =
+                       hiddenIndex === i && phase === "guess" && !answered;
+                     return (
+                       <div
+                         key={i}
+                         style={{
+                           ...styles.gmCard,
+                           ...(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",
+                             }}
+                           />
+                         )}
+                       </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>
+ );
+}