new version

index.php

@@ -1,80 +1,97 @@
+<?php
+    $actions = [
+        "moveLeft"  => ["label"=>"Gauche",                "defaultKey"=>"ArrowLeft"],
+        "moveRight" => ["label"=>"Droite",                "defaultKey"=>"ArrowRight"],
+        "softDrop"  => ["label"=>"Chute lente",           "defaultKey"=>"ArrowDown"],
+        "hardDrop"  => ["label"=>"Chute rapide",          "defaultKey"=>"Space"],
+        "rotateCW"  => ["label"=>"Rotation horaire",      "defaultKey"=>"ArrowUp"],
+        "rotateCCW" => ["label"=>"Rotation anti-horaire", "defaultKey"=>"z"],
+        "hold"      => ["label"=>"Garde",                 "defaultKey"=>"c"],
+        "pause"     => ["label"=>"Pause/Reprise",         "defaultKey"=>"Escape"]
+    ];
+
+    function echoTable($id, $invisibleRows, $visibleRows, $columns) {
+        echo "                <table id='$id' class=minoes-table>\n";
+        for ($y = 0; $y < $invisibleRows; $y++) {
+            echo "                    <tr>";
+            for ($x = 0; $x < $columns; $x++) {
+                echo "<th class=empty-cell></td>";
+            }
+            echo "</tr>\n";
+        }
+        for ($y = 0; $y < $visibleRows; $y++) {
+            echo "                    <tr>";
+            for ($x = 0; $x < $columns; $x++) {
+                echo "<td class=empty-cell></td>";
+            }
+            echo "</tr>\n";
+        }
+        echo "                </table>\n";
+    }
+?>
 <!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="style.css" />
+        <link id="theme" rel="stylesheet" type="text/css" href="themes/default/style.css" />
         <script type="text/javascript" src="webtris.js"></script>
     </head>
     <body>
-        <header>
+        <section id="gameSection" style="display: none">
-            <h1>WEBTRIS</h1>
+            <div>
-        </header>
+<?php
-        <section id="game">
+    echoTable("holdTable",   6,  0,  6);
-    <?php
+    echoTable("matrixTable", 4, 20, 10);
-        function echoTable($id, $invisibleRows, $visibleRows, $columns) {
+    echoTable("nextTable",  24,  0,  6);
-            echo "            <table id='$id' class=minoes-table>\n";
+?>
-            for ($y = 0; $y < $invisibleRows; $y++) {
+                <table id="statsTable">
-                echo "                <tr class=invisible-grid>";
+                    <tr><th class="name" colspan=2>SCORE</th></tr>
-                for ($x = 0; $x < $columns; $x++) {
+                    <tr><td class="value" id="score" colspan=2>0</td></tr>
-                    echo "<th class=empty-cell></td>";
+                    <tr><th class="name" colspan=2>RECORD</th></tr>
-                }
+                    <tr><td class="value" id="highScore" colspan=2>0</td></tr>
-                echo "</tr>\n";
+                    <tr><th class="name" colspan=2>TEMPS</th></tr>
-            }
+                    <tr><td class="value" id="time" colspan=2>00:00</td></tr>
-            for ($y = 0; $y < $visibleRows; $y++) {
+                    <tr><td colspan=2><br/></td class="name"></tr>
-                echo "                <tr class=visible-grid>";
+                    <tr><th class="name">NIVEAU</th><td class="value" id="level">0</td></tr>
-                for ($x = 0; $x < $columns; $x++) {
+                    <tr><th class="name">OBJECTIF</th><td class="value" id="goal">0</td></tr>
-                    echo "<td class=empty-cell></td>";
+                    <tr><th class="name">LIGNES</th><td class="value" id="clearedLines">0</td></tr>
-                }
+                </table>
-                echo "</tr>\n";
+                <span id="messageSpan"></span>
-            }
+            </div>
-            echo "            </table>\n";
-        }
-        echoTable("hold",   6,  0,  6);
-        echoTable("matrix", 4, 20, 10);
-        echoTable("next",  24,  0,  6);
-    ?>
-            <table id="stats">
-                <tr><th class="name" colspan=2>SCORE</th></tr>
-                <tr><td class="value" id="score" colspan=2>0</td></tr>
-                <tr><th class="name" colspan=2>RECORD</th></tr>
-                <tr><td class="value" id="highScore" colspan=2>0</td></tr>
-                <tr><th class="name" colspan=2>TEMPS</th></tr>
-                <tr><td class="value" id="time" colspan=2>00:00</td></tr>
-                <tr><td colspan=2><br/></td class="name"></tr>
-                <tr><th class="name">NIVEAU</th><td class="value" id="level">0</td></tr>
-                <tr><th class="name">OBJECTIF</th><td class="value" id="goal">0</td></tr>
-                <tr><th class="name">LIGNES</th><td class="value" id="clearedLines">0</td></tr>
-            </table>
-            <div id="message"></div>
         </section>
