From 68b44e67412ef10e30c894081624d88291a2780c Mon Sep 17 00:00:00 2001
From: pisouvigne <pisouvigne>
Date: Sat, 6 Jun 2020 12:51:00 +0200
Subject: [PATCH] ajout timer et boite de dialogue quand niveau perdue

---
 Doc/Sketch.bmpr          | Bin 221184 -> 221184 bytes
 site/css/style.css       |  93 ++++++++++++++++++++++++++++++++++++++-
 site/js/const.js         |   5 ++-
 site/js/easytimer.min.js |   7 +++
 site/js/timer.js         |  29 ++++++++++++
 site/vues/jeu.html       |  87 +++++++++++++++++++++++++++---------
 6 files changed, 199 insertions(+), 22 deletions(-)
 create mode 100644 site/js/easytimer.min.js
 create mode 100644 site/js/timer.js

diff --git a/Doc/Sketch.bmpr b/Doc/Sketch.bmpr
index e4e32983263943dfed18c1e6b78a1233c175494f..f30a4728bb169efbb528d4cc4bcec77a9ed27bd3 100644
GIT binary patch
delta 6294
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
NS+-XXpWg7~{|klPP80wD

delta 385
zcmW-cyGz1R6vxlwq9SP!4nhqg1r`Q9tRxEZkr7m2HS~nWLaFwaA2iew6lT|<!KJje
z2s}^(5;*iPxI}X;L1R(J?w8N~e(&L)1IMZRoVxF{6RT%kDXiXY^|^Qq;`b*m7tSOh
z25CsZ2#o%xe!Yh@XP}ibs+6XT)<$4h)2M1tm4-2`rSuhtBqR=-?xUs~rRk>LHhhrK
z3x-g-v-C>BLHcgT!&-zmgcoAs{L4L{$D<UK3&koWrK&tDMWtcqS7}KO=IEHQA!bDz
z(Ta(-yd);l@~W6Fb>S`g^xD8JCaph53wC>wcKx%k4+D^gX`Kc)wLF;tF+u%a;WDN1
z(K>G!kl-@CGd@{oktSqnh3Z`UAU5857{(#2YsX}7jk0LV73`4xO)5}@zsQ3-Ho8vd
bQo5uZUojgj>UQ+aH4n2#c!PiVI>2*(oS$Ih

diff --git a/site/css/style.css b/site/css/style.css
index 5fd8f3c..8384f2d 100644
--- a/site/css/style.css
+++ b/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;
-}
\ No newline at end of file
+}
+
+/* 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;
+  }
\ No newline at end of file
diff --git a/site/js/const.js b/site/js/const.js
index 2e63dd6..6357940 100644
--- a/site/js/const.js
+++ b/site/js/const.js
@@ -20,4 +20,7 @@ const SwitchHeight = 25;
 const SwitchWidth = 50;
 const colorSwitchBorder = "black";
 const colorSwitchInnactiveBackground = "red";
-const colorSwitchActiveBackground = "green";
\ No newline at end of file
+const colorSwitchActiveBackground = "green";
+
+//timer
+const timeEnd = 15;
\ No newline at end of file
diff --git a/site/js/easytimer.min.js b/site/js/easytimer.min.js
new file mode 100644
index 0000000..ca9c46b
--- /dev/null
+++ b/site/js/easytimer.min.js
@@ -0,0 +1,7 @@
+/**
+ * easytimer.js
+ * Generated: 2019-12-22
+ * Version: 4.1.1
+ */
+
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).easytimer={})}(this,function(t){"use strict";function _(t){return(_="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function e(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,o)}return n}function z(r){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?e(Object(i),!0).forEach(function(t){var e,n,o;e=r,o=i[n=t],n in e?Object.defineProperty(e,n,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[n]=o}):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(i)):e(Object(i)).forEach(function(t){Object.defineProperty(r,t,Object.getOwnPropertyDescriptor(i,t))})}return r}function i(t,e,n){var o,r="";if((t="number"==typeof t?String(t):t).length>e)return t;for(o=0;o<e;o+=1)r+=String(n);return(r+t).slice(-r.length)}function R(){this.secondTenths=0,this.seconds=0,this.minutes=0,this.hours=0,this.days=0,this.toString=function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:["hours","minutes","seconds"],e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:":",n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:2;t=t||["hours","minutes","seconds"],e=e||":",n=n||2;var o,r=[];for(o=0;o<t.length;o+=1)void 0!==this[t[o]]&&("secondTenths"===t[o]?r.push(this[t[o]]):r.push(i(this[t[o]],n,"0")));return r.join(e)}}var n="undefined"!=typeof window?window.CustomEvent:void 0;"undefined"!=typeof window&&"function"!=typeof n&&((n=function(t,e){e=e||{bubbles:!1,cancelable:!1,detail:void 0};var n=document.createEvent("CustomEvent");return n.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),n}).prototype=window.Event.prototype,window.CustomEvent=n);var B="secondTenths",F="seconds",G="minutes",H="hours",J="days",K=[B,F,G,H,J],N={secondTenths:100,seconds:1e3,minutes:6e4,hours:36e5,days:864e5},Q={secondTenths:10,seconds:60,minutes:60,hours:24},W="undefined"!=typeof module&&module.exports&&"function"==typeof require?require("events"):void 0;function X(){return"undefined"!=typeof document}function Y(){return W}function Z(t,e){return(t%e+e)%e}function o(){var e,n,r,o,i,s,u,c,a,f,d=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},l=new R,h=new R,p=X()?document.createElement("span"):Y()?new W.EventEmitter:void 0,v=!1,y=!1,m={},b={detail:{timer:this}};function w(t,e){var n,o,r=h[e];return o=C(t,N[n=e]),h[n]=o,l[n]=n===J?o:0<=o?Z(o,Q[n]):Q[n]-Z(o,Q[n]),h[e]!==r}function t(){g(),function(){for(var t in l)l.hasOwnProperty(t)&&"number"==typeof l[t]&&(l[t]=0);for(var e in h)h.hasOwnProperty(e)&&"number"==typeof h[e]&&(h[e]=0)}()}function g(){clearInterval(e),e=void 0,y=v=!1}function O(t){I()?(a=E(),s=V(i.target)):D(t),function(){var t=N[n];if(S(P(Date.now())))return;e=setInterval(j,t),v=!0,y=!1}()}function E(){return P(Date.now())-h.secondTenths*N[B]*r}function j(){var t=P(Date.now());!function(t){t[B]&&M("secondTenthsUpdated",b);t[F]&&M("secondsUpdated",b);t[G]&&M("minutesUpdated",b);t[H]&&M("hoursUpdated",b);t[J]&&M("daysUpdated",b)}(T()),o(b.detail.timer),S(t)&&(U(),M("targetAchieved",b))}function T(t){var e=0<arguments.length&&void 0!==t?t:P(Date.now()),n=0<r?e-a:a-e,o={};return o[B]=w(n,B),o[F]=w(n,F),o[G]=w(n,G),o[H]=w(n,H),o[J]=w(n,J),o}function P(t){return Math.floor(t/N[n])*N[n]}function S(t){return s instanceof Array&&f<=t}function D(t){var e;n=function(t){if(function(t){return 0<=K.indexOf(t)}(t=typeof t==="string"?t:F))return t;throw new Error("Error in precision parameter: ".concat(t," is not a valid value"))}((t=t||{}).precision),o="function"==typeof t.callback?t.callback:function(){},c=!0===t.countdown,r=!0==c?-1:1,"object"===_(t.startValues)?(e=t.startValues,u=x(e),l.secondTenths=u[0],l.seconds=u[1],l.minutes=u[2],l.hours=u[3],l.days=u[4],h=L(u,h)):u=null,a=E(),T(),s="object"===_(t.target)?V(t.target):c?(t.target={seconds:0},V(t.target)):null,m={precision:n,callback:o,countdown:"object"===_(t)&&!0===t.countdown,target:s,startValues:u},i=t}function x(t){var e,n,o,r,i,s;if("object"===_(t))if(t instanceof Array){if(5!==t.length)throw new Error("Array size not valid");s=t}else{for(var u in t)if(K.indexOf(u)<0)throw new Error("Error in startValues or target parameter: ".concat(u," is not a valid input value"));s=[t.secondTenths||0,t.seconds||0,t.minutes||0,t.hours||0,t.days||0]}return e=s[0],n=s[1]+C(e,10),o=s[2]+C(n,60),r=s[3]+C(o,60),i=s[4]+C(r,24),s[0]=e%10,s[1]=n%60,s[2]=o%60,s[3]=r%24,s[4]=i,s}function C(t,e){var n=t/e;return n<0?Math.ceil(n):Math.floor(n)}function V(t){if(t){var e=L(s=x(t));return f=a+e.secondTenths*N[B]*r,s}}function L(t,e){var n=e||{};return n.days=t[4],n.hours=24*n.days+t[3],n.minutes=60*n.hours+t[2],n.seconds=60*n.minutes+t[1],n.secondTenths=10*n.seconds+t[[0]],n}function U(){t(),M("stopped",b)}function k(t,e){X()?p.addEventListener(t,e):Y()&&p.on(t,e)}function A(t,e){X()?p.removeEventListener(t,e):Y()&&p.removeListener(t,e)}function M(t,e){X()?p.dispatchEvent(new CustomEvent(t,e)):Y()&&p.emit(t,e)}function q(){return v}function I(){return y}D(d),void 0!==this&&(this.start=function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};t=z({},d,{},t),q()||(O(t),M("started",b))},this.pause=function(){g(),y=!0,M("paused",b)},this.stop=U,this.reset=function(){t(),O(i),M("reset",b)},this.isRunning=q,this.isPaused=I,this.getTimeValues=function(){return l},this.getTotalTimeValues=function(){return h},this.getConfig=function(){return m},this.addEventListener=k,this.on=k,this.removeEventListener=A,this.off=A)}t.Timer=o,t.default=o,Object.defineProperty(t,"__esModule",{value:!0})});
diff --git a/site/js/timer.js b/site/js/timer.js
new file mode 100644
index 0000000..e88912f
--- /dev/null
+++ b/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";
+    }
\ No newline at end of file
diff --git a/site/vues/jeu.html b/site/vues/jeu.html
index 77aaadd..2cc5b11 100644
--- a/site/vues/jeu.html
+++ b/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>
\ No newline at end of file