fix clear line draw & theme select

css/style.css

@@ -30,7 +30,7 @@ body {
 
 h1 {
     font-size: 5vmin;
-    margin: 2vmin 5vmin 5vmin 5vmin;
+    margin: 1vmin auto;
     text-shadow: 3px 2px rgba(153, 145, 175, 0.5);
     text-align: center;
 }
@@ -41,18 +41,17 @@ div {
     flex-wrap: wrap;
     justify-content: center;
     align-content: center;
-    margin: 2vmin auto;
+    margin: 1vmin auto;
     text-align: center;
     column-gap: 2vmin;
 }
 
 fieldset {
     display: grid;
-    grid-template-columns: 25vmin 17vmin 25vmin 17vmin;
+    grid-template-columns: 3fr 2fr 3fr 2fr;
     grid-gap: 1vmin;
-    margin: 2vmin auto;
+    margin: 1vmin auto;
-    width: 80vmin;
+    justify-items: center;
-    justify-items: right;
     align-items: baseline;
 }
 
@@ -207,6 +206,10 @@ th, td {
     height: 18vmin;
 }
 
+#settingsButton {
+    display: none;
+}
+
 #leaderboard {
     min-width: 25%;
     margin: auto;

css/themes/light-relief.css

@@ -1,10 +1,12 @@
-.invisible-grid > .empty-cell {
+.empty-cell {
     background: transparent;
+}
+
+.invisible-grid > .empty-cell {
     border: 1px solid transparent;
 }
 
 .visible-grid > .empty-cell {
-    background: transparent;
     border: 1px inset rgba(128, 128, 128, 0.3);
 }
 

css/themes/light-solid.css

@@ -49,7 +49,6 @@
 
 .cleared-line {
     background: white;
-    transition: background 1s;
 }
 
 .trail {

db_connect.php.example

@@ -0,0 +1,7 @@
+// Complete and rename to db_connect.php
+<?php
+    $DB_NAME = "webtris";
+    $DB_USER = XXX;
+    $DB_PASSWORD = XXX;
+    $DB_HOST = "localhost";
+?>

index.php

@@ -70,7 +70,7 @@
             <fieldset>
                 <legend>Répétition automatique</legend>
                 <label id="autorepeatDelayRangeLabel" for="autorepeatDelayRange"></label>
-                <input id="autorepeatDelayRange" type="range" oninput="autorepeatDelayChanged()" min="100" max="1000" step="50" />
+                <input id="autorepeatDelayRange" type="range" oninput="autorepeatDelayChanged()" min="100" max="1000" step="10" />
                 <label id="autorepeatPeriodRangeLabel" for="autorepeatPeriodRange"></label>
                 <input id="autorepeatPeriodRange" type="range" id="autorepeatPeriodRange" oninput="autorepeatPeriodChanged()" min="2" max="50" step="2" />
             </fieldset>
@@ -100,6 +100,7 @@
             <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="settingsStartButton" type="button" onclick="showSettings()" disabled>OPTIONS</button>
         </fieldset>
         <div>
             <button id="settingsButton" type="button" onclick="showSettings()" disabled>OPTIONS</button>

js/webtris.js

@@ -291,13 +291,10 @@ class Matrix extends MinoesTable {
         } else {
             for (var y = 0; y < this.rows; y++) {
                 for (var x = 0; x < this.columns; x++) {
-                    var className = this.lockedMinoes[y][x]
+                    if (this.clearedLines.includes(y))
-                    if (!className) {
+                        var className = CLASSNAME.CLEARED_LINE
-                        if (this.clearedLines.includes(y))
+                    else
-                            className = CLASSNAME.CLEARED_LINE
+                        var className = this.lockedMinoes[y][x] || CLASSNAME.EMPTY_CELL
-                        else
-                            className = CLASSNAME.EMPTY_CELL
-                    }
                     this.drawMino(x, y, className)
                 }
             }
@@ -651,7 +648,7 @@ function gameOver() {
     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("settingsButton").style.display = "none"
     document.getElementById("leaderboardLink").style.display = "flex"
 }
 
@@ -842,20 +839,21 @@ function showSettings() {
     if (state == STATE.PLAYING)
         pause()
 
-    document.getElementById("set-moveLeft-key").innerHTML = replaceSpace(getKeyName("moveLeft"))
+    document.getElementById("set-moveLeft-key" ).innerHTML = replaceSpace(getKeyName("moveLeft"))
     document.getElementById("set-moveRight-key").innerHTML = replaceSpace(getKeyName("moveRight"))
-    document.getElementById("set-softDrop-key").innerHTML = replaceSpace(getKeyName("softDrop"))
+    document.getElementById("set-softDrop-key" ).innerHTML = replaceSpace(getKeyName("softDrop"))
-    document.getElementById("set-hardDrop-key").innerHTML = replaceSpace(getKeyName("hardDrop"))
+    document.getElementById("set-hardDrop-key" ).innerHTML = replaceSpace(getKeyName("hardDrop"))
-    document.getElementById("set-rotateCW-key").innerHTML = replaceSpace(getKeyName("rotateCW"))
+    document.getElementById("set-rotateCW-key" ).innerHTML = replaceSpace(getKeyName("rotateCW"))
     document.getElementById("set-rotateCCW-key").innerHTML = replaceSpace(getKeyName("rotateCCW"))
-    document.getElementById("set-hold-key").innerHTML = replaceSpace(getKeyName("hold"))
+    document.getElementById("set-hold-key"     ).innerHTML = replaceSpace(getKeyName("hold"))
-    document.getElementById("set-pause-key").innerHTML = replaceSpace(getKeyName("pause"))
+    document.getElementById("set-pause-key"    ).innerHTML = replaceSpace(getKeyName("pause"))
 
     document.getElementById("autorepeatDelayRange").value = autorepeatDelay
     document.getElementById("autorepeatDelayRangeLabel").innerText = `Délai : ${autorepeatDelay}ms`
     document.getElementById("autorepeatPeriodRange").value = autorepeatPeriod
     document.getElementById("autorepeatPeriodRangeLabel").innerText = `Période : ${autorepeatPeriod}ms`
 
+    document.getElementById("themeSelect").value=theme;
     themePreview.drawPiece(themePreview.piece)
 
     document.getElementById("showGhostCheckbox").checked = showGhost
@@ -874,14 +872,14 @@ function hideSettings() {
             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("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("settingsButton").style.display = "flex"
+            document.getElementById("settingsButton").style.display = "none"
             document.getElementById("leaderboardLink").style.display = "flex"
         break
         case STATE.PAUSED:
@@ -965,6 +963,7 @@ window.onload = function() {
     document.getElementById("startButton").disabled = false
     document.getElementById("startButton").focus();
     document.getElementById("settingsButton").disabled = false
+    document.getElementById("settingsStartButton").disabled = false
     messageDiv = document.getElementById("message")
 
     scheduler = new Scheduler()