From b2b956d41f39c9c95ab583335d068f4478ac806a Mon Sep 17 00:00:00 2001 From: azank Date: Sat, 31 Oct 2026 01:15:47 +0500 Subject: [PATCH] season: Halloween, in GitHub's Halloween graph colours On 31 October GitHub turns its contribution graph orange for the day. Now commit.city does too, by the visitor's own date, the way GitHub does. In a city (viewer/src/season.js): - GitHub's Halloween graph colours: orange beams, ports and pulses, a purple-black sky (#03001c) over a dusky horizon, and Halloween colours for the nine file types, which the legend shows. - The daily timeline in GitHub's four Halloween levels (#631c03, #bd561d, #fa7a18, #fddf68), each day's level its quartile among days with commits. Repo status dots take the same levels, hottest brightest. - A harvest moon above the city, bats circling the avatar and crossing the moon, and a ghost that rises where a file is deleted, when the replay reaches that deletion. - The agent lens is the "ghostwriter lens". Its colours are data, so they stay as they are, and so do every count and height. - A pumpkin button turns it off (until next year, in that browser) or back on. #theme=halloween shows it any day, #theme=plain hides it, and an embed stays plain unless it asks. On the site: a Halloween bar with "Turn it off", the accent in orange, "Your GitHub, as a haunted city.", bats over the hero, and the hero's player in the Halloween look. The site's cyan is now one variable (--accent-rgb), so the season changes it in one place; the plain look is unchanged. The viewer self-test gains three checks: the moon is in the opening view, the bats fly, and deleted files raise ghosts. --- README.md | 1 + commit_city/viewer.html | 394 +++++++++--------- viewer/src/main.js | 115 +++-- viewer/src/season.js | 177 ++++++++ viewer/src/selftest.js | 13 + viewer/src/template.html | 10 + web/lib/viewer-shell.ts | 6 +- web/public/404.html | 15 +- web/public/about.html | 20 +- web/public/events.html | 17 +- web/public/explore.html | 15 +- web/public/index.html | 31 +- web/public/readme.html | 15 +- web/public/s/site.css | 70 +++- web/public/s/site.js | 5 + .../{app.021aac7758.js => app.2baa385935.js} | 384 ++++++++--------- web/site/_head.html | 10 +- web/site/_nav.html | 1 + web/site/about.html | 5 +- web/site/events.html | 2 +- web/site/index.html | 16 +- 21 files changed, 843 insertions(+), 479 deletions(-) create mode 100644 viewer/src/season.js rename web/public/v/{app.021aac7758.js => app.2baa385935.js} (52%) diff --git a/README.md b/README.md index f228b2d..3a30036 100644 --- a/README.md +++ b/README.md @@ -206,6 +206,7 @@ The viewer is plain three.js in `viewer/src`: - `shaders.js` draws the crisp edges, the glow and the beams; - `main.js` runs the simulation, HUD, agent lens, recorder and controls; - `selftest.js` holds the interaction checks (open any city with `#selftest=1`); +- `season.js` is the Halloween look: on 31 October (the visitor's own date) GitHub's Halloween graph colours, a moon, bats, and a ghost for every file deleted. `#theme=halloween` shows it any day, `#theme=plain` turns it off; - `live.js` and `live-selftest.js` are commit.city/events (`/events#selftest=1`, or `#demo=1` for a synthetic feed). The site's pages are written in `web/site/` (shared head, nav and footer partials, one file per page) and generated into `web/public/` by `web/scripts/site.mjs`. CI fails if a generated file is out of date. diff --git a/commit_city/viewer.html b/commit_city/viewer.html index cb11803..1e19581 100644 --- a/commit_city/viewer.html +++ b/commit_city/viewer.html @@ -205,6 +205,15 @@ .repo-label[data-status="abandoned"] .ct, .repo-label[data-status="dormant"] .ct { color: var(--muted); } .repo-label.bump .ct { animation: bump 0.45s ease-out; } @keyframes bump { 30% { color: #fff; text-shadow: 0 0 10px var(--accent); } } +/* Halloween (season.js): GitHub's Halloween graph colours; activity status takes its levels, hottest brightest */ +body.spooky { --accent: #fa7a18; --hot: #fddf68; --active: #fa7a18; --cooling: #bd561d; --dormant: #631c03; background: #05020a; } +body.spooky .row.sel { background: rgba(250, 122, 24, 0.13); } +body.spooky .seg.on { background: rgba(250, 122, 24, 0.2); } +body.spooky #f-tops i { background: rgba(250, 122, 24, 0.5); } +body.spooky .row .bar span { background: #bd561d; } +body.spooky .tools button.on, body.spooky .toast.new, body.spooky .embed-link:hover { border-color: rgba(250, 122, 24, 0.42); } +body.spooky #btn-play, body.spooky .rec-actions .pri { color: #1a0a00; } +body.spooky .me-label { color: #fff1dc; text-shadow: 0 0 12px rgba(250, 122, 24, 0.9); } .me-label { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: #dff7ff; text-shadow: 0 0 12px rgba(95, 211, 243, 0.9); pointer-events: none; } .dir-label { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: #d7e6f7; background: rgba(6, 10, 18, 0.55); padding: 1px 6px; border-radius: 5px; border-left: 2px solid var(--accent); pointer-events: none; white-space: nowrap; } .sector-label { color: rgba(170, 195, 230, 0.55); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; pointer-events: none; white-space: nowrap; } @@ -298,6 +307,7 @@
+ @@ -314,13 +324,13 @@
assembling your repos…
- + Not found · commit.city @@ -25,7 +33,7 @@ - + - + +
Happy Halloween. GitHub's contribution graph is orange today, and so is every city here. Deleted files rise as ghosts, and the AI agents are the ghostwriters.