@mblinkov/whats-missing 20.0.48 → 20.0.50
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.
- package/dist/Game.d.ts +5 -0
- package/dist/Game.styles.d.ts +2 -0
- package/dist/index.d.ts +3 -0
- package/dist/themes.d.ts +6 -0
- package/dist/whats-missing.cjs.js +3 -3
- package/dist/whats-missing.es.js +217 -199
- package/package.json +24 -3
- package/.prettierrc +0 -9
- package/src/Game.styles.ts +0 -221
- package/src/Game.tsx +0 -1144
- package/src/index.ts +0 -4
- package/src/themes.ts +0 -96
- package/tsconfig.json +0 -19
- package/vite.config.ts +0 -34
package/src/Game.tsx
DELETED
|
@@ -1,1144 +0,0 @@
|
|
|
1
|
-
import { useState, useEffect, useMemo, useRef } from "react";
|
|
2
|
-
import { themes } from "./themes";
|
|
3
|
-
import { styles } from "./Game.styles";
|
|
4
|
-
import type { Theme } from "./themes";
|
|
5
|
-
|
|
6
|
-
type ImageItem = { src: string; name: string };
|
|
7
|
-
type RoundResult = {
|
|
8
|
-
round: number;
|
|
9
|
-
answer: string;
|
|
10
|
-
correct: string;
|
|
11
|
-
result: "correct" | "almost" | "wrong";
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
// ✅ базовый reset
|
|
15
|
-
const globalReset = () => {
|
|
16
|
-
const style = document.createElement("style");
|
|
17
|
-
style.id = "whats-missing-reset"; // ✅ Добавляем ID для удаления
|
|
18
|
-
|
|
19
|
-
style.textContent = `
|
|
20
|
-
#whats-missing-root, #whats-missing-root * {
|
|
21
|
-
box-sizing: border-box;
|
|
22
|
-
font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
|
23
|
-
}
|
|
24
|
-
#whats-missing-root img {
|
|
25
|
-
max-width: 100%;
|
|
26
|
-
height: auto;
|
|
27
|
-
display: block;
|
|
28
|
-
user-select: none;
|
|
29
|
-
}
|
|
30
|
-
html, body {
|
|
31
|
-
margin: 0 !important;
|
|
32
|
-
padding: 0 !important;
|
|
33
|
-
width: 100% !important;
|
|
34
|
-
height: 100% !important;
|
|
35
|
-
overflow: hidden !important;
|
|
36
|
-
zoom: 1 !important; /* ✅ защита от подзума */
|
|
37
|
-
}
|
|
38
|
-
#root {
|
|
39
|
-
margin: 0 !important;
|
|
40
|
-
padding: 0 !important;
|
|
41
|
-
width: 100% !important;
|
|
42
|
-
height: 100% !important;
|
|
43
|
-
overflow: hidden !important;
|
|
44
|
-
}
|
|
45
|
-
`;
|
|
46
|
-
|
|
47
|
-
// ✅ Удаляем старый стиль, если он есть
|
|
48
|
-
const existingStyle = document.getElementById("whats-missing-reset");
|
|
49
|
-
if (existingStyle) {
|
|
50
|
-
existingStyle.remove();
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
document.head.appendChild(style);
|
|
54
|
-
};
|
|
55
|
-
|
|
56
|
-
// простая функция сравнения
|
|
57
|
-
const levenshtein = (a: string, b: string) => {
|
|
58
|
-
const dp = Array.from({ length: a.length + 1 }, () => Array(b.length + 1).fill(0));
|
|
59
|
-
for (let i = 0; i <= a.length; i++) dp[i][0] = i;
|
|
60
|
-
for (let j = 0; j <= b.length; j++) dp[0][j] = j;
|
|
61
|
-
for (let i = 1; i <= a.length; i++) {
|
|
62
|
-
for (let j = 1; j <= b.length; j++) {
|
|
63
|
-
dp[i][j] =
|
|
64
|
-
a[i - 1] === b[j - 1]
|
|
65
|
-
? dp[i - 1][j - 1]
|
|
66
|
-
: Math.min(dp[i - 1][j - 1], dp[i][j - 1], dp[i - 1][j]) + 1;
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
return dp[a.length][b.length];
|
|
70
|
-
};
|
|
71
|
-
|
|
72
|
-
export default function Game({
|
|
73
|
-
gameCubeSize,
|
|
74
|
-
screenHeight,
|
|
75
|
-
screenWidth,
|
|
76
|
-
}: {
|
|
77
|
-
gameCubeSize?: number;
|
|
78
|
-
screenHeight?: number;
|
|
79
|
-
screenWidth?: number;
|
|
80
|
-
}) {
|
|
81
|
-
const containerRef = useRef<HTMLDivElement>(null);
|
|
82
|
-
|
|
83
|
-
useEffect(() => {
|
|
84
|
-
globalReset();
|
|
85
|
-
return () => {
|
|
86
|
-
// ✅ Восстанавливаем overflow на html и body
|
|
87
|
-
document.documentElement.style.overflow = "";
|
|
88
|
-
document.body.style.overflow = "";
|
|
89
|
-
|
|
90
|
-
// ✅ Удаляем наш style элемент
|
|
91
|
-
const style = document.getElementById("whats-missing-reset");
|
|
92
|
-
if (style) {
|
|
93
|
-
style.remove();
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
// ✅ Cancel any ongoing preloads
|
|
97
|
-
if (abortController.current) {
|
|
98
|
-
abortController.current.abort();
|
|
99
|
-
}
|
|
100
|
-
};
|
|
101
|
-
}, []);
|
|
102
|
-
|
|
103
|
-
const [theme, setTheme] = useState<Theme | null>(null);
|
|
104
|
-
const [files, setFiles] = useState<ImageItem[]>([]);
|
|
105
|
-
const [rounds, setRounds] = useState(4);
|
|
106
|
-
const [started, setStarted] = useState(false);
|
|
107
|
-
const [currentRound, setCurrentRound] = useState(1);
|
|
108
|
-
const [hiddenIndex, setHiddenIndex] = useState<number | null>(null);
|
|
109
|
-
const [phase, setPhase] = useState<"ready" | "memorize" | "guess">("ready");
|
|
110
|
-
const [readyTime, setReadyTime] = useState(3);
|
|
111
|
-
const [memorizeTime, setMemorizeTime] = useState(10);
|
|
112
|
-
const [timeLeft, setTimeLeft] = useState(20);
|
|
113
|
-
const [score, setScore] = useState(0);
|
|
114
|
-
const [finished, setFinished] = useState(false);
|
|
115
|
-
const [inputValue, setInputValue] = useState("");
|
|
116
|
-
const [answered, setAnswered] = useState(false);
|
|
117
|
-
const [animating, setAnimating] = useState(false);
|
|
118
|
-
const [result, setResult] = useState<"correct" | "almost" | "wrong" | null>(null);
|
|
119
|
-
const [resultsTable, setResultsTable] = useState<RoundResult[]>([]);
|
|
120
|
-
const [usedHidden, setUsedHidden] = useState<string[]>([]);
|
|
121
|
-
const [isMobile, setIsMobile] = useState(false);
|
|
122
|
-
const [scale, setScale] = useState(1);
|
|
123
|
-
const [containerSize, setContainerSize] = useState<number | null>(null);
|
|
124
|
-
const [isDesktopLayout, setIsDesktopLayout] = useState(false);
|
|
125
|
-
const [isIPadMiniPortrait, setIsIPadMiniPortrait] = useState(false);
|
|
126
|
-
const [isIPadMiniLandscape, setIsIPadMiniLandscape] = useState(false);
|
|
127
|
-
const [isIPadAirPortrait, setIsIPadAirPortrait] = useState(false);
|
|
128
|
-
const [isIPadAirLandscape, setIsIPadAirLandscape] = useState(false);
|
|
129
|
-
const [isSurfaceDuoPortrait, setIsSurfaceDuoPortrait] = useState(false);
|
|
130
|
-
const [isSurfaceDuoLandscape, setIsSurfaceDuoLandscape] = useState(false);
|
|
131
|
-
const [isIPadProPortrait, setIsIPadProPortrait] = useState(false);
|
|
132
|
-
const [isIPadProLandscape, setIsIPadProLandscape] = useState(false);
|
|
133
|
-
const [isHorizontalLayout, setIsHorizontalLayout] = useState(false);
|
|
134
|
-
|
|
135
|
-
// ✅ Система предзагрузки изображений
|
|
136
|
-
const preloadedUrls = useRef<Set<string>>(new Set());
|
|
137
|
-
const abortController = useRef<AbortController | null>(null);
|
|
138
|
-
|
|
139
|
-
// ✅ адаптив под мобилки, планшеты и десктоп
|
|
140
|
-
useEffect(() => {
|
|
141
|
-
const resize = () => {
|
|
142
|
-
const width = screenWidth ?? window.innerWidth;
|
|
143
|
-
const height = screenHeight ?? window.innerHeight;
|
|
144
|
-
const mobile = width < 768 || (width === 926 && height === 428) || (width === 932 && height === 430); // iPhone 14 Pro Max в landscape тоже считается мобильным
|
|
145
|
-
const isLandscape = (width > height && mobile) || (width === 926 && height === 428) || (width === 932 && height === 430); // iPhone 14 Pro Max в landscape
|
|
146
|
-
const isSmallHeight = height < 700; // Nest Hub, маленькие экраны
|
|
147
|
-
const isWideScreen = width / height > 1.8; // ✅ Широкие экраны
|
|
148
|
-
|
|
149
|
-
// Определяем iPhone до 14 Pro Max в landscape режиме
|
|
150
|
-
// iPhone 14 Pro Max: 926x428 (landscape)
|
|
151
|
-
// iPhone 13 Pro Max: 926x428 (landscape)
|
|
152
|
-
// iPhone 12 Pro Max: 926x428 (landscape)
|
|
153
|
-
// iPhone 11 Pro Max: 896x414 (landscape)
|
|
154
|
-
// iPhone XR: 896x414 (landscape)
|
|
155
|
-
// iPhone XS Max: 896x414 (landscape)
|
|
156
|
-
// iPhone X: 812x375 (landscape)
|
|
157
|
-
// iPhone 8 Plus: 736x414 (landscape)
|
|
158
|
-
// iPhone 8: 667x375 (landscape)
|
|
159
|
-
// iPhone SE: 667x375 (landscape)
|
|
160
|
-
|
|
161
|
-
// iPhone XR: 896x414 (landscape)
|
|
162
|
-
const isIPhoneXRLandscape = isLandscape && width === 896 && height === 414;
|
|
163
|
-
|
|
164
|
-
// iPhone 12 Pro: 844x390 (landscape)
|
|
165
|
-
const isIPhone12ProLandscape = isLandscape && width === 844 && height === 390;
|
|
166
|
-
|
|
167
|
-
// Разрешение 1366x766 - ноутбуки и небольшие десктопы
|
|
168
|
-
const is1366x766 = width === 1366 && height === 766;
|
|
169
|
-
|
|
170
|
-
// Разрешение 1366x768 - ноутбуки и небольшие десктопы
|
|
171
|
-
const is1366x768 = width === 1366 && height === 768;
|
|
172
|
-
|
|
173
|
-
// Разрешение 1280x720 - ноутбуки и небольшие десктопы
|
|
174
|
-
const is1280x720 = width === 1280 && height === 720;
|
|
175
|
-
|
|
176
|
-
// Разрешение 1440x900 - ноутбуки и небольшие десктопы
|
|
177
|
-
const is1440x900 = width === 1440 && height === 900;
|
|
178
|
-
|
|
179
|
-
// iPad Mini/Air размеры
|
|
180
|
-
// iPad Mini: 768x1024 (portrait), 1024x768 (landscape) - Chrome DevTools размеры
|
|
181
|
-
// iPad Air: 820x1180 (portrait), 1180x820 (landscape)
|
|
182
|
-
const isIPadMiniPortrait = width === 768 && height === 1024;
|
|
183
|
-
const isIPadMiniLandscape = width === 1024 && height === 768;
|
|
184
|
-
const isIPadAirPortrait = width === 820 && height === 1180;
|
|
185
|
-
const isIPadAirLandscape = width === 1180 && height === 820;
|
|
186
|
-
|
|
187
|
-
// Surface DUO размеры
|
|
188
|
-
// Surface DUO: 540x720 (portrait), 720x540 (landscape)
|
|
189
|
-
const isSurfaceDuoPortrait = width === 540 && height === 720;
|
|
190
|
-
const isSurfaceDuoLandscape = width === 720 && height === 540;
|
|
191
|
-
|
|
192
|
-
// iPad Pro размеры
|
|
193
|
-
// iPad Pro: 1024x1366 (portrait), 1366x1024 (landscape)
|
|
194
|
-
const isIPadProPortrait = width === 1024 && height === 1366;
|
|
195
|
-
const isIPadProLandscape = width === 1366 && height === 1024;
|
|
196
|
-
|
|
197
|
-
// Популярные разрешения для горизонтального расположения кнопки Check
|
|
198
|
-
const desktopLayout = width >= 1200 && height >= 600 && !mobile;
|
|
199
|
-
setIsDesktopLayout(desktopLayout);
|
|
200
|
-
|
|
201
|
-
// Установка состояний для iPad и Surface DUO
|
|
202
|
-
setIsIPadMiniPortrait(isIPadMiniPortrait);
|
|
203
|
-
setIsIPadMiniLandscape(isIPadMiniLandscape);
|
|
204
|
-
setIsIPadAirPortrait(isIPadAirPortrait);
|
|
205
|
-
setIsIPadAirLandscape(isIPadAirLandscape);
|
|
206
|
-
setIsSurfaceDuoPortrait(isSurfaceDuoPortrait);
|
|
207
|
-
setIsSurfaceDuoLandscape(isSurfaceDuoLandscape);
|
|
208
|
-
setIsIPadProPortrait(isIPadProPortrait);
|
|
209
|
-
setIsIPadProLandscape(isIPadProLandscape);
|
|
210
|
-
|
|
211
|
-
// ✅ Вычисляем горизонтальный layout ОДИН РАЗ
|
|
212
|
-
const isHorizontal =
|
|
213
|
-
(mobile && width > height) ||
|
|
214
|
-
mobile || // ✅ ВСЕ мобильные устройства (включая portrait)
|
|
215
|
-
height < 700 ||
|
|
216
|
-
isWideScreen || // ✅ Широкие экраны
|
|
217
|
-
(width === 1366 && height === 766) ||
|
|
218
|
-
(width === 1366 && height === 768) ||
|
|
219
|
-
(width === 1280 && height === 720) ||
|
|
220
|
-
(width === 1440 && height === 900) ||
|
|
221
|
-
isIPadMiniPortrait ||
|
|
222
|
-
isIPadMiniLandscape ||
|
|
223
|
-
isIPadAirPortrait ||
|
|
224
|
-
isIPadAirLandscape ||
|
|
225
|
-
isSurfaceDuoPortrait ||
|
|
226
|
-
isSurfaceDuoLandscape ||
|
|
227
|
-
isIPadProPortrait ||
|
|
228
|
-
isIPadProLandscape ||
|
|
229
|
-
isDesktopLayout;
|
|
230
|
-
setIsHorizontalLayout(isHorizontal);
|
|
231
|
-
|
|
232
|
-
const isOldIPhoneLandscape = isLandscape && height <= 428; // до iPhone 14 Pro Max включительно
|
|
233
|
-
|
|
234
|
-
// treat only phones as "mobile" so tablets use the desktop (square/centered) layout
|
|
235
|
-
setIsMobile(mobile);
|
|
236
|
-
|
|
237
|
-
// ✅ Используем gameCubeSize от родительского сайта, но с защитой от слишком маленьких размеров
|
|
238
|
-
if (mobile) {
|
|
239
|
-
// Мобилки: используем переданный gameCubeSize или полную ширину
|
|
240
|
-
setContainerSize(gameCubeSize && gameCubeSize >= 320 ? gameCubeSize : null);
|
|
241
|
-
setScale(1);
|
|
242
|
-
} else if (isSmallHeight) {
|
|
243
|
-
// Маленькие экраны: используем переданный gameCubeSize или полную высоту
|
|
244
|
-
setContainerSize(gameCubeSize && gameCubeSize >= 400 ? gameCubeSize : null);
|
|
245
|
-
setScale(1);
|
|
246
|
-
} else if (isWideScreen) {
|
|
247
|
-
// ✅ Широкие экраны: используем стандартный размер но уменьшаем масштаб картинок
|
|
248
|
-
const minSize = 400;
|
|
249
|
-
const maxSize = 1200;
|
|
250
|
-
const finalSize = gameCubeSize
|
|
251
|
-
? Math.max(minSize, Math.min(maxSize, gameCubeSize))
|
|
252
|
-
: Math.min(1000, Math.min(width, height) * 0.9);
|
|
253
|
-
setContainerSize(finalSize);
|
|
254
|
-
setScale(0.85); // Уменьшаем масштаб картинок на 15%
|
|
255
|
-
} else {
|
|
256
|
-
// Десктопы: используем переданный gameCubeSize с разумными ограничениями
|
|
257
|
-
const minSize = 400;
|
|
258
|
-
const maxSize = 1200;
|
|
259
|
-
const finalSize = gameCubeSize
|
|
260
|
-
? Math.max(minSize, Math.min(maxSize, gameCubeSize))
|
|
261
|
-
: Math.min(1000, Math.min(width, height) * 0.9);
|
|
262
|
-
setContainerSize(finalSize);
|
|
263
|
-
setScale(1);
|
|
264
|
-
}
|
|
265
|
-
};
|
|
266
|
-
resize();
|
|
267
|
-
window.addEventListener("resize", resize);
|
|
268
|
-
return () => window.removeEventListener("resize", resize);
|
|
269
|
-
}, [screenWidth, screenHeight, gameCubeSize]);
|
|
270
|
-
|
|
271
|
-
const getRandomSix = (arr: ImageItem[]) =>
|
|
272
|
-
[...arr].sort(() => Math.random() - 0.5).slice(0, 6);
|
|
273
|
-
|
|
274
|
-
// ✅ Утилиты предзагрузки
|
|
275
|
-
const preloadImage = (src: string): Promise<void> => {
|
|
276
|
-
return new Promise((resolve) => {
|
|
277
|
-
const img = new Image();
|
|
278
|
-
img.onload = () => resolve();
|
|
279
|
-
img.onerror = () => resolve(); // Continue even on error
|
|
280
|
-
img.src = src;
|
|
281
|
-
});
|
|
282
|
-
};
|
|
283
|
-
|
|
284
|
-
const preloadImages = async (urls: string[], signal?: AbortSignal): Promise<void> => {
|
|
285
|
-
const promises = urls.map(url => preloadImage(url));
|
|
286
|
-
await Promise.allSettled(promises);
|
|
287
|
-
};
|
|
288
|
-
|
|
289
|
-
// ✅ Функция предзагрузки темы
|
|
290
|
-
const startThemePreload = (themeName: Theme) => {
|
|
291
|
-
// Cancel previous preload
|
|
292
|
-
if (abortController.current) {
|
|
293
|
-
abortController.current.abort();
|
|
294
|
-
}
|
|
295
|
-
|
|
296
|
-
// Create new controller
|
|
297
|
-
abortController.current = new AbortController();
|
|
298
|
-
|
|
299
|
-
// Get theme images and start preloading
|
|
300
|
-
const themeImages = themes[themeName];
|
|
301
|
-
const urls = themeImages.map(item => item.src);
|
|
302
|
-
|
|
303
|
-
preloadImages(urls, abortController.current.signal).then(() => {
|
|
304
|
-
// Mark as preloaded
|
|
305
|
-
urls.forEach(url => preloadedUrls.current.add(url));
|
|
306
|
-
}).catch(() => {
|
|
307
|
-
// Ignore abort errors
|
|
308
|
-
});
|
|
309
|
-
};
|
|
310
|
-
|
|
311
|
-
const startGame = () => {
|
|
312
|
-
if (!theme) return;
|
|
313
|
-
const selected = getRandomSix(themes[theme]);
|
|
314
|
-
setFiles(selected);
|
|
315
|
-
setStarted(true);
|
|
316
|
-
setFinished(false);
|
|
317
|
-
setCurrentRound(1);
|
|
318
|
-
setScore(0);
|
|
319
|
-
setResultsTable([]);
|
|
320
|
-
setUsedHidden([]);
|
|
321
|
-
|
|
322
|
-
// ✅ Preload current round images
|
|
323
|
-
const urls = selected.map(item => item.src);
|
|
324
|
-
preloadImages(urls, abortController.current?.signal).then(() => {
|
|
325
|
-
urls.forEach(url => preloadedUrls.current.add(url));
|
|
326
|
-
}).catch(() => {
|
|
327
|
-
// Ignore abort errors
|
|
328
|
-
});
|
|
329
|
-
|
|
330
|
-
startRound(selected, [], true);
|
|
331
|
-
};
|
|
332
|
-
|
|
333
|
-
const startRound = (images = files, used: string[] = usedHidden, isFirst = false) => {
|
|
334
|
-
const roundSet = getRandomSix(images.length ? images : themes[theme!]);
|
|
335
|
-
let idx = Math.floor(Math.random() * roundSet.length);
|
|
336
|
-
let candidate = roundSet[idx].name;
|
|
337
|
-
let attempts = 0;
|
|
338
|
-
while (used.includes(candidate) && attempts < 20) {
|
|
339
|
-
idx = Math.floor(Math.random() * roundSet.length);
|
|
340
|
-
candidate = roundSet[idx].name;
|
|
341
|
-
attempts++;
|
|
342
|
-
}
|
|
343
|
-
setFiles(roundSet);
|
|
344
|
-
setHiddenIndex(idx);
|
|
345
|
-
setUsedHidden([...used, candidate]);
|
|
346
|
-
setAnswered(false);
|
|
347
|
-
setInputValue("");
|
|
348
|
-
setTimeLeft(20);
|
|
349
|
-
setResult(null);
|
|
350
|
-
|
|
351
|
-
// ✅ Preload next round images in background
|
|
352
|
-
if (theme && !isFirst) {
|
|
353
|
-
const nextPool = getRandomSix(themes[theme].filter(item => !used.includes(item.name)));
|
|
354
|
-
const nextUrls = nextPool.map(item => item.src);
|
|
355
|
-
preloadImages(nextUrls, abortController.current?.signal).then(() => {
|
|
356
|
-
nextUrls.forEach(url => preloadedUrls.current.add(url));
|
|
357
|
-
}).catch(() => {
|
|
358
|
-
// Ignore abort errors
|
|
359
|
-
});
|
|
360
|
-
}
|
|
361
|
-
|
|
362
|
-
if (isFirst) {
|
|
363
|
-
setPhase("ready");
|
|
364
|
-
setReadyTime(5); // Увеличено с 3 до 5
|
|
365
|
-
setMemorizeTime(10);
|
|
366
|
-
} else {
|
|
367
|
-
setPhase("memorize");
|
|
368
|
-
setMemorizeTime(10);
|
|
369
|
-
}
|
|
370
|
-
};
|
|
371
|
-
|
|
372
|
-
useEffect(() => {
|
|
373
|
-
if (!started || finished || answered) return;
|
|
374
|
-
if (phase === "ready") {
|
|
375
|
-
if (readyTime <= 0) setPhase("memorize");
|
|
376
|
-
else {
|
|
377
|
-
const t = setTimeout(() => setReadyTime((r) => r - 1), 1000);
|
|
378
|
-
return () => clearTimeout(t);
|
|
379
|
-
}
|
|
380
|
-
}
|
|
381
|
-
if (phase === "memorize") {
|
|
382
|
-
if (memorizeTime <= 0) setPhase("guess");
|
|
383
|
-
else {
|
|
384
|
-
const t = setTimeout(() => setMemorizeTime((m) => m - 1), 1000);
|
|
385
|
-
return () => clearTimeout(t);
|
|
386
|
-
}
|
|
387
|
-
}
|
|
388
|
-
if (phase === "guess") {
|
|
389
|
-
if (timeLeft <= 0) {
|
|
390
|
-
setAnswered(true);
|
|
391
|
-
setResult("wrong");
|
|
392
|
-
const correct = files[hiddenIndex!].name;
|
|
393
|
-
setResultsTable((prev) => [
|
|
394
|
-
...prev,
|
|
395
|
-
{ round: currentRound, answer: inputValue, correct, result: "wrong" },
|
|
396
|
-
]);
|
|
397
|
-
return;
|
|
398
|
-
}
|
|
399
|
-
const t = setTimeout(() => setTimeLeft((s) => s - 1), 1000);
|
|
400
|
-
return () => clearTimeout(t);
|
|
401
|
-
}
|
|
402
|
-
}, [phase, readyTime, memorizeTime, timeLeft, started, finished, answered, files, hiddenIndex, currentRound, inputValue]);
|
|
403
|
-
|
|
404
|
-
const checkAnswer = () => {
|
|
405
|
-
if (hiddenIndex === null || animating) return;
|
|
406
|
-
const correct = files[hiddenIndex].name;
|
|
407
|
-
const userAnswer = inputValue.toLowerCase().trim();
|
|
408
|
-
let roundResult: "correct" | "almost" | "wrong" = "wrong";
|
|
409
|
-
if (userAnswer === correct) {
|
|
410
|
-
setScore((s) => s + 1);
|
|
411
|
-
setResult("correct");
|
|
412
|
-
roundResult = "correct";
|
|
413
|
-
} else if (levenshtein(userAnswer, correct) === 1) {
|
|
414
|
-
setScore((s) => s + 0.5);
|
|
415
|
-
setResult("almost");
|
|
416
|
-
roundResult = "almost";
|
|
417
|
-
} else {
|
|
418
|
-
setResult("wrong");
|
|
419
|
-
roundResult = "wrong";
|
|
420
|
-
}
|
|
421
|
-
setResultsTable((prev) => [...prev, { round: currentRound, answer: userAnswer, correct, result: roundResult }]);
|
|
422
|
-
setAnimating(true);
|
|
423
|
-
setTimeout(() => {
|
|
424
|
-
setAnimating(false);
|
|
425
|
-
setAnswered(true);
|
|
426
|
-
}, 600);
|
|
427
|
-
};
|
|
428
|
-
|
|
429
|
-
const nextRound = () =>
|
|
430
|
-
currentRound < rounds ? (setCurrentRound((r) => r + 1), startRound()) : setFinished(true);
|
|
431
|
-
|
|
432
|
-
const exitGame = () => {
|
|
433
|
-
setStarted(false);
|
|
434
|
-
setFinished(false);
|
|
435
|
-
setTheme(null);
|
|
436
|
-
};
|
|
437
|
-
|
|
438
|
-
const MemoizedLogo = useMemo(
|
|
439
|
-
() => {
|
|
440
|
-
// Скрываем логотип на мобильных устройствах в landscape режиме и на малых экранах
|
|
441
|
-
if ((isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700) {
|
|
442
|
-
return null;
|
|
443
|
-
}
|
|
444
|
-
|
|
445
|
-
return (
|
|
446
|
-
// ensure logo is positioned inside the square container
|
|
447
|
-
<div style={{ ...styles.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }}>
|
|
448
|
-
<picture>
|
|
449
|
-
<source
|
|
450
|
-
srcSet={window.origin + "/cloud/speakid/games/whatsmissing/logo.svg"}
|
|
451
|
-
type="image/svg+xml"
|
|
452
|
-
/>
|
|
453
|
-
<img
|
|
454
|
-
src={window.origin + "/cloud/speakid/games/whatsmissing/logo.png"}
|
|
455
|
-
alt="SPEAKID Logo"
|
|
456
|
-
style={styles.gmLogoImg}
|
|
457
|
-
loading="lazy"
|
|
458
|
-
/>
|
|
459
|
-
</picture>
|
|
460
|
-
</div>
|
|
461
|
-
);
|
|
462
|
-
},
|
|
463
|
-
[isMobile]
|
|
464
|
-
);
|
|
465
|
-
|
|
466
|
-
return (
|
|
467
|
-
<div
|
|
468
|
-
ref={containerRef}
|
|
469
|
-
style={{
|
|
470
|
-
width: "100%",
|
|
471
|
-
height: "100%",
|
|
472
|
-
display: "flex",
|
|
473
|
-
justifyContent: "center",
|
|
474
|
-
alignItems: "center",
|
|
475
|
-
background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
|
|
476
|
-
transition: "background 0.3s ease",
|
|
477
|
-
overflow: "hidden",
|
|
478
|
-
position: "absolute",
|
|
479
|
-
top: 0,
|
|
480
|
-
left: 0,
|
|
481
|
-
right: 0,
|
|
482
|
-
bottom: 0
|
|
483
|
-
}}
|
|
484
|
-
>
|
|
485
|
-
<div
|
|
486
|
-
style={{
|
|
487
|
-
width: isMobile ? "100%" : (containerSize || gameCubeSize || 1000),
|
|
488
|
-
height: isMobile ? "100%" : (containerSize || gameCubeSize || 1000),
|
|
489
|
-
display: "flex",
|
|
490
|
-
justifyContent: "center",
|
|
491
|
-
alignItems: "center",
|
|
492
|
-
overflow: "hidden",
|
|
493
|
-
borderRadius: isMobile ? 0 : "20px",
|
|
494
|
-
background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
|
|
495
|
-
boxShadow: isMobile ? "none" : "0 0 40px rgba(0,0,0,0.1)",
|
|
496
|
-
margin: isMobile ? "0 auto" : "unset",
|
|
497
|
-
position: "relative", // needed so absolute logo is inside the square
|
|
498
|
-
transform: `scale(${scale})`, // ✅ Применяем масштаб для широких экранов
|
|
499
|
-
}}
|
|
500
|
-
>
|
|
501
|
-
<div
|
|
502
|
-
style={{
|
|
503
|
-
transform: "none",
|
|
504
|
-
width: "100%",
|
|
505
|
-
height: "100%",
|
|
506
|
-
display: "flex",
|
|
507
|
-
justifyContent: "center",
|
|
508
|
-
alignItems: "center",
|
|
509
|
-
}}
|
|
510
|
-
>
|
|
511
|
-
<div id="whats-missing-root">
|
|
512
|
-
{!isMobile && MemoizedLogo}
|
|
513
|
-
{/* ====== ИГРОВАЯ ЛОГИКА ====== */}
|
|
514
|
-
{!theme && !started && (
|
|
515
|
-
<div style={styles.gmCenterScreen}>
|
|
516
|
-
<h1 style={styles.gmHeadline1}>WHAT'S MISSING?</h1>
|
|
517
|
-
<p style={styles.gmBodyM}>Select a theme:</p>
|
|
518
|
-
<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" }}>
|
|
519
|
-
{["animals", "food", "toys"].map((t) => (
|
|
520
|
-
<button key={t} style={{
|
|
521
|
-
...styles.gmButton,
|
|
522
|
-
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",
|
|
523
|
-
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",
|
|
524
|
-
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"
|
|
525
|
-
}} onClick={() => {
|
|
526
|
-
setTheme(t as Theme);
|
|
527
|
-
startThemePreload(t as Theme);
|
|
528
|
-
}}>
|
|
529
|
-
{t === "animals" ? "🐶 Animals" : t === "food" ? "🍎 Food" : "🧸 Toys"}
|
|
530
|
-
</button>
|
|
531
|
-
))}
|
|
532
|
-
</div>
|
|
533
|
-
<div style={{ marginTop: 24 }}>
|
|
534
|
-
<p style={styles.gmBodyS}>Choose number of rounds:</p>
|
|
535
|
-
<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 }}>
|
|
536
|
-
{[3, 4, 5].map((n) => (
|
|
537
|
-
<button
|
|
538
|
-
key={n}
|
|
539
|
-
style={{
|
|
540
|
-
...styles.gmButton,
|
|
541
|
-
...(rounds === n ? styles.gmButtonActive : {}),
|
|
542
|
-
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",
|
|
543
|
-
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",
|
|
544
|
-
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"
|
|
545
|
-
}}
|
|
546
|
-
onClick={() => setRounds(n)}
|
|
547
|
-
>
|
|
548
|
-
{n}
|
|
549
|
-
</button>
|
|
550
|
-
))}
|
|
551
|
-
</div>
|
|
552
|
-
</div>
|
|
553
|
-
</div>
|
|
554
|
-
)}
|
|
555
|
-
{theme && !started && (
|
|
556
|
-
<div style={styles.gmCenterScreen}>
|
|
557
|
-
<h1 style={styles.gmHeadline1}>Theme selected: {theme}</h1>
|
|
558
|
-
<p style={styles.gmBodyM}>Rounds: {rounds}</p>
|
|
559
|
-
<button style={{
|
|
560
|
-
...styles.gmButton,
|
|
561
|
-
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",
|
|
562
|
-
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",
|
|
563
|
-
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"
|
|
564
|
-
}} onClick={startGame}>
|
|
565
|
-
▶ Start game
|
|
566
|
-
</button>
|
|
567
|
-
</div>
|
|
568
|
-
)}
|
|
569
|
-
{finished && (
|
|
570
|
-
<div style={styles.gmCenterScreen}>
|
|
571
|
-
<h1 style={{
|
|
572
|
-
...styles.gmHeadline1,
|
|
573
|
-
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,
|
|
574
|
-
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
|
|
575
|
-
}}>Results</h1>
|
|
576
|
-
<h2 style={{
|
|
577
|
-
...styles.gmHeadline3,
|
|
578
|
-
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,
|
|
579
|
-
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
|
|
580
|
-
}}>
|
|
581
|
-
Your score: {score} / {rounds}
|
|
582
|
-
</h2>
|
|
583
|
-
<p style={{
|
|
584
|
-
...styles.gmBodyM,
|
|
585
|
-
color: "#10b981",
|
|
586
|
-
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",
|
|
587
|
-
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
|
|
588
|
-
}}>Yahoo! You did it! 🍬✨</p>
|
|
589
|
-
<table style={{
|
|
590
|
-
...styles.gmTable,
|
|
591
|
-
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",
|
|
592
|
-
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"
|
|
593
|
-
}}>
|
|
594
|
-
<thead>
|
|
595
|
-
<tr>
|
|
596
|
-
<th>Round</th>
|
|
597
|
-
<th>Your Answer</th>
|
|
598
|
-
<th>Correct</th>
|
|
599
|
-
<th>Result</th>
|
|
600
|
-
</tr>
|
|
601
|
-
</thead>
|
|
602
|
-
<tbody>
|
|
603
|
-
{resultsTable.map((r, i) => (
|
|
604
|
-
<tr key={i}>
|
|
605
|
-
<td style={styles.gmTableCell}>{r.round}</td>
|
|
606
|
-
<td style={styles.gmTableCell}>{r.answer || "—"}</td>
|
|
607
|
-
<td style={styles.gmTableCell}>{r.correct}</td>
|
|
608
|
-
<td style={styles.gmTableCell}>
|
|
609
|
-
{r.result === "correct"
|
|
610
|
-
? "✔ Correct"
|
|
611
|
-
: r.result === "almost"
|
|
612
|
-
? "◐ Almost (0.5)"
|
|
613
|
-
: "✘ Wrong"}
|
|
614
|
-
</td>
|
|
615
|
-
</tr>
|
|
616
|
-
))}
|
|
617
|
-
</tbody>
|
|
618
|
-
</table>
|
|
619
|
-
<div style={{
|
|
620
|
-
display: "flex",
|
|
621
|
-
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",
|
|
622
|
-
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"
|
|
623
|
-
}}>
|
|
624
|
-
<button style={{
|
|
625
|
-
...styles.gmButton,
|
|
626
|
-
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",
|
|
627
|
-
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",
|
|
628
|
-
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"
|
|
629
|
-
}} onClick={startGame}>
|
|
630
|
-
🔁 Play again
|
|
631
|
-
</button>
|
|
632
|
-
<button style={{
|
|
633
|
-
...styles.gmButton,
|
|
634
|
-
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",
|
|
635
|
-
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",
|
|
636
|
-
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"
|
|
637
|
-
}} onClick={exitGame}>
|
|
638
|
-
⬅️ Choose theme
|
|
639
|
-
</button>
|
|
640
|
-
</div>
|
|
641
|
-
</div>
|
|
642
|
-
)}
|
|
643
|
-
{started && !finished && (
|
|
644
|
-
<div style={styles.gmGameLayout}>
|
|
645
|
-
<div
|
|
646
|
-
style={{
|
|
647
|
-
minHeight: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
|
|
648
|
-
? "45px" // iPhone SE: еще более компактная высота
|
|
649
|
-
: (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
|
|
650
|
-
? "45px" // iPhone до 14 Pro Max в landscape: такая же компактная как SE
|
|
651
|
-
: (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
|
|
652
|
-
? "45px" // iPhone XR в landscape: такая же компактная как SE
|
|
653
|
-
: (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
|
|
654
|
-
? "45px" // iPhone 12 Pro в landscape: такая же компактная как SE
|
|
655
|
-
: (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
|
|
656
|
-
? "45px" // iPhone 14 Pro Max в landscape: такая же компактная как SE
|
|
657
|
-
: (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700
|
|
658
|
-
? "60px" // iPhone landscape и малые экраны: компактная высота
|
|
659
|
-
: "160px",
|
|
660
|
-
display: "flex",
|
|
661
|
-
flexDirection: "column",
|
|
662
|
-
justifyContent: "center",
|
|
663
|
-
alignItems: "center",
|
|
664
|
-
paddingTop: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
|
|
665
|
-
? "8px" // iPhone SE: поднимаем таймер еще выше
|
|
666
|
-
: (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
|
|
667
|
-
? "8px" // iPhone до 14 Pro Max в landscape: поднимаем еще выше
|
|
668
|
-
: (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
|
|
669
|
-
? "8px" // iPhone XR в landscape: поднимаем еще выше
|
|
670
|
-
: (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
|
|
671
|
-
? "8px" // iPhone 12 Pro в landscape: поднимаем еще выше
|
|
672
|
-
: (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
|
|
673
|
-
? "8px" // iPhone 14 Pro Max в landscape: поднимаем еще выше
|
|
674
|
-
: (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700
|
|
675
|
-
? "15px" // iPhone landscape и малые экраны: поднимаем выше
|
|
676
|
-
: "40px"
|
|
677
|
-
}}
|
|
678
|
-
>
|
|
679
|
-
{phase === "ready" && (
|
|
680
|
-
<>
|
|
681
|
-
<h1 style={{ ...styles.gmHeadline1, color: "#ec4c44" }}>GET READY</h1>
|
|
682
|
-
<div style={styles.gmHourglass}>⏳</div>
|
|
683
|
-
</>
|
|
684
|
-
)}
|
|
685
|
-
{phase === "memorize" && (
|
|
686
|
-
<p style={{ ...styles.gmBodyM, color: "#10b981" }}>
|
|
687
|
-
MEMORIZE ({memorizeTime})
|
|
688
|
-
</p>
|
|
689
|
-
)}
|
|
690
|
-
{phase === "guess" && !answered && (
|
|
691
|
-
<p style={styles.gmBodyM}>⏳ Time left: {timeLeft}s</p>
|
|
692
|
-
)}
|
|
693
|
-
</div>
|
|
694
|
-
{phase !== "ready" && (
|
|
695
|
-
<div
|
|
696
|
-
style={{
|
|
697
|
-
...styles.gmGrid,
|
|
698
|
-
gridTemplateColumns: isMobile && window.innerWidth > window.innerHeight
|
|
699
|
-
? "repeat(3, 1fr)" // mobile landscape: 3 колонки
|
|
700
|
-
: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
|
|
701
|
-
? "repeat(3, 1fr)" // iPhone SE: 3 колонки для лучшего использования пространства
|
|
702
|
-
: isMobile
|
|
703
|
-
? "repeat(2, 1fr)" // mobile portrait: 2 колонки
|
|
704
|
-
: window.innerHeight < 700
|
|
705
|
-
? "repeat(3, 1fr)" // Nest Hub и малые экраны: 3 колонки
|
|
706
|
-
: "repeat(3, 210px)", // desktop: 3 колонки фиксированного размера
|
|
707
|
-
gridAutoRows: isMobile && window.innerWidth > window.innerHeight
|
|
708
|
-
? "120px" // mobile landscape: меньшая высота
|
|
709
|
-
: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
|
|
710
|
-
? "100px" // iPhone SE: очень компактная высота
|
|
711
|
-
: (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
|
|
712
|
-
? "100px" // iPhone XR в landscape: такая же компактная как SE
|
|
713
|
-
: (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
|
|
714
|
-
? "100px" // iPhone 12 Pro в landscape: такая же компактная как SE
|
|
715
|
-
: (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
|
|
716
|
-
? "100px" // iPhone 14 Pro Max в landscape: такая же компактная как SE
|
|
717
|
-
: isMobile
|
|
718
|
-
? "150px" // mobile portrait: стандартная высота
|
|
719
|
-
: window.innerHeight < 700
|
|
720
|
-
? "140px" // Nest Hub: компактная высота
|
|
721
|
-
: (typeof window !== "undefined" && window.devicePixelRatio >= 1.25 && window.devicePixelRatio <= 1.5) // Среднее масштабирование (125%-150%)
|
|
722
|
-
? "240px" // Больше высота для экранов с масштабированием
|
|
723
|
-
: "210px", // desktop: стандартная высота
|
|
724
|
-
gap: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
|
|
725
|
-
? "12px" // iPhone SE: больше отступов
|
|
726
|
-
: (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
|
|
727
|
-
? "12px" // iPhone XR в landscape: такие же отступы как SE
|
|
728
|
-
: (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
|
|
729
|
-
? "12px" // iPhone 12 Pro в landscape: такие же отступы как SE
|
|
730
|
-
: (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
|
|
731
|
-
? "12px" // iPhone 14 Pro Max в landscape: такие же отступы как SE
|
|
732
|
-
: isMobile || window.innerHeight < 700
|
|
733
|
-
? "8px"
|
|
734
|
-
: (typeof window !== "undefined" && window.devicePixelRatio >= 1.25 && window.devicePixelRatio <= 1.5) // Среднее масштабирование (125%-150%)
|
|
735
|
-
? "24px" // Больше отступы для экранов с масштабированием
|
|
736
|
-
: "20px",
|
|
737
|
-
justifyItems: "center",
|
|
738
|
-
maxWidth: isMobile && window.innerWidth > window.innerHeight
|
|
739
|
-
? "90%" // mobile landscape: используем больше ширины
|
|
740
|
-
: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
|
|
741
|
-
? "95%" // iPhone SE: используем почти всю ширину
|
|
742
|
-
: (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
|
|
743
|
-
? "95%" // iPhone XR в landscape: используем почти всю ширину как SE
|
|
744
|
-
: (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
|
|
745
|
-
? "95%" // iPhone 12 Pro в landscape: используем почти всю ширину как SE
|
|
746
|
-
: (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
|
|
747
|
-
? "95%" // iPhone 14 Pro Max в landscape: используем почти всю ширину как SE
|
|
748
|
-
: "100%",
|
|
749
|
-
padding: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
|
|
750
|
-
? "8px" // iPhone SE: минимальные внутренние отступы
|
|
751
|
-
: (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
|
|
752
|
-
? "8px" // iPhone XR в landscape: минимальные отступы как SE
|
|
753
|
-
: (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
|
|
754
|
-
? "8px" // iPhone 12 Pro в landscape: минимальные отступы как SE
|
|
755
|
-
: (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
|
|
756
|
-
? "8px" // iPhone 14 Pro Max в landscape: минимальные отступы как SE
|
|
757
|
-
: (typeof window !== "undefined" && window.devicePixelRatio >= 1.25 && window.devicePixelRatio <= 1.5) // Среднее масштабирование (125%-150%)
|
|
758
|
-
? "20px" // Дополнительные отступы для экранов с масштабированием
|
|
759
|
-
: "16px",
|
|
760
|
-
}}
|
|
761
|
-
>
|
|
762
|
-
{files.map((file, i) => {
|
|
763
|
-
const isHidden =
|
|
764
|
-
hiddenIndex === i && phase === "guess" && !answered;
|
|
765
|
-
return (
|
|
766
|
-
<div
|
|
767
|
-
key={i}
|
|
768
|
-
style={{
|
|
769
|
-
width: "100%",
|
|
770
|
-
height: "100%",
|
|
771
|
-
borderRadius: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
|
|
772
|
-
? "6px" // iPhone SE: меньшие скругления
|
|
773
|
-
: (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
|
|
774
|
-
? "6px" // iPhone XR в landscape: меньшие скругления как SE
|
|
775
|
-
: (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
|
|
776
|
-
? "6px" // iPhone 12 Pro в landscape: меньшие скругления как SE
|
|
777
|
-
: (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
|
|
778
|
-
? "6px" // iPhone 14 Pro Max в landscape: меньшие скругления как SE
|
|
779
|
-
: "12px",
|
|
780
|
-
overflow: "hidden",
|
|
781
|
-
boxShadow: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
|
|
782
|
-
? "0 1px 4px rgba(0,0,0,0.1)" // iPhone SE: меньшие тени
|
|
783
|
-
: (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
|
|
784
|
-
? "0 1px 4px rgba(0,0,0,0.1)" // iPhone XR в landscape: меньшие тени как SE
|
|
785
|
-
: (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
|
|
786
|
-
? "0 1px 4px rgba(0,0,0,0.1)" // iPhone 12 Pro в landscape: меньшие тени как SE
|
|
787
|
-
: (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
|
|
788
|
-
? "0 1px 4px rgba(0,0,0,0.1)" // iPhone 14 Pro Max в landscape: меньшие тени как SE
|
|
789
|
-
: "0 4px 12px rgba(0,0,0,0.15)",
|
|
790
|
-
transition: "all 0.3s ease",
|
|
791
|
-
cursor: "pointer",
|
|
792
|
-
...(result === "correct" && hiddenIndex === i
|
|
793
|
-
? {
|
|
794
|
-
boxShadow: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
|
|
795
|
-
? "0 0 15px #10b981"
|
|
796
|
-
: (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
|
|
797
|
-
? "0 0 15px #10b981" // iPhone XR в landscape: такие же тени как SE
|
|
798
|
-
: (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
|
|
799
|
-
? "0 0 15px #10b981" // iPhone 12 Pro в landscape: такие же тени как SE
|
|
800
|
-
: (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
|
|
801
|
-
? "0 0 15px #10b981" // iPhone 14 Pro Max в landscape: такие же тени как SE
|
|
802
|
-
: "0 0 20px #10b981",
|
|
803
|
-
transform: "scale(1.03)"
|
|
804
|
-
}
|
|
805
|
-
: {}),
|
|
806
|
-
...(result === "wrong" && hiddenIndex === i
|
|
807
|
-
? {
|
|
808
|
-
boxShadow: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
|
|
809
|
-
? "0 0 15px #ef4444"
|
|
810
|
-
: (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
|
|
811
|
-
? "0 0 15px #ef4444" // iPhone XR в landscape: такие же тени как SE
|
|
812
|
-
: (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
|
|
813
|
-
? "0 0 15px #ef4444" // iPhone 12 Pro в landscape: такие же тени как SE
|
|
814
|
-
: (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
|
|
815
|
-
? "0 0 15px #ef4444" // iPhone 14 Pro Max в landscape: такие же тени как SE
|
|
816
|
-
: "0 0 20px #ef4444",
|
|
817
|
-
transform: "scale(1.03)"
|
|
818
|
-
}
|
|
819
|
-
: {}),
|
|
820
|
-
}}
|
|
821
|
-
>
|
|
822
|
-
{!isHidden && (
|
|
823
|
-
<img
|
|
824
|
-
src={file.src}
|
|
825
|
-
alt={file.name}
|
|
826
|
-
style={{
|
|
827
|
-
width: "100%",
|
|
828
|
-
height: "100%",
|
|
829
|
-
objectFit: "cover",
|
|
830
|
-
}}
|
|
831
|
-
/>
|
|
832
|
-
)}
|
|
833
|
-
</div>
|
|
834
|
-
);
|
|
835
|
-
})}
|
|
836
|
-
</div>
|
|
837
|
-
)}
|
|
838
|
-
<div style={{
|
|
839
|
-
marginTop: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
|
|
840
|
-
? "1px" // iPhone SE: еще более минимальный отступ
|
|
841
|
-
: (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
|
|
842
|
-
? "1px" // iPhone до 14 Pro Max в landscape: такой же как SE
|
|
843
|
-
: (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
|
|
844
|
-
? "1px" // iPhone XR в landscape: такой же как SE
|
|
845
|
-
: (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
|
|
846
|
-
? "1px" // iPhone 12 Pro в landscape: такой же как SE
|
|
847
|
-
: (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
|
|
848
|
-
? "1px" // iPhone 14 Pro Max в landscape: такой же как SE
|
|
849
|
-
: (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700
|
|
850
|
-
? "4px" // iPhone landscape и малые экраны: минимальный отступ
|
|
851
|
-
: "16px",
|
|
852
|
-
height: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
|
|
853
|
-
? "40px" // iPhone SE: еще более компактная высота
|
|
854
|
-
: (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
|
|
855
|
-
? "40px" // iPhone до 14 Pro Max в landscape: такая же как SE
|
|
856
|
-
: (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
|
|
857
|
-
? "40px" // iPhone XR в landscape: такая же как SE
|
|
858
|
-
: (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
|
|
859
|
-
? "40px" // iPhone 12 Pro в landscape: такая же как SE
|
|
860
|
-
: (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
|
|
861
|
-
? "40px" // iPhone 14 Pro Max в landscape: такая же как SE
|
|
862
|
-
: (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700
|
|
863
|
-
? "50px" // iPhone landscape и малые экраны: компактная высота
|
|
864
|
-
: "80px"
|
|
865
|
-
}}>
|
|
866
|
-
{phase === "guess" && !answered && (
|
|
867
|
-
<div style={{
|
|
868
|
-
display: "flex",
|
|
869
|
-
flexDirection: isHorizontalLayout ? "row" : "column",
|
|
870
|
-
gap: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
|
|
871
|
-
? "3px" // iPhone SE: еще более минимальный отступ
|
|
872
|
-
: (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
|
|
873
|
-
? "3px" // iPhone до 14 Pro Max в landscape: такой же как SE
|
|
874
|
-
: (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
|
|
875
|
-
? "3px" // iPhone XR в landscape: такой же как SE
|
|
876
|
-
: (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
|
|
877
|
-
? "3px" // iPhone 12 Pro в landscape: такой же как SE
|
|
878
|
-
: (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
|
|
879
|
-
? "3px" // iPhone 14 Pro Max в landscape: такой же как SE
|
|
880
|
-
: (window.innerWidth === 1366 && window.innerHeight === 766) // 1366x766
|
|
881
|
-
? "8px" // 1366x766: отступ между инпутом и кнопкой
|
|
882
|
-
: (window.innerWidth === 1366 && window.innerHeight === 768) // 1366x768
|
|
883
|
-
? "8px" // 1366x768: отступ между инпутом и кнопкой
|
|
884
|
-
: (window.innerWidth === 1280 && window.innerHeight === 720) // 1280x720
|
|
885
|
-
? "8px" // 1280x720: отступ между инпутом и кнопкой
|
|
886
|
-
: (window.innerWidth === 1440 && window.innerHeight === 900) // 1440x900
|
|
887
|
-
? "8px" // 1440x900: отступ между инпутом и кнопкой
|
|
888
|
-
: isDesktopLayout // Десктопные разрешения
|
|
889
|
-
? "8px" // Десктопные разрешения: отступ между инпутом и кнопкой
|
|
890
|
-
: isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape
|
|
891
|
-
? "8px" // iPad и Surface DUO: отступ между инпутом и кнопкой
|
|
892
|
-
: (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "6px" : "12px",
|
|
893
|
-
alignItems: "center",
|
|
894
|
-
justifyContent: "center",
|
|
895
|
-
width: "100%",
|
|
896
|
-
maxWidth: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
|
|
897
|
-
? "270px" // iPhone SE: еще более компактная ширина
|
|
898
|
-
: (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
|
|
899
|
-
? "270px" // iPhone до 14 Pro Max в landscape: такая же как SE
|
|
900
|
-
: (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
|
|
901
|
-
? "270px" // iPhone XR в landscape: такая же как SE
|
|
902
|
-
: (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
|
|
903
|
-
? "270px" // iPhone 12 Pro в landscape: такая же как SE
|
|
904
|
-
: (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
|
|
905
|
-
? "270px" // iPhone 14 Pro Max в landscape: такая же как SE
|
|
906
|
-
: (window.innerWidth === 1366 && window.innerHeight === 766) // 1366x766
|
|
907
|
-
? "400px" // 1366x766: ширина контейнера
|
|
908
|
-
: (window.innerWidth === 1366 && window.innerHeight === 768) // 1366x768
|
|
909
|
-
? "400px" // 1366x768: ширина контейнера
|
|
910
|
-
: (window.innerWidth === 1280 && window.innerHeight === 720) // 1280x720
|
|
911
|
-
? "400px" // 1280x720: ширина контейнера
|
|
912
|
-
: (window.innerWidth === 1440 && window.innerHeight === 900) // 1440x900
|
|
913
|
-
? "400px" // 1440x900: ширина контейнера
|
|
914
|
-
: isDesktopLayout // Десктопные разрешения
|
|
915
|
-
? "400px" // Десктопные разрешения: ширина контейнера
|
|
916
|
-
: isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape
|
|
917
|
-
? "400px" // iPad и Surface DUO: ширина контейнера
|
|
918
|
-
: (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "400px" : "300px"
|
|
919
|
-
}}>
|
|
920
|
-
<>
|
|
921
|
-
<input
|
|
922
|
-
type="text"
|
|
923
|
-
placeholder="Type the missing word"
|
|
924
|
-
value={inputValue}
|
|
925
|
-
onChange={(e) => setInputValue(e.target.value)}
|
|
926
|
-
style={{
|
|
927
|
-
...styles.gmInput,
|
|
928
|
-
width: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
|
|
929
|
-
? "170px" // iPhone SE: еще более компактная ширина
|
|
930
|
-
: (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
|
|
931
|
-
? "170px" // iPhone до 14 Pro Max в landscape: такая же как SE
|
|
932
|
-
: (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
|
|
933
|
-
? "170px" // iPhone XR в landscape: такая же как SE
|
|
934
|
-
: (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
|
|
935
|
-
? "170px" // iPhone 12 Pro в landscape: такая же как SE
|
|
936
|
-
: (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
|
|
937
|
-
? "170px" // iPhone 14 Pro Max в landscape: такая же как SE
|
|
938
|
-
: (window.innerWidth === 1366 && window.innerHeight === 766) // 1366x766
|
|
939
|
-
? "250px" // 1366x766: ширина инпута
|
|
940
|
-
: (window.innerWidth === 1366 && window.innerHeight === 768) // 1366x768
|
|
941
|
-
? "250px" // 1366x768: ширина инпута
|
|
942
|
-
: (window.innerWidth === 1280 && window.innerHeight === 720) // 1280x720
|
|
943
|
-
? "250px" // 1280x720: ширина инпута
|
|
944
|
-
: (window.innerWidth === 1440 && window.innerHeight === 900) // 1440x900
|
|
945
|
-
? "250px" // 1440x900: ширина инпута
|
|
946
|
-
: isDesktopLayout // Десктопные разрешения
|
|
947
|
-
? "250px" // Десктопные разрешения: ширина инпута
|
|
948
|
-
: isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape
|
|
949
|
-
? "250px" // iPad и Surface DUO: ширина инпута
|
|
950
|
-
: (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "250px" : "auto",
|
|
951
|
-
padding: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
|
|
952
|
-
? "5px 6px" // iPhone SE: еще более компактный padding
|
|
953
|
-
: (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
|
|
954
|
-
? "5px 6px" // iPhone до 14 Pro Max в landscape: такой же как SE
|
|
955
|
-
: (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
|
|
956
|
-
? "5px 6px" // iPhone XR в landscape: такой же как SE
|
|
957
|
-
: (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
|
|
958
|
-
? "5px 6px" // iPhone 12 Pro в landscape: такой же как SE
|
|
959
|
-
: (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
|
|
960
|
-
? "5px 6px" // iPhone 14 Pro Max в landscape: такой же как SE
|
|
961
|
-
: (window.innerWidth === 1366 && window.innerHeight === 766) // 1366x766
|
|
962
|
-
? "10px 12px" // 1366x766: padding инпута
|
|
963
|
-
: (window.innerWidth === 1366 && window.innerHeight === 768) // 1366x768
|
|
964
|
-
? "10px 12px" // 1366x768: padding инпута
|
|
965
|
-
: (window.innerWidth === 1280 && window.innerHeight === 720) // 1280x720
|
|
966
|
-
? "10px 12px" // 1280x720: padding инпута
|
|
967
|
-
: (window.innerWidth === 1440 && window.innerHeight === 900) // 1440x900
|
|
968
|
-
? "10px 12px" // 1440x900: padding инпута
|
|
969
|
-
: isDesktopLayout // Десктопные разрешения
|
|
970
|
-
? "10px 12px" // Десктопные разрешения: padding инпута
|
|
971
|
-
: isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape
|
|
972
|
-
? "10px 12px" // iPad и Surface DUO: padding инпута
|
|
973
|
-
: (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "10px 12px" : "12px 16px",
|
|
974
|
-
fontSize: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
|
|
975
|
-
? "10px" // iPhone SE: еще меньший шрифт
|
|
976
|
-
: (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
|
|
977
|
-
? "10px" // iPhone до 14 Pro Max в landscape: такой же как SE
|
|
978
|
-
: (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
|
|
979
|
-
? "11px" // iPhone XR в landscape: компактный шрифт
|
|
980
|
-
: (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
|
|
981
|
-
? "10px" // iPhone 12 Pro в landscape: такой же как SE
|
|
982
|
-
: (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
|
|
983
|
-
? "10px" // iPhone 14 Pro Max в landscape: такой же как SE
|
|
984
|
-
: (window.innerWidth === 1366 && window.innerHeight === 766) // 1366x766
|
|
985
|
-
? "14px" // 1366x766: размер шрифта инпута
|
|
986
|
-
: (window.innerWidth === 1366 && window.innerHeight === 768) // 1366x768
|
|
987
|
-
? "14px" // 1366x768: размер шрифта инпута
|
|
988
|
-
: (window.innerWidth === 1280 && window.innerHeight === 720) // 1280x720
|
|
989
|
-
? "14px" // 1280x720: размер шрифта инпута
|
|
990
|
-
: (window.innerWidth === 1440 && window.innerHeight === 900) // 1440x900
|
|
991
|
-
? "14px" // 1440x900: размер шрифта инпута
|
|
992
|
-
: isDesktopLayout // Десктопные разрешения
|
|
993
|
-
? "14px" // Десктопные разрешения: размер шрифта инпута
|
|
994
|
-
: isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape
|
|
995
|
-
? "14px" // iPad и Surface DUO: размер шрифта инпута
|
|
996
|
-
: (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "14px" : "16px",
|
|
997
|
-
flex: isHorizontalLayout ? "1" : "none"
|
|
998
|
-
}}
|
|
999
|
-
/>
|
|
1000
|
-
<button
|
|
1001
|
-
style={{
|
|
1002
|
-
...styles.gmButton,
|
|
1003
|
-
marginLeft: isHorizontalLayout ? "8px" : "0",
|
|
1004
|
-
padding: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
|
|
1005
|
-
? "5px 8px" // iPhone SE: еще более компактный padding
|
|
1006
|
-
: (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
|
|
1007
|
-
? "6px 10px" // iPhone до 14 Pro Max в landscape: компактный padding
|
|
1008
|
-
: (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
|
|
1009
|
-
? "6px 10px" // iPhone XR в landscape: компактный padding
|
|
1010
|
-
: (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
|
|
1011
|
-
? "6px 10px" // iPhone 12 Pro в landscape: компактный padding
|
|
1012
|
-
: (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
|
|
1013
|
-
? "6px 10px" // iPhone 14 Pro Max в landscape: компактный padding
|
|
1014
|
-
: (window.innerWidth === 1366 && window.innerHeight === 766) // 1366x766
|
|
1015
|
-
? "10px 16px" // 1366x766: padding кнопки Check
|
|
1016
|
-
: (window.innerWidth === 1366 && window.innerHeight === 768) // 1366x768
|
|
1017
|
-
? "10px 16px" // 1366x768: padding кнопки Check
|
|
1018
|
-
: (window.innerWidth === 1280 && window.innerHeight === 720) // 1280x720
|
|
1019
|
-
? "10px 16px" // 1280x720: padding кнопки Check
|
|
1020
|
-
: (window.innerWidth === 1440 && window.innerHeight === 900) // 1440x900
|
|
1021
|
-
? "10px 16px" // 1440x900: padding кнопки Check
|
|
1022
|
-
: isDesktopLayout // Десктопные разрешения
|
|
1023
|
-
? "10px 16px" // Десктопные разрешения: padding кнопки Check
|
|
1024
|
-
: isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape
|
|
1025
|
-
? "10px 16px" // iPad и Surface DUO: padding кнопки Check
|
|
1026
|
-
: (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "10px 16px" : "12px 24px",
|
|
1027
|
-
fontSize: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
|
|
1028
|
-
? "10px" // iPhone SE: еще меньший шрифт
|
|
1029
|
-
: (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
|
|
1030
|
-
? "11px" // iPhone до 14 Pro Max в landscape: компактный шрифт
|
|
1031
|
-
: (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
|
|
1032
|
-
? "11px" // iPhone XR в landscape: компактный шрифт
|
|
1033
|
-
: (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
|
|
1034
|
-
? "11px" // iPhone 12 Pro в landscape: компактный шрифт
|
|
1035
|
-
: (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
|
|
1036
|
-
? "11px" // iPhone 14 Pro Max в landscape: компактный шрифт
|
|
1037
|
-
: (window.innerWidth === 1366 && window.innerHeight === 766) // 1366x766
|
|
1038
|
-
? "14px" // 1366x766: размер шрифта кнопки Check
|
|
1039
|
-
: (window.innerWidth === 1366 && window.innerHeight === 768) // 1366x768
|
|
1040
|
-
? "14px" // 1366x768: размер шрифта кнопки Check
|
|
1041
|
-
: (window.innerWidth === 1280 && window.innerHeight === 720) // 1280x720
|
|
1042
|
-
? "14px" // 1280x720: размер шрифта кнопки Check
|
|
1043
|
-
: (window.innerWidth === 1440 && window.innerHeight === 900) // 1440x900
|
|
1044
|
-
? "14px" // 1440x900: размер шрифта кнопки Check
|
|
1045
|
-
: isDesktopLayout // Десктопные разрешения
|
|
1046
|
-
? "14px" // Десктопные разрешения: размер шрифта кнопки Check
|
|
1047
|
-
: isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape
|
|
1048
|
-
? "14px" // iPad и Surface DUO: размер шрифта кнопки Check
|
|
1049
|
-
: (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "14px" : "16px",
|
|
1050
|
-
minWidth: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
|
|
1051
|
-
? "45px" // iPhone SE: еще более компактная ширина
|
|
1052
|
-
: (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
|
|
1053
|
-
? "55px" // iPhone до 14 Pro Max в landscape: компактная ширина
|
|
1054
|
-
: (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
|
|
1055
|
-
? "55px" // iPhone XR в landscape: компактная ширина
|
|
1056
|
-
: (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
|
|
1057
|
-
? "55px" // iPhone 12 Pro в landscape: компактная ширина
|
|
1058
|
-
: (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
|
|
1059
|
-
? "55px" // iPhone 14 Pro Max в landscape: компактная ширина
|
|
1060
|
-
: (window.innerWidth === 1366 && window.innerHeight === 766) // 1366x766
|
|
1061
|
-
? "80px" // 1366x766: минимальная ширина кнопки Check
|
|
1062
|
-
: (window.innerWidth === 1366 && window.innerHeight === 768) // 1366x768
|
|
1063
|
-
? "80px" // 1366x768: минимальная ширина кнопки Check
|
|
1064
|
-
: (window.innerWidth === 1280 && window.innerHeight === 720) // 1280x720
|
|
1065
|
-
? "80px" // 1280x720: минимальная ширина кнопки Check
|
|
1066
|
-
: (window.innerWidth === 1440 && window.innerHeight === 900) // 1440x900
|
|
1067
|
-
? "80px" // 1440x900: минимальная ширина кнопки Check
|
|
1068
|
-
: isDesktopLayout // Десктопные разрешения
|
|
1069
|
-
? "80px" // Десктопные разрешения: минимальная ширина кнопки Check
|
|
1070
|
-
: isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape
|
|
1071
|
-
? "80px" // iPad и Surface DUO: минимальная ширина кнопки Check
|
|
1072
|
-
: (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "80px" : "100px",
|
|
1073
|
-
flexShrink: 0
|
|
1074
|
-
}}
|
|
1075
|
-
onClick={checkAnswer}
|
|
1076
|
-
disabled={animating}
|
|
1077
|
-
>
|
|
1078
|
-
{animating ? "..." : "Check"}
|
|
1079
|
-
</button>
|
|
1080
|
-
</>
|
|
1081
|
-
</div>
|
|
1082
|
-
)}
|
|
1083
|
-
{answered && (
|
|
1084
|
-
<button style={{
|
|
1085
|
-
...styles.gmButton,
|
|
1086
|
-
padding: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
|
|
1087
|
-
? "5px 8px" // iPhone SE: еще более компактный padding
|
|
1088
|
-
: (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
|
|
1089
|
-
? "6px 10px" // iPhone до 14 Pro Max в landscape: компактный padding
|
|
1090
|
-
: (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
|
|
1091
|
-
? "6px 10px" // iPhone XR в landscape: компактный padding
|
|
1092
|
-
: (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
|
|
1093
|
-
? "6px 10px" // iPhone 12 Pro в landscape: компактный padding
|
|
1094
|
-
: (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
|
|
1095
|
-
? "6px 10px" // iPhone 14 Pro Max в landscape: компактный padding
|
|
1096
|
-
: (window.innerWidth === 1366 && window.innerHeight === 766) // 1366x766
|
|
1097
|
-
? "10px 16px" // 1366x766: padding кнопки Next round
|
|
1098
|
-
: (window.innerWidth === 1366 && window.innerHeight === 768) // 1366x768
|
|
1099
|
-
? "10px 16px" // 1366x768: padding кнопки Next round
|
|
1100
|
-
: (window.innerWidth === 1280 && window.innerHeight === 720) // 1280x720
|
|
1101
|
-
? "10px 16px" // 1280x720: padding кнопки Next round
|
|
1102
|
-
: (window.innerWidth === 1440 && window.innerHeight === 900) // 1440x900
|
|
1103
|
-
? "10px 16px" // 1440x900: padding кнопки Next round
|
|
1104
|
-
: isDesktopLayout // Десктопные разрешения
|
|
1105
|
-
? "10px 16px" // Десктопные разрешения: padding кнопки Next round
|
|
1106
|
-
: isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape
|
|
1107
|
-
? "10px 16px" // iPad и Surface DUO: padding кнопки Next round
|
|
1108
|
-
: (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "10px 16px" : "12px 24px",
|
|
1109
|
-
fontSize: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
|
|
1110
|
-
? "10px" // iPhone SE: еще меньший шрифт
|
|
1111
|
-
: (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
|
|
1112
|
-
? "11px" // iPhone до 14 Pro Max в landscape: компактный шрифт
|
|
1113
|
-
: (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
|
|
1114
|
-
? "11px" // iPhone XR в landscape: компактный шрифт
|
|
1115
|
-
: (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
|
|
1116
|
-
? "11px" // iPhone 12 Pro в landscape: компактный шрифт
|
|
1117
|
-
: (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
|
|
1118
|
-
? "11px" // iPhone 14 Pro Max в landscape: компактный шрифт
|
|
1119
|
-
: (window.innerWidth === 1366 && window.innerHeight === 766) // 1366x766
|
|
1120
|
-
? "14px" // 1366x766: размер шрифта кнопки Next round
|
|
1121
|
-
: (window.innerWidth === 1366 && window.innerHeight === 768) // 1366x768
|
|
1122
|
-
? "14px" // 1366x768: размер шрифта кнопки Next round
|
|
1123
|
-
: (window.innerWidth === 1280 && window.innerHeight === 720) // 1280x720
|
|
1124
|
-
? "14px" // 1280x720: размер шрифта кнопки Next round
|
|
1125
|
-
: (window.innerWidth === 1440 && window.innerHeight === 900) // 1440x900
|
|
1126
|
-
? "14px" // 1440x900: размер шрифта кнопки Next round
|
|
1127
|
-
: isDesktopLayout // Десктопные разрешения
|
|
1128
|
-
? "14px" // Десктопные разрешения: размер шрифта кнопки Next round
|
|
1129
|
-
: isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape
|
|
1130
|
-
? "14px" // iPad и Surface DUO: размер шрифта кнопки Next round
|
|
1131
|
-
: (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "14px" : "16px"
|
|
1132
|
-
}} onClick={nextRound}>
|
|
1133
|
-
Next round
|
|
1134
|
-
</button>
|
|
1135
|
-
)}
|
|
1136
|
-
</div>
|
|
1137
|
-
</div>
|
|
1138
|
-
)}
|
|
1139
|
-
</div>
|
|
1140
|
-
</div>
|
|
1141
|
-
</div>
|
|
1142
|
-
</div>
|
|
1143
|
-
);
|
|
1144
|
-
}
|