-        <section id="settings">
+        <section id="startSection">
-            <fieldset id="keyboard">
+            <fieldset>
+                <legend>Nouvelle partie</legend>
+                <div>
+                    <div></div>
+                    <button id="startButton" type="button" onclick="newGame(Number(startLevelInput.value))" disabled>JOUER</button>
+                    <label for="startLevel">Niveau</label>
+                    <input type="number" id="startLevelInput" min="1" max="15" step="1">
+                </div>
+            </fieldset>
+        </section>
+        <section id="settingsSection">
+            <fieldset>
                 <legend>Clavier</legend>
-                <div class="settings">
+                <div>
-    <?php
+<?php
-        function addButton($action, $label) {
+    foreach($actions as $action=>$parameters) {
-            echo "                    <label for='set-$action-key'>$label</label>\n";
+?>
-            echo "                    <button id='set-$action-key' type='button' onclick=\"waitKey(this, '$action')\">...</button>";
+                    <label for='<?=$action?>SetKeyButton'><?=$parameters["label"]?></label>
-        }
+                    <button id='<?=$action?>SetKeyButton' type='button' onclick="waitKey(this, '<?=$action?>')"><?=$parameters["defaultKey"]?></button>
-        addButton("moveLeft", "Gauche");
+<?php
-        addButton("moveRight", "Droite");
+    }
-        addButton("softDrop", "Chute lente");
+?>
-        addButton("hardDrop", "Chute rapide");
-        addButton("rotateCW", "Rotation horaire");
-        addButton("rotateCCW", "Rotation anti-horaire");
-        addButton("hold", "Garde");
-        addButton("pause", "Pause/Reprise");
-    ?>
                 </div>
             </fieldset>
             <fieldset>
                 <legend>Répétition automatique</legend>
                 <div>
-                    <label id="autorepeatDelayRangeLabel" for="autorepeatDelayRange">Délai initial</label>
+                    <label id="autorepeatDelayRangeLabel" for="autorepeatDelayRange">Délai initial : 300ms</label>
-                    <input id="autorepeatDelayRange" type="range" oninput="autorepeatDelayChanged()" min="100" max="1000" step="10" />
+                    <input id="autorepeatDelayRange" type="range" oninput="autorepeatDelayChanged()" min="100" max="500" step="10" />
-                    <label id="autorepeatPeriodRangeLabel" for="autorepeatPeriodRange">Période</label>
+                    <label id="autorepeatPeriodRangeLabel" for="autorepeatPeriodRange">Période : 10ms</label>
                     <input id="autorepeatPeriodRange" type="range" id="autorepeatPeriodRange" oninput="autorepeatPeriodChanged()" min="2" max="50" step="2" />
                 </div>
             </fieldset>
@@ -84,39 +101,26 @@
                     <div></div>
                     <select id="themeSelect" onchange="themeChanged()">
 <?php
