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

update

Browse Source
This commit is contained in:
Adrien MALINGREY 2020-09-28 21:15:40 +02:00
parent bb33748a30
commit c2050f224f
9 changed files with 220 additions and 237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
css/images/bg.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 218 KiB

After

Width:  |  Height:  |  Size: 368 KiB

BIN
css/images/bg.jpg.bak Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 218 KiB

220
css/style.css
View File

@ -13,12 +13,12 @@
src: local('Share Tech Mono Regular'), local('ShareTechMono-Regular'), url(fonts/ShareTechMono.woff2) format('woff2'); src: local('Share Tech Mono Regular'), local('ShareTechMono-Regular'), url(fonts/ShareTechMono.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
} }
* { * {
color: white;
font-family: 'Share Tech'; font-family: 'Share Tech';
font-size: 1em; font-size: 1em;
margin: auto 1vmin; text-align: center;
} }
body { body {
@ -28,62 +28,78 @@ body {
background-attachment: fixed; background-attachment: fixed;
} }
h1 { h1 {
font-size: 5vmin; font-size: 5vmin;
margin: 1vmin auto; margin: 1vmin auto;
text-shadow: 3px 2px rgba(153, 145, 175, 0.5); text-shadow: 3px 2px rgba(153, 145, 175, 0.5);
text-align: center; text-align: center;
color: white;
} }
div { div {
display: flex; display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center; justify-content: center;
align-content: center; align-items: center;
margin: 1vmin auto;
text-align: center;
column-gap: 2vmin;
} }
fieldset { fieldset {
display: grid; display: grid;
grid-template-columns: 3fr 2fr 3fr 2fr; grid-template-columns: 3fr 2fr 3fr 2fr;
grid-gap: 1vmin; grid-gap: 1vmin;
margin: 1vmin auto; margin: 1vmin;
justify-items: center; border: 1px white solid;
align-items: baseline; border-radius: 4px;
align-items: center;
} }
label { fieldset > legend, label {
font-size: 1em; color: white;
} }
input[type="number"] { fieldset > input, select, button {
color: black;
width: 2.5em;
}
fieldset > input {
width: 100%; width: 100%;
} }
button { button {
color: black; width: auto;
margin: 0.5vmin;
} }
select { #showGhostDiv {
color:black; grid-column-start: 1;
grid-column-end: 5;
width: 100%;
} }
a { #settingsButton {
text-decoration: none; display: none;
font-size: 1em; width: auto;
margin: 2vmin;
} }
a:hover { #hideSettingsButton {
color: lightcyan; display: none;
width: auto;
margin: auto;
}
.minoes-table {
table-layout: fixed;
border-spacing: 0;
margin: auto;
}
tr {
height: 3vmin;
}
th, td {
font-weight: normal;
padding: 0;
border-width: 1px;
border-style: solid;
border-color: transparent;
width: 3vmin;
} }
#game { #game {
@ -95,54 +111,72 @@ a:hover {
margin: auto; margin: auto;
} }
.minoes-table {
table-layout: fixed;
border-spacing: 0;
margin: 0;
}
th {
font-weight: normal;
}
th, td {
padding: 0;
border-width: 1px;
border-style: solid;
border-color: transparent;
height: 2vmin;
width: 2vmin;
}
#hold { #hold {
grid-column: 1; grid-column: 1;
grid-row: 1; grid-row: 1;
width: 18vmin;
height: 18vmin;
justify-self: end; justify-self: end;
} }
#matrix {
grid-column: 2;
grid-row: 1 / 3;
width: 30vmin;
height: 72vmin;
}
#next {
grid-column: 3;
grid-row: 1 / 3;
width: 18vmin;
height: 72vmin;
}
#stats { #stats {
grid-column: 1; grid-column: 1;
grid-row: 2; grid-row: 2;
height: 0; height: 0;
width: 18vmin;
justify-self: end; justify-self: end;
margin: 0; margin: 0 auto;
}
#score {
font-weight: bold;
}
#matrix {
grid-column: 2;
grid-row: 1 / 3;
}
#message {
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;
}
#next {
grid-column: 3;
grid-row: 1 / 3;
}
a {
text-decoration: none;
font-size: 1em;
color: white;
}
a:hover {
color: lightcyan;
}
#leaderboardLink {
display: flex;
justify-content: center;
}
#leaderboard {
min-width: 25%;
margin: auto;
text-align: center;
border-top: 1px solid white;
caption-side: top;
}
caption {
color: white;
} }
.name { .name {
@ -165,57 +199,3 @@ th, td {
font-size: 2.5vmin; font-size: 2.5vmin;
color: white; color: white;
} }
#score {
font-weight: bold;
}
#message {
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;
}
#settings {
display: none;
}
#settings > * {
margin: 2vmin auto;
}
#settings > div {
justify-content: left;
width: 85vmin;
}
#settings > div > * {
margin: 0;
}
#keyboard button {
width: 100%;
}
#themePreview {
width: 18vmin;
height: 18vmin;
}
#settingsButton {
display: none;
}
#leaderboard {
min-width: 25%;
margin: auto;
text-align: center;
border-top: 1px solid white;
caption-side: top;
}

