loic.ledreck commited on
Commit
4b73dbf
·
1 Parent(s): 3046e36

feat: not working sequences

Browse files
Files changed (3) hide show
  1. static/index.html +38 -9
  2. static/next-sequence.html +82 -0
  3. static/styles.css +11 -0
static/index.html CHANGED
@@ -58,6 +58,22 @@
58
  </div>
59
  </div>
60
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
61
  <!-- Ajout : container pour la carte SVG à droite -->
62
  <div class="map-container">
63
  <svg
@@ -153,6 +169,9 @@
153
  console.log("chat ended: ", data.chat_ended);
154
  if (data.chat_ended === true) {
155
  endSequence(data.idea, data.idea_accepted);
 
 
 
156
  }
157
  //addMessageToChat(data.character_response, false);
158
  })
@@ -235,16 +254,14 @@
235
  }
236
 
237
  function endSequence(idea, idea_accepted) {
238
- // Vide le chat
239
- clearChatbox()
240
-
241
- //displaySequencePopup(idea, idea_accepted) // not available
242
-
243
  fetchUpdateMap()
244
- // Affiche pop up sequence result avec action prise par trump
245
- // Update map
246
- receivedFirstMessage = false
247
- receiveFirstMessage()
 
 
248
  }
249
 
250
  document.addEventListener('DOMContentLoaded', function() {
@@ -276,6 +293,9 @@
276
  const closeBtn = popup.querySelector('.close');
277
  const okBtn = popup.querySelector('.popup-ok');
278
 
 
 
 
279
  minimizeBtn.addEventListener('click', () => {
280
  receiveFirstMessage()
281
  popup.classList.add('minimized');
@@ -290,7 +310,16 @@
290
  popup.style.display = 'none';
291
  });
292
 
 
 
 
 
 
 
 
 
293
  okBtn.addEventListener('click', () => {
 
294
  receiveFirstMessage()
295
  popup.classList.add('minimized');
296
  });
 
58
  </div>
59
  </div>
60
 
61
+ <div class="popup" id="sequencePopup">
62
+ <div class="popup-header">
63
+ <span class="popup-title">Sequence ended</span>
64
+ <!-- <div class="popup-controls">
65
+ <button class="control-btn minimize">−</button>
66
+ <button class="control-btn maximize">□</button>
67
+ <button class="control-btn close">×</button>
68
+ </div> -->
69
+ </div>
70
+ <div class="popup-content">
71
+ <iframe src="next-sequence.html" class="intro-frame"></iframe>
72
+ <button class="popup-sequence-ok">Next Sequence</button>
73
+ </div>
74
+ </div>
75
+
76
+
77
  <!-- Ajout : container pour la carte SVG à droite -->
78
  <div class="map-container">
79
  <svg
 
169
  console.log("chat ended: ", data.chat_ended);
170
  if (data.chat_ended === true) {
171
  endSequence(data.idea, data.idea_accepted);
172
+ console.log("data.idea_accepted", data.idea_accepted)
173
+ sessionStorage.setItem('idea', data.idea);
174
+ sessionStorage.setItem('idea_accepted', data.idea_accepted);
175
  }
176
  //addMessageToChat(data.character_response, false);
177
  })
 
254
  }
255
 
256
  function endSequence(idea, idea_accepted) {
257
+ displaySequencePopup(idea, idea_accepted)
 
 
 
 
258
  fetchUpdateMap()
259
+ }
260
+
261
+ function displaySequencePopup(idea, idea_accepted) {
262
+ const popup = document.getElementById('sequencePopup');
263
+ popup.contentWindow.location.reload();
264
+ popup.style.display = 'block';
265
  }
266
 
