Upload 51 files

.gitattributes

@@ -33,3 +33,10 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+assets/assets/dj_old.png filter=lfs diff=lfs merge=lfs -text
+assets/assets/game-over.png filter=lfs diff=lfs merge=lfs -text
+assets/assets/moonlit-whispers-theo-gerard-main-version-35960-02-34.mp3 filter=lfs diff=lfs merge=lfs -text
+assets/assets/tiny-steps-danijel-zambo-main-version-1433-01-48.mp3 filter=lfs diff=lfs merge=lfs -text
+assets/assets/title-screen.png filter=lfs diff=lfs merge=lfs -text
+assets/assets/victory.png filter=lfs diff=lfs merge=lfs -text
+assets/assets/wingman_old.png filter=lfs diff=lfs merge=lfs -text

assets/assets/moonlit-whispers-theo-gerard-main-version-35960-02-34.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:042c696678781cbd276979868386b81d49e5623dc1bb0471d4a8a9db672d8c92
+size 6224789

assets/assets/tiny-steps-danijel-zambo-main-version-1433-01-48.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:dd1bc1cfcdebe9999f561dd4cdd5a9bd32760764a7634ab11f13a9c53b2febd9
+size 4334026

src/constants.js

@@ -0,0 +1,7 @@
+export const WINGMAN_LABEL = "wingman";
+export const SHYGUY_LABEL = "shyguy";
+export const SISTER_LABEL = "sister";
+export const GIRL_LABEL = "girl";
+export const BAR_LABEL = "barman";
+export const DJ_LABEL = "dj";
+export const EXIT_LABEL = "exit";

src/conversation_llm.js

@@ -0,0 +1,76 @@
+import LLM from "./llm";
+
+export class ConversationLLM {
+    constructor(character1Name, character2Name, character1Prompt, character2Prompt, situation_prompt, outputFormatPrompt, functionDescriptions, functionPrompt) {
+        this.character1Name = character1Name;
+        this.character2Name = character2Name;
+        this.character1Prompt = character1Prompt;
+        this.character2Prompt = character2Prompt;
+        this.situation_prompt = situation_prompt;
+        this.outputFormatPrompt = outputFormatPrompt;
+        this.functionDescriptions = functionDescriptions;
+        this.functionPrompt = functionPrompt;
+
+    }
+
+    async generateConversation(numTurns = 3) {
+        try {
+            let conversation = [];
+            const llm = new LLM();
+            
+            for (let i = 0; i < numTurns; i++) {
+                
+                // Alternate between characters for each turn
+                const isCharacter1Turn = i % 2 === 0;
+                const currentSpeaker = isCharacter1Turn ? this.character1Prompt : this.character2Prompt;
+                const currentListener = isCharacter1Turn ? this.character2Prompt : this.character1Prompt;
+                const currentSpeakerName = isCharacter1Turn ? this.character1Name : this.character2Name;
+                const currentListenerName = isCharacter1Turn ? this.character2Name : this.character1Name;
+                
+                // Format the conversation history as a proper chat message array
+                const conversationHistory = [...conversation];
+                
+                // Create system message for current speaker
+                const systemMessage = {
+                    role: 'system',
+                    content: `${this.situation_prompt}\nRoleplay as: ${currentSpeakerName}\nMake only the response to the user. Only speech, no speech style. You have the following personality: ${currentSpeaker}. You talk to ${currentListenerName}.`
+                };
+
+                // Get response from LLM with proper message format
+                const response = await llm.getChatCompletion(
+                    systemMessage.content,
+                    conversationHistory.length > 0 
+                        ? JSON.stringify(conversationHistory)
+                        : "Start the conversation"
+                );
+                
+                // Ensure the response is in the correct format with the proper character role
+                const parsedResponse = {
+                    role: currentSpeakerName,  // Use the character name instead of prompt
+                    content: this.parseConversation(response)
+                };
+                
+                conversation.push(parsedResponse);
+            }
+
+            const analysis = await llm.getFunctionKey(
+                this.functionDescriptions,
+                this.functionPrompt + JSON.stringify(conversation)
+            );
+
+            return {
+                conversation,
+                analysis
+            };
+        } catch (error) {
+            console.error('Error generating conversation:', error);
+            throw error;
+        }
+    }
+    parseConversation(llmResponse) {
+        
+        return llmResponse;
+    }
+}
+
+

src/eleven_labs.js

