Browse Source

Add some comments

Ronan 1 year ago
parent
commit
b818f74190
3 changed files with 70 additions and 11 deletions
  1. 7
    1
      index.html
  2. 49
    5
      modules/scoreboard.mjs
  3. 14
    5
      script.js

+ 7
- 1
index.html View File

@@ -1,9 +1,10 @@
1 1
 <!doctype html>
2
-<html id="html" lang="">
2
+<html id="html" lang="en">
3 3
     <head>
4 4
         <meta charset="utf-8">
5 5
         <meta http-equiv="x-ua-compatible" content="ie=edge">
6 6
         <title>Sokoban</title>
7
+        
7 8
         <meta name="description" content="">
8 9
         <meta name="viewport" content="width=device-width, initial-scale=1">
9 10
 
@@ -26,6 +27,7 @@
26 27
             </ol>
27 28
         </nav>
28 29
         <div class="container">
30
+            <!-- Scoreboard -->
29 31
             <aside class="left-sidebar">
30 32
                 <h2>Score</h2>
31 33
                 <div class="input-field">
@@ -43,6 +45,8 @@
43 45
                     </tbody>
44 46
                 </table>
45 47
             </aside>
48
+
49
+            <!-- Game -->
46 50
             <main>
47 51
                 <article class="not-in-win-animation">
48 52
                     <canvas id="canvas" width="800" height="400"></canvas>
@@ -58,6 +62,8 @@
58 62
                 </article>
59 63
     
60 64
             </main>
65
+
66
+            <!-- Controls -->
61 67
             <aside class="controls not-in-win-animation right-sidebar">
62 68
                 <div id="timer">Time</div>
63 69
                 <button id="pause-1">Pause</button>

+ 49
- 5
modules/scoreboard.mjs View File

@@ -7,7 +7,7 @@
7 7
 
8 8
 /**
9 9
  * @class Scoreboard
10
- * @classdesc This class is responsible for the scoreboard.
10
+ * @classdesc This class is responsible to display the scoreboard and manage scores of the gamers.
11 11
  */
