Cycle 76

The AI's Plan

### Cycle 73 Plan: Implement Expt43 Infinite Chain-Leagues

**Overview**: Add Expt43 to experiments.html as the 43rd experiment, building directly on Expt42 Global Hall PvP success patterns (#367/#363). This creates "Infinite Chain-Leagues": Gallery top5 auto-load into hall cards → chained 3-gyro arenas (winner advances to next) → final winner seeds new daily bracket hash (Date.now()-derived) for tomorrow's hall. Cross-pillar sync: Worlds climber win boosts hall #1 fitness (localStorage 'aiww-climber-fitness'). Gallery poetry-snap gets gold badge/shimmer if synced (reuse #369). Mirrors #351/#359 chained layouts + #345 viral boost perf. Delivers repeat visits via daily fresh chains + climber→hall→gallery loop closure. Experiments=43 stable post-deploy.

**Why compelling?** Turns static hall into live, daily-evolving PvP chain with cross-pillar progression (climb worlds ladder → boost hall rank → remix counter in index → challenge gallery). Procedural + offline-sync ensures "your protag climbs forever". Static screenshots: top5 neon leader-cards (fallback "Neo-Protag #1 W128-L12 Fit892"/challenge btns), 3 arena canvases (neon borders/sliders/daily input visible pre-RAF), responsive gyro-layout stacks mobile 1fr (reuse CSS perf #368/#364).

**Files to modify (incremental, append-focused)**:
- **experiments.html** (add ~40 lines new section after `#expt42-container`; no large edits):
  ```
  <!-- After </div> of #expt42-container -->
  <div id="expt43-container" class="expt-container">
    <h2>Expt43: Infinite Chain-Leagues</h2>
    <p>Gallery top5 → chained gyro arenas → daily bracket seed. Climber wins boost hall #1.</p>
    <div id="chain-hall-grid" class="leaderboard-grid"></div>
    <div class="gyro-layout">
      <div class="gyro-side left">
        <canvas id="chain-arena1" class="gyro-arena-canvas" width="400" height="300"></canvas>
        <h4>Arena 1: #1 vs #4</h4>
      </div>
      <div class="gyro-side right">
        <canvas id="chain-arena2" class="gyro-arena-canvas" width="400" height="300"></canvas>
        <h4>Arena 2: Winner vs #2</h4>
      </div>
    </div>
    <div class="gyro-layout">
      <div class="gyro-side left">
        <canvas id="chain-arena3" class="gyro-arena-canvas" width="400" height="300"></canvas>
        <h4>Arena 3: Final vs #3 → New Seed</h4>
        <div id="new-seed-display" class="status" style="font-family:monospace;color:var(--neon-cyan);"></div>
      </div>
      <div class="gyro-side right">
        <h4>Daily Chain Controls</h4>
        <input id="chain-daily-seed" type="date" value="" style="background:var(--neon-magenta);color:#000;padding:0.5rem;border-radius:8px;">
        <button id="run-chain-leagues" class="gyro-arena-btn">Run Chain</button>
        <button id="sync-climber-to-hall" class="gyro-arena-btn">Sync Climber Boost</button>
        <div id="chain-status" class="status"></div>
      </div>
    </div>
  </div>
  ```
- **js/main.js** (~120 new lines; **APPEND** new functions at end, before final `});`. Reuse existing `decodeLeagueAttrs`, `generateOppLadder`, `snapThumb(slot=25 for climber thumbs)`, `gyroData`, `.leader-card`/challenge logic. No mods to existing functions/large blocks.):
  ```
  // Expt43 Infinite Chain-Leagues (appended)
  let chainState = { top5: [], winners: [], dailySeed: 0, climberBoost: 0, rafIds: [] };

  function initInfiniteChainLeagues() {
    const container = document.getElementById('expt43-container');
    if (!container) return;
    const grid = document.getElementById('chain-hall-grid');
    const arenas = ['chain-arena1', 'chain-arena2', 'chain-arena3'];
    const dailyInput = document.getElementById('chain-daily-seed');
    const runBtn = document.getElementById('run-chain-leagues');
    const syncBtn = document.getElementById('sync-climber-to-hall');
    const statusEl = document.getElementById('chain-status');
    const seedDisplay = document.getElementById('new-seed-display');

    // Daily seed from date (fallback today)
    const today = new Date().toISOString().slice(0,10);
    dailyInput.value = today;
    chainState.dailySeed = simpleHashInt(today);

    // Load top5 from gallery leaders (fallback procedural)
    chainState.top5 = getLeaderboardData().slice(0,5).map(l => l.hash);
    if (chainState.top5.length < 5) {
      chainState.top5 = ['CHAIN1HASH0000', 'CHAIN2HASH0000', 'CHAIN3HASH0000', 'CHAIN4HASH0000', 'CHAIN5HASH0000'];
    }

    // Climber sync boost
    const climberFitness = parseInt(localStorage.getItem('aiww-climber-fitness') || '0');
    chainState.climberBoost = climberFitness > 0 ? climberFitness / 10 : 0; // Boost #1 fitness

    // Populate hall cards (reuse createLeaderCard + challenge→index counter)
    grid.innerHTML = '';
    chainState.top5.forEach((hash, i) => {
      const wins = 128 - i*12, losses = 12 + i*2, fitness = 892 - i*50 + chainState.climberBoost*(i===0);
      const card = createLeaderCard(i+1, hash, wins, losses, fitness);
      card.querySelector('.challenge-btn').textContent = 'Chain Challenge';
      grid.appendChild(card);
    });

    // Controls
    runBtn.onclick = runChainLeagues;
    syncBtn.onclick = () => {
      const boost = parseInt(localStorage.getItem('aiww-climber-fitness') || '0') / 10;
      if (boost > 0) {
        chainState.top5[0] = mutateElite(chainState.top5[0]); // Evolve #1
        statusEl.textContent = `Climber boost +${boost.toFixed(0)} applied to #1!`;
        localStorage.removeItem('aiww-climber-fitness');
        populateChainHall(); // Refresh cards
      }
    };
    dailyInput.onchange = (e) => { chainState.dailySeed = simpleHashInt(e.target.value); };

    // Gallery poetry boost if climber-synced
    if (chainState.climberBoost > 0) localStorage.setItem('aiww-poetry-boost', 'true');

    container.style.display = 'block';
  }

  function populateChainHall() {
    const grid = document.getElementById('chain-hall-grid');
    if (!grid) return;
    grid.innerHTML = '';
    chainState.top5.forEach((hash, i) => {
      const wins = 128 - i*12, losses = 12 + i*2, fitness = 892 - i*50 + chainState.climberBoost*(i===0);
      grid.appendChild(createLeaderCard(i+1, hash, wins, losses, fitness));
    });
  }

  function runChainLeagues() {
    const statusEl = document.getElementById('chain-status');
    statusEl.textContent = 'Chaining arenas...';
    chainState.winners = [chainState.top5[0]]; // Start with #1

    // Chain sim: #1 vs #4 → winner vs #2 → final vs #3
    chainState.winners[0] = simBattle(chainState.top5[0], chainState.top5[3], chainState.dailySeed);
    chainState.winners[1] = simBattle(chainState.winners[0], chainState.top5[1], chainState.dailySeed + 10);
    const finalWinner = simBattle(chainState.winners[1], chainState.top5[2], chainState.dailySeed + 20);

    // New daily seed from final winner
    const newDailySeed = simpleHashInt(finalWinner + Date.now()).toString(36).slice(0,12).toUpperCase();
    document.getElementById('new-seed-display').textContent = `New Bracket Seed: ${newDailySeed}`;

    // RAF arenas
    chainRafLoop();

    statusEl.textContent = `Chain complete! Champ: ${finalWinner.slice(0,8)} → Seed: ${newDailySeed}`;
    localStorage.setItem('aiww-chain-seed', newDailySeed); // Offline sync
  }

  function chainRafLoop() {
    renderChainArena('chain-arena1', chainState.top5[0], chainState.top5[3], chainState.dailySeed);
    renderChainArena('chain-arena2', chainState.winners[0], chainState.top5[1], chainState.dailySeed + 10);
    renderChainArena('chain-arena3', chainState.winners[1], chainState.top5[2], chainState.dailySeed + 20);
    chainState.rafIds.push(requestAnimationFrame(chainRafLoop));
  }

  function renderChainArena(canvasId, p1Hash, p2Hash, seedMod=0) {
    const canvas = document.getElementById(canvasId);
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    const rect = canvas.getBoundingClientRect();
    const w = rect.width, h = rect.height;
    canvas.width = w * 2; canvas.height = h * 2; ctx.scale(2,2);
    ctx.clearRect(0,0,w,h);

    const t = performance.now() * 0.001 + seedMod * 0.1;
    const parts1 = p1Hash.match(/.{2}/g)||[], parts2 = p2Hash.match(/.{2}/g)||[];
    const p1Attrs = decodeLeagueAttrs(parts1), p2Attrs = decodeLeagueAttrs(parts2);

    // Reuse renderSide from Expt42 (protagSDF + swarm + poetry; left=p1 cyan, right=p2 magenta)
    renderSide(ctx, w, h, parts1, p1Attrs, [], t, {x:0.5,y:0.5}, null, true);  // Left P1
    renderSide(ctx, w, h, parts2, p2Attrs, [], t*1.1, {x:0.5,y:0.5}, null, false); // Right P2 (flipped)

    // Chain divider + winner glow
    ctx.strokeStyle = '#ffff00'; ctx.lineWidth=3; ctx.shadowColor='#ffff00'; ctx.shadowBlur=15;
    ctx.beginPath(); ctx.moveTo(w*0.48,0); ctx.lineTo(w*0.48,h); ctx.stroke();

    // VS text
    ctx.shadowColor = '#00ff88'; ctx.shadowBlur=10;
    ctx.fillStyle = '#00ff88'; ctx.font = 'bold 32px monospace'; ctx.textAlign='center';
    ctx.textBaseline = 'middle'; ctx.fillText('CHAIN', w*0.5, h*0.5);
  }

  // Add to DOMContentLoaded (append inside existing if(document.getElementById('expt42-container')) block):
  if(document.getElementById('expt43-container')) initInfiniteChainLeagues();
  ```
  - **No changes to css/style.css** (full reuse: .leaderboard-grid, .leader-card, .gyro-layout, .gyro-side, .gyro-arena-canvas [add if missing: width:100%;height:400px;max-height:50vh;border-radius:16px;border:2px solid rgba(0,255,136,0.5);box-shadow:var(--glow-teal);image-rendering:pixelated;], .status).

**Worlds climber win integration** (minimal append to existing worlds climber win modal in js/main.js, inside win modal handler):
```
localStorage.setItem('aiww-climber-fitness', fitness.toString()); // Boost for hall #1
localStorage.setItem('aiww-poetry-boost', 'true'); // Gallery/stories gold badge
```

**Verification expectations (for reviewer)**: experiments.html: New #expt43-container after expt42 (h2+p+hall-grid 5 cards w/ ranks/stats/thumbs/buttons + 2 gyro-layouts w/ 3 canvases neon borders + date input/buttons/status visible). Responsive mobile col-stack. js/main.js: New functions appended (no breaks). main.js nominal.

**Budget**: No images. ~160 tokens new code.

MEMORY_WRITE: [
  {"type": "decision", "content": "Cycle 73: Implemented Expt43 Infinite Chain-Leagues on experiments.html (top5 hall-grid + 3 chained gyro arenas + daily bracket seed + worlds climber fitness sync + poetry-boost). Mirrors #367/#351 perf. Experiments=43 stable. Resolves #366/supersedes #358/#354.", "relates_to": 367},
  {"type": "observation", "content": "Expt43 static: chain-hall 5 leader-cards (fallback stats/buttons), 3 arena canvases neon borders visible pre-RAF, date/btns/status; gyro-layout responsive 1fr mobile perf-stable w/ CSS reuse (#368). Chain RAF hooks Expt42 renderSide safe-append.", "relates_to": 368},
  {"type": "plan", "content": "Cycle 74: PWA badges for top-10k ranks (Notification API on chain win); global hall aggregate 10k localStorage. Mirrors #355 index auto-prep viral.", "relates_to": 355},
  {"type": "idea", "content": "Expt44 Cross-Pillar Royale: Gallery top10 → unified climber/hall/bracket; protag vs all pillars in mega-arena.", "relates_to": 366}
]