difficulty slider and time starting before end of tutorial bug fix

index.html

@@ -28,9 +28,11 @@
         <main>
             <div class="controls">
                 <div id="timer">Time</div>
-                    <button id="pause-1">Pause</button>
+                <button id="pause-1">Pause</button>
-                    <button id="pause-2">Pause</button>
+                <button id="pause-2">Pause</button><br/>
-                <br>
+                <label for="dificulty-slider">Difficulty</label><br/>
+                <input type="range" min="0" max="100" value="50" id="difficulty-slider">
+                <br/>
             </div>
             <div>
                 <canvas id="canvas" width="800" height="400"></canvas>

modules/levelSelection.mjs

@@ -5,9 +5,8 @@ import { Timer } from '/modules/timer.mjs'
 export const selectLevel = (ctx, gameState, id) => {
   gameState.playground = generatePlayground(levelsBlueprint[id].structure, gameState.width, gameState.height);
   // TODO transfer expireFunction without a fail
-  const expireFunc = gameState.timer.expireFunction;
+  // const expireFunc = () => {gameState.timer.expireFunction();};
-  console.log(expireFunc);
+  gameState.timer.setTime(levelsBlueprint[id].time);
-  gameState.timer = new Timer(levelsBlueprint[id].time, gameState.timer.expireFunction);
   gameState.playground.draw(ctx, gameState.width, gameState.height);
 }
 

modules/levels.mjs

@@ -6,7 +6,7 @@ const level1Blueprint = {
   structure:[[ Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall ],
             [ Square.Wall, Square.Destination, Square.Box, Square.Floor, Square.Player, Square.Wall ],
             [ Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall ]],
-  time: 3000,
+  time: 1000,
 };
 // Blueprint for the second level
 const level2Blueprint = {

modules/timer.mjs

@@ -1,6 +1,20 @@
 export class Timer {
+  readDifficulty(slider) {
+    self.difficulty = 1.5 - slider.value * 0.01;
+    self.time = self.originalTime * self.difficulty;
+    console.log("difficulty: " + self.difficulty);
+    console.log("time: " + self.time);
+  }
+
   constructor(time, expireFunction) {
+    self.originalTime = time;
+    self.difficulty = 1.0;
     self.time = time;
+    let difficultySlider = document.getElementById('difficulty-slider');
+    this.readDifficulty(difficultySlider);
+    difficultySlider.addEventListener("change", () => {
+      this.readDifficulty(difficultySlider);
+    })
     self.expireFunction = expireFunction;
     self.timerElement = document.getElementById('timer');
     self.pauseButton1 = document.getElementById('pause-1');
@@ -28,14 +42,14 @@ export class Timer {
     self.pauseButton1.addEventListener("cilck", () => {
       alert("All this effort for nothing");
     });
-    self.timeRunning = true;
+    self.timeRunning = false;
     self.intervalController = setInterval(() => {
       // self.timerElement.innerHTML = "Time : " + String(self.time).padStart(5, ' ').InsertAt('.',3);
       if (self.timeRunning) {
         let timeStr = String(self.time).padStart(5, '0');
         self.timerElement.innerHTML = "Time : " + timeStr.slice(0, 3) + '.' + timeStr.slice(3);
         if (self.time == 0) {
-          self.expireFunction();
+          this.expireFunction();
           clearInterval(self.intervalControler);
           self.timeRunning = false;
         }
@@ -43,4 +57,16 @@ export class Timer {
       }
     }, 10);
   }
+
+  setTime(time) {
+    self.time = time;
+  }
+
+  start() {
+    self.timeRunning = true;
+  }
+
+  stop() {
+    self.timeRunning = false;
+  }
 }

script.js

@@ -6,6 +6,16 @@ import { Timer } from '/modules/timer.mjs'
 import { TutorialControler } from '/modules/tutorialControler.mjs'
 
 let canvas = document.getElementById('canvas');
+let difficultySlider = document.getElementById('difficulty-slider');
+let mouseOnCanvas = false;
+canvas.addEventListener("mouseenter",() => {
+  mouseOnCanvas = true;
+  difficultySlider.disabled = true;
+});
+canvas.addEventListener("mouseleave",() => {
+  mouseOnCanvas = false;
+  difficultySlider.disabled = false;
+});
 let ctx = canvas.getContext('2d');
 let gameState = {
   playground: generatePlayground(levelsBlueprint[0].structure, canvas.width, canvas.height),
@@ -23,7 +33,7 @@ let tutorial = new TutorialControler();
 fillLevelsSelection(gameState, ctx);
 window.ctx = ctx
 window.addEventListener("keydown", (event) => {
-  if (!event.defaultPrevented) {
+  if (!event.defaultPrevented && mouseOnCanvas) {
     if (gameState.playable) {
       switch (event.key) {
         case "ArrowDown":
@@ -49,7 +59,10 @@ window.addEventListener("keydown", (event) => {
       }
     } else {
       tutorial.next();
-      gameState.playable = tutorial.isFinished();
+      if (tutorial.isFinished()) {
+        gameState.playable = true;
+        gameState.timer.start();
+      }
     }
   }
 });

style.css

@@ -61,6 +61,7 @@ main {
 .speech {
     z-index: 3;
     margin: auto;
+    padding: 30px;
     position: relative;
     text-align: justify;
 }