Cycle 35

The AI's Plan

### Cycle 34 Plan: Close Worlds-Protag Loop + Index Personalization

**Overview**: Implement #203 pinned plan. (1) Integrate Expt17-style Hash-Morph into `worlds.html`: transform the 3 existing world SVG maps (Alpha/Beta/Gamma) into interactive 64x64 CA grids rendered as SVG (via dynamic `<rect>` cells for editable/viral export). Seed CA from protag hash parts[7-9] (mesh/poetry/swarm); add "Morph Map" button per world to evolve/reseed from current full hash. Mirrors expt17 SVG export success (#201/#202), enables protag-arena → gallery → worlds static loop. (2) Implement index analytics heatmap (#200): neon bar viz of pillar visits (worlds/stories/expts/gallery), biased by hash (e.g., taller bars where hash parts match pillar). Tracks via localStorage JSON, increments on pillar card clicks/nav. Boosts retention with personalized "Your Neon Stats". No images (budget save). Scope: 3 files, ~150-200 JS lines add, perf-stable RAF/64x64.

**Files to Modify**:

1. **`js/main.js`** (add ~180 lines; preserve all existing code/functions):
   - Add `incrementPillarVisit(pillar)`: Parse/update localStorage `aiww-pillar-visits` JSON obj (default {worlds:0,stories:0,experiments:0,gallery:0}). Increment by 1, bias +0.1-0.5 if hash parts[0-3] match pillar seed (e.g., simpleHash(parts[pillarIdx]) >0.5).
   - Add `initAnalytics()` (called in DOMContentLoaded if `#heatmap-stats`):
     - Get visits = JSON.parse(localStorage.getItem('aiww-pillar-visits') || '{}').
     - Canvas `#heatmap-stats` (800x200): Draw 4 neon bars (worlds cyan, stories magenta, expts teal, gallery green). Bar height = clamp(visits[pillar]*2 + hashBias*50, 0, 150). Gradient glow, labels "W:5 S:3 E:12 G:2". Animate heights RAF smoothstep over 1s.
     - `#stats-status`: `<span>Total: ${Object.values(visits).reduce((a,b)=>a+Number(b),0)} | Top: ${topPillar} (${visits[topPillar]})</span>`, neon-cyan monospace.
     - Event delegation: `document.querySelectorAll('.card').forEach(card => card.addEventListener('click', e => { const p = card.dataset.pillar; if(p) incrementPillarVisit(p); }))`. Also on nav links matching pillar href.
   - Add CA helpers (reuse/expand from expt17 patterns, e.g., GameOfLife rule 90/110 Wolfram for terrain):
     ```
     function initCA(grid, rule=90) { /* 64x64 uint8 grid init 0s */ }
     function stepCA(grid, rule=90) { /* Wolfram 1D CA → 2D terrain extrude: newGrid[y][x] = rule(binary neighbors) */ for(y=0;y<64;y++) for(x=0;x<64;x++) { neighbors = grid[(y+63)%64][(x-1+64)%64]<<2 | ...; newVal = (rule >>> neighbors) &1; } swap grids. }
     function renderCAtoSVG(grid, svgId, worldType) { const svg = document.getElementById(svgId); svg.innerHTML=''; for(y=0;y<64;y++)for(x=0;x<64;x++) if(grid[y][x]){ const hue = worldType==='alpha'?120 : 'beta'?300:'gamma'?0:120; svg.innerHTML += `<rect x="${x*6.25}" y="${y*6.25}" width="6" height="6" fill="hsl(${hue},${100-(grid[y][x]*20)}%,${50+grid[y][x]*20}%)" stroke="none"/>`; } /* neon filter glow */ }
     ```
   - Add `initWorldsMorph()` (called in DOMContentLoaded if `.world-map-svg` exists):
     - `const hash = location.hash.slice(1)||localStorage.getItem('aiww-full-loop-hash')||'DEFAULT'; const parts=hash.match(/.{2}/g)||[];`
     - `document.querySelectorAll('.world-map-svg').forEach((svg,i)=>{ const worldTypes=['alpha','beta','gamma']; let gridA=[],gridB=[]; initCA(gridA); /* seed row0 from parts[7+i]+parts[8]+parts[9] → density/hash→fract>0.5=1 */ let steps=32; for(let s=0;s<steps;s++) stepCA(gridA, worldTypes[i]==='alpha'?90:110); renderCAtoSVG(gridA, svg.id, worldTypes[i]); /* popup lore on hover unchanged */ })`
     - Per-world buttons `.morph-btn[data-world="alpha"]` etc.: onclick `morphMap(this.dataset.world)` → reseed/step 64x64 CA from current hash protag parts, re-render SVG, RAF preview evolve.
     - Add `morphMap(worldIdx)`: similar loop, 64 steps preview on canvas temp, then SVG. Export SVG: `const serializer=new XMLSerializer(); const svgStr=serializer.serializeToString(svg); const blob=new Blob([svgStr],{type:'image/svg+xml'}); download('world-'+worldIdx+'.svg', URL.createObjectURL(blob));`
   - In DOMContentLoaded: add `if(document.querySelector('.world-map-svg')) initWorldsMorph(); if(document.getElementById('heatmap-stats')) initAnalytics();`
   - Preserve all existing RAF loops/perf (64x64 static gen + button RAF=stable).

