ajout timer et boite de dialogue quand niveau perdue

site/css/style.css

@@ -6,6 +6,34 @@
 
 }
 
+#header-container{
+    padding-bottom: 1%;
+    background-color: white;
+    width: 80%;
+    margin: 0 auto;
+    margin-top: 2%;
+    -webkit-box-shadow: 6px 9px 78px -2px rgba(0,0,0,0.75);
+    -moz-box-shadow: 6px 9px 78px -2px rgba(0,0,0,0.75);
+    box-shadow: 6px 9px 78px -2px rgba(0,0,0,0.75);
+}
+
+#progressBar{
+    background-color: grey;
+    width: 1%;
+    height: 20px;
+    margin-top:1%;
+}
+
+#play-container {
+    -webkit-box-shadow: 6px 9px 78px -2px rgba(0,0,0,0.75);
+    -moz-box-shadow: 6px 9px 78px -2px rgba(0,0,0,0.75);
+    box-shadow: 6px 9px 78px -2px rgba(0,0,0,0.75);
+    margin: 0 auto;
+    margin-top: 1%;
+    background-color: white;
+    width: 80%;
+}
+
 body{
     background-color: lightgray; 
 }
@@ -98,4 +126,67 @@ nav{
 }
 .nav_links li:nth-child(4n) > a{
     background-color: #3da4ab;
-}
+}
+
+/* modal */
+
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    padding-top: 100px; /* Location of the box */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  }
+  
+  /* Modal Content */
+  .modal-content {
+    position: relative;
+    background-color: #fefefe;
+    margin: auto;
+    padding: 0;
+    border: 1px solid #888;
+    width: 80%;
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+    -webkit-animation-name: animatetop;
+    -webkit-animation-duration: 0.4s;
+    animation-name: animatetop;
+    animation-duration: 0.4s
+  }
+  
+  /* Add Animation */
+  @-webkit-keyframes animatetop {
+    from {top:-300px; opacity:0} 
+    to {top:0; opacity:1}
+  }
+  
+  @keyframes animatetop {
+    from {top:-300px; opacity:0}
+    to {top:0; opacity:1}
+  }
+  
+  .close:hover,
+  .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  
+  .modal-header {
+    padding: 2px 16px;
+    background-color: lightgrey;
+    color: black;
+  }
+  
+  .modal-body {padding: 2px 16px;}
+  
+  .modal-footer {
+    padding: 2px 16px;
+    background-color: lightgrey;
+    color: black;
+  }

site/js/const.js

@@ -20,4 +20,7 @@ const SwitchHeight = 25;
 const SwitchWidth = 50;
 const colorSwitchBorder = "black";
 const colorSwitchInnactiveBackground = "red";
-const colorSwitchActiveBackground = "green";
+const colorSwitchActiveBackground = "green";
+
+//timer
+const timeEnd = 15;

site/js/timer.js

@@ -0,0 +1,29 @@
+function initTimer(){
+    var TimerElem = document.getElementById("progressBar");
+    TimerElem.style.width = "0%";
+    document.getElementById("timerend").innerHTML = timeEnd;
+}
+
+function move() {
+    var lapsPerSecond = 100/timeEnd;
+    var TimerElem = document.getElementById("progressBar");
+    TimerElem.style.width = (parseInt(TimerElem.style.width) + lapsPerSecond)+"%";
+}
+
+
+
+var timer = new easytimer.Timer();
+    timer.start();
+    timer.addEventListener('secondsUpdated', function (e) {
+      if(timer.getTimeValues().seconds <= timeEnd){
+        document.getElementById("timer").innerHTML = timer.getTimeValues().minutes.toString() +" m " + timer.getTimeValues().seconds.toString() + " s";
+        move();
+      }else{
+        endTime();
+        timer.stop();
+      }
+    });
+    function endTime(){
+        var modal = document.getElementById("myModal");
+        modal.style.display = "block";
+    }

site/vues/jeu.html

