adrien/Webtris
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

show ghost setting

Browse Source
This commit is contained in:
Adrien MALINGREY 2019-11-03 00:23:26 +01:00
parent ae39fda660
commit a9c364be55
3 changed files with 158 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
css/style.css
View File

@ -41,18 +41,18 @@ div {
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
align-content: center; align-content: center;
margin: 2vmin; margin: 4vmin;
text-align: center; text-align: center;
column-gap: 1vmin; column-gap: 1vmin;
} }
div * { div * {
margin: auto 1vmin; margin: auto 2vmin;
} }
fieldset { fieldset {
display: grid; display: grid;
grid-template-columns: 24vmin 18vmin 24vmin 18vmin; grid-template-columns: 25vmin 17vmin 25vmin 17vmin;
grid-gap: 1vmin; grid-gap: 1vmin;
margin: 2vmin auto; margin: 2vmin auto;
width: 85vmin; width: 85vmin;
@ -243,8 +243,17 @@ th, td {
display: none; display: none;
} }
#settings > label { #settings > * {
margin: auto auto auto 0; margin: 2vmin auto;
}
#settings > div {
justify-content: left;
width: 85vmin;
}
#settings > div > * {
margin: 0;
} }
#keyboard button { #keyboard button {

180
index.php
View File

@ -1,93 +1,99 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Webtris</title> <title>Webtris</title>
<link rel="icon" type="image/png" href="favicon.png"> <link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" type="text/css" href="css/style.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/webtris.js"></script> <script type="text/javascript" src="js/webtris.js"></script>
</head> </head>
<body> <body>
<h1>WEBTRIS</h1> <header>
<div id="game"> <h1>WEBTRIS</h1>
<?php </header>
function echoTable($id, $invisibleRows, $visibleRows, $columns) { <div id="game">
echo " <table id='$id' class=minoes-table>\n"; <?php
for ($y = 0; $y < $invisibleRows; $y++) { function echoTable($id, $invisibleRows, $visibleRows, $columns) {
echo " <tr class=invisible-grid>"; echo " <table id='$id' class=minoes-table>\n";
for ($x = 0; $x < $columns; $x++) { for ($y = 0; $y < $invisibleRows; $y++) {
echo "<td class=empty-cell></td>"; echo " <tr class=invisible-grid>";
for ($x = 0; $x < $columns; $x++) {
echo "<td class=empty-cell></td>";
}
echo "</tr>\n";
} }
echo "</tr>\n"; for ($y = 0; $y < $visibleRows; $y++) {
} echo " <tr class=visible-grid>";
for ($y = 0; $y < $visibleRows; $y++) { for ($x = 0; $x < $columns; $x++) {
echo " <tr class=visible-grid>"; echo "<td class=empty-cell></td>";
for ($x = 0; $x < $columns; $x++) { }
echo "<td class=empty-cell></td>"; echo "</tr>\n";
} }
echo "</tr>\n"; echo " </table>\n";
} }
echo " </table>\n"; echoTable("hold", 6, 0, 6);
} echoTable("matrix", 4, 20, 10);
echoTable("hold", 6, 0, 6); echoTable("next", 24, 0, 6);
echoTable("matrix", 4, 20, 10); ?>
echoTable("next", 24, 0, 6); <table id="stats">
?> <tr><th class="name" colspan=2>SCORE</th></tr>
<table id="stats"> <tr><td class="value" id="score" colspan=2>0</td></tr>
<tr><th class="name" colspan=2>SCORE</th></tr> <tr><th class="name" colspan=2>RECORD</th></tr>
<tr><td class="value" id="score" colspan=2>0</td></tr> <tr><td class="value" id="highScore" colspan=2>0</td></tr>
<tr><th class="name" colspan=2>RECORD</th></tr> <tr><th class="name" colspan=2>TEMPS</th></tr>
<tr><td class="value" id="highScore" colspan=2>0</td></tr> <tr><td class="value" id="time" colspan=2>00:00</td></tr>
<tr><th class="name" colspan=2>TEMPS</th></tr> <tr><td colspan=2><br/></td class="name"></tr>
<tr><td class="value" id="time" colspan=2>00:00</td></tr> <tr><th class="name">NIVEAU</th><td class="value" id="level">0</td></tr>
<tr><td colspan=2><br/></td class="name"></tr> <tr><th class="name">OBJECTIF</th><td class="value" id="goal">0</td></tr>
<tr><th class="name">NIVEAU</th><td class="value" id="level">0</td></tr> <tr><th class="name">LIGNES</th><td class="value" id="clearedLines">0</td></tr>
<tr><th class="name">OBJECTIF</th><td class="value" id="goal">0</td></tr> </table>
<tr><th class="name">LIGNES</th><td class="value" id="clearedLines">0</td></tr> <div id="message"></div>
</table> </div>
<div id="message"></div> <div id="settings">
</div> <fieldset id="keyboard">
<div id="settings"> <legend>Clavier</legend>
<fieldset id="keyboard"> <?php
<legend>Clavier</legend> function addButton($action, $label) {
<?php echo " <label for='set-$action-key'>$label</label>\n";
function addButton($action, $label) { echo " <button id='set-$action-key' type='button' onclick=\"waitKey(this, '$action')\"></button>";
echo " <label for='set-$action-key'>$label</label>\n"; }
echo " <button id='set-$action-key' type='button' onclick=\"waitKey(this, '$action')\"></button>"; addButton("moveLeft", "Gauche");
} addButton("moveRight", "Droite");
addButton("moveLeft", "Gauche"); addButton("softDrop", "Chute lente");
addButton("moveRight", "Droite"); addButton("hardDrop", "Chute rapide");
addButton("softDrop", "Chute lente"); addButton("rotateCW", "Rotation horaire");
addButton("hardDrop", "Chute rapide"); addButton("rotateCCW", "Rotation anti-horaire");
addButton("rotateCW", "Rotation horaire"); addButton("hold", "Garde");
addButton("rotateCCW", "Rotation anti-horaire"); addButton("pause", "Pause/Reprise");
addButton("hold", "Garde"); ?>
addButton("pause", "Pause/Reprise"); </fieldset>
?> <fieldset>
</fieldset> <legend>Répétition automatique</legend>
<fieldset> <label id="autorepeatDelayRangeLabel" for="autorepeatDelayRange"></label>
<legend>Répétition automatique</legend> <input id="autorepeatDelayRange" type="range" oninput="autorepeatDelayChanged()" min="100" max="1000" step="50" />
<label id="autorepeatDelayRangeLabel" for="autorepeatDelayRange"></label> <label id="autorepeatPeriodRangeLabel" for="autorepeatPeriodRange"></label>
<input id="autorepeatDelayRange" type="range" oninput="autorepeatDelayChanged()" min="100" max="1000" step="50"> <input id="autorepeatPeriodRange" type="range" id="autorepeatPeriodRange" oninput="autorepeatPeriodChanged()" min="2" max="50" step="2" />
<label id="autorepeatPeriodRangeLabel" for="autorepeatPeriodRange"></label> </fieldset>
<input id="autorepeatPeriodRange" type="range" id="autorepeatPeriodRange" oninput="autorepeatPeriodChanged()" min="2" max="50" step="2"> <!-- <fieldset>
</fieldset> <legend>Thème</legend>
<!-- <fieldset> <div>À venir</div>
<legend>Thème</legend> </fieldset> -->
<div>À venir</div> <div>
</fieldset> --> <input id="showGhostCheckbox" type="checkbox" checked onchange="showGhostChanged()"/>
<button type="button" onclick="hideSettings()">RETOUR</button> <label for="showGhostCheckbox">Afficher le fantôme</label>
</div> </div>
<div id="start"> <button type="button" onclick="hideSettings()">RETOUR</button>
<label for="startLevel">Niveau</label> </div>
<input type="number" id="startLevel" min="1" max="15" step="1"> <div id="start">
<button id="startButton" type="button" onclick="start()" disabled>JOUER</button> <label for="startLevel">Niveau</label>
</div> <input type="number" id="startLevel" min="1" max="15" step="1">
<div> <button id="startButton" type="button" onclick="start()" disabled>JOUER</button>
<button id="settingsButton" type="button" onclick="showSettings()" disabled>OPTIONS</button> </div>
</div> <div>
<div id="leaderboardLink"> <button id="settingsButton" type="button" onclick="showSettings()" disabled>OPTIONS</button>
<a href="leaderboard.php" target="_blank">TABLEAU DE SCORE</a> </div>
</div> <div id="leaderboardLink">
</body> <a href="leaderboard.php" target="_blank">TABLEAU DE SCORE</a>
</div>
</body>
</html> </html>

