{t.spectating}
{:else} -+ {game.state.claimError} + +
+ {/if} {/if} {/if} @@ -390,4 +448,48 @@ background: var(--danger-soft); font-weight: 600; } + + /* Beside the input rather than down with resign: a dead-end claim is about + the syllable on screen right now, so it reads as part of answering it + rather than as a way out of the game. Secondary weight either way — it + is not the way to play a turn, just a shortcut past an empty one. */ + .claim-dead-end { + align-self: flex-start; + min-height: 32px; + padding: var(--space-1) var(--space-3); + border: 1px solid var(--border-strong); + border-radius: var(--radius-sm); + background: transparent; + color: var(--text); + font-size: var(--text-3); + transition: background-color 150ms ease-out; + } + + .claim-dead-end:hover:enabled { + background: var(--surface-alt); + } + + .claim-dead-end:disabled { + border-color: var(--border); + color: var(--text-muted); + } + + .claim-dead-end.arming { + border-color: var(--accent); + background: var(--accent-soft); + font-weight: 600; + } + + .claim-error { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-2); + margin: 0; + padding: 10px var(--space-3); + border-radius: var(--radius-sm); + background: var(--danger-soft); + color: var(--danger); + font-size: var(--text-5); + } diff --git a/web/src/lib/components/WordInput.svelte b/web/src/lib/components/WordInput.svelte index c38604b..7dd590b 100644 --- a/web/src/lib/components/WordInput.svelte +++ b/web/src/lib/components/WordInput.svelte @@ -1,10 +1,16 @@