267
  document.addEventListener('DOMContentLoaded', function() {
 
293
  const closeBtn = popup.querySelector('.close');
294
  const okBtn = popup.querySelector('.popup-ok');
295
 
296
+ const seqPopup = document.getElementById('sequencePopup');
297
+ const okSequenceBtn = seqPopup.querySelector('.popup-sequence-ok');
298
+
299
  minimizeBtn.addEventListener('click', () => {
300
  receiveFirstMessage()
301
  popup.classList.add('minimized');
 
310
  popup.style.display = 'none';
311
  });
312
 
313
+ okSequenceBtn.addEventListener('click', () => {
314
+ clearChatbox()
315
+
316
+ receivedFirstMessage = false
317
+ receiveFirstMessage()
318
+ seqPopup.style.display = 'none';
319
+ });
320
+
321
  okBtn.addEventListener('click', () => {
322
+ console.log("start game")
323
  receiveFirstMessage()
324
  popup.classList.add('minimized');
325
  });
static/next-sequence.html ADDED
@@ -0,0 +1,82 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Next Sequence</title>
6
+ <style>
7
+ html, body {
8
+ margin: 0;
9
+ padding: 0;
10
+ height: 100%;
11
+ font-family: Arial, sans-serif;
12
+ overflow: hidden;
13
+ background-color: transparent;
14
+ }
15
+
16
+ body {
17
+ background: url('/images/next_sequence/background.jpg') no-repeat center center;
18
+ background-size: cover;
19
+ position: relative;
20
+ }
21
+
22
+ #text-container {
23
+ position: absolute;
24
+ top: 15%;
25
+ left: 50%;
26
+ transform: translateX(-50%);
27
+ width: 70%;
28
+ padding: 20px;
29
+ background-color: rgba(0, 0, 0, 0.8);
30
+ border-radius: 8px;
31
+ color: #fff;
32
+ text-align: center;
33
+ font-size: 1.2rem;
34
+ z-index: 3;
35
+ max-height: 70%; /* Prevent overflowing of text */
36
+ overflow-y: auto; /* Add scroll for long content */
37
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
38
+ }
39
+
40
+ #text-container p {
41
+ margin: 10px 0;
42
+ line-height: 1.5;
43
+ }
44
+
45
+ #action-container {
46
+ position: absolute;
47
+ bottom: 10%;
48
+ left: 50%;
49
+ transform: translateX(-50%);
50
+ text-align: center;
51
+ }
52
+
53
+ </style>
54
+ </head>
55
+ <body>
56
+ <div id="text-container"></div>
57
+
58
+ <script>
59
+
60
+ const action = sessionStorage.getItem('idea');
61
+ const isAccepted = sessionStorage.getItem('idea_accepted');
62
+
63
+ console.log("action : ", action)
64
+ console.log("action : ", isAccepted)
65
+ const message = [
66
+ isAccepted === "True"
67
+ ? "You have not been able to deter Donald Trump from doing what he had in mind his idea. Then,"
68
+ : "You couldn't change Donald's mind, consequently:",
69
+ action,
70
+ ];
71
+
72
+ const textContainer = document.getElementById('text-container');
73
+
74
+ // Dynamically add text to the text container
75
+ message.forEach((line) => {
76
+ const p = document.createElement('p');
77
+ p.textContent = line;
78
+ textContainer.appendChild(p);
79
+ });
80
+ </script>
81
+ </body>
82
+ </html>
static/styles.css CHANGED
@@ -297,6 +297,17 @@ body {
297
  font-size: 14px;
298
  }
299
 
 
 
 
 
 
 
 
 
 
 
 
300
  .popup-ok:hover {
301
  background-color: #1a91da;
302
  }
 
297
  font-size: 14px;
298
  }
299
 
300
+ .popup-sequence-ok {
301
+ background-color: #f21d1d;
302
+ color: white;
303
+ border: none;
304
+ padding: 8px 24px;
305
+ border-radius: 20px;
306
+ cursor: pointer;
307
+ font-size: 14px;
308
+ }
309
+
310
+
311
  .popup-ok:hover {
312
  background-color: #1a91da;
313
  }