@@ -9,6 +9,8 @@
   <script src="../js/logique.js"></script>
   <script src="../js/init.js"></script>
   <script src="../js/createElement.js"></script>
+  <script src="../js/easytimer.min.js"></script>
+  <script src="../js/timer.js"></script>
   <link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Bitter:wght@700&display=swap" rel="stylesheet">
   <meta charset="utf-8" />
@@ -16,45 +18,84 @@
 </head>
 
 <body>
-  <header>
-    <nav>
-      <ul class="nav_links">
-        <li><a href="#">Play</a></li>
-        <li><a href="#">Aide</a></li>
-        <li><a href="#">Editeur</a></li>
-        <li><a href="#">Records</a></li>
-      </ul>
-    </nav>
-  </header>
-  <div id="container"></div>
+
+  <!-- The Modal -->
+  <div id="myModal" class="modal">
+
+    <!-- Modal content -->
+    <div class="modal-content">
+      <div class="modal-header" align=center>
+        <br>
+        <h1>Game Over</h1>
+        <br>
+      </div>
+      <div class="modal-body" align=center>
+        <br>
+        <p>Temps total : 13 m 40 s</p>
+        <p>Temps moyen par niveau : 20.5s</p>
+        <p>Score moyen par niveau : 4.5</p>
+        <br>
+        <h2>Score total : 140</h2>
+        <br>
+        <input type="text" placeholder="Pseudo">
+        <button>Envoyer son score</button>
+        <br><br><br>
+      </div>
+      <div class="modal-footer">
+        <br>
+        <button onclick="window.location.href='index.html'">Home</button>
+        <br>
+        <br>
+      </div>
+    </div>
+  
+  </div>
+
+  <div id="header-container">
+    <h1 align=center>Niveau 26</h1>
+    <div align=center>
+      <a>Temps :</a>  
+      <a id="timer">0 m 0 s</a>
+      <a id="end"> / 0 m </a><a id="timerend">20</a><a> s</a> 
+    </div>
+      <div id="progressBar"></div>
+  </div>
+  <div id="play-container"></div>
   <script>
     var switchs = [], lineCount = [], logiques = [],lines = [], endLines = [],end;
 
     var layer = new Konva.Layer();
+    let container = document.getElementById('play-container');
+    container.style.height = innerHeight /100*80 + "px";
+    var width = container.offsetWidth;
+
+    initTimer();
 
     var stage = new Konva.Stage({
-      container: 'container',
+      container: 'play-container',
       /*rotation: -90,
       x: 20,
       y: 1000,*/
-      width: window.innerWidth,
+      width: width,
       height: window.innerHeight,
     });
     stage.add(layer);
 
     initLayer();
 
-    createLogique(200, 100, "logique1","et");
-    createLogique(300,200,"logique2","ou");
-    createLogique(500,300,"logique3","et");
-    createLogique(500,400,"logique4","et");
-    
+   
     createSwitch("s1", 20, 20);
     createSwitch("s2", 20, 90);
     createSwitch("s3", 20, 300);
     createSwitch("s4", 20, 500);
     createSwitch("s5", 20, 700);
     createSwitch("s6", 20, 600);
+    
+    createLogique(200, 100, "logique1","et");
+    createLogique(300,200,"logique2","ou");
+    createLogique(500,300,"logique3","et");
+    createLogique(500,400,"logique4","et");
+
     createLink(stage.findOne("#s5"), findLogique("logique4"));
     createLink(stage.findOne("#s6"), findLogique("logique4"));
     createLink(stage.findOne("#s3"), findLogique("logique2"));
@@ -66,8 +107,14 @@
     initAllSwitch();
     createEnd(800, 320);
     initEnd();
-      
-    
     </script>
+    <script>
+      var modal = document.getElementById("myModal");      
+      window.onclick = function(event) {
+        if (event.target == modal) {
+          modal.style.display = "none";
+        }
+      }
+      </script>
 </body>
 </html>