hansdezwartandClaude Opus 5
2c31c0f02b
They sat between Match and Time as three bare buttons, above the two settings they set. Now they follow Delay, after the numbers they are a shortcut for, with a "Preset time limits" heading and "Quickly pick a setting." — the same heading-and-description shape every other row in the sheet already has. The row stacks at every width rather than only under the .row--wide breakpoint: three buttons wide enough to read "3m / 15s" can't share a line with a label on any phone. The buttons themselves are untouched, and are still found by class rather than position, so the highlight logic came along unchanged — checked that opening the sheet lights the preset matching the current numbers, stepping the delay off it clears every highlight, and stepping back relights it. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
169 lines
8.1 KiB
Markdown
169 lines
8.1 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 + 12s.
|
||
|
||
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 from `public_html/` 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/` on your phone.
|
||
5. **Android, Chrome:** menu (⋮) → **Add to Home screen** → **Install**.
|
||
**iOS, Safari:** Share (□↑) → **Add to Home Screen** → **Add**. It has to be
|
||
Safari — Chrome and Firefox on iOS can't install a web app.
|
||
|
||
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.
|
||
|
||
On iOS a few things behave differently, none of them fatal:
|
||
|
||
- **Install from Safari, and play from the home-screen icon.** In a Safari tab
|
||
you lose a strip of the screen to the toolbar, and iOS clears the saved
|
||
settings of a site you haven't visited for a week. The installed app keeps
|
||
its own storage and doesn't get pruned that way.
|
||
- **There's no vibration** — iOS gives web pages no haptics at all, so the
|
||
turn-change buzz is silent there. The sounds still play.
|
||
- **The ringer switch doesn't mute the clock.** The page claims a playback
|
||
audio session so you can hear the delay tick with the phone silenced, which
|
||
in exchange pauses any music you had going. If you'd rather keep the music,
|
||
delete the `navigator.audioSession` line in `index.html`.
|
||
- **Screen wake needs iOS 16.4 or newer.** Below that the screen dims on its
|
||
usual schedule mid-game.
|
||
|
||
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 `public_html/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.
|
||
- A tap counts when you **lift** your finger, and only if it didn't move. A swipe
|
||
does nothing, so Android's swipe-up-from-the-bottom and the status-bar pull-down
|
||
work over either half without costing anyone their turn — and a hand dragged
|
||
across the panel won't change it either.
|
||
- Your clock runs until you lift. Holding a finger on the panel costs you the
|
||
time you can see counting off, and holding it past zero flags you, exactly as
|
||
if you hadn't touched it at all.
|
||
- 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** starts a whole new match: clocks back to full *and* the score back to
|
||
0–0. 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 match. It's absent on a fresh match, where there
|
||
is nothing yet to wipe.
|
||
- **Pause** freezes mid-turn and resumes exactly where it stopped, delay
|
||
included. Opening either sheet pauses automatically. The settings sheet leaves
|
||
it paused — everything in there resets the clocks anyway — while the score
|
||
sheet picks the turn back up when you close it, so glancing at the score
|
||
doesn't cost you a tap on play. It's absent before each game's first tap, with
|
||
no clock running to freeze.
|
||
|
||
Both buttons keep their space in the bar while they're away, so nothing shifts
|
||
under your thumb — the same as the gear.
|
||
- **Settings are only reachable before a match starts.** Every control in that
|
||
sheet resets both clocks, so the gear disappears the moment the first tap
|
||
starts the clock and comes back after a reset. Its space in the bar is kept
|
||
empty, so nothing else shifts. That means a mistake in the time or delay can
|
||
only be fixed by resetting and starting the match again — deliberately, since
|
||
the alternative is wiping two live clocks by accident. Correcting a clock
|
||
mid-match is what the score sheet is for.
|
||
|
||
Backgammon clocks pause between games, and after a cocked die the delay is
|
||
normally restarted — use pause and reset for those.
|
||
|
||
## Matches
|
||
|
||
Set **Match** in the settings to the number of points you're playing to — 1, 3,
|
||
5 and up to 29. The time you set is *per point*, so a 5-point match at 2:00 a
|
||
point puts 10:00 on each clock, and the settings sheet shows you that sum.
|
||
|
||
Each half reads the state from that player's own side of the board:
|
||
|
||
```
|
||
You: 1 out of 5
|
||
Them: 3
|
||
Moves: 7
|
||
```
|
||
|
||
So "You" always means whoever is sitting at that end — both players read their
|
||
own score on the top line, and the two halves show mirrored numbers.
|
||
|
||
At **1 point** there's no match to keep score of, so the score lines and the
|
||
score-sheet icon all disappear and you get the plain single-game clock with just
|
||
its move count. Set the match to 3 or more and they come back.
|
||
|
||
The score sheet is the middle icon in the bar. It's filled in from the phone
|
||
holder's side: **You** is the bottom half, **Them** the far end.
|
||
|
||
Nothing in that sheet takes effect until you press **Done**:
|
||
|
||
- **Done with nothing changed** leaves everything exactly as it was — same turn,
|
||
same delay part-spent, same move counts — and the clock picks up where it left
|
||
off. Tapping outside the sheet is the same as changing nothing, so a stray tap
|
||
can't restart a game. A pause you set yourself before opening the sheet
|
||
survives; only the sheet's own pause is undone.
|
||
- **Change a score** and the game restarts when you press Done: move counters
|
||
back to zero and the turn back to the first tap, waiting on whoever rolls the
|
||
lower die. The clocks keep whatever they were showing.
|
||
- **Change only a clock** — the sheet also lets you correct either player's time
|
||
to the second — and the game carries on undisturbed and running: same turn,
|
||
same delay position, same moves.
|
||
|
||
Shortening the match to fewer points than someone has already won pulls their
|
||
score down to fit.
|
||
|
||
## Settings
|
||
|
||
Under **Delay** are three presets — **2m / 12s**, **3m / 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 |
|
||
| --- | --- | --- |
|
||
| Match | 1 – 29 points, odd | 1 |
|
||
| Time | 0:15 – 99:00 per point | 3:00 |
|
||
| Delay | 0 – 60 s | 12 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 match, time or delay resets the clocks — the score is left alone, so you
|
||
can fix the delay mid-match without losing where you are.
|
||
|
||
Settings **and the match in progress** 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 (Chrome honours that request; Safari ignores it).
|
||
Reopening restores the score, both clocks, the move counts, whose turn it is and
|
||
how much delay was left. The one thing it can't restore is time passing while
|
||
the app was closed, so it comes back paused rather than charging anyone for the
|
||
gap: a crash shouldn't decide a game.
|
||
|
||
## 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.
|