From b818f74190b525937aca6336408996eff012e105 Mon Sep 17 00:00:00 2001
From: Ronan <ronan.bonnet42@wanadoo.fr>
Date: Fri, 6 Jan 2023 15:44:58 +0100
Subject: [PATCH 1/2] Add some comments

---
 index.html             |  8 ++++++-
 modules/scoreboard.mjs | 54 ++++++++++++++++++++++++++++++++++++++----
 script.js              | 19 +++++++++++----
 3 files changed, 70 insertions(+), 11 deletions(-)
diff --git a/index.html b/index.html
index c6c3b1b..517d0c3 100644
--- a/index.html
+++ b/index.html
@@ -1,9 +1,10 @@
 <!doctype html>
-<html id="html" lang="">
+<html id="html" lang="en">
     <head>
         <meta charset="utf-8">
         <meta http-equiv="x-ua-compatible" content="ie=edge">
         <title>Sokoban</title>
+        
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
@@ -26,6 +27,7 @@
             </ol>
         </nav>
         <div class="container">
+            <!-- Scoreboard -->
             <aside class="left-sidebar">
                 <h2>Score</h2>
                 <div class="input-field">
@@ -43,6 +45,8 @@
                     </tbody>
                 </table>
             </aside>
+
+            <!-- Game -->
             <main>
                 <article class="not-in-win-animation">
                     <canvas id="canvas" width="800" height="400"></canvas>
@@ -58,6 +62,8 @@
                 </article>
     
             </main>
+
+            <!-- Controls -->
             <aside class="controls not-in-win-animation right-sidebar">
                 <div id="timer">Time</div>
                 <button id="pause-1">Pause</button>
