@mblinkov/whats-missing 20.0.45 → 20.0.46

package/package.json

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

package/src/Game.tsx

@@ -14,6 +14,8 @@ type RoundResult = {
 // ✅ базовый reset
 const globalReset = () => {
   const style = document.createElement("style");
+  style.id = "whats-missing-reset"; // ✅ Добавляем ID для удаления
+  
   style.textContent = `
     #whats-missing-root, #whats-missing-root * {
       box-sizing: border-box;
@@ -41,6 +43,13 @@ const globalReset = () => {
       overflow: hidden !important;
     }
   `;
+  
+  // ✅ Удаляем старый стиль, если он есть
+  const existingStyle = document.getElementById("whats-missing-reset");
+  if (existingStyle) {
+    existingStyle.remove();
+  }
+  
   document.head.appendChild(style);
 };
 
@@ -74,7 +83,15 @@ export default function Game({
   useEffect(() => {
     globalReset();
     return () => {
+      // ✅ Восстанавливаем overflow на html и body
+      document.documentElement.style.overflow = "";
       document.body.style.overflow = "";
+      
+      // ✅ Удаляем наш style элемент
+      const style = document.getElementById("whats-missing-reset");
+      if (style) {
+        style.remove();
+      }
     };
   }, []);
 
@@ -108,6 +125,9 @@ export default function Game({
   const [isSurfaceDuoLandscape, setIsSurfaceDuoLandscape] = useState(false);
   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[]>([]);
 
   // ✅ адаптив под мобилки, планшеты и десктоп
   useEffect(() => {
@@ -180,6 +200,25 @@ export default function Game({
       setIsIPadProPortrait(isIPadProPortrait);
       setIsIPadProLandscape(isIPadProLandscape);
       
+      // ✅ Вычисляем горизонтальный layout ОДИН РАЗ
+      const isHorizontal = 
+        (mobile && width > height) || 
+        height < 700 || 
+        (width === 1366 && height === 766) || 
+        (width === 1366 && height === 768) || 
+        (width === 1280 && height === 720) || 
+        (width === 1440 && height === 900) || 
+        isIPadMiniPortrait || 
+        isIPadMiniLandscape || 
+        isIPadAirPortrait || 
+        isIPadAirLandscape || 
+        isSurfaceDuoPortrait || 
+        isSurfaceDuoLandscape || 
+        isIPadProPortrait || 
+        isIPadProLandscape || 
+        isDesktopLayout;
+      setIsHorizontalLayout(isHorizontal);
+      
       const isOldIPhoneLandscape = isLandscape && height <= 428; // до iPhone 14 Pro Max включительно
 
       // treat only phones as "mobile" so tablets use the desktop (square/centered) layout
@@ -213,9 +252,33 @@ export default function Game({
   const getRandomSix = (arr: ImageItem[]) =>
     [...arr].sort(() => Math.random() - 0.5).slice(0, 6);
 
-  const startGame = () => {
+  // ✅ Функции предзагрузки изображений
+  const preloadImage = (src: string): Promise<void> => {
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.onload = () => {
+        setLoadedImages(prev => new Set(prev).add(src));
+        resolve();
+      };
+      img.onerror = reject;
+      img.src = src;
+    });
+  };
+
+  const preloadImages = async (urls: string[]) => {
+    // Загружаем с задержкой, чтобы не блокировать UI
+    const promises = urls.map(url => preloadImage(url));
+    await Promise.allSettled(promises);
+  };
+
+  const startGame = async () => {
     if (!theme) return;
+    
     const selected = getRandomSix(themes[theme]);
+    
+    // ✅ Предзагружаем текущие изображения с высоким приоритетом
+    await preloadImages(selected.map(item => item.src));
+    
     setFiles(selected);
     setStarted(true);
     setFinished(false);
@@ -223,6 +286,13 @@ export default function Game({
     setScore(0);
     setResultsTable([]);
     setUsedHidden([]);
+    
+    // ✅ Загружаем следующий раунд в фоне
+    const nextBatch = getRandomSix(
+      themes[theme].filter(item => !selected.includes(item))
+    );
+    preloadImages(nextBatch.map(item => item.src)); // Не ждем завершения
+    
     startRound(selected, [], true);
   };
 
@@ -598,6 +668,8 @@ export default function Game({
                         ? "150px" // mobile portrait: стандартная высота
                         : window.innerHeight < 700
                         ? "140px" // Nest Hub: компактная высота
+                        : (typeof window !== "undefined" && window.devicePixelRatio >= 1.25 && window.devicePixelRatio <= 1.5) // Среднее масштабирование (125%-150%)
+                        ? "240px" // Больше высота для экранов с масштабированием
                         : "210px", // desktop: стандартная высота
                       gap: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
                         ? "12px" // iPhone SE: больше отступов
@@ -607,7 +679,11 @@ export default function Game({
                         ? "12px" // iPhone 12 Pro в landscape: такие же отступы как SE
                         : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
                         ? "12px" // iPhone 14 Pro Max в landscape: такие же отступы как SE
-                        : isMobile || window.innerHeight < 700 ? "8px" : "20px",
+                        : isMobile || window.innerHeight < 700 
+                        ? "8px" 
+                        : (typeof window !== "undefined" && window.devicePixelRatio >= 1.25 && window.devicePixelRatio <= 1.5) // Среднее масштабирование (125%-150%)
+                        ? "24px" // Больше отступы для экранов с масштабированием
+                        : "20px",
                       justifyItems: "center",
                       maxWidth: isMobile && window.innerWidth > window.innerHeight 
                         ? "90%" // mobile landscape: используем больше ширины
@@ -626,8 +702,10 @@ export default function Game({
                         ? "8px" // iPhone XR в landscape: минимальные отступы как SE
                         : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
                         ? "8px" // iPhone 12 Pro в landscape: минимальные отступы как SE
-                        : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
+ : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
                         ? "8px" // iPhone 14 Pro Max в landscape: минимальные отступы как SE
+                        : (typeof window !== "undefined" && window.devicePixelRatio >= 1.25 && window.devicePixelRatio <= 1.5) // Среднее масштабирование (125%-150%)
+                        ? "20px" // Дополнительные отступы для экранов с масштабированием
                         : "16px",
                     }}
                   >
@@ -692,15 +770,37 @@ export default function Game({
                           }}
                         >
                           {!isHidden && (
-                            <img
-                              src={file.src}
-                              alt={file.name}
-                              style={{
-                                width: "100%",
-                                height: "100%",
-                                objectFit: "cover",
-                              }}
-                            />
+                            <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>
                           )}
                         </div>
                       );
@@ -738,7 +838,7 @@ export default function Game({
                   {phase === "guess" && !answered && (
                     <div style={{
                       display: "flex",
-                      flexDirection: (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 || (window.innerWidth === 1366 && window.innerHeight === 766) || (window.innerWidth === 1366 && window.innerHeight === 768) || (window.innerWidth === 1280 && window.innerHeight === 720) || (window.innerWidth === 1440 && window.innerHeight === 900) || isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape || isDesktopLayout ? "row" : "column",
+                      flexDirection: isHorizontalLayout ? "row" : "column",
                       gap: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
                         ? "3px" // iPhone SE: еще более минимальный отступ
                         : (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
@@ -866,13 +966,13 @@ export default function Game({
                                 : isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape
                                 ? "14px" // iPad и Surface DUO: размер шрифта инпута
                                 : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "14px" : "16px",
-                              flex: (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 || (window.innerWidth === 1366 && window.innerHeight === 766) || (window.innerWidth === 1366 && window.innerHeight === 768) || (window.innerWidth === 1280 && window.innerHeight === 720) || (window.innerWidth === 1440 && window.innerHeight === 900) || isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape || isDesktopLayout ? "1" : "none"
+                              flex: isHorizontalLayout ? "1" : "none"
                             }}
                           />
                           <button
                             style={{ 
                               ...styles.gmButton, 
-                              marginLeft: (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 || (window.innerWidth === 1366 && window.innerHeight === 766) || (window.innerWidth === 1366 && window.innerHeight === 768) || (window.innerWidth === 1280 && window.innerHeight === 720) || (window.innerWidth === 1440 && window.innerHeight === 900) || isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape || isDesktopLayout ? "8px" : "0",
+                              marginLeft: isHorizontalLayout ? "8px" : "0",
                               padding: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
                                 ? "5px 8px" // iPhone SE: еще более компактный padding
                                 : (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)