css/style.css

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

css/themes/light-solid.css

@@ -1,62 +0,0 @@
-.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

@@ -1,70 +0,0 @@
-.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,48 +9,40 @@
 }
 
 .mino {
-    border: 1px solid;
+    border: 1px solid white;
-    border-radius: 0;
+    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 {

css/themes/tetris-effect.css

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

index.php

@@ -95,12 +95,11 @@
             </div>
             <button type="button" onclick="hideSettings()">RETOUR</button>
         </div>
-        <fieldset id="start">
+        <div 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="newGame()" disabled>JOUER</button>
+            <button id="startButton" type="button" onclick="start()" disabled>JOUER</button>
-        </fieldset>
+        </div>
         <div>
             <button id="settingsButton" type="button" onclick="showSettings()" disabled>OPTIONS</button>
         </div>

js/settings.js

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

settings.php

@@ -0,0 +1,32 @@
+<!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>