Spaces:

Mistral-AI-Game-Jam
/

team13

Running

App Files Files Community

loic.ledreck commited on Jan 26, 2025

Commit

4b73dbf

1 Parent(s): 3046e36

feat: not working sequences

Browse files

Files changed (3) hide show

static/index.html +38 -9
static/next-sequence.html +82 -0
static/styles.css +11 -0

static/index.html CHANGED Viewed

@@ -58,6 +58,22 @@
     </div>
   </div>
   <!-- Ajout : container pour la carte SVG à droite -->
   <div class="map-container">
     <svg
@@ -153,6 +169,9 @@
         console.log("chat ended: ", data.chat_ended);
         if (data.chat_ended === true) {
           endSequence(data.idea, data.idea_accepted);
         }
         //addMessageToChat(data.character_response, false);
       })
@@ -235,16 +254,14 @@
     }
     function endSequence(idea, idea_accepted) {
-      // Vide le chat
-      clearChatbox()
-      //displaySequencePopup(idea, idea_accepted) // not available
       fetchUpdateMap()
-      // Affiche pop up sequence result avec action prise par trump
-      // Update map
-      receivedFirstMessage = false
-      receiveFirstMessage()
     }
     document.addEventListener('DOMContentLoaded', function() {
@@ -276,6 +293,9 @@
       const closeBtn = popup.querySelector('.close');
       const okBtn = popup.querySelector('.popup-ok');
       minimizeBtn.addEventListener('click', () => {
         receiveFirstMessage()
         popup.classList.add('minimized');
@@ -290,7 +310,16 @@
         popup.style.display = 'none';
       });
       okBtn.addEventListener('click', () => {
         receiveFirstMessage()
         popup.classList.add('minimized');
       });

     </div>
   </div>
+  <div class="popup" id="sequencePopup">
+    <div class="popup-header">
+      <span class="popup-title">Sequence ended</span>
+      <!-- <div class="popup-controls">
+        <button class="control-btn minimize">−</button>
+        <button class="control-btn maximize">□</button>
+        <button class="control-btn close">×</button>
+      </div> -->
+    </div>
+    <div class="popup-content">
+      <iframe src="next-sequence.html" class="intro-frame"></iframe>
+      <button class="popup-sequence-ok">Next Sequence</button>
+    </div>
+  </div>
   <!-- Ajout : container pour la carte SVG à droite -->
   <div class="map-container">
     <svg
         console.log("chat ended: ", data.chat_ended);
         if (data.chat_ended === true) {
           endSequence(data.idea, data.idea_accepted);
+          console.log("data.idea_accepted", data.idea_accepted)
+          sessionStorage.setItem('idea', data.idea);
+          sessionStorage.setItem('idea_accepted', data.idea_accepted);
         }
         //addMessageToChat(data.character_response, false);
       })
     }
     function endSequence(idea, idea_accepted) {
+      displaySequencePopup(idea, idea_accepted)
       fetchUpdateMap()
+    }
+    function displaySequencePopup(idea, idea_accepted) {
+      const popup = document.getElementById('sequencePopup');
+      popup.contentWindow.location.reload();
+      popup.style.display = 'block';
     }
     document.addEventListener('DOMContentLoaded', function() {
       const closeBtn = popup.querySelector('.close');
       const okBtn = popup.querySelector('.popup-ok');
+      const seqPopup = document.getElementById('sequencePopup');
+      const okSequenceBtn = seqPopup.querySelector('.popup-sequence-ok');
       minimizeBtn.addEventListener('click', () => {
         receiveFirstMessage()
         popup.classList.add('minimized');
         popup.style.display = 'none';
       });
+      okSequenceBtn.addEventListener('click', () => {
+        clearChatbox()
+        receivedFirstMessage = false
+        receiveFirstMessage()
+        seqPopup.style.display = 'none';
+      });
       okBtn.addEventListener('click', () => {
+        console.log("start game")
         receiveFirstMessage()
         popup.classList.add('minimized');
       });

static/next-sequence.html ADDED Viewed

	@@ -0,0 +1,82 @@

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <title>Next Sequence</title>
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+      height: 100%;
+      font-family: Arial, sans-serif;
+      overflow: hidden;
+      background-color: transparent;
+    }
+    body {
+      background: url('/images/next_sequence/background.jpg') no-repeat center center;
+      background-size: cover;
+      position: relative;
+    }
+    #text-container {
+      position: absolute;
+      top: 15%;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 70%;
+      padding: 20px;
+      background-color: rgba(0, 0, 0, 0.8);
+      border-radius: 8px;
+      color: #fff;
+      text-align: center;
+      font-size: 1.2rem;
+      z-index: 3;
+      max-height: 70%; /* Prevent overflowing of text */
+      overflow-y: auto; /* Add scroll for long content */
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    }
+    #text-container p {
+      margin: 10px 0;
+      line-height: 1.5;
+    }
+    #action-container {
+      position: absolute;
+      bottom: 10%;
+      left: 50%;
+      transform: translateX(-50%);
+      text-align: center;
+    }
+  </style>
+</head>
+<body>
+  <div id="text-container"></div>
+  <script>
+    const action = sessionStorage.getItem('idea');
+    const isAccepted = sessionStorage.getItem('idea_accepted');
+    console.log("action : ", action)
+    console.log("action : ", isAccepted)
+    const message = [
+      isAccepted === "True"
+        ? "You have not been able to deter Donald Trump from doing what he had in mind his idea. Then,"
+        : "You couldn't change Donald's mind, consequently:",
+      action,
+    ];
+    const textContainer = document.getElementById('text-container');
+    // Dynamically add text to the text container
+    message.forEach((line) => {
+      const p = document.createElement('p');
+      p.textContent = line;
+      textContainer.appendChild(p);
+    });
+  </script>
+</body>
+</html>

static/styles.css CHANGED Viewed

@@ -297,6 +297,17 @@ body {
   font-size: 14px;
 }
 .popup-ok:hover {
   background-color: #1a91da;
 }

   font-size: 14px;
 }
+.popup-sequence-ok {
+  background-color: #f21d1d;
+  color: white;
+  border: none;
+  padding: 8px 24px;
+  border-radius: 20px;
+  cursor: pointer;
+  font-size: 14px;
+}
 .popup-ok:hover {
   background-color: #1a91da;
 }