new version
This commit is contained in:
parent
1d1b2b24d2
commit
078120e4d1
170
index.php
170
index.php
@ -1,80 +1,97 @@
|
|||||||
|
<?php
|
||||||
|
$actions = [
|
||||||
|
"moveLeft" => ["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 " <table id='$id' class=minoes-table>\n";
|
||||||
|
for ($y = 0; $y < $invisibleRows; $y++) {
|
||||||
|
echo " <tr>";
|
||||||
|
for ($x = 0; $x < $columns; $x++) {
|
||||||
|
echo "<th class=empty-cell></td>";
|
||||||
|
}
|
||||||
|
echo "</tr>\n";
|
||||||
|
}
|
||||||
|
for ($y = 0; $y < $visibleRows; $y++) {
|
||||||
|
echo " <tr>";
|
||||||
|
for ($x = 0; $x < $columns; $x++) {
|
||||||
|
echo "<td class=empty-cell></td>";
|
||||||
|
}
|
||||||
|
echo "</tr>\n";
|
||||||
|
}
|
||||||
|
echo " </table>\n";
|
||||||
|
}
|
||||||
|
?>
|
||||||
<!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="style.css" />
|
<link id="theme" rel="stylesheet" type="text/css" href="themes/default/style.css" />
|
||||||
<script type="text/javascript" src="webtris.js"></script>
|
<script type="text/javascript" src="webtris.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<section id="gameSection" style="display: none">
|
||||||
<h1>WEBTRIS</h1>
|
<div>
|
||||||
</header>
|
<?php
|
||||||
<section id="game">
|
echoTable("holdTable", 6, 0, 6);
|
||||||
<?php
|
echoTable("matrixTable", 4, 20, 10);
|
||||||
function echoTable($id, $invisibleRows, $visibleRows, $columns) {
|
echoTable("nextTable", 24, 0, 6);
|
||||||
echo " <table id='$id' class=minoes-table>\n";
|
?>
|
||||||
for ($y = 0; $y < $invisibleRows; $y++) {
|
<table id="statsTable">
|
||||||
echo " <tr class=invisible-grid>";
|
<tr><th class="name" colspan=2>SCORE</th></tr>
|
||||||
for ($x = 0; $x < $columns; $x++) {
|
<tr><td class="value" id="score" colspan=2>0</td></tr>
|
||||||
echo "<th class=empty-cell></td>";
|
<tr><th class="name" colspan=2>RECORD</th></tr>
|
||||||
}
|
<tr><td class="value" id="highScore" colspan=2>0</td></tr>
|
||||||
echo "</tr>\n";
|
<tr><th class="name" colspan=2>TEMPS</th></tr>
|
||||||
}
|
<tr><td class="value" id="time" colspan=2>00:00</td></tr>
|
||||||
for ($y = 0; $y < $visibleRows; $y++) {
|
<tr><td colspan=2><br/></td class="name"></tr>
|
||||||
echo " <tr class=visible-grid>";
|
<tr><th class="name">NIVEAU</th><td class="value" id="level">0</td></tr>
|
||||||
for ($x = 0; $x < $columns; $x++) {
|
<tr><th class="name">OBJECTIF</th><td class="value" id="goal">0</td></tr>
|
||||||
echo "<td class=empty-cell></td>";
|
<tr><th class="name">LIGNES</th><td class="value" id="clearedLines">0</td></tr>
|
||||||
}
|
</table>
|
||||||
echo "</tr>\n";
|
<span id="messageSpan"></span>
|
||||||
}
|
</div>
|
||||||
echo " </table>\n";
|
|
||||||
}
|
|
||||||
echoTable("hold", 6, 0, 6);
|
|
||||||
echoTable("matrix", 4, 20, 10);
|
|
||||||
echoTable("next", 24, 0, 6);
|
|
||||||
?>
|
|
||||||
<table id="stats">
|
|
||||||
<tr><th class="name" colspan=2>SCORE</th></tr>
|
|
||||||
<tr><td class="value" id="score" colspan=2>0</td></tr>
|
|
||||||
<tr><th class="name" colspan=2>RECORD</th></tr>
|
|
||||||
<tr><td class="value" id="highScore" colspan=2>0</td></tr>
|
|
||||||
<tr><th class="name" colspan=2>TEMPS</th></tr>
|
|
||||||
<tr><td class="value" id="time" colspan=2>00:00</td></tr>
|
|
||||||
<tr><td colspan=2><br/></td class="name"></tr>
|
|
||||||
<tr><th class="name">NIVEAU</th><td class="value" id="level">0</td></tr>
|
|
||||||
<tr><th class="name">OBJECTIF</th><td class="value" id="goal">0</td></tr>
|
|
||||||
<tr><th class="name">LIGNES</th><td class="value" id="clearedLines">0</td></tr>
|
|
||||||
</table>
|
|
||||||
<div id="message"></div>
|
|
||||||
</section>
|
</section>
|
||||||
<section id="settings">
|
<section id="startSection">
|
||||||
<fieldset id="keyboard">
|
<fieldset>
|
||||||
|
<legend>Nouvelle partie</legend>
|
||||||
|
<div>
|
||||||
|
<div></div>
|
||||||
|
<button id="startButton" type="button" onclick="newGame(Number(startLevelInput.value))" disabled>JOUER</button>
|
||||||
|
<label for="startLevel">Niveau</label>
|
||||||
|
<input type="number" id="startLevelInput" min="1" max="15" step="1">
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
</section>
|
||||||
|
<section id="settingsSection">
|
||||||
|
<fieldset>
|
||||||
<legend>Clavier</legend>
|
<legend>Clavier</legend>
|
||||||
<div class="settings">
|
<div>
|
||||||
<?php
|
<?php
|
||||||
function addButton($action, $label) {
|
foreach($actions as $action=>$parameters) {
|
||||||
echo " <label for='set-$action-key'>$label</label>\n";
|
?>
|
||||||
echo " <button id='set-$action-key' type='button' onclick=\"waitKey(this, '$action')\">...</button>";
|
<label for='<?=$action?>SetKeyButton'><?=$parameters["label"]?></label>
|
||||||
}
|
<button id='<?=$action?>SetKeyButton' type='button' onclick="waitKey(this, '<?=$action?>')"><?=$parameters["defaultKey"]?></button>
|
||||||
addButton("moveLeft", "Gauche");
|
<?php
|
||||||
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");
|
|
||||||
?>
|
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend>Répétition automatique</legend>
|
<legend>Répétition automatique</legend>
|
||||||
<div>
|
<div>
|
||||||
<label id="autorepeatDelayRangeLabel" for="autorepeatDelayRange">Délai initial</label>
|
<label id="autorepeatDelayRangeLabel" for="autorepeatDelayRange">Délai initial : 300ms</label>
|
||||||
<input id="autorepeatDelayRange" type="range" oninput="autorepeatDelayChanged()" min="100" max="1000" step="10" />
|
<input id="autorepeatDelayRange" type="range" oninput="autorepeatDelayChanged()" min="100" max="500" step="10" />
|
||||||
<label id="autorepeatPeriodRangeLabel" for="autorepeatPeriodRange">Période</label>
|
<label id="autorepeatPeriodRangeLabel" for="autorepeatPeriodRange">Période : 10ms</label>
|
||||||
<input id="autorepeatPeriodRange" type="range" id="autorepeatPeriodRange" oninput="autorepeatPeriodChanged()" min="2" max="50" step="2" />
|
<input id="autorepeatPeriodRange" type="range" id="autorepeatPeriodRange" oninput="autorepeatPeriodChanged()" min="2" max="50" step="2" />
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
@ -84,39 +101,26 @@
|
|||||||
<div></div>
|
<div></div>
|
||||||
<select id="themeSelect" onchange="themeChanged()">
|
<select id="themeSelect" onchange="themeChanged()">
|
||||||
<?php
|
<?php
|
||||||
foreach(scandir("themes") as $theme) {
|
foreach(array_slice(scandir("themes"), 2) as $theme) {
|
||||||
if (pathinfo ($theme, PATHINFO_EXTENSION) == "css")
|
if (is_dir(pathinfo($theme)['dirname']))
|
||||||
echo " <option>" . pathinfo($theme, PATHINFO_FILENAME) . "</option>\n";
|
echo " <option>" . $theme . "</option>\n";
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
</select>
|
</select>
|
||||||
<?php
|
<?php
|
||||||
echoTable("themePreview", 2, 0, 3);
|
echoTable("themePreviewTable", 2, 0, 3);
|
||||||
?>
|
?>
|
||||||
<div id="showGhostDiv">
|
<div>
|
||||||
<input id="showGhostCheckbox" type="checkbox" checked onchange="showGhostChanged()"/>
|
<input id="showGhostCheckbox" type="checkbox" checked onchange="showGhostChanged()"/>
|
||||||
<label for="showGhostCheckbox">Afficher le fantôme</label>
|
<label for="showGhostCheckbox">Afficher le fantôme</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<button id="hideSettingsButton" type="button" onclick="hideSettings()">RETOUR</button>
|
|
||||||
</section>
|
</section>
|
||||||
<section id="start">
|
<section id="leaderboardLinkSection">
|
||||||
<fieldset>
|
<div>
|
||||||
<legend>Nouvelle partie</legend>
|
<a href="leaderboard.php" target="_blank">TABLEAU DE SCORE</a>
|
||||||
<div>
|
</div>
|
||||||
<label for="startLevel">Niveau</label>
|
|
||||||
<input type="number" id="startLevelInput" min="1" max="15" step="1">
|
|
||||||
<div></div>
|
|
||||||
<button id="startButton" type="button" onclick="newGame(startLevelInput.value)" disabled>JOUER</button>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<button id="settingsButton" type="button" onclick="showSettings()" disabled>OPTIONS</button>
|
|
||||||
</section>
|
|
||||||
<footer id="leaderboardLink">
|
|
||||||
<a href="leaderboard.php" target="_blank">TABLEAU DE SCORE</a>
|
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -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;
|
|
||||||
}
|
|
||||||
181
themes/default/style.css
Normal file
181
themes/default/style.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 368 KiB After Width: | Height: | Size: 368 KiB |
@ -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-face {
|
||||||
font-family: 'Share Tech';
|
font-family: 'Share Tech';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -116,7 +155,7 @@ th, td {
|
|||||||
width: 72vmin;
|
width: 72vmin;
|
||||||
grid-template-columns: 18vmin 30vmin 18vmin;
|
grid-template-columns: 18vmin 30vmin 18vmin;
|
||||||
grid-gap: 3vmin;
|
grid-gap: 3vmin;
|
||||||
margin: -8vmin auto 0 auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#hold {
|
#hold {
|
||||||
@ -207,3 +246,5 @@ caption {
|
|||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 385 B After Width: | Height: | Size: 385 B |
|
Before Width: | Height: | Size: 404 B After Width: | Height: | Size: 404 B |
|
Before Width: | Height: | Size: 377 B After Width: | Height: | Size: 377 B |
|
Before Width: | Height: | Size: 335 B After Width: | Height: | Size: 335 B |
|
Before Width: | Height: | Size: 374 B After Width: | Height: | Size: 374 B |
|
Before Width: | Height: | Size: 387 B After Width: | Height: | Size: 387 B |
|
Before Width: | Height: | Size: 371 B After Width: | Height: | Size: 371 B |
@ -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;
|
|
||||||
}
|
|
||||||
@ -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;
|
|
||||||
}
|
|
||||||
@ -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;
|
|
||||||
}
|
|
||||||
@ -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;
|
|
||||||
}
|
|
||||||
@ -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;
|
|
||||||
}
|
|
||||||
180
webtris.js
180
webtris.js
@ -39,7 +39,7 @@ const CLASSNAME = {
|
|||||||
const DELAY = {
|
const DELAY = {
|
||||||
LOCK: 500,
|
LOCK: 500,
|
||||||
FALL: 1000,
|
FALL: 1000,
|
||||||
autorepeat: 300,
|
AUTOREPEAT: 300,
|
||||||
AUTOREPEAT_PERIOD: 10,
|
AUTOREPEAT_PERIOD: 10,
|
||||||
ANIMATION: 100,
|
ANIMATION: 100,
|
||||||
MESSAGE: 700
|
MESSAGE: 700
|
||||||
@ -195,7 +195,7 @@ class Tetromino {
|
|||||||
this.minoesPos = [[-1, -1], [0, -1], [0, 0], [1, 0]]
|
this.minoesPos = [[-1, -1], [0, -1], [0, 0], [1, 0]]
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
this.className = CLASSNAME.MINO + " " + this.shape + "-" + CLASSNAME.MINO
|
this.className = CLASSNAME.MINO + " " + this.shape
|
||||||
}
|
}
|
||||||
|
|
||||||
get minoesAbsPos() {
|
get minoesAbsPos() {
|
||||||
@ -237,7 +237,7 @@ class MinoesTable {
|
|||||||
|
|
||||||
class HoldQueue extends MinoesTable {
|
class HoldQueue extends MinoesTable {
|
||||||
constructor() {
|
constructor() {
|
||||||
super("hold")
|
super("holdTable")
|
||||||
}
|
}
|
||||||
|
|
||||||
newGame() {
|
newGame() {
|
||||||
@ -254,7 +254,7 @@ class HoldQueue extends MinoesTable {
|
|||||||
|
|
||||||
class Matrix extends MinoesTable {
|
class Matrix extends MinoesTable {
|
||||||
constructor() {
|
constructor() {
|
||||||
super("matrix")
|
super("matrixTable")
|
||||||
}
|
}
|
||||||
|
|
||||||
newGame() {
|
newGame() {
|
||||||
@ -314,7 +314,7 @@ class Matrix extends MinoesTable {
|
|||||||
|
|
||||||
class NextQueue extends MinoesTable {
|
class NextQueue extends MinoesTable {
|
||||||
constructor() {
|
constructor() {
|
||||||
super("next")
|
super("nextTable")
|
||||||
}
|
}
|
||||||
|
|
||||||
newGame() {
|
newGame() {
|
||||||
@ -332,7 +332,7 @@ class NextQueue extends MinoesTable {
|
|||||||
|
|
||||||
class ThemePreview extends MinoesTable {
|
class ThemePreview extends MinoesTable {
|
||||||
constructor() {
|
constructor() {
|
||||||
super("themePreview")
|
super("themePreviewTable")
|
||||||
this.piece = new Tetromino(THEME.PIECE_POSITION, "T")
|
this.piece = new Tetromino(THEME.PIECE_POSITION, "T")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -378,7 +378,7 @@ class Stats {
|
|||||||
|
|
||||||
newLevel(level=null) {
|
newLevel(level=null) {
|
||||||
this.level = level || this.level + 1
|
this.level = level || this.level + 1
|
||||||
location.hash = "#" + this.level
|
location.hash = "#level" + this.level
|
||||||
this.levelCell.innerText = this.level
|
this.levelCell.innerText = this.level
|
||||||
printTempTexts(`NIVEAU<br/>${this.level}`)
|
printTempTexts(`NIVEAU<br/>${this.level}`)
|
||||||
this.goal += 5 * this.level
|
this.goal += 5 * this.level
|
||||||
@ -427,8 +427,8 @@ class Stats {
|
|||||||
|
|
||||||
|
|
||||||
// Functions
|
// Functions
|
||||||
function newGame(startLevel=startLevelInput) {
|
function newGame(startLevel) {
|
||||||
document.getElementById("startButton").blur()
|
startButton.blur()
|
||||||
|
|
||||||
holdQueue.newGame()
|
holdQueue.newGame()
|
||||||
matrix.newGame()
|
matrix.newGame()
|
||||||
@ -437,11 +437,10 @@ function newGame(startLevel=startLevelInput) {
|
|||||||
|
|
||||||
localStorage.setItem("startLevel", startLevel)
|
localStorage.setItem("startLevel", startLevel)
|
||||||
|
|
||||||
document.getElementById("game").style.display = "grid"
|
startSection.style.display = "none"
|
||||||
document.getElementById("settings").style.display = "none"
|
gameSection.style.display = "block"
|
||||||
document.getElementById("settingsButton").style.display = "flex"
|
settingsSection.style.display = "none"
|
||||||
document.getElementById("start").style.display = "none"
|
leaderboardLinkSection.style.display = "none"
|
||||||
document.getElementById("leaderboardLink").style.display = "none"
|
|
||||||
|
|
||||||
state = STATE.PLAYING
|
state = STATE.PLAYING
|
||||||
pressedKeys = new Set()
|
pressedKeys = new Set()
|
||||||
@ -577,7 +576,7 @@ function clearLinesCleared() {
|
|||||||
|
|
||||||
function gameOver() {
|
function gameOver() {
|
||||||
state = STATE.GAME_OVER
|
state = STATE.GAME_OVER
|
||||||
messageDiv.innerHTML = "GAME<br/>OVER"
|
messageSpan.innerHTML = "GAME<br/>OVER"
|
||||||
scheduler.clearInterval(lockPhase)
|
scheduler.clearInterval(lockPhase)
|
||||||
scheduler.clearTimeout(lockDown)
|
scheduler.clearTimeout(lockDown)
|
||||||
scheduler.clearInterval(clock)
|
scheduler.clearInterval(clock)
|
||||||
@ -628,11 +627,12 @@ function gameOver() {
|
|||||||
request.open('POST', 'inleaderboard.php')
|
request.open('POST', 'inleaderboard.php')
|
||||||
request.send(fd)
|
request.send(fd)
|
||||||
|
|
||||||
document.getElementById("game").style.display = "grid"
|
location.hash = "#game-over"
|
||||||
document.getElementById("settings").style.display = "none"
|
|
||||||
document.getElementById("start").style.display = "grid"
|
startSection.style.display = "block"
|
||||||
document.getElementById("settingsButton").style.display = "flex"
|
gameSection.style.display = "block"
|
||||||
document.getElementById("leaderboardLink").style.display = "flex"
|
settingsSection.style.display = "none"
|
||||||
|
leaderboardLinkSection.style.display = "block"
|
||||||
}
|
}
|
||||||
|
|
||||||
function autorepeat() {
|
function autorepeat() {
|
||||||
@ -737,6 +737,7 @@ function hold() {
|
|||||||
|
|
||||||
function pause() {
|
function pause() {
|
||||||
state = STATE.PAUSED
|
state = STATE.PAUSED
|
||||||
|
location.hash = "#pause"
|
||||||
stats.startTime = performance.now() - stats.startTime
|
stats.startTime = performance.now() - stats.startTime
|
||||||
actionsToRepeat = []
|
actionsToRepeat = []
|
||||||
scheduler.clearInterval(lockPhase)
|
scheduler.clearInterval(lockPhase)
|
||||||
@ -747,29 +748,32 @@ function pause() {
|
|||||||
holdQueue.draw()
|
holdQueue.draw()
|
||||||
matrix.draw()
|
matrix.draw()
|
||||||
nextQueue.draw()
|
nextQueue.draw()
|
||||||
messageDiv.innerHTML = `PAUSE<br/><br/>Appuyez sur<br/>${getKeyName('pause')}<br/>pour reprendre`
|
gameSection.style.display = "none"
|
||||||
|
settingsSection.style.display = "block"
|
||||||
}
|
}
|
||||||
|
|
||||||
function resume() {
|
function resume() {
|
||||||
if (document.getElementById("game").style.display == "grid") {
|
applySettings()
|
||||||
state = STATE.PLAYING
|
settingsSection.style.display = "none"
|
||||||
stats.startTime = performance.now() - stats.startTime
|
gameSection.style.display = "block"
|
||||||
messageDiv.innerHTML = ""
|
location.hash = "#level" + stats.level
|
||||||
scheduler.setInterval(lockPhase, stats.fallPeriod)
|
state = STATE.PLAYING
|
||||||
if (matrix.piece.locked)
|
stats.startTime = performance.now() - stats.startTime
|
||||||
scheduler.setTimeout(lockDown, stats.lockDelay)
|
messageSpan.innerHTML = ""
|
||||||
scheduler.setInterval(clock, 1000)
|
scheduler.setInterval(lockPhase, stats.fallPeriod)
|
||||||
holdQueue.draw()
|
if (matrix.piece.locked)
|
||||||
matrix.draw()
|
scheduler.setTimeout(lockDown, stats.lockDelay)
|
||||||
nextQueue.draw()
|
scheduler.setInterval(clock, 1000)
|
||||||
if (tempTexts.length)
|
holdQueue.draw()
|
||||||
scheduler.setInterval(delTempTexts, DELAY.MESSAGE)
|
matrix.draw()
|
||||||
}
|
nextQueue.draw()
|
||||||
|
if (tempTexts.length)
|
||||||
|
scheduler.setInterval(delTempTexts, DELAY.MESSAGE)
|
||||||
}
|
}
|
||||||
|
|
||||||
function printTempTexts(text) {
|
function printTempTexts(text) {
|
||||||
tempTexts.push(text)
|
tempTexts.push(text)
|
||||||
messageDiv.innerHTML = tempTexts[0]
|
messageSpan.innerHTML = tempTexts[0]
|
||||||
if (!scheduler.intervalTasks.has(delTempTexts))
|
if (!scheduler.intervalTasks.has(delTempTexts))
|
||||||
scheduler.setInterval(delTempTexts, DELAY.MESSAGE)
|
scheduler.setInterval(delTempTexts, DELAY.MESSAGE)
|
||||||
}
|
}
|
||||||
@ -778,10 +782,10 @@ function delTempTexts(self) {
|
|||||||
if (tempTexts.length)
|
if (tempTexts.length)
|
||||||
tempTexts.shift()
|
tempTexts.shift()
|
||||||
if (tempTexts.length)
|
if (tempTexts.length)
|
||||||
messageDiv.innerHTML = tempTexts[0]
|
messageSpan.innerHTML = tempTexts[0]
|
||||||
else {
|
else {
|
||||||
scheduler.clearInterval(delTempTexts)
|
scheduler.clearInterval(delTempTexts)
|
||||||
messageDiv.innerHTML = ""
|
messageSpan.innerHTML = ""
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -808,7 +812,7 @@ function applySettings() {
|
|||||||
actions[STATE.PAUSED][getKeyName("pause")] = resume
|
actions[STATE.PAUSED][getKeyName("pause")] = resume
|
||||||
actions[STATE.GAME_OVER] = {}
|
actions[STATE.GAME_OVER] = {}
|
||||||
|
|
||||||
autorepeatDelay = localStorage.getItem("autorepeatDelay") || DELAY.autorepeat
|
autorepeatDelay = localStorage.getItem("autorepeatDelay") || DELAY.AUTOREPEAT
|
||||||
autorepeatPeriod = localStorage.getItem("autorepeatPeriod") || DELAY.AUTOREPEAT_PERIOD
|
autorepeatPeriod = localStorage.getItem("autorepeatPeriod") || DELAY.AUTOREPEAT_PERIOD
|
||||||
|
|
||||||
themeName = localStorage.getItem("themeName") || DEFAULT_THEME
|
themeName = localStorage.getItem("themeName") || DEFAULT_THEME
|
||||||
@ -825,76 +829,48 @@ function replaceSpace(key) {
|
|||||||
return (key == " ") ? "Space" : key
|
return (key == " ") ? "Space" : key
|
||||||
}
|
}
|
||||||
|
|
||||||
function showSettings() {
|
function loadSettings() {
|
||||||
if (state == STATE.PLAYING)
|
if (state == STATE.PLAYING)
|
||||||
pause()
|
pause()
|
||||||
|
|
||||||
document.getElementById("set-moveLeft-key" ).innerHTML = replaceSpace(getKeyName("moveLeft"))
|
moveLeftSetKeyButton.innerHTML = replaceSpace(getKeyName("moveLeft"))
|
||||||
document.getElementById("set-moveRight-key").innerHTML = replaceSpace(getKeyName("moveRight"))
|
moveRightSetKeyButton.innerHTML = replaceSpace(getKeyName("moveRight"))
|
||||||
document.getElementById("set-softDrop-key" ).innerHTML = replaceSpace(getKeyName("softDrop"))
|
softDropSetKeyButton.innerHTML = replaceSpace(getKeyName("softDrop"))
|
||||||
document.getElementById("set-hardDrop-key" ).innerHTML = replaceSpace(getKeyName("hardDrop"))
|
hardDropSetKeyButton.innerHTML = replaceSpace(getKeyName("hardDrop"))
|
||||||
document.getElementById("set-rotateCW-key" ).innerHTML = replaceSpace(getKeyName("rotateCW"))
|
rotateCWSetKeyButton.innerHTML = replaceSpace(getKeyName("rotateCW"))
|
||||||
document.getElementById("set-rotateCCW-key").innerHTML = replaceSpace(getKeyName("rotateCCW"))
|
rotateCCWSetKeyButton.innerHTML = replaceSpace(getKeyName("rotateCCW"))
|
||||||
document.getElementById("set-hold-key" ).innerHTML = replaceSpace(getKeyName("hold"))
|
holdSetKeyButton.innerHTML = replaceSpace(getKeyName("hold"))
|
||||||
document.getElementById("set-pause-key" ).innerHTML = replaceSpace(getKeyName("pause"))
|
pauseSetKeyButton.innerHTML = replaceSpace(getKeyName("pause"))
|
||||||
|
|
||||||
document.getElementById("autorepeatDelayRange").value = autorepeatDelay
|
autorepeatDelayRange.value = autorepeatDelay
|
||||||
document.getElementById("autorepeatDelayRangeLabel").innerText = `Délai initial : ${autorepeatDelay}ms`
|
autorepeatDelayRangeLabel.innerText = `Délai initial : ${autorepeatDelay}ms`
|
||||||
document.getElementById("autorepeatPeriodRange").value = autorepeatPeriod
|
autorepeatPeriodRange.value = autorepeatPeriod
|
||||||
document.getElementById("autorepeatPeriodRangeLabel").innerText = `Période : ${autorepeatPeriod}ms`
|
autorepeatPeriodRangeLabel.innerText = `Période : ${autorepeatPeriod}ms`
|
||||||
|
|
||||||
document.getElementById("themeSelect").value=themeName;
|
themeSelect.value=themeName;
|
||||||
themePreview.drawPiece(themePreview.piece)
|
themePreview.drawPiece(themePreview.piece)
|
||||||
|
|
||||||
document.getElementById("showGhostCheckbox").checked = showGhost
|
showGhostCheckbox.checked = showGhost
|
||||||
|
|
||||||
document.getElementById("settings").style.display = "block"
|
/*startSection.style.display = "grid"
|
||||||
document.getElementById("game").style.display = "none"
|
gameSection.style.display = "grid"
|
||||||
document.getElementById("settingsButton").style.display = "none"
|
settingsSection.style.display = "block"
|
||||||
|
settingsButtonSection.style.display = "flex"
|
||||||
|
|
||||||
switch(state) {
|
switch(state) {
|
||||||
case STATE.WAITING:
|
case STATE.WAITING:
|
||||||
document.getElementById("start").style.display = "block"
|
document.getElementById("start").style.display = "block"
|
||||||
document.getElementById("hideSettingsButton").style.display = "none"
|
document.getElementById("hideSettingsButton").style.display = "none"
|
||||||
document.getElementById("leaderboardLink").style.display = "flex"
|
|
||||||
break
|
break
|
||||||
case STATE.GAME_OVER:
|
case STATE.GAME_OVER:
|
||||||
document.getElementById("start").style.display = "block"
|
document.getElementById("start").style.display = "block"
|
||||||
document.getElementById("hideSettingsButton").style.display = "flex"
|
document.getElementById("hideSettingsButton").style.display = "flex"
|
||||||
document.getElementById("leaderboardLink").style.display = "flex"
|
|
||||||
break
|
break
|
||||||
case STATE.PAUSED:
|
case STATE.PAUSED:
|
||||||
document.getElementById("start").style.display = "none"
|
document.getElementById("start").style.display = "none"
|
||||||
document.getElementById("hideSettingsButton").style.display = "flex"
|
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) {
|
function waitKey(button, action) {
|
||||||
@ -915,15 +891,13 @@ function changeKey(e) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function autorepeatDelayChanged() {
|
function autorepeatDelayChanged() {
|
||||||
autorepeatDelay = document.getElementById("autorepeatDelayRange").value
|
localStorage.setItem("autorepeatDelay", autorepeatDelayRange.value)
|
||||||
localStorage.setItem("autorepeatDelay", autorepeatDelay)
|
document.getElementById("autorepeatDelayRangeLabel").innerText = `Délai initial : ${autorepeatDelayRange.value}ms`
|
||||||
document.getElementById("autorepeatDelayRangeLabel").innerText = `Délai initial : ${autorepeatDelay}ms`
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function autorepeatPeriodChanged() {
|
function autorepeatPeriodChanged() {
|
||||||
autorepeatPeriod = document.getElementById("autorepeatPeriodRange").value
|
localStorage.setItem("autorepeatPeriod", autorepeatPeriodRange.value)
|
||||||
localStorage.setItem("autorepeatPeriod", autorepeatPeriod)
|
document.getElementById("autorepeatPeriodRangeLabel").innerText = `Période : ${autorepeatPeriodRange.value}ms`
|
||||||
document.getElementById("autorepeatPeriodRangeLabel").innerText = `Période : ${autorepeatPeriod}ms`
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function themeChanged() {
|
function themeChanged() {
|
||||||
@ -939,13 +913,13 @@ function loadTheme() {
|
|||||||
link.id = "theme";
|
link.id = "theme";
|
||||||
link.rel = 'stylesheet'
|
link.rel = 'stylesheet'
|
||||||
link.type = 'text/css'
|
link.type = 'text/css'
|
||||||
link.href = 'themes/' + themeName+ '.css'
|
link.href = 'themes/' + themeName+ '/style.css'
|
||||||
link.media = 'all'
|
link.media = 'all'
|
||||||
document.head.appendChild(link);
|
document.head.appendChild(link);
|
||||||
}
|
}
|
||||||
|
|
||||||
function showGhostChanged() {
|
function showGhostChanged() {
|
||||||
showGhost = (document.getElementById("showGhostCheckbox").checked == true)
|
showGhost = (showGhostCheckbox.checked == true)
|
||||||
localStorage.setItem("showGhost", showGhost)
|
localStorage.setItem("showGhost", showGhost)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -962,14 +936,9 @@ selectedButton = null
|
|||||||
selectedAction = ""
|
selectedAction = ""
|
||||||
|
|
||||||
window.onload = function() {
|
window.onload = function() {
|
||||||
applySettings()
|
location.hash = ""
|
||||||
|
|
||||||
document.getElementById("startLevelInput").value = localStorage.getItem("startLevel") || 1
|
startLevelInput.value = localStorage.getItem("startLevel") || 1
|
||||||
|
|
||||||
document.getElementById("startButton").disabled = false
|
|
||||||
document.getElementById("startButton").focus()
|
|
||||||
document.getElementById("settingsButton").disabled = false
|
|
||||||
messageDiv = document.getElementById("message")
|
|
||||||
|
|
||||||
scheduler = new Scheduler()
|
scheduler = new Scheduler()
|
||||||
holdQueue = new HoldQueue()
|
holdQueue = new HoldQueue()
|
||||||
@ -978,6 +947,9 @@ window.onload = function() {
|
|||||||
nextQueue = new NextQueue()
|
nextQueue = new NextQueue()
|
||||||
themePreview = new ThemePreview()
|
themePreview = new ThemePreview()
|
||||||
|
|
||||||
if (location.hash) newGame(Math.min(location.hash.slice(1), 15))
|
applySettings()
|
||||||
else showSettings()
|
loadSettings()
|
||||||
|
|
||||||
|
startButton.disabled = false
|
||||||
|
startButton.focus()
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user