intro screen

app.py

@@ -79,5 +79,8 @@ def get_chat_history(request: Request):
     chat_history = load_chat_history()
     return {"chat_history": chat_history}
 
-# Mount static files AFTER defining API routes
+# Add this before the final static files mount
+app.mount("/images", StaticFiles(directory="static/images"), name="images")
+
+# Keep this as the last mount
 app.mount("/", StaticFiles(directory="static", html=True), name="static")

chat_history.json

@@ -142,5 +142,17 @@
         "message": "LET ME TELL YOU, IT'S GREAT TO HEAR FROM YOU AGAIN. WE'RE JUST GETTING STARTED, AND THERE'S SO MUCH TO DO. WE NEED TO FOCUS ON WHAT'S IMPORTANT AND MAKE AMERICA GREAT AGAIN. KAMALA AND BIDEN HAVE LEFT US WITH A MESS, AND WE NEED TO CLEAN IT UP. SO, LET'S GET OUR PRIORITIES STRAIGHT AND MAKE AMERICA STRONG AND PROSPEROUS AGAIN! WHAT'S ON YOUR MIND TODAY? REMEMBER, AMERICA FIRST, ALWAYS! #MAGA #TRUMP2025 #BUYMYMEMECOIN.\n\nYOU KNOW, SOMETIMES YOU NEED TO SHOW A LITTLE LOVE TO GET THINGS DONE. IT'S LIKE WHEN I SAY, \"I LOVE OUR COUNTRY,\" AND EVERYONE GETS EXCITED. IT'S ALL ABOUT THE HEART, YOU KNOW? BUT LET'S GET BACK TO BUSINESS. WHAT'S YOUR PLAN FOR GREENLAND? REMEMBER, WE NEED TO BE SMART AND STRATEGIC. WE CAN'T JUST RUSH INTO THINGS LIKE THE DEMOCRATS DO. THEY THINK THEY CAN JUST LET IN MILLIONS OF ILLEGALS AND EVERYTHING WILL BE FINE. BUT WE KNOW BETTER, DON'T WE? SO, TELL ME, WHAT'S YOUR STRATEGY FOR GREENLAND? AND REMEMBER, AMERICA FIRST, ALWAYS! #MAGA #TRUMP2025 #BUYMYMEMECOIN."
       }
     }
+  },
+  {
+    "interaction_13": {
+      "user": {
+        "role": "user",
+        "message": "hi"
+      },
+      "trump": {
+        "role": "Trump",
+        "message": "LET ME TELL YOU, IT'S GREAT TO HEAR FROM YOU AGAIN. WE'RE JUST GETTING STARTED, AND THERE'S SO MUCH TO DO. WE NEED TO FOCUS ON WHAT'S IMPORTANT AND MAKE AMERICA GREAT AGAIN. KAMALA AND BIDEN HAVE LEFT US WITH A MESS, AND WE NEED TO CLEAN IT UP. SO, LET'S GET OUR PRIORITIES STRAIGHT AND MAKE AMERICA STRONG AND PROSPEROUS AGAIN! WHAT'S ON YOUR MIND TODAY? REMEMBER, AMERICA FIRST, ALWAYS! #MAGA #TRUMP2025 #BUYMYMEMECOIN.\n\nYOU KNOW, SOMETIMES YOU NEED TO SHOW A LITTLE LOVE TO GET THINGS DONE. IT'S LIKE WHEN I SAY, \"I LOVE OUR COUNTRY,\" AND EVERYONE GETS EXCITED. IT'S ALL ABOUT THE HEART, YOU KNOW? BUT LET'S GET BACK TO BUSINESS. WHAT'S YOUR PLAN FOR GREENLAND? REMEMBER, WE NEED TO BE SMART AND STRATEGIC. WE CAN'T JUST RUSH INTO THINGS LIKE THE DEMOCRATS DO. THEY THINK THEY CAN JUST LET IN MILLIONS OF ILLEGALS AND EVERYTHING WILL BE FINE. BUT WE KNOW BETTER, DON'T WE? SO, TELL ME, WHAT'S YOUR STRATEGY FOR GREENLAND? AND REMEMBER, AMERICA FIRST, ALWAYS! #MAGA #TRUMP2025 #BUYMYMEMECOIN."
+      }
+    }
   }
 ]

