AI Dungeon Master - Procedural Adventure - xelsed.ai

function getApiKey(){return atob(encoded).split('').map(c=>String.fromCharCode(c.charCodeAt(0)^key)).join('');}

function setup() {
  // Create p5.js canvas and place it within the game-container
  const gameContainer = select('#game-container');
  let canvasWidth = min(windowWidth * 0.9, 1400 - 30); // 30px for padding
  let canvasHeight = min(windowHeight * 0.5, 900 * 0.5);
  let canvas = createCanvas(canvasWidth, canvasHeight);
  canvas.parent('game-container');

  // Get DOM elements
  healthBarDiv = select('#health-bar');
  healthTextSpan = select('#health-text');
  locationTextDiv = select('#location-text');
  narrativeTextP = select('#narrative-text');
  choicesContainer = select('#choices-container');
  inventoryListUl = select('#inventory-list');
  loadingOverlay = select('#loading-overlay');
  gameOverScreen = select('#game-over-screen');
  victoryScreen = select('#victory-screen');
  restartButton = select('#restart-button');

  restartButton.mousePressed(restartGame);

  // Initialize speech synthesis
  synth = window.speechSynthesis;
  synth.onvoiceschanged = () => {
    // Find a suitable voice, e.g., a male English voice
    voice = synth.getVoices().find(v => v.lang === 'en-US' && v.name.includes('Male')) || synth.getVoices().find(v => v.lang === 'en-US');
  };
  if (synth.getVoices().length > 0) { // If voices are already loaded
    voice = synth.getVoices().find(v => v.lang === 'en-US' && v.name.includes('Male')) || synth.getVoices().find(v => v.lang === 'en-US');
  }

  // Initial UI update and game start
  updateUI();
  startGame();
}

function draw() {
  drawScene();
}

function windowResized() {
  const gameContainer = select('#game-container');
  let canvasWidth = min(windowWidth * 0.9, gameContainer.width - 30);
  let canvasHeight = min(windowHeight * 0.5, gameContainer.height * 0.5);
  resizeCanvas(canvasWidth, canvasHeight);

  // Adjust UI element sizes/positions if needed
  // For this layout, p5play automatically handles canvas position,
  // and the CSS flexbox handles other elements.
  // We might need to manually adjust if elements were absolutely positioned.
}

async function startGame() {
  gameState = {
    health: 100,
    inventory: [],
    location: 'Unknown',
    storyHistory: [],
    currentScene: {
      setting: 'forest', // Default for initial draw
      timeOfDay: 'day',
      weather: 'clear',
      elements: []
    }
  };
  updateUI();
  gameOverScreen.style('display', 'none');
  victoryScreen.style('display', 'none');

  const promptMessage = 'Start a new fantasy adventure. The hero wakes up in an unknown place. Generate JSON response as described.';
  await callOpenAI(promptMessage);
}

async function handleChoice(choiceText) {
  if (gameState.gameOver || gameState.victory) return;

  // Add player's choice to story history
  gameState.storyHistory.push(`Player chose: "${choiceText}"`);

  // Construct OpenAI prompt
  const promptMessage = `You are a creative Dungeon Master. Current state: ${JSON.stringify(gameState)}. Story so far: ${gameState.storyHistory.join('\n')}. Player chose: "${choiceText}". Generate JSON response: {narrative:string (2-3 sentences describing what happens), scene:{setting:forest/cave/castle/village/river, timeOfDay:day/night/dawn/dusk, weather:clear/rain/fog/storm, elements:[tree/rock/chest/monster/npc/fire/water]}, choices:[{id:1,text:string},{id:2,text:string},{id:3,text:string}], healthChange:number, newItem:string or null, gameOver:boolean, victory:boolean}`;

  await callOpenAI(promptMessage);
}

