fix new game fieldset & t-spin detection

css/style.css

@@ -98,6 +98,7 @@ a:hover {
 .minoes-table {
     table-layout: fixed;
     border-spacing: 0;
+    margin: 0;
 }
 
 th {
@@ -141,6 +142,7 @@ th, td {
     height: 0;
     width: 18vmin;
     justify-self: end;
+    margin: 0;
 }
 
 .name {

js/webtris.js

@@ -65,7 +65,7 @@ const SPIN = {
 }
 const T_SPIN = {
     NONE: "",
-    MINI: "MINI\nT-SPIN",
+    MINI: "MINI T-SPIN",
     T_SPIN: "T-SPIN"
 }
 const T_SLOT = {
@@ -77,21 +77,22 @@ const T_SLOT = {
 const T_SLOT_POS = [
     [-1, -1],
     [1, -1],
-    [1, 1],[-1, 1]
+    [1, 1],
+    [-1, 1]
 ]
 const SCORES = [
-    {linesClearedName: "",       "": 0, "MINI\nT-SPIN": 1, "T-SPIN": 4},
+    {linesClearedName: "",       "": 000, "MINI T-SPIN": 100, "T-SPIN": 400},
-    {linesClearedName: "SINGLE", "": 1, "MINI\nT-SPIN": 2, "T-SPIN": 8},
+    {linesClearedName: "SINGLE", "": 100, "MINI T-SPIN": 200, "T-SPIN": 800},
-    {linesClearedName: "DOUBLE", "": 3, "T-SPIN": 12},
+    {linesClearedName: "DOUBLE", "": 300, "T-SPIN": 1200},
-    {linesClearedName: "TRIPLE", "": 5, "T-SPIN": 16},
+    {linesClearedName: "TRIPLE", "": 500, "T-SPIN": 1600},
-    {linesClearedName: "TETRIS", "": 8},
+    {linesClearedName: "TETRIS", "": 800},
 ]
 const REPEATABLE_ACTIONS = [moveLeft, moveRight, softDrop]
 const STATE = {
     WAITING: "WAITING",
     PLAYING: "PLAYING",
     PAUSED: "PAUSE",
-    GAME_OVER: "GAME OVER"
+    GAME_OVER: "GAME OVER",
 }
 const actionsDefaultKeys = {
     moveLeft: "ArrowLeft",
@@ -267,7 +268,7 @@ class Matrix extends MinoesTable {
     }
 
     newGame() {
-        this.lockedMinoes = Array.from(Array(MATRIX.ROWS+3), row => Array(MATRIX.COLUMNS))
+        this.lockedMinoes = Array.from(Array(MATRIX.ROWS), row => Array(MATRIX.COLUMNS))
         this.piece = null
         this.clearedLines = []
         this.trail = {
@@ -277,7 +278,7 @@ class Matrix extends MinoesTable {
     }
     
     cellIsOccupied(x, y) {
-        return 0 <= x && x < MATRIX.COLUMNS && y < MATRIX.ROWS ? this.lockedMinoes[y][x] : true
+        return 0 <= x && x < MATRIX.COLUMNS && y < MATRIX.ROWS ? Boolean(this.lockedMinoes[y][x]) : true
     }
     
     spaceToMove(minoesAbsPos) {
@@ -377,10 +378,9 @@ class Stats {
     }
 
     set score(score) {
-        if (score != NaN) {
         this._score = score
         this.scoreCell.innerText = this._score.toLocaleString()
-            if (score > this.highScore)
+        if (score > this.highScore) {
             this.highScore = score
             this.highScoreCell.innerText = this.highScore.toLocaleString()
         }
@@ -392,7 +392,7 @@ class Stats {
         else
             this.level++
         this.levelCell.innerText = this.level
-        printTempTexts(`LEVEL<br/>${this.level}`)
+        printTempTexts(`NIVEAU<br/>${this.level}`)
         this.goal += 5 * this.level
         this.goalCell.innerText = this.goal
         if (this.level <= 20)
@@ -416,11 +416,10 @@ class Stats {
 
         if (clearedLines || tSpin) {
             this.clearedLines += clearedLines
-            this.clearedLinesCell.innerText = clearedLines
+            this.clearedLinesCell.innerText = this.clearedLines
-            patternScore = SCORES[clearedLines][tSpin]
+            patternScore = SCORES[clearedLines][tSpin] * this.level
-            this.goal -= patternScore
+            this.goal -= clearedLines
             this.goalCell.innerText = this.goal
-            patternScore *= 100 * this.level
             patternName = patternName.join("\n")
         }
         if (this.combo >= 1)
@@ -502,7 +501,6 @@ function move(movement, testMinoesPos=matrix.piece.minoesPos, hardDrop=false) {
     if (matrix.spaceToMove(testMinoesPos.translate(testPos))) {
         matrix.piece.pos = testPos
         matrix.piece.minoesPos = testMinoesPos
-        if (movement != MOVEMENT.DOWN)
         matrix.piece.rotatedLast = false
         if (matrix.spaceToMove(matrix.piece.minoesPos.translate(matrix.piece.pos.add(MOVEMENT.DOWN))))
             fallingPhase()
@@ -647,7 +645,7 @@ function gameOver() {
 
     document.getElementById("game").style.display = "grid"
     document.getElementById("settings").style.display = "none"
-    document.getElementById("start").style.display = "flex"
+    document.getElementById("start").style.display = "grid"
     document.getElementById("settingsButton").style.display = "none"
     document.getElementById("leaderboardLink").style.display = "flex"
 }
@@ -766,6 +764,7 @@ function pause() {
 }
 
 function resume() {
+    if (document.getElementById("game").style.display == "grid") {
         state = STATE.PLAYING
         messageDiv.innerHTML = ""
         scheduler.setInterval(lockPhase, stats.fallPeriod)
@@ -776,6 +775,7 @@ function resume() {
         matrix.draw()
         nextQueue.draw()
     }
+}
 
 function printTempTexts(text) {
     tempTexts.push(text)
@@ -871,14 +871,14 @@ function hideSettings() {
         case STATE.WAITING:
             document.getElementById("game").style.display = "none"
             document.getElementById("settings").style.display = "none"
-            document.getElementById("start").style.display = "flex"
+            document.getElementById("start").style.display = "grid"
             document.getElementById("settingsButton").style.display = "none"
             document.getElementById("leaderboardLink").style.display = "flex"
         break
         case STATE.GAME_OVER:
             document.getElementById("game").style.display = "grid"
             document.getElementById("settings").style.display = "none"
-            document.getElementById("start").style.display = "flex"
+            document.getElementById("start").style.display = "grid"
             document.getElementById("settingsButton").style.display = "none"
             document.getElementById("leaderboardLink").style.display = "flex"
         break
@@ -888,7 +888,6 @@ function hideSettings() {
             document.getElementById("start").style.display = "none"
             document.getElementById("settingsButton").style.display = "flex"
             document.getElementById("leaderboardLink").style.display = "none"
-            resume()
         break
     }
 }

leaderboard.php

@@ -7,7 +7,9 @@
         <link rel="stylesheet" type="text/css" href="css/style.css" />
     </head>
     <body>
+        <header>
             <h1>WEBTRIS</h1>
+        </header>
         <table id="leaderboard">
             <caption>MEILLEURS SCORES</caption>
 <?php