feat: popup part1

static/index.html

@@ -16,11 +16,9 @@
       <div class="profile-text">
         <h2>Donald J. Trump</h2>
         <span>@realDonaldTrump</span>
-        <p>
-          45th President of the United States of America<br/>
-          DonaldJTrump.com<br/>
-          A rejoint X en mars 2009
-        </p>
+        <p>45th & 47th President 🇺🇸<br/>
+           DonaldJTrump.com<br/>
+           A rejoint X en mars 2009</p>
       </div>
       <div class="divider"></div>
     </div>
@@ -31,11 +29,40 @@
     </div>
   </div>
 
+
+  <div class="popup" id="gamePopup">
+    <div class="popup-header">
+      <span class="popup-title">Game Intro</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="intro.html" class="intro-frame"></iframe>
+      <button class="popup-ok">Start Game</button>
+    </div>
+  </div>
+
+  <div class="popup" id="gameOverPopup">
+    <div class="popup-header">
+      <span class="popup-title">Game Over</span>
+      <div class="popup-controls">
+        <button class="control-btn close">×</button>
+      </div>
+    </div>
+    <div class="popup-content">
+      <img src="/images/game_over.png" alt="Game Over" class="popup-gif">
+      <button class="popup-ok">Try Again</button>
+    </div>
+  </div>
+
   <!-- Ajout : container pour la carte SVG à droite -->
   <div class="map-container">
-    <svg 
-      id="worldMap" 
-      xmlns="http://www.w3.org/2000/svg" 
+    <svg
+      id="worldMap"
+      xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 2000 1200"
     >
       <!-- Les paths seront injectés en JavaScript -->
@@ -50,18 +77,18 @@
       const chatWindow = document.getElementById('chatWindow');
       const messageDiv = document.createElement('div');
       messageDiv.className = `message ${isUser ? 'user' : 'trump'}`;
-      
+
       if (!isUser) {
         const img = document.createElement('img');
         img.src = '/images/donald_trump.jpg';
         img.alt = 'Trump';
         messageDiv.appendChild(img);
       }
-      
+
       const contentDiv = document.createElement('div');
       contentDiv.className = 'message-content';
       contentDiv.textContent = message;
-      
+
       messageDiv.appendChild(contentDiv);
       chatWindow.appendChild(messageDiv);
       chatWindow.scrollTop = chatWindow.scrollHeight;
@@ -143,6 +170,109 @@
     });
 
 
+    document.addEventListener('DOMContentLoaded', function() {
+      // 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);
+
+      // Initialize game popup controls
+      const popup = document.getElementById('gamePopup');
+      const minimizeBtn = popup.querySelector('.minimize');
+      const maximizeBtn = popup.querySelector('.maximize');
+      const closeBtn = popup.querySelector('.close');
+      const okBtn = popup.querySelector('.popup-ok');
+
+      minimizeBtn.addEventListener('click', () => {
+        popup.classList.add('minimized');
+      });
+
+      maximizeBtn.addEventListener('click', () => {
+        popup.classList.remove('minimized');
+      });
+
+      closeBtn.addEventListener('click', () => {
+        popup.style.display = 'none';
+      });
+
+      okBtn.addEventListener('click', () => {
+        popup.classList.add('minimized');
+      });
+
+      // Make the popup draggable
+      const header = popup.querySelector('.popup-header');
+      let isDragging = false;
+      let currentX;
+      let currentY;
+      let initialX;
+      let initialY;
+      let xOffset = 0;
+      let yOffset = 0;
+
+      header.addEventListener('mousedown', dragStart);
+      document.addEventListener('mousemove', drag);
+      document.addEventListener('mouseup', dragEnd);
+
+      function dragStart(e) {
+        initialX = e.clientX - xOffset;
+        initialY = e.clientY - yOffset;
+
+        if (e.target === header) {
+          isDragging = true;
+        }
+      }
+
+      function drag(e) {
+        if (isDragging) {
+          e.preventDefault();
+          currentX = e.clientX - initialX;
+          currentY = e.clientY - initialY;
+          xOffset = currentX;
+          yOffset = currentY;
+
+          setTranslate(currentX, currentY, popup);
+        }
+      }
+
+      function setTranslate(xPos, yPos, el) {
+        el.style.transform = `translate(${xPos}px, ${yPos}px)`;
+      }
+
+      function dragEnd() {
+        initialX = currentX;
+        initialY = currentY;
+        isDragging = false;
+      }
+
+      // Initialize game over popup controls
+      const gameOverPopup = document.getElementById('gameOverPopup');
+      const gameOverCloseBtn = gameOverPopup.querySelector('.close');
+      const gameOverOkBtn = gameOverPopup.querySelector('.popup-ok');
+
+      gameOverCloseBtn.addEventListener('click', () => {
+        location.reload();  // Reload page on close
+      });
+
+      gameOverOkBtn.addEventListener('click', () => {
+        location.reload();  // Reload page on Try Again
+      });
+    });
+
+
     // ============================
     // AJOUT : GESTION DE LA CARTE SVG
     // ============================
