From fc95b7384b509898bdadf2e77ba455100118b480 Mon Sep 17 00:00:00 2001 From: Adrien MALINGREY Date: Sun, 3 Nov 2019 01:36:03 +0100 Subject: [PATCH] theme --- css/style.css | 71 ++++++------------------------------ css/themes/light-relief.css | 60 ++++++++++++++++++++++++++++++ css/themes/tetris-effect.css | 35 ++++++++++++++++++ index.php | 17 +++++++-- js/webtris.js | 34 +++++++++++++++++ 5 files changed, 154 insertions(+), 63 deletions(-) create mode 100644 css/themes/light-relief.css create mode 100644 css/themes/tetris-effect.css 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