@@ -0,0 +1,90 @@
+import { SHYGUY_LABEL, SISTER_LABEL, GIRL_LABEL, BAR_LABEL, DJ_LABEL } from "./constants.js";
+
+export class ElevenLabsClient {
+  constructor() {
+    this.apiKey = "sk_62d0fc2ccddb1a4036f624dd8c411383fd9b9990755ea086";
+    this.baseUrl = "https://api.elevenlabs.io/v1";
+  }
+
+  static characterToVoiceIdMapping = {
+    [SHYGUY_LABEL]: "bGNROVfU5WbK6F0AyHII",
+    [SISTER_LABEL]: "VfTRhexMRVuPmOe9aogj",
+    [GIRL_LABEL]: "zQPM9vJjjzGxbs457rQj",
+    [BAR_LABEL]: "XA2bIQ92TabjGbpO2xRr",
+    [DJ_LABEL]: "T0pkYhIZ7UMOc26gqqeX",
+  };
+
+  async playAudioForCharacter(character, text) {
+    const voiceId = ElevenLabsClient.characterToVoiceIdMapping[character];
+    if (!voiceId) {
+      throw new Error(`No voice mapping found for character: ${character}`);
+    }
+    const audioBlob = await this.createSpeech({
+      text: text,
+      voiceId: voiceId,
+    });
+    const audioUrl = URL.createObjectURL(audioBlob);
+    const audio = new Audio(audioUrl);
+
+    // hack to wait for the audio to finish playing
+    return new Promise((res) => {
+      audio.play();
+      audio.onended = res;
+    });
+  }
+
+  async createSpeech({
+    text,
+    voiceId,
+    modelId = "eleven_multilingual_v2",
+    outputFormat = "mp3_44100_128",
+    voiceSettings = null,
+    pronunciationDictionaryLocators = null,
+    seed = null,
+    previousText = null,
+    nextText = null,
+    previousRequestIds = null,
+    nextRequestIds = null,
+    usePvcAsIvc = false,
+    applyTextNormalization = "auto",
+  }) {
+    const url = `${this.baseUrl}/text-to-speech/${voiceId}?output_format=${outputFormat}`;
+
+    const requestBody = {
+      text,
+      model_id: modelId,
+      voice_settings: voiceSettings,
+      pronunciation_dictionary_locators: pronunciationDictionaryLocators,
+      seed,
+      previous_text: previousText,
+      next_text: nextText,
+      previous_request_ids: previousRequestIds,
+      next_request_ids: nextRequestIds,
+      use_pvc_as_ivc: usePvcAsIvc,
+      apply_text_normalization: applyTextNormalization,
+    };
+
+    // Remove null values from request body
+    Object.keys(requestBody).forEach((key) => requestBody[key] === null && delete requestBody[key]);
+
+    try {
+      const response = await fetch(url, {
+        method: "POST",
+        headers: {
+          "xi-api-key": this.apiKey,
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(requestBody),
+      });
+
+      if (!response.ok) {
+        throw new Error(`ElevenLabs API error: ${response.status} ${response.statusText}`);
+      }
+
+      // Return audio blob
+      return await response.blob();
+    } catch (error) {
+      throw new Error(`Failed to create speech: ${error.message}`);
+    }
+  }
+}

src/game.js

@@ -0,0 +1,64 @@
+import { Shyguy } from "./shyguy.js";
+import { GameEngine } from "./game_engine.js";
+import { ShyGuyLLM } from "./shyguy_llm.js";
+import { StoryEngine } from "./story_engine.js";
+import { SpeechToTextClient } from "./speech_to_text.js";
+import { ElevenLabsClient } from "./eleven_labs.js";
+
+export class Game {
+  constructor() {
+    this.firstRun = true;
+
+    this.reset = this.reset.bind(this);
+    this.initializeComponents();
+  }
+
+  initializeComponents() {
+    // Create fresh instances of all components
+    this.shyguy = new Shyguy();
+    this.speechToTextClient = new SpeechToTextClient();
+    this.elevenLabsClient = new ElevenLabsClient();
+    this.shyguyLLM = new ShyGuyLLM(this.shyguy);
+    this.storyEngine = new StoryEngine(this.shyguy);
+    this.gameEngine = new GameEngine(
+      this.shyguy,
+      this.shyguyLLM,
+      this.storyEngine,
+      this.speechToTextClient,
+      this.elevenLabsClient
+    );
+  }
+
+  async run() {
+    this.gameEngine.init(this.firstRun);
+    this.gameEngine.setResetCallback(this.reset);
+    this.gameEngine.playBackgroundMusic();
+    this.gameEngine.lowerMusicVolume();
+  }
+
+  reset() {
+    this.firstRun = false;
+    // Clean up old game engine
+    if (this.gameEngine) {
+      // Remove event listeners and clean up
+      document.removeEventListener("keydown", this.gameEngine.handleKeyDown);
+      document.removeEventListener("keyup", this.gameEngine.handleKeyUp);
+      this.gameEngine.sendButton?.removeEventListener("click", this.gameEngine.handleSendMessage);
+      this.gameEngine.dialogueContinueButton?.removeEventListener("click", this.gameEngine.handleDialogueContinue);
+      this.gameEngine.playAgainBtn?.removeEventListener("click", this.gameEngine.handlePlayAgain);
+      this.gameEngine.microphoneButton?.removeEventListener("click", this.gameEngine.handleMicrophone);
+      this.gameEngine.startGameBtn?.removeEventListener("click", this.gameEngine.handleStartGame);
+      this.gameEngine.dialogueNextButton?.removeEventListener("click", this.gameEngine.handleDialogueNext);
+
+      // Stop the game loop
+      this.gameEngine.shouldContinue = false;
+    }
+
+    setTimeout(() => {
+      // Create fresh instances
+      this.initializeComponents();
+
+      this.run();
+    }, 100);
+  }
+}

src/game_engine.js

@@ -0,0 +1,1159 @@
+import { BAR_LABEL, DJ_LABEL, EXIT_LABEL, GIRL_LABEL, SISTER_LABEL, WINGMAN_LABEL, SHYGUY_LABEL } from "./constants";
+import { nameToLabel } from "./story_engine.js";
+
+const WINGMAN_SPEED = 5;
+const SHYGUY_SPEED = 0.5;
+
+const IS_DEBUG = true;
+
+class SpriteEntity {
+  constructor(x0, y0, imageSrc, speed = 0, width = 24, height = 64, frameRate = 8, frameCount = 1) {
+    this.x = x0;
+    this.y = y0;
+    this.width = width;
+    this.height = height;
+    this.image = new Image();
+    this.image.src = imageSrc;
+    this.frameRate = frameRate;
+    this.frameCount = frameCount;
+
+    // properties for the game engine
+    this.moving = false;
+    this.speed = speed;
+
+    // frame index in the sprite sheet
+    this.frameX = 0;
+    this.frameY = 0; // 0 for right, 1 for left
+  }
+
+  stop() {
+    this.moving = false;
+  }
+
+  start() {
+    this.moving = true;
+  }
+
+  setSpeed(speed) {
+    this.speed = speed;
+  }
+}
+
+class GuidedSpriteEntity extends SpriteEntity {
+  constructor(x0, y0, imageSrc, speed = 0, width = 24, height = 64, frameRate = 8, frameCount = 1) {
+    super(x0, y0, imageSrc, speed, width, height, frameRate, frameCount);
+    this.target = null;
+  }
+
+  setTarget(target) {
+    this.target = target;
+  }
+}
+
+class SpriteImage {
+  constructor(imageSrc, width = 32, height = 32) {
+    this.image = new Image();
+    this.image.src = imageSrc;
+    this.width = width;
+    this.height = height;
+  }
+}
+
+class Target {
+  constructor(label, x, y, width, height, color, enabled = true) {
+    this.label = label;
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+    this.debugColor = color;
+    this.enabled = enabled;
+  }
+}
+
+export class GameEngine {
+  static introMessages = [
+    {
+      message:
+        "Hey man, this is really not my cup of tea. I see Jessica in the corner, I wonder if I can finally tell her I love her.",
+      character: SHYGUY_LABEL,
+    },
+    {
+      message: "Man, tonight is your night. I'll get you through it and you'll go home with Jessica.",
+      character: WINGMAN_LABEL,
+    },
+    {
+      message: "Geez, that's impossible! Even if I replay the night a million times, I couldn't do it.",
+      character: SHYGUY_LABEL,
+    },
+    {
+      message: "Okay, just follow my advice! I'll push you around if needed.",
+      character: WINGMAN_LABEL,
+    },
+  ];
+
+  constructor(shyguy, shyguyLLM, storyEngine, speechToTextClient, elevenLabsClient) {
+    this.shyguy = shyguy;
+    this.shyguyLLM = shyguyLLM;
+    this.storyEngine = storyEngine;
+    this.speechToTextClient = speechToTextClient;
+    this.elevenLabsClient = elevenLabsClient;
+
+    this.canvasWidth = 960;
+    this.canvasHeight = 640;
+    this.canvas = document.getElementById("gameCanvas");
+    if (!this.canvas) {
+      console.error("Canvas not found");
+    }
+    this.ctx = this.canvas.getContext("2d");
+
+    // View management
+    this.gameView = document.getElementById("gameView");
+    this.dialogueView = document.getElementById("dialogueView");
+    this.currentView = "game";
+
+    this.shouldContinue = true;
+
+    this.gameOver = false;
+    this.gameSuccessful = false;
+
+    this.gameChatContainer = document.getElementById("chatMessages");
+    this.messageInput = document.getElementById("messageInput");
+    this.sendButton = document.getElementById("sendButton");
+    this.microphoneButton = document.getElementById("micButton");
+    this.gameOverImage = document.getElementById("gameOverImage");
+    this.gameOverText = document.getElementById("gameOverText");
+
+    this.dialogueChatContainer = document.getElementById("dialogueMessages");
+    this.dialogueContinueButton = document.getElementById("dialogueContinueButton");
+    this.dialogueNextButton = document.getElementById("dialogueNextButton");
+
+    this.gameFrame = 0;
+    this.keys = {
+      ArrowUp: false,
+      ArrowDown: false,
+      ArrowLeft: false,
+      ArrowRight: false,
+    };
+
+    // Bind methods
+    this.switchView = this.switchView.bind(this);
+    this.update = this.update.bind(this);
+    this.draw = this.draw.bind(this);
+    this.run = this.run.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleKeyUp = this.handleKeyUp.bind(this);
+    this.setNewTarget = this.setNewTarget.bind(this);
+    this.checkTargetReached = this.checkTargetReached.bind(this);
+    this.updateGuidedSpriteDirection = this.updateGuidedSpriteDirection.bind(this);
+    this.updateSprite = this.updateSprite.bind(this);
+    this.handleSpriteCollision = this.handleSpriteCollision.bind(this);
+    this.initDebugControls = this.initDebugControls.bind(this);
+    this.stopShyguyAnimation = this.stopShyguyAnimation.bind(this);
+    this.handlePlayAgain = this.handlePlayAgain.bind(this);
+    this.handleMicrophone = this.handleMicrophone.bind(this);
+    this.handleSendMessage = this.handleSendMessage.bind(this);
+    this.handleMicrophone = this.handleMicrophone.bind(this);
+    this.handleDialogueContinue = this.handleDialogueContinue.bind(this);
+    this.handleFirstStartGame = this.handleFirstStartGame.bind(this);
+    this.setGameOver = this.setGameOver.bind(this);
+    this.handleDialogueNext = this.handleDialogueNext.bind(this);
+
+    this.pushEnabled = false;
+    this.voiceEnabled = !IS_DEBUG;
+
+    // Debug controls
+    this.initDebugControls();
+
+    // if we have other obstacles, we can add them here
+    this.gridMapTypes = {
+      floor: 0,
+      wall: 1,
+      door: 2,
+    };
+
+    // load assets for drawing the scene
+    this.wall = new SpriteImage("/assets/assets/wall_sprite.png");
+    this.floor = new SpriteImage("/assets/assets/floor-tile.png");
+    this.door = new SpriteImage("/assets/assets/door_sprite.png");
+
+    this.gridCols = Math.ceil(this.canvasWidth / this.wall.width);
+    this.gridRows = Math.ceil(this.canvasHeight / this.wall.height);
+
+    // initialize grid map
+    this.backgroundGridMap = [];
+    this.initBackgroundGridMap();
+
+    // initialize players
+    const cx = this.canvasWidth / 2;
+    const cy = this.canvasHeight / 2;
+    this.shyguySprite = new GuidedSpriteEntity(cx, cy, "/assets/assets/shyguy_sprite.png", SHYGUY_SPEED);
+    this.wingmanSprite = new SpriteEntity(
+      this.wall.width,
+      this.canvasHeight - this.wall.height - 64,
+      "/assets/assets/wingman_sprite.png",
+      WINGMAN_SPEED
+    );
+
+    this.jessicaSprite = new SpriteImage("/assets/assets/jessica_sprite.png", 64, 64);
+    this.djSprite = new SpriteImage("/assets/assets/dj_sprite.png", 64, 64);
+    this.barSprite = new SpriteImage("/assets/assets/bar_sprite.png", 64, 64);
+    this.sisterSprite = new SpriteImage("/assets/assets/sister_sprite.png", 64, 64);
+
+    this.targets = {
+      exit: new Target(EXIT_LABEL, this.wall.width, this.wall.height, this.wall.width, this.wall.height, "red", true),
+      girl: new Target(
+        GIRL_LABEL,
+        this.canvasWidth - this.wall.width - this.jessicaSprite.width,
+        (this.canvasHeight - this.wall.height - this.jessicaSprite.height) / 2,
+        this.jessicaSprite.width,
+        this.jessicaSprite.height,
+        "pink",
+        true
+      ),
+      bar: new Target(
+        BAR_LABEL,
+        (this.canvasWidth - this.wall.width - this.barSprite.width) / 2,
+        this.wall.height,
+        this.barSprite.width,
+        this.barSprite.height,
+        "blue",
+        true
+      ),
+      dj: new Target(
+        DJ_LABEL,
+        this.wall.width,
+        (this.canvasHeight - this.wall.height - this.djSprite.height) / 2,
+        this.djSprite.width,
+        this.djSprite.height,
+        "green",
+        true
+      ),
+      sister: new Target(
+        SISTER_LABEL,
+        this.canvasWidth - this.wall.width - this.sisterSprite.width,
+        this.wall.height,
+        this.sisterSprite.width,
+        this.sisterSprite.height,
+        "yellow",
+        true
+      ),
+    };
+
+    // Add game over view
+    this.gameOverView = document.getElementById("gameOverView");
+    this.playAgainBtn = document.getElementById("playAgainBtn");
+
+    this.isRecording = false;
+
+    // Add these lines
+    this.introView = document.getElementById("introView");
+    this.startGameBtn = document.getElementById("startGameBtn");
+
+    this.backgroundMusic = new Audio('assets/assets/tiny-steps-danijel-zambo-main-version-1433-01-48.mp3');
+    this.backgroundMusic.loop = true;
+    
+    this.gameOverMusic = new Audio('/assets/assets/game-over-8bit-music-danijel-zambo-1-00-16.mp3');
+    this.gameOverMusic.loop = false;
+    
+    this.victoryMusic = new Audio('/assets/assets/moonlit-whispers-theo-gerard-main-version-35960-02-34.mp3');
+    this.victoryMusic.loop = false;
+
+    // Move character images to class state
+    this.leftCharacterImg = document.getElementById("leftCharacterImg");
+    this.rightCharacterImg = document.getElementById("rightCharacterImg");
+    this.hideCharacterImages();
+  }
+
+  showCharacterImages() {
+    this.leftCharacterImg.style.display = "block";
+    this.rightCharacterImg.style.display = "block";
+  }
+
+  hideCharacterImages() {
+    this.leftCharacterImg.style.display = "none";
+    this.rightCharacterImg.style.display = "none";
+  }
+
+  init(firstRun = true) {
+    this.canvas.width = this.canvasWidth;
+    this.canvas.height = this.canvasHeight;
+
+    document.addEventListener("keydown", this.handleKeyDown);
+    document.addEventListener("keyup", this.handleKeyUp);
+
+    // Initialize with game view
+
+    this.sendButton.addEventListener("click", this.handleSendMessage);
+    this.dialogueContinueButton.addEventListener("click", this.handleDialogueContinue);
+    this.dialogueNextButton.addEventListener("click", this.handleDialogueNext);
+    this.playAgainBtn.addEventListener("click", this.handlePlayAgain);
+    this.microphoneButton.addEventListener("click", this.handleMicrophone);
+
+    if (firstRun) {
+      this.startGameBtn.addEventListener("click", this.handleFirstStartGame);
+      this.switchView("intro");
+    } else {
+      if (this.currentView !== "game") {
+        this.switchView("game");
+      }
+      this.run();
+      this.shyguySprite.setTarget(this.targets.exit);
+    }
+  }
+
+  async handleFirstStartGame() {
+    this.switchView("dialogue");
+    this.leftCharacterImg.src = "/assets/assets/wingman.jpeg";
+    this.rightCharacterImg.src = "/assets/assets/shyguy_headshot.jpeg";
+    this.showCharacterImages();
+    this.hideContinueButton();
+
+    for (const introMessage of GameEngine.introMessages) {
+      const { message, character } = introMessage;
+      this.addChatMessage(this.dialogueChatContainer, message, character, true);
+      if (this.voiceEnabled) {
+        await this.elevenLabsClient.playAudioForCharacter(character, message);
+      } else {
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+      }
+    }
+
+    this.showNextButton();
+  }
+
+  showNextButton() {
+    if (this.dialogueNextButton) {
+      this.dialogueNextButton.style.display = "block";
+    }
+  }
+
+  hideNextButton() {
+    if (this.dialogueNextButton) {
+      this.dialogueNextButton.style.display = "none";
+    }
+  }
+
+  handleDialogueNext() {
+    this.clearChat(this.dialogueChatContainer);
+    this.leftCharacterImg.src = "";
+    this.rightCharacterImg.src = "";
+    this.hideCharacterImages();
+    this.hideNextButton();
+    this.showContinueButton();
+    this.handleStartGame();
+  }
+
+  async handleStartGame() {
+    this.switchView("game");
+    this.playBackgroundMusic();
+    this.run();
+    this.shyguySprite.setTarget(this.targets.exit);
+  }
+
+  setResetCallback(func) {
+    this.resetCallback = func;
+  }
+
+  resetGame() {
+    if (this.resetCallback) {
+      this.resetCallback();
+    }
+  }
+
+  initBackgroundGridMap() {
+    for (let row = 0; row < this.gridRows; row++) {
+      this.backgroundGridMap[row] = [];
+      for (let col = 0; col < this.gridCols; col++) {
+        // Set walls and obstacles (in future)
+        if (row === 0 || row === this.gridRows - 1 || col === 0 || col === this.gridCols - 1) {
+          this.backgroundGridMap[row][col] = this.gridMapTypes.wall;
+        } else {
+          this.backgroundGridMap[row][col] = this.gridMapTypes.floor;
+        }
+      }
+    }
+    this.backgroundGridMap[0][1] = this.gridMapTypes.door;
+  }
+
+  checkWallCollision(sprite, newX, newY) {
+    const x = newX;
+    const y = newY;
+    // For a sprite twice as big as grid, divide by half the sprite width/height
+    const gridX = Math.floor(x / (sprite.width * 1.33));
+    const gridY = Math.floor(y / (sprite.height / 2));
+
+    // Check all grid cells the sprite overlaps
+    // For a sprite twice as big, it can overlap up to 4 cells
+    for (let row = gridY; row <= Math.floor((y + sprite.height) / (sprite.height / 2)); row++) {
+      for (let col = gridX; col <= Math.floor((x + sprite.width) / (sprite.width * 1.33)); col++) {
+        if (row >= 0 && row < this.gridRows && col >= 0 && col < this.gridCols) {
+          if (this.backgroundGridMap[row][col] === this.gridMapTypes.wall) {
+            return true;
+          }
+        }
+      }
+    }
+
+    return false;
+  }
+
+  checkSpriteCollision(newX, newY, sprite1, sprite2) {
+    return (
+      newX < sprite2.x + sprite2.width &&
+      newX + sprite1.width > sprite2.x &&
+      newY < sprite2.y + sprite2.height &&
+      newY + sprite1.height > sprite2.y
+    );
+  }
+
+  handleSpriteCollision(sprite1, sprite2) {
+    if (!this.pushEnabled) {
+      return true; // Return true to block movement as before
+    }
+
+    // Calculate velocity difference
+    let dx = 0;
+    let dy = 0;
+    if (this.keys.ArrowUp) dy = -sprite1.speed;
+    else if (this.keys.ArrowDown) dy = sprite1.speed;
+    else if (this.keys.ArrowLeft) dx = -sprite1.speed;
+    else if (this.keys.ArrowRight) dx = sprite1.speed;
+
+    // If arrow player isn't moving, stop button player
+    if (dx === 0 && dy === 0) {
+      return true;
+    }
+
+    // Calculate effective push speed (difference in velocities)
+    const pushSpeed = Math.max(0, sprite1.speed - sprite2.speed);
+
+    // If arrow player is faster, push button player
+    if (pushSpeed > 0) {
+      let newX = sprite2.x + (dx !== 0 ? dx : 0);
+      let newY = sprite2.y + (dy !== 0 ? dy : 0);
+
+      // Only apply the push if it won't result in a wall collision
+      if (!this.checkWallCollision(sprite2, newX, newY)) {
+        sprite2.x = newX;
+        sprite2.y = newY;
+      }
+    }
+
+    return true; // Still prevent arrow player from moving through button player
+  }
+
+  updateGuidedSprite() {
+    if (!this.shyguySprite.target) return;
+
+    const dx = this.shyguySprite.target.x - this.shyguySprite.x;
+    const dy = this.shyguySprite.target.y - this.shyguySprite.y;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+
+    const moveX = (dx / distance) * this.shyguySprite.speed;
+    const moveY = (dy / distance) * this.shyguySprite.speed;
+
+    let newX = this.shyguySprite.x + moveX;
+    let newY = this.shyguySprite.y + moveY;
+
+    // Check wall collision first
+    if (!this.checkWallCollision(this.shyguySprite, newX, newY)) {
+      const willCollide = this.checkSpriteCollision(newX, newY, this.shyguySprite, this.wingmanSprite);
+
+      if (willCollide) {
+        if (this.pushEnabled) {
+          // Push mechanics enabled - try to push wingman
+          const pushSpeed = Math.max(0, this.shyguySprite.speed - this.wingmanSprite.speed);
+
+          if (pushSpeed > 0) {
+            let wingmanNewX = this.wingmanSprite.x + moveX;
+            let wingmanNewY = this.wingmanSprite.y + moveY;
+
+            if (!this.checkWallCollision(this.wingmanSprite, wingmanNewX, wingmanNewY)) {
+              this.wingmanSprite.x = wingmanNewX;
+              this.wingmanSprite.y = wingmanNewY;
+              this.shyguySprite.x = newX;
+              this.shyguySprite.y = newY;
+              this.shyguySprite.moving = true;
+            }
+          }
+        }
+
+        // If push is disabled or push failed, try to path around
+        if (this.shyguySprite.x === newX && this.shyguySprite.y === newY) {
+          const leftPath = { x: newX - this.wingmanSprite.width, y: newY };
+          const rightPath = { x: newX + this.wingmanSprite.width, y: newY };
+          const upPath = { x: newX, y: newY - this.wingmanSprite.height };
+          const downPath = { x: newX, y: newY + this.wingmanSprite.height };
+
+          const paths = [leftPath, rightPath, upPath, downPath];
+          let bestPath = null;
+          let bestDistance = Infinity;
+
+          for (const path of paths) {
+            if (
+              !this.checkWallCollision(this.shyguySprite, path.x, path.y) &&
+              !this.checkSpriteCollision(path.x, path.y, this.shyguySprite, this.wingmanSprite)
+            ) {
+              const pathDistance = Math.sqrt(
+                Math.pow(this.shyguySprite.target.x - path.x, 2) + Math.pow(this.shyguySprite.target.y - path.y, 2)
+              );
+              if (pathDistance < bestDistance) {
+                bestDistance = pathDistance;
+                bestPath = path;
+              }
+            }
+          }
+
+          if (bestPath) {
+            this.shyguySprite.x = bestPath.x;
+            this.shyguySprite.y = bestPath.y;
+            this.shyguySprite.moving = true;
+          }
+        }
+      } else {
+        // No collision, proceed normally
+        this.shyguySprite.x = newX;
+        this.shyguySprite.y = newY;
+        this.shyguySprite.moving = true;
+      }
+    }
+  }
+
+  updateSprite() {
+    let newX = this.wingmanSprite.x;
+    let newY = this.wingmanSprite.y;
+    let isMoving = false;
+
+    if (this.keys.ArrowUp) {
+      newY -= this.wingmanSprite.speed;
+      isMoving = true;
+    }
+    if (this.keys.ArrowDown) {
+      newY += this.wingmanSprite.speed;
+      isMoving = true;
+    }
+    if (this.keys.ArrowLeft) {
+      newX -= this.wingmanSprite.speed;
+      this.wingmanSprite.frameY = 0; // left
+      isMoving = true;
+    }
+    if (this.keys.ArrowRight) {
+      newX += this.wingmanSprite.speed;
+      this.wingmanSprite.frameY = 1; // right
+      isMoving = true;
+    }
+
+    // Check wall collision first
+    if (!this.checkWallCollision(this.wingmanSprite, newX, newY)) {
+      // Check collision with shyguy
+      const willCollide = this.checkSpriteCollision(newX, newY, this.wingmanSprite, this.shyguySprite);
+
+      if (willCollide) {
+        if (this.pushEnabled) {
+          // Try to push shyguy if push is enabled
+          this.handleSpriteCollision(this.wingmanSprite, this.shyguySprite);
+        }
+        // If push is disabled or push failed, don't move
+        return;
+      }
+
+      // No collision, proceed with movement
+      this.wingmanSprite.x = newX;
+      this.wingmanSprite.y = newY;
+    }
+
+    this.wingmanSprite.moving = isMoving;
+  }
+
+  handleKeyDown(e) {
+    if (e.key in this.keys) {
+      this.keys[e.key] = true;
+      this.wingmanSprite.moving = true;
+    } else if (e.key === "Enter" && this.currentView === "game" && !e.shiftKey) {
+      e.preventDefault();
+      this.handleSendMessage();
+    }
+  }
+
+  handleKeyUp(e) {
+    if (e.key in this.keys) {
+      this.keys[e.key] = false;
+      this.wingmanSprite.moving = Object.values(this.keys).some((key) => key);
+    }
+  }
+
+  setNewTarget(target) {
+    if (target && target.enabled) {
+      this.shyguySprite.setTarget(target);
+      this.updateGuidedSpriteDirection(this.shyguySprite);
+    }
+    if (!target) {
+      this.shyguySprite.setTarget(null);
+    }
+  }
+
+  checkTargetReached(sprite, target) {
+    // Check if sprite overlaps with target using AABB collision detection
+    const spriteLeft = sprite.x;
+    const spriteRight = sprite.x + sprite.width;
+    const spriteTop = sprite.y;
+    const spriteBottom = sprite.y + sprite.height;
+
+    const targetLeft = target.x;
+    const targetRight = target.x + target.width;
+    const targetTop = target.y;
+    const targetBottom = target.y + target.height;
+
+    // Check for overlap on both x and y axes
+    const xOverlap = spriteRight >= targetLeft && spriteLeft <= targetRight;
+    const yOverlap = spriteBottom >= targetTop && spriteTop <= targetBottom;
+
+    return xOverlap && yOverlap;
+  }
+
+  updateGuidedSpriteDirection(sprite) {
+    if (!sprite.target) return;
+
+    const dx = sprite.target.x - sprite.x;
+
+    // Update direction based only on horizontal movement
+    if (dx !== 0) {
+      sprite.frameY = dx > 0 ? 1 : 0; // 0 for right, 1 for left
+    }
+  }
+
+  updateSpriteAnimation(sprite) {
+    if (sprite.moving) {
+      if (this.gameFrame % sprite.frameRate === 0) {
+        sprite.frameX = (sprite.frameX + 1) % sprite.frameCount;
+      }
+    } else {
+      sprite.frameX = 0;
+    }
+  }
+
+  async update() {
+    this.gameFrame++;
+
+    // Update Shyguy position
+    if (this.shyguySprite.target && this.shyguySprite.target.enabled) {
+      this.updateGuidedSprite(this.shyguySprite);
+      if (this.shyguySprite.moving) {
+        this.updateSpriteAnimation(this.shyguySprite);
+      }
+    }
+
+    // update Wingman position
+    this.updateSprite(this.wingmanSprite);
+    if (this.wingmanSprite.moving) {
+      this.updateSpriteAnimation(this.wingmanSprite);
+    }
+
+    for (const target of Object.values(this.targets)) {
+      const isClose = this.checkTargetReached(this.shyguySprite, target);
+
+      // TODO: reenable the target so the player can visit it again
+      if (!target.enabled) {
+        if (!isClose) {
+          target.enabled = true;
+        }
+        continue;
+      }
+
+      if (isClose) {
+        // pause the game
+        target.enabled = false;
+        this.stopShyguyAnimation(target);
+
+        if (target.label === EXIT_LABEL) {
+          this.gameOver = true;
+          this.gameSuccessful = false;
+          this.setGameOver(true);
+          this.switchView("gameOver");
+        } else {
+          await this.handleDialogueWithStoryEngine(target.label);
+        }
+        break;
+      }
+    }
+  }
+
+  async handleDialogueWithStoryEngine(label) {
+    this.switchView("dialogue");
+    this.hideContinueButton();
+
+    // Show loading indicator
+    const dialogueBox = document.querySelector(".dialogue-box");
+    dialogueBox.classList.add("loading");
+
+    const response = await this.storyEngine.onEncounter(label);
+
+    // Hide loading indicator
+    dialogueBox.classList.remove("loading");
+
+    // Update character images using class properties
+    if (this.leftCharacterImg && response.char2imgpath) {
+      this.leftCharacterImg.src = response.char2imgpath;
+      this.leftCharacterImg.style.display = "block";
+    }
+
+    if (this.rightCharacterImg && response.char1imgpath) {
+      this.rightCharacterImg.src = response.char1imgpath;
+      this.rightCharacterImg.style.display = "block";
+    }
+
+    const conversation = response.conversation;
+
+    // TODO: set the images if they are available
+
+    for (const message of conversation) {
+      const { role, content } = message;
+      const label = nameToLabel(role);
+      this.addChatMessage(this.dialogueChatContainer, content, label, true);
+
+      // Only play audio if voice is enabled
+      if (this.voiceEnabled) {
+        try {
+          this.lowerMusicVolumeALot();
+          await this.elevenLabsClient.playAudioForCharacter(label, content);
+          this.restoreMusicVolume();
+        } catch (error) {
+          console.error("Error playing audio:", label);
+        }
+      }
+    }
+
+    if (response.gameSuccesful) {
+      this.gameOver = true;
+      this.gameSuccessful = true;
+    } else if (response.gameOver) {
+      this.gameOver = true;
+      this.gameSuccessful = false;
+    } else {
+      this.gameOver = false;
+      this.gameSuccessful = false;
+    }
+
+    this.showContinueButton();
+  }
+
+  stopShyguyAnimation(target) {
+    this.shyguySprite.moving = false;
+    this.shyguySprite.frameX = 0;
+    this.shyguySprite.target = null;
+  }
+
+  draw() {
+    this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
+
+    // Draw grid map
+    for (let row = 0; row < this.gridRows; row++) {
+      for (let col = 0; col < this.gridCols; col++) {
+        const x = col * this.wall.width;
+        const y = row * this.wall.height;
+
+        if (this.backgroundGridMap[row][col] === this.gridMapTypes.wall) {
+          this.ctx.drawImage(this.wall.image, x, y, this.wall.width, this.wall.height);
+        } else if (this.backgroundGridMap[row][col] === this.gridMapTypes.floor) {
+          this.ctx.drawImage(this.floor.image, x, y, this.floor.width, this.floor.height);
+        } else if (this.backgroundGridMap[row][col] === this.gridMapTypes.door) {
+          this.ctx.drawImage(this.door.image, x, y, this.door.width, this.door.height);
+        }
+      }
+    }
+
+    this.drawTargetSprite(this.jessicaSprite, this.targets.girl);
+    this.drawTargetSprite(this.barSprite, this.targets.bar);
+    this.drawTargetSprite(this.djSprite, this.targets.dj);
+    this.drawTargetSprite(this.sisterSprite, this.targets.sister);
+
+    // Draw shyguy
+    this.ctx.drawImage(
+      this.shyguySprite.image,
+      this.shyguySprite.frameX * this.shyguySprite.width,
+      this.shyguySprite.frameY * this.shyguySprite.height,
+      this.shyguySprite.width,
+      this.shyguySprite.height,
+      this.shyguySprite.x,
+      this.shyguySprite.y,
+      this.shyguySprite.width,
+      this.shyguySprite.height
+    );
+
+    // Draw wingman
+    this.ctx.drawImage(
+      this.wingmanSprite.image,
+      this.wingmanSprite.frameX * this.wingmanSprite.width,
+      this.wingmanSprite.frameY * this.wingmanSprite.height,
+      this.wingmanSprite.width,
+      this.wingmanSprite.height,
+      this.wingmanSprite.x,
+      this.wingmanSprite.y,
+      this.wingmanSprite.width,
+      this.wingmanSprite.height
+    );
+  }
+
+  drawTargetSprite(sprite, target) {
+    this.ctx.drawImage(sprite.image, target.x, target.y, target.width, target.height);
+  }
+
+  switchView(viewName) {
+    if (viewName === this.currentView) return;
+
+    this.currentView = viewName;
+
+    // Hide all views first
+    this.introView.classList.remove("active");
+    this.gameView.classList.remove("active");
+    this.dialogueView.classList.remove("active");
+    this.gameOverView.classList.remove("active");
+
+    // Show the requested view
+    switch (viewName) {
+      case "intro":
+        this.introView.classList.add("active");
+        break;
+      case "game":
+        this.gameView.classList.add("active");
+        break;
+      case "dialogue":
+        this.dialogueView.classList.add("active");
+        break;
+      case "gameOver":
+        this.gameOverView.classList.add("active");
+        break;
+    }
+  }
+
+  enablePush() {
+    this.pushEnabled = true;
+  }
+
+  disablePush() {
+    this.pushEnabled = false;
+  }
+
+  initDebugControls() {
+    const targetDoorBtn = document.getElementById("targetDoorBtn");
+    const targetGirlBtn = document.getElementById("targetGirlBtn");
+    const targetBarBtn = document.getElementById("targetBarBtn");
+    const targetDjBtn = document.getElementById("targetDjBtn");
+    const targetSisterBtn = document.getElementById("targetSisterBtn");
+    const stopNavBtn = document.getElementById("stopNavBtn");
+    const togglePushBtn = document.getElementById("togglePushBtn");
+    const speedBoostBtn = document.getElementById("speedBoostBtn");
+    const toggleVoiceBtn = document.getElementById("toggleVoiceBtn");
+
+    targetDoorBtn.addEventListener("click", () => this.setNewTarget(this.targets.exit));
+    targetGirlBtn.addEventListener("click", () => this.setNewTarget(this.targets.girl));
+    targetBarBtn.addEventListener("click", () => this.setNewTarget(this.targets.bar));
+    targetDjBtn.addEventListener("click", () => this.setNewTarget(this.targets.dj));
+    targetSisterBtn.addEventListener("click", () => this.setNewTarget(this.targets.sister));
+    stopNavBtn.addEventListener("click", () => this.setNewTarget(null));
+
+    // Add push mechanics toggle
+    togglePushBtn.addEventListener("click", () => {
+      if (this.pushEnabled) {
+        this.disablePush();
+      } else {
+        this.enablePush();
+      }
+      togglePushBtn.textContent = this.pushEnabled ? "Disable Push" : "Enable Push";
+    });
+
+    // Add speed boost toggle
+    speedBoostBtn.addEventListener("click", () => {
+      if (this.shyguySprite.speed === SHYGUY_SPEED) {
+        this.shyguySprite.setSpeed(10);
+        speedBoostBtn.textContent = "Normal Speed";
+      } else {
+        this.shyguySprite.setSpeed(SHYGUY_SPEED);
+        speedBoostBtn.textContent = "Speed Boost";
+      }
+    });
+
+    // Add voice toggle handler
+    toggleVoiceBtn.addEventListener("click", () => {
+      this.voiceEnabled = !this.voiceEnabled;
+      toggleVoiceBtn.textContent = this.voiceEnabled ? "Disable Voice" : "Enable Voice";
+    });
+  }
+
+  // Update status text
+  updateStatus(message) {
+    const statusText = document.getElementById("statusText");
+    if (statusText) {
+      statusText.textContent = message;
+    }
+  }
+
+  clearChat(container) {
+    if (container) {
+      container.innerHTML = "";
+    }
+  }
+
+  addChatMessage(container, message, character, shyguyIsMain) {
+    if (!container) return;
+
+    const isMain = shyguyIsMain ? character === SHYGUY_LABEL : character !== SHYGUY_LABEL;
+
+    const messageDiv = document.createElement("div");
+    messageDiv.className = `chat-message ${isMain ? "right-user" : "left-user"}`;
+
+    const bubble = document.createElement("div");
+    bubble.className = "message-bubble";
+    bubble.textContent = message;
+
+    messageDiv.appendChild(bubble);
+    container.appendChild(messageDiv);
+
+    // Auto scroll to bottom
+    container.scrollTop = container.scrollHeight;
+  }
+
+  resolveAction(action) {
+    // TODO: resolve the action
+    switch (action) {
+      case "stay_idle":
+        this.setNewTarget(null);
+        break;
+      case "go_bar":
+        this.setNewTarget(this.targets.bar);
+        break;
+      case "go_dj":
+        this.setNewTarget(this.targets.dj);
+        break;
+      case "go_sister":
+        this.setNewTarget(this.targets.sister);
+        break;
+      case "go_girl":
+        this.setNewTarget(this.targets.girl);
+        break;
+      case "go_home":
+        this.setNewTarget(this.targets.exit);
+        break;
+      default:
+        break;
+    }
+  }
+
+  async sendMessageToShyguy(message) {
+    this.addChatMessage(this.gameChatContainer, message, WINGMAN_LABEL, false);
+    this.messageInput.value = "";
+
+    this.shyguyLLM.getShyGuyResponse(message).then(async (response) => {
+      const dialogue = response.dialogue;
+      const action = response.action;
+
+      this.addChatMessage(this.gameChatContainer, dialogue, SHYGUY_LABEL, false);
+
+      // Only play audio if voice is enabled
+      if (this.voiceEnabled) {
+        this.disableGameInput();
+        this.lowerMusicVolumeALot();
+        await this.elevenLabsClient.playAudioForCharacter(SHYGUY_LABEL, dialogue);
+        this.enableGameInput();
+        this.restoreMusicVolume();
+      }
+
+      // TODO: save conversation history
+      await this.shyguy.learnFromWingman(message);
+      console.log("[ShyguyLLM]: Next action: ", action);
+      this.resolveAction(action);
+    });
+  }
+
+  async handleSendMessage() {
+    const message = this.messageInput.value.trim();
+    if (message.length === 0) return;
+    this.sendMessageToShyguy(message);
+  }
+
+  async run() {
+    // wait for 16ms
+    await new Promise((resolve) => setTimeout(resolve, 16));
+    await this.update();
+    this.draw();
+    if (this.shouldContinue) {
+      requestAnimationFrame(this.run);
+    }
+  }
+
+  handlePlayAgain() {
+    this.clearChat(this.gameChatContainer);
+    this.resetGame();
+    this.switchView("game");
+  }
+
+  async handleMicrophone() {
+    if (!this.isRecording) {
+      // Start recording
+      this.isRecording = true;
+      this.microphoneButton.classList.add("recording");
+      this.microphoneButton.innerHTML = '<i class="fas fa-stop"></i>';
+
+      // Lower music volume while recording
+      this.lowerMusicVolumeALot();
+      await this.speechToTextClient.startRecording();
+    } else {
+      // Stop recording
+      this.isRecording = false;
+      this.microphoneButton.classList.remove("recording");
+      this.microphoneButton.innerHTML = '<i class="fas fa-microphone"></i>';
+
+      const result = await this.speechToTextClient.stopRecording();
+      // Restore music volume after recording
+      this.restoreMusicVolume();
+      this.sendMessageToShyguy(result.text);
+    }
+  }
+
+  showContinueButton() {
+    this.dialogueContinueButton.style.display = "block";
+  }
+
+  hideContinueButton() {
+    this.dialogueContinueButton.style.display = "none";
+  }
+
+  setGameOver(fromExit) {
+    this.stopBackgroundMusic();
+    
+    if (this.gameSuccessful) {
+      this.gameOverImage.src = "assets/assets/victory.png";
+      this.playVictoryMusic();
+    } else {
+      this.gameOverImage.src = "assets/assets/game-over.png";
+      this.playGameOverMusic();
+    }
+
+    if (fromExit) {
+      this.gameOverText.textContent = "You lost! Shyguy ran away!";
+      return;
+    }
+
+    this.gameOverText.textContent = this.gameSuccessful
+      ? "You won! Shyguy got a date!"
+      : "You lost! Shyguy got rejected!";
+  }
+
+  handleDialogueContinue() {
+    this.clearChat(this.dialogueChatContainer);
+
+    // Hide character images
+    const leftCharacterImg = document.getElementById("leftCharacterImg");
+    const rightCharacterImg = document.getElementById("rightCharacterImg");
+
+    if (leftCharacterImg) {
+      leftCharacterImg.style.display = "none";
+    }
+    if (rightCharacterImg) {
+      rightCharacterImg.style.display = "none";
+    }
+
+    // decide if game is over
+    if (this.gameOver) {
+      this.setGameOver(false);
+      this.switchView("gameOver");
+      return;
+    }
+
+    // Enable push if shyguy has had at least one beer
+    if (this.shyguy.num_beers > 0) {
+      this.enablePush();
+    }
+
+    this.switchView("game");
+    this.shyguyLLM.getShyGuyResponse("").then((response) => {
+      const next_action = response.action;
+
+      this.resolveAction(next_action);
+    });
+  }
+
+  disableGameInput() {
+    this.sendButton.setAttribute("disabled", "");
+    this.microphoneButton.setAttribute("disabled", "");
+    this.messageInput.setAttribute("disabled", "");
+  }
+
+  enableGameInput() {
+    this.sendButton.removeAttribute("disabled");
+    this.microphoneButton.removeAttribute("disabled");
+    this.messageInput.removeAttribute("disabled");
+  }
+
+  playBackgroundMusic() {
+    this.backgroundMusic.play().catch(error => {
+      console.error("Error playing background music:", error);
+    });
+  }
+
+  stopBackgroundMusic() {
+    this.backgroundMusic.pause();
+    this.backgroundMusic.currentTime = 0;
+  }
+
+  playGameOverMusic() {
+    this.gameOverMusic.play().catch(error => {
+      console.error("Error playing game over music:", error);
+    });
+  }
+
+  playVictoryMusic() {
+    this.victoryMusic.play().catch(error => {
+      console.error("Error playing victory music:", error);
+    });
+  }
+
+  stopAllMusic() {
+    this.stopBackgroundMusic();
+    this.gameOverMusic.pause();
+    this.gameOverMusic.currentTime = 0;
+    this.victoryMusic.pause();
+    this.victoryMusic.currentTime = 0;
+  }
+
+  lowerMusicVolume() {
+    // Store original volumes if not already stored
+    if (!this.originalVolumes) {
+        this.originalVolumes = {
+            background: this.backgroundMusic.volume,
+            gameOver: this.gameOverMusic.volume,
+            victory: this.victoryMusic.volume
+        };
+    }
+    
+    // Lower all music volumes to 20% of their original values
+    this.backgroundMusic.volume = this.originalVolumes.background * 0.2;
+    this.gameOverMusic.volume = this.originalVolumes.gameOver * 0.2;
+    this.victoryMusic.volume = this.originalVolumes.victory * 0.2;
+  }
+  lowerMusicVolumeALot() {
+    // Store original volumes if not already stored
+    if (!this.originalVolumes) {
+        this.originalVolumes = {
+            background: this.backgroundMusic.volume,
+            gameOver: this.gameOverMusic.volume,
+            victory: this.victoryMusic.volume
+        };
+    }
+    
+    // Lower all music volumes to 20% of their original values
+    this.backgroundMusic.volume = this.originalVolumes.background * 0.01;
+    this.gameOverMusic.volume = this.originalVolumes.gameOver * 0.01;
+    this.victoryMusic.volume = this.originalVolumes.victory * 0.01;
+  }
+
+  restoreMusicVolume() {
+    // Restore original volumes if they exist
+    if (this.originalVolumes) {
+      this.backgroundMusic.volume = this.originalVolumes.background * 0.2;
+      this.gameOverMusic.volume = this.originalVolumes.gameOver * 0.2;
+      this.victoryMusic.volume = this.originalVolumes.victory * 0.2;
+    }
+  }
+}

src/index.js

@@ -0,0 +1,9 @@
+import { Game } from "./game.js";
+
+
+
+// start the game when DOM is loaded
+document.addEventListener("DOMContentLoaded", () => {
+  const game = new Game();
+  game.run();
+});

src/llm.js

@@ -0,0 +1,183 @@
+export class LLM {
+  constructor() {
+    this.apiKey = "vvO2N5PA9dj8cO6BwcIB8oH4YRnQI3Tn";
+  }
+
+  async getChatCompletion(systemPrompt, userInput) {
+    const messages = [
+      {
+        role: "system",
+        content: systemPrompt,
+      },
+      {
+        role: "user",
+        content: userInput,
+      },
+    ];
+
+    try {
+      const response = await fetch("https://api.mistral.ai/v1/chat/completions", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${this.apiKey}`,
+        },
+        body: JSON.stringify({
+          model: "mistral-large-latest",
+          messages: messages,
+          temperature: 0.7,
+          max_tokens: 150,
+        }),
+      });
+
+      const data = await response.json();
+      return data.choices[0].message.content;
+    } catch (error) {
+      console.error("LLM Error:", error);
+      throw error;
+    }
+  }
+
+  async #getFunctionCall(systemPrompt, userInput, tools) {
+    const messages = [
+      {
+        role: "system",
+        content: systemPrompt,
+      },
+      {
+        role: "user",
+        content: userInput,
+      },
+    ];
+
+    try {
+      const response = await fetch("https://api.mistral.ai/v1/chat/completions", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${this.apiKey}`,
+        },
+        body: JSON.stringify({
+          model: "mistral-large-latest",
+          messages: messages,
+          tools: tools,
+          tool_choice: "any", // Forces tool use
+        }),
+      });
+
+      const data = await response.json();
+
+      // Extract function call details from the response
+      const toolCall = data.choices[0].message.tool_calls[0];
+      return {
+        functionName: toolCall.function.name,
+        arguments: JSON.parse(toolCall.function.arguments),
+        toolCallId: toolCall.id,
+      };
+    } catch (error) {
+      console.error("Function Call Error:", error);
+      throw error;
+    }
+  }
+
+  async getFunctionKey(functionDescriptions, prompt) {
+    // Convert the key-value pairs into the tools format required by the API
+    const tools = functionDescriptions.map(({ key, description, parameters = {} }) => ({
+      type: "function",
+      function: {
+        name: key,
+        description: description,
+        parameters: {
+          type: "object",
+          properties: {
+            ...Object.fromEntries(
+              Object.entries(parameters).map(([paramName, paramConfig]) => [
+                paramName,
+                {
+                  type: paramConfig.type || "string", // Use provided type or default to "string"
+                  description: paramConfig.description,
+                },
+              ])
+            ),
+          },
+          required: Object.keys(parameters), // Make all parameters required
+        },
+      },
+    }));
+
+    // Use the private getFunctionCall method to make the API call
+    const result = await this.#getFunctionCall(
+      "You are a helpful assistant. Based on the user's input, choose the most appropriate function to call.",
+      prompt,
+      tools
+    );
+
+    return {
+      functionName: result.functionName,
+      parameters: result.arguments,
+    };
+  }
+
+  async getJsonCompletion(systemPrompt, userInput) {
+    const messages = [
+      {
+        role: "system",
+        content: systemPrompt,
+      },
+      {
+        role: "user",
+        content: userInput,
+      },
+    ];
+
+    try {
+      const response = await fetch("https://api.mistral.ai/v1/chat/completions", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${this.apiKey}`,
+        },
+        body: JSON.stringify({
+          model: "mistral-large-latest",
+          messages: messages,
+          temperature: 0.7,
+          max_tokens: 256,
+          response_format: { type: "json_object" },
+        }),
+      });
+
+      const data = await response.json();
+      console.log(data);
+      return JSON.parse(data.choices[0].message.content);
+    } catch (error) {
+      console.error("JSON LLM Error:", error);
+      throw error;
+    }
+  }
+}
+
+export default LLM;
+
+// Function call Usage example
+// const functionDescriptions = [
+//     {
+//         key: "searchProducts",
+//         description: "Search for products in the catalog",
+//         parameters: {
+//             query: {
+//                 type: "string",
+//                 description: "Search query"
+//             },
+//             maxPrice: {
+//                 type: "number",
+//                 description: "Maximum price filter"
+//             },
+//             inStock: {
+//                 type: "boolean",
+//                 description: "Filter for in-stock items only"
+//             }
+//         }
+//     }
+// ];
+
+// const result = await llm.getFunctionKey(functionDescriptions, "Find red shoes in footwear");

src/shyguy.js

@@ -0,0 +1,127 @@
+import LLM from "./llm";
+
+export class Shyguy {
+    constructor() {
+        this.num_beers = 0;
+        this.courage = 1;
+        this.personality = "This is the Shyguy. He is shy and introverted. He is also a bit of a nerd. He fell in love with Jessica. With Jessica, he talks about algorithms.";
+        this.lessons_learned = "";
+        this.conversation_history = "";
+        this.song_playing = "Let it be";
+        this.imgpath = "assets/assets/shyguy_headshot.jpeg";
+        this.last_actions = [];
+    }
+
+    getSystemPrompt() {
+        if (this.num_beers >= 3) {
+            return `${this.personality}. His courage is ${this.courage} on the level 1 to 10. If his courage is higher than 5, he is self-confident. He had too many beers and he is drunk. He talks about how drunk he is. Follow the following lessons: ${this.lessons_learned}`;
+        } else if (this.num_beers == 2) {
+            return `This is Shyguy. He had two beers, so he feels relaxed and he can talk with anyone. Follow the following lessons: ${this.lessons_learned}`;
+        }
+        else {
+            return `${this.personality}. He had ${this.num_beers} numbers of beers and his courage is ${this.courage} on the level 1 to 10. If his courage is higher than 5, he is self-confident. After having 3 bears, he says single words with a lot of hesitation and says that he feels bad and he talks about how drunk he is. If courage is low, he hesitates to speak. Follow the following lessons: ${this.lessons_learned}`;
+        }
+    }
+
+    appendLesson(lesson) {
+        this.lessons_learned += lesson + "\n";
+    }
+
+    appendConversationHistory(conversation_history) {
+        this.conversation_history += conversation_history + "\n";
+    }
+
+    async learnLesson(entityName){
+        const summaryLLM = new LLM();
+        const summary = await summaryLLM.getChatCompletion(
+            `Summarize in one sentence what Shyguy should say when talking to ${entityName}. Do not confuse Jessica and Jessica's sister. If there is nothing relevant about what to say to Jessica, say Nothing relevant.`,
+            this.conversation_history
+        );
+        this.appendLesson(`When talking to ${entityName}, ${summary}`);
+    }
+
+    async learnFromWingman(wingman_message) {
+        const summaryLLM = new LLM();
+        console.log("Wingman message: ", wingman_message);
+        const summary = await summaryLLM.getChatCompletion(
+            `Give a summary of what is learned from the message. Summary is one sentence. The wingman is always talking. For example, if the wingman says "Let's have a beer", the output should be "Shyguy wants a beer". If the wingman says "Let's have vodka", the output should be "Shyguy wants vodka".`,
+            wingman_message
+        );
+        this.appendLesson(summary);
+    }
+
+    getAvailableActions() {
+        let actions = {};
+        const lastAction = this.last_actions[this.last_actions.length - 1];
+
+        // When sober, can only go to the bar or home
+        if (this.num_beers === 0) {
+            actions = {
+                "go_bar": {
+                    description: "Head to the bar.",
+                    location: "bar",
+                },
+                "go_home": {
+                    description: "Give up and head home",
+                    location: "exit",
+                },
+                "stay_idle": {
+                    description: "Stay idle",
+                    location: "idle",
+                }
+            };
+        }
+        else if (this.num_beers >= 2) {
+            // After 2+ beers, all actions except going home are available
+            actions = {
+                "go_bar": {
+                    description: "Head to the bar for liquid courage", 
+                    location: "bar",
+                },
+                "go_dj": {
+                    description: "Talk to the DJ about playing a song",
+                    location: "dj_booth",
+                },
+                "go_sister": {
+                    description: "Approach your crush's sister",
+                    location: "sister",
+                },
+                "go_girl": {
+                    description: "Approach your crush",
+                    location: "girl",
+                }
+            };
+        } else {
+            // After 1 beer but less than 2, all actions are available
+            actions = {
+                "go_bar": {
+                    description: "Head to the bar for liquid courage",
+                    location: "bar",
+                },
+                "go_home": {
+                    description: "Give up and head home",
+                    location: "exit",
+                },
+                "go_dj": {
+                    description: "Talk to the DJ about playing a song",
+                    location: "dj_booth",
+                },
+                "go_sister": {
+                    description: "Approach your crush's sister",
+                    location: "sister",
+                },
+                "go_girl": {
+                    description: "Approach your crush",
+                    location: "girl",
+                }
+            };
+        }
+
+        // Remove the last action from available actions
+        if (lastAction && actions[lastAction]) {
+            delete actions[lastAction];
+        }
+
+        return actions;
+    }
+}

