commit a1d46f5e32d6c4dc979f6562b3560a191890918e Author: Hans de Zwart Date: Tue Aug 11 10:52:35 2026 +0200 First commit diff --git a/public_html/README.md b/public_html/README.md new file mode 100644 index 0000000..1c075e6 --- /dev/null +++ b/public_html/README.md @@ -0,0 +1,67 @@ +# 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://.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. **Pause** freezes mid-turn and + resumes exactly where it stopped, delay included. + +Backgammon clocks pause between games, and after a cocked die the delay is +normally restarted — use pause and reset for those. + +## Settings + +| 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 remembered on the device. + +## 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. diff --git a/public_html/icon-192.png b/public_html/icon-192.png new file mode 100644 index 0000000..6b0478a Binary files /dev/null and b/public_html/icon-192.png differ diff --git a/public_html/icon-512.png b/public_html/icon-512.png new file mode 100644 index 0000000..50974f2 Binary files /dev/null and b/public_html/icon-512.png differ diff --git a/public_html/icon-maskable-512.png b/public_html/icon-maskable-512.png new file mode 100644 index 0000000..9ce1939 Binary files /dev/null and b/public_html/icon-maskable-512.png differ diff --git a/public_html/index.html b/public_html/index.html new file mode 100644 index 0000000..bd20375 --- /dev/null +++ b/public_html/index.html @@ -0,0 +1,683 @@ + + + + + +Backgammon Clock + + + + + + + + + + + +
+
+
+
Moves: 0
+
+
3:00
+
+ + 15 +
+
+
+
+ +
+ + + + + +
+ +
+
+
Moves: 0
+
+
3:00
+
+ + 15 +
+
+
+
+
+ +
+ + + + + + diff --git a/public_html/manifest.webmanifest b/public_html/manifest.webmanifest new file mode 100644 index 0000000..7402d4a --- /dev/null +++ b/public_html/manifest.webmanifest @@ -0,0 +1,19 @@ +{ + "name": "Backgammon Clock", + "short_name": "BG Clock", + "description": "Two-player match clock with a visible simple delay.", + "start_url": "./index.html", + "scope": "./", + "id": "/bgclock/", + "display": "fullscreen", + "display_override": ["fullscreen", "standalone"], + "orientation": "portrait", + "background_color": "#332E2B", + "theme_color": "#332E2B", + "categories": ["games", "utilities"], + "icons": [ + { "src": "icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" }, + { "src": "icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" }, + { "src": "icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" } + ] +} diff --git a/public_html/sw.js b/public_html/sw.js new file mode 100644 index 0000000..d427f59 --- /dev/null +++ b/public_html/sw.js @@ -0,0 +1,33 @@ +/* Cache-first: once installed the clock never touches the network again. */ +const CACHE = "bgclock-v1"; +const FILES = [ + "./", + "./index.html", + "./manifest.webmanifest", + "./icon-192.png", + "./icon-512.png", + "./icon-maskable-512.png" +]; + +self.addEventListener("install", (e) => { + e.waitUntil(caches.open(CACHE).then((c) => c.addAll(FILES)).then(() => self.skipWaiting())); +}); + +self.addEventListener("activate", (e) => { + e.waitUntil( + caches.keys() + .then((keys) => Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k)))) + .then(() => self.clients.claim()) + ); +}); + +self.addEventListener("fetch", (e) => { + if (e.request.method !== "GET") return; + e.respondWith( + caches.match(e.request).then((hit) => hit || fetch(e.request).then((res) => { + const copy = res.clone(); + caches.open(CACHE).then((c) => c.put(e.request, copy)).catch(() => {}); + return res; + }).catch(() => caches.match("./index.html"))) + ); +});