2
css/themes/light-relief.css
View File

@ -36,7 +36,7 @@
} }
.T-mino { .T-mino {
background: rgb(204, 153, 255); background: rgb(255, 102, 255);
} }
.Z-mino { .Z-mino {

2
css/themes/light-solid.css
View File

@ -36,7 +36,7 @@
} }
.T-mino { .T-mino {
background: rgb(204, 153, 255); background: rgb(255, 102, 255);
} }
.Z-mino { .Z-mino {

34
index.php
View File

@ -18,7 +18,7 @@
for ($y = 0; $y < $invisibleRows; $y++) { for ($y = 0; $y < $invisibleRows; $y++) {
echo " <tr class=invisible-grid>"; echo " <tr class=invisible-grid>";
for ($x = 0; $x < $columns; $x++) { for ($x = 0; $x < $columns; $x++) {
echo "<td class=empty-cell></td>"; echo "<th class=empty-cell></td>";
} }
echo "</tr>\n"; echo "</tr>\n";
} }
@ -55,7 +55,7 @@
<?php <?php
function addButton($action, $label) { function addButton($action, $label) {
echo " <label for='set-$action-key'>$label</label>\n"; echo " <label for='set-$action-key'>$label</label>\n";
echo " <button id='set-$action-key' type='button' onclick=\"waitKey(this, '$action')\"></button>"; echo " <button id='set-$action-key' type='button' onclick=\"waitKey(this, '$action')\">...</button>";
} }
addButton("moveLeft", "Gauche"); addButton("moveLeft", "Gauche");
addButton("moveRight", "Droite"); addButton("moveRight", "Droite");
@ -69,9 +69,9 @@
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend>Répétition automatique</legend> <legend>Répétition automatique</legend>
<label id="autorepeatDelayRangeLabel" for="autorepeatDelayRange"></label> <label id="autorepeatDelayRangeLabel" for="autorepeatDelayRange">Délai initial</label>
<input id="autorepeatDelayRange" type="range" oninput="autorepeatDelayChanged()" min="100" max="1000" step="10" /> <input id="autorepeatDelayRange" type="range" oninput="autorepeatDelayChanged()" min="100" max="1000" step="10" />
<label id="autorepeatPeriodRangeLabel" for="autorepeatPeriodRange"></label> <label id="autorepeatPeriodRangeLabel" for="autorepeatPeriodRange">Période</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" />
</fieldset> </fieldset>
<fieldset> <fieldset>
@ -86,22 +86,24 @@
?> ?>
</select> </select>
<?php <?php
echoTable("themePreview", 6, 0, 6); echoTable("themePreview", 2, 0, 3);
?> ?>
</fieldset> <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>
<button type="button" onclick="hideSettings()">RETOUR</button> </fieldset>
<button id="hideSettingsButton" type="button" onclick="hideSettings()">RETOUR</button>
</div>
<div id="start">
<fieldset>
<legend>Nouvelle partie</legend>
<label for="startLevel">Niveau</label>
<input type="number" id="startLevel" min="1" max="15" step="1">
<div></div>
<button id="startButton" type="button" onclick="newGame()" disabled>JOUER</button>
</fieldset>
</div> </div>
<fieldset id="start">
<legend>Nouvelle partie</legend>
<label for="startLevel">Niveau</label>
<input type="number" id="startLevel" min="1" max="15" step="1">
<button id="startButton" type="button" onclick="newGame()" disabled>JOUER</button>
<button id="settingsStartButton" type="button" onclick="showSettings()" disabled>OPTIONS</button>
</fieldset>
<div> <div>
<button id="settingsButton" type="button" onclick="showSettings()" disabled>OPTIONS</button> <button id="settingsButton" type="button" onclick="showSettings()" disabled>OPTIONS</button>
</div> </div>
@ -109,4 +111,4 @@
<a href="leaderboard.php" target="_blank">TABLEAU DE SCORE</a> <a href="leaderboard.php" target="_blank">TABLEAU DE SCORE</a>
</div> </div>
</body> </body>
</html> </html>

6
inleaderboard.php
View File

@ -12,9 +12,9 @@
echo "true"; echo "true";
else else
echo "false"; echo "false";
$query->closeCursor(); $query = null;
$db->close(); $db = null;
} else { } else {
header($_SERVER["SERVER_PROTOCOL"] . " 405 Method Not Allowed", true, 405); header($_SERVER["SERVER_PROTOCOL"] . " 405 Method Not Allowed", true, 405);
} }
?> ?>