async function callOpenAI(promptMessage) {
  loadingOverlay.addClass('visible'); // Show loading spinner
  try {
    const apiKey = getApiKey();
    const response = await fetch(OPENAI_API_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${apiKey}`
      },
      body: JSON.stringify({
        model: OPENAI_MODEL,
        messages: [
          {"role": "system", "content": "You are a creative Dungeon Master. Your responses must be valid JSON as described. Maintain narrative coherence and player agency. Ensure choices are distinct and move the story forward."},
          {"role": "user", "content": promptMessage}
        ],
        response_format: { "type": "json_object" }, // Crucial for JSON output
        temperature: OPENAI_TEMP,
        max_tokens: OPENAI_MAX_TOKENS
      })
    });

    if (!response.ok) {
      const errorData = await response.json();
      console.error('OpenAI API Error:', response.status, errorData);
      narrativeTextP.html(`An error occurred: ${errorData.error.message || response.statusText}. Please try again.`);
      speak('An error occurred. Please try again.');
      return;
    }

    const data = await response.json();
    const jsonString = data.choices[0].message.content;

    // Try to parse the JSON string, sometimes OpenAI might return extra text
    let parsedResponse;
    try {
      parsedResponse = JSON.parse(jsonString);
    } catch (parseError) {
      console.error('Failed to parse OpenAI JSON response:', parseError, jsonString);
      narrativeTextP.html('OpenAI returned invalid JSON. Trying again...');
      speak('The story is unclear. Trying again.');
      // Optionally, retry the OpenAI call
      await callOpenAI(promptMessage);
      return;
    }

    updateGame(parsedResponse);

  } catch (error) {
    console.error('Network or other error:', error);
    narrativeTextP.html(`A network error occurred: ${error.message}. Please check your connection.`);
    speak('A network error occurred. Please check your connection.');
  } finally {
    loadingOverlay.removeClass('visible'); // Hide loading spinner
  }
}

function updateGame(response) {
  // Update health
  gameState.health = constrain(gameState.health + response.healthChange, 0, MAX_HEALTH);

  // Update location and scene
  gameState.location = response.scene.setting.charAt(0).toUpperCase() + response.scene.setting.slice(1);
  gameState.currentScene = response.scene;

  // Add narrative to history
  gameState.storyHistory.push(response.narrative);

  // Handle new item
  if (response.newItem && !gameState.inventory.includes(response.newItem)) {
    gameState.inventory.push(response.newItem);
    narrativeTextP.html(`${response.narrative}<br><br>You found a ${response.newItem}!`);
    speak(`${response.narrative}. You found a ${response.newItem}!`);
  } else {
    narrativeTextP.html(response.narrative);
    speak(response.narrative);
  }

  updateUI(response.choices);

  // Check for game over or victory
  if (gameState.health <= 0 || response.gameOver) {
    gameState.gameOver = true;
    speak('Game Over!');
    gameOverScreen.style('display', 'flex');
  } else if (response.victory) {
    gameState.victory = true;
    speak('You Win!');
    victoryScreen.style('display', 'flex');
  }
}

function updateUI(choices = []) {
  // Update health bar
  let healthPercentage = (gameState.health / MAX_HEALTH) * 100;
  healthBarDiv.style('--health-percentage', `${healthPercentage}%`);
  healthTextSpan.html(`${gameState.health}%`);

  // Update location
  locationTextDiv.html(`Location: ${gameState.location}`);

  // Update inventory
  inventoryListUl.html(''); // Clear previous items
  if (gameState.inventory.length === 0) {
    inventoryListUl.html('<li>Empty</li>');
  } else {
    for (let item of gameState.inventory) {
      inventoryListUl.child(createElement('li', item));
    }
  }

  // Update choices
  choicesContainer.html(''); // Clear previous choices
  if (!gameState.gameOver && !gameState.victory && choices.length > 0) {
    for (let choice of choices) {
      let button = createButton(choice.text);
      button.mousePressed(() => handleChoice(choice.text));
      choicesContainer.child(button);
    }
  }
}

function restartGame() {
  startGame();
  gameOverScreen.style('display', 'none');
  victoryScreen.style('display', 'none');
}

function speak(text) {
  if (synth && voice) {
    let utterance = new SpeechSynthesisUtterance(text);
    utterance.voice = voice;
    utterance.rate = 1; // Speed of speech
    synth.cancel(); // Stop any current speech
    synth.speak(utterance);
  }
}

function drawScene() {
  // Draw background based on time of day
  drawTimeOfDay();

  // Draw setting
  switch (gameState.currentScene.setting) {
    case 'forest':
      drawForest();
      break;
    case 'cave':
      drawCave();
      break;
    case 'castle':
      drawCastle();
      break;
    case 'village':
      drawVillage();
      break;
    case 'river':
      drawRiver();
      break;
    default:
      background(0, 50, 100); // Default dark blue
      break;
  }

  // Draw weather
  drawWeather();

  // Draw elements
  drawElements();
}

function drawTimeOfDay() {
  let c1, c2;
  switch (gameState.currentScene.timeOfDay) {
    case 'dawn':
      c1 = color(255, 150, 0); // Orange
      c2 = color(100, 150, 255); // Light blue
      break;
    case 'day':
      c1 = color(100, 150, 255); // Light blue
      c2 = color(200, 220, 255); // Pale blue
      break;
    case 'dusk':
      c1 = color(150, 50, 200); // Purple
      c2 = color(255, 100, 0); // Orange
      break;
    case 'night':
      c1 = color(20, 20, 70); // Dark blue
      c2 = color(0, 0, 0); // Black
      // Draw stars
      fill(255);
      noStroke();
      for (let i = 0; i < 100; i++) {
        circle(random(width), random(height * 0.7), random(1, 3));
      }
      break;
    default:
      c1 = color(100, 150, 255);
      c2 = color(200, 220, 255);
      break;
  }
  setGradient(0, 0, width, height, c1, c2);
}

function setGradient(x, y, w, h, c1, c2) {
  noFill();
  for (let i = y; i <= y + h; i++) {
    let inter = map(i, y, y + h, 0, 1);
    let c = lerpColor(c1, c2, inter);
    stroke(c);
    line(x, i, x + w, i);
  }
}

function drawWeather() {
  noFill();
  stroke(255, 255, 255, 150); // White transparent
  switch (gameState.currentScene.weather) {
    case 'rain':
      stroke(100, 100, 255, 150); // Blue transparent
      for (let i = 0; i < 200; i++) {
        let x = random(width);
        let y = random(height);
        line(x, y, x + 5, y + 15);
      }
      break;
    case 'fog':
      fill(255, 255, 255, 50); // White transparent overlay
      noStroke();
      rect(0, 0, width, height);
      break;
    case 'storm':
      // Darker overlay
      fill(0, 0, 0, 100);
      noStroke();
      rect(0, 0, width, height);
      // Lightning zigzags (random flash)
      if (random() < 0.02) { // 2% chance per frame
        stroke(255, 255, 0); // Yellow
        strokeWeight(3);
        let startX = random(width);
        let startY = 0;
        let endX = random(width);
        let endY = height * 0.7; // Don't go too low
        line(startX, startY, startX + random(-50, 50), startY + random(50, 100));
        line(startX + random(-50, 50), startY + random(50, 100), endX, endY);
      }
      break;
    case 'clear':
      // Do nothing, background is already drawn
      break;
  }
}

function drawForest() {
  // Brown trunks
  fill(139, 69, 19);
  noStroke();
  for (let i = 0; i < 5; i++) {
    let x = map(i, 0, 4, width * 0.1, width * 0.9);
    let trunkHeight = random(height * 0.4, height * 0.6);
    rect(x, height - trunkHeight, 20, trunkHeight);
    // Green canopy circles
    fill(34, 139, 34);
    circle(x + 10, height - trunkHeight - 50, random(80, 120));
  }
}

function drawCave() {
  fill(50); // Dark grey
  noStroke();
  rect(0, 0, width, height);
  fill(100); // Lighter grey for stalactites
  for (let i = 0; i < 10; i++) {
    let x = map(i, 0, 9, width * 0.1, width * 0.9);
    let height = random(50, 150);
    triangle(x, 0, x - 20, height, x + 20, height); // Stalactite from top
    triangle(x, height(canvas) , x - 20, height(canvas) - height, x + 20, height(canvas) - height); // Stalagmite from bottom
  }
}

function drawCastle() {
  fill(150); // Stone grey
  noStroke();
  rect(0, height * 0.4, width, height * 0.6); // Main wall
  // Crenellated top
  for (let i = 0; i < width; i += 40) {
    rect(i, height * 0.3, 20, height * 0.1);
  }
  // Towers
  fill(120);
  for (let i = 0; i < 2; i++) {
    let x = map(i, 0, 1, width * 0.2, width * 0.8);
    rect(x, height * 0.2, 80, height * 0.4);
    fill(100); // Darker roof
    triangle(x, height * 0.2, x + 80, height * 0.2, x + 40, height * 0.1);
  }
}

function drawVillage() {
  fill(200, 150, 100); // Warm colors
  noStroke();
  for (let i = 0; i < 3; i++) {
    let x = map(i, 0, 2, width * 0.15, width * 0.75);
    let houseWidth = 100;
    let houseHeight = random(80, 120);
    rect(x, height - houseHeight, houseWidth, houseHeight);
    fill(150, 100, 50); // Roof color
    triangle(x, height - houseHeight, x + houseWidth, height - houseHeight, x + houseWidth / 2, height - houseHeight - 50);
  }
}

function drawRiver() {
  fill(50, 100, 200); // Blue wavy lines
  noStroke();
  beginShape();
  vertex(0, height * 0.7);
  for (let x = 0; x <= width; x += 20) {
    let y = height * 0.7 + sin(x * 0.05 + frameCount * 0.02) * 20;
    vertex(x, y);
  }
  vertex(width, height);
  vertex(0, height);
  endShape(CLOSE);
  // Rocks as grey ellipses
  fill(100);
  for (let i = 0; i < 5; i++) {
    circle(random(width), random(height * 0.8, height * 0.95), random(20, 50));
  }
}

function drawElements() {
  for (let element of gameState.currentScene.elements) {
    noStroke();
    let x = random(width * 0.1, width * 0.9);
    let y = random(height * 0.6, height * 0.9);

    switch (element) {
      case 'tree':
        fill(139, 69, 19);
        rect(x, y, 20, 80);
        fill(34, 139, 34);
        circle(x + 10, y, 60);
        break;
      case 'rock':
        fill(100);
        circle(x, y, 40);
        break;
      case 'chest':
        fill(160, 120, 80);
        rect(x, y, 50, 40);
        fill(200, 160, 120);
        rect(x + 10, y + 10, 30, 20);
        break;
      case 'monster':
        fill(200, 50, 50);
        circle(x, y, 50);
        fill(0);
        circle(x - 10, y - 5, 5);
        circle(x + 10, y - 5, 5);
        arc(x, y + 10, 30, 20, 0, PI);
        break;
      case 'npc':
        fill(255, 200, 150);
        circle(x, y, 40);
        fill(0);
        circle(x - 5, y - 5, 3);
        circle(x + 5, y - 5, 3);
        line(x - 5, y + 10, x + 5, y + 10);
        break;
      case 'fire':
        fill(255, 150, 0);
        triangle(x, y, x - 15, y - 30, x + 15, y - 30);
        fill(255, 0, 0);
        triangle(x, y, x - 10, y - 20, x + 10, y - 20);
        break;
      case 'water':
        fill(50, 100, 200);
        rect(x, y, 80, 20);
        break;
    }
  }
}