diff --git a/frontend.css b/frontend.css index 81a3d8b..86a2905 100644 --- a/frontend.css +++ b/frontend.css @@ -493,6 +493,7 @@ body { color: var(--text-muted); font-size: 48px; opacity: 0.5; + padding: 64px 0; } /* ── Game Over ────────────────────────────────────────────────── */ @@ -504,6 +505,7 @@ body { align-items: center; justify-content: center; text-align: center; + padding: 64px 0; } .game-over__title { @@ -606,6 +608,33 @@ body { 40% { opacity: 1; } } +/* ── Next Round Toast ─────────────────────────────────────────── */ + +.next-round-toast { + position: fixed; + bottom: 32px; + left: 50%; + transform: translateX(-50%); + background: var(--surface-2); + border: 1px solid var(--border); + padding: 16px 32px; + border-radius: 32px; + font-family: 'JetBrains Mono', monospace; + font-size: 14px; + color: var(--text-dim); + display: flex; + align-items: center; + gap: 12px; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); + z-index: 100; + animation: slide-up 0.3s cubic-bezier(0.22, 1, 0.36, 1); +} + +@keyframes slide-up { + from { opacity: 0; transform: translate(-50%, 20px); } + to { opacity: 1; transform: translate(-50%, 0); } +} + /* ── Scrollbar ────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 8px; } diff --git a/frontend.tsx b/frontend.tsx index 37328ab..a02a3d1 100644 --- a/frontend.tsx +++ b/frontend.tsx @@ -396,19 +396,39 @@ function App() {
- {state.active && } + {(() => { + const isGeneratingNextPrompt = state.active && state.active.phase === "prompting" && !state.active.prompt; + const lastCompleted = state.completed[state.completed.length - 1]; - {!state.active && !state.done && state.completed.length > 0 && ( -
- Next round starting... -
- )} + if (isGeneratingNextPrompt && lastCompleted) { + return ( + <> + +
+ is cooking up the next prompt... +
+ + ); + } - {!state.active && !state.done && state.completed.length === 0 && ( -
- Game starting... -
- )} + if (state.active) { + return ; + } + + if (!state.active && !state.done && state.completed.length > 0) { + return ; + } + + if (!state.active && !state.done && state.completed.length === 0) { + return ( +
+ Game starting... +
+ ); + } + + return null; + })()} {state.done && }
diff --git a/game.ts b/game.ts index 96e134e..2353f50 100644 --- a/game.ts +++ b/game.ts @@ -390,7 +390,7 @@ export async function runGame( } rerender(); - await new Promise((r) => setTimeout(r, 2000)); + await new Promise((r) => setTimeout(r, 5000)); // Archive round saveRound(round);