@mblinkov/whats-missing 20.0.47 → 20.0.49

package/package.json

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

package/src/Game.tsx

@@ -69,6 +69,27 @@ const levenshtein = (a: string, b: string) => {
   return dp[a.length][b.length];
 };
 
+// ✅ Preload utilities
+const preloadImage = (src: string): Promise<HTMLImageElement> => {
+  return new Promise((resolve) => {
+    // ✅ Проверяем, не загружена ли уже картинка
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = () => resolve(img); // Continue even on error, но img все равно создан
+    img.src = src;
+  });
+};
+
+const preloadImages = async (urls: string[], signal?: AbortSignal): Promise<Map<string, HTMLImageElement>> => {
+  const imageMap = new Map<string, HTMLImageElement>();
+  const promises = urls.map(async (url) => {
+    const img = await preloadImage(url);
+    imageMap.set(url, img);
+  });
+  await Promise.allSettled(promises);
+  return imageMap;
+};
+
 export default function Game({
   gameCubeSize,
   screenHeight,
@@ -92,6 +113,11 @@ export default function Game({
       if (style) {
         style.remove();
       }
+      
+      // ✅ Cancel any ongoing preloads
+      if (abortController.current) {
+        abortController.current.abort();
+      }
     };
   }, []);
 
@@ -102,7 +128,7 @@ export default function Game({
   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 [readyTime, setReadyTime] = useState(10);
   const [memorizeTime, setMemorizeTime] = useState(10);
   const [timeLeft, setTimeLeft] = useState(20);
   const [score, setScore] = useState(0);
@@ -126,6 +152,12 @@ export default function Game({
   const [isIPadProPortrait, setIsIPadProPortrait] = useState(false);
   const [isIPadProLandscape, setIsIPadProLandscape] = useState(false);
   const [isHorizontalLayout, setIsHorizontalLayout] = useState(false);
+  const [isWideScreen, setIsWideScreen] = useState(false);
+  
+  // ✅ Система предзагрузки изображений
+  const preloadedUrls = useRef<Set<string>>(new Set());
+  const preloadedImages = useRef<Map<string, HTMLImageElement>>(new Map());
+  const abortController = useRef<AbortController | null>(null);
 
   // ✅ адаптив под мобилки, планшеты и десктоп
   useEffect(() => {
@@ -135,6 +167,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 +234,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 +266,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 +294,33 @@ export default function Game({
   const getRandomSix = (arr: ImageItem[]) =>
     [...arr].sort(() => Math.random() - 0.5).slice(0, 6);
 
+  // ✅ Функция предзагрузки темы
+  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((imageMap) => {
+      // Mark as preloaded
+      urls.forEach(url => {
+        preloadedUrls.current.add(url);
+        if (imageMap.has(url)) {
+          preloadedImages.current.set(url, imageMap.get(url)!);
+        }
+      });
+    }).catch(() => {
+      // Ignore abort errors
+    });
+  };
+
   const startGame = () => {
     if (!theme) return;
     const selected = getRandomSix(themes[theme]);
@@ -260,6 +331,20 @@ 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((imageMap) => {
+      urls.forEach(url => {
+        preloadedUrls.current.add(url);
+        if (imageMap.has(url)) {
+          preloadedImages.current.set(url, imageMap.get(url)!);
+        }
+      });
+    }).catch(() => {
+      // Ignore abort errors
+    });
+    
     startRound(selected, [], true);
   };
 
@@ -280,9 +365,26 @@ 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((imageMap) => {
+        nextUrls.forEach(url => {
+          preloadedUrls.current.add(url);
+          if (imageMap.has(url)) {
+            preloadedImages.current.set(url, imageMap.get(url)!);
+          }
+        });
+      }).catch(() => {
+        // Ignore abort errors
+      });
+    }
+    
     if (isFirst) {
       setPhase("ready");
-      setReadyTime(3);
+      setReadyTime(10); // Увеличено до 10 секунд для VPN/медленных соединений
       setMemorizeTime(10);
     } else {
       setPhase("memorize");
@@ -351,6 +453,11 @@ export default function Game({
     currentRound < rounds ? (setCurrentRound((r) => r + 1), startRound()) : setFinished(true);
 
   const exitGame = () => {
+    // ✅ Cancel any ongoing preloads
+    if (abortController.current) {
+      abortController.current.abort();
+    }
+    
     setStarted(false);
     setFinished(false);
     setTheme(null);
@@ -416,6 +523,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 +550,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>
                 ))}
@@ -736,17 +847,30 @@ export default function Game({
                               : {}),
                           }}
                         >
-                          {!isHidden && (
-                            <img
-                              src={file.src}
-                              alt={file.name}
-                              style={{
-                                width: "100%",
-                                height: "100%",
-                                objectFit: "cover",
-                              }}
-                            />
-                          )}
+                          {!isHidden && (() => {
+                            // ✅ Используем уже загруженный объект Image чтобы браузер взял из кеша
+                            const preloadedImg = preloadedImages.current.get(file.src);
+                            // Используем src из уже загруженного объекта или оригинальный URL
+                            const imgSrc = preloadedImg?.complete && preloadedImg.src 
+                              ? preloadedImg.src 
+                              : file.src;
+                            
+                            return (
+                              <img
+                                key={`${file.src}-${preloadedImg?.complete ? 'loaded' : 'pending'}`}
+                                src={imgSrc}
+                                alt={file.name}
+                                fetchPriority="high"
+                                loading="eager"
+                                decoding="async"
+                                style={{
+                                  width: "100%",
+                                  height: "100%",
+                                  objectFit: "cover",
+                                }}
+                              />
+                            );
+                          })()}
                         </div>
                       );
                     })}