new version
This commit is contained in:
parent
1d1b2b24d2
commit
078120e4d1
120
index.php
120
index.php
@ -1,29 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Webtris</title>
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||
<script type="text/javascript" src="webtris.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>WEBTRIS</h1>
|
||||
</header>
|
||||
<section id="game">
|
||||
<?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 class=invisible-grid>";
|
||||
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 class=visible-grid>";
|
||||
echo " <tr>";
|
||||
for ($x = 0; $x < $columns; $x++) {
|
||||
echo "<td class=empty-cell></td>";
|
||||
}
|
||||
@ -31,11 +28,25 @@
|
||||
}
|
||||
echo " </table>\n";
|
||||
}
|
||||
echoTable("hold", 6, 0, 6);
|
||||
echoTable("matrix", 4, 20, 10);
|
||||
echoTable("next", 24, 0, 6);
|
||||
?>
|
||||
<table id="stats">
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Webtris</title>
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<link id="theme" rel="stylesheet" type="text/css" href="themes/default/style.css" />
|
||||
<script type="text/javascript" src="webtris.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<section id="gameSection" style="display: none">
|
||||
<div>
|
||||
<?php
|
||||
echoTable("holdTable", 6, 0, 6);
|
||||
echoTable("matrixTable", 4, 20, 10);
|
||||
echoTable("nextTable", 24, 0, 6);
|
||||
?>
|
||||
<table id="statsTable">
|
||||
<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>
|
||||
@ -47,34 +58,40 @@
|
||||
<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>
|
||||
<span id="messageSpan"></span>
|
||||
</div>
|
||||
</section>
|
||||
<section id="settings">
|
||||
<fieldset id="keyboard">
|
||||
<section id="startSection">
|
||||
<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>
|
||||
<div class="settings">
|
||||
<div>
|
||||
<?php
|
||||
foreach($actions as $action=>$parameters) {
|
||||
?>
|
||||
<label for='<?=$action?>SetKeyButton'><?=$parameters["label"]?></label>
|
||||
<button id='<?=$action?>SetKeyButton' type='button' onclick="waitKey(this, '<?=$action?>')"><?=$parameters["defaultKey"]?></button>
|
||||
<?php
|
||||
function addButton($action, $label) {
|
||||
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("softDrop", "Chute lente");
|
||||
addButton("hardDrop", "Chute rapide");
|
||||
addButton("rotateCW", "Rotation horaire");
|
||||
addButton("rotateCCW", "Rotation anti-horaire");
|
||||
addButton("hold", "Garde");
|
||||
addButton("pause", "Pause/Reprise");
|
||||
?>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Répétition automatique</legend>
|
||||
<div>
|
||||
<label id="autorepeatDelayRangeLabel" for="autorepeatDelayRange">Délai initial</label>
|
||||
<input id="autorepeatDelayRange" type="range" oninput="autorepeatDelayChanged()" min="100" max="1000" step="10" />
|
||||
<label id="autorepeatPeriodRangeLabel" for="autorepeatPeriodRange">Période</label>
|
||||
<label id="autorepeatDelayRangeLabel" for="autorepeatDelayRange">Délai initial : 300ms</label>
|
||||
<input id="autorepeatDelayRange" type="range" oninput="autorepeatDelayChanged()" min="100" max="500" step="10" />
|
||||
<label id="autorepeatPeriodRangeLabel" for="autorepeatPeriodRange">Période : 10ms</label>
|
||||
<input id="autorepeatPeriodRange" type="range" id="autorepeatPeriodRange" oninput="autorepeatPeriodChanged()" min="2" max="50" step="2" />
|
||||
</div>
|
||||
</fieldset>
|
||||
@ -84,39 +101,26 @@
|
||||
<div></div>
|
||||
<select id="themeSelect" onchange="themeChanged()">
|
||||
<?php
|
||||
foreach(scandir("themes") as $theme) {
|
||||
if (pathinfo ($theme, PATHINFO_EXTENSION) == "css")
|
||||
echo " <option>" . pathinfo($theme, PATHINFO_FILENAME) . "</option>\n";
|
||||
foreach(array_slice(scandir("themes"), 2) as $theme) {
|
||||
if (is_dir(pathinfo($theme)['dirname']))
|
||||
echo " <option>" . $theme . "</option>\n";
|
||||
}
|
||||
?>
|
||||
</select>
|
||||
<?php
|
||||
echoTable("themePreview", 2, 0, 3);
|
||||
echoTable("themePreviewTable", 2, 0, 3);
|
||||
?>
|
||||
<div id="showGhostDiv">
|
||||
<div>
|
||||
<input id="showGhostCheckbox" type="checkbox" checked onchange="showGhostChanged()"/>
|
||||
<label for="showGhostCheckbox">Afficher le fantôme</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<button id="hideSettingsButton" type="button" onclick="hideSettings()">RETOUR</button>
|
||||
</section>
|
||||
<section id="start">
|
||||
<fieldset>
|
||||
<legend>Nouvelle partie</legend>
|
||||
<section id="leaderboardLinkSection">
|
||||
<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>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</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-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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
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;
|
||||
}
|
||||
158
webtris.js
158
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<br/>${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<br/>OVER"
|
||||
messageSpan.innerHTML = "GAME<br/>OVER"
|
||||
scheduler.clearInterval(lockPhase)
|
||||
scheduler.clearTimeout(lockDown)
|
||||
scheduler.clearInterval(clock)
|
||||
@ -628,11 +627,12 @@ function gameOver() {
|
||||
request.open('POST', 'inleaderboard.php')
|
||||
request.send(fd)
|
||||
|
||||
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"
|
||||
location.hash = "#game-over"
|
||||
|
||||
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,14 +748,18 @@ function pause() {
|
||||
holdQueue.draw()
|
||||
matrix.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() {
|
||||
if (document.getElementById("game").style.display == "grid") {
|
||||
applySettings()
|
||||
settingsSection.style.display = "none"
|
||||
gameSection.style.display = "block"
|
||||
location.hash = "#level" + stats.level
|
||||
state = STATE.PLAYING
|
||||
stats.startTime = performance.now() - stats.startTime
|
||||
messageDiv.innerHTML = ""
|
||||
messageSpan.innerHTML = ""
|
||||
scheduler.setInterval(lockPhase, stats.fallPeriod)
|
||||
if (matrix.piece.locked)
|
||||
scheduler.setTimeout(lockDown, stats.lockDelay)
|
||||
@ -765,11 +770,10 @@ function resume() {
|
||||
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()
|
||||
location.hash = ""
|
||||
|
||||
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")
|
||||
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()
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user