src/shyguy_llm.js

@@ -0,0 +1,109 @@
+import { LLM } from "./llm.js";
+export class ShyGuyLLM {
+  constructor(shyguy) {
+    this.llm = new LLM();
+    this.shyguy = shyguy;
+    this.currentConversation = [];  // Array to store current conversation messages
+    const availableActions = this.shyguy.getAvailableActions();
+    this.baseSystemPrompt = `You are ShyGuy, a socially awkward character at a homecoming party. You are shy.
+        The wingman progressively makes you more confident, and if you drink alcohol.
+        You know the wingman, he is your friend. You are talking to him.
+        You are willing to have a little alcohol.
+        The action should correspond to the dialogue.
+        Your responses should be in JSON format with two fields:
+        enum action {
+            ${Object.keys(availableActions).join(", ")}
+        }
+            for example :
+        {
+            "action": "go_bar",
+            "dialogue": "Okay, let's go to the bar."
+        }`;
+    }
+    
+    getSystemPrompt() {
+        let addToPrompt = "";
+        // Add historical conversation context if it exists
+        if (this.shyguy.conversation_history) {
+            addToPrompt += `\n\nPrevious interactions:\n${this.shyguy.conversation_history}`;
+        }
+        if (this.shyguy.num_beers > 0) {
+            addToPrompt += `You are likely to go to the DJ or sister.\n`;
+        }
+        if (this.shyguy.num_beers > 2) {
+            addToPrompt += `You are likely to go to the DJ or sister. You are very likely to go to the girl. You feel confident about talking to the girl.\n`;
+        }
+        if (this.shyguy.num_beers > 3) {
+            addToPrompt += `You are drunk and you start talking about how bad you feel. You are annoying. You talk about algorithms and then how bad you feel.\n`;
+        }
+        if (this.shyguy.courage < 2) {
+            addToPrompt += `You are shy. However, you believe wingman.`;
+        }
+        if (this.shyguy.courage >= 2) {
+            addToPrompt += `You talk normally.`;
+        }
+        if (this.shyguy.courage > 5) {
+            addToPrompt += `You are self-confident.`;
+        }
+        if (this.shyguy.courage > 8) {
+            addToPrompt += `You are too self-confident and annoying.`;
+        }
+        addToPrompt += `\nYou drank ${this.shyguy.num_beers} beers. Your courage is ${this.shyguy.courage}.`;
+        if (this.currentConversation.length > 0) {
+            addToPrompt += `\n\nCurrent conversation context:\n`;
+            this.currentConversation.forEach(msg => {
+                addToPrompt += `${msg.role}: ${msg.content}\n`;
+            });
+        }
+
+        return this.baseSystemPrompt + addToPrompt;
+    }
+
+    addToCurrentConversation(role, content) {
+        this.currentConversation.push({
+            role: role,
+            content: content
+        });
+    }
+
+    clearCurrentConversation() {
+        this.currentConversation = [];
+    }
+
+    async getShyGuyResponse(player_message) {
+        try {
+            const availableActions = this.shyguy.getAvailableActions();
+            const actionsPrompt = `\nYour currently available actions are: ${Object.keys(availableActions)
+                .map((action) => `\n- ${action}: ${availableActions[action].description}`)
+                .join("")}`;
+
+            // Add the situation to current conversation
+            this.addToCurrentConversation('wingman', player_message);
+
+            const fullPrompt = this.getSystemPrompt() + actionsPrompt;
+            const response = await this.llm.getJsonCompletion(fullPrompt, player_message);
+
+            // Add ShyGuy's response to current conversation
+            this.addToCurrentConversation('shyguy', response.dialogue);
+
+            // Add to overall conversation history
+            this.shyguy.conversation_history += `\nShyguy: ${response.dialogue}\n`;
+
+            // Validate response format
+            if (!response.action || !response.dialogue) {
+                throw new Error("Invalid response format from LLM");
+            }
+
+            return {
+                action: response.action,
+                dialogue: response.dialogue,
+            };
+        } catch (error) {
+            console.error("ShyGuy Response Error:", error);
+            return {
+                action: "go_home",
+                dialogue: "Umm... I... uh...",
+            };
+        }
+    }
+}