-    foreach(scandir("themes") as $theme) {
+    foreach(array_slice(scandir("themes"), 2) as $theme) {
-        if (pathinfo ($theme, PATHINFO_EXTENSION) == "css")
+       if (is_dir(pathinfo($theme)['dirname']))
-            echo "                        <option>" . pathinfo($theme, PATHINFO_FILENAME) . "</option>\n";
+            echo "                            <option>" . $theme . "</option>\n";
     }
 ?>
                     </select>
 <?php
-    echoTable("themePreview",   2,  0,  3);
+    echoTable("themePreviewTable",   2,  0,  3);
 ?>
-                    <div id="showGhostDiv">
+                    <div>
                         <input id="showGhostCheckbox" type="checkbox" checked onchange="showGhostChanged()"/>
                         <label for="showGhostCheckbox">Afficher le fantôme</label>
                     </div>
                 </div>
             </fieldset>
-            <button id="hideSettingsButton" type="button" onclick="hideSettings()">RETOUR</button>
         </section>
-        <section id="start">
+        <section id="leaderboardLinkSection">
-            <fieldset>
+            <div>
-                <legend>Nouvelle partie</legend>
+                <a href="leaderboard.php" target="_blank">TABLEAU DE SCORE</a>
-                <div>
+            </div>
-                    <label for="startLevel">Niveau</label>
-                    <input type="number" id="startLevelInput" min="1" max="15" step="1">
-                    <div></div>
-                    <button id="startButton" type="button" onclick="newGame(startLevelInput.value)" disabled>JOUER</button>
-                </div>
-            </fieldset>
-        </section>
-        <section>
-            <button id="settingsButton" type="button" onclick="showSettings()" disabled>OPTIONS</button>
-        </section>
-        <footer id="leaderboardLink">
-            <a href="leaderboard.php" target="_blank">TABLEAU DE SCORE</a>
         </footer>
     </body>
 </html>

themes/arcade.css

@@ -1,76 +0,0 @@
-.empty-cell {
-    background: transparent;
-}
-
-.invisible-grid > .empty-cell {
-    border: 1px solid transparent;
-}
-
-.visible-grid > .empty-cell {
-    border: 1px solid rgba(255, 255, 255, .4);
-}
-
-.mino {
-    border: 1px solid;
-    border-radius: 1px;
-}
-
-.I-mino {
-    /* cyan */
-    background: #99d9ea;
-    border-color: #d1edf5;
-}
-
-.J-mino {
-    /* blue */
-    background: #7f92ff;
-    border-color: #c2cbff;
-}
-
-.L-mino {
-    /* orange */
-    background: #ffb27f;
-    border-color: #ffe1cd;
-}
-
-.O-mino {
-    /* yellow */
-    background: #ffe97f;
-    border-color: #fff5ca;
-}
-
-.S-mino {
-    /* green */
-    background: #7fff8e;
-    border-color: #ccffd2;
-}
-
-.T-mino {
-    /* magenta */
-    background: #d67fff;
-    border-color: #edc9ff;
-}
-
-.Z-mino {
-    /* red */
-    background: #ff7f7f;
-    border-color: #ffdada;
-}
-
-.locked-mino, .cleared-line {
-    background: white;
-    border: 1px solid white;
-    border-radius: 1px;
-}
-
-.trail {
-    background: rgba(255, 255, 255, 0.2);
-    border: 1px solid white;
-    border-radius: 1px;
-}
-
-.ghost {
-    background: rgba(255, 255, 255, 0.4);
-    border: 1px solid rgba(255, 255, 255, 0.6);
-    border-radius: 1px;
-}

themes/default/style.css

@@ -0,0 +1,181 @@
+body {
+    font-family: sans-serif;
+    color: white;
+    background: #222;
+}
+
+section {
+    margin: 1em;
+}
+
+div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+fieldset > div {
+    display: grid;
+    grid-template-columns: 3fr 2fr 3fr 2fr;
+    grid-column-gap: 2em;
+    grid-row-gap: 1em;
+    justify-items: right;
+    align-items: center;
+}
+
+fieldset button, input {
+    width: 100%;
+}
+
+label {
+    text-align: center;
+}
+
+a {
+    text-decoration: none;
+    color: lightblue;
+}
+
+#gameSection {
+    width: 72vmin;
+    grid-template-columns: 18vmin 30vmin 18vmin;
+    grid-gap: 3vmin;
+    margin: auto;
+}
+
+#gameSection div {
+    display: grid;
+}
+
+#holdTable {
+    grid-column: 1;
+    grid-row: 1;
+    justify-self: end;
+}
+
+#statsTable {
+    grid-column: 1;
+    grid-row: 3;
+    height: 0;
+    justify-self: end;
+    margin: 0 auto;
+}
+
+#scoreTable {
+    font-weight: bold;
+}
+
+#matrixTable {
+    grid-column: 2;
+    grid-row: 1 / 4;
+}
+
+#messageSpan {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 4vmin;
+    text-shadow: 1px 1px rgba(0, 0, 0, 0.8);
+    text-align: center;
+    font-weight: bold;
+}
+
+#nextTable {
+    grid-column: 3;
+    grid-row: 1 / 4;
+}
+
+
+.minoes-table {
+    table-layout: fixed;
+    border-spacing: 0;
+    margin: auto;
+}
+
+.minoes-table tr {
+    height: 3vmin;
+}
+
+.minoes-table th, td {
+    font-weight: normal;
+    padding: 0;
+    height: 3vmin;
+    width: 3vmin;
+    border: 1px solid transparent;
+}
+
+.minoes-table th {
+    border: 1px solid transparent;
+}
+
+.minoes-table td {
+    border: 1px solid #888;
+}
+
+.minoes-table .mino {
+    border: 1px solid;
+    border-radius: 1px;
+}
+
+.minoes-table .I {
+    /* cyan */
+    background: #99d9ea;
+    border-color: #d1edf5;
+}
+
+.minoes-table .J {
+    /* blue */
+    background: #7f92ff;
+    border-color: #c2cbff;
+}
+
+.minoes-table .L {
+    /* orange */
+    background: #ffb27f;
+    border-color: #ffe1cd;
+}
+
+.minoes-table .O {
+    /* yellow */
+    background: #ffe97f;
+    border-color: #fff5ca;
+}
+
+.minoes-table .S {
+    /* green */
+    background: #7fff8e;
+    border-color: #ccffd2;
+}
+
+.minoes-table .T {
+    /* magenta */
+    background: #d67fff;
+    border-color: #edc9ff;
+}
+
+.minoes-table .Z {
+    /* red */
+    background: #ff7f7f;
+    border-color: #ffdada;
+}
+
+.locked, .cleared-line {
+    background: white;
+    border: 1px solid white;
+    border-radius: 1px;
+}
+
+.trail {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid white;
+    border-radius: 1px;
+}
+
+.ghost {
+    background: rgba(255, 255, 255, 0.4);
+    border: 1px solid rgba(255, 255, 255, 0.6);
+    border-radius: 1px;
+}
+