diff --git a/modules/scoreboard.mjs b/modules/scoreboard.mjs
index d31453f..5bad102 100644
--- a/modules/scoreboard.mjs
+++ b/modules/scoreboard.mjs
@@ -7,7 +7,7 @@
 
 /**
  * @class Scoreboard
- * @classdesc This class is responsible for the scoreboard.
+ * @classdesc This class is responsible to display the scoreboard and manage scores of the gamers.
  */
 export class Scoreboard {
 
@@ -24,9 +24,9 @@ export class Scoreboard {
 
     
     /**
-     * @description
+     * After name changed in the input field, this method is called.
+     * If the name is different from the current gamer, a new gamer is created.
      * @param {String} name - The name of the gamer.
-     * 
      */
     updatedName(name) {
         let previousGamer = this.currentGamer;
@@ -37,23 +37,33 @@ export class Scoreboard {
 
         if (previousGamer != this.currentGamer && previousGamer.score == 0) {
             this.removeGamer(previousGamer);
-            console.log(this.gamers);   
         }
 
         this.renderArray();
     }
 
+    /**
+     * Add a gamer to the list of gamers.
+     * @param {Gamer} gamer 
+     */
     addGamer(gamer) {
         this.gamers.push(gamer);
     }
 
+    /**
+     * Remove a gamer from the list of gamers.
+     * @param {Gamer} gamer
+     */
     removeGamer(gamer) {
         this.gamers.splice(this.gamers.indexOf(gamer), 1);
     }
 
+    /**
+     * Render the list of gamers in the table.
+     */
     renderArray() {
         let table = document.getElementById("scoreTable");
-        table.innerHTML = "";
+        table.innerHTML = ""; // Clear the table
         this.gamers.forEach((gamer, index) => {
             let row = table.insertRow();
             let cell1 = row.insertCell();
@@ -64,17 +74,30 @@ export class Scoreboard {
 
     }
 
+    /**
+     * Update the current gamer who is playing.
+     * @param {Gamer} gamer
+     */
     updateCurrentGamer(gamer) {
         this.currentGamer = gamer;
     }
 
+    /**
+     * Get the current gamer who is playing.
+     * @returns {Gamer} The current gamer.
+     */
     getCurrentGamer() {
         return this.currentGamer;
     }
 
+    /**
+     * Update the score of the current gamer in the scoreboard.
+     * @param {Number} score 
+     */
     updateScoreCurrentGamer(score) {
         let newScore = this.currentGamer.score + score;
         this.currentGamer.updateScore(newScore);
+
         // Update score of the gamer in the table gamers
         this.gamers.forEach((gamer, index) => {
             if (gamer.name == this.currentGamer.name) {
@@ -93,23 +116,44 @@ export class Scoreboard {
  * @classdesc This class is responsible for the gamer.
  */
 export class Gamer {
+    /**
+     * @constructor
+     * @param {String} name 
+     * @param {Number} score 
+     */
     constructor(name, score) {
         this.name = name;
         this.score = score;
     }   
 
+    /**
+     * Set the score of the gamer.
+     * @param {Number} score 
+     */
     updateScore(score) {
         this.score = score;
     }      
     
+    /**
+     * Set the name of the gamer.
+     * @param {String} name 
+     */
     updateName(name) {  
         this.name = name;
     }
 
+    /**
+     * Get the score of the gamer.
+     * @returns {Number} The score of the gamer.
+     */
     getScore() {
         return this.score;
     }
 
+    /**
+     * Get the name of the gamer.
+     * @returns {String} The name of the gamer.
+     */
     getName() {
         return this.name;
     }
diff --git a/script.js b/script.js
index 7b804e7..b2b576f 100644
--- a/script.js
+++ b/script.js
@@ -6,6 +6,8 @@ import { Timer } from '/modules/timer.mjs'
 import { TutorialControler } from '/modules/tutorialControler.mjs'
 import { Scoreboard, Gamer } from '/modules/scoreboard.mjs'
 
+
+// Get the canvas and the context
 let canvas = document.getElementById('canvas');
 let difficultySlider = document.getElementById('difficulty-slider');
 let mouseOnCanvas = false;
@@ -18,6 +20,9 @@ canvas.addEventListener("mouseleave",() => {
   difficultySlider.disabled = false;
 });
 let ctx = canvas.getContext('2d');
+
+// Create the game state
+// The game state is a global variable that contains all the information about the game
 let gameState = {
   playground: generatePlayground(levelsBlueprint[0].structure, canvas.width, canvas.height),
   width: canvas.width,
@@ -35,11 +40,14 @@ let gameState = {
   tutorial: new TutorialControler(),
 };
 
+
 fillLevelsSelection(gameState, ctx);
+
 window.ctx = ctx
 window.addEventListener("keydown", (event) => {
   if (!event.defaultPrevented && mouseOnCanvas) {
     if (gameState.playable) {
+      // If the game is playable, the keyboard is used to move the player
       switch (event.key) {
         case "ArrowDown":
           gameState.playground.move(MoveDirection.Down);
@@ -58,10 +66,13 @@ window.addEventListener("keydown", (event) => {
           break;
       }
       gameState.playground.draw(ctx, canvas.width, canvas.height);
+
+      // If the game is solved, the next level is loaded
       if (gameState.playground.isSolved()) {
         gameState.levelManager.next(ctx, gameState);
       }
     } else {
+      // If the game is not playable, the tutorial is displayed
       switch (event.key) {
         case "ArrowRight":
         case " ":
@@ -79,22 +90,20 @@ window.addEventListener("keydown", (event) => {
   }
 });
 
-//let table = document.getElementById("scoreTable");
-// let joueur = new Gamer("user", 0);
-// joueur.Scoreboard();
-
+// Add event listener to the input field to update the name
 let inputName = document.getElementById("name");
 inputName.addEventListener("input", (event) => { 
-  console.log(event.target.value);
   inputName.setAttribute('value', event.target.value);
 });
 
+// Add event listener to the submit button to update the name
 let submitButton = document.getElementById("submit-name");
 submitButton.addEventListener("click", () => {
   let value = inputName.value;
   gamestate.scoreboard.updatedName(value);
 });
 
+// Draw the playground
 window.gamestate = gameState;
 gameState.playground.draw(ctx);
 

From cf32c46c32486826ddbe851b1e7b54e1d8466b86 Mon Sep 17 00:00:00 2001
From: Ronan <ronan.bonnet42@wanadoo.fr>
Date: Fri, 6 Jan 2023 16:00:47 +0100
Subject: [PATCH 2/2] Add some comments

---
 modules/levelSelection.mjs | 16 +++++++++-------
 modules/levels.mjs         |  8 +++++++-
 modules/playground.mjs     |  5 +++++
 modules/timer.mjs          | 29 +++++++++++++++++++++++++++++
 4 files changed, 50 insertions(+), 8 deletions(-)

diff --git a/modules/levelSelection.mjs b/modules/levelSelection.mjs
index f561ce6..48848f5 100644
--- a/modules/levelSelection.mjs
+++ b/modules/levelSelection.mjs
@@ -1,13 +1,15 @@
+/**
+ * @fileoverview This file contains the functions to select a level
+ */
 import { levelsBlueprint } from '/modules/levels.mjs'
 import { generatePlayground } from '/modules/playground.mjs'
 import { Timer } from '/modules/timer.mjs'
 
 const prionicSequence = [0, 2, 6, 12, 20, 30, 42];
 
+// This funcion is called when the player selects a level and starts the game
 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();};
   gameState.timer.setTime(levelsBlueprint[id].time);
   gameState.playable = true;
   gameState.tutorial.hide();
@@ -15,6 +17,7 @@ export const selectLevel = (ctx, gameState, id) => {
   gameState.playground.draw(ctx, gameState.width, gameState.height);
 }
 
+// This function fills the level selection menu with the levels
 export const fillLevelsSelection = (gameState, ctx) => {
   let levelList = document.getElementById('level-list');
   for (let i = 0; i < levelsBlueprint.length; ++i) {
@@ -30,6 +33,7 @@ export const fillLevelsSelection = (gameState, ctx) => {
   }
 }
 
+// This class manages the levels and their completion
 export class LevelManager {
   constructor(winFunction, StartingLevelId = 0) {
     self.CurrentLevelId = StartingLevelId;
@@ -45,16 +49,13 @@ export class LevelManager {
     };
   }
 
-  // getFirstUncompleted() {
-  //   self.getFirstUncompleted();
-  // }
-
   // This function is called when the player completes a level
   // It checks if all levels are completed and calls the winFunction
   // If not, it selects the next level
   next(ctx, gameState) {
     let score = gameState.timer.getTime();
     gameState.scoreboard.updateScoreCurrentGamer(score);
+
     self.Completed[self.CurrentLevelId] = true;
     let allLevelsFinished = self.Completed.reduce((a, b) => {
       return a && b;
@@ -62,8 +63,9 @@ export class LevelManager {
     if (allLevelsFinished) {
       self.winFunction();
     }
+    
     self.CurrentLevelId = self.getFirstUncompleted();
-    console.log(self.CurrentLevelId);
+    // console.log(self.CurrentLevelId);
     selectLevel(ctx, gameState, self.CurrentLevelId);
   }
 }
diff --git a/modules/levels.mjs b/modules/levels.mjs
index 72bc2aa..129b77b 100644
--- a/modules/levels.mjs
+++ b/modules/levels.mjs
@@ -1,7 +1,9 @@
+/**
+ * @fileoverview This file contains the blueprints for the levels.
+ */
 import { Square } from '/modules/enums.mjs';
 
 // Blueprint for the first level
-//
 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 ],
@@ -25,6 +27,7 @@ const level2Blueprint = {
   time: 23000,
 };
 
+// Blueprint for the third level
 const level3Blueprint = {
   structure: [
     [Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall,],
@@ -40,6 +43,7 @@ const level3Blueprint = {
   time: 8000,
 }
 
+// Blueprint for the fourth level
 const level4Blueprint = {
   structure: [
     [Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall,],
@@ -56,6 +60,7 @@ const level4Blueprint = {
   time: 3000,
 }
 
+// Blueprint for the fifth level
 const level5Blueprint = {
   structure: [
     [Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, ],
@@ -72,6 +77,7 @@ const level5Blueprint = {
   time: 40000
 }
 
+// Array of blueprints for all levels
 export const levelsBlueprint = [
   level1Blueprint,
   level2Blueprint,
diff --git a/modules/playground.mjs b/modules/playground.mjs
index 596affc..e5d164d 100644
--- a/modules/playground.mjs
+++ b/modules/playground.mjs
@@ -1,3 +1,7 @@
+/**
+ * @fileoverview This file contains the Playground class.
+ */
+
 import { Square, CanMove, MoveDirection } from '/modules/enums.mjs'
 import { Position, copyPosition } from '/modules/position.mjs'
 import { ForegroundTile, BackgroundTile } from '/modules/tiles.mjs'
@@ -18,6 +22,7 @@ export const generatePlayground = (levelBlueprint, canvasWidth, canvasHeight) =>
     x: NaN,
     y: NaN,
   };
+
   levelBlueprint.forEach((levelRow, indexRow) => {
     background.push([]);
     foreground.push([]);
diff --git a/modules/timer.mjs b/modules/timer.mjs
index a7b753c..aca7058 100644
--- a/modules/timer.mjs
+++ b/modules/timer.mjs
@@ -1,4 +1,14 @@
+/**
+ * @fileoverview Timer class
+ */
+
+/**
+ * @class Timer
+ * @classdesc This class is responsible for the timer.
+ */
 export class Timer {
+
+  // Set time to solve the level by using the difficulty slider
   readDifficulty(slider) {
     self.difficulty = 1.5 - slider.value * 0.01;
     self.time = self.originalTime * self.difficulty;
@@ -8,13 +18,17 @@ export class Timer {
     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');
+
+    // Feature : Move the pause button when the mouse is over it
     self.pauseButton1 = document.getElementById('pause-1');
     self.pauseButton2 = document.getElementById('pause-2');
     self.pauseButton2.style.visibility = "hidden";
@@ -40,6 +54,8 @@ export class Timer {
     self.pauseButton1.addEventListener("click", () => {
       alert("All this effort for nothing");
     });
+
+    
     self.timeRunning = false;
     self.intervalController = setInterval(() => {
       // self.timerElement.innerHTML = "Time : " + String(self.time).padStart(5, ' ').InsertAt('.',3);
@@ -56,18 +72,31 @@ export class Timer {
     }, 10);
   }
 
+  /**
+   * Set the time of the timer.
+   * @param {Number} time 
+   */
   setTime(time) {
     self.time = time;
   }
 
+  /**
+   * @returns {Number} The time of the timer.
+   */
   getTime() {
     return self.time;
   }
 
+  /**
+   * Start the timer.
+   */
   start() {
     self.timeRunning = true;
   }
 
+  /**
+   * Stop the timer.
+   */
   stop() {
     self.timeRunning = false;
   }
