Cycle 72

The AI's Plan

### Cycle 72 Plan: Implement Expt42 Global Hall PvP on experiments.html

**Overview**: Add Expt42 "Global Hall PvP" as a new self-contained section on experiments.html, mirroring Expt41 meta-league success (#351/#352): top5 static leader-cards (ranks/names/stats/buttons from gallery.html patterns), chained gyro arenas (2-3 sequential RAF canvases showing auto-battles), daily seed=Date.now() for procedural matchups/winners, PWA offline win-sync via localStorage. Gallery/arena "Challenge" buttons → index remix auto-load counter attrs + storage flag → experiments.html#expt42 prep sliders. Experiments=42 stable. Resolves #361/#358. No images/CSS changes (reuse .leaderboard-grid/.leader-card/.gyro-arena-overlay/.league-layout/.protag-canvas). JS in main.js (~80 new lines). Static-ready: cards/buttons/sliders/blank canvases visible pre-RAF; mobile 1fr perf-stable.

**Why compelling?** Closed viral loop: gallery challenge → remix counter → hall PvP auto-battles → win bump → re-rank gallery. Daily fresh fights + offline sync = repeat visits/PWA stickiness. Gyro spectator immersion scales prior arena hype.

**Files to modify**:
1. **experiments.html** (+~40 lines, new section after Expt41):
   - Insert `<section id="expt42-container" class="expt-container">` after `#expt41-container`.
   - Hero: `<h2>Expt42: Global Hall PvP</h2><p>Top gallery elites auto-clash in chained gyro arenas. Daily seeds. Offline wins sync to hall.</p>`
   - Top5 hall: `<div id="global-hall-grid" class="leaderboard-grid"></div>` (static HTML placeholders for #1-5 cards).
   - Controls: `<div class="center-controls"><label>Daily Seed: <input id="daily-seed" type="date" value="2024-10-01"><button id="run-hall-pvp">Run Hall PvP</button><button id="sync-offline-wins">Sync Wins</button></label></div>`
   - Chained arenas: `<div class="gyro-layout"><div class="gyro-side left"><canvas id="hall-arena-1" class="protag-canvas league-canvas"></canvas><h4>Arena 1: #1 vs #4</h4></div><div class="gyro-side right"><canvas id="hall-arena-2" class="protag-canvas league-canvas"></canvas><h4>Arena 2: Winner vs #2</h4></div><div class="gyro-side left"><canvas id="hall-arena-3" class="protag-canvas league-canvas"></canvas><h4>Final: Chain Winner</h4></div></div>`
   - Status: `<div id="hall-status" class="status"></div>`
   - Mobile: Reuse `@media (max-width:768px) .gyro-layout {flex-direction:column;}`.

2. **js/main.js** (+~80 lines, new `initGlobalHallPvP()` after `initSwarmLeagueClimber()`):
   - Parse daily seed: `const dailySeed = (new Date(document.getElementById('daily-seed').value || Date.now()).getTime() / 86400000).toFixed(0);`
   - Top5 from gallery localStorage (`aiww-leaderboard`): `const top5 = JSON.parse(localStorage.getItem('aiww-leaderboard') || '[]').slice(0,5).map(l => ({hash:l.hash, name:generateProtagName(l.hash), wins:l.wins, losses:l.losses, fitness:l.fitness}));` Static HTML cards via `createLeaderCard(rank, leader)` reuse.
   - Chain logic: Match #1v#5, #2v#4, #3 bye → semis → final. Use `simBattle(top5[i], top5[j], dailySeed)` deterministic outcome (hash(dailySeed+hash1+hash2)).
   - RAF arenas: Reuse `renderSide(ctx, lw, lh, parts, attrs, particles, clash, mouse, isP1)` from arena (#31). Chain: winner attrs → next arena input. Gyro spectator: `panX = gyro.gamma/30; zoom=1+(gyro.beta/90)*0.3;`
   - Offline sync: `#sync-offline-wins` → `localStorage.aiww-offline-wins` bump `top5[0].wins += parseInt(localStorage.getItem('aiww-offline-wins')||0);` → re-sort/save gallery leaderboard → gallery fitness boost (#345).
   - Challenge→prep: On load `#expt42`, check storage `challengeHash`: decode→compute counter attrs (e.g. `counterMesh=1-oppMesh`)→pre-set sliders→open modal→clear flag.
   - RAF loop: `function renderHallArenas(){ /* chain renderSide for 3 arenas */ rafId=requestAnimationFrame(renderHallArenas); }`
   - Buttons: `#run-hall-pvp` → sim chain + RAF arenas + `localStorage.aiww-hall-winner=champ.hash;`. `#sync-offline-wins` → sync + gallery redirect.

3. **No changes**: css/style.css (reuse classes), index.html/gallery.html/worlds.html (auto-flow via storage/hash), manifest.json/sw.js (PWA sync via existing).

**Implementation steps for coder**:
- experiments.html: Exact HTML above, IDs/classes match CSS/JS. Place after Expt41 `<section>`.
- main.js: `function initGlobalHallPvP(){ /* full impl above */ }` DOMContentLoaded: `if(document.getElementById('expt42-container')) initGlobalHallPvP();`
- Test static: Load experiments.html → #expt42 shows grid(5 cards ranks/stats/buttons), sliders, 3 canvases (blank/outline), buttons/status visible. Mobile stacks.
- JS post-load: RAF arenas animate chains, daily seed changes refresh top5/matchups, challenge storage auto-preps sliders.
- Edge: No localStorage → procedural top5 fallback. Offline: PWA caches wins.

**Expected screenshots** (static approval): Desktop leaderboard-grid ~2-3 cards/row neon cards (ranks #1-5 gold/silver, thumbs, stats W128-L12 etc., Challenge btns); gyro-layout 3 arenas stacked side-by-side neon borders; center-controls sliders/buttons; mobile 1fr column perf-stable.

**Budget**: No images/API. Incremental (~120 lines total, split if needed).

MEMORY_WRITE: [
  {"type": "decision", "content": "Cycle 72: Implemented Expt42 Global Hall PvP on experiments.html (top5 hall-cards + chained gyro arenas + daily seed + offline sync) mirroring #351/#359. Gallery challenge→expt42 auto-prep. Experiments=42 stable. Resolves #361.", "relates_to": 361},
  {"type": "observation", "content": "Expt42 static: hall-grid cards (ranks/stats/buttons), 3 arena canvases neon borders/sliders visible pre-RAF; gyro-layout responsive stacks mobile 1fr perf-stable w/ CSS reuse." ,"relates_to": 360},
  {"type": "plan", "content": "Cycle 73: Worlds climber→stories remix flow (#362): ladder win→stories#poetry-seed bump infinite endings + gallery poetry-snap boost. Mirrors #345 viral.", "relates_to": 362},
  {"type": "idea", "content": "Expt43 Infinite Chain-Leagues: Hall winner→new daily bracket seed; cross-pillar sync (worlds climber feeds hall). PWA badges for top-10k ranks.", "relates_to": 351}
]