themes/effect/style.css

@@ -1,3 +1,42 @@
+.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, .I-mino, .J-mino, .L-mino, .O-mino, .S-mino, .T-mino, .Z-mino {
+    background: rgba(127, 229, 255, 0.3);
+    border: 1px solid rgba(127, 229, 255, 0.7);
+    border-radius: 0.3vmin;
+}
+
+.locked-mino {
+    background: rgba(242, 255, 255, 0.5);
+    border-color: rgba(242, 255, 255, 0.7);
+}
+
+.cleared-line {
+    background: white;
+}
+
+.trail {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 0.3vmin;
+}
+
+.ghost {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    border-radius: 0.3vmin;
+}
+
+
+
 @font-face {
     font-family: 'Share Tech';
     font-style: normal;
@@ -116,7 +155,7 @@ th, td {
     width: 72vmin;
     grid-template-columns: 18vmin 30vmin 18vmin;
     grid-gap: 3vmin;
-    margin: -8vmin auto 0 auto;
+    margin: auto;
 }
 
 #hold {
@@ -207,3 +246,5 @@ caption {
     color: white;
 }
 
+
+

themes/light-relief.css

@@ -1,64 +0,0 @@
-.empty-cell {
-    background: transparent;
-}
-
-.invisible-grid > .empty-cell {
-    border: 1px solid transparent;
-}
-
-.visible-grid > .empty-cell {
-    border: 1px inset rgba(128, 128, 128, 0.3);
-}
-
-.mino {
-    border: 1px outset 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(255, 102, 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;
-}

themes/light-solid.css

@@ -1,64 +0,0 @@
-.empty-cell {
-    background: transparent;
-}
-
-.invisible-grid > .empty-cell {
-    border: 1px solid transparent;
-}
-
-.visible-grid > .empty-cell {
-    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(255, 102, 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: 0;
-}
-
-.ghost {
-    background: rgba(255, 255, 255, 0.4);
-    border: 1px solid rgba(255, 255, 255, 0.4);
-    border-radius: 0;
-}

themes/tetris-effect.css

@@ -1,36 +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, .I-mino, .J-mino, .L-mino, .O-mino, .S-mino, .T-mino, .Z-mino {
-    background: rgba(127, 229, 255, 0.3);
-    border: 1px solid rgba(127, 229, 255, 0.7);
-    border-radius: 0.3vmin;
-}
-
-.locked-mino {
-    background: rgba(242, 255, 255, 0.5);
-    border-color: rgba(242, 255, 255, 0.7);
-}
-
-.cleared-line {
-    background: white;
-}
-
-.trail {
-    background: rgba(255, 255, 255, 0.2);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: 0.3vmin;
-}
-
-.ghost {
-    background: rgba(255, 255, 255, 0.2);
-    border: 1px solid rgba(255, 255, 255, 0.4);
-    border-radius: 0.3vmin;
-}

themes/vivid-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;
-}

themes/vivid-solid.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 solid;
-    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 {
-    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;
-}

webtris.js

@@ -39,7 +39,7 @@ const CLASSNAME = {
 const DELAY = {
     LOCK: 500,
     FALL: 1000,
-    autorepeat: 300,
+    AUTOREPEAT: 300,
     AUTOREPEAT_PERIOD: 10,
     ANIMATION: 100,
     MESSAGE: 700
@@ -195,7 +195,7 @@ class Tetromino {
                 this.minoesPos = [[-1, -1], [0, -1], [0, 0], [1, 0]]
             break
         }
-        this.className = CLASSNAME.MINO + " " + this.shape + "-" + CLASSNAME.MINO
+        this.className = CLASSNAME.MINO + " " + this.shape
     }
         
     get minoesAbsPos() {
@@ -237,7 +237,7 @@ class MinoesTable {
 
 class HoldQueue extends MinoesTable {
     constructor() {
-        super("hold")
+        super("holdTable")
     }
 
     newGame() {
@@ -254,7 +254,7 @@ class HoldQueue extends MinoesTable {
 
 class Matrix extends MinoesTable {
     constructor() {
-        super("matrix")
+        super("matrixTable")
     }
 
     newGame() {
@@ -314,7 +314,7 @@ class Matrix extends MinoesTable {
 
 class NextQueue extends MinoesTable {
     constructor() {
-        super("next")
+        super("nextTable")
     }
 
     newGame() {
@@ -332,7 +332,7 @@ class NextQueue extends MinoesTable {
 
 class ThemePreview extends MinoesTable {
     constructor() {
-        super("themePreview")
+        super("themePreviewTable")
         this.piece = new Tetromino(THEME.PIECE_POSITION, "T")
     }
 }
@@ -378,7 +378,7 @@ class Stats {
 
     newLevel(level=null) {
         this.level = level || this.level + 1
-        location.hash = "#" + this.level
+        location.hash = "#level" + this.level
         this.levelCell.innerText = this.level
         printTempTexts(`NIVEAU<br/>${this.level}`)
         this.goal += 5 * this.level
@@ -427,8 +427,8 @@ class Stats {
 
 
 // Functions
-function newGame(startLevel=startLevelInput) {
+function newGame(startLevel) {
-    document.getElementById("startButton").blur()
+    startButton.blur()
 
     holdQueue.newGame()
     matrix.newGame()
@@ -437,11 +437,10 @@ function newGame(startLevel=startLevelInput) {
     
     localStorage.setItem("startLevel", startLevel)
 
-    document.getElementById("game").style.display = "grid"
+    startSection.style.display = "none"
-    document.getElementById("settings").style.display = "none"
+    gameSection.style.display = "block"
-    document.getElementById("settingsButton").style.display = "flex"
+    settingsSection.style.display = "none"
-    document.getElementById("start").style.display = "none"
+    leaderboardLinkSection.style.display = "none"
-    document.getElementById("leaderboardLink").style.display = "none"
 
     state = STATE.PLAYING
     pressedKeys = new Set()
@@ -577,7 +576,7 @@ function clearLinesCleared() {
 
 function gameOver() {
     state = STATE.GAME_OVER
-    messageDiv.innerHTML = "GAME<br/>OVER"
+    messageSpan.innerHTML = "GAME<br/>OVER"
     scheduler.clearInterval(lockPhase)
     scheduler.clearTimeout(lockDown)
     scheduler.clearInterval(clock)
@@ -628,11 +627,12 @@ function gameOver() {
     request.open('POST', 'inleaderboard.php')
     request.send(fd)
     
-    document.getElementById("game").style.display = "grid"
+    location.hash = "#game-over"
-    document.getElementById("settings").style.display = "none"
+
-    document.getElementById("start").style.display = "grid"
+    startSection.style.display = "block"
-    document.getElementById("settingsButton").style.display = "flex"
+    gameSection.style.display = "block"
-    document.getElementById("leaderboardLink").style.display = "flex"
+    settingsSection.style.display = "none"
+    leaderboardLinkSection.style.display = "block"
 }
 
 function autorepeat() {
@@ -737,6 +737,7 @@ function hold() {
 
 function pause() {
     state = STATE.PAUSED
+    location.hash = "#pause"
     stats.startTime = performance.now() - stats.startTime
     actionsToRepeat = []
     scheduler.clearInterval(lockPhase)
@@ -747,29 +748,32 @@ function pause() {
     holdQueue.draw()
     matrix.draw()
     nextQueue.draw()
-    messageDiv.innerHTML = `PAUSE<br/><br/>Appuyez sur<br/>${getKeyName('pause')}<br/>pour reprendre`
+    gameSection.style.display = "none"
+    settingsSection.style.display = "block"
 }
 
 function resume() {
-    if (document.getElementById("game").style.display == "grid") {
+    applySettings()
-        state = STATE.PLAYING
+    settingsSection.style.display = "none"
-        stats.startTime = performance.now() - stats.startTime
+    gameSection.style.display = "block"
-        messageDiv.innerHTML = ""
+    location.hash = "#level" + stats.level
-        scheduler.setInterval(lockPhase, stats.fallPeriod)
+    state = STATE.PLAYING
-        if (matrix.piece.locked)
+    stats.startTime = performance.now() - stats.startTime
-            scheduler.setTimeout(lockDown, stats.lockDelay)
+    messageSpan.innerHTML = ""
-        scheduler.setInterval(clock, 1000)
+    scheduler.setInterval(lockPhase, stats.fallPeriod)
-        holdQueue.draw()
+    if (matrix.piece.locked)
-        matrix.draw()
+        scheduler.setTimeout(lockDown, stats.lockDelay)
-        nextQueue.draw()
+    scheduler.setInterval(clock, 1000)
-        if (tempTexts.length)
+    holdQueue.draw()
-            scheduler.setInterval(delTempTexts, DELAY.MESSAGE)
+    matrix.draw()
-    }
+    nextQueue.draw()
+    if (tempTexts.length)
+        scheduler.setInterval(delTempTexts, DELAY.MESSAGE)
 }
 
 function printTempTexts(text) {
     tempTexts.push(text)
-    messageDiv.innerHTML = tempTexts[0]
+    messageSpan.innerHTML = tempTexts[0]
     if (!scheduler.intervalTasks.has(delTempTexts))
         scheduler.setInterval(delTempTexts, DELAY.MESSAGE)
 }
@@ -778,10 +782,10 @@ function delTempTexts(self) {
     if (tempTexts.length) 
         tempTexts.shift()
     if (tempTexts.length) 
-        messageDiv.innerHTML = tempTexts[0]
+        messageSpan.innerHTML = tempTexts[0]
     else {
         scheduler.clearInterval(delTempTexts)
-        messageDiv.innerHTML = ""
+        messageSpan.innerHTML = ""
     }
 }
 
@@ -808,7 +812,7 @@ function applySettings() {
     actions[STATE.PAUSED][getKeyName("pause")] = resume
     actions[STATE.GAME_OVER] = {}
 
-    autorepeatDelay = localStorage.getItem("autorepeatDelay") || DELAY.autorepeat
+    autorepeatDelay = localStorage.getItem("autorepeatDelay") || DELAY.AUTOREPEAT
     autorepeatPeriod = localStorage.getItem("autorepeatPeriod") || DELAY.AUTOREPEAT_PERIOD
 
     themeName = localStorage.getItem("themeName") || DEFAULT_THEME
@@ -825,76 +829,48 @@ function replaceSpace(key) {
     return (key == " ") ? "Space" : key
 }
 
-function showSettings() {
+function loadSettings() {
     if (state == STATE.PLAYING)
         pause()
 
-    document.getElementById("set-moveLeft-key" ).innerHTML = replaceSpace(getKeyName("moveLeft"))
+    moveLeftSetKeyButton.innerHTML = replaceSpace(getKeyName("moveLeft"))
-    document.getElementById("set-moveRight-key").innerHTML = replaceSpace(getKeyName("moveRight"))
+    moveRightSetKeyButton.innerHTML = replaceSpace(getKeyName("moveRight"))
-    document.getElementById("set-softDrop-key" ).innerHTML = replaceSpace(getKeyName("softDrop"))
+    softDropSetKeyButton.innerHTML = replaceSpace(getKeyName("softDrop"))
-    document.getElementById("set-hardDrop-key" ).innerHTML = replaceSpace(getKeyName("hardDrop"))
+    hardDropSetKeyButton.innerHTML = replaceSpace(getKeyName("hardDrop"))
-    document.getElementById("set-rotateCW-key" ).innerHTML = replaceSpace(getKeyName("rotateCW"))
+    rotateCWSetKeyButton.innerHTML = replaceSpace(getKeyName("rotateCW"))
-    document.getElementById("set-rotateCCW-key").innerHTML = replaceSpace(getKeyName("rotateCCW"))
+    rotateCCWSetKeyButton.innerHTML = replaceSpace(getKeyName("rotateCCW"))
-    document.getElementById("set-hold-key"     ).innerHTML = replaceSpace(getKeyName("hold"))
+    holdSetKeyButton.innerHTML = replaceSpace(getKeyName("hold"))
-    document.getElementById("set-pause-key"    ).innerHTML = replaceSpace(getKeyName("pause"))
+    pauseSetKeyButton.innerHTML = replaceSpace(getKeyName("pause"))
 
-    document.getElementById("autorepeatDelayRange").value = autorepeatDelay
+    autorepeatDelayRange.value = autorepeatDelay
-    document.getElementById("autorepeatDelayRangeLabel").innerText = `Délai initial : ${autorepeatDelay}ms`
+    autorepeatDelayRangeLabel.innerText = `Délai initial : ${autorepeatDelay}ms`
-    document.getElementById("autorepeatPeriodRange").value = autorepeatPeriod
+    autorepeatPeriodRange.value = autorepeatPeriod
-    document.getElementById("autorepeatPeriodRangeLabel").innerText = `Période : ${autorepeatPeriod}ms`
+    autorepeatPeriodRangeLabel.innerText = `Période : ${autorepeatPeriod}ms`
 
-    document.getElementById("themeSelect").value=themeName;
+    themeSelect.value=themeName;
     themePreview.drawPiece(themePreview.piece)
 
-    document.getElementById("showGhostCheckbox").checked = showGhost
+    showGhostCheckbox.checked = showGhost
 
-    document.getElementById("settings").style.display = "block"
+    /*startSection.style.display = "grid"
-    document.getElementById("game").style.display = "none"
+    gameSection.style.display = "grid"
-    document.getElementById("settingsButton").style.display = "none"
+    settingsSection.style.display = "block"
+    settingsButtonSection.style.display = "flex"
 
     switch(state) {
         case STATE.WAITING:
             document.getElementById("start").style.display = "block"
             document.getElementById("hideSettingsButton").style.display = "none"
-            document.getElementById("leaderboardLink").style.display = "flex"
         break
         case STATE.GAME_OVER:
             document.getElementById("start").style.display = "block"
             document.getElementById("hideSettingsButton").style.display = "flex"
-            document.getElementById("leaderboardLink").style.display = "flex"
         break
         case STATE.PAUSED:
             document.getElementById("start").style.display = "none"
             document.getElementById("hideSettingsButton").style.display = "flex"
             
-    }
+    }*/
-}
-
-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 = "block"
-            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 = "block"
-            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"
-            document.getElementById("start").style.display = "none"
-            document.getElementById("settingsButton").style.display = "flex"
-            document.getElementById("leaderboardLink").style.display = "none"
-        break
-    }
 }
 
 function waitKey(button, action) {
@@ -915,15 +891,13 @@ function changeKey(e) {
 }
 
 function autorepeatDelayChanged() {
-    autorepeatDelay = document.getElementById("autorepeatDelayRange").value
+    localStorage.setItem("autorepeatDelay", autorepeatDelayRange.value)
-    localStorage.setItem("autorepeatDelay", autorepeatDelay)
+    document.getElementById("autorepeatDelayRangeLabel").innerText = `Délai initial : ${autorepeatDelayRange.value}ms`
-    document.getElementById("autorepeatDelayRangeLabel").innerText = `Délai initial : ${autorepeatDelay}ms`
 }
 
 function autorepeatPeriodChanged() {
-    autorepeatPeriod = document.getElementById("autorepeatPeriodRange").value
+    localStorage.setItem("autorepeatPeriod", autorepeatPeriodRange.value)
-    localStorage.setItem("autorepeatPeriod", autorepeatPeriod)
+    document.getElementById("autorepeatPeriodRangeLabel").innerText = `Période : ${autorepeatPeriodRange.value}ms`
-    document.getElementById("autorepeatPeriodRangeLabel").innerText = `Période : ${autorepeatPeriod}ms`
 }
 
 function themeChanged() {
@@ -939,13 +913,13 @@ function loadTheme() {
     link.id   = "theme";
     link.rel  = 'stylesheet'
     link.type = 'text/css'
-    link.href = 'themes/' + themeName+ '.css'
+    link.href = 'themes/' + themeName+ '/style.css'
     link.media = 'all'
     document.head.appendChild(link);
 }
 
 function showGhostChanged() {
-    showGhost = (document.getElementById("showGhostCheckbox").checked == true)
+    showGhost = (showGhostCheckbox.checked == true)
     localStorage.setItem("showGhost", showGhost)
 }
 
@@ -962,14 +936,9 @@ selectedButton = null
 selectedAction = ""
 
 window.onload = function() {
-    applySettings()
+    location.hash = ""
     
-    document.getElementById("startLevelInput").value = localStorage.getItem("startLevel") || 1
+    startLevelInput.value = localStorage.getItem("startLevel") || 1
-
-    document.getElementById("startButton").disabled = false
-    document.getElementById("startButton").focus()
-    document.getElementById("settingsButton").disabled = false
-    messageDiv = document.getElementById("message")
 
     scheduler = new Scheduler()
     holdQueue = new HoldQueue()
@@ -978,6 +947,9 @@ window.onload = function() {
     nextQueue = new NextQueue()
     themePreview = new ThemePreview()
     
-    if (location.hash) newGame(Math.min(location.hash.slice(1), 15))
+    applySettings()
-    else showSettings()
+    loadSettings()
+    
+    startButton.disabled = false
+    startButton.focus()
 }