12 12
 export class Scoreboard {
13 13
 
@@ -24,9 +24,9 @@ export class Scoreboard {
24 24
 
25 25
     
26 26
     /**
27
-     * @description
27
+     * After name changed in the input field, this method is called.
28
+     * If the name is different from the current gamer, a new gamer is created.
28 29
      * @param {String} name - The name of the gamer.
29
-     * 
30 30
      */
31 31
     updatedName(name) {
32 32
         let previousGamer = this.currentGamer;
@@ -37,23 +37,33 @@ export class Scoreboard {
37 37
 
38 38
         if (previousGamer != this.currentGamer && previousGamer.score == 0) {
39 39
             this.removeGamer(previousGamer);
40
-            console.log(this.gamers);   
41 40
         }
42 41
 
43 42
         this.renderArray();
44 43
     }
45 44
 
45
+    /**
46
+     * Add a gamer to the list of gamers.
47
+     * @param {Gamer} gamer 
48
+     */
46 49
     addGamer(gamer) {
47 50
         this.gamers.push(gamer);
48 51
     }
49 52
 
53
+    /**
54
+     * Remove a gamer from the list of gamers.
55
+     * @param {Gamer} gamer
56
+     */
50 57
     removeGamer(gamer) {
51 58
         this.gamers.splice(this.gamers.indexOf(gamer), 1);
52 59
     }
53 60
 
61
+    /**
62
+     * Render the list of gamers in the table.
63
+     */
54 64
     renderArray() {
55 65
         let table = document.getElementById("scoreTable");
56
-        table.innerHTML = "";
66
+        table.innerHTML = ""; // Clear the table
57 67
         this.gamers.forEach((gamer, index) => {
58 68
             let row = table.insertRow();
59 69
             let cell1 = row.insertCell();
@@ -64,17 +74,30 @@ export class Scoreboard {
64 74
 
65 75
     }
66 76
 
77
+    /**
78
+     * Update the current gamer who is playing.
79
+     * @param {Gamer} gamer
80
+     */
67 81
     updateCurrentGamer(gamer) {
68 82
         this.currentGamer = gamer;
69 83
     }
70 84
 
85
+    /**
86
+     * Get the current gamer who is playing.
87
+     * @returns {Gamer} The current gamer.
88
+     */
71 89
     getCurrentGamer() {
72 90
         return this.currentGamer;
73 91
     }
74 92
 
93
+    /**
94
+     * Update the score of the current gamer in the scoreboard.
95
+     * @param {Number} score 
96
+     */
75 97
     updateScoreCurrentGamer(score) {
76 98
         let newScore = this.currentGamer.score + score;
77 99
         this.currentGamer.updateScore(newScore);
100
+
78 101
         // Update score of the gamer in the table gamers
79 102
         this.gamers.forEach((gamer, index) => {
80 103
             if (gamer.name == this.currentGamer.name) {
@@ -93,23 +116,44 @@ export class Scoreboard {
93 116
  * @classdesc This class is responsible for the gamer.
94 117
  */
95 118
 export class Gamer {
119
+    /**
120
+     * @constructor
121
+     * @param {String} name 
122
+     * @param {Number} score 
123
+     */
96 124
     constructor(name, score) {
97 125
         this.name = name;
98 126
         this.score = score;
99 127
     }   
100 128
 
129
+    /**
130
+     * Set the score of the gamer.
131
+     * @param {Number} score 
132
+     */
101 133
     updateScore(score) {
102 134
         this.score = score;
103 135
     }      
104 136
     
137
+    /**
138
+     * Set the name of the gamer.
139
+     * @param {String} name 
140
+     */
105 141
     updateName(name) {  
106 142
         this.name = name;
107 143
     }
108 144
 
145
+    /**
146
+     * Get the score of the gamer.
147
+     * @returns {Number} The score of the gamer.
148
+     */
109 149
     getScore() {
110 150
         return this.score;
111 151
     }
112 152
 
153
+    /**
154
+     * Get the name of the gamer.
155
+     * @returns {String} The name of the gamer.
156
+     */
113 157
     getName() {
114 158
         return this.name;
115 159
     }

+ 14
- 5
script.js View File

@@ -6,6 +6,8 @@ import { Timer } from '/modules/timer.mjs'
6 6
 import { TutorialControler } from '/modules/tutorialControler.mjs'
7 7
 import { Scoreboard, Gamer } from '/modules/scoreboard.mjs'
8 8
 
9
+
10
+// Get the canvas and the context
9 11
 let canvas = document.getElementById('canvas');
10 12
 let difficultySlider = document.getElementById('difficulty-slider');
11 13
 let mouseOnCanvas = false;
@@ -18,6 +20,9 @@ canvas.addEventListener("mouseleave",() => {
18 20
   difficultySlider.disabled = false;
19 21
 });
20 22
 let ctx = canvas.getContext('2d');
23
+
24
+// Create the game state
25
+// The game state is a global variable that contains all the information about the game
21 26
 let gameState = {
22 27
   playground: generatePlayground(levelsBlueprint[0].structure, canvas.width, canvas.height),
23 28
   width: canvas.width,
@@ -35,11 +40,14 @@ let gameState = {
35 40
   tutorial: new TutorialControler(),
36 41
 };
37 42
 
43
+
38 44
 fillLevelsSelection(gameState, ctx);
45
+
39 46
 window.ctx = ctx
40 47
 window.addEventListener("keydown", (event) => {
41 48
   if (!event.defaultPrevented && mouseOnCanvas) {
42 49
     if (gameState.playable) {
50
+      // If the game is playable, the keyboard is used to move the player
43 51
       switch (event.key) {
44 52
         case "ArrowDown":
45 53
           gameState.playground.move(MoveDirection.Down);
@@ -58,10 +66,13 @@ window.addEventListener("keydown", (event) => {
58 66
           break;
59 67
       }
60 68
       gameState.playground.draw(ctx, canvas.width, canvas.height);
69
+
70
+      // If the game is solved, the next level is loaded
61 71
       if (gameState.playground.isSolved()) {
62 72
         gameState.levelManager.next(ctx, gameState);
63 73
       }
64 74
     } else {
75
+      // If the game is not playable, the tutorial is displayed
65 76
       switch (event.key) {
66 77
         case "ArrowRight":
67 78
         case " ":
@@ -79,22 +90,20 @@ window.addEventListener("keydown", (event) => {
79 90
   }
80 91
 });
81 92
 
82
-//let table = document.getElementById("scoreTable");
83
-// let joueur = new Gamer("user", 0);
84
-// joueur.Scoreboard();
85
-
93
+// Add event listener to the input field to update the name
86 94
 let inputName = document.getElementById("name");
87 95
 inputName.addEventListener("input", (event) => { 
88
-  console.log(event.target.value);
89 96
   inputName.setAttribute('value', event.target.value);
90 97
 });
91 98
 
99
+// Add event listener to the submit button to update the name
92 100
 let submitButton = document.getElementById("submit-name");
93 101
 submitButton.addEventListener("click", () => {
94 102
   let value = inputName.value;
95 103
   gamestate.scoreboard.updatedName(value);
96 104
 });
97 105
 
106
+// Draw the playground
98 107
 window.gamestate = gameState;
99 108
 gameState.playground.draw(ctx);
100 109
 

Loading…
Cancel
Save