src/speech_to_text.js

@@ -0,0 +1,66 @@
+export class SpeechToTextClient {
+    constructor() {
+        // this.apiKey = "HF_API_KEY";
+        this.isRecording = false;
+        this.mediaRecorder = null;
+        this.audioChunks = [];
+    }
+
+    async startRecording() {
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            this.mediaRecorder = new MediaRecorder(stream);
+            this.audioChunks = [];
+            
+            this.mediaRecorder.ondataavailable = (event) => {
+                this.audioChunks.push(event.data);
+            };
+
+            this.mediaRecorder.start();
+            this.isRecording = true;
+        } catch (error) {
+            console.error("Error starting recording:", error);
+            throw error;
+        }
+    }
+
+    async stopRecording() {
+        return new Promise((resolve, reject) => {
+            this.mediaRecorder.onstop = async () => {
+                try {
+                    const audioBlob = new Blob(this.audioChunks, { type: 'audio/webm' });
+                    const result = await this.transcribeAudio(audioBlob);
+                    resolve(result);
+                } catch (error) {
+                    reject(error);
+                }
+            };
+            
+            this.mediaRecorder.stop();
+            this.isRecording = false;
+            this.mediaRecorder.stream.getTracks().forEach(track => track.stop());
+        });
+    }
+
+    async transcribeAudio(audioBlob) {
+        try {
+            const response = await fetch(
+                "https://q86j6jmwc3jujazp.us-east-1.aws.endpoints.huggingface.cloud",
+                {
+                    headers: { 
+                        "Accept": "application/json",
+                        "Authorization": `Bearer ${this.apiKey}`,
+                        "Content-Type": "audio/webm"
+                    },
+                    method: "POST",
+                    body: audioBlob,
+                }
+            );
+            const result = await response.json();
+            return result;
+        } catch (error) {
+            console.error("Error transcribing audio:", error);
+            throw error;
+        }
+    }
+}