Upload 108 files

static/assets/css/popup.css

@@ -0,0 +1,236 @@
+@font-face {
+  font-family: "HorrorBrush";
+  src: url("/static/assets/fonts/horrorbrush.ttf") format("truetype");
+}
+
+.popup-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.202);
+  backdrop-filter: blur(8px);
+  z-index: 1000;
+  display: block;
+}
+
+.popup-loser {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 800px;
+  height: 500px;
+  background-color: #141313;
+  border-radius: 20px;
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
+  z-index: 1001;
+  display: none;
+  overflow: hidden;
+}
+
+.popup-loser .clown {
+  position: absolute;
+  bottom: -5px;
+  right: -5px;
+  width: 300px;
+  height: auto;
+  z-index: 1002;
+}
+
+.popup-loser .blood-top {
+  position: absolute;
+  top: -100px;
+  left: -100px;
+  width: 300px;
+  height: auto;
+  z-index: 1002;
+}
+
+.popup-loser .blood-bottom {
+  position: absolute;
+  bottom: -100px;
+  right: -100px;
+  width: 300px;
+  height: auto;
+  transform: rotate(180deg);
+  z-index: 1001;
+}
+
+.popup-loser .title {
+  position: absolute;
+  left: 40%;
+  transform: translateX(-50%);
+  font-size: 120px;
+  font-weight: bold;
+  color: #9b0000;
+  text-shadow: 10px 10px 4px #4d0000;
+  font-family: "HorrorBrush", cursive;
+  z-index: 1003;
+}
+
+.popup-loser .title-glow {
+  position: absolute;
+  top: 50%;
+  left: 40%;
+  transform: translate(-50%, -50%);
+  width: 600px;
+  height: 600px;
+  background: radial-gradient(
+    circle,
+    rgba(155, 0, 0, 0.2) 0%,
+    rgba(0, 0, 0, 0) 90%
+  );
+  z-index: 1002;
+  pointer-events: none;
+}
+
+.popup-loser .play-again {
+  position: absolute;
+  bottom: 130px;
+  left: 40%;
+  transform: translateX(-50%);
+  padding: 15px 40px;
+  min-width: 230px;
+  font-size: 42px;
+  font-family: "HorrorBrush", cursive;
+  color: #ffffff;
+  background-color: #9b0000;
+  border-radius: 15px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 5px 15px rgba(155, 0, 0, 0.4);
+  z-index: 1003;
+  letter-spacing: 2px;
+  line-height: 1;
+  white-space: nowrap;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.popup-loser .play-again:hover {
+  background-color: #cc0000;
+  transform: translateX(-50%) scale(1.05);
+  box-shadow: 0 8px 20px rgba(155, 0, 0, 0.6);
+}
+
+/* Popup Winner */
+.popup-winner {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 800px;
+  height: 500px;
+  border-radius: 20px;
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
+  z-index: 1001;
+  display: block;
+  overflow: hidden;
+  background-image: url("/static/assets/img/popup/background.jpg");
+  background-size: cover;
+  background-position: center;
+}
+
+.popup-winner .win-text {
+  position: absolute;
+  top: 35%;
+  left: 35%;
+  transform: translate(-50%, -50%);
+  width: 60%;
+  height: auto;
+  z-index: 1003;
+}
+
+.popup-winner .fuck {
+  position: absolute;
+  bottom: -10px;
+  right: -10px;
+  width: 350px;
+  height: auto;
+  z-index: 1004;
+}
+
+.popup-winner .stars1 {
+  position: absolute;
+  right: 40px;
+  left: 80%;
+  top: 0%;
+  width: 200px;
+  height: auto;
+  z-index: 1002;
+}
+
+.popup-winner .stars2 {
+  position: absolute;
+  bottom: -10px;
+  right: 40px;
+  width: 500px;
+  height: auto;
+  z-index: 1002;
+}
+
+.popup-winner .play-again {
+  position: absolute;
+  bottom: 40px;
+  left: 27%;
+  top: auto;
+  transform: translateX(-50%);
+  padding: 20px 60px;
+  min-width: 350px;
+  height: 80px;
+  font-size: 30px;
+  font-family: "Comic Sans MS", cursive;
+  color: #ffffff;
+  background: linear-gradient(45deg, #ff69b4, #ff1493);
+  border: 3px solid #fff;
+  border-radius: 40px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 5px 20px rgba(255, 105, 180, 0.6),
+    inset 0 0 20px rgba(255, 255, 255, 0.4);
+  z-index: 1003;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  animation: sparkle 2s infinite;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+.popup-winner .play-again:hover {
+  transform: translateX(-50%) scale(1.05);
+  background: linear-gradient(45deg, #ff1493, #ff69b4);
+  box-shadow: 0 8px 25px rgba(255, 105, 180, 0.8),
+    inset 0 0 30px rgba(255, 255, 255, 0.6);
+  letter-spacing: 3px;
+}
+
+.popup-winner .play-again::before {
+  content: "✨";
+  position: absolute;
+  left: 25px;
+}
+
+.popup-winner .play-again::after {
+  content: "✨";
+  position: absolute;
+  right: 25px;
+}
+
+@keyframes sparkle {
+  0% {
+    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff69b4;
+  }
+  50% {
+    text-shadow: 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff1493;
+  }
+  100% {
+    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff69b4;
+  }
+}

static/assets/css/stress-animations.css

@@ -0,0 +1,212 @@
+/* Classes de base pour la photo de profil */
+#chatSection .profile-picture {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
+  margin-right: 10px;
+}
+
+#chatSection .profile-picture img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* État: No Stress */
+#chatSection.no-stress .profile-picture {
+  border: 2px solid #607ab1;
+}
+
+#chatSection.no-stress .chat-name {
+  color: #333;
+}
+
+/* État: Low Stress - Animation de pulsation modérée */
+#chatSection.low-stress .profile-picture {
+  border: 2px solid #ffa500;
+  animation: lowStressPulse 1.5s infinite;
+  box-shadow: 0 0 5px rgba(255, 165, 0, 0.3);
+}
+
+#chatSection.low-stress .chat-name {
+  animation: lowStressTextPulse 1.5s infinite;
+}
+
+#chatSection.low-stress #chatHistory .ai-message {
+  background-color: #ffa500;
+  color: #ffffff;
+  animation: lowStressMessagePulse 2s infinite,
+    lowStressMessageScale 1.5s infinite;
+  border: 1px solid #ffa500;
+}
+
+@keyframes lowStressPulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.3);
+    transform: scale(1);
+  }
+  50% {
+    box-shadow: 0 0 10px 3px rgba(255, 165, 0, 0.5);
+    transform: scale(1.03);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(255, 165, 0, 0);
+    transform: scale(1);
+  }
+}
+
+@keyframes lowStressTextPulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes lowStressMessagePulse {
+  0% {
+    background-color: #ffa500;
+    box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.3);
+  }
+  50% {
+    background-color: #ffb733;
+    box-shadow: 0 0 8px 0 rgba(255, 165, 0, 0.4);
+  }
+  100% {
+    background-color: #ffa500;
+    box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.3);
+  }
+}
+
+@keyframes lowStressMessageScale {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.02);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+/* État: Very Stress - Animation de pulsation intense */
+#chatSection.very-stress {
+  background-color: #1a1a1a;
+  transition: background-color 0.3s ease;
+}
+
+#chatSection.very-stress #chatHeader {
+  background-color: #1a1a1a;
+  transition: background-color 0.3s ease;
+}
+
+#chatSection.very-stress .profile-picture {
+  border: 3px solid #ff0000;
+  animation: veryStressPulse 0.8s infinite;
+  box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
+}
+
+#chatSection.very-stress .chat-name {
+  color: #ff0000;
+  animation: veryStressTextPulse 0.8s infinite;
+  font-weight: bold;
+  text-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
+}
+
+#chatSection.very-stress #chatHistory {
+  background-color: #1a1a1a;
+  color: #ffffff;
+}
+
+#chatSection.very-stress #chatHistory .ai-message {
+  background-color: #e92626;
+  color: #ffffff;
+  animation: messageShake 0.8s infinite, messageRedPulse 2s infinite;
+  border: 1px solid #ff0000;
+}
+
+#chatSection.very-stress #chatControls {
+  background-color: #1a1a1a;
+}
+
+#chatSection.very-stress #prompt {
+  background-color: #2d2d2d;
+  color: #ffffff;
+  border: 1px solid #ffffff;
+}
+
+#chatSection.very-stress .chat-name::before {
+  content: "Bae ";
+}
+
+#chatSection.very-stress .chat-name::after {
+  content: "💀💀";
+}
+
+#chatSection.very-stress .chat-name span {
+  display: none;
+}
+
+@keyframes veryStressPulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.5);
+    transform: scale(1);
+  }
+  50% {
+    box-shadow: 0 0 15px 5px rgba(255, 0, 0, 0.7);
+    transform: scale(1.05);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
+    transform: scale(1);
+  }
+}
+
+@keyframes veryStressTextPulse {
+  0% {
+    text-shadow: 0 0 0 rgba(255, 0, 0, 0);
+    transform: scale(1);
+  }
+  50% {
+    text-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
+    transform: scale(1.08);
+  }
+  100% {
+    text-shadow: 0 0 0 rgba(255, 0, 0, 0);
+    transform: scale(1);
+  }
+}
+
+@keyframes messageShake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-2px) translateY(-1px);
+  }
+  75% {
+    transform: translateX(2px) translateY(1px);
+  }
+}
+
+@keyframes messageRedPulse {
+  0% {
+    background-color: #e92626;
+    box-shadow: 0 0 0 0 rgba(233, 38, 38, 0.4);
+  }
+  50% {
+    background-color: #ff3333;
+    box-shadow: 0 0 10px 0 rgba(233, 38, 38, 0.6);
+  }
+  100% {
+    background-color: #e92626;
+    box-shadow: 0 0 0 0 rgba(233, 38, 38, 0.4);
+  }
+}

