@mblinkov/whats-missing 20.0.14 → 20.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@mblinkov/whats-missing",
- "version": "20.0.14",
+ "version": "20.0.16",
  "main": "dist/whats-missing.umd.js",
  "module": "dist/whats-missing.es.js",
  "types": "dist/index.d.ts",

package/src/Game.tsx

@@ -11,42 +11,28 @@ type RoundResult = {
   result: "correct" | "almost" | "wrong";
 };
 
-// ✅ Финальный reset — исправляет фон, убирает скроллы, изолирует зум
+// ✅ базовый reset
 const globalReset = () => {
   const style = document.createElement("style");
   style.textContent = `
-    html, body {
-      margin: 0;
-      padding: 0;
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-      background: radial-gradient(circle at center, #fff8f8 0%, #fdfdfd 80%, #ffffff 100%);
-      background-repeat: no-repeat;
-      background-size: cover;
-      transform-origin: center;
-    }
-
     #whats-missing-root, #whats-missing-root * {
       box-sizing: border-box;
       font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
-      transform: none !important;
     }
-
     #whats-missing-root img {
       max-width: 100%;
       height: auto;
       display: block;
       user-select: none;
     }
+    html, body { margin: 0; padding: 0; }
   `;
   document.head.appendChild(style);
 };
 
+// простая функция сравнения
 const levenshtein = (a: string, b: string) => {
-  const dp = Array.from({ length: a.length + 1 }, () =>
-    Array(b.length + 1).fill(0)
-  );
+  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++) {
@@ -85,18 +71,31 @@ export default function Game() {
   const [inputValue, setInputValue] = useState("");
   const [answered, setAnswered] = useState(false);
   const [animating, setAnimating] = useState(false);
-  const [result, setResult] = useState<"correct" | "almost" | "wrong" | null>(
-    null
-  );
+  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);
 
+  // ✅ адаптив под мобилки и десктоп
   useEffect(() => {
-    const checkMobile = () => setIsMobile(window.innerWidth < 768);
-    checkMobile();
-    window.addEventListener("resize", checkMobile);
-    return () => window.removeEventListener("resize", checkMobile);
+    const resize = () => {
+      const mobile = window.innerWidth < 768;
+      setIsMobile(mobile);
+
+      if (!mobile) {
+        // виртуальный размер игры (1440x768)
+        const baseW = 1440;
+        const baseH = 768;
+        const ratio = Math.min(window.innerWidth / baseW, window.innerHeight / baseH);
+        setScale(ratio);
+      } else {
+        setScale(1);
+      }
+    };
+    resize();
+    window.addEventListener("resize", resize);
+    return () => window.removeEventListener("resize", resize);
   }, []);
 
   const getRandomSix = (arr: ImageItem[]) =>
@@ -115,11 +114,7 @@ export default function Game() {
     startRound(selected, [], true);
   };
 
-  const startRound = (
-    images = files,
-    used: string[] = usedHidden,
-    isFirst = false
-  ) => {
+  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;
@@ -169,31 +164,14 @@ export default function Game() {
         const correct = files[hiddenIndex!].name;
         setResultsTable((prev) => [
           ...prev,
-          {
-            round: currentRound,
-            answer: inputValue,
-            correct,
-            result: "wrong",
-          },
+          { 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,
-  ]);
+  }, [phase, readyTime, memorizeTime, timeLeft, started, finished, answered, files, hiddenIndex, currentRound, inputValue]);
 
   const checkAnswer = () => {
     if (hiddenIndex === null || animating) return;
@@ -212,10 +190,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);
@@ -224,9 +199,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);
@@ -238,279 +211,224 @@ 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>
     ),
     []
   );
 
+  // =============================
+  // RENDER
+  // =============================
   return (
     <div
       ref={containerRef}
       style={{
+        width: "100%",
+        height: "100vh",
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
-        width: "100%",
-        height: "100%",
+        background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
+        transition: "background 0.3s ease",
       }}
     >
       <div
         style={{
-          width: window.innerWidth > window.innerHeight ? "90vh" : "90vw",
-          height: window.innerWidth > window.innerHeight ? "90vh" : "90vw",
+          width: isMobile ? "100%" : 1440,
+          height: isMobile ? "100%" : 768,
           display: "flex",
           justifyContent: "center",
           alignItems: "center",
-          flexDirection: "column",
           overflow: "hidden",
-          borderRadius: "20px",
-          background:
-            "radial-gradient(circle at center, #fff8f8 0%, #fdfdfd 80%, #ffffff 100%)",
-          boxShadow: "0 0 40px rgba(0,0,0,0.08)",
+          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", 
         }}
       >
-        <div id="whats-missing-root">
-          {!isMobile && MemoizedLogo}
+        {/* ✅ добавленный блок для правильного масштабирования и центрирования */}
+        <div
+          style={{
+            transform: isMobile ? "none" : `scale(${scale})`,
+            transformOrigin: "center center",
+            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}
+            {/* ====== ИГРОВАЯ ЛОГИКА ====== */}
+            {!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>
-          )}
-
-          {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,
-                }}
-              >
-                Great job! 🎉 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 }}>
+            {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}>
-                  🔁 Play again
-                </button>
-                <button style={styles.gmButton} onClick={exitGame}>
-                  ⬅️ Choose theme
+                  ▶ Start game
                 </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>
-                )}
+            {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>
+            )}
 
-              {phase !== "ready" && (
+            {started && !finished && (
+              <div style={styles.gmGameLayout}>
                 <div
                   style={{
-                    ...styles.gmGrid,
-                    gridTemplateColumns: isMobile
-                      ? "repeat(2, 1fr)"
-                      : "repeat(3, 210px)",
-                    gridAutoRows: isMobile ? "150px" : "210px",
-                    gap: isMobile ? "12px" : "20px",
-                    justifyItems: "center",
+                    minHeight: 160,
+                    display: "flex",
+                    flexDirection: "column",
+                    justifyContent: "center",
+                    alignItems: "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>
-                    );
-                  })}
+                  {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>
-              )}
 
-              <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}
+                {phase !== "ready" && (
+                  <div
+                    style={{
+                      ...styles.gmGrid,
+                      gridTemplateColumns: isMobile ? "repeat(2, 1fr)" : "repeat(3, 210px)",
+                      gridAutoRows: isMobile ? "150px" : "210px",
+                      gap: isMobile ? "12px" : "20px",
+                      justifyItems: "center",
+                    }}
                   >
-                    Next round
-                  </button>
+                    {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>
     </div>