sky: CSS out of the JavaScript and into sky/css/ (+ smoke test, hook fixes) #5

Merged

V merged 38 commits from skizy/css-tidy into main 2026-09-27 07:57:26 -07:00

Conversation 0 Commits 38 Files changed 91 +11629 -2372

skizy commented 2026-09-27 07:38:47 -07:00

Member

Copy link

The despaghettification, part 1: CSS lives in CSS files now, not in JavaScript strings.

What changed

• 48 of the 49 Sky.css('…' + '…') blocks (about 200,000 characters of CSS written as JavaScript strings, across 40 files) are now real stylesheets, sky/css/<name>.css, one per piece, named after its script. They're formatted like sky/sky.css, and Victor's comments are kept as CSS comments.
• Each is linked in the <head> of every page that loads its script: right before </head>, after the page's own <style>, in script order. That's the same place and order the scripts used to add them, so the cascade is unchanged, and render-blocking links mean no flash of unstyled content.
• Styles that took a value from the script (the eye's size and pupil, the revolver's reload time, where characters stand in the porch/kitchen/attic, the studio paper, the Claube-flick and blood cursors) now use CSS variables that the script sets at the same moment it used to add the styles.
• The one left: the bathroom's font loader keeps Sky.css. It genuinely needs the address of Victor's font file, which only exists once he adds one.
• Mel's room: its hotbar (room/davinv.js) links inventory.css and loot.css, since those scripts don't add their styles any more.
• CLAUDE.md: a "Where the styles go" section (so no Claude goes back to writing CSS in strings), the smoke test under Testing, and the ?v= rule covering sky/css/. ?v= bumped to 20260927b.

Two tooling fixes found on the way (both harmless on Windows)

