@mblinkov/whats-missing 20.0.47 → 20.0.48

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@mblinkov/whats-missing",
- "version": "20.0.47",
+ "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,6 +131,10 @@ export default function Game({
   const [isIPadProPortrait, setIsIPadProPortrait] = useState(false);
   const [isIPadProLandscape, setIsIPadProLandscape] = useState(false);
   const [isHorizontalLayout, setIsHorizontalLayout] = useState(false);
+  
+  // ✅ Система предзагрузки изображений
+  const preloadedUrls = useRef<Set<string>>(new Set());
+  const abortController = useRef<AbortController | null>(null);
 
   // ✅ адаптив под мобилки, планшеты и десктоп
   useEffect(() => {
@@ -135,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)
@@ -201,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) || 
@@ -231,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;
@@ -250,6 +271,43 @@ 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) => {
+      const img = new Image();
+      img.onload = () => resolve();
+      img.onerror = () => resolve(); // Continue even on error
+      img.src = src;
+    });
+  };
+
+  const preloadImages = async (urls: string[], signal?: AbortSignal): Promise<void> => {
+    const promises = urls.map(url => preloadImage(url));
+    await Promise.allSettled(promises);
+  };
+
+  // ✅ Функция предзагрузки темы
+  const startThemePreload = (themeName: Theme) => {
+    // Cancel previous preload
+    if (abortController.current) {
+      abortController.current.abort();
+    }
+    
+    // Create new controller
+    abortController.current = new AbortController();
+    
+    // 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]);
@@ -260,6 +318,15 @@ export default function Game({
     setScore(0);
     setResultsTable([]);
     setUsedHidden([]);
+    
+    // ✅ 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);
   };
 
@@ -280,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");
@@ -416,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
@@ -442,7 +522,10 @@ export default function Game({
                       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)}>
+                    }} onClick={() => {
+                      setTheme(t as Theme);
+                      startThemePreload(t as Theme);
+                    }}>
                     {t === "animals" ? "🐶 Animals" : t === "food" ? "🍎 Food" : "🧸 Toys"}
                   </button>
                 ))}