theme

css/style.css

@@ -78,6 +78,10 @@ button {
     margin: 0.5vmin;
 }
 
+select {
+    color:black;
+}
+
 a {
     text-decoration: none;
     font-size: 1em;
@@ -110,6 +114,8 @@ th, td {
     border-width: 1px;
     border-style: solid;
     border-color: transparent;
+    height: 2vmin;
+    width: 2vmin;
 }
 
 #hold {
@@ -134,66 +140,6 @@ th, td {
     height: 72vmin;
 }
 
-.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 white;
-}
-
-.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.4);
-}
-
-.ghost {
-    background: rgba(255, 255, 255, 0.4);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-}
-
 #stats {
     grid-column: 1;
     grid-row: 2;
@@ -260,6 +206,11 @@ th, td {
     width: 100%;
 }
 
+#themePreview {
+    width: 18vmin;
+    height: 18vmin;
+}
+
 #leaderboard {
     min-width: 25%;
     margin: auto;

css/themes/light-relief.css

@@ -0,0 +1,60 @@
+.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 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);
+}
+
+.ghost {
+    background: rgba(255, 255, 255, 0.4);
+    border: 1px solid rgba(255, 255, 255, 0.4);
+}

css/themes/tetris-effect.css

@@ -0,0 +1,35 @@
+.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);
+}
+
+.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;
+}

index.php

@@ -74,10 +74,21 @@
                 <label id="autorepeatPeriodRangeLabel" for="autorepeatPeriodRange"></label>
                 <input id="autorepeatPeriodRange" type="range" id="autorepeatPeriodRange" oninput="autorepeatPeriodChanged()" min="2" max="50" step="2" />
             </fieldset>
-    <!--        <fieldset>
+            <fieldset>
                 <legend>Thème</legend>
-                <div>À venir</div>
+                <div></div>
-            </fieldset> -->
+                <select id="themeSelect" onchange="themeChanged()">
+<?php
+    foreach(scandir("css/themes") as $theme) {
+        if (!in_array($theme,array(".","..")))
+            echo "                    <option>" . pathinfo($theme, PATHINFO_FILENAME) . "</option>\n";
+    }
+?>
+                </select>
+<?php
+    echoTable("themePreview",   6,  0,  6);
+?>
+            </fieldset>
             <div>
                 <input id="showGhostCheckbox" type="checkbox" checked onchange="showGhostChanged()"/>
                 <label for="showGhostCheckbox">Afficher le fantôme</label>

js/webtris.js

@@ -22,6 +22,8 @@ const MATRIX_INVISIBLE_ROWS = 4
 const MATRIX_COLUMNS = 10
 const NEXT_ROWS =      24
 const NEXT_COLUMNS =    6
+const THEME_ROWS =      6
+const THEME_COLUMNS =   6
 const EMPTY_CELL_CLASS = "empty-cell"
 const MINO_CLASS = "mino"
 const LOCKED_PIECE_CLASS = "locked-mino"
@@ -31,6 +33,7 @@ const CLEARED_LINE_CLASS = "mino cleared-line"
 const HELD_PIECE_POSITION =    [2, 3]
 const FALLING_PIECE_POSITION = [4, 3]
 const NEXT_PIECES_POSITIONS =  Array.from({length: NEXT_PIECES}, (v, k) => [2, k*4+3])
+const THEME_PIECE_POSITION =   [2, 3]
 const LOCK_DELAY =       500
 const FALL_PERIOD =     1000
 const AUTOREPEAT_DELAY = 300
@@ -83,6 +86,7 @@ const actionsDefaultKeys = {
     pause: "Escape",
 }
 const RETRIES = 3
+const DEFAULT_THEME = "light-relief"
 
 
 // Classes
@@ -311,6 +315,14 @@ class NextQueue extends MinoesTable {
 }
 
 
+class ThemePreview extends MinoesTable {
+    constructor() {
+        super("themePreview", THEME_ROWS, THEME_COLUMNS)
+        this.piece = new Tetromino(THEME_PIECE_POSITION, "T")
+    }
+}
+
+
 class Stats {
     constructor () {
         this.scoreCell = document.getElementById("score")
@@ -773,6 +785,9 @@ function applySettings() {
     autorepeatDelay = localStorage.getItem("autorepeatDelay") || AUTOREPEAT_DELAY
     autorepeatPeriod = localStorage.getItem("autorepeatPeriod") || AUTOREPEAT_PERIOD
 
+    theme = localStorage.getItem("theme") || DEFAULT_THEME
+    loadTheme()
+
     showGhost = localStorage.getItem("showGhost")
     if (showGhost)
         showGhost = (showGhost == "true")
@@ -802,6 +817,8 @@ function showSettings() {
     document.getElementById("autorepeatPeriodRange").value = autorepeatPeriod
     document.getElementById("autorepeatPeriodRangeLabel").innerText = `Période : ${autorepeatPeriod}ms`
 
+    themePreview.drawPiece(themePreview.piece)
+
     document.getElementById("showGhostCheckbox").checked = showGhost
 
     document.getElementById("settings").style.display = "block"
@@ -862,6 +879,22 @@ function autorepeatPeriodChanged() {
     document.getElementById("autorepeatPeriodRangeLabel").innerText = `Période : ${autorepeatPeriod}ms`
 }
 
+function themeChanged() {
+    theme = document.getElementById("themeSelect").value
+    localStorage.setItem("theme", theme)
+    loadTheme()
+}
+
+function loadTheme() {
+    var link  = document.createElement('link')
+    link.id   = "theme";
+    link.rel  = 'stylesheet'
+    link.type = 'text/css'
+    link.href = 'css/themes/' + theme+ '.css'
+    link.media = 'all'
+    document.getElementsByTagName('head')[0].appendChild(link);
+}
+
 function showGhostChanged() {
     showGhost = (document.getElementById("showGhostCheckbox").checked == true)
     localStorage.setItem("showGhost", showGhost)
@@ -893,4 +926,5 @@ window.onload = function() {
     stats = new Stats()
     matrix = new Matrix()
     nextQueue = new NextQueue()
+    themePreview = new ThemePreview()
 }