eric/waving-hands
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Players can choose their own name

Browse Source 
An inline editor in the standfirst; the name is remembered in the
browser, applied to the current duel, and used for every duel after.
The opponent is drawn from the list avoiding the player's name.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Eric WagonerandClaude Fable 5.1 committed 2026-09-22 15:48:47 -04:00
1 parent d40734590b
commit 3716f49bbb
2 files changed
+103 -7
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/routes/+page.svelte
+72 -4
View File
@@ -6,11 +6,24 @@
import SpellSheet from '$lib/components/SpellSheet.svelte';
import TurnSummary from '$lib/components/TurnSummary.svelte';
import WizardStatus from '$lib/components/WizardStatus.svelte';
import { duel, FOE, YOU, castKey, tokensText } from '$lib/game/duel.svelte';
import { duel, FOE, YOU, NAME_MAX, castKey, tokensText } from '$lib/game/duel.svelte';
import { GESTURE_SHORT, glyph } from '$lib/game/glyphs';
import { MAGIC_GESTURES } from '$lib/game/spells';
let confirmingNew = $state(false);
let renaming = $state(false);
let nameDraft = $state('');
function startRename() {
nameDraft = duel.you.name;
renaming = true;
}
function saveName(e: SubmitEvent) {
e.preventDefault();
duel.setName(nameDraft);
renaming = false;
}
function startNew() {
if (duel.inProgress && !confirmingNew) {
@@ -45,10 +58,21 @@
<header class="masthead">
<div>
<h1>Waving Hands</h1>
{#if duel.state.turn === 0 && !duel.timeStopped}
<p class="standfirst">You are <em>{duel.you.name}</em>, duelling <em>{duel.foe.name}</em>. Each turn, both wizards choose one gesture per hand and reveal them together. The right run of gestures on one hand is a spell.</p>
{#if renaming}
<form class="rename" onsubmit={saveName}>
<label>
<span>Your name</span>
<!-- svelte-ignore a11y_autofocus -->
<input type="text" bind:value={nameDraft} maxlength={NAME_MAX} autofocus autocomplete="nickname" placeholder="Leave empty for a drawn name" />
</label>
<button type="submit" class="reveal small">Save</button>
<button type="button" class="quiet" onclick={() => (renaming = false)}>Cancel</button>
</form>
{:else}
<p class="standfirst">You are <em>{duel.you.name}</em>, duelling <em>{duel.foe.name}</em>.</p>
<p class="standfirst">
You are <em>{duel.you.name}</em><button type="button" class="link" onclick={startRename}>change name</button>, duelling <em>{duel.foe.name}</em>.
{#if duel.state.turn === 0 && !duel.timeStopped}Each turn, both wizards choose one gesture per hand and reveal them together. The right run of gestures on one hand is a spell.{/if}
</p>
{/if}
</div>
<nav class="actions">
@@ -272,6 +296,50 @@
color: var(--bone);
}
.link {
background: none;
border: 0;
padding: 0;
margin-left: 0.5em;
font-size: 0.8rem;
color: var(--frost);
text-decoration: underline;
vertical-align: baseline;
}
.rename {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.75rem;
margin-top: 0.4rem;
}
.rename label {
display: inline-flex;
align-items: baseline;
gap: 0.5rem;
color: var(--bone-dim);
font-style: italic;
}
.rename input {
font: inherit;
font-style: normal;
color: var(--bone);
background: var(--slate-deep);
border: 1px solid var(--rule-strong);
border-radius: 4px;
padding: 0.3rem 0.6rem;
width: 14em;
max-width: 100%;
}
.rename input:focus-visible {
outline: 2px solid var(--frost);
outline-offset: 1px;
}
.actions {
display: flex;
gap: 0.5rem;