npm - @mblinkov/whats-missing - Versions diffs - 0.0.9 → 20.0.2 - Mend

@mblinkov/whats-missing 0.0.9 → 20.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (81) hide show

package/.prettierrc +9 -0
package/dist/whats-missing.cjs.js +57 -0
package/dist/whats-missing.es.js +738 -249
package/package.json +14 -55
package/src/Game.styles.ts +205 -0
package/src/Game.tsx +436 -0
package/src/index.ts +4 -0
package/src/themes.ts +91 -72
package/tsconfig.json +19 -0
package/vite.config.ts +33 -0
package/dist/vite.svg +0 -1
package/dist/whats-missing.css +0 -1
package/dist/whats-missing.umd.js +0 -1
package/src/Game.module.css +0 -183
package/src/assets/Animals/bear.jpg +0 -0
package/src/assets/Animals/cat.png +0 -0
package/src/assets/Animals/crocodile.jpg +0 -0
package/src/assets/Animals/dolphin.jpg +0 -0
package/src/assets/Animals/elephant.jpg +0 -0
package/src/assets/Animals/fox.jpg +0 -0
package/src/assets/Animals/giraffe.jpg +0 -0
package/src/assets/Animals/horse.jpg +0 -0
package/src/assets/Animals/kangaroo.jpg +0 -0
package/src/assets/Animals/lion.jpg +0 -0
package/src/assets/Animals/monkey.jpg +0 -0
package/src/assets/Animals/owl.jpg +0 -0
package/src/assets/Animals/panda.jpg +0 -0
package/src/assets/Animals/penguin.jpg +0 -0
package/src/assets/Animals/rabbit.jpg +0 -0
package/src/assets/Animals/squirrel.jpg +0 -0
package/src/assets/Animals/tiger.png +0 -0
package/src/assets/Animals/tortoise.jpg +0 -0
package/src/assets/Animals/wolf.png +0 -0
package/src/assets/Animals/zebra.jpg +0 -0
package/src/assets/Food/apple.jpg +0 -0
package/src/assets/Food/banana.jpg +0 -0
package/src/assets/Food/bread.jpg +0 -0
package/src/assets/Food/burger.jpg +0 -0
package/src/assets/Food/cake.jpg +0 -0
package/src/assets/Food/carrot.jpg +0 -0
package/src/assets/Food/cheese.jpg +0 -0
package/src/assets/Food/chicken.jpg +0 -0
package/src/assets/Food/chocolate.jpg +0 -0
package/src/assets/Food/corn.jpg +0 -0
package/src/assets/Food/donut.jpg +0 -0
package/src/assets/Food/fish.jpg +0 -0
package/src/assets/Food/fries.jpg +0 -0
package/src/assets/Food/grapes.jpg +0 -0
package/src/assets/Food/ice cream.jpg +0 -0
package/src/assets/Food/milk.jpg +0 -0
package/src/assets/Food/orange.jpg +0 -0
package/src/assets/Food/pear.jpg +0 -0
package/src/assets/Food/pizza.jpg +0 -0
package/src/assets/Food/rice.jpg +0 -0
package/src/assets/Food/sandwich.jpg +0 -0
package/src/assets/Food/soup.jpg +0 -0
package/src/assets/Food/strawberry.jpg +0 -0
package/src/assets/Food/tomato.jpg +0 -0
package/src/assets/Food/watermelon.jpg +0 -0
package/src/assets/Toys/ball.jpg +0 -0
package/src/assets/Toys/balloon.jpg +0 -0
package/src/assets/Toys/blocks.jpg +0 -0
package/src/assets/Toys/car.jpg +0 -0
package/src/assets/Toys/doll.jpg +0 -0
package/src/assets/Toys/drum.jpg +0 -0
package/src/assets/Toys/guitar.jpg +0 -0
package/src/assets/Toys/jump rope.jpg +0 -0
package/src/assets/Toys/kite.jpg +0 -0
package/src/assets/Toys/paints.jpg +0 -0
package/src/assets/Toys/plane.jpg +0 -0
package/src/assets/Toys/puzzle.jpg +0 -0
package/src/assets/Toys/rocket.jpg +0 -0
package/src/assets/Toys/scooter.jpg +0 -0
package/src/assets/Toys/skateboard.jpg +0 -0
package/src/assets/Toys/slide.jpg +0 -0
package/src/assets/Toys/teddy bear.jpg +0 -0
package/src/assets/Toys/train.jpg +0 -0
package/src/assets/Toys/yo-yo.jpg +0 -0
package/src/assets/Toys//321/201rayons.jpg +0 -0
package/src/assets/logo.png +0 -0
package/src/assets/react.svg +0 -1

