diff --git a/css/style.css b/css/style.css
index 8451e70..3a57b13 100644
--- a/css/style.css
+++ b/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;
diff --git a/css/themes/light-relief.css b/css/themes/light-relief.css
new file mode 100644
index 0000000..e8e8674
--- /dev/null
+++ b/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);
+}
diff --git a/css/themes/tetris-effect.css b/css/themes/tetris-effect.css
new file mode 100644
index 0000000..89293c4
--- /dev/null
+++ b/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;
+}
diff --git a/index.php b/index.php
index 1d4f405..feab519 100644
--- a/index.php
+++ b/index.php
@@ -74,10 +74,21 @@
-
+
+
+
+
diff --git a/js/webtris.js b/js/webtris.js
index 4681e88..e803e0c 100644
--- a/js/webtris.js
+++ b/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()
}
\ No newline at end of file