Fix icon toggles, add timing presets and a two-tap reset

The play/pause and sound icons never toggled: SVGElement doesn't inherit
from HTMLElement, so it has no .hidden property and `svg.hidden = true`
only set a JS expando. Both icons then rendered at once because
`.btn svg{display:block}` out-specifies the UA's `[hidden]{display:none}`.
Fixed on both sides — a showIcon() helper sets the attribute, and the CSS
now honours [hidden]. Starting the clock by tapping a panel didn't repaint
the button either, which the working toggle made visible.

Also:
- conventional gear for the settings icon, replacing the clock glyph
- opening settings pauses the clock, and leaves it paused on close
- reset needs two taps within 2s, with a ring that drains over the window
- 2m/12s and 3m/15s presets atop the settings sheet; the highlight is
  derived from cfg, so it clears and returns as the steppers move
- ask for persistent storage so settings aren't evicted, and fall back to
  the defaults rather than NaN if a stored value is ever corrupt

sw.js cache bumped to v2 so installed devices pick up the new index.html.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-11 11:18:02 +02:00
co-authored by Claude Opus 5
parent a1d46f5e32
commit 559b6cd335
3 changed files with 128 additions and 16 deletions
+14 -3
View File
@@ -34,14 +34,22 @@ except installation and the service worker.
- The waiting player's taps are ignored, so a stray hand won't stop the clock.
- The bar under the big time is the delay draining. When it empties you get a
soft tick and your reserve starts moving. That's the moment worth hearing.
- **Reset** returns to the starting position. **Pause** freezes mid-turn and
resumes exactly where it stopped, delay included.
- **Reset** returns to the starting position. It takes two taps: the first arms
the button — it turns your accent colour and a ring drains — and a second tap
within those two seconds does it. One stray thumb can't wipe a live game.
- **Pause** freezes mid-turn and resumes exactly where it stopped, delay
included. Opening settings pauses automatically, and leaves it paused so the
clock only restarts when both players are ready.
Backgammon clocks pause between games, and after a cocked die the delay is
normally restarted — use pause and reset for those.
## Settings
At the top of the sheet are two presets — **2m / 12s** and **3m / 15s**. Tapping
one jumps both timers there and lights it up. Change the time or delay by hand
and the highlight goes out; land back on a preset's numbers and it comes back on.
| Setting | Range | Default |
| --- | --- | --- |
| Time | 0:15 99:00 | 3:00 |
@@ -50,7 +58,10 @@ normally restarted — use pause and reset for those.
| Sound | on / off | on |
Brass is the colour in the chess.com app, if you want the exact original look.
Changing time or delay resets the clock. Settings are remembered on the device.
Changing time or delay resets the clock. Settings are kept in `localStorage`, so
they survive closing the tab, force-quitting the installed app and rebooting the
phone — the app also asks for persistent storage so they aren't evicted when the
device runs low on space. Only the settings are stored; a game in progress isn't.
## Sounds