package/package.json CHANGED Viewed

@@ -1,57 +1,16 @@
 {
-  "name": "@mblinkov/whats-missing",
-  "version": "0.0.9",
-  "type": "module",
-  "main": "dist/whats-missing.umd.js",
-  "module": "dist/whats-missing.es.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist",
-    "src/Game.module.css",
-    "src/assets",
-    "src/themes.ts"
-  ],
-  "scripts": {
-    "clean": "rm -rf dist",
-    "build:types": "tsc -p tsconfig.build.json",
-    "build:vite": "vite build",
-    "build": "npm run clean && npm run build:types && npm run build:vite",
-    "dev": "vite",
-    "preview": "vite preview",
-    "lint": "eslint ."
-  },
-  "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
-  },
-  "peerDependenciesMeta": {
-    "react/jsx-runtime": {
-      "optional": true
-    }
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.33.0",
-    "@types/react": "^19.1.10",
-    "@types/react-dom": "^19.1.7",
-    "@vitejs/plugin-react": "^5.0.0",
-    "eslint": "^9.33.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
-    "globals": "^16.3.0",
-    "typescript": "~5.8.3",
-    "typescript-eslint": "^8.39.1",
-    "vite": "^7.1.2"
-  },
-  "description": "A memory game What's Missing built with React",
-  "keywords": [
-    "game",
-    "react",
-    "memory",
-    "speakid"
-  ],
-  "author": "Mikhail Blinkov",
-  "license": "MIT",
-  "publishConfig": {
-    "access": "public"
-  }
+ "name": "@mblinkov/whats-missing",
+ "version": "20.0.2",
+ "main": "dist/whats-missing.umd.js",
+ "module": "dist/whats-missing.es.js",
+ "types": "dist/index.d.ts",
+ "peerDependencies": {
+  "react": "^18.0.0",
+  "react-dom": "^18.0.0"
+ },
+ "scripts": {
+  "dev": "vite",
+  "build": "vite build",
+  "preview": "vite preview"
+ }
 }

package/src/Game.styles.ts ADDED Viewed