static/game/elmnts/clown.js

@@ -24,6 +24,8 @@ class Clown extends Character {
 
     this.behaviorInterval = setInterval(() => {
       this.decideBehavior();
+     // playSound(Math.random() < 0.5 ? 'clownSound1' : 'clownSound2');
+
     }, 3000);
   }
 

static/game/elmnts/furniture.js

@@ -157,7 +157,7 @@ function getFurniture() {
                 "state": "usable",
                 "in_use": true,
                 "key":"Knife",
-                "locked_msg":"Um... what. the. f. Why is its mouth stitched up? Is the key inside??? i cant open it",
+                "locked_msg":"Um... what. the. f. Why is its mouth stitched up? Is the key inside??? i cant open it, should i look for something to open it with?",
                 "unlocked_msg":"No no no ew ew i can't believe im doing this...😭😭😭 ....the key was in here i got it!! I can get out!",
                 "sprite": [
                     {

static/game/elmnts/girlfriend.js

@@ -9,6 +9,16 @@ class Girlfriend extends Character {
         this.stressLevel = 30;
         this.inventory = [];
         this.knows_about_dead_body = false;
+        this.independance_rate = 3000;
+        this.game_loops_before_deciding_for_herself = this.independance_rate;
+    }
+
+    update(){
+        this.game_loops_before_deciding_for_herself--;
+        if(this.game_loops_before_deciding_for_herself <= 0){
+            this.game_loops_before_deciding_for_herself = this.independance_rate;
+            strongIndependantWoman();
+        }
     }
 
     draw(CELL_SIZE) {
@@ -55,7 +65,10 @@ class Girlfriend extends Character {
         );
     }
 
-    handleAction(response) {
+    handleAction(response, called_by_chat = false) {
+        if(called_by_chat){
+            this.game_loops_before_deciding_for_herself = this.independance_rate;
+        }
         switch (response.action) {
             case "go":
                 this.moveToRoom(response.target);
@@ -151,6 +164,7 @@ class Girlfriend extends Character {
             if (!this.inventory || !this.inventory.includes("Key")) {
                 addProgramaticMessage(the_exit.locked_message);
             } else {
+                this.gameState.winGame();
                 addProgramaticMessage(the_exit.unlocked_message);
             }
         });
@@ -158,13 +172,13 @@ class Girlfriend extends Character {
 
     check(target) {
         if (target === "Bookcase") {
-            let bookcase = this.gameState.getBookcase();
+            let bookcase = this.gameState.map_data.furniture.find(item => item.name === "Bookcase");
             this.moveToPosition(bookcase.pos, () => {
                 addProgramaticMessage(bookcase.msg);
                 bookcase.state = "unusable";
             });
         } else if (target === "Cabinet") {
-            let cabinet = this.gameState.getCabinet();
+            let cabinet =this.gameState.map_data.furniture.find(item => item.name === "Cabinet");
             this.moveToPosition(cabinet.pos, () => {
                 addProgramaticMessage(cabinet.msg);
                 this.inventory.push("Knife");

static/game/game.js

@@ -9,6 +9,17 @@ let baseMapImg;
 let girlfriendImg;
 let clownImg;
 
+let clownSound1Snd;
+let clownSound2Snd;
+let clownSeesYouSnd;
+let gfMoveSnd;
+let loseSnd;
+let unlockDoorSnd;
+let useKnifeSnd;
+
+
+
+
 let isSoundOn =
   localStorage.getItem("isSoundOn") === null
     ? true
@@ -22,7 +33,35 @@ let chatMessages = [];
 
 let furnitureSprites = {};
 
-function setup() {
+function preload() {
+  clownSound1Snd = loadSound('/assets/sounds/clownmove1.mp3');
+  clownSound2Snd = loadSound('/assets/sounds/clownmove2.mp3');
+  clownSeesYouSnd = loadSound('/assets/sounds/clownseesyou.mp3');
+  gfMoveSnd = loadSound('/assets/sounds/gfmove.mp3');
+  loseSnd = loadSound('/assets/sounds/lose.mp3');
+  unlockDoorSnd = loadSound('/assets/sounds/unlockdoor.mp3');
+  useKnifeSnd = loadSound('/assets/sounds/useknife.mp3');
+}
+
+async function initializeChat() {
+  const firstPrompt = gameState.getFirstPrompt();
+  const messages = [
+    {
+      role: "system",
+      content: firstPrompt,
+    },
+  ];
+  try {
+    const response = await mistralAPI.sendMessage(messages);
+    const jsonResponse = JSON.parse(response);
+    addMessageToChat("assistant", jsonResponse.textMessage);
+  } catch (error) {
+    console.error("Error getting initial message:", error);
+  }
+}
+
+async function setup() {
+
   baseMapImg = loadImage("/assets/img/appartment/basemap.png");
   girlfriendImg = loadImage("/assets/img/gf.png");
   clownImg = loadImage("/assets/img/clown.png");
@@ -45,6 +84,8 @@ function setup() {
   let canvas = createCanvas(GRID_COLS * CELL_SIZE, GRID_ROWS * CELL_SIZE);
   canvas.parent("mapWrapper");
   adjustScale();
+  
+  await initializeChat();
 }
 
 function draw() {
@@ -64,12 +105,18 @@ function draw() {
 
 
   if (girlfriend) {
-    girlfriend.drawPath(CELL_SIZE);
+    //girlfriend.drawPath(CELL_SIZE);
     girlfriend.draw(CELL_SIZE);
   }
   if (clown) {
     clown.checkForGirlfriend(girlfriend);
-    clown.drawPath(CELL_SIZE);
+    //clown.drawPath(CELL_SIZE);
     clown.draw(CELL_SIZE);
   }
+
+  gameState.update();
+
+  if (gameState.game_over) {
+    noLoop();
+  }
 }

static/game/gameState.js

@@ -4,38 +4,38 @@ class GameState {
     this.map_data = map_data;
     this.girlfriend = null;
     this.clown = null;
+    this.game_over = false;
+  }
+  endGame() {
+    this.game_over = true;
+    loseGameModal();
+  }
+
+  winGame() {
+    this.game_over = true;
+    unlockDoorSnd.play();
+    setTimeout(() => {
+      winGameModal();
+    }, 3000);
+    return;
+    winGame();
+  }
 
-    this.searchTargets = [
-      "dresser",
-      "desk",
-      "bookcase",
-      "cabinet",
-      "dead body",
-      "fridge",
-      "stove",
-      "coffee table",
-    ];
-
-    this.items = [
-      "lock pick",
-      "book note",
-      "flashlight",
-      "knife",
-      "oil",
-      "remote",
-    ];
-
-    this.useTargets = [
-      "bedroom door",
-      "bookcase",
-      "storage door",
-      "dead body",
-      "coffee table",
-      "TV",
-    ];
-
-    this.inventory = [];
-    this.isHiding = false;
+  update() {
+    this.girlfriend.update();
+    if (this.clown && this.girlfriend) {
+      const clownPos = this.clown.getCharacterPosition();
+      const gfPos = this.girlfriend.getCharacterPosition();
+
+      if (
+        clownPos &&
+        gfPos &&
+        clownPos.x === gfPos.x &&
+        clownPos.y === gfPos.y
+      ) {
+        this.endGame();
+      }
+    }
   }
 
   getTheExit() {
@@ -44,11 +44,6 @@ class GameState {
     );
   }
 
-  getStorage() {
-    return this.map_data.furniture.find(
-      (furniture) => furniture.name === "Storage"
-    );
-  }
 
   getStressPrompt() {
     const currentStress = this.girlfriend ? this.girlfriend.stressLevel : 50; // Default to 50 if girlfriend not initialized
@@ -100,6 +95,7 @@ Examples:
   }
 `;
   }
+
   getPrompt() {
     return `
 
@@ -108,24 +104,21 @@ You are a JSON girlfriend that is stuck in her boyfriends appartment with an evi
 Current state:
 - You (the girlfriend) are currently in this Room >> ${this.girlfriend.getCurrentRoom()}
 - Your current stress level is ${this.girlfriend.stressLevel}/100
-${
-  this.girlfriend.getIsHiding()
-    ? `- You are currently hiding ${this.girlfriend.currentHidingSpot.hiding_type} the ${this.girlfriend.currentHidingSpot.name}`
-    : ""
-}
-${
-  this.girlfriend.getCurrentRoom() === this.clown.getCurrentRoom()
-    ? "- OMG YOU ARE IN THE SAME ROOM AS THE CLOWNNNN!!!"
-    : "- You have no idea where the clown is, you will hide if you can, if not leave the room"
-}
-
-${
-  this.girlfriend.getInventory().length > 0
-    ? `- You have the following items in your inventory: ${this.girlfriend
-        .getInventory()
-        .join(", ")}`
-    : ""
-}
+${this.girlfriend.getIsHiding()
+        ? `- You are currently hiding ${this.girlfriend.currentHidingSpot.hiding_type} the ${this.girlfriend.currentHidingSpot.name}`
+        : ""
+      }
+${this.girlfriend.getCurrentRoom() === this.clown.getCurrentRoom()
+        ? "- OMG YOU ARE IN THE SAME ROOM AS THE CLOWNNNN!!!"
+        : "- You have no idea where the clown is, you will hide if you can, if not leave the room"
+      }
+
+${this.girlfriend.getInventory().length > 0
+        ? `- You have the following items in your inventory: ${this.girlfriend
+          .getInventory()
+          .join(", ")}`
+        : ""
+      }
 RESPONSE FORMAT:
 You must ALWAYS respond with a JSON object. 
 Your response should reflect a girlfriend's reaction to her boyfriend's message given this context and following the following structure:
@@ -150,31 +143,29 @@ For hiding instructions ("hide" action):
 }
 VALID HIDING PLACES:
 You are only allowed to hide in these hiding spots no other hiding spots are recognized:
-${
-  this.girlfriend.getAvailableHidingSpots().length > 0
-    ? `- You may hide in these available hiding spots (and thats it): ${this.girlfriend
-        .getAvailableHidingSpots()
-        .map((spot) => `[${spot.hiding_type} ${spot.name}]`)
-        .join(", ")}`
-    : "- There are no available hiding spots in this room"
-}
+${this.girlfriend.getAvailableHidingSpots().length > 0
+        ? `- You may hide in these available hiding spots (and thats it): ${this.girlfriend
+          .getAvailableHidingSpots()
+          .map((spot) => `[${spot.hiding_type} ${spot.name}]`)
+          .join(", ")}`
+        : "- There are no available hiding spots in this room"
+      }
 
 
 For checking/inquiring/going to apecifically the Cabinet or Bookcase instructions ("check" action):
 {
   "action": "check",
-  "target": "she can only check \"Cabinet\" (this is in the kitchen, you can ask if youre not sure) or \"Bookcase\" (this is in  the guest bedroom   you can ask if youre not sure).${
-    this.girlfriend.getKnowsAboutDeadBody()
-      ? ' or "Dead Body" (in the Storage room)'
-      : "you might be asked to check other things be open minded about it ask where, be freaked out if nncecessarry"
-  } 
+  "target": "she can only check \"Cabinet\" (this is in the kitchen, you can ask if youre not sure) or \"Bookcase\" (this is in  the guest bedroom   you can ask if youre not sure).${this.girlfriend.getKnowsAboutDeadBody()
+        ? ' or "Dead Body" (in the Storage room)'
+        : "you might be asked to check other things be open minded about it ask where, be freaked out if nncecessarry"
+      } 
   "textMessage": "[girlfriend's response]"
 }
 
 For exiting the house by the exit in the mainhallway instructions ("exit" action):
 {
   "action": "exit",
-  "target": "The Exit",
+  "target": "The Exit", (the exit is in the main hallway by the way you cal also inted to exit it directly)
   "textMessage": "[girlfriend's response]"
 }
 
@@ -188,11 +179,10 @@ For any other input:
 
 YOUR BEHAVIOR:
 - You are aware of the danger and are extremely distressed. 
-${
-  this.girlfriend.getCurrentRoom() !== this.clown.getCurrentRoom()
-    ? "- You have no idea where the clown is"
-    : ""
-}
+${this.girlfriend.getCurrentRoom() !== this.clown.getCurrentRoom()
+        ? "- You have no idea where the clown is"
+        : ""
+      }
 Your text responses should be:
 -- Brief and urgent
 -- Reflect genuine fear and panic

static/game/index.html

@@ -3,6 +3,7 @@
   <head>
     <title>The Last Message - A text based horror game</title>
     <link rel="stylesheet" href="/static/assets/css/game-style.css" />
+    <link rel="stylesheet" href="/static/assets/css/popup.css" />
   </head>
 
   <body>
@@ -89,11 +90,50 @@
       <source src="/static/assets/sounds/message.wav" type="audio/wav" />
     </audio>
 
-    <audio id="walkingSound" loop>
-      <source src="/static/assets/sounds/walking.mp3" type="audio/mp3" />
-    </audio>
+    <div class="popup-overlay" style="display: none;"></div>
+    <div class="popup-loser" style="display: none;">
+      <div class="title-glow"></div>
+      <h1 class="title">SHE DIED!</h1>
+      <button class="play-again">Play Again</button>
+      <img src="/static/assets/img/blood-2.png" alt="" class="blood-top" />
+      <img src="/static/assets/img/popup/clown_lose.png" alt="" class="clown" />
+      <img src="/static/assets/img/blood-2.png" alt="" class="blood-bottom" />
+    </div>
+
+    <div class="popup-winner" style="display: none;">
+      <img src="/static/assets/img/popup/text.svg" alt="" class="win-text" />
+      <img src="/static/assets/img/popup/fuck.png" alt="" class="fuck" />
+      <img src="/static/assets/img/popup/stars1.png" alt="" class="stars1" />
+      <img src="/static/assets/img/popup/stars2.png" alt="" class="stars2" />
+      <button class="play-again">Play Again</button>
+    </div>
+
+    <script>
+      function winGameModal() {
+        document.querySelector('.popup-overlay').style.display = 'block';
+        document.querySelector('.popup-winner').style.display = 'block';
+        document.querySelector('.popup-loser').style.display = 'none';
+      }
+
+      function loseGameModal() {
+        document.querySelector('.popup-overlay').style.display = 'block';
+        document.querySelector('.popup-loser').style.display = 'block';
+        document.querySelector('.popup-winner').style.display = 'none';
+      }
 
+      // Add click handlers for play again buttons
+      document.querySelectorAll('.play-again').forEach(button => {
+        button.addEventListener('click', () => {
+          document.querySelector('.popup-overlay').style.display = 'none';
+          document.querySelector('.popup-winner').style.display = 'none';
+          document.querySelector('.popup-loser').style.display = 'none';
+          location.reload(); // Reload the page to restart the game
+        });
+      });
+    </script>
+    
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.2/addons/p5.sound.min.js" "></script>
     <script src="/static/game/elmnts/furniture.js"></script>
     <script src="/static/game/gameState.js"></script>
     <script src="/static/game/mistral.js"></script>
@@ -108,28 +148,6 @@
     <script src="/static/game/utilities/draw.js"></script>
     <script src="/static/game/game.js"></script>
 
-    <script>
-      window.onload = async function () {
-        // Get the initial prompt from gameState
-        const firstPrompt = gameState.getFirstPrompt();
-
-        console.log("firstPrompt", firstPrompt);
-
-        const messages = [
-          {
-            role: "system",
-            content: firstPrompt,
-          },
-        ];
-
-        try {
-          const response = await mistralAPI.sendMessage(messages);
-          const jsonResponse = JSON.parse(response);
-          addMessageToChat("assistant", jsonResponse.textMessage);
-        } catch (error) {
-          console.error("Error getting initial message:", error);
-        }
-      };
-    </script>
+  
   </body>
 </html>

static/game/index2.html

@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>The Last Message - A text based horror game</title>
+    <link rel="stylesheet" href="/static/assets/css/game-style.css" />
+    <link rel="stylesheet" href="/static/assets/css/stress-animations.css" />
+    <link rel="stylesheet" href="/static/assets/css/popup.css" />
+  </head>
+
+  <body>
+    <div class="led-bar">
+      <div class="light-beam"></div>
+    </div>
+    <div class="background-elements">
+      <img
+        src="/static/assets/img/blood-2.png"
+        alt=""
+        class="blood blood-top-left"
+      />
+      <img
+        src="/static/assets/img/help.png"
+        alt=""
+        class="blood blood-top-right"
+      />
+      <img
+        src="/static/assets/img/splatter.png"
+        alt=""
+        class="blood splatter"
+      />
+      <img
+        src="/static/assets/img/hand.png"
+        alt=""
+        class="blood blood-bottom-right"
+      />
+    </div>
+    <div id="gameContainer">
+      <div id="mapSection">
+        <div id="mapWrapper" class="map-wrapper">
+          <!-- P5.js canvas goes here -->
+        </div>
+      </div>
+      <div class="phone-mockup">
+        <div class="phone-screen">
+          <div id="chatSection" class="very-stress">
+            <div id="chatHeader">
+              <div class="profile-picture">
+                <img
+                  src="/static/assets/img/profil_pictures/very_stress.webp"
+                  alt="Profile picture"
+                />
+              </div>
+              <div class="chat-name"><span>Bae 💖😘</span></div>
+            </div>
+            <div id="chatHistory"></div>
+            <div id="chatControls">
+              <input
+                type="text"
+                id="prompt"
+                placeholder="Type your message..."
+              />
+              <button onclick="Message()">
+                <svg
+                  width="683"
+                  height="683"
+                  viewBox="0 0 683 683"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M22.2666 1.86666C19.5999 2.93333 16.5333 4.39999 15.4666 5.19999C11.9999 8.13333 9.33325 15.7333 9.33325 22.5333C9.33325 28.1333 65.4666 283.333 66.9333 284.667C67.3333 285.067 339.333 332.267 372.4 337.733C381.733 339.333 389.333 340.933 389.333 341.333C389.333 341.733 381.733 343.333 372.4 344.933C339.2 350.4 67.3333 397.6 66.9333 398C65.4666 399.333 9.33325 654.533 9.33325 660.133C9.33325 675.867 21.0666 685.333 35.8666 681.333C42.6666 679.467 662.267 362 666.4 358.133C671.333 353.733 673.333 348.8 673.333 341.333C673.333 333.867 671.333 328.933 666.4 324.533C662.533 320.933 43.0666 3.19999 36.2666 1.33333C29.9999 -0.400007 28.5333 -0.266674 22.2666 1.86666Z"
+                    fill="white"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Popup Loser -->
+    <div class="popup-overlay"></div>
+    <div class="popup-loser">
+      <div class="title-glow"></div>
+      <h1 class="title">SHE DIED!</h1>
+      <button class="play-again">Play Again</button>
+      <img src="/static/assets/img/blood-2.png" alt="" class="blood-top" />
+      <img src="/static/assets/img/popup/clown_lose.png" alt="" class="clown" />
+      <img src="/static/assets/img/blood-2.png" alt="" class="blood-bottom" />
+    </div>
+
+    <!-- Popup Winner -->
+    <div class="popup-winner" style="display: none;">
+      <img src="/static/assets/img/popup/text.svg" alt="" class="win-text" />
+      <img src="/static/assets/img/popup/fuck.png" alt="" class="fuck" />
+      <img src="/static/assets/img/popup/stars1.png" alt="" class="stars1" />
+      <img src="/static/assets/img/popup/stars2.png" alt="" class="stars2" />
+      <button class="play-again">Play Again</button>
+    </div>
+
+    <div class="sound-button" onclick="toggleSound()">
+      <img
+        src="/static/assets/img/sondon.png"
+        alt="Sound control"
+        id="soundIcon"
+      />
+    </div>
+
+    <audio id="bgMusic" loop>
+      <source src="/static/assets/sounds/music.mp3" type="audio/mp3" />
+    </audio>
+
+    <audio id="messageSound">
+      <source src="/static/assets/sounds/message.wav" type="audio/wav" />
+    </audio>
+
+    <audio id="walkingSound" loop>
+      <source src="/static/assets/sounds/walking.mp3" type="audio/mp3" />
+    </audio>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
+    <script src="/static/game/elmnts/furniture.js"></script>
+    <script src="/static/game/gameState.js"></script>
+    <script src="/static/game/mistral.js"></script>
+    <script src="/static/game/elmnts/character.js"></script>
+    <script src="/static/game/elmnts/girlfriend.js"></script>
+    <script src="/static/game/elmnts/clown.js"></script>
+    <script src="/static/game/elmnts/grid.js"></script>
+    <script src="/static/game/elmnts/apt.js"></script>
+    <script src="/static/game/utilities/sound.js"></script>
+    <script src="/static/game/utilities/helpers.js"></script>
+    <script src="/static/game/utilities/chat.js"></script>
+    <script src="/static/game/utilities/draw.js"></script>
+    <script src="/static/game/game.js"></script>
+  </body>
+</html>

static/game/utilities/chat.js

@@ -20,6 +20,48 @@ async function addProgramaticMessage(message) {
   addMessageToChat("assistant", message);
 }
 
+async function strongIndependantWoman(){
+  
+    const chatHistory = document.getElementById("chatHistory");
+    const loadingIndicator = createLoadingIndicator();
+    chatHistory.appendChild(loadingIndicator);
+    chatHistory.scrollTop = chatHistory.scrollHeight;
+
+  
+    let masterPrompt = gameState.getPrompt();
+
+    const recentMessages = chatMessages.slice(-5);
+  
+    const messages = [
+      { role: "system", content: masterPrompt },
+      ...recentMessages,
+      { role: "user", content: `
+        **your boyfriend has been away from his phone for a while and has not replied promptly to your last message, 
+        you shall based on all that you know decide to take an action, also you're pissed at the boyfriend**
+        you are brave, strong, fabulous and will dosomething about this situation
+        you're gall is to escape the house and avoid the clown at all costs
+        
+        ` },
+    ];
+  
+    const assistantResponse = await mistralAPI.sendMessage(messages);
+  
+    chatHistory.removeChild(loadingIndicator);
+  
+    const jsonStart = assistantResponse.indexOf("{");
+    const jsonEnd = assistantResponse.lastIndexOf("}") + 1;
+    const jsonContent = assistantResponse.substring(jsonStart, jsonEnd);
+    const jsonResponse = JSON.parse(jsonContent);
+  
+    if (jsonResponse.action) {
+      girlfriend.handleAction(jsonResponse, true);
+    }
+  
+    if (jsonResponse.textMessage) {
+      addMessageToChat("assistant", jsonResponse.textMessage);
+    }
+}
+
 async function sendMessage() {
   const prompt = document.getElementById("prompt").value.trim();
   if (!prompt) return;
@@ -30,6 +72,8 @@ async function sendMessage() {
   const chatHistory = document.getElementById("chatHistory");
   const loadingIndicator = createLoadingIndicator();
   chatHistory.appendChild(loadingIndicator);
+  chatHistory.scrollTop = chatHistory.scrollHeight;
+
 
   // First, get the stress prompt and send it
   const stressPrompt = gameState.getStressPrompt();
@@ -40,7 +84,6 @@ async function sendMessage() {
     },
     { role: "user", content: prompt },
   ];
-  console.log("stressMessages", stressMessages);
 
   const stressResponse = await mistralAPI.sendMessage(stressMessages);
   const stressChange = JSON.parse(stressResponse).stressChange || 0;
@@ -67,7 +110,7 @@ async function sendMessage() {
   const jsonResponse = JSON.parse(jsonContent);
 
   if (jsonResponse.action) {
-    girlfriend.handleAction(jsonResponse);
+    girlfriend.handleAction(jsonResponse, true);
   }
 
   if (jsonResponse.textMessage) {

static/game/utilities/sound.js

@@ -1,20 +1,38 @@
-// Make handleWalkingSound globally available
-function handleWalkingSound (isWalking) {
-    const walkingSound = document.getElementById("walkingSound");
-    if (!walkingSound) return;
 
-    if (isWalking && localStorage.getItem("isSoundOn") !== "false") {
-        walkingSound.currentTime = 0;
-        walkingSound.volume = 0.3;
-        walkingSound.play().catch((error) => {
-            console.log("Could not play walking sound:", error);
-        });
-    } else {
-        walkingSound.pause();
+function playSound(sound) {
+    if (isSoundOn) {
+        let soundToPlay;
+        switch (sound) {
+            case 'clownSound1':
+                soundToPlay = clownSound1Snd;
+                break;
+            case 'clownSound2':
+                soundToPlay = clownSound2Snd;
+                break;
+            case 'clownSeesYou':
+                soundToPlay = clownSeesYouSnd;
+                break;
+            case 'gfMove':
+                soundToPlay = gfMoveSnd;
+                break;
+            case 'lose':
+                soundToPlay = loseSnd;
+                break;
+            case 'unlockDoor':
+                soundToPlay = unlockDoorSnd;
+                break;
+            case 'useKnife':
+                soundToPlay = useKnifeSnd;
+                break;
+        }
+        if (soundToPlay) {
+            soundToPlay.stop(); // Stop any existing playback
+            soundToPlay.loop(false); // Ensure looping is disabled
+            soundToPlay.play(); // Play the sound once
+        }
     }
 }
 
-// Update toggleSound to check girlfriend's movement status
 function toggleSound() {
     isSoundOn = !isSoundOn;
     localStorage.setItem("isSoundOn", isSoundOn.toString());
@@ -29,7 +47,6 @@ function toggleSound() {
         }
     } else {
         bgMusic.pause();
-        handleWalkingSound(false);
     }
     updateSoundIcon();
 }