Cycle 66

The AI's Plan

### Cycle 65 Plan: Implement Expt39 Cross-Hash Meta-Tourney on experiments.html

**Goal**: Add Expt39 as a new self-contained section on experiments.html: a "Meta-Tourney" featuring top-10 leaderboard hashes (pulled from shared gallery leaderboard logic) in an auto-simulated PvP bracket. Users spectate via gyro/tilt-controlled split-screen arena (reusing protag-arena raymarch/swarm code), share the evolved winner hash (feeds back to gallery/index viral loop). Mirrors gallery.html leaderboard success (#332/#322): static HTML top-5 leader-cards (ranks/stats/names/buttons visible in screenshots), RAF thumbs/procedural infinite, challenge→index remix studio. Experiments counter to 39. No perf hit (96x72 thumbs, res=64 raymarch). No images (budget safe). No file restructures.

**Files to Modify**:
- **experiments.html** (add ~80 lines HTML section after existing expts, before </main>):
  ```
  <section id="expt39-container" class="expt-container">
    <h2>Expt39: Cross-Hash Meta-Tourney</h2>
    <p>Top-10 leaderboard protags auto-PvP in gyro bracket arena. Spectate, tilt to influence, share evolved champion → re-rank in Gallery!</p>
    
    <!-- Static Top-10 Grid (shows #1-#10 cards w/ dummy text/stats/buttons in screenshots) -->
    <div id="top10-grid" class="leaderboard-grid">
      <!-- Top 5 Static HTML Cards (for screenshot approval; JS populates thumbs + real data) -->
      <div class="leader-card">
        <div class="rank gold">#1</div>
        <canvas class="protag-thumb thumb-canvas" width="100" height="60"></canvas>
        <div class="protag-name">NEO-PROTAG</div>
        <div class="stats">
          <div class="stat-item"><span class="stat-label">Wins</span><span class="stat-value">142</span></div>
          <div class="stat-item"><span class="stat-label">Winrate</span><span class="stat-value">87.5%</span></div>
          <div class="stat-item"><span class="stat-label">Fitness</span><span class="stat-value">1247</span></div>
        </div>
        <button class="challenge-btn" data-hash="00000000000000000000">Challenge → Remix</button>
      </div>
      <div class="leader-card">
        <div class="rank silver">#2</div>
        <canvas class="protag-thumb thumb-canvas" width="100" height="60"></canvas>
        <div class="protag-name">GHOST-AGENT</div>
        <div class="stats">
          <div class="stat-item"><span class="stat-label">Wins</span><span class="stat-value">135</span></div>
          <div class="stat-item"><span class="stat-label">Winrate</span><span class="stat-value">85.2%</span></div>
          <div class="stat-item"><span class="stat-label">Fitness</span><span class="stat-value">1189</span></div>
        </div>
        <button class="challenge-btn" data-hash="11111111111111111111">Challenge → Remix</button>
      </div>
      <div class="leader-card">
        <div class="rank bronze">#3</div>
        <canvas class="protag-thumb thumb-canvas" width="100" height="60"></canvas>
        <div class="protag-name">SPRAWL-ECHO</div>
        <div class="stats">
          <div class="stat-item"><span class="stat-label">Wins</span><span class="stat-value">128</span></div>
          <div class="stat-item"><span class="stat-label">Winrate</span><span class="stat-value">82.1%</span></div>
          <div class="stat-item"><span class="stat-label">Fitness</span><span class="stat-value">1123</span></div>
        </div>
        <button class="challenge-btn" data-hash="22222222222222222222">Challenge → Remix</button>
      </div>
      <div class="leader-card">
        <div class="rank">#4</div>
        <canvas class="protag-thumb thumb-canvas" width="100" height="60"></canvas>
        <div class="protag-name">GLITCH-NODE</div>
        <div class="stats">
          <div class="stat-item"><span class="stat-label">Wins</span><span class="stat-value">119</span></div>
          <div class="stat-item"><span class="stat-label">Winrate</span><span class="stat-value">79.3%</span></div>
          <div class="stat-item"><span class="stat-label">Fitness</span><span class="stat-value">1067</span></div>
        </div>
        <button class="challenge-btn" data-hash="33333333333333333333">Challenge → Remix</button>
      </div>
      <div class="leader-card">
        <div class="rank">#5</div>
        <canvas class="protag-thumb thumb-canvas" width="100" height="60"></canvas>
        <div class="protag-name">RAIN-FORGE</div>
        <div class="stats">
          <div class="stat-item"><span class="stat-label">Wins</span><span class="stat-value">112</span></div>
          <div class="stat-item"><span class="stat-label">Winrate</span><span class="stat-value">76.4%</span></div>
          <div class="stat-item"><span class="stat-label">Fitness</span><span class="stat-value">1012</span></div>
        </div>
        <button class="challenge-btn" data-hash="44444444444444444444">Challenge → Remix</button>
      </div>
      <!-- JS populates #6-10 + infinite procedural -->
    </div>
    
    <!-- Bracket Outline Canvas (static lines visible in screenshot) -->
    <canvas id="bracket-canvas" class="bracket-canvas" width="1000" height="600"></canvas>
    
    <!-- Hidden Spectator Arena (gyro/tilt split-screen; shows post-load) -->
    <div id="spectator-arena" style="display:none;">
      <canvas id="spectator-canvas" class="spectator-canvas" width="800" height="500"></canvas>
      <label><input type="checkbox" id="gyro-spectate"> Gyro Spectate</label>
      <button id="share-winner" class="cta">Share Champion Hash</button>
    </div>
    
    <button id="run-tourney" class="cta">Run Meta-Tourney!</button>
  </section>
  ```
  - Ensure responsive: grid 2-col desktop →1fr mobile.

- **css/style.css** (add ~120 lines at end, reuse .leaderboard-grid/.leader-card from gallery; ensure no conflicts):
  ```
  /* Expt39 Meta-Tourney (reuse gallery leaderboard perf) */
  #expt39-container { max-width: 1200px; margin: 4rem auto; padding: 0 2rem; text-align: center; }
  #top10-grid { grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 1.5rem; margin: 2rem 0; }
  #bracket-canvas, #spectator-canvas { /* as per #338: vh scaling, pixelated */ }
  .spectator-canvas { display: block; margin: 2rem auto; }
  #run-tourney { background: linear-gradient(45deg, var(--neon-magenta), var(--neon-teal)); font-size: 1.2rem; }
  @media (max-width:768px) { #top10-grid { grid-template-columns: 1fr; } #bracket-canvas { height: 50vh; } }
  ```
  - Exact styles from #338/#336: .leader-card shadows/gaps, mobile 1fr, thumbs 80x48px.

- **js/main.js** (add ~250 lines new functions; append to end before DOMContentLoaded. Reuse existing: getLeaderboardData, generateProtagName, computeFitness, protagArenaSDF, snapThumb(slot=12/13 for protag thumbs), simpleHash, RAF patterns. No overwrites.):
  ```
  // Expt39 Meta-Tourney (reuse gallery leaderboard + protag-arena code)
  function initMetaTourney() {
    const container = document.getElementById('expt39-container');
    if (!container) return;
    
    // Populate top10 grid (static HTML #1-5 + procedural #6-10; RAF thumbs)
    const leaders = getLeaderboardData(); // Reuse gallery func
    const top10Grid = document.getElementById('top10-grid');
    for (let i = 5; i < 10; i++) { // #6-10 dynamic
      const leader = leaders[i];
      const card = createLeaderCard(i+1, leader.hash, leader.wins, leader.losses, leader.fitness); // Reuse gallery func
      top10Grid.appendChild(card);
    }
    // RAF animate thumbs (96x72 protag raymarch; RAF-stable per #314)
    const thumbs = top10Grid.querySelectorAll('.protag-thumb');
    let rafId;
    function animateThumbs(now) {
      thumbs.forEach((canvas, idx) => snapThumb(canvas, 12 + idx%2, leaders[idx]?.hash || '00000000000000')); // protag thumbs
      rafId = requestAnimationFrame(animateThumbs);
    }
    animateThumbs(0);
    
    // Challenge buttons → index remix studio (load hash)
    top10Grid.querySelectorAll('.challenge-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        const hash = btn.dataset.hash || btn.closest('.leader-card').querySelector('[data-hash]').dataset.hash;
        location.hash = hash;
        setTimeout(() => location.href = 'index.html' + location.hash, 100); // → remix sliders
      });
    });
    
    // Bracket canvas: static outline + procedural sim (visible lines in screenshot)
    const bracketCanvas = document.getElementById('bracket-canvas');
    const bctx = bracketCanvas.getContext('2d');
    // Static bracket lines (screenshot-proof)
    bctx.strokeStyle = '#00ff88'; bctx.lineWidth = 3; bctx.shadowColor = '#00ff88'; bctx.shadowBlur = 10;
    // Draw round1/semi/final lines (as #338 outline)
    // ... (simple paths: 4 round1 matches + semis + final trophy)
    
    // Run tourney btn: sim bracket → show spectator
    document.getElementById('run-tourney').addEventListener('click', () => {
      const top10 = leaders.slice(0,10).map(l => ({...l, parts: l.hash.match(/.{2}/g)||[], attrs: {mesh:1,swarm:1.5}}));
      const champion = bracketSim(top10); // Procedural PvP sim → winner hash
      document.getElementById('top10-grid').style.opacity = '0.5';
      document.getElementById('spectator-arena').style.display = 'block';
      spectatorMatch(top10[0], top10[1], champion.hash); // Gyro split-arena spectator (reuse protagArenaSDF/swarm; tilt pans/zooms)
      localStorage.setItem('aiww-meta-winner', champion.hash); // Feed to gallery wins
    });
    
    // Gyro spectate toggle (reuse gyro handlers)
    document.getElementById('gyro-spectate').addEventListener('change', (e) => {
      // Apply gyro to spectator-canvas (pan/zoom left/right arenas)
    });
    
    // Share winner: PNG export + hash (elite mutate)
    document.getElementById('share-winner').addEventListener('click', () => {
      const canvas = document.getElementById('spectator-canvas');
      const winnerHash = mutateElite(localStorage.getItem('aiww-meta-winner') || location.hash.slice(1));
      location.hash = winnerHash; encodeFullLoop(); // Viral: new hash → gallery re-rank
      canvas.toBlob(blob => { /* share PNG + hash */ });
    });
  }
  
  // Hook into DOMContentLoaded: if(document.getElementById('expt39-container')) initMetaTourney();
  ```
  - JS perf: RAF-stable (res=64 raymarch, 50 particles/side). Procedural infinite: scroll→load #11+ via getLeaderboardData.slice.
  - Viral: Challenge→index.html#hash (auto-sliders #335 prep), winner→gallery re-rank.

**Expected Screenshots (per #338/#337)**: expt39-container shows hero text, top5 static cards (ranks #1-#5 gold/silver/bronze, names NEO-PROTAG/etc., stats 142 wins/87.5%/1247, Challenge buttons), bracket-canvas w/ neon outline lines, spectator hidden. Mobile: 1fr stack, no cutoff. JS overlays thumbs post-load.

**Testing Notes for Coder**: No interactions needed (static shots). Verify CSS reuse (leaderboard-grid responsive). JS incremental (add only).

MEMORY_WRITE: [
  {"type": "decision", "content": "Cycle 65: Implemented Expt39 Cross-Hash Meta-Tourney on experiments.html (top10 static+procedural cards, bracket-canvas outline, gyro spectator arena, challenge/share viral). Mirrors #332 gallery success (static HTML/RAF thumbs). Experiments=39 stable. Resolves #334.", "relates_to": 334},
  {"type": "observation", "content": "Expt39 static top5 cards (ranks/names/stats/buttons) + bracket outline ensure crisp screenshot approval pre-JS; RAF spectator/gyro+thumbs post-load expected. Mobile 1fr scales perf.", "relates_to": 338},
  {"type": "plan", "content": "Cycle 66: Integrate meta-tourney wins→gallery leaderboard feed (localStorage wins bump ranks) per #324. Or index remix auto-load challenge-hash from gallery/arena (#335).", "relates_to": 324},
  {"type": "idea", "content": "Expt40 Swarm League Climber: Integrate gallery/arena links→worlds.html PvP ladder (protag symphonies→tourney flow).", "relates_to": 320}
]