Update scoreboard module to have multiple players

index.html

@@ -27,6 +27,12 @@
         </nav>
         <div class="container">
             <aside class="left-sidebar">
+                <h2>Score</h2>
+                <div class="input-field">
+                    <label for="name">Name</label>
+                    <input type="text" id="name" name="name">
+                    <button id="submit-name">Submit</button>
+                </div>
                 <table border="1">
                     <thead>
                         <th>Name</th>
@@ -34,18 +40,6 @@
                     </thead>
    
                     <tbody id="scoreTable">
-                        <tr>
-                            <td>
-                                Axel
-                            </td>
-                            <td>1</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                Ronan
-                            </td>
-                            <td>2</td>
-                        </tr>
                     </tbody>
                 </table>
             </aside>

modules/scoreboard.mjs

@@ -1,68 +1,81 @@
-export class Gamer {
-    constructor(Name, Score){
-        this.name = Name;
-        this.score = Score;
-        this.gamers = []
+export class Scoreboard {
+    constructor() {
+        this.currentGamer = new Gamer("user", 0);
+        this.gamers = [];
+        this.gamers.push(this.currentGamer);
+
       }
 
-    Scoreboard()
-    {
-        let alias = prompt("Entre ton nom", "User");
-        //let gamers = [];
-        //self.gamers
-        this.gamers.push( new Gamer(alias, 0));
-        //console.log(gamers);
-        //let game = new Gamer ("test", 0);
-        //let table = document.getElementById("scoreTable");
     
-        //console.log(table);
-        //console.log(tableau);
+    updatedName(name) {
+        let previousGamer = this.currentGamer;
+        if(name != this.currentGamer.name) {
+            console.log("updated");
+            this.currentGamer = new Gamer(name, 0);
+            this.addGamer(this.currentGamer);
+        }
+
+        if (previousGamer != this.currentGamer && previousGamer.score == 0) {
+            this.removeGamer(previousGamer);
+            console.log("removed");
+            console.log(this.gamers);   
+        }
+
         this.renderArray();
-
     }
 
-    addGamer()
-    {
-        
-    }
-    removeGamer(ev)
-    {
-        this.gamers.splice(ev.target.getAttribute("array-index"), 1);
-        renderArray();
+    addGamer(gamer) {
+        this.gamers.push(gamer);
     }
 
-    renderArray()
-    {
-        let tableau= document.getElementById("scoreTable");
-        //console.log(tableau);
-        tableau.innerText = "";
+    removeGamer(gamer) {
+        this.gamers.splice(this.gamers.indexOf(gamer), 1);
+    }
+
+    renderArray() {
+        let table = document.getElementById("scoreTable");
+        table.innerHTML = "";
         this.gamers.forEach((gamer, index) => {
-                let tableRow = document.createElement("tr");
-                let nameTd = document.createElement("td");
-                let scoreTd = document.createElement("td");
-                let rmvTd = document.createElement("td");
-                let rmvButton = document.createElement("button");
-                rmvButton.innerText = "delete";
-                rmvButton.setAttribute("array-index", index);
-                rmvButton.addEventListener("click", gamer.removeGamer);
-                rmvTd.appendChild(rmvButton);
-
-                nameTd.innerText = gamer.name;
-                scoreTd.innerText = gamer.score;
-
-                tableRow.appendChild(nameTd);
-                tableRow.appendChild(scoreTd);
-                tableRow.appendChild(rmvTd);
-                tableau.appendChild(tableRow);
-        
+            let row = table.insertRow();
+            let cell1 = row.insertCell();
+            let cell2 = row.insertCell();
+            cell1.innerHTML = gamer.name;
+            cell2.innerHTML = gamer.score;
         });
-        //console.log(tableau);
-    }
-
-
-    UpdateScore()
-    {
 
     }
 
+    updateCurrentGamer(gamer) {
+        this.currentGamer = gamer;
+    }
+
+    getCurrentGamer() {
+        return this.currentGamer;
+    }
+
+
+}
+
+
+export class Gamer {
+    constructor(name, score) {
+        this.name = name;
+        this.score = score;
+    }   
+
+    updateScore(score) {
+        this.score = score;
+    }      
+    
+    updateName(name) {  
+        this.name = name;
+    }
+
+    getScore() {
+        return this.score;
+    }
+
+    getName() {
+        return this.name;
+    }
 }

script.js

@@ -4,7 +4,7 @@ import { MoveDirection } from '/modules/enums.mjs'
 import { fillLevelsSelection, selectLevel, LevelManager } from '/modules/levelSelection.mjs'
 import { Timer } from '/modules/timer.mjs'
 import { TutorialControler } from '/modules/tutorialControler.mjs'
-import { Gamer } from '/modules/scoreboard.mjs'
+import { Scoreboard, Gamer } from '/modules/scoreboard.mjs'
 
 let canvas = document.getElementById('canvas');
 let difficultySlider = document.getElementById('difficulty-slider');
@@ -79,8 +79,22 @@ window.addEventListener("keydown", (event) => {
 });
 
 //let table = document.getElementById("scoreTable");
-let joueur = new Gamer("user", 0);
-joueur.Scoreboard();
+// let joueur = new Gamer("user", 0);
+// joueur.Scoreboard();
+
+let scoreboard = new Scoreboard();
+let inputName = document.getElementById("name");
+inputName.addEventListener("input", (event) => { 
+  console.log(event.target.value);
+  inputName.setAttribute('value', event.target.value);
+});
+
+let submitButton = document.getElementById("submit-name");
+submitButton.addEventListener("click", () => {
+  let value = inputName.value;
+  scoreboard.updatedName(value);
+});
+
 window.gamestate = gameState;
 gameState.playground.draw(ctx);
 

style.css

@@ -26,6 +26,7 @@ main {
     min-height: 40vh;
 }
 
+
 aside {
     margin: 0 auto;
     float: left;
@@ -142,3 +143,8 @@ tr:nth-of-type(even) {
     position: relative;
     text-align: justify;
 }
+
+.input-field {
+    display: flex;
+    flex-direction: row;
+}