89
js/webtris.js
View File

@ -284,7 +284,7 @@ class Matrix extends MinoesTable {
} }
//ghost //ghost
if (!this.piece.locked && state != STATE.GAME_OVER) { if (showGhost && !this.piece.locked && state != STATE.GAME_OVER) {
for (var ghost = this.piece.ghost; this.spaceToMove(ghost.minoesAbsPos); ghost.pos.y++) {} for (var ghost = this.piece.ghost; this.spaceToMove(ghost.minoesAbsPos); ghost.pos.y++) {}
ghost.pos.y-- ghost.pos.y--
this.drawPiece(ghost) this.drawPiece(ghost)
@ -419,24 +419,6 @@ function start() {
newLevel(startLevel) newLevel(startLevel)
} }
function applySettings() {
actions[STATE.PLAYING] = {}
actions[STATE.PLAYING][getKeyName("moveLeft")] = moveLeft
actions[STATE.PLAYING][getKeyName("moveRight")] = moveRight
actions[STATE.PLAYING][getKeyName("softDrop")] = softDrop
actions[STATE.PLAYING][getKeyName("hardDrop")] = hardDrop
actions[STATE.PLAYING][getKeyName("rotateCW")] = rotateCW
actions[STATE.PLAYING][getKeyName("rotateCCW")] = rotateCCW
actions[STATE.PLAYING][getKeyName("hold")] = hold
actions[STATE.PLAYING][getKeyName("pause")] = pause
actions[STATE.PAUSED] = {}
actions[STATE.PAUSED][getKeyName("pause")] = resume
actions[STATE.GAME_OVER] = {}
autorepeatDelay = localStorage.getItem("autorepeatDelay") || AUTOREPEAT_DELAY
autorepeatPeriod = localStorage.getItem("autorepeatPeriod") || AUTOREPEAT_PERIOD
}
function newLevel(startLevel) { function newLevel(startLevel) {
stats.newLevel(startLevel) stats.newLevel(startLevel)
generationPhase() generationPhase()
@ -773,30 +755,56 @@ function getKeyName(action) {
return localStorage.getItem(action) || actionsDefaultKeys[action] return localStorage.getItem(action) || actionsDefaultKeys[action]
} }
function getKeyNameOrSpace(action) { // Settings functions
key = getKeyName(action) function applySettings() {
actions[STATE.PLAYING] = {}
actions[STATE.PLAYING][getKeyName("moveLeft")] = moveLeft
actions[STATE.PLAYING][getKeyName("moveRight")] = moveRight
actions[STATE.PLAYING][getKeyName("softDrop")] = softDrop
actions[STATE.PLAYING][getKeyName("hardDrop")] = hardDrop
actions[STATE.PLAYING][getKeyName("rotateCW")] = rotateCW
actions[STATE.PLAYING][getKeyName("rotateCCW")] = rotateCCW
actions[STATE.PLAYING][getKeyName("hold")] = hold
actions[STATE.PLAYING][getKeyName("pause")] = pause
actions[STATE.PAUSED] = {}
actions[STATE.PAUSED][getKeyName("pause")] = resume
actions[STATE.GAME_OVER] = {}
autorepeatDelay = localStorage.getItem("autorepeatDelay") || AUTOREPEAT_DELAY
autorepeatPeriod = localStorage.getItem("autorepeatPeriod") || AUTOREPEAT_PERIOD
showGhost = localStorage.getItem("showGhost")
if (showGhost)
showGhost = (showGhost == "true")
else
showGhost = true
}
function replaceSpace(key) {
return (key == " ") ? "Space" : key return (key == " ") ? "Space" : key
} }
// Settings functions
function showSettings() { function showSettings() {
document.getElementById("set-moveLeft-key").innerHTML = getKeyNameOrSpace("moveLeft")
document.getElementById("set-moveRight-key").innerHTML = getKeyNameOrSpace("moveRight")
document.getElementById("set-softDrop-key").innerHTML = getKeyNameOrSpace("softDrop")
document.getElementById("set-hardDrop-key").innerHTML = getKeyNameOrSpace("hardDrop")
document.getElementById("set-rotateCW-key").innerHTML = getKeyNameOrSpace("rotateCW")
document.getElementById("set-rotateCCW-key").innerHTML = getKeyNameOrSpace("rotateCCW")
document.getElementById("set-hold-key").innerHTML = getKeyNameOrSpace("hold")
document.getElementById("set-pause-key").innerHTML = getKeyNameOrSpace("pause")
document.getElementById("autorepeatDelayRange").value = localStorage.getItem("autorepeatDelay") || AUTOREPEAT_DELAY
document.getElementById("autorepeatDelayRangeLabel").innerText = `Délai : ${autorepeatDelay}ms`
document.getElementById("autorepeatPeriodRange").value = localStorage.getItem("autorepeatPeriod") || AUTOREPEAT_PERIOD
document.getElementById("autorepeatPeriodRangeLabel").innerText = `Période : ${autorepeatPeriod}ms`
if (state == STATE.PLAYING) if (state == STATE.PLAYING)
pause() pause()
document.getElementById("settings").style.display = "flex"
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"))
document.getElementById("autorepeatDelayRange").value = autorepeatDelay
document.getElementById("autorepeatDelayRangeLabel").innerText = `Délai : ${autorepeatDelay}ms`
document.getElementById("autorepeatPeriodRange").value = autorepeatPeriod
document.getElementById("autorepeatPeriodRangeLabel").innerText = `Période : ${autorepeatPeriod}ms`
document.getElementById("showGhostCheckbox").checked = showGhost
document.getElementById("settings").style.display = "block"
document.getElementById("game").style.display = "none" document.getElementById("game").style.display = "none"
document.getElementById("start").style.display = "none" document.getElementById("start").style.display = "none"
document.getElementById("leaderboardLink").style.display = "none" document.getElementById("leaderboardLink").style.display = "none"
@ -854,7 +862,12 @@ function autorepeatPeriodChanged() {
document.getElementById("autorepeatPeriodRangeLabel").innerText = `Période : ${autorepeatPeriod}ms` document.getElementById("autorepeatPeriodRangeLabel").innerText = `Période : ${autorepeatPeriod}ms`
} }
//global variables function showGhostChanged() {
showGhost = (document.getElementById("showGhostCheckbox").checked == true)
localStorage.setItem("showGhost", showGhost)
}
// global variables
timeFormat = new Intl.DateTimeFormat("fr-FR", { timeFormat = new Intl.DateTimeFormat("fr-FR", {
minute: "2-digit", minute: "2-digit",
second: "2-digit", second: "2-digit",