@mblinkov/whats-missing 20.0.46 → 20.0.48

package/package.json

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

package/src/Game.tsx

@@ -92,6 +92,11 @@ export default function Game({
       if (style) {
         style.remove();
       }
+      
+      // ✅ Cancel any ongoing preloads
+      if (abortController.current) {
+        abortController.current.abort();
+      }
     };
   }, []);
 
@@ -126,8 +131,10 @@ export default function Game({
   const [isIPadProPortrait, setIsIPadProPortrait] = useState(false);
   const [isIPadProLandscape, setIsIPadProLandscape] = useState(false);
   const [isHorizontalLayout, setIsHorizontalLayout] = useState(false);
-  const [loadedImages, setLoadedImages] = useState<Set<string>>(new Set());
-  const [preloadQueue, setPreloadQueue] = useState<string[]>([]);
+  
+  // ✅ Система предзагрузки изображений
+  const preloadedUrls = useRef<Set<string>>(new Set());
+  const abortController = useRef<AbortController | null>(null);
 
   // ✅ адаптив под мобилки, планшеты и десктоп
   useEffect(() => {
@@ -137,6 +144,7 @@ export default function Game({
       const mobile = width < 768 || (width === 926 && height === 428) || (width === 932 && height === 430); // iPhone 14 Pro Max в landscape тоже считается мобильным
       const isLandscape = (width > height && mobile) || (width === 926 && height === 428) || (width === 932 && height === 430); // iPhone 14 Pro Max в landscape
       const isSmallHeight = height < 700; // Nest Hub, маленькие экраны
+      const isWideScreen = width / height > 1.8; // ✅ Широкие экраны
       
       // Определяем iPhone до 14 Pro Max в landscape режиме
       // iPhone 14 Pro Max: 926x428 (landscape)
@@ -203,7 +211,9 @@ export default function Game({
       // ✅ Вычисляем горизонтальный layout ОДИН РАЗ
       const isHorizontal = 
         (mobile && width > height) || 
+        mobile || // ✅ ВСЕ мобильные устройства (включая portrait)
         height < 700 || 
+        isWideScreen || // ✅ Широкие экраны
         (width === 1366 && height === 766) || 
         (width === 1366 && height === 768) || 
         (width === 1280 && height === 720) || 
@@ -233,6 +243,15 @@ export default function Game({
         // Маленькие экраны: используем переданный gameCubeSize или полную высоту
         setContainerSize(gameCubeSize && gameCubeSize >= 400 ? gameCubeSize : null);
         setScale(1);
+      } else if (isWideScreen) {
+        // ✅ Широкие экраны: используем стандартный размер но уменьшаем масштаб картинок
+        const minSize = 400;
+        const maxSize = 1200;
+        const finalSize = gameCubeSize 
+          ? Math.max(minSize, Math.min(maxSize, gameCubeSize))
+          : Math.min(1000, Math.min(width, height) * 0.9);
+        setContainerSize(finalSize);
+        setScale(0.85); // Уменьшаем масштаб картинок на 15%
       } else {
         // Десктопы: используем переданный gameCubeSize с разумными ограничениями
         const minSize = 400;
@@ -252,33 +271,46 @@ export default function Game({
   const getRandomSix = (arr: ImageItem[]) =>
     [...arr].sort(() => Math.random() - 0.5).slice(0, 6);
 
-  // ✅ Функции предзагрузки изображений
+  // ✅ Утилиты предзагрузки
   const preloadImage = (src: string): Promise<void> => {
-    return new Promise((resolve, reject) => {
+    return new Promise((resolve) => {
       const img = new Image();
-      img.onload = () => {
-        setLoadedImages(prev => new Set(prev).add(src));
-        resolve();
-      };
-      img.onerror = reject;
+      img.onload = () => resolve();
+      img.onerror = () => resolve(); // Continue even on error
       img.src = src;
     });
   };
 
-  const preloadImages = async (urls: string[]) => {
-    // Загружаем с задержкой, чтобы не блокировать UI
+  const preloadImages = async (urls: string[], signal?: AbortSignal): Promise<void> => {
     const promises = urls.map(url => preloadImage(url));
     await Promise.allSettled(promises);
   };
 
-  const startGame = async () => {
-    if (!theme) return;
+  // ✅ Функция предзагрузки темы
+  const startThemePreload = (themeName: Theme) => {
+    // Cancel previous preload
+    if (abortController.current) {
+      abortController.current.abort();
+    }
     
-    const selected = getRandomSix(themes[theme]);
+    // Create new controller
+    abortController.current = new AbortController();
     
-    // ✅ Предзагружаем текущие изображения с высоким приоритетом
-    await preloadImages(selected.map(item => item.src));
+    // Get theme images and start preloading
+    const themeImages = themes[themeName];
+    const urls = themeImages.map(item => item.src);
     
+    preloadImages(urls, abortController.current.signal).then(() => {
+      // Mark as preloaded
+      urls.forEach(url => preloadedUrls.current.add(url));
+    }).catch(() => {
+      // Ignore abort errors
+    });
+  };
+
+  const startGame = () => {
+    if (!theme) return;
+    const selected = getRandomSix(themes[theme]);
     setFiles(selected);
     setStarted(true);
     setFinished(false);
@@ -287,11 +319,13 @@ export default function Game({
     setResultsTable([]);
     setUsedHidden([]);
     
-    // ✅ Загружаем следующий раунд в фоне
-    const nextBatch = getRandomSix(
-      themes[theme].filter(item => !selected.includes(item))
-    );
-    preloadImages(nextBatch.map(item => item.src)); // Не ждем завершения
+    // ✅ Preload current round images
+    const urls = selected.map(item => item.src);
+    preloadImages(urls, abortController.current?.signal).then(() => {
+      urls.forEach(url => preloadedUrls.current.add(url));
+    }).catch(() => {
+      // Ignore abort errors
+    });
     
     startRound(selected, [], true);
   };
@@ -313,9 +347,21 @@ export default function Game({
     setInputValue("");
     setTimeLeft(20);
     setResult(null);
+    
+    // ✅ Preload next round images in background
+    if (theme && !isFirst) {
+      const nextPool = getRandomSix(themes[theme].filter(item => !used.includes(item.name)));
+      const nextUrls = nextPool.map(item => item.src);
+      preloadImages(nextUrls, abortController.current?.signal).then(() => {
+        nextUrls.forEach(url => preloadedUrls.current.add(url));
+      }).catch(() => {
+        // Ignore abort errors
+      });
+    }
+    
     if (isFirst) {
       setPhase("ready");
-      setReadyTime(3);
+      setReadyTime(5); // Увеличено с 3 до 5
       setMemorizeTime(10);
     } else {
       setPhase("memorize");
@@ -398,20 +444,20 @@ export default function Game({
       
       return (
         // ensure logo is positioned inside the square container
-        <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"
-            />
-          </picture>
-        </div>
+      <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"
+          />
+        </picture>
+      </div>
       );
     },
     [isMobile]
@@ -449,6 +495,7 @@ export default function Game({
           boxShadow: isMobile ? "none" : "0 0 40px rgba(0,0,0,0.1)",
           margin: isMobile ? "0 auto" : "unset",
           position: "relative", // needed so absolute logo is inside the square
+          transform: `scale(${scale})`, // ✅ Применяем масштаб для широких экранов
         }}
       >
         <div
@@ -462,62 +509,65 @@ export default function Game({
           }}
         >
           <div id="whats-missing-root">
-            {!isMobile && MemoizedLogo}
+          {!isMobile && MemoizedLogo}
             {/* ====== ИГРОВАЯ ЛОГИКА ====== */}
-            {!theme && !started && (
-              <div style={styles.gmCenterScreen}>
-                <h1 style={styles.gmHeadline1}>WHAT'S MISSING?</h1>
-                <p style={styles.gmBodyM}>Select a theme:</p>
+          {!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: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) || (window.innerWidth === 896 && window.innerHeight === 414) || (window.innerWidth === 844 && window.innerHeight === 390) || (window.innerWidth === 926 && window.innerHeight === 428) || (window.innerWidth === 932 && window.innerHeight === 430) ? "8px" : "16px" }}>
-                  {["animals", "food", "toys"].map((t) => (
+                {["animals", "food", "toys"].map((t) => (
                     <button key={t} style={{
                       ...styles.gmButton,
                       padding: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) || (window.innerWidth === 896 && window.innerHeight === 414) || (window.innerWidth === 844 && window.innerHeight === 390) || (window.innerWidth === 926 && window.innerHeight === 428) || (window.innerWidth === 932 && window.innerHeight === 430) ? "8px 12px" : "12px 24px",
                       fontSize: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) || (window.innerWidth === 896 && window.innerHeight === 414) || (window.innerWidth === 844 && window.innerHeight === 390) || (window.innerWidth === 926 && window.innerHeight === 428) || (window.innerWidth === 932 && window.innerHeight === 430) ? "12px" : "16px",
                       minWidth: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) || (window.innerWidth === 896 && window.innerHeight === 414) || (window.innerWidth === 844 && window.innerHeight === 390) || (window.innerWidth === 926 && window.innerHeight === 428) || (window.innerWidth === 932 && window.innerHeight === 430) ? "70px" : "auto"
-                    }} 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>
+                    }} onClick={() => {
+                      setTheme(t as Theme);
+                      startThemePreload(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: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) || (window.innerWidth === 896 && window.innerHeight === 414) || (window.innerWidth === 844 && window.innerHeight === 390) || (window.innerWidth === 926 && window.innerHeight === 428) || (window.innerWidth === 932 && window.innerHeight === 430) ? "6px" : "12px", marginTop: 8 }}>
-                    {[3, 4, 5].map((n) => (
-                      <button
-                        key={n}
-                        style={{
-                          ...styles.gmButton,
-                          ...(rounds === n ? styles.gmButtonActive : {}),
+                  {[3, 4, 5].map((n) => (
+                    <button
+                      key={n}
+                      style={{
+                        ...styles.gmButton,
+                        ...(rounds === n ? styles.gmButtonActive : {}),
                           padding: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) || (window.innerWidth === 896 && window.innerHeight === 414) || (window.innerWidth === 844 && window.innerHeight === 390) || (window.innerWidth === 926 && window.innerHeight === 428) || (window.innerWidth === 932 && window.innerHeight === 430) ? "6px 10px" : "12px 24px",
                           fontSize: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) || (window.innerWidth === 896 && window.innerHeight === 414) || (window.innerWidth === 844 && window.innerHeight === 390) || (window.innerWidth === 926 && window.innerHeight === 428) || (window.innerWidth === 932 && window.innerHeight === 430) ? "12px" : "16px",
                           minWidth: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) || (window.innerWidth === 896 && window.innerHeight === 414) || (window.innerWidth === 844 && window.innerHeight === 390) || (window.innerWidth === 926 && window.innerHeight === 428) || (window.innerWidth === 932 && window.innerHeight === 430) ? "40px" : "auto"
-                        }}
-                        onClick={() => setRounds(n)}
-                      >
-                        {n}
-                      </button>
-                    ))}
-                  </div>
+                      }}
+                      onClick={() => setRounds(n)}
+                    >
+                      {n}
+                    </button>
+                  ))}
                 </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,
                   padding: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) || (window.innerWidth === 896 && window.innerHeight === 414) || (window.innerWidth === 844 && window.innerHeight === 390) || (window.innerWidth === 926 && window.innerHeight === 428) || (window.innerWidth === 932 && window.innerHeight === 430) ? "8px 16px" : "12px 24px",
                   fontSize: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) || (window.innerWidth === 896 && window.innerHeight === 414) || (window.innerWidth === 844 && window.innerHeight === 390) || (window.innerWidth === 926 && window.innerHeight === 428) || (window.innerWidth === 932 && window.innerHeight === 430) ? "14px" : "16px",
                   minWidth: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) || (window.innerWidth === 896 && window.innerHeight === 414) || (window.innerWidth === 844 && window.innerHeight === 390) || (window.innerWidth === 926 && window.innerHeight === 428) || (window.innerWidth === 932 && window.innerHeight === 430) ? "120px" : "auto"
                 }} onClick={startGame}>
-                  ▶ Start game
-                </button>
-              </div>
-            )}
-            {finished && (
-              <div style={styles.gmCenterScreen}>
+                ▶ Start game
+              </button>
+            </div>
+          )}
+          {finished && (
+            <div style={styles.gmCenterScreen}>
                 <h1 style={{
                   ...styles.gmHeadline1,
                   marginTop: (isMobile && window.innerWidth > window.innerHeight) || (window.innerWidth === 896 && window.innerHeight === 414) || (window.innerWidth === 844 && window.innerHeight === 390) || (window.innerWidth === 926 && window.innerHeight === 428) || (window.innerWidth === 932 && window.innerHeight === 430) || isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape ? "0px" : styles.gmHeadline1.marginTop,
@@ -541,31 +591,31 @@ export default function Game({
                   marginTop: (isMobile && window.innerWidth > window.innerHeight) || (window.innerWidth === 896 && window.innerHeight === 414) || (window.innerWidth === 844 && window.innerHeight === 390) || (window.innerWidth === 926 && window.innerHeight === 428) || (window.innerWidth === 932 && window.innerHeight === 430) || isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape ? "0px" : "20px",
                   marginBottom: (isMobile && window.innerWidth > window.innerHeight) || (window.innerWidth === 896 && window.innerHeight === 414) || (window.innerWidth === 844 && window.innerHeight === 390) || (window.innerWidth === 926 && window.innerHeight === 428) || (window.innerWidth === 932 && window.innerHeight === 430) || isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape ? "4px" : "32px"
                 }}>
-                  <thead>
-                    <tr>
-                      <th>Round</th>
-                      <th>Your Answer</th>
-                      <th>Correct</th>
-                      <th>Result</th>
+                <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>
-                  </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>
+                  ))}
+                </tbody>
+              </table>
                 <div style={{ 
                   display: "flex", 
                   gap: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) || (window.innerWidth === 896 && window.innerHeight === 414) || (window.innerWidth === 844 && window.innerHeight === 390) || (window.innerWidth === 926 && window.innerHeight === 428) || (window.innerWidth === 932 && window.innerHeight === 430) ? "6px" : "12px", 
@@ -577,23 +627,23 @@ export default function Game({
                     fontSize: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) || (window.innerWidth === 896 && window.innerHeight === 414) || (window.innerWidth === 844 && window.innerHeight === 390) || (window.innerWidth === 926 && window.innerHeight === 428) || (window.innerWidth === 932 && window.innerHeight === 430) ? "12px" : "16px",
                     minWidth: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) || (window.innerWidth === 896 && window.innerHeight === 414) || (window.innerWidth === 844 && window.innerHeight === 390) || (window.innerWidth === 926 && window.innerHeight === 428) || (window.innerWidth === 932 && window.innerHeight === 430) ? "80px" : "auto"
                   }} onClick={startGame}>
-                    🔁 Play again
-                  </button>
+                  🔁 Play again
+                </button>
                   <button style={{
                     ...styles.gmButton,
                     padding: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) || (window.innerWidth === 896 && window.innerHeight === 414) || (window.innerWidth === 844 && window.innerHeight === 390) || (window.innerWidth === 926 && window.innerHeight === 428) || (window.innerWidth === 932 && window.innerHeight === 430) ? "6px 10px" : "12px 24px",
                     fontSize: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) || (window.innerWidth === 896 && window.innerHeight === 414) || (window.innerWidth === 844 && window.innerHeight === 390) || (window.innerWidth === 926 && window.innerHeight === 428) || (window.innerWidth === 932 && window.innerHeight === 430) ? "12px" : "16px",
                     minWidth: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) || (window.innerWidth === 896 && window.innerHeight === 414) || (window.innerWidth === 844 && window.innerHeight === 390) || (window.innerWidth === 926 && window.innerHeight === 428) || (window.innerWidth === 932 && window.innerHeight === 430) ? "80px" : "auto"
                   }} onClick={exitGame}>
-                    ⬅️ Choose theme
-                  </button>
-                </div>
+                  ⬅️ Choose theme
+                </button>
               </div>
-            )}
-            {started && !finished && (
-              <div style={styles.gmGameLayout}>
-                <div
-                  style={{
+            </div>
+          )}
+          {started && !finished && (
+            <div style={styles.gmGameLayout}>
+              <div
+                style={{
                     minHeight: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
                       ? "45px" // iPhone SE: еще более компактная высота
                       : (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
@@ -607,10 +657,10 @@ export default function Game({
                       : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700
                       ? "60px" // iPhone landscape и малые экраны: компактная высота
                       : "160px",
-                    display: "flex",
-                    flexDirection: "column",
-                    justifyContent: "center",
-                    alignItems: "center",
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "center",
+                  alignItems: "center",
                     paddingTop: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
                       ? "8px" // iPhone SE: поднимаем таймер еще выше
                       : (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
@@ -624,23 +674,23 @@ export default function Game({
                       : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700
                       ? "15px" // iPhone landscape и малые экраны: поднимаем выше
                       : "40px"
-                  }}
-                >
-                  {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" && (
+                  <>
+                    <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={{
@@ -770,37 +820,15 @@ export default function Game({
                           }}
                         >
                           {!isHidden && (
-                            <div style={{ position: "relative", width: "100%", height: "100%" }}>
-                              {!loadedImages.has(file.src) && (
-                                <div style={{
-                                  position: "absolute",
-                                  top: 0,
-                                  left: 0,
-                                  width: "100%",
-                                  height: "100%",
-                                  background: "linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)",
-                                  backgroundSize: "200% 100%",
-                                  borderRadius: "inherit",
-                                  display: "flex",
-                                  justifyContent: "center",
-                                  alignItems: "center"
-                                }} />
-                              )}
-                              <img
-                                src={file.src}
-                                alt={file.name}
-                                // @ts-ignore - fetchpriority is a newer API
-                                fetchpriority={loadedImages.has(file.src) ? "auto" : "high"}
-                                onLoad={() => setLoadedImages(prev => new Set(prev).add(file.src))}
-                                style={{
-                                  width: "100%",
-                                  height: "100%",
-                                  objectFit: "cover",
-                                  opacity: loadedImages.has(file.src) ? 1 : 0,
-                                  transition: "opacity 0.3s ease"
-                                }}
-                              />
-                            </div>
+                            <img
+                              src={file.src}
+                              alt={file.name}
+                              style={{
+                                width: "100%",
+                                height: "100%",
+                                objectFit: "cover",
+                              }}
+                            />
                           )}
                         </div>
                       );
@@ -835,7 +863,7 @@ export default function Game({
                     ? "50px" // iPhone landscape и малые экраны: компактная высота
                     : "80px"
                 }}>
-                  {phase === "guess" && !answered && (
+                {phase === "guess" && !answered && (
                     <div style={{
                       display: "flex",
                       flexDirection: isHorizontalLayout ? "row" : "column",
@@ -890,11 +918,11 @@ export default function Game({
                         : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "400px" : "300px"
                     }}>
                       <>
-                          <input
-                            type="text"
-                            placeholder="Type the missing word"
-                            value={inputValue}
-                            onChange={(e) => setInputValue(e.target.value)}
+                    <input
+                      type="text"
+                      placeholder="Type the missing word"
+                      value={inputValue}
+                      onChange={(e) => setInputValue(e.target.value)}
                             style={{
                               ...styles.gmInput,
                               width: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
@@ -968,8 +996,8 @@ export default function Game({
                                 : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "14px" : "16px",
                               flex: isHorizontalLayout ? "1" : "none"
                             }}
-                          />
-                          <button
+                    />
+                    <button
                             style={{ 
                               ...styles.gmButton, 
                               marginLeft: isHorizontalLayout ? "8px" : "0",
@@ -1044,15 +1072,15 @@ export default function Game({
                                 : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "80px" : "100px",
                               flexShrink: 0
                             }}
-                            onClick={checkAnswer}
-                            disabled={animating}
-                          >
-                            {animating ? "..." : "Check"}
-                          </button>
+                      onClick={checkAnswer}
+                      disabled={animating}
+                    >
+                      {animating ? "..." : "Check"}
+                    </button>
                       </>
-                    </div>
-                  )}
-                  {answered && (
+                  </div>
+                )}
+                {answered && (
                     <button style={{
                       ...styles.gmButton,
                       padding: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
@@ -1102,12 +1130,12 @@ export default function Game({
                         ? "14px" // iPad и Surface DUO: размер шрифта кнопки Next round
                         : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "14px" : "16px"
                     }} onClick={nextRound}>
-                      Next round
-                    </button>
-                  )}
-                </div>
+                    Next round
+                  </button>
+                )}
               </div>
-            )}
+            </div>
+          )}
           </div>
         </div>
       </div>