@mblinkov/whats-missing 20.0.45 → 20.0.47

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 +245 -0
  2. package/dist/whats-missing.cjs.js +3 -3
  3. package/dist/whats-missing.es.js +177 -171
  4. package/package.json +1 -1
  5. package/src/Game.tsx +176 -131
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mblinkov/whats-missing",
3
- "version": "20.0.45",
3
+ "version": "20.0.47",
4
4
  "main": "dist/whats-missing.umd.js",
5
5
  "module": "dist/whats-missing.es.js",
6
6
  "types": "dist/index.d.ts",
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
 
@@ -108,6 +125,7 @@ export default function Game({
108
125
  const [isSurfaceDuoLandscape, setIsSurfaceDuoLandscape] = useState(false);
109
126
  const [isIPadProPortrait, setIsIPadProPortrait] = useState(false);
110
127
  const [isIPadProLandscape, setIsIPadProLandscape] = useState(false);
128
+ const [isHorizontalLayout, setIsHorizontalLayout] = useState(false);
111
129
 
112
130
  // ✅ адаптив под мобилки, планшеты и десктоп
113
131
  useEffect(() => {
@@ -180,6 +198,25 @@ export default function Game({
180
198
  setIsIPadProPortrait(isIPadProPortrait);
181
199
  setIsIPadProLandscape(isIPadProLandscape);
182
200
 
201
+ // ✅ Вычисляем горизонтальный layout ОДИН РАЗ
202
+ const isHorizontal =
203
+ (mobile && width > height) ||
204
+ height < 700 ||
205
+ (width === 1366 && height === 766) ||
206
+ (width === 1366 && height === 768) ||
207
+ (width === 1280 && height === 720) ||
208
+ (width === 1440 && height === 900) ||
209
+ isIPadMiniPortrait ||
210
+ isIPadMiniLandscape ||
211
+ isIPadAirPortrait ||
212
+ isIPadAirLandscape ||
213
+ isSurfaceDuoPortrait ||
214
+ isSurfaceDuoLandscape ||
215
+ isIPadProPortrait ||
216
+ isIPadProLandscape ||
217
+ isDesktopLayout;
218
+ setIsHorizontalLayout(isHorizontal);
219
+
183
220
  const isOldIPhoneLandscape = isLandscape && height <= 428; // до iPhone 14 Pro Max включительно
184
221
 
185
222
  // treat only phones as "mobile" so tablets use the desktop (square/centered) layout
@@ -328,20 +365,20 @@ export default function Game({
328
365
 
329
366
  return (
330
367
  // ensure logo is positioned inside the square container
331
- <div style={{ ...styles.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }}>
332
- <picture>
333
- <source
334
- srcSet={window.origin + "/cloud/speakid/games/whatsmissing/logo.svg"}
335
- type="image/svg+xml"
336
- />
337
- <img
338
- src={window.origin + "/cloud/speakid/games/whatsmissing/logo.png"}
339
- alt="SPEAKID Logo"
340
- style={styles.gmLogoImg}
341
- loading="lazy"
342
- />
343
- </picture>
344
- </div>
368
+ <div style={{ ...styles.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }}>
369
+ <picture>
370
+ <source
371
+ srcSet={window.origin + "/cloud/speakid/games/whatsmissing/logo.svg"}
372
+ type="image/svg+xml"
373
+ />
374
+ <img
375
+ src={window.origin + "/cloud/speakid/games/whatsmissing/logo.png"}
376
+ alt="SPEAKID Logo"
377
+ style={styles.gmLogoImg}
378
+ loading="lazy"
379
+ />
380
+ </picture>
381
+ </div>
345
382
  );
346
383
  },
347
384
  [isMobile]
@@ -392,62 +429,62 @@ export default function Game({
392
429
  }}
393
430
  >
394
431
  <div id="whats-missing-root">
395
- {!isMobile && MemoizedLogo}
432
+ {!isMobile && MemoizedLogo}
396
433
  {/* ====== ИГРОВАЯ ЛОГИКА ====== */}
397
- {!theme && !started && (
398
- <div style={styles.gmCenterScreen}>
399
- <h1 style={styles.gmHeadline1}>WHAT'S MISSING?</h1>
400
- <p style={styles.gmBodyM}>Select a theme:</p>
434
+ {!theme && !started && (
435
+ <div style={styles.gmCenterScreen}>
436
+ <h1 style={styles.gmHeadline1}>WHAT'S MISSING?</h1>
437
+ <p style={styles.gmBodyM}>Select a theme:</p>
401
438
  <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" }}>
402
- {["animals", "food", "toys"].map((t) => (
439
+ {["animals", "food", "toys"].map((t) => (
403
440
  <button key={t} style={{
404
441
  ...styles.gmButton,
405
442
  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",
406
443
  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",
407
444
  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"
408
445
  }} onClick={() => setTheme(t as Theme)}>
409
- {t === "animals" ? "🐶 Animals" : t === "food" ? "🍎 Food" : "🧸 Toys"}
410
- </button>
411
- ))}
412
- </div>
413
- <div style={{ marginTop: 24 }}>
414
- <p style={styles.gmBodyS}>Choose number of rounds:</p>
446
+ {t === "animals" ? "🐶 Animals" : t === "food" ? "🍎 Food" : "🧸 Toys"}
447
+ </button>
448
+ ))}
449
+ </div>
450
+ <div style={{ marginTop: 24 }}>
451
+ <p style={styles.gmBodyS}>Choose number of rounds:</p>
415
452
  <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 }}>
416
- {[3, 4, 5].map((n) => (
417
- <button
418
- key={n}
419
- style={{
420
- ...styles.gmButton,
421
- ...(rounds === n ? styles.gmButtonActive : {}),
453
+ {[3, 4, 5].map((n) => (
454
+ <button
455
+ key={n}
456
+ style={{
457
+ ...styles.gmButton,
458
+ ...(rounds === n ? styles.gmButtonActive : {}),
422
459
  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",
423
460
  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",
424
461
  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"
425
- }}
426
- onClick={() => setRounds(n)}
427
- >
428
- {n}
429
- </button>
430
- ))}
431
- </div>
462
+ }}
463
+ onClick={() => setRounds(n)}
464
+ >
465
+ {n}
466
+ </button>
467
+ ))}
432
468
  </div>
433
469
  </div>
434
- )}
435
- {theme && !started && (
436
- <div style={styles.gmCenterScreen}>
437
- <h1 style={styles.gmHeadline1}>Theme selected: {theme}</h1>
438
- <p style={styles.gmBodyM}>Rounds: {rounds}</p>
470
+ </div>
471
+ )}
472
+ {theme && !started && (
473
+ <div style={styles.gmCenterScreen}>
474
+ <h1 style={styles.gmHeadline1}>Theme selected: {theme}</h1>
475
+ <p style={styles.gmBodyM}>Rounds: {rounds}</p>
439
476
  <button style={{
440
477
  ...styles.gmButton,
441
478
  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",
442
479
  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",
443
480
  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"
444
481
  }} onClick={startGame}>
445
- ▶ Start game
446
- </button>
447
- </div>
448
- )}
449
- {finished && (
450
- <div style={styles.gmCenterScreen}>
482
+ ▶ Start game
483
+ </button>
484
+ </div>
485
+ )}
486
+ {finished && (
487
+ <div style={styles.gmCenterScreen}>
451
488
  <h1 style={{
452
489
  ...styles.gmHeadline1,
453
490
  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,
@@ -471,31 +508,31 @@ export default function Game({
471
508
  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",
472
509
  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"
473
510
  }}>
474
- <thead>
475
- <tr>
476
- <th>Round</th>
477
- <th>Your Answer</th>
478
- <th>Correct</th>
479
- <th>Result</th>
511
+ <thead>
512
+ <tr>
513
+ <th>Round</th>
514
+ <th>Your Answer</th>
515
+ <th>Correct</th>
516
+ <th>Result</th>
517
+ </tr>
518
+ </thead>
519
+ <tbody>
520
+ {resultsTable.map((r, i) => (
521
+ <tr key={i}>
522
+ <td style={styles.gmTableCell}>{r.round}</td>
523
+ <td style={styles.gmTableCell}>{r.answer || "—"}</td>
524
+ <td style={styles.gmTableCell}>{r.correct}</td>
525
+ <td style={styles.gmTableCell}>
526
+ {r.result === "correct"
527
+ ? "✔ Correct"
528
+ : r.result === "almost"
529
+ ? "◐ Almost (0.5)"
530
+ : "✘ Wrong"}
531
+ </td>
480
532
  </tr>
481
- </thead>
482
- <tbody>
483
- {resultsTable.map((r, i) => (
484
- <tr key={i}>
485
- <td style={styles.gmTableCell}>{r.round}</td>
486
- <td style={styles.gmTableCell}>{r.answer || "—"}</td>
487
- <td style={styles.gmTableCell}>{r.correct}</td>
488
- <td style={styles.gmTableCell}>
489
- {r.result === "correct"
490
- ? "✔ Correct"
491
- : r.result === "almost"
492
- ? "◐ Almost (0.5)"
493
- : "✘ Wrong"}
494
- </td>
495
- </tr>
496
- ))}
497
- </tbody>
498
- </table>
533
+ ))}
534
+ </tbody>
535
+ </table>
499
536
  <div style={{
500
537
  display: "flex",
501
538
  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",
@@ -507,23 +544,23 @@ export default function Game({
507
544
  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",
508
545
  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"
509
546
  }} onClick={startGame}>
510
- 🔁 Play again
511
- </button>
547
+ 🔁 Play again
548
+ </button>
512
549
  <button style={{
513
550
  ...styles.gmButton,
514
551
  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",
515
552
  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",
516
553
  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"
517
554
  }} onClick={exitGame}>
518
- ⬅️ Choose theme
519
- </button>
520
- </div>
555
+ ⬅️ Choose theme
556
+ </button>
521
557
  </div>
522
- )}
523
- {started && !finished && (
524
- <div style={styles.gmGameLayout}>
525
- <div
526
- style={{
558
+ </div>
559
+ )}
560
+ {started && !finished && (
561
+ <div style={styles.gmGameLayout}>
562
+ <div
563
+ style={{
527
564
  minHeight: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
528
565
  ? "45px" // iPhone SE: еще более компактная высота
529
566
  : (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
@@ -537,10 +574,10 @@ export default function Game({
537
574
  : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700
538
575
  ? "60px" // iPhone landscape и малые экраны: компактная высота
539
576
  : "160px",
540
- display: "flex",
541
- flexDirection: "column",
542
- justifyContent: "center",
543
- alignItems: "center",
577
+ display: "flex",
578
+ flexDirection: "column",
579
+ justifyContent: "center",
580
+ alignItems: "center",
544
581
  paddingTop: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
545
582
  ? "8px" // iPhone SE: поднимаем таймер еще выше
546
583
  : (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
@@ -554,23 +591,23 @@ export default function Game({
554
591
  : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700
555
592
  ? "15px" // iPhone landscape и малые экраны: поднимаем выше
556
593
  : "40px"
557
- }}
558
- >
559
- {phase === "ready" && (
560
- <>
561
- <h1 style={{ ...styles.gmHeadline1, color: "#ec4c44" }}>GET READY</h1>
562
- <div style={styles.gmHourglass}>⏳</div>
563
- </>
564
- )}
565
- {phase === "memorize" && (
566
- <p style={{ ...styles.gmBodyM, color: "#10b981" }}>
567
- MEMORIZE ({memorizeTime})
568
- </p>
569
- )}
570
- {phase === "guess" && !answered && (
571
- <p style={styles.gmBodyM}>⏳ Time left: {timeLeft}s</p>
572
- )}
573
- </div>
594
+ }}
595
+ >
596
+ {phase === "ready" && (
597
+ <>
598
+ <h1 style={{ ...styles.gmHeadline1, color: "#ec4c44" }}>GET READY</h1>
599
+ <div style={styles.gmHourglass}>⏳</div>
600
+ </>
601
+ )}
602
+ {phase === "memorize" && (
603
+ <p style={{ ...styles.gmBodyM, color: "#10b981" }}>
604
+ MEMORIZE ({memorizeTime})
605
+ </p>
606
+ )}
607
+ {phase === "guess" && !answered && (
608
+ <p style={styles.gmBodyM}>⏳ Time left: {timeLeft}s</p>
609
+ )}
610
+ </div>
574
611
  {phase !== "ready" && (
575
612
  <div
576
613
  style={{
@@ -598,6 +635,8 @@ export default function Game({
598
635
  ? "150px" // mobile portrait: стандартная высота
599
636
  : window.innerHeight < 700
600
637
  ? "140px" // Nest Hub: компактная высота
638
+ : (typeof window !== "undefined" && window.devicePixelRatio >= 1.25 && window.devicePixelRatio <= 1.5) // Среднее масштабирование (125%-150%)
639
+ ? "240px" // Больше высота для экранов с масштабированием
601
640
  : "210px", // desktop: стандартная высота
602
641
  gap: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
603
642
  ? "12px" // iPhone SE: больше отступов
@@ -607,7 +646,11 @@ export default function Game({
607
646
  ? "12px" // iPhone 12 Pro в landscape: такие же отступы как SE
608
647
  : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
609
648
  ? "12px" // iPhone 14 Pro Max в landscape: такие же отступы как SE
610
- : isMobile || window.innerHeight < 700 ? "8px" : "20px",
649
+ : isMobile || window.innerHeight < 700
650
+ ? "8px"
651
+ : (typeof window !== "undefined" && window.devicePixelRatio >= 1.25 && window.devicePixelRatio <= 1.5) // Среднее масштабирование (125%-150%)
652
+ ? "24px" // Больше отступы для экранов с масштабированием
653
+ : "20px",
611
654
  justifyItems: "center",
612
655
  maxWidth: isMobile && window.innerWidth > window.innerHeight
613
656
  ? "90%" // mobile landscape: используем больше ширины
@@ -626,8 +669,10 @@ export default function Game({
626
669
  ? "8px" // iPhone XR в landscape: минимальные отступы как SE
627
670
  : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
628
671
  ? "8px" // iPhone 12 Pro в landscape: минимальные отступы как SE
629
- : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
672
+ : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
630
673
  ? "8px" // iPhone 14 Pro Max в landscape: минимальные отступы как SE
674
+ : (typeof window !== "undefined" && window.devicePixelRatio >= 1.25 && window.devicePixelRatio <= 1.5) // Среднее масштабирование (125%-150%)
675
+ ? "20px" // Дополнительные отступы для экранов с масштабированием
631
676
  : "16px",
632
677
  }}
633
678
  >
@@ -735,10 +780,10 @@ export default function Game({
735
780
  ? "50px" // iPhone landscape и малые экраны: компактная высота
736
781
  : "80px"
737
782
  }}>
738
- {phase === "guess" && !answered && (
783
+ {phase === "guess" && !answered && (
739
784
  <div style={{
740
785
  display: "flex",
741
- 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",
786
+ flexDirection: isHorizontalLayout ? "row" : "column",
742
787
  gap: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
743
788
  ? "3px" // iPhone SE: еще более минимальный отступ
744
789
  : (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
@@ -790,11 +835,11 @@ export default function Game({
790
835
  : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "400px" : "300px"
791
836
  }}>
792
837
  <>
793
- <input
794
- type="text"
795
- placeholder="Type the missing word"
796
- value={inputValue}
797
- onChange={(e) => setInputValue(e.target.value)}
838
+ <input
839
+ type="text"
840
+ placeholder="Type the missing word"
841
+ value={inputValue}
842
+ onChange={(e) => setInputValue(e.target.value)}
798
843
  style={{
799
844
  ...styles.gmInput,
800
845
  width: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
@@ -866,13 +911,13 @@ export default function Game({
866
911
  : isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape
867
912
  ? "14px" // iPad и Surface DUO: размер шрифта инпута
868
913
  : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "14px" : "16px",
869
- 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"
914
+ flex: isHorizontalLayout ? "1" : "none"
870
915
  }}
871
- />
872
- <button
916
+ />
917
+ <button
873
918
  style={{
874
919
  ...styles.gmButton,
875
- 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",
920
+ marginLeft: isHorizontalLayout ? "8px" : "0",
876
921
  padding: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
877
922
  ? "5px 8px" // iPhone SE: еще более компактный padding
878
923
  : (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
@@ -944,15 +989,15 @@ export default function Game({
944
989
  : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "80px" : "100px",
945
990
  flexShrink: 0
946
991
  }}
947
- onClick={checkAnswer}
948
- disabled={animating}
949
- >
950
- {animating ? "..." : "Check"}
951
- </button>
992
+ onClick={checkAnswer}
993
+ disabled={animating}
994
+ >
995
+ {animating ? "..." : "Check"}
996
+ </button>
952
997
  </>
953
- </div>
954
- )}
955
- {answered && (
998
+ </div>
999
+ )}
1000
+ {answered && (
956
1001
  <button style={{
957
1002
  ...styles.gmButton,
958
1003
  padding: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
@@ -1002,12 +1047,12 @@ export default function Game({
1002
1047
  ? "14px" // iPad и Surface DUO: размер шрифта кнопки Next round
1003
1048
  : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "14px" : "16px"
1004
1049
  }} onClick={nextRound}>
1005
- Next round
1006
- </button>
1007
- )}
1008
- </div>
1050
+ Next round
1051
+ </button>
1052
+ )}
1009
1053
  </div>
1010
- )}
1054
+ </div>
1055
+ )}
1011
1056
  </div>
1012
1057
  </div>
1013
1058
  </div>