@@ -0,0 +1,205 @@
+import { CSSProperties } from "react";
+// ===== Добавляем анимацию вращения в <head> =====
+const spinKeyframes = `
+  @keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+`;
+if (typeof document !== "undefined" && !document.getElementById("spin-keyframes")) {
+  const styleTag = document.createElement("style");
+  styleTag.id = "spin-keyframes";
+  styleTag.innerHTML = spinKeyframes;
+  document.head.appendChild(styleTag);
+}
+// ===== Анимация вращения песочных часов =====
+const spin = {
+  animation: "spin 1.4s linear infinite",
+};
+// ===== Основные стили =====
+export const styles: Record<string, CSSProperties> = {
+  gmCenterScreen: {
+    position: "relative",
+    zIndex: 1,
+    minHeight: "100vh",
+    width: "100%",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    textAlign: "center",
+    color: "#1f2937",
+    padding: "24px 16px",
+    boxSizing: "border-box",
+    transform: "translateY(20px)", // чуть вниз, чтобы компенсировать логотип
+  },
+  gmHeadline1: {
+    fontWeight: 700,
+    fontSize: "clamp(28px, 4vw, 40px)",
+    lineHeight: "110%",
+  },
+  gmHeadline2: {
+    fontWeight: 600,
+    fontSize: "24px",
+    lineHeight: "120%",
+  },
+  gmHeadline3: {
+    fontWeight: 600,
+    fontSize: "18px",
+    lineHeight: "130%",
+  },
+  gmBodyL: {
+    fontWeight: 400,
+    fontSize: "18px",
+    lineHeight: "140%",
+  },
+  gmBodyM: {
+    fontWeight: 400,
+    fontSize: "16px",
+    lineHeight: "140%",
+  },
+  gmBodyS: {
+    fontWeight: 400,
+    fontSize: "14px",
+    lineHeight: "140%",
+    color: "#6b7280",
+  },
+  gmButton: {
+    fontFamily:
+      '"Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans"',
+    fontWeight: 600,
+    fontSize: "16px",
+    padding: "10px 16px",
+    borderRadius: "12px",
+    border: "1px solid #e5e7eb",
+    background: "#ec4c44",
+    color: "#ffffff",
+    cursor: "pointer",
+    boxShadow: "0 6px 18px rgba(236, 76, 68, .18)",
+    transition:
+      "transform .06s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease",
+  },
+  gmButtonActive: {
+    background: "#333",
+    color: "#fff",
+  },
+  gmGameLayout: {
+    position: "relative",
+    width: "100%",
+    maxWidth: "600px", // ограничение ширины для мобильных
+    minHeight: "100vh",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    textAlign: "center",
+    color: "#1f2937",
+    padding: "16px 8px",
+    margin: "0 auto",
+  },
+  gmGrid: {
+    width: "100%",
+    maxWidth: "calc(210px * 3 + 20px * 2)",
+    margin: "0 auto",
+    display: "grid",
+    gridTemplateColumns: "repeat(3, 210px)",
+    gridAutoRows: "210px",
+    gap: "20px",
+    justifyContent: "center",
+  },
+  gmCard: {
+    border: "1px solid #e5e7eb",
+    borderRadius: "16px",
+    background: "#f9f9f9",
+    aspectRatio: "1 / 1",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    transition:
+      "transform .2s ease, box-shadow .2s ease, border-color .2s ease",
+  },
+  gmCorrect: {
+    border: "2px solid #10b981",
+    boxShadow: "0 0 18px rgba(16,185,129,.45)",
+    background: "#ecfdf5",
+  },
+  gmWrong: {
+    border: "2px solid #ec4c44",
+    boxShadow: "0 0 18px rgba(236,76,68,.35)",
+    background: "#fef2f2",
+  },
+  gmInput: {
+    padding: "6px 10px",
+    borderRadius: "6px",
+    border: "1px solid #ccc",
+    fontSize: "16px",
+    fontFamily: '"Geist", system-ui',
+    width: "160px",
+  },
+  gmTable: {
+    marginTop: "20px",
+    marginBottom: "32px",
+    borderCollapse: "collapse",
+    width: "100%",
+    maxWidth: "520px",
+    tableLayout: "fixed",
+    textAlign: "center",
+  },
+  gmTableCell: {
+    padding: "8px 12px",
+    borderBottom: "1px solid #e5e7eb",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+  },
+  gmLogoFixed: {
+    position: "sticky",
+    top: "16px",
+    left: "20px",
+    zIndex: 9999,
+    background: "white",
+    padding: "4px 8px",
+    borderRadius: "8px",
+  },
+  gmLogoImg: {
+    height: "clamp(28px, 5vw, 40px)",
+    width: "auto",
+  },
+  gmReadyWrapper: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    height: "60vh",
+    gap: "16px",
+  },
+  gmHourglass: {
+    fontSize: "42px",
+    ...spin,
+  },
+};

package/src/Game.tsx ADDED Viewed

@@ -0,0 +1,436 @@
+import { useState, useEffect } from "react";
+// логотип теперь в облаке, локальный импорт удаляем
+import { themes } from "./themes";
+import { styles } from "./Game.styles";
+import type { Theme } from "./themes";
+// если логотип всё-таки нужен в интерфейсе
+const logo = window.origin + "/cloud/speakid/games/whatsmissing/logo.png";
+type ImageItem = { src: string; name: string };
+type RoundResult = {
+  round: number;
+  answer: string;
+  correct: string;
+  result: "correct" | "almost" | "wrong";
+};
+// 🔹 встроенный глобальный reset (вместо index.css)
+const globalReset = () => {
+  const style = document.createElement("style");
+  style.textContent = `
+    html, body, #root {
+      margin: 0;
+      padding: 0;
+      height: 100%;
+    }
+    *, *::before, *::after {
+      box-sizing: border-box;
+    }
+    body {
+      font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
+      background-color: #fff;
+      color: #1f2937;
+    }
+    button, input {
+      font-family: inherit;
+      outline: none;
+      border: none;
+      background: none;
+    }
+    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);
+};
+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];
+};
+export default function Game() {
+  useEffect(() => {
+    globalReset();
+  }, []);
+  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(7);
+  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);
+  useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 768);
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+  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(7);
+    } else {
+      setPhase("memorize");
+      setMemorizeTime(7);
+    }
+  };
+  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 Logo = () => (
+    <div style={styles.gmLogoFixed}>
+      <img src={logo} alt="SPEAKID Logo" style={styles.gmLogoImg} />
+    </div>
+  );
+  return (
+    <>
+      {!isMobile && <Logo />}
+      {!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>
+          <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",
+                // 🔹 увеличение только при >2000px
+                ...(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}
+                        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>
+      )}
+    </>
+  );
+}