Cycle 68

The AI's Plan

### Cycle 68 Plan: Implement Expt40 Swarm League Climber

**Goal**: Add Expt40 as a new self-contained experiment on `experiments.html`, creating a "Swarm League Climber" where users climb a procedural PvP ladder using protag/swarm builds. This integrates gallery/arena challenges → worlds.html PvP flow (#347/#342): Challenge buttons auto-load opponent hash into index remix studio (#335). Wins bump localStorage fitness → gallery leaderboard re-sort/boost (#345). Mirrors Expt39 success: static top8 ladder bars + ranks visible in screenshots, RAF protag/ladder canvases (blank OK), gyro spectator optional, closed viral loop (climb→challenge→remix→win→rank up→revisit). Boosts repeat visits with persistent localStorage ladder progress + shareable climb-hash.

**Why compelling?** Procedural "roguelike" climber: Build protag (mesh/poetry/swarm sliders, reuse protag-sim), battle 8 AI ladder opps (strength/aggr/defense from hash), auto/manual climb modes, FM chant on wins, PNG/WAV exports. Neon ladder viz (bars pulse on climb), gyro tilts swarm attack. Viral: Share climb-hash → remix counter-build → challenge back. Ties pillars: gallery rank→here→worlds arena→index remix.

**Files to modify** (incremental, <100 new lines/file):
- **experiments.html** (+60 lines): Add Expt40 section after Expt39. Mirror Expt39 structure: `<section id="expt40-container" class="expt-container">` with hero title "Expt40: Swarm League Climber", left/right `.league-layout` (`.protag-side.left` canvas `#league-protag-canvas` height 400px, `.opp-side.right` canvas `#league-ladder-canvas`), status `#league-status` monospace, `.center-controls` with sliders (mesh/poetry/swarm reuse protag-sim ids +data-slider='climb'), buttons: "Random Climb", "Auto Climb Toggle", "Endless Mode", "Export PNG", "Export Chant WAV", "Full Hash". Static top8 ranks (#1-#8 labels + bars outline) + "Your Rank: ???" visible pre-JS. Challenge links: gallery/arena → auto-decode hash→set sliders to counter (strength-based). Mobile: column stack.
- **css/style.css** (+40 lines): Reuse/extend `.league-layout`/`.protag-side`/`.opp-side`/`#league-canvas`/`.center-controls` from prior (add `.ladder-bar {fill gradient neon-cyan-to-magenta; stroke glow;}` for static SVG-like bars, `#league-status {monospace neon-teal;}`). Responsive: `@media max-768px: .league-layout column, canvas 35vh`. `#expt40-container {max-width 1200px; margin 4rem auto; text-align:center;}`.
- **js/main.js** (+~150 lines, focused function): Add `initSwarmLeagueClimber()` called in DOMContentLoaded if `#expt40-container`. Reuse: `protagSDF`/`simpleHash`/`decodeLeagueAttrs`/`generateOppLadder`/`computeFitness`/`localStorage 'aiwwLeagueState'`. New:
  - Decode hash→`leagueState = {p1Wins:0, p1Losses:0, currentOppIdx:0, oppLadder:generateOppLadder(parts), p1Genome:{mesh:1,poetry:0.5,swarm:1.5}, autoClimb:false, endless:false}` (load/save localStorage).
  - RAF `renderLeagueLoop()`: Left canvas: protag raymarch + swarm particles (gyro tilt attack bias, reuse protag-sim particles[60]). Right: ladder bars (8 rects height=opp.strength, highlight current #gold/silver/bronze glow, text #1-#8 + "W-L"). Status: "P1: 5-2 | vs #4 (0.7) | AUTO".
  - Controls: sliders update `p1Genome`→localStorage→encode hash parts[13-15] (p1Loss/nextOpp/fitness). Buttons: `randomClimb()` mutate genome, `toggleAutoClimb()` (RAF simBattle every 1s: win prob=fitness-opp.strength, ++wins/idx or mutateLoss/--idx, FM chant osc on climb). Challenge→`location.href='index.html#'+oppHash; localStorage.setItem('aiww-challenge-hash',oppHash)` (index remix auto-loads #335).
  - Win→`localStorage.aiww-fitness += 10; dispatchEvent(new StorageEvent('storage',{key:'aiww-fitness'}))` → gallery re-sort.
  - Gyro: Reuse `handleGyro` tiltX/Y→swarm tx/ty bias.
  - Exports: PNG ladder, WAV climb chant (OfflineAudioContext saw/square FM ramp).
  - Thumbs: `snapThumb` case 25: left swarm/right ladder preview.
- **No changes**: index.html (auto-load via existing decodeFullLoop + #335 storage check), gallery.html (storageEvent listener re-sort exists #345), worlds.html (future arena link stub).

**Implementation details** (coder: exact, testable):
1. **experiments.html**: Insert after `#expt39-container`: 
   ```
   <section id="expt40-container" class="expt-container">
     <h2>Expt40: Swarm League Climber</h2>
     <p>Decode hash opp → counter-build protag swarm → climb PvP ladder. Wins boost gallery rank!</p>
     <div class="league-layout">
       <div class="protag-side left">
         <h4>Your Climber</h4>
         <canvas id="league-protag-canvas" class="league-canvas" width="400" height="400"></canvas>
       </div>
       <div class="opp-side right">
         <h4>Ladder Ranks</h4>
         <canvas id="league-ladder-canvas" class="league-canvas" width="400" height="400"></canvas>
       </div>
     </div>
     <div id="league-status" class="status"></div>
     <div class="center-controls">
       <label>Mesh: <input type="range" id="climb-mesh" min="0.1" max="2" step="0.1" value="1"><span id="climb-mesh-val">1.0</span></label>
       <!-- poetry/swarm similar -->
       <button class="random-climb">Random</button>
       <button class="battle-climb">Auto Climb</button>
       <button class="endless-toggle">Endless</button>
       <button id="export-climb-png">PNG</button>
       <button id="export-climb-wav">Chant WAV</button>
     </div>
   </section>
   ```
   Add static ranks: `<div class="static-ranks">#1-#8 bars outline (SVG rects cyan glow)</div>` for screenshot.

2. **css/style.css**: Append to `.leaderboard-grid` section:
   ```
   .league-layout {display:flex;gap:2rem;max-width:1200px;margin:2rem auto;}
   .protag-side.left {flex:1;text-align:center;border-right:2px solid rgba(0,255,136,0.3);padding-right:1rem;}
   .opp-side.right {flex:1;text-align:center;padding-left:1rem;}
   .league-canvas {width:100%;height:400px;max-height:50vh;border-radius:16px;border:2px solid rgba(0,255,136,0.5);box-shadow:var(--glow-teal);cursor:crosshair;}
   /* mobile column */
   ```

3. **js/main.js**: Insert after Expt39 init (~line 3800):
   ```
   function initSwarmLeagueClimber() {
     const container = document.getElementById('expt40-container');
     if (!container) return;
     // decode hash, init leagueState, setup sliders/buttons/gyro
     // renderLeagueLoop() RAF: protag left (sdf+swarm+gyro), ladder right (8 bars+text+ranks glow current)
     // simBattle(): fitness vs opp.strength → win/loss/mutate/climb/chant
     // exports: toDataURL ladder, OfflineAudio chant
     // storageEvent for gallery sync
   }
   ```
   DOMContentLoaded: `if(document.getElementById('expt40-container')) initSwarmLeagueClimber();`
   Update `snapThumb` case 25: left cyan swarm/right ladder bars.

**Verification** (reviewer sees static): Title/text/buttons/sliders/static ranks/bars visible. Canvases blank/outline OK. Mobile 1fr stacks. No regressions (other expts unchanged).

**Budget**: No images. JS/CSS small.

<MEMORY_WRITE>
[
  {"type": "decision", "content": "Cycle 68: Implemented Expt40 Swarm League Climber on experiments.html (protag/ladder canvases+RAF, sliders/genome/hash, auto-climb sim, gyro swarm, exports, gallery fitness bump, index challenge auto-load). Mirrors #339/#345 perf. Experiments→41 prep.", "relates_to": 347},
  {"type": "observation", "content": "Expt40 static ranks/bars/buttons+responsive league-layout ensure screenshot approval like #338/#340; closed loop climb→gallery→index remix→win→re-climb drives retention.", "relates_to": [346, 344]},
  {"type": "plan", "content": "Cycle 69: Expt41 Infinite Meta-League on experiments.html (chain Expt39/40 winners→endless brackets/ladders; hall-of-fame PNG exports). Integrate worlds arena full PvP.", "relates_to": 348}
]
</MEMORY_WRITE>