• tools/hooks/pre-commit wasn't executable, so on Linux/Mac git skipped it silently, and commits made there never refreshed the lists or the catalogue. Fixed (mode +x).
• tools/update-lists.sh now catalogues sky/css/*.css, so visitors' browsers refetch changed stylesheets. It also sorts in byte order (LC_ALL=C, capitals first, the way Git Bash already did), so a commit from Linux doesn't reshuffle every list.

How it was checked

• tools/smoke.py (from #4, included here, so #4 can be closed): every page and room, all 8 resets, loads with no script errors or missing files.
• --still pictures: the clock, chance, every animation and the outside world held still. Two runs of the same code are pixel-identical. Before vs after this change, all 8 resets × 13 pages match, apart from known timing jitter (the self-typing text on the sea, the clock needle, rooftop window twinkles).
• Computed styles, old vs new, for everything a picture can't show (both custom cursors, the reload fade, the characters' positions, the paper colour, the eye): identical.
• Each piece is its own commit, so any one can be looked at or reverted alone. While the move is only partly done, two pieces' order can differ (the rooftop's cat and pigeons vanish halfway through); the finished set restores the original order exactly.

🤖 Generated with Claude Code

The despaghettification, part 1: **CSS lives in CSS files now**, not in JavaScript strings. ## What changed - **48 of the 49 `Sky.css('…' + '…')` blocks** (about 200,000 characters of CSS written as JavaScript strings, across 40 files) are now real stylesheets, **`sky/css/<name>.css`**, one per piece, named after its script. They're formatted like `sky/sky.css`, and Victor's comments are kept as CSS comments. - Each is **linked in the `<head>`** of every page that loads its script: right before `</head>`, after the page's own `<style>`, in script order. That's the same place and order the scripts used to add them, so the cascade is unchanged, and render-blocking links mean no flash of unstyled content. - **Styles that took a value from the script** (the eye's size and pupil, the revolver's reload time, where characters stand in the porch/kitchen/attic, the studio paper, the Claube-flick and blood cursors) now use CSS variables that the script sets at the same moment it used to add the styles. - The one left: the **bathroom's font loader** keeps `Sky.css`. It genuinely needs the address of Victor's font file, which only exists once he adds one. - **Mel's room**: its hotbar (`room/davinv.js`) links `inventory.css` and `loot.css`, since those scripts don't add their styles any more. - **`CLAUDE.md`**: a "Where the styles go" section (so no Claude goes back to writing CSS in strings), the smoke test under Testing, and the `?v=` rule covering `sky/css/`. `?v=` bumped to `20260927b`. ## Two tooling fixes found on the way (both harmless on Windows) - **`tools/hooks/pre-commit` wasn't executable**, so on Linux/Mac git skipped it silently, and commits made there never refreshed the lists or the catalogue. Fixed (mode +x). - **`tools/update-lists.sh`** now catalogues `sky/css/*.css`, so visitors' browsers refetch changed stylesheets. It also sorts in byte order (`LC_ALL=C`, capitals first, the way Git Bash already did), so a commit from Linux doesn't reshuffle every list. ## How it was checked - **`tools/smoke.py`** (from #4, included here, so **#4 can be closed**): every page and room, all 8 resets, loads with no script errors or missing files. - **`--still` pictures**: the clock, chance, every animation and the outside world held still. Two runs of the same code are pixel-identical. Before vs after this change, **all 8 resets × 13 pages match**, apart from known timing jitter (the self-typing text on the sea, the clock needle, rooftop window twinkles). - **Computed styles**, old vs new, for everything a picture can't show (both custom cursors, the reload fade, the characters' positions, the paper colour, the eye): **identical**. - Each piece is its own commit, so any one can be looked at or reverted alone. While the move is only partly done, two pieces' order can differ (the rooftop's cat and pigeons vanish halfway through); the finished set restores the original order exactly. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

skizy added 38 commits 2026-09-27 07:38:48 -07:00

tools: smoke test, every page in a hidden browser ... a71e753b91

tools/smoke.py opens every page and room (the sea, the workshop, the
rooftop, the living space and its side rooms, the template, Mel's room
and her window) in a hidden browser, in any resets you ask for, and
reports script errors and the site's own files that fail to load.
Optionally saves a picture of every page. Needs Playwright.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

tools: smoke test --still, for comparing pictures before and after a tidy-up ... f0699ac54b

Holds the clock, chance, every animation (CSS, animation frames and SVG)
and the outside world (fonts, the weather, Mel's live site) still, so
two runs of the same code take identical pictures of every page.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

sky: studio's look moves out of studio.js into sky/css/studio.css ... 0c97fb4e2f

The same rules, as CSS instead of JavaScript strings, linked from each
page's head. Checked with tools/smoke.py --still.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

sky: bathroom's look moves out of bathroom.js into sky/css/bathroom.css ... 992198c737

The same rules, as CSS instead of JavaScript strings, linked from each
page's head. Checked with tools/smoke.py --still.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

sky: ground-view's look moves out of ground-view.js into sky/css/ground-view.css ... 42d9819568

The same rules, as CSS instead of JavaScript strings, linked from each
page's head. Checked with tools/smoke.py --still.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

sky: music's look moves out of music.js into sky/css/music.css ... 9f8cd9cc81

The same rules, as CSS instead of JavaScript strings, linked from each
page's head. Checked with tools/smoke.py --still.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

sky: letters's look moves out of letters.js into sky/css/letters.css ... d9ae559ed5

The same rules, as CSS instead of JavaScript strings, linked from each
page's head. Checked with tools/smoke.py --still.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

sky: lives's look moves out of lives.js into sky/css/lives.css ... a745fc8d08

The same rules, as CSS instead of JavaScript strings, linked from each
page's head. Checked with tools/smoke.py --still.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

sky: ground-countryside's look moves out of ground-countryside.js into sky/css/ground-countryside.css ... a82e034f3a

The same rules, as CSS instead of JavaScript strings, linked from each
page's head. Checked with tools/smoke.py --still.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

sky: gore's look moves out of gore.js into sky/css/gore.css ... 9ce1bf464a

The same rules, as CSS instead of JavaScript strings, linked from each
page's head. Checked with tools/smoke.py --still.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

sky: forget's look moves out of forget.js into sky/css/forget.css ... 220bf422d7

The same rules, as CSS instead of JavaScript strings, linked from each
page's head. Checked with tools/smoke.py --still.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

sky: marker's look moves out of marker.js into sky/css/marker.css ... 227c5f239d

The same rules, as CSS instead of JavaScript strings, linked from each
page's head. Checked with tools/smoke.py --still.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

sky: loot's look moves out of loot.js into sky/css/loot.css ... bf735842d7

The same rules, as CSS instead of JavaScript strings, linked from each
page's head. Checked with tools/smoke.py --still.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

sky: noise's look moves out of noise.js into sky/css/noise.css ... a7c0375abe

The same rules, as CSS instead of JavaScript strings, linked from each
page's head. Checked with tools/smoke.py --still.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

sky: weather's look moves out of weather.js into sky/css/weather.css ... 3d411ea2ed

The same rules, as CSS instead of JavaScript strings, linked from each
page's head. Checked with tools/smoke.py --still.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

sky: models's look moves out of models.js into sky/css/models.css ... 4fb5899738

The same rules, as CSS instead of JavaScript strings, linked from each
page's head. Checked with tools/smoke.py --still.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

sky: textures's look moves out of textures.js into sky/css/textures.css ... 5361cbd98e

The same rules, as CSS instead of JavaScript strings, linked from each
page's head. Checked with tools/smoke.py --still.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

sky: resets's look moves out of resets.js into sky/css/resets.css ... 59a3d9baad

The same rules, as CSS instead of JavaScript strings, linked from each
page's head. Checked with tools/smoke.py --still.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

sky: timer's look moves out of timer.js into sky/css/timer.css ... 5ab9035da8

The same rules, as CSS instead of JavaScript strings, linked from each
page's head. Checked with tools/smoke.py --still.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

sky: tub's look moves out of tub.js into sky/css/tub.css ... 69840eebb9

The same rules, as CSS instead of JavaScript strings, linked from each
page's head. Checked with tools/smoke.py --still.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

sky: notes's look moves out of notes.js into sky/css/notes.css ... 3b2191b80f

The same rules, as CSS instead of JavaScript strings, linked from each
page's head. Checked with tools/smoke.py --still.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

sky: books's look moves out of books.js into sky/css/books.css ... 79b0ec1edb

The same rules, as CSS instead of JavaScript strings, linked from each
page's head. Checked with tools/smoke.py --still.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

sky: ground-city's look moves out of ground-city.js into sky/css/ground-city.css ... 8b5562a27b

The same rules, as CSS instead of JavaScript strings, linked from each
page's head. Checked with tools/smoke.py --still.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

sky: gallery's look moves out of gallery.js into sky/css/gallery.css ... 3042f00adf

The same rules, as CSS instead of JavaScript strings, linked from each
page's head. Checked with tools/smoke.py --still.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

sky: inventory's look moves out of inventory.js into sky/css/inventory.css ... a5ef0d57a3

The same rules, as CSS instead of JavaScript strings, linked from each
page's head. Checked with tools/smoke.py --still.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

sky: panel's look moves out of panel.js into sky/css/panel.css ... 8dde7d1564

The same rules, as CSS instead of JavaScript strings, linked from each
page's head. Checked with tools/smoke.py --still.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

sky: paint's look moves out of paint.js into sky/css/paint.css ... c11569bbe9

The same rules, as CSS instead of JavaScript strings, linked from each
page's head. Checked with tools/smoke.py --still.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

sky: hell's look moves out of hell.js into sky/css/hell.css ... 62df255f16

The same rules, as CSS instead of JavaScript strings, linked from each
page's head. Checked with tools/smoke.py --still.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

sky: frames's look moves out of frames.js into sky/css/frames.css ... ee7db4d5dc

The same rules, as CSS instead of JavaScript strings, linked from each
page's head. Checked with tools/smoke.py --still.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

sky: post's look moves out of post.js into sky/css/post.css ... f8a75a562b

The same rules, as CSS instead of JavaScript strings, linked from each
page's head. Checked with tools/smoke.py --still.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

sky: dungeon's look moves out of dungeon.js into sky/css/dungeon.css ... 3d23d4c249

The same rules, as CSS instead of JavaScript strings, linked from each
page's head. Checked with tools/smoke.py --still.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

sky: ground-sea's look moves out of ground-sea.js into sky/css/ground-sea.css ... 857c41e6f6

The same rules, as CSS instead of JavaScript strings, linked from each
page's head. Checked with tools/smoke.py --still.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

sky: peeper's look moves out of peeper.js into sky/css/peeper.css ... 7783f961ba

The same rules, as CSS instead of JavaScript strings, linked from each
page's head. Checked with tools/smoke.py --still.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

sky: records's look moves out of records.js into sky/css/records.css ... d1d488dc40

The same rules, as CSS instead of JavaScript strings, linked from each
page's head. Checked with tools/smoke.py --still.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

sky: crate's look moves out of crate.js into sky/css/crate.css ... 6e3164a227

The same rules, as CSS instead of JavaScript strings, linked from each
page's head. Checked with tools/smoke.py --still.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

tools: the pre-commit hook runs on Linux too; the catalogue includes sky/css/ ... a8cd0ddc9c

tools/hooks/pre-commit wasn't marked executable, so on Linux and Mac git
skipped it without a word (Windows doesn't look at that): the lists and
the catalogue were never refreshed by commits made there. And
update-lists.sh now catalogues sky/css/*.css, the new home of each
piece's styles, so visitors' browsers refetch them when they change.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

sky: the seven mixed blocks move into sky/css/ too; the room's hotbar links its CSS ... 068c4dd293

eye, revolver, porch, kitchen, studio, attic and claubes: the values they
took from their scripts (the eye's size and pupil, the reload time, where
a character stands, the paper colour, the custom cursors) are CSS
variables the scripts set, at the moment the styles used to be added.
Mel's room loads the hotbar itself (room/davinv.js), so it links
inventory.css and loot.css. Only the bathroom's font loader keeps
Sky.css: it needs the address of Victor's font file.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

CLAUDE.md: where the styles go now, and the smoke test; ?v= bumped for the new CSS files ... bd0990abbb

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

skizy referenced this pull request 2026-09-27 07:46:52 -07:00

room: conversations in the dialogue box, Mira/Claube/skizy trees, opi's terminal, a packed bag, more music #6

V merged commit 00044327e0 into main 2026-09-27 07:57:26 -07:00

V referenced this pull request from a commit 2026-09-27 07:57:27 -07:00

Merge pull request 'sky: CSS out of the JavaScript and into sky/css/ (+ smoke test, hook fixes)' (#5) from skizy/css-tidy into main

V referenced this pull request from a commit 2026-10-10 18:15:47 -07:00

Merge pull request #5 from Da-Vnky/claude/vibrant-euler-cubgl5

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

subdomains/DaV-nky!5

No description provided.