@mblinkov/whats-missing 20.0.11 → 20.0.12

package/src/Game.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect, useMemo, useRef } from "react";
 import { themes } from "./themes";
 import { styles } from "./Game.styles";
 import type { Theme } from "./themes";
@@ -11,57 +11,20 @@ type RoundResult = {
   result: "correct" | "almost" | "wrong";
 };
 
-// ✅ Финальный reset без скроллов, полос и с растяжением фона
+// ✅ Минимальный reset — без вмешательства в body
 const globalReset = () => {
   const style = document.createElement("style");
   style.textContent = `
-    html, body {
-      margin: 0;
-      padding: 0;
-      width: 100%;
-      height: 100%;
-      overflow-x: hidden;
-      overflow-y: hidden;
-      background: linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%);
-      background-repeat: no-repeat;
-      background-attachment: fixed;
-      background-size: cover;
-    }
-
-    #whats-missing-root {
-      all: unset;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      position: fixed;
-      inset: 0;
-      width: 100vw;
-      height: 100vh;
-      margin: 0;
-      padding: 0;
-      color: #1f2937;
-      text-align: center;
-      background: linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%);
-      background-size: cover;
-    }
-
     #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;
     }
-
-    @keyframes spin {
-      from { transform: rotate(0deg); }
-      to { transform: rotate(360deg); }
-    }
   `;
   document.head.appendChild(style);
 };
@@ -82,8 +45,13 @@ const levenshtein = (a: string, b: string) => {
 };
 
 export default function Game() {
+  const containerRef = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     globalReset();
+    return () => {
+      document.body.style.overflow = "";
+    };
   }, []);
 
   const [theme, setTheme] = useState<Theme | null>(null);
@@ -159,17 +127,15 @@ export default function Game() {
   useEffect(() => {
     if (!started || finished || answered) return;
     if (phase === "ready") {
-      if (readyTime <= 0) {
-        setPhase("memorize");
-      } else {
+      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 {
+      if (memorizeTime <= 0) setPhase("guess");
+      else {
         const t = setTimeout(() => setMemorizeTime((m) => m - 1), 1000);
         return () => clearTimeout(t);
       }
@@ -188,19 +154,7 @@ export default function Game() {
       const t = setTimeout(() => setTimeLeft((s) => s - 1), 1000);
       return () => clearTimeout(t);
     }
-  }, [
-    phase,
-    readyTime,
-    memorizeTime,
-    timeLeft,
-    started,
-    finished,
-    answered,
-    files,
-    hiddenIndex,
-    currentRound,
-    inputValue,
-  ]);
+  }, [phase, readyTime, memorizeTime, timeLeft, started, finished, answered, files, hiddenIndex, currentRound, inputValue]);
 
   const checkAnswer = () => {
     if (hiddenIndex === null || animating) return;
@@ -219,10 +173,7 @@ export default function Game() {
       setResult("wrong");
       roundResult = "wrong";
     }
-    setResultsTable((prev) => [
-      ...prev,
-      { round: currentRound, answer: userAnswer, correct, result: roundResult },
-    ]);
+    setResultsTable((prev) => [...prev, { round: currentRound, answer: userAnswer, correct, result: roundResult }]);
     setAnimating(true);
     setTimeout(() => {
       setAnimating(false);
@@ -231,9 +182,7 @@ export default function Game() {
   };
 
   const nextRound = () =>
-    currentRound < rounds
-      ? (setCurrentRound((r) => r + 1), startRound())
-      : setFinished(true);
+    currentRound < rounds ? (setCurrentRound((r) => r + 1), startRound()) : setFinished(true);
 
   const exitGame = () => {
     setStarted(false);
@@ -245,224 +194,228 @@ export default function Game() {
     () => (
       <div style={styles.gmLogoFixed}>
         <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"
-          />
+          <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>
     ),
     []
   );
 
+  // ✅ Новый контейнер для защиты от zoom
   return (
-    <div id="whats-missing-root">
-      {!isMobile && MemoizedLogo}
+    <div
+      ref={containerRef}
+      style={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        width: "100%",
+        height: "100%",
+        overflow: "hidden",
+      }}
+    >
+      <div
+        style={{
+          width: window.innerWidth > window.innerHeight ? "90vh" : "90vw",
+          height: window.innerWidth > window.innerHeight ? "90vh" : "90vw",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          flexDirection: "column",
+          borderRadius: "20px",
+          background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
+        }}
+      >
+        <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>
-              ))}
+          {!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>
-          </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>
-      )}
+          {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>
+          )}
 
-      {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})
+          {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>
-            )}
-            {phase === "guess" && !answered && (
-              <p style={styles.gmBodyM}>⏳ Time left: {timeLeft}s</p>
-            )}
-          </div>
+              <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>
+          )}
 
-          {phase !== "ready" && (
-            <div
-              style={{
-                ...styles.gmGrid,
-                gridTemplateColumns: isMobile ? "repeat(2, 1fr)" : "repeat(3, 210px)",
-                gridAutoRows: isMobile ? "150px" : "210px",
-                gap: isMobile ? "12px" : "20px",
-                justifyItems: "center",
-                ...(window.innerWidth > 2000
-                  ? {
-                      gridTemplateColumns: "repeat(3, 260px)",
-                      gridAutoRows: "260px",
-                      gap: "28px",
-                    }
-                  : {}),
-                ...(window.innerWidth > 2560
-                  ? {
-                      gridTemplateColumns: "repeat(3, 300px)",
-                      gridAutoRows: "300px",
-                      gap: "32px",
-                    }
-                  : {}),
-              }}
-            >
-              {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}
+          {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={{
-                          width: "100%",
-                          height: "100%",
-                          objectFit: "cover",
+                          ...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 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>
   );
 }