static/index.html

@@ -29,7 +29,7 @@
 
   <div class="popup" id="gamePopup">
     <div class="popup-header">
-      <span class="popup-title">Game intro</span>
+      <span class="popup-title">Game Intro</span>
       <div class="popup-controls">
         <button class="control-btn minimize">−</button>
         <button class="control-btn maximize">□</button>
@@ -37,9 +37,8 @@
       </div>
     </div>
     <div class="popup-content">
-      <p>Welcome to the 21st century—where America is thriving on the edge of total collapse! Wokeness has spread like a glorious plague, the Democrats have worked their magic to send inflation soaring, and oil production? Oh, it's practically a fairy tale now. But don't worry, salvation is here! A brand-new, ultra-competent (and just a little unpredictable) president has stepped in to save the day. What could possibly go wrong?</p>
-      <img src="/images/trump_popup.jpg" alt="USA Flag" class="popup-gif">
-      <button class="popup-ok">OK</button>
+      <iframe src="intro.html" class="intro-frame"></iframe>
+      <button class="popup-ok">Start Game</button>
     </div>
   </div>
 
@@ -121,17 +120,24 @@
     });
 
     document.addEventListener('DOMContentLoaded', function() {
-      // Show initial game popup after 2 seconds
+      // Load the intro content
+      fetch('./intro.html')
+        .then(response => response.text())
+        .then(html => {
+          document.getElementById('introContent').innerHTML = html;
+        });
+
+      // Show popup after content is loaded
       setTimeout(() => {
         const popup = document.getElementById('gamePopup');
         popup.style.display = 'block';
       }, 2000);
 
       // Show game over popup after 5 seconds
-      setTimeout(() => {
-        const gameOverPopup = document.getElementById('gameOverPopup');
-        gameOverPopup.style.display = 'block';
-      }, 5000);
+     //setTimeout(() => {
+     //   const gameOverPopup = document.getElementById('gameOverPopup');
+     //   gameOverPopup.style.display = 'block';
+     // }, 5000);
 
       // Initialize game popup controls
       const popup = document.getElementById('gamePopup');

static/intro.html

@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <title>What possibly go Wrong 2025</title>
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+      height: 100%;
+      width: 800px;
+      font-family: Arial, sans-serif;
+      overflow: hidden;
+      background-color: transparent;
+    }
+
+    /* Image de fond qui remplit tout l'écran */
+    body {
+      background: url('/images/intro/Intro.jpg') no-repeat center center;
+      background-size: cover; /* ou 100% auto */
+      position: relative;
+    }
+
+    /* Conteneur du texte */
+    #text-container {
+      position: absolute;
+      top: 10%;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 60%;
+      padding: 20px;
+      background-color: rgba(0, 0, 0, 0.5);
+      border-radius: 8px;
+      color: #fff;
+      text-align: left;
+      font-weight: bold;
+      font-size: 1.2rem;
+      z-index: 3; /* au-dessus des flammes si besoin */
+    }
+
+    /* Conteneur des flammes */
+    #flames {
+      position: absolute;
+      bottom: -50px;  /* Move flames down a bit */
+      left: 0;
+      width: 100%;
+      height: 180px;  /* Increase height */
+      background: url('/images/intro/fire3.png') repeat-x;
+      background-size: auto 180px;  /* Match height */
+      animation: flameAnim 3s steps(10) infinite;
+      pointer-events: none;
+      z-index: 999;
+    }
+
+    @keyframes flameAnim {
+      100% {
+        background-position: -1000px 0; 
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <div id="text-container"></div>
+  <div id="flames"></div>
+
+  <script>
+    const lines = [
+      "Warning !",
+      "This game is a work of fiction.",
+      "Any resemblance to real people or events is purely coincidental.",
+      "",
+      "USA is on the edge of total colapse.",
+      "Borders are wide open.",
+      "People are eating cats and dogs.",
+      "Oil production? it's pratically a fairy tale now ! ",
+      "God sent the perfect president to save the nation.",
+      "",
+      "Welcome to What possibly go Wrong in 2025 ! "
+    ];
+
+    const textContainer = document.getElementById('text-container');
+
+    let lineIndex = 0;    // Indice de la ligne en cours
+    let charIndex = 0;    // Indice du caractère en cours dans la ligne
+    let currentLineElem;  // Élement HTML pour la ligne en cours (si non vide)
+
+    function typeWriter() {
+      // Si on a traité toutes les lignes, on arrête
+      if (lineIndex >= lines.length) {
+        return;
+      }
+
+      const currentLine = lines[lineIndex];
+
+      // -- 1) Gérer la ligne vide ("") --
+      if (currentLine === "") {
+        // On affiche un saut de ligne
+        textContainer.appendChild(document.createElement('br'));
+
+        // Après 2 secondes, on efface le texte et on passe à la suite
+        // setTimeout(() => {
+        //   textContainer.innerHTML = "";
+        //   lineIndex++;
+        //   charIndex = 0;
+        //   typeWriter(); // relance l'affichage de la ligne suivante
+        // }, 3000);
+
+          lineIndex++;
+          charIndex = 0;
+          typeWriter(); // relance l'affichage de la ligne suivante
+
+        // On quitte immédiatement la fonction pour éviter tout conflit de setTimeout
+        return;
+      }
+      
+      // -- 2) Si la ligne n'est pas vide, affichage "lettre par lettre" --
+      if (charIndex === 0) {
+        // On crée un nouvel élément pour la nouvelle ligne
+        currentLineElem = document.createElement('div');
+        textContainer.appendChild(currentLineElem);
+      }
+
+      // Ajout du caractère suivant
+      currentLineElem.textContent += currentLine.charAt(charIndex);
+      charIndex++;
+
+      // S'il reste des caractères à afficher dans la ligne
+      if (charIndex < currentLine.length) {
+        setTimeout(typeWriter, 30);
+      } else {
+        // Ligne terminée : on passe à la ligne suivante
+        lineIndex++;
+        charIndex = 0;
+        currentLineElem = null;
+
+        // Petite pause avant d'attaquer la prochaine ligne
+        setTimeout(typeWriter, 25);
+      }
+    }
+
+    // On démarre le « typewriter »
+    typeWriter();
+  </script>
+</body>
+
+
+</html>

static/styles.css

@@ -214,8 +214,18 @@
     left: unset;
     transform: none;
     width: 200px;
-    height: 40px;
+    height: 32px;
     overflow: hidden;
+    background-color: #1da1f2;
+  }
+
+  .popup.minimized .popup-content {
+    display: none;
+  }
+
+  .popup.minimized .popup-header {
+    padding: 4px 8px;
+    height: 32px;
   }
 
   .popup-header {
@@ -301,4 +311,40 @@
 
   #gameOverPopup .popup-ok {
     margin: 5px 0;
+  }
+
+  .intro-frame {
+    width: 800px;
+    height: 650px;
+    border: none;
+    overflow: hidden;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+  }
+
+  #gamePopup {
+    width: auto;
+    background-color: transparent;
+    padding: 0;
+  }
+
+  #gamePopup .popup-content {
+    padding: 0;
+    position: relative;
+  }
+
+  #gamePopup .popup-ok {
+    position: absolute;
+    bottom: 200px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1000;
+    background-color: rgba(29, 161, 242, 0.8);
+    padding: 12px 30px;
+    font-size: 16px;
+  }
+
+  #gamePopup .popup-ok:hover {
+    background-color: rgba(29, 161, 242, 1);
   }