theme
This commit is contained in:
parent
a9c364be55
commit
fc95b7384b
@ -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;
|
||||
|
||||
60
css/themes/light-relief.css
Normal file
60
css/themes/light-relief.css
Normal file
@ -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);
|
||||
}
|
||||
35
css/themes/tetris-effect.css
Normal file
35
css/themes/tetris-effect.css
Normal file
@ -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;
|
||||
}
|
||||
17
index.php
17
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>
|
||||
</fieldset> -->
|
||||
<div></div>
|
||||
<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>
|
||||
|
||||
@ -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()
|
||||
}
|
||||
Reference in New Issue
Block a user