@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.
- package/CHANGELOG.md +245 -0
- package/dist/whats-missing.cjs.js +3 -3
- package/dist/whats-missing.es.js +177 -171
- package/package.json +1 -1
- package/src/Game.tsx +176 -131
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,245 @@
|
|
|
1
|
+
# Changelog - Последние исправления
|
|
2
|
+
|
|
3
|
+
## Версия 20.0.47 - Откат к стабильной версии
|
|
4
|
+
|
|
5
|
+
### 🔄 Изменения
|
|
6
|
+
|
|
7
|
+
#### **Откат предзагрузки изображений**
|
|
8
|
+
**Причина:** Предзагрузка вызывала проблемы с UX - пользователи не понимали почему кнопка "Start game" не работает сразу.
|
|
9
|
+
|
|
10
|
+
**Что убрано:**
|
|
11
|
+
- Состояния `loadedImages` и `preloadQueue`
|
|
12
|
+
- Функции `preloadImage` и `preloadImages`
|
|
13
|
+
- Placeholder (skeleton) для изображений
|
|
14
|
+
- Асинхронная версия `startGame`
|
|
15
|
+
- Fetch Priority API
|
|
16
|
+
|
|
17
|
+
**Что осталось:**
|
|
18
|
+
- ✅ Фикс скролла после выхода из игры
|
|
19
|
+
- ✅ Исправление кнопки Check на iPhone
|
|
20
|
+
- ✅ Решение обрезания иконок на экранах с DPR 1.25–1.5
|
|
21
|
+
|
|
22
|
+
**Результат:**
|
|
23
|
+
- Кнопка "Start game" работает мгновенно
|
|
24
|
+
- Простая и стабильная версия без сложной логики загрузки
|
|
25
|
+
- Все предыдущие исправления сохранены
|
|
26
|
+
|
|
27
|
+
---
|
|
28
|
+
|
|
29
|
+
## Версия 20.0.46 - Оптимизация загрузки изображений (ОТКАТ)
|
|
30
|
+
|
|
31
|
+
### 🚀 Новые возможности
|
|
32
|
+
|
|
33
|
+
#### **Умная предзагрузка изображений**
|
|
34
|
+
**Проблема:** На медленных соединениях (VPN, 3G) картинки грузились долго, терялся принцип игры.
|
|
35
|
+
|
|
36
|
+
**Решение:**
|
|
37
|
+
- Добавлена система предзагрузки изображений с приоритетами
|
|
38
|
+
- Placeholder (skeleton) пока грузится изображение
|
|
39
|
+
- Плавный переход (fade-in) после загрузки
|
|
40
|
+
- Fetch Priority API для оптимизации загрузки
|
|
41
|
+
|
|
42
|
+
**Преимущества:**
|
|
43
|
+
- ✅ Мгновенное отображение после клика "Start game"
|
|
44
|
+
- ✅ Улучшен UX на медленных соединениях
|
|
45
|
+
- ✅ Изображения готовы до того, как пользователь их увидит
|
|
46
|
+
- ✅ Браузер получает инструкции о приоритете загрузки
|
|
47
|
+
|
|
48
|
+
**Код изменений:**
|
|
49
|
+
```typescript
|
|
50
|
+
// Добавлены состояния
|
|
51
|
+
const [loadedImages, setLoadedImages] = useState<Set<string>>(new Set());
|
|
52
|
+
|
|
53
|
+
// Функции предзагрузки
|
|
54
|
+
const preloadImage = (src: string): Promise<void> => { ... };
|
|
55
|
+
const preloadImages = async (urls: string[]): Promise<void> => { ... };
|
|
56
|
+
|
|
57
|
+
// startGame теперь async и предзагружает изображения
|
|
58
|
+
const startGame = async () => {
|
|
59
|
+
const selected = getRandomSix(themes[theme]);
|
|
60
|
+
await preloadImages(selected.map(item => item.src)); // Текущий раунд
|
|
61
|
+
preloadImages(nextBatch.map(item => item.src)); // Следующий раунд в фоне
|
|
62
|
+
// ...
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
// JSX с placeholder и анимацией загрузки
|
|
66
|
+
<img
|
|
67
|
+
fetchpriority={loadedImages.has(file.src) ? "auto" : "high"}
|
|
68
|
+
onLoad={() => setLoadedImages(prev => new Set(prev).add(file.src))}
|
|
69
|
+
style={{ opacity: loadedImages.has(file.src) ? 1 : 0, transition: "opacity 0.3s ease" }}
|
|
70
|
+
/>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
**Файлы:** `src/Game.tsx` (строки 129-130, 255-272, 274-311, 773-803)
|
|
74
|
+
|
|
75
|
+
---
|
|
76
|
+
|
|
77
|
+
## Версия 20.0.45 - Критические исправления
|
|
78
|
+
|
|
79
|
+
### 🔧 Исправления
|
|
80
|
+
|
|
81
|
+
#### 1. **Проблема со скроллом после выхода из игры**
|
|
82
|
+
**Проблема:** После закрытия игры скролл пропадал на всем сайте и восстанавливался только после обновления страницы.
|
|
83
|
+
|
|
84
|
+
**Решение:**
|
|
85
|
+
- Добавлен ID `whats-missing-reset` для стилей
|
|
86
|
+
- В `useEffect` cleanup теперь полностью удаляется style элемент из `<head>`
|
|
87
|
+
- Восстанавливается `overflow` на `html` и `body` элементах
|
|
88
|
+
|
|
89
|
+
**Код изменений:**
|
|
90
|
+
```typescript
|
|
91
|
+
// globalReset() - добавлен ID
|
|
92
|
+
const globalReset = () => {
|
|
93
|
+
const style = document.createElement("style");
|
|
94
|
+
style.id = "whats-missing-reset"; // ✅ Добавлено
|
|
95
|
+
|
|
96
|
+
// ... остальной код
|
|
97
|
+
|
|
98
|
+
// ✅ Удаляем старый стиль, если он есть
|
|
99
|
+
const existingStyle = document.getElementById("whats-missing-reset");
|
|
100
|
+
if (existingStyle) {
|
|
101
|
+
existingStyle.remove();
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
document.head.appendChild(style);
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
// useEffect cleanup
|
|
108
|
+
useEffect(() => {
|
|
109
|
+
globalReset();
|
|
110
|
+
return () => {
|
|
111
|
+
// ✅ Восстанавливаем overflow на html и body
|
|
112
|
+
document.documentElement.style.overflow = "";
|
|
113
|
+
document.body.style.overflow = "";
|
|
114
|
+
|
|
115
|
+
// ✅ Удаляем наш style элемент
|
|
116
|
+
const style = document.getElementById("whats-missing-reset");
|
|
117
|
+
if (style) {
|
|
118
|
+
style.remove();
|
|
119
|
+
}
|
|
120
|
+
};
|
|
121
|
+
}, []);
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
**Файлы:** `src/Game.tsx` (строки 15-54, 83-96)
|
|
125
|
+
|
|
126
|
+
---
|
|
127
|
+
|
|
128
|
+
#### 2. **Проблема с кнопкой Check на iPhone**
|
|
129
|
+
**Проблема:** На iPhone в portrait режиме кнопка Check изначально появлялась внизу под инпутом, но при фокусе на инпут она перемещалась в бок.
|
|
130
|
+
|
|
131
|
+
**Причина:** Inline проверка `window.innerWidth` и `window.innerHeight` в JSX выполнялась на каждом рендере, что привело к нестабильному layout из-за изменения размеров браузера при фокусе/скролле.
|
|
132
|
+
|
|
133
|
+
**Решение:**
|
|
134
|
+
- Добавлено состояние `isHorizontalLayout` для определения layout
|
|
135
|
+
- Расчет выполняется ОДИН РАЗ в `useEffect` при монтировании/изменении размера
|
|
136
|
+
- В JSX используется стабильное состояние вместо inline проверок
|
|
137
|
+
|
|
138
|
+
**Код изменений:**
|
|
139
|
+
```typescript
|
|
140
|
+
// Добавлено состояние
|
|
141
|
+
const [isHorizontalLayout, setIsHorizontalLayout] = useState(false);
|
|
142
|
+
|
|
143
|
+
// В существующий useEffect добавлен расчет
|
|
144
|
+
const isHorizontal =
|
|
145
|
+
(mobile && width > height) ||
|
|
146
|
+
height < 700 ||
|
|
147
|
+
(width === 1366 && height === 766) ||
|
|
148
|
+
(width === 1366 && height === 768) ||
|
|
149
|
+
(width === 1280 && height === 720) ||
|
|
150
|
+
(width === 1440 && height === 900) ||
|
|
151
|
+
isIPadMiniPortrait ||
|
|
152
|
+
isIPadMiniLandscape ||
|
|
153
|
+
isIPadAirPortrait ||
|
|
154
|
+
isIPadAirLandscape ||
|
|
155
|
+
isSurfaceDuoPortrait ||
|
|
156
|
+
isSurfaceDuoLandscape ||
|
|
157
|
+
isIPadProPortrait ||
|
|
158
|
+
isIPadProLandscape ||
|
|
159
|
+
isDesktopLayout;
|
|
160
|
+
setIsHorizontalLayout(isHorizontal);
|
|
161
|
+
|
|
162
|
+
// В JSX заменены inline проверки
|
|
163
|
+
flexDirection: isHorizontalLayout ? "row" : "column", // Вместо длинной inline проверки
|
|
164
|
+
flex: isHorizontalLayout ? "1" : "none",
|
|
165
|
+
marginLeft: isHorizontalLayout ? "8px" : "0",
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
**Файлы:** `src/美国人.tsx` (строки 128, 201-218, 778, 906, 912)
|
|
169
|
+
|
|
170
|
+
---
|
|
171
|
+
|
|
172
|
+
#### 3. **Проблема с обрезанием иконок на экранах с масштабированием**
|
|
173
|
+
**Проблема:** На экранах с масштабированием Windows 125% (DPR 1.25) иконки обрезались по краям родительского окна.
|
|
174
|
+
|
|
175
|
+
**Причина:**
|
|
176
|
+
- Device Pixel Ratio 1.25 = 125% масштабирование
|
|
177
|
+
- Фиксированная высота `gridAutoRows: "210px"` была недостаточной для такого масштабирования
|
|
178
|
+
- Недостаточно gap и padding для компенсации обрезания
|
|
179
|
+
|
|
180
|
+
**Решение:**
|
|
181
|
+
Добавлено специальное правило для экранов с DPR 1.25-1.5 (125%-150% масштабирование):
|
|
182
|
+
|
|
183
|
+
```typescript
|
|
184
|
+
// gridAutoRows - добавлена проверка DPR
|
|
185
|
+
: (typeof window !== "undefined" && window.devicePixelRatio >= 1.25 && window.devicePixelRatio <= 1.5)
|
|
186
|
+
? "240px" // Больше высота для экранов с масштабированием
|
|
187
|
+
: "210px",
|
|
188
|
+
|
|
189
|
+
// gap - добавлена проверка DPR
|
|
190
|
+
: (typeof window !== "undefined" && window.devicePixelRatio >= 1.25 && window.devicePixelRatio <= 1.5)
|
|
191
|
+
? "24px" // Больше отступы для экранов с масштабированием
|
|
192
|
+
: "20px",
|
|
193
|
+
|
|
194
|
+
// padding - добавлена проверка DPR
|
|
195
|
+
: (typeof window !== "undefined" && window.devicePixelRatio >= 1.25 && window.devicePixelRatio <= 1.5)
|
|
196
|
+
? "20px" // Дополнительные отступы для экранов с масштабированием
|
|
197
|
+
: "16px",
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
**Файлы:** `src/Game.tsx` (строки 638-640, 651-653, 674-676)
|
|
201
|
+
|
|
202
|
+
---
|
|
203
|
+
|
|
204
|
+
### 📊 Влияние изменений
|
|
205
|
+
|
|
206
|
+
#### Скр ling фикс:
|
|
207
|
+
- ✅ Исправляет проблему на всех устройствах
|
|
208
|
+
- ✅ Не влияет на другие функции
|
|
209
|
+
|
|
210
|
+
#### Кнопка Check фикс:
|
|
211
|
+
- ✅ Исправляет на iPhone
|
|
212
|
+
- ❌ Не влияет на другие устройства
|
|
213
|
+
- ✅ Улучшает стабильность layout
|
|
214
|
+
|
|
215
|
+
#### DPR фикс:
|
|
216
|
+
- ✅ Исправляет на экранах с масштабированием 125%-150%
|
|
217
|
+
- ❌ Не влияет на iPhone (DPR 2.0-3.0)
|
|
218
|
+
- ❌ Не влияет на iPad (DPR 1.0-2.0)
|
|
219
|
+
- ❌ Не влияет на стандартные мониторы (DPR 1.0)
|
|
220
|
+
- ❌ Не влияет на Retina MacBook (DPR 2.0)
|
|
221
|
+
|
|
222
|
+
---
|
|
223
|
+
|
|
224
|
+
### 🔄 Как применить в своем проекте
|
|
225
|
+
|
|
226
|
+
1. **Скопируйте следующие части кода из `src/Game.tsx`:**
|
|
227
|
+
- `globalReset()` функция (строки 15-54)
|
|
228
|
+
- `useEffect` с cleanup (строки 83-96)
|
|
229
|
+
- Состояние `isHorizontalLayout` (строка 128)
|
|
230
|
+
- Расчет `isHorizontalLayout` в useEffect (строки 201-218)
|
|
231
|
+
- Использование `isHorizontalLayout` в JSX (строки 778, 906, 912)
|
|
232
|
+
- Проверки `window.devicePixelRatio` в gridAutoRows, gap, padding (строки 638-640, 651-653, 674-676)
|
|
233
|
+
|
|
234
|
+
2. **Альтернативный способ:**
|
|
235
|
+
- Используйте эту библиотеку из npm: `@mblinkov/whats-missing@20.0.45`
|
|
236
|
+
|
|
237
|
+
---
|
|
238
|
+
|
|
239
|
+
## Примечания
|
|
240
|
+
|
|
241
|
+
- Все изменения обратно совместимы
|
|
242
|
+
- Не влияют на существующий функционал
|
|
243
|
+
- Улучшают UX на проблемных устройствах
|
|
244
|
+
- Код проверен и протестирован
|
|
245
|
+
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),d=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),d=require("react"),Fn=window.origin+"/cloud/speakid/games/whatsmissing/",_=(r,u)=>r.map(([f,h])=>({src:`${Fn}${u}/${h.replace(/\s/g,"%20")}.png`,name:h})),Yn=[["apple","apple"],["banana","banana"],["bread","bread"],["burger","burger"],["cake","cake"],["carrot","carrot"],["cheese","cheese"],["chicken","chicken"],["chocolate","chocolate"],["corn","corn"],["donut","donut"],["fish","fish"],["fries","fries"],["grapes","grapes"],["ice_cream","ice cream"],["milk","milk"],["orange","orange"],["pear","pear"],["pizza","pizza"],["rice","rice"],["sandwich","sandwich"],["soup","soup"],["strawberry","strawberry"],["tomato","tomato"],["watermelon","watermelon"]],qn=[["bear","bear"],["cat","cat"],["crocodile","crocodile"],["dolphin","dolphin"],["elephant","elephant"],["fox","fox"],["giraffe","giraffe"],["horse","horse"],["kangaroo","kangaroo"],["lion","lion"],["monkey","monkey"],["owl","owl"],["panda","panda"],["penguin","penguin"],["squirrel","squirrel"],["tiger","tiger"],["tortoise","tortoise"],["wolf","wolf"],["zebra","zebra"]],Un=[["ball","ball"],["balloon","balloon"],["blocks","blocks"],["car","car"],["doll","doll"],["drum","drum"],["guitar","guitar"],["jump_rope","jump rope"],["kite","kite"],["paints","paints"],["plane","plane"],["puzzle","puzzle"],["rocket","rocket"],["scooter","scooter"],["skateboard","skateboard"],["slide","slide"],["teddy_bear","teddy bear"],["yo-yo","yo-yo"],["crayons","crayons"]],$={food:_(Yn,"food"),animals:_(qn,"animals"),toys:_(Un,"toys")},Nn=`
|
|
2
2
|
@keyframes spin {
|
|
3
3
|
from { transform: rotate(0deg); }
|
|
4
4
|
to { transform: rotate(360deg); }
|
|
5
5
|
}
|
|
6
|
-
`;if(typeof document<"u"&&!document.getElementById("spin-keyframes")){const
|
|
6
|
+
`;if(typeof document<"u"&&!document.getElementById("spin-keyframes")){const r=document.createElement("style");r.id="spin-keyframes",r.innerHTML=Nn,document.head.appendChild(r)}const On={animation:"spin 1.4s linear infinite"},w={gmCenterScreen:{position:"relative",zIndex:1,minHeight:"100%",width:"100%",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",textAlign:"center",color:"#1f2937",padding:"24px 16px",boxSizing:"border-box",transform:"translateY(20px)"},gmHeadline1:{fontWeight:700,fontSize:"clamp(28px, 4vw, 40px)",lineHeight:"110%"},gmHeadline3:{fontWeight:600,fontSize:"18px",lineHeight:"130%"},gmBodyM:{fontWeight:400,fontSize:"16px",lineHeight:"140%"},gmBodyS:{fontWeight:400,fontSize:"14px",lineHeight:"140%",color:"#6b7280"},gmButton:{fontFamily:'"Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans"',fontWeight:600,fontSize:"16px",padding:"10px 16px",borderRadius:"12px",border:"1px solid #e5e7eb",background:"#ec4c44",color:"#ffffff",cursor:"pointer",boxShadow:"0 6px 18px rgba(236, 76, 68, .18)",transition:"transform .06s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease"},gmButtonActive:{background:"#333",color:"#fff"},gmGameLayout:{position:"relative",width:"100%",maxWidth:"none",minHeight:"100%",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",textAlign:"center",color:"#1f2937",padding:"16px 8px",margin:"0 auto"},gmGrid:{width:"100%",maxWidth:"none",margin:"0 auto",display:"grid",gridTemplateColumns:"repeat(3, 210px)",gridAutoRows:"210px",gap:"20px",justifyContent:"center"},gmInput:{padding:"6px 10px",borderRadius:"6px",border:"1px solid #ccc",fontSize:"16px",fontFamily:'"Geist", system-ui',width:"160px"},gmTable:{marginTop:"20px",marginBottom:"32px",borderCollapse:"collapse",width:"100%",maxWidth:"520px",tableLayout:"fixed",textAlign:"center"},gmTableCell:{padding:"8px 12px",borderBottom:"1px solid #e5e7eb",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},gmLogoFixed:{position:"absolute",top:"16px",left:"24px",width:"120px",zIndex:10,pointerEvents:"none",background:"transparent",transform:"none",willChange:"auto"},gmLogoImg:{height:"clamp(28px, 5vw, 40px)",width:"auto",background:"transparent",objectFit:"contain",imageRendering:"auto",transform:"translateZ(0)",backfaceVisibility:"hidden",WebkitFontSmoothing:"antialiased"},gmHourglass:{fontSize:"42px",...On}},Vn=()=>{const r=document.createElement("style");r.id="whats-missing-reset",r.textContent=`
|
|
7
7
|
#whats-missing-root, #whats-missing-root * {
|
|
8
8
|
box-sizing: border-box;
|
|
9
9
|
font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
|
@@ -29,4 +29,4 @@
|
|
|
29
29
|
height: 100% !important;
|
|
30
30
|
overflow: hidden !important;
|
|
31
31
|
}
|
|
32
|
-
`,document.head.appendChild(o)},Nn=(o,y)=>{const f=Array.from({length:o.length+1},()=>Array(y.length+1).fill(0));for(let h=0;h<=o.length;h++)f[h][0]=h;for(let h=0;h<=y.length;h++)f[0][h]=h;for(let h=1;h<=o.length;h++)for(let c=1;c<=y.length;c++)f[h][c]=o[h-1]===y[c-1]?f[h-1][c-1]:Math.min(f[h-1][c-1],f[h][c-1],f[h-1][c])+1;return f[o.length][y.length]};function On({gameCubeSize:o,screenHeight:y,screenWidth:f}){const h=d.useRef(null);d.useEffect(()=>(Un(),()=>{document.body.style.overflow=""}),[]);const[c,$]=d.useState(null),[k,K]=d.useState([]),[z,gn]=d.useState(4),[v,Z]=d.useState(!1),[L,J]=d.useState(1),[S,an]=d.useState(null),[b,M]=d.useState("ready"),[Q,X]=d.useState(3),[A,D]=d.useState(10),[E,nn]=d.useState(20),[pn,G]=d.useState(0),[C,F]=d.useState(!1),[R,en]=d.useState(""),[j,Y]=d.useState(!1),[q,tn]=d.useState(!1),[wn,T]=d.useState(null),[xn,U]=d.useState([]),[ln,dn]=d.useState([]),[n,Hn]=d.useState(!1),[Vn,N]=d.useState(1),[on,O]=d.useState(null),[u,Wn]=d.useState(!1),[s,cn]=d.useState(!1),[g,mn]=d.useState(!1),[a,un]=d.useState(!1),[p,fn]=d.useState(!1),[x,yn]=d.useState(!1),[l,bn]=d.useState(!1),[H,Sn]=d.useState(!1),[W,jn]=d.useState(!1);d.useEffect(()=>{const e=()=>{const w=f??window.innerWidth,r=y??window.innerHeight,m=w<768||w===926&&r===428||w===932&&r===430,I=r<700,P=w===768&&r===1024,B=w===1024&&r===768,Pn=w===820&&r===1180,zn=w===1180&&r===820,Ln=w===540&&r===720,Mn=w===720&&r===540,Cn=w===1024&&r===1366,Rn=w===1366&&r===1024,Bn=w>=1200&&r>=600&&!m;if(Wn(Bn),cn(P),mn(B),un(Pn),fn(zn),yn(Ln),bn(Mn),Sn(Cn),jn(Rn),Hn(m),m)O(o&&o>=320?o:null),N(1);else if(I)O(o&&o>=400?o:null),N(1);else{const An=o?Math.max(400,Math.min(1200,o)):Math.min(1e3,Math.min(w,r)*.9);O(An),N(1)}};return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[f,y,o]);const rn=e=>[...e].sort(()=>Math.random()-.5).slice(0,6),hn=()=>{if(!c)return;const e=rn(_[c]);K(e),Z(!0),F(!1),J(1),G(0),U([]),dn([]),sn(e,[],!0)},sn=(e=k,w=ln,r=!1)=>{const m=rn(e.length?e:_[c]);let I=Math.floor(Math.random()*m.length),P=m[I].name,B=0;for(;w.includes(P)&&B<20;)I=Math.floor(Math.random()*m.length),P=m[I].name,B++;K(m),an(I),dn([...w,P]),Y(!1),en(""),nn(20),T(null),r?(M("ready"),X(3),D(10)):(M("memorize"),D(10))};d.useEffect(()=>{if(!(!v||C||j)){if(b==="ready")if(Q<=0)M("memorize");else{const e=setTimeout(()=>X(w=>w-1),1e3);return()=>clearTimeout(e)}if(b==="memorize")if(A<=0)M("guess");else{const e=setTimeout(()=>D(w=>w-1),1e3);return()=>clearTimeout(e)}if(b==="guess"){if(E<=0){Y(!0),T("wrong");const w=k[S].name;U(r=>[...r,{round:L,answer:R,correct:w,result:"wrong"}]);return}const e=setTimeout(()=>nn(w=>w-1),1e3);return()=>clearTimeout(e)}}},[b,Q,A,E,v,C,j,k,S,L,R]);const In=()=>{if(S===null||q)return;const e=k[S].name,w=R.toLowerCase().trim();let r="wrong";w===e?(G(m=>m+1),T("correct"),r="correct"):Nn(w,e)===1?(G(m=>m+.5),T("almost"),r="almost"):(T("wrong"),r="wrong"),U(m=>[...m,{round:L,answer:w,correct:e,result:r}]),tn(!0),setTimeout(()=>{tn(!1),Y(!0)},600)},kn=()=>L<z?(J(e=>e+1),sn()):F(!0),vn=()=>{Z(!1),F(!1),$(null)},Tn=d.useMemo(()=>n&&window.innerWidth>window.innerHeight||window.innerHeight<700?null:i.jsx("div",{style:{...t.gmLogoFixed,position:"absolute",top:16,left:16,zIndex:30},children:i.jsxs("picture",{children:[i.jsx("source",{srcSet:window.origin+"/cloud/speakid/games/whatsmissing/logo.svg",type:"image/svg+xml"}),i.jsx("img",{src:window.origin+"/cloud/speakid/games/whatsmissing/logo.png",alt:"SPEAKID Logo",style:t.gmLogoImg,loading:"lazy"})]})}),[n]);return i.jsx("div",{ref:h,style:{width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",transition:"background 0.3s ease",overflow:"hidden",position:"absolute",top:0,left:0,right:0,bottom:0},children:i.jsx("div",{style:{width:n?"100%":on||o||1e3,height:n?"100%":on||o||1e3,display:"flex",justifyContent:"center",alignItems:"center",overflow:"hidden",borderRadius:n?0:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",boxShadow:n?"none":"0 0 40px rgba(0,0,0,0.1)",margin:n?"0 auto":"unset",position:"relative"},children:i.jsx("div",{style:{transform:"none",width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:i.jsxs("div",{id:"whats-missing-root",children:[!n&&Tn,!c&&!v&&i.jsxs("div",{style:t.gmCenterScreen,children:[i.jsx("h1",{style:t.gmHeadline1,children:"WHAT'S MISSING?"}),i.jsx("p",{style:t.gmBodyM,children:"Select a theme:"}),i.jsx("div",{style:{display:"flex",gap:n&&window.innerWidth>window.innerHeight||n&&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"},children:["animals","food","toys"].map(e=>i.jsx("button",{style:{...t.gmButton,padding:n&&window.innerWidth>window.innerHeight||n&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"8px 12px":"12px 24px",fontSize:n&&window.innerWidth>window.innerHeight||n&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"12px":"16px",minWidth:n&&window.innerWidth>window.innerHeight||n&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"70px":"auto"},onClick:()=>$(e),children:e==="animals"?"🐶 Animals":e==="food"?"🍎 Food":"🧸 Toys"},e))}),i.jsxs("div",{style:{marginTop:24},children:[i.jsx("p",{style:t.gmBodyS,children:"Choose number of rounds:"}),i.jsx("div",{style:{display:"flex",gap:n&&window.innerWidth>window.innerHeight||n&&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},children:[3,4,5].map(e=>i.jsx("button",{style:{...t.gmButton,...z===e?t.gmButtonActive:{},padding:n&&window.innerWidth>window.innerHeight||n&&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",fontSize:n&&window.innerWidth>window.innerHeight||n&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"12px":"16px",minWidth:n&&window.innerWidth>window.innerHeight||n&&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"},onClick:()=>gn(e),children:e},e))})]})]}),c&&!v&&i.jsxs("div",{style:t.gmCenterScreen,children:[i.jsxs("h1",{style:t.gmHeadline1,children:["Theme selected: ",c]}),i.jsxs("p",{style:t.gmBodyM,children:["Rounds: ",z]}),i.jsx("button",{style:{...t.gmButton,padding:n&&window.innerWidth>window.innerHeight||n&&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",fontSize:n&&window.innerWidth>window.innerHeight||n&&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",minWidth:n&&window.innerWidth>window.innerHeight||n&&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"},onClick:hn,children:"▶ Start game"})]}),C&&i.jsxs("div",{style:t.gmCenterScreen,children:[i.jsx("h1",{style:{...t.gmHeadline1,marginTop:n&&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||s||g||a||p||x||l||H||W?"0px":t.gmHeadline1.marginTop,marginBottom:n&&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||s||g||a||p||x||l||H||W?"2px":t.gmHeadline1.marginBottom},children:"Results"}),i.jsxs("h2",{style:{...t.gmHeadline3,marginTop:n&&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||s||g||a||p||x||l||H||W?"0px":t.gmHeadline3.marginTop,marginBottom:n&&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||s||g||a||p||x||l||H||W?"2px":t.gmHeadline3.marginBottom},children:["Your score: ",pn," / ",z]}),i.jsx("p",{style:{...t.gmBodyM,color:"#10b981",marginTop:n&&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||s||g||a||p||x||l||H||W?"0px":"12px",marginBottom:n&&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||s||g||a||p||x||l||H||W?"2px":t.gmBodyM.marginBottom},children:"Yahoo! You did it! 🍬✨"}),i.jsxs("table",{style:{...t.gmTable,marginTop:n&&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||s||g||a||p||x||l||H||W?"0px":"20px",marginBottom:n&&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||s||g||a||p||x||l||H||W?"4px":"32px"},children:[i.jsx("thead",{children:i.jsxs("tr",{children:[i.jsx("th",{children:"Round"}),i.jsx("th",{children:"Your Answer"}),i.jsx("th",{children:"Correct"}),i.jsx("th",{children:"Result"})]})}),i.jsx("tbody",{children:xn.map((e,w)=>i.jsxs("tr",{children:[i.jsx("td",{style:t.gmTableCell,children:e.round}),i.jsx("td",{style:t.gmTableCell,children:e.answer||"—"}),i.jsx("td",{style:t.gmTableCell,children:e.correct}),i.jsx("td",{style:t.gmTableCell,children:e.result==="correct"?"✔ Correct":e.result==="almost"?"◐ Almost (0.5)":"✘ Wrong"})]},w))})]}),i.jsxs("div",{style:{display:"flex",gap:n&&window.innerWidth>window.innerHeight||n&&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:n&&window.innerWidth>window.innerHeight||n&&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||u?"12px":"24px"},children:[i.jsx("button",{style:{...t.gmButton,padding:n&&window.innerWidth>window.innerHeight||n&&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",fontSize:n&&window.innerWidth>window.innerHeight||n&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"12px":"16px",minWidth:n&&window.innerWidth>window.innerHeight||n&&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"},onClick:hn,children:"🔁 Play again"}),i.jsx("button",{style:{...t.gmButton,padding:n&&window.innerWidth>window.innerHeight||n&&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",fontSize:n&&window.innerWidth>window.innerHeight||n&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"12px":"16px",minWidth:n&&window.innerWidth>window.innerHeight||n&&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"},onClick:vn,children:"⬅️ Choose theme"})]})]}),v&&!C&&i.jsxs("div",{style:t.gmGameLayout,children:[i.jsxs("div",{style:{minHeight:n&&window.innerWidth<=375&&window.innerHeight<=667||n&&window.innerWidth>window.innerHeight&&window.innerHeight<=428||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"45px":n&&window.innerWidth>window.innerHeight||window.innerHeight<700?"60px":"160px",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",paddingTop:n&&window.innerWidth<=375&&window.innerHeight<=667||n&&window.innerWidth>window.innerHeight&&window.innerHeight<=428||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"8px":n&&window.innerWidth>window.innerHeight||window.innerHeight<700?"15px":"40px"},children:[b==="ready"&&i.jsxs(i.Fragment,{children:[i.jsx("h1",{style:{...t.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),i.jsx("div",{style:t.gmHourglass,children:"⏳"})]}),b==="memorize"&&i.jsxs("p",{style:{...t.gmBodyM,color:"#10b981"},children:["MEMORIZE (",A,")"]}),b==="guess"&&!j&&i.jsxs("p",{style:t.gmBodyM,children:["⏳ Time left: ",E,"s"]})]}),b!=="ready"&&i.jsx("div",{style:{...t.gmGrid,gridTemplateColumns:n&&window.innerWidth>window.innerHeight||n&&window.innerWidth<=375&&window.innerHeight<=667?"repeat(3, 1fr)":n?"repeat(2, 1fr)":window.innerHeight<700?"repeat(3, 1fr)":"repeat(3, 210px)",gridAutoRows:n&&window.innerWidth>window.innerHeight?"120px":n&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"100px":n?"150px":window.innerHeight<700?"140px":"210px",gap:n&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"12px":n||window.innerHeight<700?"8px":"20px",justifyItems:"center",maxWidth:n&&window.innerWidth>window.innerHeight?"90%":n&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"95%":"100%",padding:n&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"8px":"16px"},children:k.map((e,w)=>{const r=S===w&&b==="guess"&&!j;return i.jsx("div",{style:{width:"100%",height:"100%",borderRadius:n&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"6px":"12px",overflow:"hidden",boxShadow:n&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"0 1px 4px rgba(0,0,0,0.1)":"0 4px 12px rgba(0,0,0,0.15)",transition:"all 0.3s ease",cursor:"pointer",...wn==="correct"&&S===w?{boxShadow:n&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"0 0 15px #10b981":"0 0 20px #10b981",transform:"scale(1.03)"}:{},...wn==="wrong"&&S===w?{boxShadow:n&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"0 0 15px #ef4444":"0 0 20px #ef4444",transform:"scale(1.03)"}:{}},children:!r&&i.jsx("img",{src:e.src,alt:e.name,style:{width:"100%",height:"100%",objectFit:"cover"}})},w)})}),i.jsxs("div",{style:{marginTop:n&&window.innerWidth<=375&&window.innerHeight<=667||n&&window.innerWidth>window.innerHeight&&window.innerHeight<=428||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"1px":n&&window.innerWidth>window.innerHeight||window.innerHeight<700?"4px":"16px",height:n&&window.innerWidth<=375&&window.innerHeight<=667||n&&window.innerWidth>window.innerHeight&&window.innerHeight<=428||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"40px":n&&window.innerWidth>window.innerHeight||window.innerHeight<700?"50px":"80px"},children:[b==="guess"&&!j&&i.jsx("div",{style:{display:"flex",flexDirection:n&&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||s||g||a||p||x||l||H||W||u?"row":"column",gap:n&&window.innerWidth<=375&&window.innerHeight<=667||n&&window.innerWidth>window.innerHeight&&window.innerHeight<=428||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"3px":window.innerWidth===1366&&window.innerHeight===766||window.innerWidth===1366&&window.innerHeight===768||window.innerWidth===1280&&window.innerHeight===720||window.innerWidth===1440&&window.innerHeight===900||u||s||g||a||p||x||l||H||W?"8px":n&&window.innerWidth>window.innerHeight||window.innerHeight<700?"6px":"12px",alignItems:"center",justifyContent:"center",width:"100%",maxWidth:n&&window.innerWidth<=375&&window.innerHeight<=667||n&&window.innerWidth>window.innerHeight&&window.innerHeight<=428||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"270px":window.innerWidth===1366&&window.innerHeight===766||window.innerWidth===1366&&window.innerHeight===768||window.innerWidth===1280&&window.innerHeight===720||window.innerWidth===1440&&window.innerHeight===900||u||s||g||a||p||x||l||H||W||n&&window.innerWidth>window.innerHeight||window.innerHeight<700?"400px":"300px"},children:i.jsxs(i.Fragment,{children:[i.jsx("input",{type:"text",placeholder:"Type the missing word",value:R,onChange:e=>en(e.target.value),style:{...t.gmInput,width:n&&window.innerWidth<=375&&window.innerHeight<=667||n&&window.innerWidth>window.innerHeight&&window.innerHeight<=428||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"170px":window.innerWidth===1366&&window.innerHeight===766||window.innerWidth===1366&&window.innerHeight===768||window.innerWidth===1280&&window.innerHeight===720||window.innerWidth===1440&&window.innerHeight===900||u||s||g||a||p||x||l||H||W||n&&window.innerWidth>window.innerHeight||window.innerHeight<700?"250px":"auto",padding:n&&window.innerWidth<=375&&window.innerHeight<=667||n&&window.innerWidth>window.innerHeight&&window.innerHeight<=428||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"5px 6px":window.innerWidth===1366&&window.innerHeight===766||window.innerWidth===1366&&window.innerHeight===768||window.innerWidth===1280&&window.innerHeight===720||window.innerWidth===1440&&window.innerHeight===900||u||s||g||a||p||x||l||H||W||n&&window.innerWidth>window.innerHeight||window.innerHeight<700?"10px 12px":"12px 16px",fontSize:n&&window.innerWidth<=375&&window.innerHeight<=667||n&&window.innerWidth>window.innerHeight&&window.innerHeight<=428?"10px":window.innerWidth===896&&window.innerHeight===414?"11px":window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"10px":window.innerWidth===1366&&window.innerHeight===766||window.innerWidth===1366&&window.innerHeight===768||window.innerWidth===1280&&window.innerHeight===720||window.innerWidth===1440&&window.innerHeight===900||u||s||g||a||p||x||l||H||W||n&&window.innerWidth>window.innerHeight||window.innerHeight<700?"14px":"16px",flex:n&&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||s||g||a||p||x||l||H||W||u?"1":"none"}}),i.jsx("button",{style:{...t.gmButton,marginLeft:n&&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||s||g||a||p||x||l||H||W||u?"8px":"0",padding:n&&window.innerWidth<=375&&window.innerHeight<=667?"5px 8px":n&&window.innerWidth>window.innerHeight&&window.innerHeight<=428||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"6px 10px":window.innerWidth===1366&&window.innerHeight===766||window.innerWidth===1366&&window.innerHeight===768||window.innerWidth===1280&&window.innerHeight===720||window.innerWidth===1440&&window.innerHeight===900||u||s||g||a||p||x||l||H||W||n&&window.innerWidth>window.innerHeight||window.innerHeight<700?"10px 16px":"12px 24px",fontSize:n&&window.innerWidth<=375&&window.innerHeight<=667?"10px":n&&window.innerWidth>window.innerHeight&&window.innerHeight<=428||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"11px":window.innerWidth===1366&&window.innerHeight===766||window.innerWidth===1366&&window.innerHeight===768||window.innerWidth===1280&&window.innerHeight===720||window.innerWidth===1440&&window.innerHeight===900||u||s||g||a||p||x||l||H||W||n&&window.innerWidth>window.innerHeight||window.innerHeight<700?"14px":"16px",minWidth:n&&window.innerWidth<=375&&window.innerHeight<=667?"45px":n&&window.innerWidth>window.innerHeight&&window.innerHeight<=428||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"55px":window.innerWidth===1366&&window.innerHeight===766||window.innerWidth===1366&&window.innerHeight===768||window.innerWidth===1280&&window.innerHeight===720||window.innerWidth===1440&&window.innerHeight===900||u||s||g||a||p||x||l||H||W||n&&window.innerWidth>window.innerHeight||window.innerHeight<700?"80px":"100px",flexShrink:0},onClick:In,disabled:q,children:q?"...":"Check"})]})}),j&&i.jsx("button",{style:{...t.gmButton,padding:n&&window.innerWidth<=375&&window.innerHeight<=667?"5px 8px":n&&window.innerWidth>window.innerHeight&&window.innerHeight<=428||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"6px 10px":window.innerWidth===1366&&window.innerHeight===766||window.innerWidth===1366&&window.innerHeight===768||window.innerWidth===1280&&window.innerHeight===720||window.innerWidth===1440&&window.innerHeight===900||u||s||g||a||p||x||l||H||W||n&&window.innerWidth>window.innerHeight||window.innerHeight<700?"10px 16px":"12px 24px",fontSize:n&&window.innerWidth<=375&&window.innerHeight<=667?"10px":n&&window.innerWidth>window.innerHeight&&window.innerHeight<=428||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"11px":window.innerWidth===1366&&window.innerHeight===766||window.innerWidth===1366&&window.innerHeight===768||window.innerWidth===1280&&window.innerHeight===720||window.innerWidth===1440&&window.innerHeight===900||u||s||g||a||p||x||l||H||W||n&&window.innerWidth>window.innerHeight||window.innerHeight<700?"14px":"16px"},onClick:kn,children:"Next round"})]})]})]})})})})}exports.Game=On;exports.themes=_;
|
|
32
|
+
`;const u=document.getElementById("whats-missing-reset");u&&u.remove(),document.head.appendChild(r)},_n=(r,u)=>{const f=Array.from({length:r.length+1},()=>Array(u.length+1).fill(0));for(let h=0;h<=r.length;h++)f[h][0]=h;for(let h=0;h<=u.length;h++)f[0][h]=h;for(let h=1;h<=r.length;h++)for(let m=1;m<=u.length;m++)f[h][m]=r[h-1]===u[m-1]?f[h-1][m-1]:Math.min(f[h-1][m-1],f[h][m-1],f[h-1][m])+1;return f[r.length][u.length]};function $n({gameCubeSize:r,screenHeight:u,screenWidth:f}){const h=d.useRef(null);d.useEffect(()=>(Vn(),()=>{document.documentElement.style.overflow="",document.body.style.overflow="";const e=document.getElementById("whats-missing-reset");e&&e.remove()}),[]);const[m,K]=d.useState(null),[k,Z]=d.useState([]),[R,Wn]=d.useState(4),[P,J]=d.useState(!1),[L,Q]=d.useState(1),[S,mn]=d.useState(null),[b,M]=d.useState("ready"),[X,nn]=d.useState(3),[A,E]=d.useState(10),[D,en]=d.useState(20),[un,G]=d.useState(0),[B,F]=d.useState(!1),[C,tn]=d.useState(""),[j,Y]=d.useState(!1),[q,wn]=d.useState(!1),[dn,T]=d.useState(null),[fn,U]=d.useState([]),[yn,on]=d.useState([]),[n,bn]=d.useState(!1),[Kn,N]=d.useState(1),[rn,O]=d.useState(null),[y,Sn]=d.useState(!1),[s,jn]=d.useState(!1),[g,In]=d.useState(!1),[a,vn]=d.useState(!1),[p,kn]=d.useState(!1),[x,Pn]=d.useState(!1),[l,Tn]=d.useState(!1),[H,zn]=d.useState(!1),[c,Rn]=d.useState(!1),[V,Ln]=d.useState(!1);d.useEffect(()=>{const e=()=>{const t=f??window.innerWidth,o=u??window.innerHeight,W=t<768||t===926&&o===428||t===932&&o===430,I=o<700,v=t===768&&o===1024,z=t===1024&&o===768,an=t===820&&o===1180,pn=t===1180&&o===820,xn=t===540&&o===720,ln=t===720&&o===540,Hn=t===1024&&o===1366,cn=t===1366&&o===1024,En=t>=1200&&o>=600&&!W;Sn(En),jn(v),In(z),vn(an),kn(pn),Pn(xn),Tn(ln),zn(Hn),Rn(cn);const Dn=W&&t>o||o<700||t===1366&&o===766||t===1366&&o===768||t===1280&&o===720||t===1440&&o===900||v||z||an||pn||xn||ln||Hn||cn||y;if(Ln(Dn),bn(W),W)O(r&&r>=320?r:null),N(1);else if(I)O(r&&r>=400?r:null),N(1);else{const Gn=r?Math.max(400,Math.min(1200,r)):Math.min(1e3,Math.min(t,o)*.9);O(Gn),N(1)}};return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[f,u,r]);const hn=e=>[...e].sort(()=>Math.random()-.5).slice(0,6),sn=()=>{if(!m)return;const e=hn($[m]);Z(e),J(!0),F(!1),Q(1),G(0),U([]),on([]),gn(e,[],!0)},gn=(e=k,t=yn,o=!1)=>{const W=hn(e.length?e:$[m]);let I=Math.floor(Math.random()*W.length),v=W[I].name,z=0;for(;t.includes(v)&&z<20;)I=Math.floor(Math.random()*W.length),v=W[I].name,z++;Z(W),mn(I),on([...t,v]),Y(!1),tn(""),en(20),T(null),o?(M("ready"),nn(3),E(10)):(M("memorize"),E(10))};d.useEffect(()=>{if(!(!P||B||j)){if(b==="ready")if(X<=0)M("memorize");else{const e=setTimeout(()=>nn(t=>t-1),1e3);return()=>clearTimeout(e)}if(b==="memorize")if(A<=0)M("guess");else{const e=setTimeout(()=>E(t=>t-1),1e3);return()=>clearTimeout(e)}if(b==="guess"){if(D<=0){Y(!0),T("wrong");const t=k[S].name;U(o=>[...o,{round:L,answer:C,correct:t,result:"wrong"}]);return}const e=setTimeout(()=>en(t=>t-1),1e3);return()=>clearTimeout(e)}}},[b,X,A,D,P,B,j,k,S,L,C]);const Mn=()=>{if(S===null||q)return;const e=k[S].name,t=C.toLowerCase().trim();let o="wrong";t===e?(G(W=>W+1),T("correct"),o="correct"):_n(t,e)===1?(G(W=>W+.5),T("almost"),o="almost"):(T("wrong"),o="wrong"),U(W=>[...W,{round:L,answer:t,correct:e,result:o}]),wn(!0),setTimeout(()=>{wn(!1),Y(!0)},600)},Bn=()=>L<R?(Q(e=>e+1),gn()):F(!0),Cn=()=>{J(!1),F(!1),K(null)},An=d.useMemo(()=>n&&window.innerWidth>window.innerHeight||window.innerHeight<700?null:i.jsx("div",{style:{...w.gmLogoFixed,position:"absolute",top:16,left:16,zIndex:30},children:i.jsxs("picture",{children:[i.jsx("source",{srcSet:window.origin+"/cloud/speakid/games/whatsmissing/logo.svg",type:"image/svg+xml"}),i.jsx("img",{src:window.origin+"/cloud/speakid/games/whatsmissing/logo.png",alt:"SPEAKID Logo",style:w.gmLogoImg,loading:"lazy"})]})}),[n]);return i.jsx("div",{ref:h,style:{width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",transition:"background 0.3s ease",overflow:"hidden",position:"absolute",top:0,left:0,right:0,bottom:0},children:i.jsx("div",{style:{width:n?"100%":rn||r||1e3,height:n?"100%":rn||r||1e3,display:"flex",justifyContent:"center",alignItems:"center",overflow:"hidden",borderRadius:n?0:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",boxShadow:n?"none":"0 0 40px rgba(0,0,0,0.1)",margin:n?"0 auto":"unset",position:"relative"},children:i.jsx("div",{style:{transform:"none",width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:i.jsxs("div",{id:"whats-missing-root",children:[!n&&An,!m&&!P&&i.jsxs("div",{style:w.gmCenterScreen,children:[i.jsx("h1",{style:w.gmHeadline1,children:"WHAT'S MISSING?"}),i.jsx("p",{style:w.gmBodyM,children:"Select a theme:"}),i.jsx("div",{style:{display:"flex",gap:n&&window.innerWidth>window.innerHeight||n&&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"},children:["animals","food","toys"].map(e=>i.jsx("button",{style:{...w.gmButton,padding:n&&window.innerWidth>window.innerHeight||n&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"8px 12px":"12px 24px",fontSize:n&&window.innerWidth>window.innerHeight||n&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"12px":"16px",minWidth:n&&window.innerWidth>window.innerHeight||n&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"70px":"auto"},onClick:()=>K(e),children:e==="animals"?"🐶 Animals":e==="food"?"🍎 Food":"🧸 Toys"},e))}),i.jsxs("div",{style:{marginTop:24},children:[i.jsx("p",{style:w.gmBodyS,children:"Choose number of rounds:"}),i.jsx("div",{style:{display:"flex",gap:n&&window.innerWidth>window.innerHeight||n&&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},children:[3,4,5].map(e=>i.jsx("button",{style:{...w.gmButton,...R===e?w.gmButtonActive:{},padding:n&&window.innerWidth>window.innerHeight||n&&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",fontSize:n&&window.innerWidth>window.innerHeight||n&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"12px":"16px",minWidth:n&&window.innerWidth>window.innerHeight||n&&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"},onClick:()=>Wn(e),children:e},e))})]})]}),m&&!P&&i.jsxs("div",{style:w.gmCenterScreen,children:[i.jsxs("h1",{style:w.gmHeadline1,children:["Theme selected: ",m]}),i.jsxs("p",{style:w.gmBodyM,children:["Rounds: ",R]}),i.jsx("button",{style:{...w.gmButton,padding:n&&window.innerWidth>window.innerHeight||n&&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",fontSize:n&&window.innerWidth>window.innerHeight||n&&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",minWidth:n&&window.innerWidth>window.innerHeight||n&&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"},onClick:sn,children:"▶ Start game"})]}),B&&i.jsxs("div",{style:w.gmCenterScreen,children:[i.jsx("h1",{style:{...w.gmHeadline1,marginTop:n&&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||s||g||a||p||x||l||H||c?"0px":w.gmHeadline1.marginTop,marginBottom:n&&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||s||g||a||p||x||l||H||c?"2px":w.gmHeadline1.marginBottom},children:"Results"}),i.jsxs("h2",{style:{...w.gmHeadline3,marginTop:n&&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||s||g||a||p||x||l||H||c?"0px":w.gmHeadline3.marginTop,marginBottom:n&&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||s||g||a||p||x||l||H||c?"2px":w.gmHeadline3.marginBottom},children:["Your score: ",un," / ",R]}),i.jsx("p",{style:{...w.gmBodyM,color:"#10b981",marginTop:n&&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||s||g||a||p||x||l||H||c?"0px":"12px",marginBottom:n&&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||s||g||a||p||x||l||H||c?"2px":w.gmBodyM.marginBottom},children:"Yahoo! You did it! 🍬✨"}),i.jsxs("table",{style:{...w.gmTable,marginTop:n&&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||s||g||a||p||x||l||H||c?"0px":"20px",marginBottom:n&&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||s||g||a||p||x||l||H||c?"4px":"32px"},children:[i.jsx("thead",{children:i.jsxs("tr",{children:[i.jsx("th",{children:"Round"}),i.jsx("th",{children:"Your Answer"}),i.jsx("th",{children:"Correct"}),i.jsx("th",{children:"Result"})]})}),i.jsx("tbody",{children:fn.map((e,t)=>i.jsxs("tr",{children:[i.jsx("td",{style:w.gmTableCell,children:e.round}),i.jsx("td",{style:w.gmTableCell,children:e.answer||"—"}),i.jsx("td",{style:w.gmTableCell,children:e.correct}),i.jsx("td",{style:w.gmTableCell,children:e.result==="correct"?"✔ Correct":e.result==="almost"?"◐ Almost (0.5)":"✘ Wrong"})]},t))})]}),i.jsxs("div",{style:{display:"flex",gap:n&&window.innerWidth>window.innerHeight||n&&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:n&&window.innerWidth>window.innerHeight||n&&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||y?"12px":"24px"},children:[i.jsx("button",{style:{...w.gmButton,padding:n&&window.innerWidth>window.innerHeight||n&&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",fontSize:n&&window.innerWidth>window.innerHeight||n&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"12px":"16px",minWidth:n&&window.innerWidth>window.innerHeight||n&&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"},onClick:sn,children:"🔁 Play again"}),i.jsx("button",{style:{...w.gmButton,padding:n&&window.innerWidth>window.innerHeight||n&&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",fontSize:n&&window.innerWidth>window.innerHeight||n&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"12px":"16px",minWidth:n&&window.innerWidth>window.innerHeight||n&&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"},onClick:Cn,children:"⬅️ Choose theme"})]})]}),P&&!B&&i.jsxs("div",{style:w.gmGameLayout,children:[i.jsxs("div",{style:{minHeight:n&&window.innerWidth<=375&&window.innerHeight<=667||n&&window.innerWidth>window.innerHeight&&window.innerHeight<=428||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"45px":n&&window.innerWidth>window.innerHeight||window.innerHeight<700?"60px":"160px",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",paddingTop:n&&window.innerWidth<=375&&window.innerHeight<=667||n&&window.innerWidth>window.innerHeight&&window.innerHeight<=428||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"8px":n&&window.innerWidth>window.innerHeight||window.innerHeight<700?"15px":"40px"},children:[b==="ready"&&i.jsxs(i.Fragment,{children:[i.jsx("h1",{style:{...w.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),i.jsx("div",{style:w.gmHourglass,children:"⏳"})]}),b==="memorize"&&i.jsxs("p",{style:{...w.gmBodyM,color:"#10b981"},children:["MEMORIZE (",A,")"]}),b==="guess"&&!j&&i.jsxs("p",{style:w.gmBodyM,children:["⏳ Time left: ",D,"s"]})]}),b!=="ready"&&i.jsx("div",{style:{...w.gmGrid,gridTemplateColumns:n&&window.innerWidth>window.innerHeight||n&&window.innerWidth<=375&&window.innerHeight<=667?"repeat(3, 1fr)":n?"repeat(2, 1fr)":window.innerHeight<700?"repeat(3, 1fr)":"repeat(3, 210px)",gridAutoRows:n&&window.innerWidth>window.innerHeight?"120px":n&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"100px":n?"150px":window.innerHeight<700?"140px":typeof window<"u"&&window.devicePixelRatio>=1.25&&window.devicePixelRatio<=1.5?"240px":"210px",gap:n&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"12px":n||window.innerHeight<700?"8px":typeof window<"u"&&window.devicePixelRatio>=1.25&&window.devicePixelRatio<=1.5?"24px":"20px",justifyItems:"center",maxWidth:n&&window.innerWidth>window.innerHeight?"90%":n&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"95%":"100%",padding:n&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"8px":typeof window<"u"&&window.devicePixelRatio>=1.25&&window.devicePixelRatio<=1.5?"20px":"16px"},children:k.map((e,t)=>{const o=S===t&&b==="guess"&&!j;return i.jsx("div",{style:{width:"100%",height:"100%",borderRadius:n&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"6px":"12px",overflow:"hidden",boxShadow:n&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"0 1px 4px rgba(0,0,0,0.1)":"0 4px 12px rgba(0,0,0,0.15)",transition:"all 0.3s ease",cursor:"pointer",...dn==="correct"&&S===t?{boxShadow:n&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"0 0 15px #10b981":"0 0 20px #10b981",transform:"scale(1.03)"}:{},...dn==="wrong"&&S===t?{boxShadow:n&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"0 0 15px #ef4444":"0 0 20px #ef4444",transform:"scale(1.03)"}:{}},children:!o&&i.jsx("img",{src:e.src,alt:e.name,style:{width:"100%",height:"100%",objectFit:"cover"}})},t)})}),i.jsxs("div",{style:{marginTop:n&&window.innerWidth<=375&&window.innerHeight<=667||n&&window.innerWidth>window.innerHeight&&window.innerHeight<=428||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"1px":n&&window.innerWidth>window.innerHeight||window.innerHeight<700?"4px":"16px",height:n&&window.innerWidth<=375&&window.innerHeight<=667||n&&window.innerWidth>window.innerHeight&&window.innerHeight<=428||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"40px":n&&window.innerWidth>window.innerHeight||window.innerHeight<700?"50px":"80px"},children:[b==="guess"&&!j&&i.jsx("div",{style:{display:"flex",flexDirection:V?"row":"column",gap:n&&window.innerWidth<=375&&window.innerHeight<=667||n&&window.innerWidth>window.innerHeight&&window.innerHeight<=428||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"3px":window.innerWidth===1366&&window.innerHeight===766||window.innerWidth===1366&&window.innerHeight===768||window.innerWidth===1280&&window.innerHeight===720||window.innerWidth===1440&&window.innerHeight===900||y||s||g||a||p||x||l||H||c?"8px":n&&window.innerWidth>window.innerHeight||window.innerHeight<700?"6px":"12px",alignItems:"center",justifyContent:"center",width:"100%",maxWidth:n&&window.innerWidth<=375&&window.innerHeight<=667||n&&window.innerWidth>window.innerHeight&&window.innerHeight<=428||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"270px":window.innerWidth===1366&&window.innerHeight===766||window.innerWidth===1366&&window.innerHeight===768||window.innerWidth===1280&&window.innerHeight===720||window.innerWidth===1440&&window.innerHeight===900||y||s||g||a||p||x||l||H||c||n&&window.innerWidth>window.innerHeight||window.innerHeight<700?"400px":"300px"},children:i.jsxs(i.Fragment,{children:[i.jsx("input",{type:"text",placeholder:"Type the missing word",value:C,onChange:e=>tn(e.target.value),style:{...w.gmInput,width:n&&window.innerWidth<=375&&window.innerHeight<=667||n&&window.innerWidth>window.innerHeight&&window.innerHeight<=428||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"170px":window.innerWidth===1366&&window.innerHeight===766||window.innerWidth===1366&&window.innerHeight===768||window.innerWidth===1280&&window.innerHeight===720||window.innerWidth===1440&&window.innerHeight===900||y||s||g||a||p||x||l||H||c||n&&window.innerWidth>window.innerHeight||window.innerHeight<700?"250px":"auto",padding:n&&window.innerWidth<=375&&window.innerHeight<=667||n&&window.innerWidth>window.innerHeight&&window.innerHeight<=428||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"5px 6px":window.innerWidth===1366&&window.innerHeight===766||window.innerWidth===1366&&window.innerHeight===768||window.innerWidth===1280&&window.innerHeight===720||window.innerWidth===1440&&window.innerHeight===900||y||s||g||a||p||x||l||H||c||n&&window.innerWidth>window.innerHeight||window.innerHeight<700?"10px 12px":"12px 16px",fontSize:n&&window.innerWidth<=375&&window.innerHeight<=667||n&&window.innerWidth>window.innerHeight&&window.innerHeight<=428?"10px":window.innerWidth===896&&window.innerHeight===414?"11px":window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"10px":window.innerWidth===1366&&window.innerHeight===766||window.innerWidth===1366&&window.innerHeight===768||window.innerWidth===1280&&window.innerHeight===720||window.innerWidth===1440&&window.innerHeight===900||y||s||g||a||p||x||l||H||c||n&&window.innerWidth>window.innerHeight||window.innerHeight<700?"14px":"16px",flex:V?"1":"none"}}),i.jsx("button",{style:{...w.gmButton,marginLeft:V?"8px":"0",padding:n&&window.innerWidth<=375&&window.innerHeight<=667?"5px 8px":n&&window.innerWidth>window.innerHeight&&window.innerHeight<=428||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"6px 10px":window.innerWidth===1366&&window.innerHeight===766||window.innerWidth===1366&&window.innerHeight===768||window.innerWidth===1280&&window.innerHeight===720||window.innerWidth===1440&&window.innerHeight===900||y||s||g||a||p||x||l||H||c||n&&window.innerWidth>window.innerHeight||window.innerHeight<700?"10px 16px":"12px 24px",fontSize:n&&window.innerWidth<=375&&window.innerHeight<=667?"10px":n&&window.innerWidth>window.innerHeight&&window.innerHeight<=428||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"11px":window.innerWidth===1366&&window.innerHeight===766||window.innerWidth===1366&&window.innerHeight===768||window.innerWidth===1280&&window.innerHeight===720||window.innerWidth===1440&&window.innerHeight===900||y||s||g||a||p||x||l||H||c||n&&window.innerWidth>window.innerHeight||window.innerHeight<700?"14px":"16px",minWidth:n&&window.innerWidth<=375&&window.innerHeight<=667?"45px":n&&window.innerWidth>window.innerHeight&&window.innerHeight<=428||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"55px":window.innerWidth===1366&&window.innerHeight===766||window.innerWidth===1366&&window.innerHeight===768||window.innerWidth===1280&&window.innerHeight===720||window.innerWidth===1440&&window.innerHeight===900||y||s||g||a||p||x||l||H||c||n&&window.innerWidth>window.innerHeight||window.innerHeight<700?"80px":"100px",flexShrink:0},onClick:Mn,disabled:q,children:q?"...":"Check"})]})}),j&&i.jsx("button",{style:{...w.gmButton,padding:n&&window.innerWidth<=375&&window.innerHeight<=667?"5px 8px":n&&window.innerWidth>window.innerHeight&&window.innerHeight<=428||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"6px 10px":window.innerWidth===1366&&window.innerHeight===766||window.innerWidth===1366&&window.innerHeight===768||window.innerWidth===1280&&window.innerHeight===720||window.innerWidth===1440&&window.innerHeight===900||y||s||g||a||p||x||l||H||c||n&&window.innerWidth>window.innerHeight||window.innerHeight<700?"10px 16px":"12px 24px",fontSize:n&&window.innerWidth<=375&&window.innerHeight<=667?"10px":n&&window.innerWidth>window.innerHeight&&window.innerHeight<=428||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428?"11px":window.innerWidth===1366&&window.innerHeight===766||window.innerWidth===1366&&window.innerHeight===768||window.innerWidth===1280&&window.innerHeight===720||window.innerWidth===1440&&window.innerHeight===900||y||s||g||a||p||x||l||H||c||n&&window.innerWidth>window.innerHeight||window.innerHeight<700?"14px":"16px"},onClick:Bn,children:"Next round"})]})]})]})})})})}exports.Game=$n;exports.themes=$;
|