@@ -815,12 +945,12 @@
         } else {
           path.setAttribute('fill', 'red');
         }
-        
+
         // Optionnel : ajout d'un survol ou d'un clic pour modifier l'attribut
         // path.addEventListener('click', () => {
         //   // Ex: toggler la valeur Yes/No puis changer la couleur
         // });
-        
+
         svgContainer.appendChild(path);
       }
     });

static/styles.css

@@ -11,24 +11,6 @@ body {
   color: #fff;
 }
 
-/* ====================================
- NOUVEAU : la colonne de droite (carte)
- ==================================== */
-.map-container {
-  width: 50%;
-  height: 100vh;
-  background-color: #fff; /* fond blanc */
-  overflow: auto; /* permet de scroller si besoin */
-}
-
-.map-container svg {
-  width: 100%;
-  height: 100%;
-}
-
-/* ====================================
- Colonne de gauche : Chatbot (inchangé)
- ==================================== */
 .content {
   flex: 1;
   background-color: #fff;
@@ -71,6 +53,18 @@ body {
   display: none;
 }
 
+.map-container {
+  width: 50%;
+  height: 100vh;
+  background-color: #fff; /* fond blanc */
+  overflow: auto; /* permet de scroller si besoin */
+}
+
+.map-container svg {
+  width: 100%;
+  height: 100%;
+}
+
 .message {
   display: flex;
   margin-bottom: 15px;
@@ -210,3 +204,159 @@ body {
   background-color: #2f3336;
   margin-top: 16px;
 }
+
+.popup {
+  display: none;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 400px;
+  background-color: #fff3e0;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  z-index: 1000;
+  transition: all 0.3s ease;
+}
+
+.popup.minimized {
+  top: unset;
+  bottom: 20px;
+  right: 20px;
+  left: unset;
+  transform: none;
+  width: 200px;
+  height: 32px;
+  overflow: hidden;
+  background-color: #1da1f2;
+}
+
+.popup.minimized .popup-content {
+  display: none;
+}
+
+.popup.minimized .popup-header {
+  padding: 4px 8px;
+  height: 32px;
+}
+
+.popup-header {
+  background-color: #1da1f2;
+  color: white;
+  padding: 8px 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 8px 8px 0 0;
+  cursor: move;
+}
+
+.popup-controls {
+  display: flex;
+  gap: 5px;
+}
+
+.control-btn {
+  background: none;
+  border: none;
+  color: white;
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+}
+
+.control-btn:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.popup-content {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 15px;
+  color: #000;
+}
+
+.popup-gif {
+  max-width: 100%;
+  height: auto;
+}
+
+.popup-ok {
+  background-color: #1da1f2;
+  color: white;
+  border: none;
+  padding: 8px 24px;
+  border-radius: 20px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.popup-ok:hover {
+  background-color: #1a91da;
+}
+
+#gameOverPopup {
+  width: fit-content;
+}
+
+#gameOverPopup .popup-content {
+  padding: 0;
+  gap: 5px;
+}
+
+#gameOverPopup .popup-gif {
+  display: block;
+  width: 600px;
+  height: 300px;
+  margin: 0;
+}
+
+#gameOverPopup .popup-header {
+  padding: 5px 10px;
+}
+
+#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);
+}