From 198ac07b84df41c97b9ac348e3eeff658a8bb969 Mon Sep 17 00:00:00 2001
From: Adrien MALINGREY <adrien@malingrey.fr>
Date: Mon, 12 Oct 2020 21:22:14 +0200
Subject: [PATCH] style

---
 index.php         | 64 ++++++++++++++++++++++-----------------
 style.css         | 33 ++++++++++++--------
 themes/arcade.css | 76 +++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 133 insertions(+), 40 deletions(-)
 create mode 100644 themes/arcade.css

diff --git a/index.php b/index.php
index ea3320b..1bb875f 100644
--- a/index.php
+++ b/index.php
@@ -11,7 +11,7 @@
         <header>
             <h1>WEBTRIS</h1>
         </header>
-        <div id="game">
+        <section id="game">
     <?php
         function echoTable($id, $invisibleRows, $visibleRows, $columns) {
             echo "            <table id='$id' class=minoes-table>\n";
@@ -48,14 +48,15 @@
                 <tr><th class="name">LIGNES</th><td class="value" id="clearedLines">0</td></tr>
             </table>
             <div id="message"></div>
-        </div>
-        <div id="settings">
+        </section>
+        <section id="settings">
             <fieldset id="keyboard">
                 <legend>Clavier</legend>
+                <div class="settings">
     <?php
         function addButton($action, $label) {
-            echo "                <label for='set-$action-key'>$label</label>\n";
-            echo "                <button id='set-$action-key' type='button' onclick=\"waitKey(this, '$action')\">...</button>";
+            echo "                    <label for='set-$action-key'>$label</label>\n";
+            echo "                    <button id='set-$action-key' type='button' onclick=\"waitKey(this, '$action')\">...</button>";
         }
         addButton("moveLeft", "Gauche");
         addButton("moveRight", "Droite");
@@ -66,49 +67,56 @@
         addButton("hold", "Garde");
         addButton("pause", "Pause/Reprise");
     ?>
+                </div>
             </fieldset>
             <fieldset>
                 <legend>Répétition automatique</legend>
-                <label id="autorepeatDelayRangeLabel" for="autorepeatDelayRange">Délai initial</label>
-                <input id="autorepeatDelayRange" type="range" oninput="autorepeatDelayChanged()" min="100" max="1000" step="10" />
-                <label id="autorepeatPeriodRangeLabel" for="autorepeatPeriodRange">Période</label>
-                <input id="autorepeatPeriodRange" type="range" id="autorepeatPeriodRange" oninput="autorepeatPeriodChanged()" min="2" max="50" step="2" />
+                <div>
+                    <label id="autorepeatDelayRangeLabel" for="autorepeatDelayRange">Délai initial</label>
+                    <input id="autorepeatDelayRange" type="range" oninput="autorepeatDelayChanged()" min="100" max="1000" step="10" />
+                    <label id="autorepeatPeriodRangeLabel" for="autorepeatPeriodRange">Période</label>
+                    <input id="autorepeatPeriodRange" type="range" id="autorepeatPeriodRange" oninput="autorepeatPeriodChanged()" min="2" max="50" step="2" />
+                </div>
             </fieldset>
             <fieldset>
                 <legend>Thème</legend>
-                <div></div>
-                <select id="themeSelect" onchange="themeChanged()">
+                <div>
+                    <div></div>
+                    <select id="themeSelect" onchange="themeChanged()">
 <?php
     foreach(scandir("themes") as $theme) {
         if (pathinfo ($theme, PATHINFO_EXTENSION) == "css")
-            echo "                    <option>" . pathinfo($theme, PATHINFO_FILENAME) . "</option>\n";
+            echo "                        <option>" . pathinfo($theme, PATHINFO_FILENAME) . "</option>\n";
     }
 ?>
-                </select>
+                    </select>
 <?php
     echoTable("themePreview",   2,  0,  3);
 ?>
-            <div id="showGhostDiv">
-                <input id="showGhostCheckbox" type="checkbox" checked onchange="showGhostChanged()"/>
-                <label for="showGhostCheckbox">Afficher le fantôme</label>
-            </div>
+                    <div id="showGhostDiv">
+                        <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>
-        </div>
-        <div id="start">
+        </section>
+        <section id="start">
             <fieldset>
                 <legend>Nouvelle partie</legend>
-                <label for="startLevel">Niveau</label>
-                <input type="number" id="startLevel" min="1" max="15" step="1">
-                <div></div>
-                <button id="startButton" type="button" onclick="newGame()" disabled>JOUER</button>
+                <div>
+                    <label for="startLevel">Niveau</label>
+                    <input type="number" id="startLevel" min="1" max="15" step="1">
+                    <div></div>
+                    <button id="startButton" type="button" onclick="newGame()" disabled>JOUER</button>
+                </div>
             </fieldset>
-        </div>
-        <div>
+        </section>
+        <section>
             <button id="settingsButton" type="button" onclick="showSettings()" disabled>OPTIONS</button>
-        </div>
-        <div id="leaderboardLink">
+        </section>
+        <footer id="leaderboardLink">
             <a href="leaderboard.php" target="_blank">TABLEAU DE SCORE</a>
-        </div>
+        </footer>
     </body>
 </html>
diff --git a/style.css b/style.css
index ce38fb2..f9855fe 100644
--- a/style.css
+++ b/style.css
@@ -37,30 +37,38 @@ h1 {
     color: white;
 }
 
-div {
+section, footer, div {
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 fieldset {
-    display: grid;
-    grid-template-columns: 3fr 2fr 3fr 2fr;
-    grid-gap: 1vmin;
-    margin: 1vmin;
     border: 1px white solid;
     border-radius: 4px;
     align-items: center;
+    margin: 1vmin auto;
+    width: 60%;
 }
 
-fieldset > legend, label {
+fieldset > div {
+    display: grid;
+    grid-template-columns: 3fr 2fr 3fr 2fr;
+    grid-gap: 1vmin;
+}
+
+fieldset legend, label {
     color: white;
 }
 
-fieldset > input, select, button {
+fieldset input, select, button {
     width: 100%;
 }
 
+input[type="checkbox"] {
+    width: auto;
+}
+
 button {
     width: auto;
 }
@@ -99,16 +107,16 @@ th, td {
     border-width: 1px;
     border-style: solid;
     border-color: transparent;
+    height: 3vmin;
     width: 3vmin;
 }
 
 #game {
-    position: relative;
     display: none;
     width: 72vmin;
     grid-template-columns: 18vmin 30vmin 18vmin;
     grid-gap: 3vmin;
-    margin: auto;
+    margin: -8vmin auto 0 auto;
 }
 
 #hold {
@@ -119,7 +127,7 @@ th, td {
 
 #stats {
     grid-column: 1;
-    grid-row: 2;
+    grid-row: 3;
     height: 0;
     justify-self: end;
     margin: 0 auto;
@@ -131,7 +139,7 @@ th, td {
 
 #matrix {
     grid-column: 2;
-    grid-row: 1 / 3;
+    grid-row: 1 / 4;
 }
 
 #message {
@@ -148,7 +156,7 @@ th, td {
 
 #next {
     grid-column: 3;
-    grid-row: 1 / 3;
+    grid-row: 1 / 4;
 }
 
 a {
@@ -198,3 +206,4 @@ caption {
     font-size: 2.5vmin;
     color: white;
 }
+
diff --git a/themes/arcade.css b/themes/arcade.css
new file mode 100644
index 0000000..b889114
--- /dev/null
+++ b/themes/arcade.css
@@ -0,0 +1,76 @@
+.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;
+}