@mblinkov/whats-missing 20.0.44 → 20.0.46

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +219 -0
  2. package/dist/whats-missing.cjs.js +3 -3
  3. package/dist/whats-missing.es.js +281 -227
  4. package/package.json +1 -1
  5. package/src/Game.tsx +325 -64
package/src/Game.tsx CHANGED
@@ -14,6 +14,8 @@ type RoundResult = {
14
14
  // ✅ базовый reset
15
15
  const globalReset = () => {
16
16
  const style = document.createElement("style");
17
+ style.id = "whats-missing-reset"; // ✅ Добавляем ID для удаления
18
+
17
19
  style.textContent = `
18
20
  #whats-missing-root, #whats-missing-root * {
19
21
  box-sizing: border-box;
@@ -41,6 +43,13 @@ const globalReset = () => {
41
43
  overflow: hidden !important;
42
44
  }
43
45
  `;
46
+
47
+ // ✅ Удаляем старый стиль, если он есть
48
+ const existingStyle = document.getElementById("whats-missing-reset");
49
+ if (existingStyle) {
50
+ existingStyle.remove();
51
+ }
52
+
44
53
  document.head.appendChild(style);
45
54
  };
46
55
 
@@ -74,7 +83,15 @@ export default function Game({
74
83
  useEffect(() => {
75
84
  globalReset();
76
85
  return () => {
86
+ // ✅ Восстанавливаем overflow на html и body
87
+ document.documentElement.style.overflow = "";
77
88
  document.body.style.overflow = "";
89
+
90
+ // ✅ Удаляем наш style элемент
91
+ const style = document.getElementById("whats-missing-reset");
92
+ if (style) {
93
+ style.remove();
94
+ }
78
95
  };
79
96
  }, []);
80
97
 
@@ -100,14 +117,25 @@ export default function Game({
100
117
  const [scale, setScale] = useState(1);
101
118
  const [containerSize, setContainerSize] = useState<number | null>(null);
102
119
  const [isDesktopLayout, setIsDesktopLayout] = useState(false);
120
+ const [isIPadMiniPortrait, setIsIPadMiniPortrait] = useState(false);
121
+ const [isIPadMiniLandscape, setIsIPadMiniLandscape] = useState(false);
122
+ const [isIPadAirPortrait, setIsIPadAirPortrait] = useState(false);
123
+ const [isIPadAirLandscape, setIsIPadAirLandscape] = useState(false);
124
+ const [isSurfaceDuoPortrait, setIsSurfaceDuoPortrait] = useState(false);
125
+ const [isSurfaceDuoLandscape, setIsSurfaceDuoLandscape] = useState(false);
126
+ const [isIPadProPortrait, setIsIPadProPortrait] = useState(false);
127
+ const [isIPadProLandscape, setIsIPadProLandscape] = useState(false);
128
+ const [isHorizontalLayout, setIsHorizontalLayout] = useState(false);
129
+ const [loadedImages, setLoadedImages] = useState<Set<string>>(new Set());
130
+ const [preloadQueue, setPreloadQueue] = useState<string[]>([]);
103
131
 
104
132
  // ✅ адаптив под мобилки, планшеты и десктоп
105
133
  useEffect(() => {
106
134
  const resize = () => {
107
135
  const width = screenWidth ?? window.innerWidth;
108
136
  const height = screenHeight ?? window.innerHeight;
109
- const mobile = width < 768;
110
- const isLandscape = width > height && mobile;
137
+ const mobile = width < 768 || (width === 926 && height === 428) || (width === 932 && height === 430); // iPhone 14 Pro Max в landscape тоже считается мобильным
138
+ const isLandscape = (width > height && mobile) || (width === 926 && height === 428) || (width === 932 && height === 430); // iPhone 14 Pro Max в landscape
111
139
  const isSmallHeight = height < 700; // Nest Hub, маленькие экраны
112
140
 
113
141
  // Определяем iPhone до 14 Pro Max в landscape режиме
@@ -140,10 +168,57 @@ export default function Game({
140
168
  // Разрешение 1440x900 - ноутбуки и небольшие десктопы
141
169
  const is1440x900 = width === 1440 && height === 900;
142
170
 
171
+ // iPad Mini/Air размеры
172
+ // iPad Mini: 768x1024 (portrait), 1024x768 (landscape) - Chrome DevTools размеры
173
+ // iPad Air: 820x1180 (portrait), 1180x820 (landscape)
174
+ const isIPadMiniPortrait = width === 768 && height === 1024;
175
+ const isIPadMiniLandscape = width === 1024 && height === 768;
176
+ const isIPadAirPortrait = width === 820 && height === 1180;
177
+ const isIPadAirLandscape = width === 1180 && height === 820;
178
+
179
+ // Surface DUO размеры
180
+ // Surface DUO: 540x720 (portrait), 720x540 (landscape)
181
+ const isSurfaceDuoPortrait = width === 540 && height === 720;
182
+ const isSurfaceDuoLandscape = width === 720 && height === 540;
183
+
184
+ // iPad Pro размеры
185
+ // iPad Pro: 1024x1366 (portrait), 1366x1024 (landscape)
186
+ const isIPadProPortrait = width === 1024 && height === 1366;
187
+ const isIPadProLandscape = width === 1366 && height === 1024;
188
+
143
189
  // Популярные разрешения для горизонтального расположения кнопки Check
144
190
  const desktopLayout = width >= 1200 && height >= 600 && !mobile;
145
191
  setIsDesktopLayout(desktopLayout);
146
192
 
193
+ // Установка состояний для iPad и Surface DUO
194
+ setIsIPadMiniPortrait(isIPadMiniPortrait);
195
+ setIsIPadMiniLandscape(isIPadMiniLandscape);
196
+ setIsIPadAirPortrait(isIPadAirPortrait);
197
+ setIsIPadAirLandscape(isIPadAirLandscape);
198
+ setIsSurfaceDuoPortrait(isSurfaceDuoPortrait);
199
+ setIsSurfaceDuoLandscape(isSurfaceDuoLandscape);
200
+ setIsIPadProPortrait(isIPadProPortrait);
201
+ setIsIPadProLandscape(isIPadProLandscape);
202
+
203
+ // ✅ Вычисляем горизонтальный layout ОДИН РАЗ
204
+ const isHorizontal =
205
+ (mobile && width > height) ||
206
+ height < 700 ||
207
+ (width === 1366 && height === 766) ||
208
+ (width === 1366 && height === 768) ||
209
+ (width === 1280 && height === 720) ||
210
+ (width === 1440 && height === 900) ||
211
+ isIPadMiniPortrait ||
212
+ isIPadMiniLandscape ||
213
+ isIPadAirPortrait ||
214
+ isIPadAirLandscape ||
215
+ isSurfaceDuoPortrait ||
216
+ isSurfaceDuoLandscape ||
217
+ isIPadProPortrait ||
218
+ isIPadProLandscape ||
219
+ isDesktopLayout;
220
+ setIsHorizontalLayout(isHorizontal);
221
+
147
222
  const isOldIPhoneLandscape = isLandscape && height <= 428; // до iPhone 14 Pro Max включительно
148
223
 
149
224
  // treat only phones as "mobile" so tablets use the desktop (square/centered) layout
@@ -177,9 +252,33 @@ export default function Game({
177
252
  const getRandomSix = (arr: ImageItem[]) =>
178
253
  [...arr].sort(() => Math.random() - 0.5).slice(0, 6);
179
254
 
180
- const startGame = () => {
255
+ // ✅ Функции предзагрузки изображений
256
+ const preloadImage = (src: string): Promise<void> => {
257
+ return new Promise((resolve, reject) => {
258
+ const img = new Image();
259
+ img.onload = () => {
260
+ setLoadedImages(prev => new Set(prev).add(src));
261
+ resolve();
262
+ };
263
+ img.onerror = reject;
264
+ img.src = src;
265
+ });
266
+ };
267
+
268
+ const preloadImages = async (urls: string[]) => {
269
+ // Загружаем с задержкой, чтобы не блокировать UI
270
+ const promises = urls.map(url => preloadImage(url));
271
+ await Promise.allSettled(promises);
272
+ };
273
+
274
+ const startGame = async () => {
181
275
  if (!theme) return;
276
+
182
277
  const selected = getRandomSix(themes[theme]);
278
+
279
+ // ✅ Предзагружаем текущие изображения с высоким приоритетом
280
+ await preloadImages(selected.map(item => item.src));
281
+
183
282
  setFiles(selected);
184
283
  setStarted(true);
185
284
  setFinished(false);
@@ -187,6 +286,13 @@ export default function Game({
187
286
  setScore(0);
188
287
  setResultsTable([]);
189
288
  setUsedHidden([]);
289
+
290
+ // ✅ Загружаем следующий раунд в фоне
291
+ const nextBatch = getRandomSix(
292
+ themes[theme].filter(item => !selected.includes(item))
293
+ );
294
+ preloadImages(nextBatch.map(item => item.src)); // Не ждем завершения
295
+
190
296
  startRound(selected, [], true);
191
297
  };
192
298
 
@@ -362,13 +468,13 @@ export default function Game({
362
468
  <div style={styles.gmCenterScreen}>
363
469
  <h1 style={styles.gmHeadline1}>WHAT'S MISSING?</h1>
364
470
  <p style={styles.gmBodyM}>Select a theme:</p>
365
- <div style={{ display: "flex", gap: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) ? "8px" : "16px" }}>
471
+ <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" }}>
366
472
  {["animals", "food", "toys"].map((t) => (
367
473
  <button key={t} style={{
368
474
  ...styles.gmButton,
369
- padding: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) ? "8px 12px" : "12px 24px",
370
- fontSize: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) ? "12px" : "16px",
371
- minWidth: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) ? "70px" : "auto"
475
+ 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",
476
+ 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",
477
+ 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"
372
478
  }} onClick={() => setTheme(t as Theme)}>
373
479
  {t === "animals" ? "🐶 Animals" : t === "food" ? "🍎 Food" : "🧸 Toys"}
374
480
  </button>
@@ -376,16 +482,16 @@ export default function Game({
376
482
  </div>
377
483
  <div style={{ marginTop: 24 }}>
378
484
  <p style={styles.gmBodyS}>Choose number of rounds:</p>
379
- <div style={{ display: "flex", gap: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) ? "6px" : "12px", marginTop: 8 }}>
485
+ <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 }}>
380
486
  {[3, 4, 5].map((n) => (
381
487
  <button
382
488
  key={n}
383
489
  style={{
384
490
  ...styles.gmButton,
385
491
  ...(rounds === n ? styles.gmButtonActive : {}),
386
- padding: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) ? "6px 10px" : "12px 24px",
387
- fontSize: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) ? "12px" : "16px",
388
- minWidth: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) ? "40px" : "auto"
492
+ 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",
493
+ 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",
494
+ 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"
389
495
  }}
390
496
  onClick={() => setRounds(n)}
391
497
  >
@@ -402,9 +508,9 @@ export default function Game({
402
508
  <p style={styles.gmBodyM}>Rounds: {rounds}</p>
403
509
  <button style={{
404
510
  ...styles.gmButton,
405
- padding: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) ? "8px 16px" : "12px 24px",
406
- fontSize: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) ? "14px" : "16px",
407
- minWidth: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) ? "120px" : "auto"
511
+ 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",
512
+ 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",
513
+ 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"
408
514
  }} onClick={startGame}>
409
515
  ▶ Start game
410
516
  </button>
@@ -412,12 +518,29 @@ export default function Game({
412
518
  )}
413
519
  {finished && (
414
520
  <div style={styles.gmCenterScreen}>
415
- <h1 style={styles.gmHeadline1}>Results</h1>
416
- <h2 style={styles.gmHeadline3}>
417
- Your score: {score} / {rounds}
418
- </h2>
419
- <p style={{ ...styles.gmBodyM, color: "#10b981", marginTop: 12 }}>Yahoo! You did it! 🍬✨</p>
420
- <table style={styles.gmTable}>
521
+ <h1 style={{
522
+ ...styles.gmHeadline1,
523
+ 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,
524
+ 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 ? "2px" : styles.gmHeadline1.marginBottom
525
+ }}>Results</h1>
526
+ <h2 style={{
527
+ ...styles.gmHeadline3,
528
+ 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.gmHeadline3.marginTop,
529
+ 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 ? "2px" : styles.gmHeadline3.marginBottom
530
+ }}>
531
+ Your score: {score} / {rounds}
532
+ </h2>
533
+ <p style={{
534
+ ...styles.gmBodyM,
535
+ color: "#10b981",
536
+ 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" : "12px",
537
+ 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 ? "2px" : styles.gmBodyM.marginBottom
538
+ }}>Yahoo! You did it! 🍬✨</p>
539
+ <table style={{
540
+ ...styles.gmTable,
541
+ 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",
542
+ 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"
543
+ }}>
421
544
  <thead>
422
545
  <tr>
423
546
  <th>Round</th>
@@ -445,22 +568,22 @@ export default function Game({
445
568
  </table>
446
569
  <div style={{
447
570
  display: "flex",
448
- gap: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) ? "6px" : "12px",
449
- marginTop: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) ? "2px" : (window.innerWidth === 1366 && window.innerHeight === 766) || (window.innerWidth === 1366 && window.innerHeight === 768) || (window.innerWidth === 1280 && window.innerHeight === 720) || (window.innerWidth === 1440 && window.innerHeight === 900) || isDesktopLayout ? "12px" : "24px"
571
+ 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",
572
+ marginTop: (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) ? "2px" : (window.innerWidth === 1366 && window.innerHeight === 766) || (window.innerWidth === 1366 && window.innerHeight === 768) || (window.innerWidth === 1280 && window.innerHeight === 720) || (window.innerWidth === 1440 && window.innerHeight === 900) || isDesktopLayout ? "12px" : "24px"
450
573
  }}>
451
574
  <button style={{
452
575
  ...styles.gmButton,
453
- padding: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) ? "6px 10px" : "12px 24px",
454
- fontSize: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) ? "12px" : "16px",
455
- minWidth: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) ? "80px" : "auto"
576
+ 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",
577
+ 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",
578
+ 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"
456
579
  }} onClick={startGame}>
457
580
  🔁 Play again
458
581
  </button>
459
582
  <button style={{
460
583
  ...styles.gmButton,
461
- padding: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) ? "6px 10px" : "12px 24px",
462
- fontSize: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) ? "12px" : "16px",
463
- minWidth: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && window.innerWidth <= 375 && window.innerHeight <= 667) ? "80px" : "auto"
584
+ 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",
585
+ 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",
586
+ 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"
464
587
  }} onClick={exitGame}>
465
588
  ⬅️ Choose theme
466
589
  </button>
@@ -474,11 +597,13 @@ export default function Game({
474
597
  minHeight: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
475
598
  ? "45px" // iPhone SE: еще более компактная высота
476
599
  : (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
477
- ? "50px" // iPhone до 14 Pro Max в landscape: очень компактная высота
600
+ ? "45px" // iPhone до 14 Pro Max в landscape: такая же компактная как SE
478
601
  : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
479
- ? "50px" // iPhone XR в landscape: очень компактная высота
602
+ ? "45px" // iPhone XR в landscape: такая же компактная как SE
480
603
  : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
481
- ? "50px" // iPhone 12 Pro в landscape: очень компактная высота
604
+ ? "45px" // iPhone 12 Pro в landscape: такая же компактная как SE
605
+ : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
606
+ ? "45px" // iPhone 14 Pro Max в landscape: такая же компактная как SE
482
607
  : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700
483
608
  ? "60px" // iPhone landscape и малые экраны: компактная высота
484
609
  : "160px",
@@ -494,6 +619,8 @@ export default function Game({
494
619
  ? "8px" // iPhone XR в landscape: поднимаем еще выше
495
620
  : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
496
621
  ? "8px" // iPhone 12 Pro в landscape: поднимаем еще выше
622
+ : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
623
+ ? "8px" // iPhone 14 Pro Max в landscape: поднимаем еще выше
497
624
  : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700
498
625
  ? "15px" // iPhone landscape и малые экраны: поднимаем выше
499
626
  : "40px"
@@ -531,22 +658,54 @@ export default function Game({
531
658
  ? "120px" // mobile landscape: меньшая высота
532
659
  : isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
533
660
  ? "100px" // iPhone SE: очень компактная высота
661
+ : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
662
+ ? "100px" // iPhone XR в landscape: такая же компактная как SE
663
+ : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
664
+ ? "100px" // iPhone 12 Pro в landscape: такая же компактная как SE
665
+ : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
666
+ ? "100px" // iPhone 14 Pro Max в landscape: такая же компактная как SE
534
667
  : isMobile
535
668
  ? "150px" // mobile portrait: стандартная высота
536
669
  : window.innerHeight < 700
537
670
  ? "140px" // Nest Hub: компактная высота
671
+ : (typeof window !== "undefined" && window.devicePixelRatio >= 1.25 && window.devicePixelRatio <= 1.5) // Среднее масштабирование (125%-150%)
672
+ ? "240px" // Больше высота для экранов с масштабированием
538
673
  : "210px", // desktop: стандартная высота
539
674
  gap: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
540
675
  ? "12px" // iPhone SE: больше отступов
541
- : isMobile || window.innerHeight < 700 ? "8px" : "20px",
676
+ : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
677
+ ? "12px" // iPhone XR в landscape: такие же отступы как SE
678
+ : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
679
+ ? "12px" // iPhone 12 Pro в landscape: такие же отступы как SE
680
+ : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
681
+ ? "12px" // iPhone 14 Pro Max в landscape: такие же отступы как SE
682
+ : isMobile || window.innerHeight < 700
683
+ ? "8px"
684
+ : (typeof window !== "undefined" && window.devicePixelRatio >= 1.25 && window.devicePixelRatio <= 1.5) // Среднее масштабирование (125%-150%)
685
+ ? "24px" // Больше отступы для экранов с масштабированием
686
+ : "20px",
542
687
  justifyItems: "center",
543
688
  maxWidth: isMobile && window.innerWidth > window.innerHeight
544
689
  ? "90%" // mobile landscape: используем больше ширины
545
690
  : isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
546
691
  ? "95%" // iPhone SE: используем почти всю ширину
692
+ : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
693
+ ? "95%" // iPhone XR в landscape: используем почти всю ширину как SE
694
+ : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
695
+ ? "95%" // iPhone 12 Pro в landscape: используем почти всю ширину как SE
696
+ : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
697
+ ? "95%" // iPhone 14 Pro Max в landscape: используем почти всю ширину как SE
547
698
  : "100%",
548
699
  padding: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
549
700
  ? "8px" // iPhone SE: минимальные внутренние отступы
701
+ : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
702
+ ? "8px" // iPhone XR в landscape: минимальные отступы как SE
703
+ : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
704
+ ? "8px" // iPhone 12 Pro в landscape: минимальные отступы как SE
705
+ : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
706
+ ? "8px" // iPhone 14 Pro Max в landscape: минимальные отступы как SE
707
+ : (typeof window !== "undefined" && window.devicePixelRatio >= 1.25 && window.devicePixelRatio <= 1.5) // Среднее масштабирование (125%-150%)
708
+ ? "20px" // Дополнительные отступы для экранов с масштабированием
550
709
  : "16px",
551
710
  }}
552
711
  >
@@ -561,10 +720,22 @@ export default function Game({
561
720
  height: "100%",
562
721
  borderRadius: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
563
722
  ? "6px" // iPhone SE: меньшие скругления
723
+ : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
724
+ ? "6px" // iPhone XR в landscape: меньшие скругления как SE
725
+ : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
726
+ ? "6px" // iPhone 12 Pro в landscape: меньшие скругления как SE
727
+ : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
728
+ ? "6px" // iPhone 14 Pro Max в landscape: меньшие скругления как SE
564
729
  : "12px",
565
730
  overflow: "hidden",
566
731
  boxShadow: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
567
732
  ? "0 1px 4px rgba(0,0,0,0.1)" // iPhone SE: меньшие тени
733
+ : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
734
+ ? "0 1px 4px rgba(0,0,0,0.1)" // iPhone XR в landscape: меньшие тени как SE
735
+ : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
736
+ ? "0 1px 4px rgba(0,0,0,0.1)" // iPhone 12 Pro в landscape: меньшие тени как SE
737
+ : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
738
+ ? "0 1px 4px rgba(0,0,0,0.1)" // iPhone 14 Pro Max в landscape: меньшие тени как SE
568
739
  : "0 4px 12px rgba(0,0,0,0.15)",
569
740
  transition: "all 0.3s ease",
570
741
  cursor: "pointer",
@@ -572,6 +743,12 @@ export default function Game({
572
743
  ? {
573
744
  boxShadow: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
574
745
  ? "0 0 15px #10b981"
746
+ : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
747
+ ? "0 0 15px #10b981" // iPhone XR в landscape: такие же тени как SE
748
+ : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
749
+ ? "0 0 15px #10b981" // iPhone 12 Pro в landscape: такие же тени как SE
750
+ : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
751
+ ? "0 0 15px #10b981" // iPhone 14 Pro Max в landscape: такие же тени как SE
575
752
  : "0 0 20px #10b981",
576
753
  transform: "scale(1.03)"
577
754
  }
@@ -580,6 +757,12 @@ export default function Game({
580
757
  ? {
581
758
  boxShadow: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
582
759
  ? "0 0 15px #ef4444"
760
+ : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
761
+ ? "0 0 15px #ef4444" // iPhone XR в landscape: такие же тени как SE
762
+ : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
763
+ ? "0 0 15px #ef4444" // iPhone 12 Pro в landscape: такие же тени как SE
764
+ : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
765
+ ? "0 0 15px #ef4444" // iPhone 14 Pro Max в landscape: такие же тени как SE
583
766
  : "0 0 20px #ef4444",
584
767
  transform: "scale(1.03)"
585
768
  }
@@ -587,15 +770,37 @@ export default function Game({
587
770
  }}
588
771
  >
589
772
  {!isHidden && (
590
- <img
591
- src={file.src}
592
- alt={file.name}
593
- style={{
594
- width: "100%",
595
- height: "100%",
596
- objectFit: "cover",
597
- }}
598
- />
773
+ <div style={{ position: "relative", width: "100%", height: "100%" }}>
774
+ {!loadedImages.has(file.src) && (
775
+ <div style={{
776
+ position: "absolute",
777
+ top: 0,
778
+ left: 0,
779
+ width: "100%",
780
+ height: "100%",
781
+ background: "linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)",
782
+ backgroundSize: "200% 100%",
783
+ borderRadius: "inherit",
784
+ display: "flex",
785
+ justifyContent: "center",
786
+ alignItems: "center"
787
+ }} />
788
+ )}
789
+ <img
790
+ src={file.src}
791
+ alt={file.name}
792
+ // @ts-ignore - fetchpriority is a newer API
793
+ fetchpriority={loadedImages.has(file.src) ? "auto" : "high"}
794
+ onLoad={() => setLoadedImages(prev => new Set(prev).add(file.src))}
795
+ style={{
796
+ width: "100%",
797
+ height: "100%",
798
+ objectFit: "cover",
799
+ opacity: loadedImages.has(file.src) ? 1 : 0,
800
+ transition: "opacity 0.3s ease"
801
+ }}
802
+ />
803
+ </div>
599
804
  )}
600
805
  </div>
601
806
  );
@@ -606,22 +811,26 @@ export default function Game({
606
811
  marginTop: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
607
812
  ? "1px" // iPhone SE: еще более минимальный отступ
608
813
  : (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
609
- ? "2px" // iPhone до 14 Pro Max в landscape: минимальный отступ
814
+ ? "1px" // iPhone до 14 Pro Max в landscape: такой же как SE
610
815
  : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
611
- ? "2px" // iPhone XR в landscape: минимальный отступ
816
+ ? "1px" // iPhone XR в landscape: такой же как SE
612
817
  : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
613
- ? "2px" // iPhone 12 Pro в landscape: минимальный отступ
818
+ ? "1px" // iPhone 12 Pro в landscape: такой же как SE
819
+ : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
820
+ ? "1px" // iPhone 14 Pro Max в landscape: такой же как SE
614
821
  : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700
615
822
  ? "4px" // iPhone landscape и малые экраны: минимальный отступ
616
823
  : "16px",
617
824
  height: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
618
825
  ? "40px" // iPhone SE: еще более компактная высота
619
826
  : (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
620
- ? "45px" // iPhone до 14 Pro Max в landscape: очень компактная высота
827
+ ? "40px" // iPhone до 14 Pro Max в landscape: такая же как SE
621
828
  : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
622
- ? "45px" // iPhone XR в landscape: очень компактная высота
829
+ ? "40px" // iPhone XR в landscape: такая же как SE
623
830
  : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
624
- ? "45px" // iPhone 12 Pro в landscape: очень компактная высота
831
+ ? "40px" // iPhone 12 Pro в landscape: такая же как SE
832
+ : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
833
+ ? "40px" // iPhone 14 Pro Max в landscape: такая же как SE
625
834
  : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700
626
835
  ? "50px" // iPhone landscape и малые экраны: компактная высота
627
836
  : "80px"
@@ -629,15 +838,17 @@ export default function Game({
629
838
  {phase === "guess" && !answered && (
630
839
  <div style={{
631
840
  display: "flex",
632
- 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) || isDesktopLayout ? "row" : "column",
841
+ flexDirection: isHorizontalLayout ? "row" : "column",
633
842
  gap: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
634
843
  ? "3px" // iPhone SE: еще более минимальный отступ
635
844
  : (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
636
- ? "4px" // iPhone до 14 Pro Max в landscape: минимальный отступ
845
+ ? "3px" // iPhone до 14 Pro Max в landscape: такой же как SE
637
846
  : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
638
- ? "4px" // iPhone XR в landscape: минимальный отступ
847
+ ? "3px" // iPhone XR в landscape: такой же как SE
639
848
  : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
640
- ? "4px" // iPhone 12 Pro в landscape: минимальный отступ
849
+ ? "3px" // iPhone 12 Pro в landscape: такой же как SE
850
+ : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
851
+ ? "3px" // iPhone 14 Pro Max в landscape: такой же как SE
641
852
  : (window.innerWidth === 1366 && window.innerHeight === 766) // 1366x766
642
853
  ? "8px" // 1366x766: отступ между инпутом и кнопкой
643
854
  : (window.innerWidth === 1366 && window.innerHeight === 768) // 1366x768
@@ -648,6 +859,8 @@ export default function Game({
648
859
  ? "8px" // 1440x900: отступ между инпутом и кнопкой
649
860
  : isDesktopLayout // Десктопные разрешения
650
861
  ? "8px" // Десктопные разрешения: отступ между инпутом и кнопкой
862
+ : isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape
863
+ ? "8px" // iPad и Surface DUO: отступ между инпутом и кнопкой
651
864
  : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "6px" : "12px",
652
865
  alignItems: "center",
653
866
  justifyContent: "center",
@@ -655,11 +868,13 @@ export default function Game({
655
868
  maxWidth: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
656
869
  ? "270px" // iPhone SE: еще более компактная ширина
657
870
  : (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
658
- ? "350px" // iPhone до 14 Pro Max в landscape: компактная ширина
871
+ ? "270px" // iPhone до 14 Pro Max в landscape: такая же как SE
659
872
  : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
660
- ? "350px" // iPhone XR в landscape: компактная ширина
873
+ ? "270px" // iPhone XR в landscape: такая же как SE
661
874
  : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
662
- ? "350px" // iPhone 12 Pro в landscape: компактная ширина
875
+ ? "270px" // iPhone 12 Pro в landscape: такая же как SE
876
+ : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
877
+ ? "270px" // iPhone 14 Pro Max в landscape: такая же как SE
663
878
  : (window.innerWidth === 1366 && window.innerHeight === 766) // 1366x766
664
879
  ? "400px" // 1366x766: ширина контейнера
665
880
  : (window.innerWidth === 1366 && window.innerHeight === 768) // 1366x768
@@ -670,6 +885,8 @@ export default function Game({
670
885
  ? "400px" // 1440x900: ширина контейнера
671
886
  : isDesktopLayout // Десктопные разрешения
672
887
  ? "400px" // Десктопные разрешения: ширина контейнера
888
+ : isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape
889
+ ? "400px" // iPad и Surface DUO: ширина контейнера
673
890
  : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "400px" : "300px"
674
891
  }}>
675
892
  <>
@@ -683,11 +900,13 @@ export default function Game({
683
900
  width: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
684
901
  ? "170px" // iPhone SE: еще более компактная ширина
685
902
  : (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
686
- ? "220px" // iPhone до 14 Pro Max в landscape: компактная ширина
903
+ ? "170px" // iPhone до 14 Pro Max в landscape: такая же как SE
687
904
  : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
688
- ? "220px" // iPhone XR в landscape: компактная ширина
905
+ ? "170px" // iPhone XR в landscape: такая же как SE
689
906
  : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
690
- ? "220px" // iPhone 12 Pro в landscape: компактная ширина
907
+ ? "170px" // iPhone 12 Pro в landscape: такая же как SE
908
+ : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
909
+ ? "170px" // iPhone 14 Pro Max в landscape: такая же как SE
691
910
  : (window.innerWidth === 1366 && window.innerHeight === 766) // 1366x766
692
911
  ? "250px" // 1366x766: ширина инпута
693
912
  : (window.innerWidth === 1366 && window.innerHeight === 768) // 1366x768
@@ -698,15 +917,19 @@ export default function Game({
698
917
  ? "250px" // 1440x900: ширина инпута
699
918
  : isDesktopLayout // Десктопные разрешения
700
919
  ? "250px" // Десктопные разрешения: ширина инпута
920
+ : isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape
921
+ ? "250px" // iPad и Surface DUO: ширина инпута
701
922
  : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "250px" : "auto",
702
923
  padding: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
703
924
  ? "5px 6px" // iPhone SE: еще более компактный padding
704
925
  : (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
705
- ? "6px 8px" // iPhone до 14 Pro Max в landscape: компактный padding
926
+ ? "5px 6px" // iPhone до 14 Pro Max в landscape: такой же как SE
706
927
  : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
707
- ? "6px 8px" // iPhone XR в landscape: компактный padding
928
+ ? "5px 6px" // iPhone XR в landscape: такой же как SE
708
929
  : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
709
- ? "6px 8px" // iPhone 12 Pro в landscape: компактный padding
930
+ ? "5px 6px" // iPhone 12 Pro в landscape: такой же как SE
931
+ : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
932
+ ? "5px 6px" // iPhone 14 Pro Max в landscape: такой же как SE
710
933
  : (window.innerWidth === 1366 && window.innerHeight === 766) // 1366x766
711
934
  ? "10px 12px" // 1366x766: padding инпута
712
935
  : (window.innerWidth === 1366 && window.innerHeight === 768) // 1366x768
@@ -717,15 +940,19 @@ export default function Game({
717
940
  ? "10px 12px" // 1440x900: padding инпута
718
941
  : isDesktopLayout // Десктопные разрешения
719
942
  ? "10px 12px" // Десктопные разрешения: padding инпута
943
+ : isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape
944
+ ? "10px 12px" // iPad и Surface DUO: padding инпута
720
945
  : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "10px 12px" : "12px 16px",
721
946
  fontSize: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
722
947
  ? "10px" // iPhone SE: еще меньший шрифт
723
948
  : (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
724
- ? "11px" // iPhone до 14 Pro Max в landscape: компактный шрифт
949
+ ? "10px" // iPhone до 14 Pro Max в landscape: такой же как SE
725
950
  : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
726
951
  ? "11px" // iPhone XR в landscape: компактный шрифт
727
952
  : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
728
- ? "11px" // iPhone 12 Pro в landscape: компактный шрифт
953
+ ? "10px" // iPhone 12 Pro в landscape: такой же как SE
954
+ : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
955
+ ? "10px" // iPhone 14 Pro Max в landscape: такой же как SE
729
956
  : (window.innerWidth === 1366 && window.innerHeight === 766) // 1366x766
730
957
  ? "14px" // 1366x766: размер шрифта инпута
731
958
  : (window.innerWidth === 1366 && window.innerHeight === 768) // 1366x768
@@ -736,14 +963,16 @@ export default function Game({
736
963
  ? "14px" // 1440x900: размер шрифта инпута
737
964
  : isDesktopLayout // Десктопные разрешения
738
965
  ? "14px" // Десктопные разрешения: размер шрифта инпута
966
+ : isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape
967
+ ? "14px" // iPad и Surface DUO: размер шрифта инпута
739
968
  : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "14px" : "16px",
740
- 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) || isDesktopLayout ? "1" : "none"
969
+ flex: isHorizontalLayout ? "1" : "none"
741
970
  }}
742
971
  />
743
972
  <button
744
973
  style={{
745
974
  ...styles.gmButton,
746
- 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) || isDesktopLayout ? "8px" : "0",
975
+ marginLeft: isHorizontalLayout ? "8px" : "0",
747
976
  padding: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
748
977
  ? "5px 8px" // iPhone SE: еще более компактный padding
749
978
  : (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
@@ -752,6 +981,8 @@ export default function Game({
752
981
  ? "6px 10px" // iPhone XR в landscape: компактный padding
753
982
  : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
754
983
  ? "6px 10px" // iPhone 12 Pro в landscape: компактный padding
984
+ : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
985
+ ? "6px 10px" // iPhone 14 Pro Max в landscape: компактный padding
755
986
  : (window.innerWidth === 1366 && window.innerHeight === 766) // 1366x766
756
987
  ? "10px 16px" // 1366x766: padding кнопки Check
757
988
  : (window.innerWidth === 1366 && window.innerHeight === 768) // 1366x768
@@ -762,6 +993,8 @@ export default function Game({
762
993
  ? "10px 16px" // 1440x900: padding кнопки Check
763
994
  : isDesktopLayout // Десктопные разрешения
764
995
  ? "10px 16px" // Десктопные разрешения: padding кнопки Check
996
+ : isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape
997
+ ? "10px 16px" // iPad и Surface DUO: padding кнопки Check
765
998
  : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "10px 16px" : "12px 24px",
766
999
  fontSize: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
767
1000
  ? "10px" // iPhone SE: еще меньший шрифт
@@ -771,6 +1004,8 @@ export default function Game({
771
1004
  ? "11px" // iPhone XR в landscape: компактный шрифт
772
1005
  : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
773
1006
  ? "11px" // iPhone 12 Pro в landscape: компактный шрифт
1007
+ : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
1008
+ ? "11px" // iPhone 14 Pro Max в landscape: компактный шрифт
774
1009
  : (window.innerWidth === 1366 && window.innerHeight === 766) // 1366x766
775
1010
  ? "14px" // 1366x766: размер шрифта кнопки Check
776
1011
  : (window.innerWidth === 1366 && window.innerHeight === 768) // 1366x768
@@ -781,6 +1016,8 @@ export default function Game({
781
1016
  ? "14px" // 1440x900: размер шрифта кнопки Check
782
1017
  : isDesktopLayout // Десктопные разрешения
783
1018
  ? "14px" // Десктопные разрешения: размер шрифта кнопки Check
1019
+ : isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape
1020
+ ? "14px" // iPad и Surface DUO: размер шрифта кнопки Check
784
1021
  : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "14px" : "16px",
785
1022
  minWidth: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
786
1023
  ? "45px" // iPhone SE: еще более компактная ширина
@@ -790,6 +1027,8 @@ export default function Game({
790
1027
  ? "55px" // iPhone XR в landscape: компактная ширина
791
1028
  : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
792
1029
  ? "55px" // iPhone 12 Pro в landscape: компактная ширина
1030
+ : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
1031
+ ? "55px" // iPhone 14 Pro Max в landscape: компактная ширина
793
1032
  : (window.innerWidth === 1366 && window.innerHeight === 766) // 1366x766
794
1033
  ? "80px" // 1366x766: минимальная ширина кнопки Check
795
1034
  : (window.innerWidth === 1366 && window.innerHeight === 768) // 1366x768
@@ -800,6 +1039,8 @@ export default function Game({
800
1039
  ? "80px" // 1440x900: минимальная ширина кнопки Check
801
1040
  : isDesktopLayout // Десктопные разрешения
802
1041
  ? "80px" // Десктопные разрешения: минимальная ширина кнопки Check
1042
+ : isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape
1043
+ ? "80px" // iPad и Surface DUO: минимальная ширина кнопки Check
803
1044
  : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "80px" : "100px",
804
1045
  flexShrink: 0
805
1046
  }}
@@ -822,10 +1063,20 @@ export default function Game({
822
1063
  ? "6px 10px" // iPhone XR в landscape: компактный padding
823
1064
  : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
824
1065
  ? "6px 10px" // iPhone 12 Pro в landscape: компактный padding
1066
+ : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
1067
+ ? "6px 10px" // iPhone 14 Pro Max в landscape: компактный padding
825
1068
  : (window.innerWidth === 1366 && window.innerHeight === 766) // 1366x766
826
1069
  ? "10px 16px" // 1366x766: padding кнопки Next round
827
1070
  : (window.innerWidth === 1366 && window.innerHeight === 768) // 1366x768
828
1071
  ? "10px 16px" // 1366x768: padding кнопки Next round
1072
+ : (window.innerWidth === 1280 && window.innerHeight === 720) // 1280x720
1073
+ ? "10px 16px" // 1280x720: padding кнопки Next round
1074
+ : (window.innerWidth === 1440 && window.innerHeight === 900) // 1440x900
1075
+ ? "10px 16px" // 1440x900: padding кнопки Next round
1076
+ : isDesktopLayout // Десктопные разрешения
1077
+ ? "10px 16px" // Десктопные разрешения: padding кнопки Next round
1078
+ : isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape
1079
+ ? "10px 16px" // iPad и Surface DUO: padding кнопки Next round
829
1080
  : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "10px 16px" : "12px 24px",
830
1081
  fontSize: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
831
1082
  ? "10px" // iPhone SE: еще меньший шрифт
@@ -835,10 +1086,20 @@ export default function Game({
835
1086
  ? "11px" // iPhone XR в landscape: компактный шрифт
836
1087
  : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
837
1088
  ? "11px" // iPhone 12 Pro в landscape: компактный шрифт
1089
+ : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
1090
+ ? "11px" // iPhone 14 Pro Max в landscape: компактный шрифт
838
1091
  : (window.innerWidth === 1366 && window.innerHeight === 766) // 1366x766
839
1092
  ? "14px" // 1366x766: размер шрифта кнопки Next round
840
1093
  : (window.innerWidth === 1366 && window.innerHeight === 768) // 1366x768
841
1094
  ? "14px" // 1366x768: размер шрифта кнопки Next round
1095
+ : (window.innerWidth === 1280 && window.innerHeight === 720) // 1280x720
1096
+ ? "14px" // 1280x720: размер шрифта кнопки Next round
1097
+ : (window.innerWidth === 1440 && window.innerHeight === 900) // 1440x900
1098
+ ? "14px" // 1440x900: размер шрифта кнопки Next round
1099
+ : isDesktopLayout // Десктопные разрешения
1100
+ ? "14px" // Десктопные разрешения: размер шрифта кнопки Next round
1101
+ : isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape
1102
+ ? "14px" // iPad и Surface DUO: размер шрифта кнопки Next round
842
1103
  : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "14px" : "16px"
843
1104
  }} onClick={nextRound}>
844
1105
  Next round