Upload 109 files

README.md

@@ -3,8 +3,8 @@ title: The Last Message
 emoji: 📱
 colorFrom: gray
 colorTo: red
-sdk: docker
-sdk_version: 5.13.1
+sdk: gradio
+sdk_version: "3.50.2"
 app_file: app.py
 pinned: false
 ---
@@ -21,4 +21,4 @@ docker build -t p5js-game .
 
 # Run the container
 
-docker run -p 8000:8000 p5js-game
+docker run -p 8000:8000 p5js-game

static/assets/css/index-style.css

@@ -83,10 +83,19 @@ main {
 }
 
 .logo img {
-  width: 230px;
+  width: 400px;
   height: auto;
 }
 
+.subtitle {
+  font-family: "HorrorBrush", cursive;
+  color: #fff;
+  font-size: 24px;
+  text-align: center;
+  margin-top: 10px;
+  letter-spacing: 2px;
+}
+
 .menu {
   display: flex;
   margin-top: 250px;

static/assets/css/stress-animations.css

@@ -127,8 +127,18 @@
 #chatSection.very-stress #chatHistory .ai-message {
   background-color: #e92626;
   color: #ffffff;
-  animation: messageShake 0.8s infinite, messageRedPulse 2s infinite;
+  animation: messageShake 0.8s infinite ease-in-out, messageRedPulse 1.5s infinite;
+  border: 2px solid #ff0000;
+  box-shadow: 0 0 15px rgba(255, 0, 0, 0.4);
+  transform-origin: center;
+}
+
+#chatSection.very-stress #chatHistory .assistant-message {
+  background-color: #2d2d2d;
+  color: #ff9999;
   border: 1px solid #ff0000;
+  animation: assistantMessageShake 1.5s infinite ease-in-out;
+  transform-origin: center;
 }
 
 #chatSection.very-stress #chatControls {
@@ -141,10 +151,6 @@
   border: 1px solid #ffffff;
 }
 
-#chatSection.very-stress .chat-name::before {
-  content: "Bae ";
-}
-
 #chatSection.very-stress .chat-name::after {
   content: "💀💀";
 }
@@ -184,15 +190,17 @@
 }
 
 @keyframes messageShake {
-  0%,
-  100% {
-    transform: translateX(0);
+  0%, 100% {
+    transform: translate(0, 0) rotate(0deg);
   }
   25% {
-    transform: translateX(-2px) translateY(-1px);
+    transform: translate(-2px, 1px) rotate(-0.5deg);
+  }
+  50% {
+    transform: translate(0, -1px) rotate(0.5deg);
   }
   75% {
-    transform: translateX(2px) translateY(1px);
+    transform: translate(2px, 1px) rotate(-0.25deg);
   }
 }
 
@@ -210,3 +218,18 @@
     box-shadow: 0 0 0 0 rgba(233, 38, 38, 0.4);
   }
 }
+
+@keyframes assistantMessageShake {
+  0%, 100% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+  25% {
+    transform: translate(-1px, 0.5px) rotate(-0.25deg);
+  }
+  50% {
+    transform: translate(0, -0.5px) rotate(0.25deg);
+  }
+  75% {
+    transform: translate(1px, 0.5px) rotate(-0.125deg);
+  }
+}

static/game/elmnts/clown.js

