@mblinkov/whats-missing 20.0.26 → 20.0.28

package/package.json

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

package/src/Game.tsx

@@ -37,7 +37,7 @@ const levenshtein = (a: string, b: string) => {
   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 }
@@ -58,7 +58,6 @@ export function useNeutralizeBodyZoom(
         if (zoomInline && !isNaN(zoomInline) && zoomInline > 0) return zoomInline;
         const zoomComputed = parseFloat((cs.zoom as string) || "");
         if (zoomComputed && !isNaN(zoomComputed) && zoomComputed > 0) return zoomComputed;
-
         const probe = document.createElement("div");
         probe.style.position = "absolute";
         probe.style.left = "0";
@@ -66,7 +65,6 @@ export function useNeutralizeBodyZoom(
         probe.style.width = "100px";
         probe.style.height = "1px";
         probe.style.visibility = "hidden";
-        probe.style.pointerEvents = "none";
         document.documentElement.appendChild(probe);
         const rect = probe.getBoundingClientRect();
         document.documentElement.removeChild(probe);
@@ -270,7 +268,10 @@ export default function Game({
         setAnswered(true);
         setResult("wrong");
         const correct = files[hiddenIndex!].name;
-        setResultsTable((prev) => [...prev, { round: currentRound, answer: inputValue, correct, result: "wrong" }]);
+        setResultsTable((prev) => [
+          ...prev,
+          { round: currentRound, answer: inputValue, correct, result: "wrong" },
+        ]);
         return;
       }
       const t = setTimeout(() => setTimeLeft((s) => s - 1), 1000);
@@ -303,7 +304,8 @@ export default function Game({
     }, 600);
   };
 
-  const nextRound = () => (currentRound < rounds ? (setCurrentRound((r) => r + 1), startRound()) : setFinished(true));
+  const nextRound = () =>
+    currentRound < rounds ? (setCurrentRound((r) => r + 1), startRound()) : setFinished(true);
 
   const exitGame = () => {
     setStarted(false);
@@ -315,14 +317,33 @@ export default function Game({
     () => (
       <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" />
+          <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>
     ),
     []
   );
 
+  // ✅ масштаб интерфейса под реальное разрешение
+  const baseWidth = 1440;
+  const baseHeight = 900;
+  const scale =
+    typeof window !== "undefined"
+      ? Math.min(
+          (screenWidth ?? window.innerWidth) / baseWidth,
+          (screenHeight ?? window.innerHeight) / baseHeight
+        )
+      : 1;
+
   return (
     <div
       ref={containerRef}
@@ -333,241 +354,256 @@ export default function Game({
         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
         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",
+          width: isMobile
+            ? "100%"
+            : `${Math.min(gameCubeSize ?? 1000, screenWidth ?? 1000, screenHeight ?? 1000)}px`,
+          height: isMobile
+            ? "100%"
+            : `${Math.min(gameCubeSize ?? 1000, screenWidth ?? 1000, screenHeight ?? 1000)}px`,
           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",
+          overflow: "hidden",
+          boxShadow: isMobile ? "none" : "0 0 40px rgba(0,0,0,0.08)",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
         }}
       >
         <div
+          id="whats-missing-root"
           style={{
-            transform: "none",
-            transformOrigin: "50% 50%",
-            width: "100%",
-            height: "100%",
+            transform: `scale(${scale})`,
+            transformOrigin: "center center",
+            width: `${100 / scale}%`,
+            height: `${100 / scale}%`,
             display: "flex",
+            flexDirection: "column",
             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"}
+          {!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 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>
+            </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}>
-                  ▶ Start game
+                  🔁 Play again
+                </button>
+                <button style={styles.gmButton} onClick={exitGame}>
+                  ⬅️ Choose theme
                 </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>
-            )}
-
-            {/* ====== ИГРОВОЙ ЭКРАН ====== */}
-            {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 = Math.min(gameCubeSize ?? 1000, squareSize ?? 1000, screenHeight ?? 1000, screenWidth ?? 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",
-                      }}
+              {/* Сетка карточек */}
+              {phase !== "ready" && (() => {
+                const gap = isMobile ? 12 : 20;
+                const innerGutters = 32;
+                const effective = Math.min(
+                  squareRef.current?.clientWidth ?? gameCubeSize ?? 1000,
+                  squareRef.current?.clientHeight ?? screenHeight ?? 1000,
+                  screenWidth ?? 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}
                     >
-                      {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
+                      {animating ? "..." : "Check"}
                     </button>
-                  )}
-                </div>
+                  </div>
+                )}
+                {answered && (
+                  <button type="button" style={styles.gmButton} onClick={nextRound}>
+                    Next round
+                  </button>
+                )}
               </div>
-            )}
-          </div>
+            </div>
+          )}
         </div>
       </div>
     </div>