@littlepartytime/dev-kit 1.20.6 → 1.20.8
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/webapp/index.html +5 -2
- package/dist/webapp/pages/Play.tsx +36 -16
- package/package.json +1 -1
package/dist/webapp/index.html
CHANGED
|
@@ -2,12 +2,15 @@
|
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
|
|
6
6
|
<title>LPT Dev Kit</title>
|
|
7
7
|
<style>
|
|
8
8
|
/* ── Dev-Kit UI base ── */
|
|
9
9
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
10
|
-
body { background: #0a0a0a; color: #e5e5e5; font-family: system-ui, -apple-system, sans-serif; }
|
|
10
|
+
html, body { background: #0a0a0a; color: #e5e5e5; font-family: system-ui, -apple-system, sans-serif; overflow: hidden; overscroll-behavior: none; }
|
|
11
|
+
@media (max-width: 767px) {
|
|
12
|
+
html, body { position: fixed; width: 100%; height: 100%; touch-action: none; }
|
|
13
|
+
}
|
|
11
14
|
|
|
12
15
|
/* ── Interactive states (can't be expressed as inline styles) ── */
|
|
13
16
|
.dk-nav-btn:hover { color: #fff; }
|
|
@@ -22,6 +22,14 @@ export default function Play() {
|
|
|
22
22
|
const [gameResult, setGameResult] = useState<any>(null);
|
|
23
23
|
const [activeGameId, setActiveGameId] = useState<string | null>(null);
|
|
24
24
|
|
|
25
|
+
// Mobile detection: phones get a fullscreen game-only UI
|
|
26
|
+
const [isMobile, setIsMobile] = useState(() => window.innerWidth < 768);
|
|
27
|
+
useEffect(() => {
|
|
28
|
+
const onResize = () => setIsMobile(window.innerWidth < 768);
|
|
29
|
+
window.addEventListener('resize', onResize);
|
|
30
|
+
return () => window.removeEventListener('resize', onResize);
|
|
31
|
+
}, []);
|
|
32
|
+
|
|
25
33
|
const isAutoMode = useMemo(() => new URLSearchParams(window.location.search).get('auto') === 'true', []);
|
|
26
34
|
const [myPlayerId, setMyPlayerId] = useState<string | null>(null);
|
|
27
35
|
// Ref survives React Fast Refresh (HMR) but not new tabs — perfect for reconnect identity
|
|
@@ -184,8 +192,8 @@ export default function Play() {
|
|
|
184
192
|
if (!joined && !isAutoMode) {
|
|
185
193
|
return (
|
|
186
194
|
<div>
|
|
187
|
-
{__DEV_KIT_MODE__ === 'play' && <GameSelector />}
|
|
188
|
-
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '60vh' }}>
|
|
195
|
+
{!isMobile && __DEV_KIT_MODE__ === 'play' && <GameSelector />}
|
|
196
|
+
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: isMobile ? '100vh' : '60vh' }}>
|
|
189
197
|
<div style={{ ...card, width: 320 }}>
|
|
190
198
|
<h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 16 }}>Join Game</h2>
|
|
191
199
|
<input
|
|
@@ -213,8 +221,8 @@ export default function Play() {
|
|
|
213
221
|
if (room.phase === 'lobby' || room.phase === 'ready') {
|
|
214
222
|
return (
|
|
215
223
|
<div>
|
|
216
|
-
{__DEV_KIT_MODE__ === 'play' && <GameSelector onGameActivated={handleGameActivated} />}
|
|
217
|
-
<div style={{ maxWidth: 448, margin: '32px auto 0' }}>
|
|
224
|
+
{!isMobile && __DEV_KIT_MODE__ === 'play' && <GameSelector onGameActivated={handleGameActivated} />}
|
|
225
|
+
<div style={{ maxWidth: 448, margin: isMobile ? '16px auto 0' : '32px auto 0' }}>
|
|
218
226
|
<div style={card}>
|
|
219
227
|
<h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 16 }}>Lobby</h2>
|
|
220
228
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 24 }}>
|
|
@@ -263,23 +271,35 @@ export default function Play() {
|
|
|
263
271
|
);
|
|
264
272
|
}
|
|
265
273
|
|
|
266
|
-
// Playing or ended
|
|
274
|
+
// Playing or ended — game content
|
|
275
|
+
const gameContent = gameOver ? (
|
|
276
|
+
<PlatformTakeover
|
|
277
|
+
result={gameResult}
|
|
278
|
+
players={room.players.map((p: any) => ({ id: p.id, nickname: p.nickname }))}
|
|
279
|
+
onReturn={handleReturn}
|
|
280
|
+
/>
|
|
281
|
+
) : GameRenderer && platform && gameState ? (
|
|
282
|
+
<GameRenderer platform={platform} state={gameState} />
|
|
283
|
+
) : (
|
|
284
|
+
<div style={{ padding: 16, color: '#71717a' }}>Loading game...</div>
|
|
285
|
+
);
|
|
286
|
+
|
|
287
|
+
// Mobile: fullscreen game, no PhoneFrame or dev controls
|
|
288
|
+
if (isMobile) {
|
|
289
|
+
return (
|
|
290
|
+
<div style={{ width: '100vw', height: '100dvh', overflow: 'hidden', touchAction: 'none', position: 'fixed', top: 0, left: 0 }}>
|
|
291
|
+
{gameContent}
|
|
292
|
+
</div>
|
|
293
|
+
);
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
// Desktop: PhoneFrame + dev controls
|
|
267
297
|
return (
|
|
268
298
|
<div>
|
|
269
299
|
{__DEV_KIT_MODE__ === 'play' && <GameSelector onGameActivated={handleGameActivated} />}
|
|
270
300
|
<div style={{ height: __DEV_KIT_MODE__ === 'play' ? 'calc(100vh - 140px)' : 'calc(100vh - 80px)', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 24 }}>
|
|
271
301
|
<PhoneFrame>
|
|
272
|
-
{
|
|
273
|
-
<PlatformTakeover
|
|
274
|
-
result={gameResult}
|
|
275
|
-
players={room.players.map((p: any) => ({ id: p.id, nickname: p.nickname }))}
|
|
276
|
-
onReturn={handleReturn}
|
|
277
|
-
/>
|
|
278
|
-
) : GameRenderer && platform && gameState ? (
|
|
279
|
-
<GameRenderer platform={platform} state={gameState} />
|
|
280
|
-
) : (
|
|
281
|
-
<div style={{ padding: 16, color: '#71717a' }}>Loading game...</div>
|
|
282
|
-
)}
|
|
302
|
+
{gameContent}
|
|
283
303
|
</PhoneFrame>
|
|
284
304
|
{isHost && (
|
|
285
305
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 10, width: 160 }}>
|