hansdezwartandClaude Opus 5
9834296722
A single game has no match to keep score of, so showing "Score: 0 - 0, out of 1" and a sheet to edit it was just clutter. Both are hidden while the match is one point and come back at three or more. `hidden` alone doesn't do it for the button: .btn sets display:grid, and an author rule beats the UA's [hidden] rule whatever the specificity — the same trap behind the original both-icons-showing bug — so .btn[hidden] has to say it explicitly. The markup carries hidden by default too, so the common one-point case can't flash the score before the script runs. The bar returns to its original spacing when the icon goes: the two .75 gaps either side of it merge back into the 1.5 it had before. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
136 lines
6.4 KiB
Markdown
136 lines
6.4 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/` 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 `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** 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.
|
||
- **Pause** freezes mid-turn and resumes exactly where it stopped, delay
|
||
included. Opening either sheet 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.
|
||
|
||
## 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.
|
||
|
||
At **1 point** there's no match to keep score of, so the score line and the
|
||
score-sheet icon both disappear and you get the plain single-game clock. Set
|
||
the match to 3 or more and they come back.
|
||
|
||
The score sheet is the middle icon in the bar. It reads **You** for whoever is
|
||
holding the phone — the bottom half — and **Them** for the far end, and each
|
||
panel shows its own score first, so both players read their own score on the
|
||
left: `Score: 1 - 3, out of 5`.
|
||
|
||
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. Tapping outside the sheet is the same
|
||
as changing nothing, so a stray tap can't restart a game.
|
||
- **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: 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
|
||
|
||
At the top of the sheet 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 | 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 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.
|