style

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,10 +48,11 @@
                 <tr><th class="name">LIGNES</th><td class="value" id="clearedLines">0</td></tr>
             </table>
             <div id="message"></div>
-        </div>
+        </section>
-        <div id="settings">
+        <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";
@@ -66,16 +67,20 @@
         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>
                     <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></div>
                     <select id="themeSelect" onchange="themeChanged()">
 <?php
@@ -92,23 +97,26 @@
                         <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>
+        </section>
-        <div id="start">
+        <section id="start">
             <fieldset>
                 <legend>Nouvelle partie</legend>
+                <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>
+        </section>
-        <div>
+        <section>
             <button id="settingsButton" type="button" onclick="showSettings()" disabled>OPTIONS</button>
-        </div>
+        </section>
-        <div id="leaderboardLink">
+        <footer id="leaderboardLink">
             <a href="leaderboard.php" target="_blank">TABLEAU DE SCORE</a>
-        </div>
+        </footer>
     </body>
 </html>

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;
 }
+

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;
+}