Merge branch 'master' of https://git.etud.insa-toulouse.fr/nbillard/sokoban

index.html

@@ -27,8 +27,26 @@
         </nav>
         <div class="container">
             <aside class="left-sidebar">
-                <table>
+                <table border="1">
-                    SCORE
+                    <thead>
+                        <th>Name</th>
+                        <th>Score</th>
+                    </thead>
+   
+                    <tbody id="scoreTable">
+                        <tr>
+                            <td>
+                                Axel
+                            </td>
+                            <td>1</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                Ronan
+                            </td>
+                            <td>2</td>
+                        </tr>
+                    </tbody>
                 </table>
             </aside>
             <main>

modules/scoreboard.mjs

@@ -0,0 +1,49 @@
+export class Gamer {
+    constructor(Name, Score){
+        this.name = Name;
+        this.score = Score;
+    }
+    
+}
+
+export function Scoreboard()
+{
+    let alias = prompt("Entre ton nom", "User");
+    let gamers = [];
+    gamers.push( new Gamer(alias, 0));
+    console.log(gamers);
+    //let table = document.getElementById("scoreTable");
+
+    //console.log(table);
+    //console.log(tableau);
+    renderArray(gamers);
+
+}
+
+export function renderArray(gamers)
+{
+    let tableau= document.getElementById("scoreTable");
+    console.log(tableau);
+    tableau.innerText = "";
+    gamers.forEach((gamer, index) => {
+            let tableRow = document.createElement("tr");
+            let nameTd = document.createElement("td");
+            let scoreTd = document.createElement("td");
+            //rmvTd = document.createElement("td");
+            //rmvButton = document.createElement("button");
+            //rmvButton.innerText = "delete";
+            //rmvButton.setAttribute("array-index", index);
+            //rmvButton.addEventListener("click", removeStudent);
+            //rmvTd.appendChild(rmvButton);
+
+            nameTd.innerText = gamer.name;
+            scoreTd.innerText = gamer.score;
+
+            tableRow.appendChild(nameTd);
+            tableRow.appendChild(scoreTd);
+            //tableRow.appendChild(rmvTd);
+            tableau.appendChild(tableRow);
+    
+    });
+    console.log(tableau);
+}

script.js

@@ -4,6 +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 { Scoreboard } from '/modules/scoreboard.mjs'
 
 let canvas = document.getElementById('canvas');
 let difficultySlider = document.getElementById('difficulty-slider');
@@ -77,4 +78,7 @@ window.addEventListener("keydown", (event) => {
   }
 });
 
+//let table = document.getElementById("scoreTable");
+Scoreboard();
 gameState.playground.draw(ctx);
+

style.css

@@ -29,7 +29,7 @@ main {
 aside {
     margin: 0 auto;
     float: left;
-    width: 10rem;
+    width: 20rem;
     justify-content: space-between;
     flex-direction: column;
   }
@@ -73,6 +73,29 @@ footer p:last-child {
     font-weight: bolder;
 }
 
+table {
+    border-collapse: collapse;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
+	width:100%;
+}
+
+thead {
+	width:100%;
+	background:#000;
+	padding:(12px * 1.5) 0;
+    color:wheat;
+}
+
+tr {
+    text-align: center;
+	width:100%;
+	padding:(12px * 1.5) 0;
+}
+
+tr:nth-of-type(even) {
+    background:lightgray;
+}
+
 .text-bubble {
     position: relative;
     margin: auto;