integrated timer in a module

index.html

@@ -22,7 +22,7 @@
         <![endif]-->
         <nav>
             <h1>Sokoban</h1>
-            <ol id="level-lists">
+            <ol id="level-list">
             </ol>
         </nav>
         <main>

modules/timer.mjs

@@ -0,0 +1,16 @@
+export class Timer {
+  constructor(time, expireFunction) {
+    self.time = time;
+    self.timerElement = document.getElementById('timer');
+    self.intervalController = setInterval(() => {
+      // self.timerElement.innerHTML = "Time : " + String(self.time).padStart(5, ' ').InsertAt('.',3);
+      self.time--;
+      let timeStr = String(self.time).padStart(5, '0');
+      self.timerElement.innerHTML = "Time : " + timeStr.slice(0, 3) + '.' + timeStr.slice(3);
+      if (self.time == 0) {
+        expireFunction();
+        clearInterval(self.intervalControler);
+      }
+    }, 10);
+  }
+}

script.js

@@ -2,6 +2,7 @@ import { generatePlayground } from '/modules/playground.mjs'
 import { levelsBlueprint } from '/modules/levels.mjs'
 import { MoveDirection } from '/modules/enums.mjs'
 import { fillLevelsSelection } from '/modules/fillLevelsSelection.mjs'
+import { Timer } from '/modules/timer.mjs'
 
 let canvas = document.getElementById('canvas');
 let ctx = canvas.getContext('2d');
@@ -9,7 +10,11 @@ let gameState = {
   playground: generatePlayground(levelsBlueprint[0], canvas.width, canvas.height),
   width: canvas.width,
   height: canvas.height,
+  timer: new Timer(1500, () => {
+    alert("Les vaches mangent le foin");
+  }),
 };
+// console.log(gameState.timer);
 
 fillLevelsSelection(gameState, ctx);
 window.ctx = ctx
@@ -48,43 +53,58 @@ window.right = MoveDirection.Right;
 window.width = canvas.width;
 window.height = canvas.height;
 
-const sleep = (ms) => {
-  return new Promise(resolve => setTimeout(resolve, ms));
-}
-
 //function qui met à jour le temps
 
-let time = 10;
+// let Timer = {
+//   time: 10,
+//   intervalControler: setInterval(() => {
+//     console.log(Timer.time);
+//     let txt = document.getElementById('timer');
+//     let afficher = "Time : " + Timer.time;
+//     txt.innerHTML= afficher;
+//     if (Timer.time == 0) {
+//       alert("Termine");
+//     }
 
-function timer(){
-  let txt = document.getElementById('timer');
-  let level = 0;
-  let afficher = "Time : " + time;
-  txt.innerHTML= afficher;
-  
-  time = time <= 0 ? 0 : time -1;
-  if (time == 0)
-  {
-  clearInterval(maVar);
-  }
+//     Timer.time = Timer.time <= 0 ? 0 : Timer.time -1;
+//     if (Timer.time == 0)
+//     {
+//       clearInterval(Timer.intervalControler);
+//     }
+//   }, 1000),
+// };
 
-}
- 
-let maVar = setInterval(timer, 1000);
-if (time == 0){
-  alert('Terminé YAsmine')
-}
+// let time = 10;
+
+// function timer(){
+//   let txt = document.getElementById('timer');
+//   let level = 0;
+//   let afficher = "Time : " + time;
+//   txt.innerHTML= afficher;
+
+//   time = time <= 0 ? 0 : time -1;
+//   if (time == 0)
+//   {
+//     clearInterval(maVar);
+//   }
+
+// }
+
+// let maVar = setInterval(timer, 1000);
+// if (time == 0){
+//   alert('Terminé YAsmine')
+// }
 // while (document.readyState != "complete") {
-/*function set_time(){
+function set_time(){
   minutes=Math.floor
-}*/
+}
 
 function Pause(){
-  time = time -10;
+  // time = time -10;
 }
 
-// while (document.readyState != "complete") {
+// // while (document.readyState != "complete") {
 setTimeout(1000);
- 
+
 
 playground.draw(ctx);