hansdezwartandClaude Opus 5
0b96eb824b
The old confirmation ring was a scaling, fading border. It sat off-centre —
the ::before had no top/left, so it landed on its static position in the
grid rather than over the icon — and it read as a shrinking circle rather
than time running out.
It's now an SVG ring animated on stroke-dashoffset (0 to 113.1, the
circumference at r=18) and rotated -90deg to start at 12 o'clock, so it
unwinds like a progress ring in reverse over the same 2s as the timeout.
Explicitly centred on the button.
The stroke is currentColor against #reset.armed{color:var(--icon-hot)},
so it uses the pale flash every button already shows on :active instead of
the theme accent, and no longer changes with the colour setting.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
79 lines
3.5 KiB
Markdown
79 lines
3.5 KiB
Markdown
# Backgammon Clock
|
||
|
||
A two-player match clock with **simple delay you can actually see**. Reserve time
|
||
plus a fixed number of free seconds each turn that never carry over — the
|
||
Backgammon Galaxy control. Defaults to 3:00 + 15s.
|
||
|
||
Plain HTML, CSS and JavaScript. No frameworks, no fonts, no images, no network.
|
||
|
||
## Getting it onto your phone
|
||
|
||
Chrome will only offer a real install over HTTPS, so the file needs a host.
|
||
GitHub Pages is free and takes about two minutes:
|
||
|
||
1. Create a new public repository, e.g. `bgclock`.
|
||
2. Upload all six files to the root: `index.html`, `manifest.webmanifest`,
|
||
`sw.js`, `icon-192.png`, `icon-512.png`, `icon-maskable-512.png`.
|
||
3. **Settings → Pages → Source: Deploy from a branch → `main` / `(root)` → Save.**
|
||
4. Wait a minute, then open `https://<you>.github.io/bgclock/` in Chrome on Android.
|
||
5. Chrome menu (⋮) → **Add to Home screen** → **Install**.
|
||
|
||
Open it from the home-screen icon and it runs fullscreen with no browser
|
||
chrome, offline, with the screen kept awake while a game is on.
|
||
|
||
If you're using a different path than `/bgclock/`, edit the `"id"` field in
|
||
`manifest.webmanifest` to match, or just delete that line.
|
||
|
||
To try it before hosting, open `index.html` in any browser — everything works
|
||
except installation and the service worker.
|
||
|
||
## Using it
|
||
|
||
- **Tap your own half** to end your turn and start your opponent's clock.
|
||
At the start, whoever taps first sets the *other* player going.
|
||
- 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. It takes two taps: the first arms
|
||
the button — it lights up and a ring unwinds around it — 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 |
|
||
| Delay | 0 – 60 s | 15 s |
|
||
| Colour | Sage, Brass, Slate, Teal, Plum | Sage |
|
||
| 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 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
|
||
|
||
All three are generated with the Web Audio API, so there are no audio files to
|
||
download and nothing to attribute.
|
||
|
||
- **Turn change** — a soft rising fifth with an octave partial, marimba-like.
|
||
- **Delay expiry** — a single quiet 300 Hz tick, deliberately easy to miss unless
|
||
you're listening for it.
|
||
- **Time out** — a falling triad, loud and unambiguous.
|
||
|
||
## Licence
|
||
|
||
Do whatever you like with it.
|