diff --git a/index.php b/index.php index 555bbab..be1890d 100644 --- a/index.php +++ b/index.php @@ -1,80 +1,97 @@ + ["label"=>"Gauche", "defaultKey"=>"ArrowLeft"], + "moveRight" => ["label"=>"Droite", "defaultKey"=>"ArrowRight"], + "softDrop" => ["label"=>"Chute lente", "defaultKey"=>"ArrowDown"], + "hardDrop" => ["label"=>"Chute rapide", "defaultKey"=>"Space"], + "rotateCW" => ["label"=>"Rotation horaire", "defaultKey"=>"ArrowUp"], + "rotateCCW" => ["label"=>"Rotation anti-horaire", "defaultKey"=>"z"], + "hold" => ["label"=>"Garde", "defaultKey"=>"c"], + "pause" => ["label"=>"Pause/Reprise", "defaultKey"=>"Escape"] + ]; + + function echoTable($id, $invisibleRows, $visibleRows, $columns) { + echo " \n"; + for ($y = 0; $y < $invisibleRows; $y++) { + echo " "; + for ($x = 0; $x < $columns; $x++) { + echo "\n"; + } + for ($y = 0; $y < $visibleRows; $y++) { + echo " "; + for ($x = 0; $x < $columns; $x++) { + echo ""; + } + echo "\n"; + } + echo "
"; + } + echo "
\n"; + } +?> Webtris - + -
-

WEBTRIS

-
-
- \n"; - for ($y = 0; $y < $invisibleRows; $y++) { - echo " "; - for ($x = 0; $x < $columns; $x++) { - echo ""; - } - echo "\n"; - } - for ($y = 0; $y < $visibleRows; $y++) { - echo " "; - for ($x = 0; $x < $columns; $x++) { - echo ""; - } - echo "\n"; - } - echo " \n"; - } - echoTable("hold", 6, 0, 6); - echoTable("matrix", 4, 20, 10); - echoTable("next", 24, 0, 6); - ?> - - - - - - - - - - - -
SCORE
0
RECORD
0
TEMPS
00:00

NIVEAU0
OBJECTIF0
LIGNES0
-
+ -
-
+
+
+ Nouvelle partie +
+
+ + + +
+
+
+
+
Clavier -
- $label\n"; - echo " "; - } - addButton("moveLeft", "Gauche"); - addButton("moveRight", "Droite"); - addButton("softDrop", "Chute lente"); - addButton("hardDrop", "Chute rapide"); - addButton("rotateCW", "Rotation horaire"); - addButton("rotateCCW", "Rotation anti-horaire"); - addButton("hold", "Garde"); - addButton("pause", "Pause/Reprise"); - ?> +
+$parameters) { +?> + + +
Répétition automatique
- - - + + +
@@ -84,39 +101,26 @@
-
+
-
-
-
- Nouvelle partie -
- - -
- -
-
-
-
- -
- diff --git a/themes/arcade.css b/themes/arcade.css deleted file mode 100644 index b889114..0000000 --- a/themes/arcade.css +++ /dev/null @@ -1,76 +0,0 @@ -.empty-cell { - background: transparent; -} - -.invisible-grid > .empty-cell { - border: 1px solid transparent; -} - -.visible-grid > .empty-cell { - border: 1px solid rgba(255, 255, 255, .4); -} - -.mino { - border: 1px solid; - border-radius: 1px; -} - -.I-mino { - /* cyan */ - background: #99d9ea; - border-color: #d1edf5; -} - -.J-mino { - /* blue */ - background: #7f92ff; - border-color: #c2cbff; -} - -.L-mino { - /* orange */ - background: #ffb27f; - border-color: #ffe1cd; -} - -.O-mino { - /* yellow */ - background: #ffe97f; - border-color: #fff5ca; -} - -.S-mino { - /* green */ - background: #7fff8e; - border-color: #ccffd2; -} - -.T-mino { - /* magenta */ - background: #d67fff; - border-color: #edc9ff; -} - -.Z-mino { - /* red */ - background: #ff7f7f; - border-color: #ffdada; -} - -.locked-mino, .cleared-line { - background: white; - border: 1px solid white; - border-radius: 1px; -} - -.trail { - background: rgba(255, 255, 255, 0.2); - border: 1px solid white; - border-radius: 1px; -} - -.ghost { - background: rgba(255, 255, 255, 0.4); - border: 1px solid rgba(255, 255, 255, 0.6); - border-radius: 1px; -} diff --git a/themes/default/style.css b/themes/default/style.css new file mode 100644 index 0000000..c4f557a --- /dev/null +++ b/themes/default/style.css @@ -0,0 +1,181 @@ +body { + font-family: sans-serif; + color: white; + background: #222; +} + +section { + margin: 1em; +} + +div { + display: flex; + justify-content: center; + align-items: center; +} + +fieldset > div { + display: grid; + grid-template-columns: 3fr 2fr 3fr 2fr; + grid-column-gap: 2em; + grid-row-gap: 1em; + justify-items: right; + align-items: center; +} + +fieldset button, input { + width: 100%; +} + +label { + text-align: center; +} + +a { + text-decoration: none; + color: lightblue; +} + +#gameSection { + width: 72vmin; + grid-template-columns: 18vmin 30vmin 18vmin; + grid-gap: 3vmin; + margin: auto; +} + +#gameSection div { + display: grid; +} + +#holdTable { + grid-column: 1; + grid-row: 1; + justify-self: end; +} + +#statsTable { + grid-column: 1; + grid-row: 3; + height: 0; + justify-self: end; + margin: 0 auto; +} + +#scoreTable { + font-weight: bold; +} + +#matrixTable { + grid-column: 2; + grid-row: 1 / 4; +} + +#messageSpan { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: rgba(255, 255, 255, 0.8); + font-size: 4vmin; + text-shadow: 1px 1px rgba(0, 0, 0, 0.8); + text-align: center; + font-weight: bold; +} + +#nextTable { + grid-column: 3; + grid-row: 1 / 4; +} + + +.minoes-table { + table-layout: fixed; + border-spacing: 0; + margin: auto; +} + +.minoes-table tr { + height: 3vmin; +} + +.minoes-table th, td { + font-weight: normal; + padding: 0; + height: 3vmin; + width: 3vmin; + border: 1px solid transparent; +} + +.minoes-table th { + border: 1px solid transparent; +} + +.minoes-table td { + border: 1px solid #888; +} + +.minoes-table .mino { + border: 1px solid; + border-radius: 1px; +} + +.minoes-table .I { + /* cyan */ + background: #99d9ea; + border-color: #d1edf5; +} + +.minoes-table .J { + /* blue */ + background: #7f92ff; + border-color: #c2cbff; +} + +.minoes-table .L { + /* orange */ + background: #ffb27f; + border-color: #ffe1cd; +} + +.minoes-table .O { + /* yellow */ + background: #ffe97f; + border-color: #fff5ca; +} + +.minoes-table .S { + /* green */ + background: #7fff8e; + border-color: #ccffd2; +} + +.minoes-table .T { + /* magenta */ + background: #d67fff; + border-color: #edc9ff; +} + +.minoes-table .Z { + /* red */ + background: #ff7f7f; + border-color: #ffdada; +} + +.locked, .cleared-line { + background: white; + border: 1px solid white; + border-radius: 1px; +} + +.trail { + background: rgba(255, 255, 255, 0.2); + border: 1px solid white; + border-radius: 1px; +} + +.ghost { + background: rgba(255, 255, 255, 0.4); + border: 1px solid rgba(255, 255, 255, 0.6); + border-radius: 1px; +} + diff --git a/fonts/ShareTech.woff2 b/themes/effect/fonts/ShareTech.woff2 similarity index 100% rename from fonts/ShareTech.woff2 rename to themes/effect/fonts/ShareTech.woff2 diff --git a/fonts/ShareTechMono.woff2 b/themes/effect/fonts/ShareTechMono.woff2 similarity index 100% rename from fonts/ShareTechMono.woff2 rename to themes/effect/fonts/ShareTechMono.woff2 diff --git a/images/bg.jpg b/themes/effect/images/bg.jpg similarity index 100% rename from images/bg.jpg rename to themes/effect/images/bg.jpg diff --git a/style.css b/themes/effect/style.css similarity index 81% rename from style.css rename to themes/effect/style.css index f9855fe..32646de 100644 --- a/style.css +++ b/themes/effect/style.css @@ -1,3 +1,42 @@ +.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); + border-color: rgba(242, 255, 255, 0.7); +} + +.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; +} + + + @font-face { font-family: 'Share Tech'; font-style: normal; @@ -116,7 +155,7 @@ th, td { width: 72vmin; grid-template-columns: 18vmin 30vmin 18vmin; grid-gap: 3vmin; - margin: -8vmin auto 0 auto; + margin: auto; } #hold { @@ -207,3 +246,5 @@ caption { color: white; } + + diff --git a/themes/images/blue_block.png b/themes/kubowania/images/blue_block.png similarity index 100% rename from themes/images/blue_block.png rename to themes/kubowania/images/blue_block.png diff --git a/themes/images/green_block.png b/themes/kubowania/images/green_block.png similarity index 100% rename from themes/images/green_block.png rename to themes/kubowania/images/green_block.png diff --git a/themes/images/navy_block.png b/themes/kubowania/images/navy_block.png similarity index 100% rename from themes/images/navy_block.png rename to themes/kubowania/images/navy_block.png diff --git a/themes/images/peach_block.png b/themes/kubowania/images/peach_block.png similarity index 100% rename from themes/images/peach_block.png rename to themes/kubowania/images/peach_block.png diff --git a/themes/images/pink_block.png b/themes/kubowania/images/pink_block.png similarity index 100% rename from themes/images/pink_block.png rename to themes/kubowania/images/pink_block.png diff --git a/themes/images/purple_block.png b/themes/kubowania/images/purple_block.png similarity index 100% rename from themes/images/purple_block.png rename to themes/kubowania/images/purple_block.png diff --git a/themes/images/yellow_block.png b/themes/kubowania/images/yellow_block.png similarity index 100% rename from themes/images/yellow_block.png rename to themes/kubowania/images/yellow_block.png diff --git a/themes/images.css b/themes/kubowania/style.css similarity index 100% rename from themes/images.css rename to themes/kubowania/style.css diff --git a/themes/light-relief.css b/themes/light-relief.css deleted file mode 100644 index c386a22..0000000 --- a/themes/light-relief.css +++ /dev/null @@ -1,64 +0,0 @@ -.empty-cell { - background: transparent; -} - -.invisible-grid > .empty-cell { - border: 1px solid transparent; -} - -.visible-grid > .empty-cell { - 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(255, 102, 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; -} diff --git a/themes/light-solid.css b/themes/light-solid.css deleted file mode 100644 index c51855b..0000000 --- a/themes/light-solid.css +++ /dev/null @@ -1,64 +0,0 @@ -.empty-cell { - background: transparent; -} - -.invisible-grid > .empty-cell { - border: 1px solid transparent; -} - -.visible-grid > .empty-cell { - 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(255, 102, 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: 0; -} - -.ghost { - background: rgba(255, 255, 255, 0.4); - border: 1px solid rgba(255, 255, 255, 0.4); - border-radius: 0; -} diff --git a/themes/tetris-effect.css b/themes/tetris-effect.css deleted file mode 100644 index 5c0b5d1..0000000 --- a/themes/tetris-effect.css +++ /dev/null @@ -1,36 +0,0 @@ -.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); - border-color: rgba(242, 255, 255, 0.7); -} - -.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/themes/vivid-relief.css b/themes/vivid-relief.css deleted file mode 100644 index a947d59..0000000 --- a/themes/vivid-relief.css +++ /dev/null @@ -1,70 +0,0 @@ -.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; -} diff --git a/themes/vivid-solid.css b/themes/vivid-solid.css deleted file mode 100644 index 287640e..0000000 --- a/themes/vivid-solid.css +++ /dev/null @@ -1,70 +0,0 @@ -.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; - 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 { - 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; -} diff --git a/webtris.js b/webtris.js index e1ee8c8..3685980 100644 --- a/webtris.js +++ b/webtris.js @@ -39,7 +39,7 @@ const CLASSNAME = { const DELAY = { LOCK: 500, FALL: 1000, - autorepeat: 300, + AUTOREPEAT: 300, AUTOREPEAT_PERIOD: 10, ANIMATION: 100, MESSAGE: 700 @@ -195,7 +195,7 @@ class Tetromino { this.minoesPos = [[-1, -1], [0, -1], [0, 0], [1, 0]] break } - this.className = CLASSNAME.MINO + " " + this.shape + "-" + CLASSNAME.MINO + this.className = CLASSNAME.MINO + " " + this.shape } get minoesAbsPos() { @@ -237,7 +237,7 @@ class MinoesTable { class HoldQueue extends MinoesTable { constructor() { - super("hold") + super("holdTable") } newGame() { @@ -254,7 +254,7 @@ class HoldQueue extends MinoesTable { class Matrix extends MinoesTable { constructor() { - super("matrix") + super("matrixTable") } newGame() { @@ -314,7 +314,7 @@ class Matrix extends MinoesTable { class NextQueue extends MinoesTable { constructor() { - super("next") + super("nextTable") } newGame() { @@ -332,7 +332,7 @@ class NextQueue extends MinoesTable { class ThemePreview extends MinoesTable { constructor() { - super("themePreview") + super("themePreviewTable") this.piece = new Tetromino(THEME.PIECE_POSITION, "T") } } @@ -378,7 +378,7 @@ class Stats { newLevel(level=null) { this.level = level || this.level + 1 - location.hash = "#" + this.level + location.hash = "#level" + this.level this.levelCell.innerText = this.level printTempTexts(`NIVEAU
${this.level}`) this.goal += 5 * this.level @@ -427,8 +427,8 @@ class Stats { // Functions -function newGame(startLevel=startLevelInput) { - document.getElementById("startButton").blur() +function newGame(startLevel) { + startButton.blur() holdQueue.newGame() matrix.newGame() @@ -437,11 +437,10 @@ function newGame(startLevel=startLevelInput) { localStorage.setItem("startLevel", startLevel) - document.getElementById("game").style.display = "grid" - document.getElementById("settings").style.display = "none" - document.getElementById("settingsButton").style.display = "flex" - document.getElementById("start").style.display = "none" - document.getElementById("leaderboardLink").style.display = "none" + startSection.style.display = "none" + gameSection.style.display = "block" + settingsSection.style.display = "none" + leaderboardLinkSection.style.display = "none" state = STATE.PLAYING pressedKeys = new Set() @@ -577,7 +576,7 @@ function clearLinesCleared() { function gameOver() { state = STATE.GAME_OVER - messageDiv.innerHTML = "GAME
OVER" + messageSpan.innerHTML = "GAME
OVER" scheduler.clearInterval(lockPhase) scheduler.clearTimeout(lockDown) scheduler.clearInterval(clock) @@ -627,12 +626,13 @@ function gameOver() { } request.open('POST', 'inleaderboard.php') request.send(fd) + + location.hash = "#game-over" - document.getElementById("game").style.display = "grid" - document.getElementById("settings").style.display = "none" - document.getElementById("start").style.display = "grid" - document.getElementById("settingsButton").style.display = "flex" - document.getElementById("leaderboardLink").style.display = "flex" + startSection.style.display = "block" + gameSection.style.display = "block" + settingsSection.style.display = "none" + leaderboardLinkSection.style.display = "block" } function autorepeat() { @@ -737,6 +737,7 @@ function hold() { function pause() { state = STATE.PAUSED + location.hash = "#pause" stats.startTime = performance.now() - stats.startTime actionsToRepeat = [] scheduler.clearInterval(lockPhase) @@ -747,29 +748,32 @@ function pause() { holdQueue.draw() matrix.draw() nextQueue.draw() - messageDiv.innerHTML = `PAUSE

Appuyez sur
${getKeyName('pause')}
pour reprendre` + gameSection.style.display = "none" + settingsSection.style.display = "block" } function resume() { - if (document.getElementById("game").style.display == "grid") { - state = STATE.PLAYING - stats.startTime = performance.now() - stats.startTime - messageDiv.innerHTML = "" - scheduler.setInterval(lockPhase, stats.fallPeriod) - if (matrix.piece.locked) - scheduler.setTimeout(lockDown, stats.lockDelay) - scheduler.setInterval(clock, 1000) - holdQueue.draw() - matrix.draw() - nextQueue.draw() - if (tempTexts.length) - scheduler.setInterval(delTempTexts, DELAY.MESSAGE) - } + applySettings() + settingsSection.style.display = "none" + gameSection.style.display = "block" + location.hash = "#level" + stats.level + state = STATE.PLAYING + stats.startTime = performance.now() - stats.startTime + messageSpan.innerHTML = "" + scheduler.setInterval(lockPhase, stats.fallPeriod) + if (matrix.piece.locked) + scheduler.setTimeout(lockDown, stats.lockDelay) + scheduler.setInterval(clock, 1000) + holdQueue.draw() + matrix.draw() + nextQueue.draw() + if (tempTexts.length) + scheduler.setInterval(delTempTexts, DELAY.MESSAGE) } function printTempTexts(text) { tempTexts.push(text) - messageDiv.innerHTML = tempTexts[0] + messageSpan.innerHTML = tempTexts[0] if (!scheduler.intervalTasks.has(delTempTexts)) scheduler.setInterval(delTempTexts, DELAY.MESSAGE) } @@ -778,10 +782,10 @@ function delTempTexts(self) { if (tempTexts.length) tempTexts.shift() if (tempTexts.length) - messageDiv.innerHTML = tempTexts[0] + messageSpan.innerHTML = tempTexts[0] else { scheduler.clearInterval(delTempTexts) - messageDiv.innerHTML = "" + messageSpan.innerHTML = "" } } @@ -808,7 +812,7 @@ function applySettings() { actions[STATE.PAUSED][getKeyName("pause")] = resume actions[STATE.GAME_OVER] = {} - autorepeatDelay = localStorage.getItem("autorepeatDelay") || DELAY.autorepeat + autorepeatDelay = localStorage.getItem("autorepeatDelay") || DELAY.AUTOREPEAT autorepeatPeriod = localStorage.getItem("autorepeatPeriod") || DELAY.AUTOREPEAT_PERIOD themeName = localStorage.getItem("themeName") || DEFAULT_THEME @@ -825,76 +829,48 @@ function replaceSpace(key) { return (key == " ") ? "Space" : key } -function showSettings() { +function loadSettings() { if (state == STATE.PLAYING) pause() - document.getElementById("set-moveLeft-key" ).innerHTML = replaceSpace(getKeyName("moveLeft")) - document.getElementById("set-moveRight-key").innerHTML = replaceSpace(getKeyName("moveRight")) - document.getElementById("set-softDrop-key" ).innerHTML = replaceSpace(getKeyName("softDrop")) - document.getElementById("set-hardDrop-key" ).innerHTML = replaceSpace(getKeyName("hardDrop")) - document.getElementById("set-rotateCW-key" ).innerHTML = replaceSpace(getKeyName("rotateCW")) - document.getElementById("set-rotateCCW-key").innerHTML = replaceSpace(getKeyName("rotateCCW")) - document.getElementById("set-hold-key" ).innerHTML = replaceSpace(getKeyName("hold")) - document.getElementById("set-pause-key" ).innerHTML = replaceSpace(getKeyName("pause")) + moveLeftSetKeyButton.innerHTML = replaceSpace(getKeyName("moveLeft")) + moveRightSetKeyButton.innerHTML = replaceSpace(getKeyName("moveRight")) + softDropSetKeyButton.innerHTML = replaceSpace(getKeyName("softDrop")) + hardDropSetKeyButton.innerHTML = replaceSpace(getKeyName("hardDrop")) + rotateCWSetKeyButton.innerHTML = replaceSpace(getKeyName("rotateCW")) + rotateCCWSetKeyButton.innerHTML = replaceSpace(getKeyName("rotateCCW")) + holdSetKeyButton.innerHTML = replaceSpace(getKeyName("hold")) + pauseSetKeyButton.innerHTML = replaceSpace(getKeyName("pause")) - document.getElementById("autorepeatDelayRange").value = autorepeatDelay - document.getElementById("autorepeatDelayRangeLabel").innerText = `Délai initial : ${autorepeatDelay}ms` - document.getElementById("autorepeatPeriodRange").value = autorepeatPeriod - document.getElementById("autorepeatPeriodRangeLabel").innerText = `Période : ${autorepeatPeriod}ms` + autorepeatDelayRange.value = autorepeatDelay + autorepeatDelayRangeLabel.innerText = `Délai initial : ${autorepeatDelay}ms` + autorepeatPeriodRange.value = autorepeatPeriod + autorepeatPeriodRangeLabel.innerText = `Période : ${autorepeatPeriod}ms` - document.getElementById("themeSelect").value=themeName; + themeSelect.value=themeName; themePreview.drawPiece(themePreview.piece) - document.getElementById("showGhostCheckbox").checked = showGhost + showGhostCheckbox.checked = showGhost - document.getElementById("settings").style.display = "block" - document.getElementById("game").style.display = "none" - document.getElementById("settingsButton").style.display = "none" + /*startSection.style.display = "grid" + gameSection.style.display = "grid" + settingsSection.style.display = "block" + settingsButtonSection.style.display = "flex" switch(state) { case STATE.WAITING: document.getElementById("start").style.display = "block" document.getElementById("hideSettingsButton").style.display = "none" - document.getElementById("leaderboardLink").style.display = "flex" break case STATE.GAME_OVER: document.getElementById("start").style.display = "block" document.getElementById("hideSettingsButton").style.display = "flex" - document.getElementById("leaderboardLink").style.display = "flex" break case STATE.PAUSED: document.getElementById("start").style.display = "none" document.getElementById("hideSettingsButton").style.display = "flex" - } -} - -function hideSettings() { - applySettings() - switch(state) { - case STATE.WAITING: - document.getElementById("game").style.display = "none" - document.getElementById("settings").style.display = "none" - document.getElementById("start").style.display = "block" - 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 = "block" - 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" - document.getElementById("start").style.display = "none" - document.getElementById("settingsButton").style.display = "flex" - document.getElementById("leaderboardLink").style.display = "none" - break - } + }*/ } function waitKey(button, action) { @@ -915,15 +891,13 @@ function changeKey(e) { } function autorepeatDelayChanged() { - autorepeatDelay = document.getElementById("autorepeatDelayRange").value - localStorage.setItem("autorepeatDelay", autorepeatDelay) - document.getElementById("autorepeatDelayRangeLabel").innerText = `Délai initial : ${autorepeatDelay}ms` + localStorage.setItem("autorepeatDelay", autorepeatDelayRange.value) + document.getElementById("autorepeatDelayRangeLabel").innerText = `Délai initial : ${autorepeatDelayRange.value}ms` } function autorepeatPeriodChanged() { - autorepeatPeriod = document.getElementById("autorepeatPeriodRange").value - localStorage.setItem("autorepeatPeriod", autorepeatPeriod) - document.getElementById("autorepeatPeriodRangeLabel").innerText = `Période : ${autorepeatPeriod}ms` + localStorage.setItem("autorepeatPeriod", autorepeatPeriodRange.value) + document.getElementById("autorepeatPeriodRangeLabel").innerText = `Période : ${autorepeatPeriodRange.value}ms` } function themeChanged() { @@ -939,13 +913,13 @@ function loadTheme() { link.id = "theme"; link.rel = 'stylesheet' link.type = 'text/css' - link.href = 'themes/' + themeName+ '.css' + link.href = 'themes/' + themeName+ '/style.css' link.media = 'all' document.head.appendChild(link); } function showGhostChanged() { - showGhost = (document.getElementById("showGhostCheckbox").checked == true) + showGhost = (showGhostCheckbox.checked == true) localStorage.setItem("showGhost", showGhost) } @@ -962,14 +936,9 @@ selectedButton = null selectedAction = "" window.onload = function() { - applySettings() - - document.getElementById("startLevelInput").value = localStorage.getItem("startLevel") || 1 - - document.getElementById("startButton").disabled = false - document.getElementById("startButton").focus() - document.getElementById("settingsButton").disabled = false - messageDiv = document.getElementById("message") + location.hash = "" + + startLevelInput.value = localStorage.getItem("startLevel") || 1 scheduler = new Scheduler() holdQueue = new HoldQueue() @@ -978,6 +947,9 @@ window.onload = function() { nextQueue = new NextQueue() themePreview = new ThemePreview() - if (location.hash) newGame(Math.min(location.hash.slice(1), 15)) - else showSettings() + applySettings() + loadSettings() + + startButton.disabled = false + startButton.focus() }