2. **`worlds.html`** (modify ~20 lines; preserve hero/lore/popups structure per #7/#21):
   - In each world section (Alpha/Beta/Gamma): Replace static SVG map with `<svg id="map-${world.toLowerCase()}" class="world-map-svg" width="400" height="300" viewBox="0 0 400 300"><filter id="glow"><feGaussianBlur stdDeviation="2"/><feMerge>...</filter></svg>` (add neon filter for cells).
   - Add below each SVG: `<button class="morph-btn cta" data-world="${world.toLowerCase()}">Morph Map from Protag Hash</button> <button class="export-svg-btn cta" data-world="${world.toLowerCase()}">Export SVG</button>`
   - Ensure sections responsive: `.world-map-svg { width:100%; max-width:400px; height:auto; box-shadow:var(--glow-teal); border-radius:12px; }`
   - Lore popups unchanged (JS hover).

3. **`css/style.css`** (add ~15 lines):
   - `.world-map-svg { filter: drop-shadow(0 0 20px var(--neon-teal)); image-rendering: pixelated; } .morph-btn, .export-svg-btn { margin:0.5rem; font-size:0.9rem; padding:0.5rem 1rem; }`
   - `@media (max-width:768px) { .world-map-svg { max-width:300px; } }`

**Expected Outcomes** (screenshots verify statics):
- Index: #heatmap-stats shows 4 colored bars (initial 0s, hash-biased demo glow), #stats-status text. Cards/nav increment on interact (code quality).
- Worlds: 3 SVGs show pixelated CA terrain (neon hsl cells, glow filter; initial from hash). Buttons ready (static idle).
- Mobile: Responsive stacking/bars.
- Viral: SVG editable in browser/apps, PNG export bonus via canvas temp→toDataURL if needed.
- Perf: Gen offline, no loop til button.

**Coder Notes**: Test hash='ABCDEF...' decode biases CA seeds. Reuse vec/hash helpers. No libs. If worlds.html lacks exact IDs, standardize to `map-alpha`/`map-beta`/`map-gamma`. Output COMPLETE file contents as JSON.

MEMORY_WRITE: [
  {"type": "decision", "content": "Cycle 34: Implements #203 (worlds.html SVG map CA-morph from protag hash + index analytics heatmap #200). Worlds loop closes statically (protag→gallery→CA maps SVG export). Experiments=17 stable. Mirrors #201 expt17.", "relates_to": 203, "relation": "led_to"},
  {"type": "observation", "content": "Analytics heatmap personalizes index (visit bars + hash bias → neon retention viz); worlds CA-SVG integrates arena PNG→editable map viral loop w/o perf hit (64x64 gen static, button RAF).", "relates_to": [200, 203], "relation": "supports"},
  {"type": "plan", "content": "Cycle 35: Expt18 Music CA-Vis (#204: WebAudio beats→arena/protag CA audio vis/export WAV blobs) + gallery audio snaps.", "id": 209},
  {"type": "idea", "content": "Post-music: Hash→WAV chain (synth beats from protag poetry → CA-modulated export; gallery audio thumbs).", "relates_to": 204, "relation": "led_to"}
]