remove old files

css/style.css

@@ -41,13 +41,9 @@ div {
     flex-wrap: wrap;
     justify-content: center;
     align-content: center;
-    margin: 4vmin;
+    margin: 2vmin auto;
     text-align: center;
-    column-gap: 1vmin;
+    column-gap: 2vmin;
-}
-
-div * {
-    margin: auto 2vmin;
 }
 
 fieldset {
@@ -55,7 +51,7 @@ fieldset {
     grid-template-columns: 25vmin 17vmin 25vmin 17vmin;
     grid-gap: 1vmin;
     margin: 2vmin auto;
-    width: 85vmin;
+    width: 80vmin;
     justify-items: right;
     align-items: baseline;
 }

css/themes/light-solid.css

@@ -0,0 +1,62 @@
+.invisible-grid > .empty-cell {
+    background: transparent;
+    border: 1px solid transparent;
+}
+
+.visible-grid > .empty-cell {
+    background: transparent;
+    border: 1px inset rgba(128, 128, 128, 0.3);
+}
+
+.mino {
+    border: 1px solid white;
+    border-radius: 0vmin;
+}
+
+.I-mino {
+    background: rgb(153, 255, 230);
+}
+
+.J-mino {
+    background: rgb(153, 204, 255);
+}
+
+.L-mino {
+    background: rgb(255, 204, 153);
+}
+
+.O-mino {
+    background: rgb(255, 255, 153);
+}
+
+.S-mino {
+    background: rgb(153, 255, 153);
+}
+
+.T-mino {
+    background: rgb(204, 153, 255);
+}
+
+.Z-mino {
+    background: rgb(255, 153, 153);
+}
+
+.locked-mino {
+    background: white;
+}
+
+.cleared-line {
+    background: white;
+}
+
+.trail {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 0vmin;
+}
+
+.ghost {
+    background: rgba(255, 255, 255, 0.4);
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    border-radius: 0vmin;
+}

css/themes/pure-relief.css

@@ -0,0 +1,70 @@
+.invisible-grid > .empty-cell {
+    background: transparent;
+    border: 1px solid transparent;
+}
+
+.visible-grid > .empty-cell {
+    background: transparent;
+    border: 1px inset rgba(128, 128, 128, 0.3);
+}
+
+.mino {
+    border: 1px outset;
+    border-radius: 0vmin;
+}
+
+.I-mino {
+    background: cyan;
+    border-color: lightcyan;
+}
+
+.J-mino {
+    background: blue;
+    border-color: lightblue;
+}
+
+.L-mino {
+    background: orange;
+    border-color: lightgoldenrodyellow;
+}
+
+.O-mino {
+    background: yellow;
+    border-color: lightyellow;
+}
+
+.S-mino {
+    background: green;
+    border-color: lightgreen;
+}
+
+.T-mino {
+    background: magenta;
+    border-color: pink;
+}
+
+.Z-mino {
+    background: red;
+    border-color: lightpink;
+}
+
+.locked-mino {
+    background: white;
+    border-color: white;
+}
+
+.cleared-line {
+    background: white;
+}
+
+.trail {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 0vmin;
+}
+
+.ghost {
+    background: rgba(255, 255, 255, 0.4);
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    border-radius: 0vmin;
+}

css/themes/pure-solid.css

@@ -9,40 +9,48 @@
 }
 
 .mino {
-    border: 1px solid white;
+    border: 1px solid;
-    border-radius: 0vmin;
+    border-radius: 0;
 }
 
 .I-mino {
     background: cyan;
+    border-color: lightcyan;
 }
 
 .J-mino {
     background: blue;
+    border-color: lightblue;
 }
 
 .L-mino {
     background: orange;
+    border-color: lightgoldenrodyellow;
 }
 
 .O-mino {
     background: yellow;
+    border-color: lightyellow;
 }
 
 .S-mino {
     background: green;
+    border-color: lightgreen;
 }
 
 .T-mino {
     background: magenta;
+    border-color: pink;
 }
 
 .Z-mino {
     background: red;
+    border-color: lightpink;
 }
 
 .locked-mino {
     background: white;
+    border-color: white;
 }
 
 .cleared-line {

css/themes/tetris-effect.css

@@ -16,6 +16,7 @@
 
 .locked-mino {
     background: rgba(242, 255, 255, 0.5);
+    border-color: rgba(242, 255, 255, 0.7);
 }
 
 .cleared-line {

index.php

@@ -95,11 +95,12 @@
             </div>
             <button type="button" onclick="hideSettings()">RETOUR</button>
         </div>
-        <div id="start">
+        <fieldset id="start">
+            <legend>Nouvelle partie</legend>
             <label for="startLevel">Niveau</label>
             <input type="number" id="startLevel" min="1" max="15" step="1">
-            <button id="startButton" type="button" onclick="start()" disabled>JOUER</button>
+            <button id="startButton" type="button" onclick="newGame()" disabled>JOUER</button>
-        </div>
+        </fieldset>
         <div>
             <button id="settingsButton" type="button" onclick="showSettings()" disabled>OPTIONS</button>
         </div>

js/settings.js

@@ -1,39 +0,0 @@
-const actionsDefaultKeys = {
-    moveLeft: "ArrowLeft",
-    moveRight: "ArrowRight",
-    softDrop: "ArrowDown",
-    hardDrop: " ",
-    rotateCW: "ArrowUp",
-    rotateCCW: "z",
-    hold: "c",
-    pause: "Escape",
-}
-var selectedButton = null
-var selectedAction = ""
-
-function getKey(action) {
-    key = localStorage.getItem(action) || actionsDefaultKeys[action]
-    if (key == ' ') key = "Space"
-    document.open()
-    document.write(key)
-    document.close()
-}
-
-function changeKey(button, action) {
-    button.innerHTML = "Touche ?"
-    selectedButton = button
-    selectedAction = action
-    button.blur()
-}
-
-function keyUpHandler(e) {
-    if (selectedButton) {
-        localStorage.setItem(selectedAction, e.key)
-        selectedButton.innerHTML = (e.key == " ") ? "Space" : e.key
-        selectedButton = null
-    }
-}
-
-window.onload = function() {
-    addEventListener("keyup", keyUpHandler, false)
-}

js/webtris.js

@@ -206,7 +206,6 @@ class MinoesTable {
     constructor(id, rows, columns) {
         this.rows = rows
         this.columns = columns
-        this.piece = null
         this.table = document.getElementById(id)
     }
 
@@ -233,6 +232,10 @@ class HoldQueue extends MinoesTable {
         super("hold", HOLD_ROWS, HOLD_COLUMNS)
     }
 
+    newGame() {
+        this.piece = null
+    }
+
     draw() {
         this.clearTable()
         if (this.piece && state != STATE.PAUSED)
@@ -244,6 +247,9 @@ class HoldQueue extends MinoesTable {
 class Matrix extends MinoesTable {
     constructor() {
         super("matrix", MATRIX_ROWS, MATRIX_COLUMNS)
+    }
+
+    newGame() {
         this.lockedMinoes = Array.from(Array(MATRIX_ROWS+3), row => Array(MATRIX_COLUMNS))
         this.piece = null
         this.clearedLines = []
@@ -303,6 +309,9 @@ class Matrix extends MinoesTable {
 class NextQueue extends MinoesTable {
     constructor() {
         super("next", NEXT_ROWS, NEXT_COLUMNS)
+    }
+
+    newGame() {
         this.pieces = Array.from({length: NEXT_PIECES}, (v, k) => new Tetromino(NEXT_PIECES_POSITIONS[k]))
     }
 
@@ -331,12 +340,18 @@ class Stats {
         this.levelCell = document.getElementById("level")
         this.goalCell = document.getElementById("goal")
         this.clearedLinesCell = document.getElementById("clearedLines")
-        this._score = 0
         this.highScore = Number(localStorage.getItem('highScore'))
-        this.highScoreCell.innerHTML = this.highScore.toLocaleString()
+        this.highScoreCell.innerText = this.highScore.toLocaleString()
+    }
+
+    newGame() {
+        this.score = 0
         this.goal = 0
+        this.goalCell.innerText = this.goal
         this.clearedLines = 0
+        this.clearedLinesCell.innerText = this.clearedLines
         this.time = 0
+        this.timeCell.innerText = timeFormat(0)
         this.combo = -1
         this.lockDelay = LOCK_DELAY
         this.fallPeriod = FALL_PERIOD
@@ -349,10 +364,10 @@ class Stats {
     set score(score) {
         if (score != NaN) {
             this._score = score
-            this.scoreCell.innerHTML = this._score.toLocaleString()
+            this.scoreCell.innerText = this._score.toLocaleString()
             if (score > this.highScore)
                 this.highScore = score
-                this.highScoreCell.innerHTML = this.highScore.toLocaleString()
+                this.highScoreCell.innerText = this.highScore.toLocaleString()
         }
     }
 
@@ -361,10 +376,10 @@ class Stats {
             this.level = level
         else
             this.level++
-        this.levelCell.innerHTML = this.level
+        this.levelCell.innerText = this.level
         printTempTexts(`LEVEL<br/>${this.level}`)
         this.goal += 5 * this.level
-        this.goalCell.innerHTML = this.goal
+        this.goalCell.innerText = this.goal
         if (this.level <= 20)
             this.fallPeriod = 1000 * Math.pow(0.8 - ((this.level - 1) * 0.007), this.level - 1)
         if (this.level > 15)
@@ -386,10 +401,10 @@ class Stats {
 
         if (clearedLines || tSpin) {
             this.clearedLines += clearedLines
-            this.clearedLinesCell.innerHTML = clearedLines
+            this.clearedLinesCell.innerText = clearedLines
             patternScore = SCORES[clearedLines][tSpin]
             this.goal -= patternScore
-            this.goalCell.innerHTML = this.goal
+            this.goalCell.innerText = this.goal
             patternScore *= 100 * this.level
             patternName = patternName.join("\n")
         }
@@ -410,8 +425,13 @@ class Stats {
 
 
 // Functions
-function start() {
+function newGame() {
     document.getElementById("startButton").blur()
+
+    holdQueue.newGame()
+    matrix.newGame()
+    nextQueue.newGame()
+    stats.newGame()
     
     var startLevel = document.getElementById("startLevel").value
     localStorage.setItem("startLevel", startLevel)
@@ -610,7 +630,7 @@ function gameOver() {
     XHR.open('POST', 'inleaderboard.php')
     XHR.send(FD)
 
-    document.getElementById("game").style.display = "none"
+    document.getElementById("game").style.display = "grid"
     document.getElementById("settings").style.display = "none"
     document.getElementById("start").style.display = "flex"
     document.getElementById("settingsButton").style.display = "flex"
@@ -760,7 +780,7 @@ function delTempTexts(self) {
 }
 
 function clock() {
-    stats.timeCell.innerHTML = timeFormat(1000 * ++stats.time)
+    stats.timeCell.innerText = timeFormat(1000 * ++stats.time)
 }
 
 function getKeyName(action) {
@@ -832,13 +852,19 @@ function hideSettings() {
     applySettings()
     switch(state) {
         case STATE.WAITING:
-        case STATE.GAME_OVER:
             document.getElementById("game").style.display = "none"
             document.getElementById("settings").style.display = "none"
             document.getElementById("start").style.display = "flex"
             document.getElementById("settingsButton").style.display = "flex"
             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("settingsButton").style.display = "flex"
+            document.getElementById("leaderboardLink").style.display = "flex"
+        break
         case STATE.PAUSED:
             document.getElementById("game").style.display = "grid"
             document.getElementById("settings").style.display = "none"

settings.php

@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8" />
-    <title>Webtris</title>
-    <link rel="icon" type="image/png" href="favicon.png">
-    <link rel="stylesheet" type="text/css" href="css/style.css" />
-    <script type="text/javascript" src="js/settings.js"></script>
-</head>
-<body>
-    <h1>WEBTRIS</h1>
-    <div id="settings">
-<?php
-    function addButton($action, $label) {
-?>
-        <div><?=$label?></div>
-        <button type="button" onclick="changeKey(this, '<?=$action?>')">
-            <script>getKey("<?=$action?>")</script>
-        </button>
-<?php    }
-    addButton("moveLeft", "GAUCHE");
-    addButton("moveRight", "DROITE");
-    addButton("softDrop", "CHUTE LENTE");
-    addButton("hardDrop", "CHUTE RAPIDE");
-    addButton("rotateCW", "ROTATION HORAIRE");
-    addButton("rotateCCW", "ROTATE INVERSE");
-    addButton("hold", "GARDE");
-    addButton("pause", "PAUSE");
-?>
-    </div>
-</body>
-</html>