reflexive 0.1.0

package/story-game-web.js

@@ -0,0 +1,1030 @@
+// Web-based AI Story Game with Reflexive
+// Same dynamic engine, but playable in a browser
+
+import http from 'http';
+import { makeReflexive } from './src/reflexive.js';
+
+// Story Configuration - CHANGE THIS TO CHANGE THE ENTIRE GAME
+const STORY_CONFIG = {
+  genre: 'comedy adventure',
+  theme: 'a hapless lounge lizard trying to find love and fortune in the big city',
+  tone: 'humorous, playful, cheeky with clever wordplay and puns',
+  craftingGuidelines: [
+    'Use witty observations and self-deprecating humor',
+    'Include double entendres and playful innuendo (keep it PG-13)',
+    'Make situations comedically awkward and embarrassing',
+    'Add unexpected punchlines and comedic timing to descriptions'
+  ],
+  lengthControl: {
+    enabled: true,
+    showDebug: true,
+    qualityThresholds: {
+      excellent: 0.8,
+      good: 0.5,
+      poor: 0.3
+    },
+    targetLengths: {
+      excellent: '12-15 scenes',
+      good: '6-8 scenes',
+      poor: '3-4 scenes'
+    }
+  }
+};
+
+// Initialize Reflexive
+const reflexive = makeReflexive({
+  port: 3097,  // Different port from CLI version
+  title: `Reflexive ${STORY_CONFIG.genre.charAt(0).toUpperCase() + STORY_CONFIG.genre.slice(1)} Game (Web)`,
+  systemPrompt: `You are a creative storytelling AI for an interactive ${STORY_CONFIG.genre} game.
+
+Theme: ${STORY_CONFIG.theme}
+Tone: ${STORY_CONFIG.tone}
+
+Crafting Guidelines:
+${STORY_CONFIG.craftingGuidelines.map((g, i) => `${i + 1}. ${g}`).join('\n')}
+
+Your role is to:
+1. Generate atmospheric descriptions that enhance the narrative and match the tone
+2. Create dynamic consequences based on player choices that deepen the experience
+3. Suggest creative new choice options that fit the theme and genre
+4. Evolve the story based on player's history and established narrative arcs
+5. Maintain consistency with the emotional tone and thematic elements
+
+Always be concise (1-3 sentences) and match the specified tone perfectly.`
+});
+
+// Import the story classes (same as CLI version)
+class StoryGameBuilder {
+  constructor() {
+    this.nodes = new Map();
+    this.arcs = new Map();
+    this.globalState = {};
+    this.metadata = {};
+  }
+
+  setMetadata(data) {
+    this.metadata = { ...this.metadata, ...data };
+    return this;
+  }
+
+  addNode(id, data) {
+    this.nodes.set(id, {
+      id,
+      text: data.text || '',
+      choices: data.choices || [],
+      onEnter: data.onEnter || null,
+      onExit: data.onExit || null,
+      arcTags: data.arcTags || [],
+      ...data
+    });
+    return this;
+  }
+
+  addArc(id, data) {
+    this.arcs.set(id, {
+      id,
+      name: data.name || id,
+      weight: data.weight || 1.0,
+      description: data.description || '',
+      ...data
+    });
+    return this;
+  }
+
+  addChoice(nodeId, choice) {
+    const node = this.nodes.get(nodeId);
+    if (!node) throw new Error(`Node ${nodeId} not found`);
+
+    node.choices.push({
+      text: choice.text,
+      target: choice.target,
+      weight: choice.weight || 1.0,
+      weightFormula: choice.weightFormula || null,
+      condition: choice.condition || null,
+      effects: choice.effects || {},
+      arcModifiers: choice.arcModifiers || {}
+    });
+    return this;
+  }
+
+  getGame() {
+    return {
+      nodes: Array.from(this.nodes.values()),
+      arcs: Array.from(this.arcs.values()),
+      globalState: this.globalState,
+      metadata: this.metadata
+    };
+  }
+}
+
+class AIStorySimulator {
+  constructor(game, storyConfig) {
+    this.nodes = new Map(game.nodes.map(n => [n.id, n]));
+    this.arcs = new Map(game.arcs.map(a => [a.id, a]));
+    this.state = { ...game.globalState };
+    this.metadata = game.metadata || {};
+    this.storyConfig = storyConfig;
+    this.currentNode = null;
+    this.history = [];
+    this.arcWeights = new Map();
+    this.storyMemory = [];
+
+    this.qualityMetrics = {
+      sceneCount: 0,
+      engagementScore: 0.5,
+      arcProgression: 0,
+      lastEnhancementLength: 0
+    };
+
+    this.arcs.forEach((arc, id) => {
+      this.arcWeights.set(id, arc.weight);
+    });
+
+    reflexive.setState('storyState', this.state);
+    reflexive.setState('currentNode', null);
+    reflexive.setState('storyConfig', this.storyConfig);
+  }
+
+  calculateStoryQuality() {
+    const dominantArcWeight = Math.max(...Array.from(this.arcWeights.values()));
+    const arcDiversity = this.arcWeights.size > 0 ?
+      new Set(Array.from(this.arcWeights.values()).map(v => Math.floor(v))).size / this.arcWeights.size : 0.5;
+
+    const quality = (
+      (dominantArcWeight / 10) * 0.4 +
+      this.qualityMetrics.engagementScore * 0.3 +
+      arcDiversity * 0.3
+    );
+
+    return Math.min(1.0, Math.max(0, quality));
+  }
+
+  getPacingGuidance() {
+    if (!this.storyConfig.lengthControl?.enabled) {
+      return 'normal pacing';
+    }
+
+    const quality = this.calculateStoryQuality();
+    const thresholds = this.storyConfig.lengthControl.qualityThresholds;
+    const sceneCount = this.qualityMetrics.sceneCount;
+
+    if (quality >= thresholds.excellent) {
+      return `Story is excellent (quality: ${quality.toFixed(2)}). Extend the narrative with rich details and new plot threads. Target: ${this.storyConfig.lengthControl.targetLengths.excellent}. Currently at scene ${sceneCount}.`;
+    } else if (quality >= thresholds.good) {
+      return `Story is good (quality: ${quality.toFixed(2)}). Maintain steady pacing with meaningful progression. Target: ${this.storyConfig.lengthControl.targetLengths.good}. Currently at scene ${sceneCount}.`;
+    } else {
+      return `Story quality is low (${quality.toFixed(2)}). Begin wrapping up toward a satisfying conclusion. Target: ${this.storyConfig.lengthControl.targetLengths.poor}. Currently at scene ${sceneCount}.`;
+    }
+  }
+
+  async getEnhancedNodeText(nodeId) {
+    const node = this.nodes.get(nodeId);
+    if (!node) return '';
+
+    this.qualityMetrics.sceneCount++;
+
+    const recentJourney = this.history.slice(-3).map(h => h.nodeId).join(' → ');
+    const dominantArc = this.getDominantArc();
+    const arcDescription = this.arcs.get(dominantArc)?.description || dominantArc;
+    const pacingGuidance = this.getPacingGuidance();
+
+    const prompt = `Scene: "${node.text}"
+Recent journey: ${recentJourney || 'Beginning'}
+Dominant narrative arc: ${arcDescription}
+Player state: ${JSON.stringify(this.state)}
+
+PACING GUIDANCE: ${pacingGuidance}
+
+Add ONE atmospheric sentence that enhances this scene in the style of ${this.storyConfig.genre}. Match the tone: ${this.storyConfig.tone}.
+${pacingGuidance.includes('Extend') ? 'Make it rich and detailed to build narrative depth.' : ''}
+${pacingGuidance.includes('wrapping up') ? 'Keep it concise and hint at resolution approaching.' : ''}
+Return ONLY the enhancement sentence, nothing else.`;
+
+    try {
+      const enhancement = await reflexive.chat(prompt);
+      this.qualityMetrics.lastEnhancementLength = enhancement.length;
+
+      this.qualityMetrics.engagementScore =
+        (this.qualityMetrics.engagementScore * 0.7) +
+        (Math.min(1.0, enhancement.length / 150) * 0.3);
+
+      this.storyMemory.push({ type: 'enhancement', node: nodeId, text: enhancement });
+      return `${node.text}\n\n${enhancement.trim()}`;
+    } catch (error) {
+      console.error('AI enhancement failed:', error.message);
+      return node.text;
+    }
+  }
+
+  async getChoiceConsequence(choice, choiceIndex) {
+    const prompt = `The player chose: "${choice.text}"
+Genre: ${this.storyConfig.genre}
+Current state: ${JSON.stringify(this.state)}
+Arc weights: ${JSON.stringify(Object.fromEntries(this.arcWeights))}
+
+Generate a brief (1 sentence) consequence that describes what happens. Match the tone: ${this.storyConfig.tone}.
+Return ONLY the consequence text.`;
+
+    try {
+      const consequence = await reflexive.chat(prompt);
+      return consequence.trim();
+    } catch (error) {
+      return "Your choice sets events in motion.";
+    }
+  }
+
+  async generateBonusChoice(nodeId) {
+    const node = this.nodes.get(nodeId);
+    const dominantArc = this.getDominantArc();
+    const arcDescription = this.arcs.get(dominantArc)?.description || dominantArc;
+    const pacingGuidance = this.getPacingGuidance();
+    const quality = this.calculateStoryQuality();
+
+    const shouldGenerateBonus = quality > 0.4;
+    if (!shouldGenerateBonus) return null;
+
+    const prompt = `Scene: "${node.text}"
+Genre: ${this.storyConfig.genre}
+Dominant arc: ${arcDescription}
+Recent events: ${this.history.slice(-2).map(h => h.nodeId).join(', ')}
+
+PACING GUIDANCE: ${pacingGuidance}
+
+Suggest ONE creative choice (4-7 words) that fits this moment and matches the ${this.storyConfig.genre} theme.
+${pacingGuidance.includes('Extend') ? 'Suggest a choice that opens new story possibilities.' : ''}
+${pacingGuidance.includes('wrapping up') ? 'Suggest a choice that moves toward resolution.' : ''}
+Return ONLY the choice text, nothing else.`;
+
+    try {
+      const bonusChoice = await reflexive.chat(prompt);
+      return bonusChoice.trim();
+    } catch (error) {
+      return null;
+    }
+  }
+
+  getDominantArc() {
+    let maxWeight = 0;
+    let dominant = 'neutral';
+
+    for (const [arc, weight] of this.arcWeights) {
+      if (weight > maxWeight) {
+        maxWeight = weight;
+        dominant = arc;
+      }
+    }
+    return dominant;
+  }
+
+  start(startNodeId) {
+    this.currentNode = startNodeId;
+    this.enterNode(startNodeId);
+    return this.getCurrentState();
+  }
+
+  enterNode(nodeId) {
+    const node = this.nodes.get(nodeId);
+    if (!node) throw new Error(`Node ${nodeId} not found`);
+
+    this.history.push({
+      nodeId,
+      timestamp: Date.now(),
+      state: { ...this.state }
+    });
+
+    if (node.onEnter) {
+      node.onEnter(this.state, this);
+    }
+
+    node.arcTags.forEach(arcId => {
+      const current = this.arcWeights.get(arcId) || 1.0;
+      this.arcWeights.set(arcId, current * 1.2);
+    });
+
+    reflexive.setState('currentNode', nodeId);
+    reflexive.setState('storyState', this.state);
+    reflexive.setState('history', this.history.map(h => h.nodeId));
+  }
+
+  getAvailableChoices() {
+    const node = this.nodes.get(this.currentNode);
+    if (!node) return [];
+
+    return node.choices
+      .filter(choice => {
+        if (choice.condition) {
+          return choice.condition(this.state, this);
+        }
+        return true;
+      })
+      .map(choice => {
+        let weight = choice.weight;
+
+        if (choice.weightFormula) {
+          weight = choice.weightFormula(this.state, this.arcWeights, this);
+        }
+
+        Object.keys(choice.arcModifiers).forEach(arcId => {
+          const arcWeight = this.arcWeights.get(arcId) || 1.0;
+          weight *= arcWeight * choice.arcModifiers[arcId];
+        });
+
+        return {
+          ...choice,
+          calculatedWeight: weight
+        };
+      });
+  }
+
+  async makeChoice(choiceIndex) {
+    const choices = this.getAvailableChoices();
+    if (choiceIndex >= choices.length) {
+      throw new Error('Invalid choice index');
+    }
+
+    const choice = choices[choiceIndex];
+
+    const consequence = await this.getChoiceConsequence(choice, choiceIndex);
+
+    const currentNode = this.nodes.get(this.currentNode);
+    if (currentNode.onExit) {
+      currentNode.onExit(this.state, this);
+    }
+
+    Object.assign(this.state, choice.effects);
+
+    Object.keys(choice.arcModifiers).forEach(arcId => {
+      const current = this.arcWeights.get(arcId) || 1.0;
+      const modifier = choice.arcModifiers[arcId];
+      this.arcWeights.set(arcId, current * modifier);
+    });
+
+    this.currentNode = choice.target;
+    this.enterNode(choice.target);
+
+    return { consequence, newState: this.getCurrentState() };
+  }
+
+  getCurrentState() {
+    const node = this.nodes.get(this.currentNode);
+    const choices = this.getAvailableChoices();
+
+    return {
+      nodeId: this.currentNode,
+      text: node.text,
+      choices: choices.map((c, i) => ({
+        index: i,
+        text: c.text,
+        weight: c.calculatedWeight
+      })),
+      state: { ...this.state },
+      arcWeights: Object.fromEntries(this.arcWeights),
+      history: this.history.length,
+      quality: this.calculateStoryQuality(),
+      qualityMetrics: { ...this.qualityMetrics }
+    };
+  }
+}
+
+// Create story from config (same as CLI version)
+function createStoryFromConfig(config) {
+  const builder = new StoryGameBuilder();
+
+  builder.setMetadata({
+    genre: config.genre,
+    theme: config.theme,
+    tone: config.tone
+  });
+
+  if (config.genre === 'comedy adventure') {
+    builder
+      .addArc('smooth', {
+        name: 'Smooth Operator',
+        weight: 1.0,
+        description: 'trying to be cool and suave (with mixed results)'
+      })
+      .addArc('awkward', {
+        name: 'Awkward Moments',
+        weight: 1.0,
+        description: 'stumbling through embarrassing social situations'
+      })
+      .addArc('lucky', {
+        name: 'Dumb Luck',
+        weight: 0.5,
+        description: 'succeeding through sheer coincidence and fortune'
+      });
+
+    builder
+      .addNode('start', {
+        text: 'You stand outside Club Polyester, the hottest disco in town. Your leisure suit is freshly pressed, your cologne is... aggressive. A bouncer with arms like tree trunks blocks the velvet rope.',
+        arcTags: []
+      })
+      .addNode('smooth_talk', {
+        text: 'You flash your "winning" smile and slip the bouncer a twenty. He looks at the bill, then at you, then bursts out laughing. "Kid, this is a Monopoly twenty." But he lets you in anyway out of pity.',
+        arcTags: ['awkward'],
+        onEnter: (state) => { state.confidence = (state.confidence || 50) - 10; state.money = (state.money || 100) - 0; }
+      })
+      .addNode('sneak_in', {
+        text: 'You spot a delivery entrance and slip in behind a crate of disco balls. Unfortunately, you trip and send them rolling across the dance floor. Everyone applauds, thinking it\'s part of the show.',
+        arcTags: ['lucky'],
+        onEnter: (state) => { state.confidence = (state.confidence || 50) + 20; }
+      })
+      .addNode('bar', {
+        text: 'At the bar, you order "something sophisticated" and the bartender hands you a glass of chocolate milk with a tiny umbrella. Next to you sits an attractive stranger reading "The Art of Conversation."',
+        arcTags: []
+      })
+      .addNode('pickup_line', {
+        text: 'You deploy your best pickup line: "Are you a parking ticket? Because you\'ve got FINE written all over you." They groan audibly but can\'t help smiling. "Points for commitment to the bit," they say.',
+        arcTags: ['awkward'],
+        onEnter: (state) => { state.charisma = (state.charisma || 0) + 5; state.reputation = 'endearing_disaster'; }
+      })
+      .addNode('be_genuine', {
+        text: 'You nervously admit you have no idea what you\'re doing and just wanted to meet someone interesting. They laugh warmly. "Finally, some honesty in this place. I\'m Alex. Want to get out of here?"',
+        arcTags: ['smooth'],
+        onEnter: (state) => { state.connection = true; state.confidence = (state.confidence || 50) + 30; }
+      })
+      .addNode('awkward_ending', {
+        text: 'You both leave the club, but in your excitement you walk into a glass door. Alex helps you up, still laughing. "You know what? That was actually kind of adorable." Score!',
+        arcTags: ['awkward']
+      })
+      .addNode('smooth_ending', {
+        text: 'You walk out together under the neon lights. For once, everything went right. Well, mostly right. Okay, you tripped once. But Alex caught you, and that counts for something.',
+        arcTags: ['smooth']
+      })
+      .addNode('lucky_ending', {
+        text: 'As you leave together, a street photographer mistakes you two for models and takes your picture. It ends up on the cover of "Awkward Romance Monthly." You frame it.',
+        arcTags: ['lucky']
+      });
+
+    builder
+      .addChoice('start', {
+        text: 'Try to smooth talk the bouncer',
+        target: 'smooth_talk',
+        arcModifiers: { awkward: 1.8 }
+      })
+      .addChoice('start', {
+        text: 'Find another way in',
+        target: 'sneak_in',
+        arcModifiers: { lucky: 2.0 }
+      });
+
+    builder
+      .addChoice('smooth_talk', {
+        text: 'Head to the bar',
+        target: 'bar'
+      })
+      .addChoice('sneak_in', {
+        text: 'Head to the bar',
+        target: 'bar'
+      });
+
+    builder
+      .addChoice('bar', {
+        text: 'Use your best pickup line',
+        target: 'pickup_line',
+        arcModifiers: { awkward: 2.5 },
+        weightFormula: (state, arcWeights) => (arcWeights.get('awkward') || 1.0)
+      })
+      .addChoice('bar', {
+        text: 'Just be yourself',
+        target: 'be_genuine',
+        arcModifiers: { smooth: 2.5 },
+        weightFormula: (state, arcWeights) => (arcWeights.get('smooth') || 1.0)
+      });
+
+    builder
+      .addChoice('pickup_line', {
+        text: 'Suggest getting some fresh air',
+        target: 'awkward_ending',
+        arcModifiers: { awkward: 2.0 }
+      })
+      .addChoice('pickup_line', {
+        text: 'Ask them to teach you to be cool',
+        target: 'lucky_ending',
+        arcModifiers: { lucky: 3.0 }
+      })
+      .addChoice('be_genuine', {
+        text: 'Leave together',
+        target: 'smooth_ending',
+        arcModifiers: { smooth: 2.0 }
+      });
+  }
+
+  return builder.getGame();
+}
+
+// Web server logic
+const activeSessions = new Map();
+
+function generateSessionId() {
+  return Math.random().toString(36).substring(2, 15);
+}
+
+async function handleRequest(req, res) {
+  // Enable CORS
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
+  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
+
+  if (req.method === 'OPTIONS') {
+    res.writeHead(200);
+    res.end();
+    return;
+  }
+
+  const url = new URL(req.url, `http://${req.headers.host}`);
+
+  // Serve the HTML game interface
+  if (url.pathname === '/' || url.pathname === '/game') {
+    res.writeHead(200, { 'Content-Type': 'text/html' });
+    res.end(getHTMLInterface());
+    return;
+  }
+
+  // API: Start new game
+  if (url.pathname === '/api/start' && req.method === 'POST') {
+    const sessionId = generateSessionId();
+    const game = createStoryFromConfig(STORY_CONFIG);
+    const simulator = new AIStorySimulator(game, STORY_CONFIG);
+    simulator.start('start');
+
+    const enhancedText = await simulator.getEnhancedNodeText('start');
+    const state = simulator.getCurrentState();
+
+    // Generate bonus choice
+    const bonusChoice = Math.random() > 0.7 ? await simulator.generateBonusChoice('start') : null;
+
+    activeSessions.set(sessionId, simulator);
+
+    res.writeHead(200, { 'Content-Type': 'application/json' });
+    res.end(JSON.stringify({
+      sessionId,
+      state,
+      enhancedText,
+      bonusChoice,
+      config: STORY_CONFIG
+    }));
+    return;
+  }
+
+  // API: Make choice
+  if (url.pathname === '/api/choice' && req.method === 'POST') {
+    let body = '';
+    req.on('data', chunk => { body += chunk.toString(); });
+    req.on('end', async () => {
+      try {
+        const { sessionId, choiceIndex } = JSON.parse(body);
+        const simulator = activeSessions.get(sessionId);
+
+        if (!simulator) {
+          res.writeHead(404, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ error: 'Session not found' }));
+          return;
+        }
+
+        const result = await simulator.makeChoice(choiceIndex);
+        const enhancedText = await simulator.getEnhancedNodeText(result.newState.nodeId);
+        const bonusChoice = Math.random() > 0.7 ? await simulator.generateBonusChoice(result.newState.nodeId) : null;
+
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({
+          ...result,
+          enhancedText,
+          bonusChoice
+        }));
+      } catch (error) {
+        res.writeHead(500, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: error.message }));
+      }
+    });
+    return;
+  }
+
+  // 404
+  res.writeHead(404, { 'Content-Type': 'text/plain' });
+  res.end('Not Found');
+}
+
+function getHTMLInterface() {
+  const emoji = STORY_CONFIG.genre === 'horror' ? '🕯️' : STORY_CONFIG.genre === 'comedy adventure' ? '😎' : '🎮';
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${emoji} Reflexive Story Game</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    body {
+      font-family: 'Courier New', monospace;
+      background: linear-gradient(135deg, #1e1e2e 0%, #2d2d44 100%);
+      color: #e0e0e0;
+      line-height: 1.6;
+      min-height: 100vh;
+      padding: 20px;
+    }
+
+    .container {
+      max-width: 900px;
+      margin: 0 auto;
+    }
+
+    header {
+      text-align: center;
+      padding: 30px 0;
+      border-bottom: 2px solid #444;
+      margin-bottom: 30px;
+    }
+
+    h1 {
+      font-size: 2.5em;
+      color: #ffd700;
+      text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+      margin-bottom: 10px;
+    }
+
+    .theme {
+      color: #aaa;
+      font-style: italic;
+      font-size: 1.1em;
+    }
+
+    .info-box {
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid #555;
+      border-radius: 8px;
+      padding: 15px;
+      margin-bottom: 20px;
+    }
+
+    .info-box h3 {
+      color: #ffd700;
+      margin-bottom: 10px;
+      font-size: 1.1em;
+    }
+
+    .info-box ul {
+      list-style: none;
+      padding-left: 20px;
+    }
+
+    .info-box li:before {
+      content: "• ";
+      color: #ffd700;
+    }
+
+    #game-area {
+      background: rgba(0, 0, 0, 0.3);
+      border: 2px solid #555;
+      border-radius: 12px;
+      padding: 30px;
+      margin-bottom: 20px;
+      min-height: 400px;
+    }
+
+    .scene-header {
+      color: #ffd700;
+      font-size: 1.3em;
+      margin-bottom: 15px;
+      padding-bottom: 10px;
+      border-bottom: 1px dashed #555;
+    }
+
+    .scene-text {
+      font-size: 1.1em;
+      line-height: 1.8;
+      margin-bottom: 25px;
+      white-space: pre-wrap;
+    }
+
+    .consequence {
+      background: rgba(255, 215, 0, 0.1);
+      border-left: 3px solid #ffd700;
+      padding: 15px;
+      margin-bottom: 20px;
+      font-style: italic;
+      color: #ffd700;
+    }
+
+    .choices {
+      margin-top: 25px;
+    }
+
+    .choice-button {
+      display: block;
+      width: 100%;
+      background: linear-gradient(135deg, #3a3a5c 0%, #2d2d44 100%);
+      border: 2px solid #555;
+      color: #e0e0e0;
+      padding: 15px 20px;
+      margin-bottom: 12px;
+      border-radius: 8px;
+      cursor: pointer;
+      font-family: 'Courier New', monospace;
+      font-size: 1em;
+      text-align: left;
+      transition: all 0.3s ease;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .choice-button:hover {
+      background: linear-gradient(135deg, #4a4a6c 0%, #3d3d54 100%);
+      border-color: #ffd700;
+      transform: translateX(5px);
+    }
+
+    .choice-button:active {
+      transform: scale(0.98);
+    }
+
+    .choice-button.bonus {
+      border-color: #ffd700;
+      background: linear-gradient(135deg, #4a4a2c 0%, #3d3d24 100%);
+    }
+
+    .choice-button .weight-bar {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      height: 3px;
+      background: #ffd700;
+      transition: width 0.3s ease;
+    }
+
+    .choice-text {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .choice-weight {
+      font-size: 0.9em;
+      color: #888;
+    }
+
+    .metrics {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 15px;
+      margin-top: 20px;
+    }
+
+    .metric-card {
+      background: rgba(0, 0, 0, 0.3);
+      border: 1px solid #555;
+      border-radius: 8px;
+      padding: 15px;
+    }
+
+    .metric-card h4 {
+      color: #ffd700;
+      font-size: 0.9em;
+      margin-bottom: 8px;
+    }
+
+    .metric-value {
+      font-size: 1.3em;
+      color: #e0e0e0;
+    }
+
+    .quality-bar {
+      width: 100%;
+      height: 8px;
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 4px;
+      overflow: hidden;
+      margin-top: 8px;
+    }
+
+    .quality-fill {
+      height: 100%;
+      background: linear-gradient(90deg, #ff4444, #ffaa00, #44ff44);
+      transition: width 0.5s ease;
+    }
+
+    .loading {
+      text-align: center;
+      padding: 40px;
+      color: #ffd700;
+    }
+
+    .spinner {
+      border: 4px solid rgba(255, 215, 0, 0.1);
+      border-top: 4px solid #ffd700;
+      border-radius: 50%;
+      width: 40px;
+      height: 40px;
+      animation: spin 1s linear infinite;
+      margin: 20px auto;
+    }
+
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+
+    .btn-new-game {
+      display: inline-block;
+      background: #ffd700;
+      color: #1e1e2e;
+      padding: 12px 30px;
+      border-radius: 8px;
+      border: none;
+      font-family: 'Courier New', monospace;
+      font-size: 1.1em;
+      cursor: pointer;
+      font-weight: bold;
+      transition: all 0.3s ease;
+    }
+
+    .btn-new-game:hover {
+      background: #ffed4e;
+      transform: scale(1.05);
+    }
+
+    .ending {
+      background: rgba(255, 215, 0, 0.1);
+      border: 2px solid #ffd700;
+      border-radius: 12px;
+      padding: 30px;
+      text-align: center;
+      margin-top: 20px;
+    }
+
+    .ending h2 {
+      color: #ffd700;
+      font-size: 2em;
+      margin-bottom: 20px;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header>
+      <h1>${emoji} REFLEXIVE AI STORY GAME ${emoji}</h1>
+      <p class="theme">${STORY_CONFIG.theme}</p>
+    </header>
+
+    <div class="info-box" id="length-control-info">
+      <h3>⚡ Dynamic Length Control</h3>
+      <p>The AI adapts story length based on quality:</p>
+      <ul>
+        <li>Excellent stories → Extended narrative (${STORY_CONFIG.lengthControl.targetLengths.excellent})</li>
+        <li>Good stories → Normal pacing (${STORY_CONFIG.lengthControl.targetLengths.good})</li>
+        <li>Weak stories → Graceful wrap-up (${STORY_CONFIG.lengthControl.targetLengths.poor})</li>
+      </ul>
+    </div>
+
+    <div id="game-area">
+      <div class="loading">
+        <div class="spinner"></div>
+        <p>Starting your adventure...</p>
+      </div>
+    </div>
+
+    <div class="metrics" id="metrics" style="display: none;"></div>
+
+    <div style="text-align: center; margin-top: 20px;">
+      <button class="btn-new-game" onclick="startNewGame()">🔄 New Game</button>
+    </div>
+  </div>
+
+  <script>
+    let sessionId = null;
+    let currentState = null;
+
+    async function startNewGame() {
+      document.getElementById('game-area').innerHTML = '<div class="loading"><div class="spinner"></div><p>Starting your adventure...</p></div>';
+      document.getElementById('metrics').style.display = 'none';
+
+      const response = await fetch('/api/start', { method: 'POST' });
+      const data = await response.json();
+
+      sessionId = data.sessionId;
+      currentState = data.state;
+
+      renderScene(data.enhancedText, data.state, data.bonusChoice);
+    }
+
+    function renderScene(enhancedText, state, bonusChoice, consequence = null) {
+      const gameArea = document.getElementById('game-area');
+
+      let html = \`<div class="scene-header">📍 \${state.nodeId.toUpperCase().replace(/_/g, ' ')}</div>\`;
+
+      if (consequence) {
+        html += \`<div class="consequence">💫 \${consequence}</div>\`;
+      }
+
+      html += \`<div class="scene-text">\${enhancedText}</div>\`;
+
+      if (state.choices && state.choices.length > 0) {
+        html += '<div class="choices">';
+        state.choices.forEach((choice, i) => {
+          const weightPercent = Math.min(100, (choice.weight / 15) * 100);
+          html += \`
+            <button class="choice-button" onclick="makeChoice(\${i})">
+              <div class="choice-text">
+                <span>[\${i + 1}] \${choice.text}</span>
+                <span class="choice-weight">\${choice.weight.toFixed(2)}</span>
+              </div>
+              <div class="weight-bar" style="width: \${weightPercent}%"></div>
+            </button>
+          \`;
+        });
+
+        if (bonusChoice) {
+          html += \`
+            <button class="choice-button bonus">
+              <div class="choice-text">
+                <span>[✨] \${bonusChoice} (AI-generated)</span>
+              </div>
+            </button>
+          \`;
+        }
+
+        html += '</div>';
+      } else {
+        html += \`
+          <div class="ending">
+            <h2>🏁 STORY COMPLETE!</h2>
+            <p>\${enhancedText}</p>
+          </div>
+        \`;
+      }
+
+      gameArea.innerHTML = html;
+
+      // Update metrics
+      if (state.qualityMetrics) {
+        renderMetrics(state);
+      }
+    }
+
+    function renderMetrics(state) {
+      const metricsDiv = document.getElementById('metrics');
+      metricsDiv.style.display = 'grid';
+
+      const quality = state.quality * 100;
+      const engagement = state.qualityMetrics.engagementScore * 100;
+
+      metricsDiv.innerHTML = \`
+        <div class="metric-card">
+          <h4>📊 State</h4>
+          <div class="metric-value">\${JSON.stringify(state.state).substring(0, 50)}...</div>
+        </div>
+        <div class="metric-card">
+          <h4>📈 Quality</h4>
+          <div class="metric-value">\${quality.toFixed(1)}%</div>
+          <div class="quality-bar">
+            <div class="quality-fill" style="width: \${quality}%"></div>
+          </div>
+        </div>
+        <div class="metric-card">
+          <h4>🎯 Scene</h4>
+          <div class="metric-value">\${state.qualityMetrics.sceneCount}</div>
+        </div>
+        <div class="metric-card">
+          <h4>💫 Engagement</h4>
+          <div class="metric-value">\${engagement.toFixed(1)}%</div>
+        </div>
+      \`;
+    }
+
+    async function makeChoice(choiceIndex) {
+      document.getElementById('game-area').innerHTML = '<div class="loading"><div class="spinner"></div><p>Processing your choice...</p></div>';
+
+      const response = await fetch('/api/choice', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ sessionId, choiceIndex })
+      });
+
+      const data = await response.json();
+      currentState = data.newState;
+
+      renderScene(data.enhancedText, data.newState, data.bonusChoice, data.consequence);
+    }
+
+    // Start game on load
+    window.onload = startNewGame;
+  </script>
+</body>
+</html>`;
+}
+
+// Start the game server on a different port from Reflexive
+const GAME_PORT = 3100;
+const server = http.createServer(handleRequest);
+
+server.listen(GAME_PORT, () => {
+  console.log(`\n${STORY_CONFIG.genre === 'horror' ? '🕯️' : STORY_CONFIG.genre === 'comedy adventure' ? '😎' : '🎮'} Reflexive Story Game - Web Version\n`);
+  console.log(`🌐 Game URL: http://localhost:${GAME_PORT}/game`);
+  console.log(`🌐 Game Root: http://localhost:${GAME_PORT}/`);
+  console.log(`📊 Reflexive Dashboard: http://localhost:3097/reflexive`);
+  console.log(`\n⚡ Dynamic Length Control: ${STORY_CONFIG.lengthControl.enabled ? 'ENABLED' : 'DISABLED'}`);
+  console.log(`📝 Genre: ${STORY_CONFIG.genre}`);
+  console.log(`🎭 Theme: ${STORY_CONFIG.theme}\n`);
+});