new themes

css/style.css

@@ -51,7 +51,7 @@ fieldset {
     grid-template-columns: 25vmin 17vmin 25vmin 17vmin;
     grid-gap: 1vmin;
     margin: 2vmin auto;
-    width: 85vmin;
+    width: 80vmin;
     justify-items: right;
     align-items: baseline;
 }

css/themes/light-solid.css

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

css/themes/pure-relief.css

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

css/themes/pure-solid.css

@@ -9,40 +9,48 @@
 }
 
 .mino {
-    border: 1px solid white;
-    border-radius: 0vmin;
+    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 {

js/settings.js

@@ -1,39 +0,0 @@
-const actionsDefaultKeys = {
-    moveLeft: "ArrowLeft",
-    moveRight: "ArrowRight",
-    softDrop: "ArrowDown",
-    hardDrop: " ",
-    rotateCW: "ArrowUp",
-    rotateCCW: "z",
-    hold: "c",
-    pause: "Escape",
-}
-var selectedButton = null
-var selectedAction = ""
-
-function getKey(action) {
-    key = localStorage.getItem(action) || actionsDefaultKeys[action]
-    if (key == ' ') key = "Space"
-    document.open()
-    document.write(key)
-    document.close()
-}
-
-function changeKey(button, action) {
-    button.innerHTML = "Touche ?"
-    selectedButton = button
-    selectedAction = action
-    button.blur()
-}
-
-function keyUpHandler(e) {
-    if (selectedButton) {
-        localStorage.setItem(selectedAction, e.key)
-        selectedButton.innerHTML = (e.key == " ") ? "Space" : e.key
-        selectedButton = null
-    }
-}
-
-window.onload = function() {
-    addEventListener("keyup", keyUpHandler, false)
-}

js/webtris.js

@@ -852,13 +852,19 @@ function hideSettings() {
     applySettings()
     switch(state) {
         case STATE.WAITING:
-        case STATE.GAME_OVER:
             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("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("leaderboardLink").style.display = "flex"
+        break
         case STATE.PAUSED:
             document.getElementById("game").style.display = "grid"
             document.getElementById("settings").style.display = "none"