@mblinkov/whats-missing 0.0.9 → 20.0.1

package/src/Game.tsx

@@ -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>
+      )}
+    </>
+  );
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+// src/index.ts
+export { default as Game } from "./Game";
+export { themes } from "./themes";
+export type { Theme } from "./themes";

package/src/themes.ts

@@ -1,77 +1,96 @@
 // src/themes.ts
 
 export type Theme = "animals" | "food" | "toys";
+export type ImageItem = { src: string; name: string };
 
-export const themes: Record<Theme, string[]> = {
-  animals: [
-    "src/assets/Animals/bear.jpg",
-    "src/assets/Animals/cat.png",
-    "src/assets/Animals/crocodile.jpg",
-    "src/assets/Animals/dolphin.jpg",
-    "src/assets/Animals/elephant.jpg",
-    "src/assets/Animals/fox.jpg",
-    "src/assets/Animals/giraffe.jpg",
-    "src/assets/Animals/horse.jpg",
-    "src/assets/Animals/kangaroo.jpg",
-    "src/assets/Animals/lion.jpg",
-    "src/assets/Animals/monkey.jpg",
-    "src/assets/Animals/owl.jpg",
-    "src/assets/Animals/panda.jpg",
-    "src/assets/Animals/penguin.jpg",
-    "src/assets/Animals/rabbit.jpg",
-    "src/assets/Animals/squirrel.jpg",
-    "src/assets/Animals/tiger.png",
-    "src/assets/Animals/tortoise.jpg",
-    "src/assets/Animals/wolf.png",
-    "src/assets/Animals/zebra.jpg",
-  ],
-  food: [
-    "src/assets/Food/apple.jpg",
-    "src/assets/Food/banana.jpg",
-    "src/assets/Food/bread.jpg",
-    "src/assets/Food/carrot.jpg",
-    "src/assets/Food/cake.jpg",
-    "src/assets/Food/pizza.jpg",
-    "src/assets/Food/rice.jpg",
-    "src/assets/Food/burger.jpg",
-    "src/assets/Food/cheese.jpg",
-    "src/assets/Food/chocolate.jpg",
-    "src/assets/Food/strawberry.jpg",
-    "src/assets/Food/orange.jpg",
-    "src/assets/Food/pear.jpg",
-    "src/assets/Food/watermelon.jpg",
-    "src/assets/Food/ice cream.jpg",
-    "src/assets/Food/soup.jpg",
-    "src/assets/Food/chicken.jpg",
-    "src/assets/Food/fish.jpg",
-    "src/assets/Food/fries.jpg",
-    "src/assets/Food/tomato.jpg",
-    "src/assets/Food/milk.jpg",
-    "src/assets/Food/grapes.jpg",
-    "src/assets/Food/corn.jpg",
-    "src/assets/Food/donut.jpg",
-    "src/assets/Food/sandwich.jpg",
-  ],
-  toys: [
-    "src/assets/Toys/ball.jpg",
-    "src/assets/Toys/balloon.jpg",
-    "src/assets/Toys/blocks.jpg",
-    "src/assets/Toys/car.jpg",
-    "src/assets/Toys/doll.jpg",
-    "src/assets/Toys/drum.jpg",
-    "src/assets/Toys/guitar.jpg",
-    "src/assets/Toys/jump rope.jpg",
-    "src/assets/Toys/kite.jpg",
-    "src/assets/Toys/paints.jpg",
-    "src/assets/Toys/plane.jpg",
-    "src/assets/Toys/puzzle.jpg",
-    "src/assets/Toys/scooter.jpg",
-    "src/assets/Toys/rocket.jpg",
-    "src/assets/Toys/skateboard.jpg",
-    "src/assets/Toys/slide.jpg",
-    "src/assets/Toys/teddy bear.jpg",
-    "src/assets/Toys/train.jpg",
-    "src/assets/Toys/crayons.jpg",
-    "src/assets/Toys/yo-yo.jpg",
-  ],
+// ✅ базовый путь строится от текущего домена (чтобы работало и на prod.speakid.ru, и на test.speakid.ru)
+const baseURL = window.origin + "/cloud/speakid/games/whatsmissing/";
+
+// helper
+const makeList = (items: [string, string][], folder: string): ImageItem[] =>
+  items.map(([file, name]) => ({
+    src: `${baseURL}${folder}/${name.replace(/\s/g, "%20")}.png`,
+    name,
+  }));
+
+// === FOOD ===
+const foodItems: [string, string][] = [
+  ["apple", "apple"],
+  ["banana", "banana"],
+  ["bread", "bread"],
+  ["burger", "burger"],
+  ["cake", "cake"],
+  ["carrot", "carrot"],
+  ["cheese", "cheese"],
+  ["chicken", "chicken"],
+  ["chocolate", "chocolate"],
+  ["corn", "corn"],
+  ["donut", "donut"],
+  ["fish", "fish"],
+  ["fries", "fries"],
+  ["grapes", "grapes"],
+  ["ice_cream", "ice cream"],
+  ["milk", "milk"],
+  ["orange", "orange"],
+  ["pear", "pear"],
+  ["pizza", "pizza"],
+  ["rice", "rice"],
+  ["sandwich", "sandwich"],
+  ["soup", "soup"],
+  ["strawberry", "strawberry"],
+  ["tomato", "tomato"],
+  ["watermelon", "watermelon"],
+];
+
+// === ANIMALS ===
+const animalItems: [string, string][] = [
+  ["bear", "bear"],
+  ["cat", "cat"],
+  ["crocodile", "crocodile"],
+  ["dolphin", "dolphin"],
+  ["elephant", "elephant"],
+  ["fox", "fox"],
+  ["giraffe", "giraffe"],
+  ["horse", "horse"],
+  ["kangaroo", "kangaroo"],
+  ["lion", "lion"],
+  ["monkey", "monkey"],
+  ["owl", "owl"],
+  ["panda", "panda"],
+  ["penguin", "penguin"],
+  ["squirrel", "squirrel"],
+  ["tiger", "tiger"],
+  ["tortoise", "tortoise"],
+  ["wolf", "wolf"],
+  ["zebra", "zebra"],
+];
+
+// === TOYS ===
+const toyItems: [string, string][] = [
+  ["ball", "ball"],
+  ["balloon", "balloon"],
+  ["blocks", "blocks"],
+  ["car", "car"],
+  ["doll", "doll"],
+  ["drum", "drum"],
+  ["guitar", "guitar"],
+  ["jump_rope", "jump rope"],
+  ["kite", "kite"],
+  ["paints", "paints"],
+  ["plane", "plane"],
+  ["puzzle", "puzzle"],
+  ["rocket", "rocket"],
+  ["scooter", "scooter"],
+  ["skateboard", "skateboard"],
+  ["slide", "slide"],
+  ["teddy_bear", "teddy bear"],
+  ["yo-yo", "yo-yo"],
+  ["crayons", "crayons"],
+];
+
+// === EXPORT ===
+export const themes: Record<Theme, ImageItem[]> = {
+  food: makeList(foodItems, "food"),
+  animals: makeList(animalItems, "animals"),
+  toys: makeList(toyItems, "toys"),
 };

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM"],
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "declaration": true,
+    "outDir": "dist",
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": "./src"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "public", "src/main.tsx", "src/App.tsx"]
+}

package/vite.config.ts

@@ -0,0 +1,33 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    // ✅ Прокси только для локальных тестов
+    // (чтобы локалка могла тянуть картинки из MinIO без 401)
+    proxy: {
+      "/cloud": {
+        target: "https://speakid.ru",
+        changeOrigin: true,
+        secure: false,
+      },
+    },
+  },
+  build: {
+    lib: {
+      entry: "src/index.ts",
+      name: "WhatsMissing",
+      fileName: (format) => `whats-missing.${format}.js`,
+    },
+    rollupOptions: {
+      external: ["react", "react-dom"],
+      output: {
+        globals: {
+          react: "React",
+          "react-dom": "ReactDOM",
+        },
+      },
+    },
+  },
+});

package/dist/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>