180
js/webtris.js
View File

@ -16,21 +16,17 @@ Array.prototype.pick = function() { return this.splice(Math.floor(Mat
// Constants // Constants
const NEXT_PIECES = 6 const NEXT_PIECES = 6
const HOLD = { const HOLD = {
ROWS: 6, PIECE_POSITION: [2, 3]
COLUMNS: 6
} }
const MATRIX = { const MATRIX = {
ROWS: 24,
INVISIBLE_ROWS: 4, INVISIBLE_ROWS: 4,
COLUMNS: 10 PIECE_POSITION: [4, 3]
} }
const NEXT= { const NEXT= {
ROWS: 24, PIECE_POSITION: Array.from({length: NEXT_PIECES}, (v, k) => [2, k*4+3])
COLUMNS: 6
} }
const THEME = { const THEME = {
ROWS: 6, PIECE_POSITION: [1, 1]
COLUMNS: 6
} }
const CLASSNAME = { const CLASSNAME = {
EMPTY_CELL: "empty-cell", EMPTY_CELL: "empty-cell",
@ -40,16 +36,10 @@ const CLASSNAME = {
GHOST: "ghost", GHOST: "ghost",
CLEARED_LINE: "mino cleared-line" CLEARED_LINE: "mino cleared-line"
} }
const POSITION = {
HELD_PIECE: [2, 3],
FALLING_PIECE: [4, 3],
NEXT_PIECES: Array.from({length: NEXT_PIECES}, (v, k) => [2, k*4+3]),
THEMED_PIECE: [2, 3]
}
const DELAY = { const DELAY = {
LOCK: 500, LOCK: 500,
FALL: 1000, FALL: 1000,
AUTOREPEAT_DELAY: 300, autorepeat: 300,
AUTOREPEAT_PERIOD: 10, AUTOREPEAT_PERIOD: 10,
ANIMATION: 100, ANIMATION: 100,
MESSAGE: 700 MESSAGE: 700
@ -222,10 +212,10 @@ class Tetromino {
class MinoesTable { class MinoesTable {
constructor(id, rows, columns) { constructor(id) {
this.rows = rows
this.columns = columns
this.table = document.getElementById(id) this.table = document.getElementById(id)
this.rows = this.table.rows.length
this.columns = this.table.rows[0].childElementCount
} }
drawMino(x, y, className) { drawMino(x, y, className) {
@ -247,7 +237,7 @@ class MinoesTable {
class HoldQueue extends MinoesTable { class HoldQueue extends MinoesTable {
constructor() { constructor() {
super("hold", HOLD.ROWS, HOLD.COLUMNS) super("hold")
} }
newGame() { newGame() {
@ -264,11 +254,11 @@ class HoldQueue extends MinoesTable {
class Matrix extends MinoesTable { class Matrix extends MinoesTable {
constructor() { constructor() {
super("matrix", MATRIX.ROWS, MATRIX.COLUMNS) super("matrix")
} }
newGame() { newGame() {
this.lockedMinoes = Array.from(Array(MATRIX.ROWS), row => Array(MATRIX.COLUMNS)) this.lockedMinoes = Array.from(Array(this.rows), row => Array(this.columns))
this.piece = null this.piece = null
this.clearedLines = [] this.clearedLines = []
this.trail = { this.trail = {
@ -278,7 +268,7 @@ class Matrix extends MinoesTable {
} }
cellIsOccupied(x, y) { cellIsOccupied(x, y) {
return 0 <= x && x < MATRIX.COLUMNS && y < MATRIX.ROWS ? Boolean(this.lockedMinoes[y][x]) : true return 0 <= x && x < this.columns && y < this.rows ? Boolean(this.lockedMinoes[y][x]) : true
} }
spaceToMove(minoesAbsPos) { spaceToMove(minoesAbsPos) {
@ -300,7 +290,7 @@ class Matrix extends MinoesTable {
} }
} }
//ghost // ghost
if (showGhost && !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--
@ -324,11 +314,11 @@ class Matrix extends MinoesTable {
class NextQueue extends MinoesTable { class NextQueue extends MinoesTable {
constructor() { constructor() {
super("next", NEXT.ROWS, NEXT.COLUMNS) super("next")
} }
newGame() { newGame() {
this.pieces = Array.from({length: NEXT_PIECES}, (v, k) => new Tetromino(POSITION.NEXT_PIECES[k])) this.pieces = Array.from({length: NEXT_PIECES}, (v, k) => new Tetromino(NEXT.PIECE_POSITION[k]))
} }
draw() { draw() {
@ -342,8 +332,8 @@ class NextQueue extends MinoesTable {
class ThemePreview extends MinoesTable { class ThemePreview extends MinoesTable {
constructor() { constructor() {
super("themePreview", THEME.ROWS, THEME.COLUMNS) super("themePreview")
this.piece = new Tetromino(POSITION.THEMED_PIECE, "T") this.piece = new Tetromino(THEME.PIECE_POSITION, "T")
} }
} }
@ -452,8 +442,8 @@ function newGame() {
document.getElementById("game").style.display = "grid" document.getElementById("game").style.display = "grid"
document.getElementById("settings").style.display = "none" document.getElementById("settings").style.display = "none"
document.getElementById("start").style.display = "none"
document.getElementById("settingsButton").style.display = "flex" document.getElementById("settingsButton").style.display = "flex"
document.getElementById("start").style.display = "none"
document.getElementById("leaderboardLink").style.display = "none" document.getElementById("leaderboardLink").style.display = "none"
state = STATE.PLAYING state = STATE.PLAYING
@ -474,10 +464,10 @@ function generationPhase(held_piece=null) {
if (!held_piece) { if (!held_piece) {
matrix.piece = nextQueue.pieces.shift() matrix.piece = nextQueue.pieces.shift()
nextQueue.pieces.push(new Tetromino()) nextQueue.pieces.push(new Tetromino())
nextQueue.pieces.forEach((piece, i) => piece.pos = POSITION.NEXT_PIECES[i]) nextQueue.pieces.forEach((piece, i) => piece.pos = NEXT.PIECE_POSITION[i])
} }
nextQueue.draw() nextQueue.draw()
matrix.piece.pos = POSITION.FALLING_PIECE matrix.piece.pos = MATRIX.PIECE_POSITION
if (matrix.spaceToMove(matrix.piece.minoesPos.translate(matrix.piece.pos))){ if (matrix.spaceToMove(matrix.piece.minoesPos.translate(matrix.piece.pos))){
scheduler.clearInterval(lockPhase) scheduler.clearInterval(lockPhase)
scheduler.setInterval(lockPhase, stats.fallPeriod) scheduler.setInterval(lockPhase, stats.fallPeriod)
@ -565,9 +555,9 @@ function lockDown(){
// Complete lines // Complete lines
matrix.clearedLines = [] matrix.clearedLines = []
matrix.lockedMinoes.forEach((row, y) => { matrix.lockedMinoes.forEach((row, y) => {
if (row.filter(lockedMino => lockedMino.length).length == MATRIX.COLUMNS) { if (row.filter(lockedMino => lockedMino.length).length == matrix.columns) {
matrix.lockedMinoes.splice(y, 1) matrix.lockedMinoes.splice(y, 1)
matrix.lockedMinoes.unshift(Array(MATRIX.COLUMNS)) matrix.lockedMinoes.unshift(Array(matrix.columns))
matrix.clearedLines.push(y) matrix.clearedLines.push(y)
} }
}) })
@ -602,64 +592,62 @@ function gameOver() {
localStorage.setItem('highScore', stats.highScore) localStorage.setItem('highScore', stats.highScore)
info += "\nBravo ! Vous avez battu votre précédent record." info += "\nBravo ! Vous avez battu votre précédent record."
} }
var retry = 0 var retry = 0
var XHR = new XMLHttpRequest() var fd = new FormData()
var FD = new FormData() fd.append("score", stats.score)
FD.append("score", stats.score) var request = new XMLHttpRequest()
XHR.addEventListener('load', function(event) { request.onload = function(event) {
if (event.target.responseText == "true") { if (event.target.responseText == "true") {
var player = prompt(info + "\nBravo ! Vous êtes dans le Top 20.\nEntrez votre nom pour publier votre score :" , localStorage.getItem("name") || "") var player = prompt(info + "\nBravo ! Vous êtes dans le Top 20.\nEntrez votre nom pour publier votre score :" , localStorage.getItem("player") || "")
if (player.length) { if (player && player.length) {
localStorage.setItem("player", player) localStorage.setItem("player", player)
XHR = new XMLHttpRequest() fd.append("player", player)
FD = new FormData() request = new XMLHttpRequest()
FD.append("player", player) request.onload = function(event) {
FD.append("score", stats.score)
XHR.addEventListener('load', function(event) {
open("leaderboard.php") open("leaderboard.php")
}) }
XHR.addEventListener('error', function(event) { request.onerror = function(event) {
if (confirm('Erreur de connexion.\nRéessayer ?')) { if (confirm('Erreur de connexion.\nRéessayer ?')) {
XHR.open('POST', 'publish.php') request.open('POST', 'publish.php')
XHR.send(FD) request.send(fd)
} }
}) }
XHR.open('POST', 'publish.php') request.open('POST', 'publish.php')
XHR.send(FD) request.send(fd)
} }
} else { } else {
alert(info) alert(info)
} }
}) }
XHR.addEventListener('error', function(event) { request.onerror = function(event) {
retry++ retry++
if (retry < RETRIES) { if (retry < RETRIES) {
XHR.open('POST', 'inleaderboard.php') request.open('POST', 'inleaderboard.php')
XHR.send(FD) request.send(fd)
} else } else
alert(info) alert(info)
}) }
XHR.open('POST', 'inleaderboard.php') request.open('POST', 'inleaderboard.php')
XHR.send(FD) request.send(fd)
document.getElementById("game").style.display = "grid" document.getElementById("game").style.display = "grid"
document.getElementById("settings").style.display = "none" document.getElementById("settings").style.display = "none"
document.getElementById("start").style.display = "grid" document.getElementById("start").style.display = "grid"
document.getElementById("settingsButton").style.display = "none" document.getElementById("settingsButton").style.display = "flex"
document.getElementById("leaderboardLink").style.display = "flex" document.getElementById("leaderboardLink").style.display = "flex"
} }
function AUTOREPEAT_DELAY() { function autorepeat() {
if (actionsToRepeat.length) { if (actionsToRepeat.length) {
actionsToRepeat[0]() actionsToRepeat[0]()
if (scheduler.timeoutTasks.has(AUTOREPEAT_DELAY)) { if (scheduler.timeoutTasks.has(autorepeat)) {
scheduler.clearTimeout(AUTOREPEAT_DELAY) scheduler.clearTimeout(autorepeat)
scheduler.setInterval(AUTOREPEAT_DELAY, autorepeatPeriod) scheduler.setInterval(autorepeat, autorepeatPeriod)
} }
} else { } else {
scheduler.clearTimeout(AUTOREPEAT_DELAY) scheduler.clearTimeout(autorepeat)
scheduler.clearInterval(AUTOREPEAT_DELAY) scheduler.clearInterval(autorepeat)
} }
} }
@ -673,12 +661,12 @@ function keyDownHandler(e) {
action() action()
if (REPEATABLE_ACTIONS.includes(action)) { if (REPEATABLE_ACTIONS.includes(action)) {
actionsToRepeat.unshift(action) actionsToRepeat.unshift(action)
scheduler.clearTimeout(AUTOREPEAT_DELAY) scheduler.clearTimeout(autorepeat)
scheduler.clearInterval(AUTOREPEAT_DELAY) scheduler.clearInterval(autorepeat)
if (action == softDrop) if (action == softDrop)
scheduler.setInterval(AUTOREPEAT_DELAY, stats.fallPeriod / 20) scheduler.setInterval(autorepeat, stats.fallPeriod / 20)
else else
scheduler.setTimeout(AUTOREPEAT_DELAY, autorepeatDelay) scheduler.setTimeout(autorepeat, autorepeatDelay)
} }
} }
} }
@ -691,8 +679,8 @@ function keyUpHandler(e) {
if (actionsToRepeat.includes(action)) { if (actionsToRepeat.includes(action)) {
actionsToRepeat.splice(actionsToRepeat.indexOf(action), 1) actionsToRepeat.splice(actionsToRepeat.indexOf(action), 1)
if (!actionsToRepeat.length) { if (!actionsToRepeat.length) {
scheduler.clearTimeout(AUTOREPEAT_DELAY) scheduler.clearTimeout(autorepeat)
scheduler.clearInterval(AUTOREPEAT_DELAY) scheduler.clearInterval(autorepeat)
} }
} }
} }
@ -742,7 +730,7 @@ function hold() {
scheduler.clearInterval(lockDown) scheduler.clearInterval(lockDown)
var shape = matrix.piece.shape var shape = matrix.piece.shape
matrix.piece = holdQueue.piece matrix.piece = holdQueue.piece
holdQueue.piece = new Tetromino(POSITION.HELD_PIECE, shape) holdQueue.piece = new Tetromino(HOLD.PIECE_POSITION, shape)
holdQueue.piece.holdEnabled = false holdQueue.piece.holdEnabled = false
holdQueue.draw() holdQueue.draw()
generationPhase(matrix.piece) generationPhase(matrix.piece)
@ -752,10 +740,11 @@ function hold() {
function pause() { function pause() {
state = STATE.PAUSED state = STATE.PAUSED
stats.startTime = performance.now() - stats.startTime
actionsToRepeat = [] actionsToRepeat = []
scheduler.clearInterval(lockPhase) scheduler.clearInterval(lockPhase)
scheduler.clearTimeout(lockDown) scheduler.clearTimeout(lockDown)
scheduler.clearTimeout(AUTOREPEAT_DELAY) scheduler.clearTimeout(autorepeat)
scheduler.clearInterval(clock) scheduler.clearInterval(clock)
holdQueue.draw() holdQueue.draw()
matrix.draw() matrix.draw()
@ -766,6 +755,7 @@ function pause() {
function resume() { function resume() {
if (document.getElementById("game").style.display == "grid") { if (document.getElementById("game").style.display == "grid") {
state = STATE.PLAYING state = STATE.PLAYING
stats.startTime = performance.now() - stats.startTime
messageDiv.innerHTML = "" messageDiv.innerHTML = ""
scheduler.setInterval(lockPhase, stats.fallPeriod) scheduler.setInterval(lockPhase, stats.fallPeriod)
if (matrix.piece.locked) if (matrix.piece.locked)
@ -795,8 +785,8 @@ function delTempTexts(self) {
} }
} }
function clock() { function clock(timestamp) {
stats.timeCell.innerText = timeFormat(1000 * ++stats.time) stats.timeCell.innerText = timeFormat(1000 * ++stats.time)
} }
function getKeyName(action) { function getKeyName(action) {
@ -818,7 +808,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_DELAY autorepeatDelay = localStorage.getItem("autorepeatDelay") || DELAY.autorepeat
autorepeatPeriod = localStorage.getItem("autorepeatPeriod") || DELAY.AUTOREPEAT_PERIOD autorepeatPeriod = localStorage.getItem("autorepeatPeriod") || DELAY.AUTOREPEAT_PERIOD
theme = localStorage.getItem("theme") || DEFAULT_THEME theme = localStorage.getItem("theme") || DEFAULT_THEME
@ -849,7 +839,7 @@ function showSettings() {
document.getElementById("set-pause-key" ).innerHTML = replaceSpace(getKeyName("pause")) document.getElementById("set-pause-key" ).innerHTML = replaceSpace(getKeyName("pause"))
document.getElementById("autorepeatDelayRange").value = autorepeatDelay document.getElementById("autorepeatDelayRange").value = autorepeatDelay
document.getElementById("autorepeatDelayRangeLabel").innerText = `Délai : ${autorepeatDelay}ms` document.getElementById("autorepeatDelayRangeLabel").innerText = `Délai initial : ${autorepeatDelay}ms`
document.getElementById("autorepeatPeriodRange").value = autorepeatPeriod document.getElementById("autorepeatPeriodRange").value = autorepeatPeriod
document.getElementById("autorepeatPeriodRangeLabel").innerText = `Période : ${autorepeatPeriod}ms` document.getElementById("autorepeatPeriodRangeLabel").innerText = `Période : ${autorepeatPeriod}ms`
@ -860,9 +850,24 @@ function showSettings() {
document.getElementById("settings").style.display = "block" 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("leaderboardLink").style.display = "none"
document.getElementById("settingsButton").style.display = "none" document.getElementById("settingsButton").style.display = "none"
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() { function hideSettings() {
@ -871,15 +876,15 @@ function hideSettings() {
case STATE.WAITING: case STATE.WAITING:
document.getElementById("game").style.display = "none" document.getElementById("game").style.display = "none"
document.getElementById("settings").style.display = "none" document.getElementById("settings").style.display = "none"
document.getElementById("start").style.display = "grid" document.getElementById("start").style.display = "block"
document.getElementById("settingsButton").style.display = "none" document.getElementById("settingsButton").style.display = "flex"
document.getElementById("leaderboardLink").style.display = "flex" document.getElementById("leaderboardLink").style.display = "flex"
break break
case STATE.GAME_OVER: case STATE.GAME_OVER:
document.getElementById("game").style.display = "grid" document.getElementById("game").style.display = "grid"
document.getElementById("settings").style.display = "none" document.getElementById("settings").style.display = "none"
document.getElementById("start").style.display = "grid" document.getElementById("start").style.display = "block"
document.getElementById("settingsButton").style.display = "none" document.getElementById("settingsButton").style.display = "flex"
document.getElementById("leaderboardLink").style.display = "flex" document.getElementById("leaderboardLink").style.display = "flex"
break break
case STATE.PAUSED: case STATE.PAUSED:
@ -912,7 +917,7 @@ function changeKey(e) {
function autorepeatDelayChanged() { function autorepeatDelayChanged() {
autorepeatDelay = document.getElementById("autorepeatDelayRange").value autorepeatDelay = document.getElementById("autorepeatDelayRange").value
localStorage.setItem("autorepeatDelay", autorepeatDelay) localStorage.setItem("autorepeatDelay", autorepeatDelay)
document.getElementById("autorepeatDelayRangeLabel").innerText = `Délai : ${autorepeatDelay}ms` document.getElementById("autorepeatDelayRangeLabel").innerText = `Délai initial : ${autorepeatDelay}ms`
} }
function autorepeatPeriodChanged() { function autorepeatPeriodChanged() {
@ -960,9 +965,8 @@ window.onload = function() {
document.getElementById("startLevel").value = localStorage.getItem("startLevel") || 1 document.getElementById("startLevel").value = localStorage.getItem("startLevel") || 1
document.getElementById("startButton").disabled = false document.getElementById("startButton").disabled = false
document.getElementById("startButton").focus(); document.getElementById("startButton").focus()
document.getElementById("settingsButton").disabled = false document.getElementById("settingsButton").disabled = false
document.getElementById("settingsStartButton").disabled = false
messageDiv = document.getElementById("message") messageDiv = document.getElementById("message")
scheduler = new Scheduler() scheduler = new Scheduler()
@ -971,4 +975,6 @@ window.onload = function() {
matrix = new Matrix() matrix = new Matrix()
nextQueue = new NextQueue() nextQueue = new NextQueue()
themePreview = new ThemePreview() themePreview = new ThemePreview()
}
showSettings()
}

13
leaderboard.php
View File

@ -24,17 +24,12 @@
$score = number_format($row['score'], 0, ",", " "); $score = number_format($row['score'], 0, ",", " ");
echo ' <tr><th class="name">' . $i . '<td class="player">' . $row['player'] . '</td><td class="value">' . $score . "</td></tr>\n"; echo ' <tr><th class="name">' . $i . '<td class="player">' . $row['player'] . '</td><td class="value">' . $score . "</td></tr>\n";
} }
$top10->closeCursor(); $top10 = null;
$db->close(); $db = null;
?> ?>
</table> </table>
<div class="flex-container"> <div class="flex-container">
<div id="button-link"> <button onclick="window.close()">Fermer</button>
<a href="settings.php" target="_blank">OPTIONS</a>
</div>
<div id="button-link">
<a href="index.php">REJOUER</a>
</div>
</div> </div>
</body> </body>
</html> </html>