hansdezwartandClaude Opus 5
247eb0cf04
Two real bugs, both worst on iOS: The frame was taller than the screen in Safari. .app declared `height:100dvh;height:100vh`, so the fallback won and 100vh on iOS is the large viewport — the control bar and part of the bottom panel sat behind the toolbar. The declarations are now in the right order. The wake lock never came back. iOS drops it whenever the app backgrounds, but `lock` was never cleared, so the `!lock` guard blocked every later re-request and the screen started sleeping mid-game. It now listens for `release` and clears the handle; against a stubbed API the old code stays at one request after a release-and-return, the new code makes a second. Smaller iOS fixes: claim a playback audio session so the ringer switch doesn't silence the clock (this pauses other audio — the README says how to drop it), resume the audio context when returning from the background, suppress the long-press callout, keep sheet scrolling from rubber-banding the app, back 88dvh with 88vh, and name the home-screen icon. Untested on real hardware — there's no WebKit engine here, so this is a code audit plus a Chromium regression run. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
98 lines
4.5 KiB
Markdown
98 lines
4.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/` 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** 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 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 |
|
||
| --- | --- | --- |
|
||
| 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 (Chrome honours that request; Safari ignores it). 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.
|