Cycle 18

The AI's Plan

### Cycle 18 Plan: Cross-Pillar World→Story Parsing + Neural Style Expt + Seed-Driven Neon Hues + PWA Polish

**Overview**: Deliver #123 plan items for deeper cross-pillar immersion and new content. 
- **World→Story full integration (#118)**: Enhance procedural world gen on `worlds.html` to save parseable island details (name/lore) to `localStorage.aiww-world-details`. In `stories.html` proc-story, auto-parse/load if available: inject island name into protagonist, lore keywords into plot/twist for personalized remix (e.g., "Jax the [IslandName] deckjockey" + lore-derived plot phrase). Add "Seed Story" button in worlds popups to trigger nav to stories.html with world seed.
- **Neural Style Sim Expt**: Add 6th experiment to `experiments.html`: JS canvas "Neural Style Cyberpunk" – procedural base cyberpunk cityscape (grids/towers/rays) "transformed" via fake conv/perceptron layers (array-based convolutions, sliders for style/content mix). Mouse-drag to "paint" style transfer effect. Presets/shareable via URL/localStorage like raytracer/synth. Mirrors #115/#121 perf (RAF throttle ~60fps, 400px canvas).
- **Neon toggle per-seed hues**: Enhance site-wide Neon Shift toggle (from #111): Add `--hue-shift` CSS var (0-360), auto-set from world/story/expt seed hash (e.g., `hueShift = (simpleHash(seed) * 360) | 0`). Button in header toggles/rotates hue; CSS refactor minimal – wrap neon vars as `hsl(var(--hue-shift, 180), 100%, 50%)` for cyan/teal/magenta. Persist in localStorage.
- **Index PWA polish**: Add install prompt listener (`beforeinstallprompt`), show subtle "Install AIWW" badge on hero CTA hover (dismissible). Mirrors synth/ray share patterns. No manifest changes.

**Rationale**: Builds infinite remix loop (#122/#116): world islands → unique stories → seed hues/expts. New expt adds "AI art" wow-factor without images. PWA boosts retention. No images (budget save per #9). Deep JS content > structure. Mobile/perf-first (RAF, localStorage only).

**Files to Modify (4 max, complete contents output as JSON)**:
1. **`js/main.js`** (major: ~200-300 lines add; enhance existing functions, no refactor):
   - **World gen enhancement** (add `initProcWorlds()` if not exists, or integrate to `initMaps()` load): On world gen (triggered by `#gen-world-btn` or load), generate 5-8 islands `{name: rand(['Neon Spire', 'Ghost Atoll', ...]), lore: randPhrases(), x,y,size}`. Draw SVG paths/circles/text. Save `localStorage.setItem('aiww-world-details', JSON.stringify({seed: currentSeed, islands}))`. Add to island popup: `<button class="remix-btn" data-action="story">Seed Story</button>` – on click: `localStorage.setItem('aiww-world-seed', currentSeed); window.open('stories.html?storyseed='+currentSeed, '_blank');`.
   - **Stories parse enhancement** (in `initProcStory()`): After load seed, check `localStorage.aiww-world-details`. Parse JSON, pick rand island: `protag = protag.replace('deckjockey', island.name + ' deckjockey'); plot += ' amid ' + island.lore.slice(0,50);`. Update arrays dynamically if details present (e.g., `plots.push('explores ' + island.name)`). Status: `Seeded from ${island.name}: ${island.lore.slice(0,30)}...`.
   - **Neural Style Expt** (new `initNeuralStyle()`): Canvas `#neural-canvas` (400x400). Base: procedural city (raymarched towers hsl(200,100%,20%)). "Style": glitch/neon textures (perlin noise + conv kernel). Sliders: `style-weight` (0-1), `content-weight` (0-1), iter (10-100). Fake forward pass: 2D array (64x64) convolved w/ kernels [edge, swirl, neon glow]. Mouse: drag applies localized transfer. Presets: `[{name:"Cyber Portrait", style:0.8, content:0.2, iter:50}, ...]`. URL/localStorage `'aiww-neural-preset' {style,content,iter,hue}`. RAF animate at 30fps throttle (`if(now-last>33)`). Status FPS/iter.
   - **Hue shift** (new `initNeonShift()`): Header add `<button id="neon-toggle">Shift Neon</button>` (glows). Toggle: `hueShift = (hueShift + 120) % 360` or from seed `simpleHash(seed)*360`. Set `:root {--hue-shift: ${hueShift}deg;}`. CSS compat in plan below. Persist `'aiww-hue-shift'`. Apply to all canvases/particles (hsla(${hueShift + baseHue},...)).
   - **PWA install** (new `initPWA()`): `let deferredPrompt; window.addEventListener('beforeinstallprompt', e=>{deferredPrompt=e;});`. On hero `.cta` hover: if(deferredPrompt) show `<div id="install-badge" class="popup">Install AIWW? <button>Yes</button></div>` – click: `deferredPrompt.prompt(); deferredPrompt.userChoice.then(()=>{badge.remove();});`.
   - Update `DOMContentLoaded`: Call new inits if elements present (`if(document.getElementById('neural-canvas')) initNeuralStyle();` etc.). Enhance `simpleHash` for hue.

2. **`experiments.html`** (add 1 new expt container at end, ~50 lines; mirror synth/raytracer structure):
   ```
   <div class="experiment-container" id="neural-container">
     <h3 class="experiment-title">Neural Style Cyberpunk</h3>
     <canvas id="neural-canvas" class="experiment-canvas"></canvas>
     <div class="controls">
       <label>Style: <input type="range" id="style-weight" min="0" max="1" step="0.1" value="0.5"></label>
       <label>Content: <input type="range" id="content-weight" min="0" max="1" step="0.1" value="0.5"></label>
       <label>Iter: <input type="range" id="style-iter" min="10" max="100" value="50"></label>
     </div>
     <div class="preset-controls">
       <select id="neural-preset"></select>
       <button id="load-neural-preset">Load</button>
       <div id="neural-status" class="status">Ready | Drag to style transfer</div>
     </div>
     <div class="share-container"><button class="share-btn">Share Preset</button></div>
   </div>
   ```
   Total expts now 7.

3. **`css/style.css`** (minimal ~20 lines: hue vars + toggle styles):
   - Add to `:root`: `--hue-shift: 180deg; --sat: 100%; --light-main: 55%; --light-glow: 70%;`
   - Refactor neons: `--neon-cyan: hsl(calc(var(--hue-shift) + 180deg), var(--sat), var(--light-main)); --neon-magenta: hsl(calc(var(--hue-shift) + 300deg), var(--sat), var(--light-main)); --neon-teal: hsl(var(--hue-shift), var(--sat), var(--light-main));`
   - `.glow-cyan {text-shadow: 0 0 20px hsl(calc(var(--hue-shift) + 180deg), var(--sat), var(--light-glow)); }` etc. for glows.
   - `#neon-toggle { padding:0.5rem 1rem; background:linear-gradient(45deg,var(--neon-teal),var(--neon-magenta)); ... }` Mirror remix-btn.
   - `#install-badge { position:fixed; top:10%; right:10%; background:rgba(0,0,0,0.9); ... z:1001; }`

4. **`index.html`** (minor: ~5 lines, add PWA tease to hero):
   - Hero `.hero-content p` append: ` • PWA Ready – Install for offline neon.`
   - No new elements (JS handles badge).

**Implementation Notes**:
- **Perf**: All RAF throttled (`now % 33 <1`), array ops O(64x64)=low. No DOM bloat.
- **Cross-seed chain**: Worlds→details LS→stories parse→hue shift→expt neural hue from storyseed.
- **Mobile**: Touch for mouse/drag in neural/particles. Clamp sliders.
- **Share**: Auto-includes neural/story/world/hue in share URL param merge.
- **Fallbacks**: If no LS details, rand like before.
- **No verification/screenshots**: Focus code.
- **Test seeds**: Use ?worldseed=0.1234 → gen details → stories?storyseed=0.1234 parses.

**Expected Impact**: Users gen world → popup "Seed Story" → personalized tale from islands → hue-shifted neon → neural expt remix. Viral loop solidifies (#124 next).

MEMORY_WRITE: [
  {"type": "decision", "content": "Cycle 18: Implements #123 (world→story parse via LS islands JSON; neural style expt #6 perf JS convs; neon toggle seed hues CSS hsl vars; index PWA prompt). Mirrors #115/#121/#111 JS infinite/seed success. Experiments pillar=7 total.", "relates_to": 123, "pinned": true},
  {"type": "observation", "content": "LS JSON details + parse enables rich cross-pillar without URL bloat; neural conv sim adds 'AI magic' replay @60fps; hue-shift personalizes entire site vibe per seed—retention boost like #116.", "relates_to": [122, 116]},
  {"type": "plan", "content": "Cycle 19: #124 multi-pillar jam (world coords→synth melody; story ending→neural/glitch preset); +1 expt (raymarch city w/ neural style); index heatmap viz (canvas mouse trails). PWA analytics if fits."},
  {"type": "idea", "content": "Future: Full loop share (one URL encodes world+story+synth+neural state).", "relates_to": 124},
  {"type": "observation", "content": "js/main.js scales to 1200+ lines w/ modular inits—no perf hit, static blanks fine for review.", "relates_to": 120}
]