@@ -24,9 +24,9 @@ class Clown extends Character {
 
     this.behaviorInterval = setInterval(() => {
       this.decideBehavior();
-     // playSound(Math.random() < 0.5 ? 'clownSound1' : 'clownSound2');
+     playSound(Math.random() < 0.5 ? 'clownSound1' : 'clownSound2');
 
-    }, 3000);
+    }, 6000);
   }
 
   decideBehavior() {
@@ -91,6 +91,7 @@ class Clown extends Character {
           this.path = this.findPath(this.characterPos, girlfriendPos);
           if (this.path.length > 0) {
             this.isChasing = true;
+            playSound('clownSeesYou');
             this.moveCharacterAlongPath();
           }
         }

static/game/elmnts/girlfriend.js

@@ -9,8 +9,8 @@ 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;
+        this.independance_rate = 2000;
+        this.game_loops_before_deciding_for_herself = 700;
     }
 
     update(){
@@ -58,6 +58,16 @@ class Girlfriend extends Character {
     }
 
     updateStressLevel(stressChange) {
+
+        if (this.stressLevel <= 60) {
+            setStressLevel('no');
+        } else if (this.stressLevel > 40 && this.stressLevel <= 70) {
+            setStressLevel('low'); 
+        } else if (this.stressLevel > 70) {
+            setStressLevel('very');
+        }
+
+
         // Add or subtract the stress change while keeping within 0-100 range
         this.stressLevel = Math.max(
             0,
@@ -71,6 +81,7 @@ class Girlfriend extends Character {
         }
         switch (response.action) {
             case "go":
+                playSound('gfMove');
                 this.moveToRoom(response.target);
                 break;
             case "hide":
@@ -189,6 +200,7 @@ class Girlfriend extends Character {
             this.moveToPosition(deadBody.pos, () => {
 
                 if (this.inventory.includes("Knife")) {
+                    playSound('useKnife');
                     addProgramaticMessage("No no no ew ew i can't believe im doing this...😭😭😭 ....the key was in here i got it!! I can get out!");
                     deadBody.state = "unusable";
                     this.inventory.push("Key");

static/game/game.js

@@ -16,6 +16,9 @@ let gfMoveSnd;
 let loseSnd;
 let unlockDoorSnd;
 let useKnifeSnd;
+let messageSnd;
+
+let successSnd;
 
 
 
@@ -41,6 +44,8 @@ function preload() {
   loseSnd = loadSound('/assets/sounds/lose.mp3');
   unlockDoorSnd = loadSound('/assets/sounds/unlockdoor.mp3');
   useKnifeSnd = loadSound('/assets/sounds/useknife.mp3');
+  messageSnd = loadSound('/assets/sounds/message.wav');
+  successSnd = loadSound('/assets/sounds/success.mp3');
 }
 
 async function initializeChat() {
@@ -61,6 +66,7 @@ async function initializeChat() {
 }
 
 async function setup() {
+  setStressLevel('no');
 
   baseMapImg = loadImage("/assets/img/appartment/basemap.png");
   girlfriendImg = loadImage("/assets/img/gf.png");

static/game/gameState.js

@@ -7,18 +7,20 @@ class GameState {
     this.game_over = false;
   }
   endGame() {
+    playSound('lose');
     this.game_over = true;
     loseGameModal();
   }
 
   winGame() {
     this.game_over = true;
-    unlockDoorSnd.play();
+    playSound('unlockDoor');
     setTimeout(() => {
       winGameModal();
+      bgMusic.pause();
+      playSound('success');
     }, 3000);
     return;
-    winGame();
   }
 
   update() {

static/game/index.html

@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>The Last Message - A text based horror game</title>
+    <title>Text to Survive - A text based horror escape 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>
 
@@ -43,7 +44,7 @@
           <div id="chatSection">
             <div id="chatHeader">
               <div class="profile-picture">
-                <!-- L'image sera ajoutée ici plus tard -->
+                <img src="/assets/img/profil_pictures/no_stress.webp" alt="Profile Picture">
               </div>
               <div class="chat-name">Bae 💖😘</div>
             </div>
@@ -54,7 +55,7 @@
                 id="prompt"
                 placeholder="Type your message..."
               />
-              <button onclick="Message()">
+              <button onclick="sendMessage()">
                 <svg
                   width="683"
                   height="683"
@@ -130,6 +131,39 @@
           location.reload(); // Reload the page to restart the game
         });
       });
+
+      // Global function to set stress level
+      function setStressLevel(level) {
+        const chatSection = document.getElementById('chatSection');
+        const profilePicture = chatSection.querySelector('.profile-picture img');
+        
+        // Remove all existing stress classes
+        chatSection.classList.remove('no-stress', 'low-stress', 'very-stress');
+        
+        // Add the appropriate class based on stress level
+        switch(level) {
+          case 'no':
+            chatSection.classList.add('no-stress');
+            if (profilePicture) {
+              profilePicture.src = '/assets/img/profil_pictures/no_stress.webp';
+            }
+            break;
+          case 'low':
+            chatSection.classList.add('low-stress');
+            if (profilePicture) {
+              profilePicture.src = '/assets/img/profil_pictures/low_stress.webp';
+            }
+            break;
+          case 'very':
+            chatSection.classList.add('very-stress');
+            if (profilePicture) {
+              profilePicture.src = '/assets/img/profil_pictures/very_stress.webp';
+            }
+            break;
+          default:
+            console.error('Invalid stress level:', level);
+        }
+      }
     </script>
     
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>

static/game/utilities/chat.js

@@ -129,27 +129,17 @@ function addMessageToChat(role, content) {
   chatMessages.push({ role, content });
 
   if (role === "assistant" && localStorage.getItem("isSoundOn") !== "false") {
-    playMessageSound();
+    playSound('message');
   }
 }
 
-// Update Message function to use girlfriend instance
-function Message() {
-  if (girlfriend) {
-    // Play message sound when sending a message
-    if (localStorage.getItem("isSoundOn") !== "false") {
-      playMessageSound();
-    }
-    sendMessage();
-  }
-}
 
 // Allow sending message with Enter
 document.addEventListener("DOMContentLoaded", () => {
   document.getElementById("prompt").addEventListener("keypress", function (e) {
     if (e.key === "Enter") {
       e.preventDefault();
-      Message();
+      sendMessage();
     }
   });
 
@@ -157,11 +147,9 @@ document.addEventListener("DOMContentLoaded", () => {
     const bgMusic = document.getElementById("bgMusic");
     bgMusic.currentTime = 10;
     bgMusic.play().catch((error) => {
-      console.log("Autoplay prevented:", error);
       isSoundOn = false;
       updateSoundIcon();
     });
   } catch (error) {
-    console.error("Error playing audio:", error);
   }
 });

static/game/utilities/sound.js

@@ -1,7 +1,8 @@
-
 function playSound(sound) {
     if (isSoundOn) {
         let soundToPlay;
+
+        // Determine which sound to play
         switch (sound) {
             case 'clownSound1':
                 soundToPlay = clownSound1Snd;
@@ -24,15 +25,30 @@ function playSound(sound) {
             case 'useKnife':
                 soundToPlay = useKnifeSnd;
                 break;
+            case 'message':
+                soundToPlay = messageSnd;
+                break;
+            case 'success':
+                soundToPlay = successSnd;
+                break;
         }
-        if (soundToPlay) {
-            soundToPlay.stop(); // Stop any existing playback
-            soundToPlay.loop(false); // Ensure looping is disabled
+
+        // Play the sound if it's defined and loaded
+        if (soundToPlay && soundToPlay.isLoaded()) {
+            soundToPlay.setLoop(false); // Ensure looping is disabled
+            soundToPlay.playMode('restart'); // Set play mode to 'restart'
+            if (soundToPlay.isPlaying()) {
+                soundToPlay.stop(); // Stop any existing playback
+            }
             soundToPlay.play(); // Play the sound once
+        } else {
+            console.log('Sound file is not loaded or undefined.');
         }
     }
 }
 
+
+
 function toggleSound() {
     isSoundOn = !isSoundOn;
     localStorage.setItem("isSoundOn", isSoundOn.toString());
@@ -42,9 +58,7 @@ function toggleSound() {
             bgMusic.currentTime = 10;
         }
         bgMusic.play();
-        if (girlfriend && girlfriend.isMoving) {
-            handleWalkingSound(true);
-        }
+       
     } else {
         bgMusic.pause();
     }

static/howto/how-to-play-2.html

@@ -4,7 +4,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Through Their Eyes - How to Play</title>
+    <title>Text to Survive - A text based horror escape game</title>
+
     <link rel="stylesheet" href="../assets/css/index-style.css" />
     <link rel="stylesheet" href="../assets/css/how-to-play.css" />
   </head>

static/howto/how-to-play-3.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Through Their Eyes - How to Play</title>
+    <title>Text to Survive - A text based horror escape game</title>
     <link rel="stylesheet" href="../assets/css/index-style.css" />
     <link rel="stylesheet" href="../assets/css/how-to-play.css" />
   </head>

static/howto/how-to-play-4.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Through Their Eyes - How to Play</title>
+    <title>Text to Survive - A text based horror escape game</title>
     <link rel="stylesheet" href="../assets/css/index-style.css" />
     <link rel="stylesheet" href="../assets/css/how-to-play.css" />
   </head>

static/howto/how-to-play.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Through Their Eyes - How to Play</title>
+    <title>Text to Survive - A text based horror escape game</title>
     <link rel="stylesheet" href="../assets/css/index-style.css" />
     <link rel="stylesheet" href="../assets/css/how-to-play.css" />
   </head>

static/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Through Their Eyes</title>
+    <title>Text to Survive - A text based horror escape game</title>
     <link rel="stylesheet" href="assets/css/index-style.css" />
   </head>
   <body>
@@ -19,7 +19,8 @@
 
     <main>
       <div class="logo">
-        <img src="assets/img/logo.png" alt="Through Their Eyes" />
+        <img src="assets/img/logo.svg" alt="Through Their Eyes" />
+        <p class="subtitle">A text-based horror escape game</p>
       </div>
 
       <nav class="menu">