Commit graph

2 commits

Author SHA1 Message Date
450d46c55d Actually fix no-scroll: fixed-centered card scaled to fit + cache busting
My previous 'no scrolling' commit didn't actually work — two real bugs:

1. Stale assets: nginx cached css/js for a week (max-age=604800), so after
   a redeploy returning visitors kept the OLD stylesheet/script and never saw
   the fit logic. Switched assets to Cache-Control:no-cache (tiny files, 304s)
   and added ?v= query strings to bust the existing week-long cache.

2. Bad centering geometry: grid-centering pins an over-tall card to the top,
   and .winner-card re-declared position:relative, overriding the fix. Now the
   card is position:fixed at 50%/50% and fitActiveScreen() folds the fit scale
   into one transform: translate(-50%,-50%) scale(fit). Removed the winner-card
   position override and switched the screen fade to opacity-only (a transform
   on .screen would capture the fixed card and break centering).

Verified in real Chromium against the container — setup, game, AND winner all
show fits:true / scrolls:false at 1366x640 (short laptop), 375x667, and
360x640 (small phone). No scrolling on any screen at any size.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-05-31 19:00:32 -06:00
0fc1d32099 Make tic-tac-toe epic: per-player camps, 3 stages, containerized
Each player picks ANY avatar from a combined 16-emoji roster (8 sparkle +
8 shred); their color, move sound, and particle FX follow that avatar's CAMP,
so one nibling can rock unicorns/rainbows while the other brings skulls/metal.
A 3-way STAGE selector (Sparkle / Shred / Mixed) sets the global backdrop,
fonts, and winner vibe. Camps and stages are orthogonal, driven by CSS custom
properties (.camp-* and [data-stage]).

- Combined avatar grids for both players with a same-avatar guard
- Per-camp Web Audio SFX (sine chimes vs sawtooth power chords) + mute toggle
- Per-player glow on displays, scoreboard, and board pieces; winner screen
  adopts the winner's camp; screen shake on shred moves; themed celebration
- Persist names/avatars/stage/scores/mute via localStorage; reset-scores button
- Fix nested-scroll / clipped-top bug (center with margin:auto, not flex +
  max-height); no horizontal overflow 320px-desktop; SVG favicon
- Keyboard-navigable board, ARIA roles, live status, prefers-reduced-motion
- Containerize for OrbStack: Dockerfile (nginx:alpine), nginx.conf (gzip +
  cache/security headers), docker-compose.yml — one command on :8080

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-05-31 18:20:39 -06:00