adrien/quatuor
adrien/quatuor
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix autorepeat and volume save

Browse Source
This commit is contained in:
Adrien MALINGREY 2023-12-11 23:14:26 +01:00
parent 6062f6895b
commit 6d95acddd2
6 changed files with 38 additions and 36 deletions

3
css/classic.css

@ -82,8 +82,9 @@
}
.ghost.mino {
margin: 1px;
background: rgba(0, 0, 0, 10%) !important;
border: 2px solid rgba(150, 150, 150, 33%) !important;
border: 3px solid #646464 !important;
box-shadow:
-2px -2px 6px rgba(128, 128, 128, 25%),
-2px 2px 6px rgba(128, 128, 128, 25%),

7
css/common.css

@ -21,6 +21,11 @@ body {
text-shadow: 0 0 8px var(--bs-light);
}
#statsTable td,
#statsModal td {
text-align: right;
}
.minoes-table {
--piece-column: 0;
--piece-row : 0;
@ -218,4 +223,4 @@ tr.cleared-line-animation {
animation: game-over-animation;
animation-timing-function: (0.4, 0, 0.6, 1);
animation-duration: 2s;
}
}

32
index.html

@ -31,8 +31,7 @@
</div>
<div class="modal-body">
<form name="settingsForm" class="needs-validation" novalidate>
<fieldset id="keyBindFielset" class="row g-2 mb-3 align-items-center text-center">
<legend class="text-start">Commandes</legend>
<fieldset id="keyBindFielset" class="row g-2 mb-3 align-items-center text-center"><legend class="text-start">Commandes</legend>
<label for="moveLeftInput" title="Gauche" class="col-2 col-form-label d-flex align-items-center justify-content-center"><i class="bi bi-arrow-left"></i></label>
<div class="col-4"><input name="moveLeft" id="moveLeftInput" type="text" class="form-control text-center btn btn-dark" value="←" onclick="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div>
<div class="col-4"><input name="moveRight" id="moveRightInput" type="text" class="form-control text-center btn btn-dark" value="→" onclick="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div>
@ -50,15 +49,13 @@
<div class="col-4"><input name="pause" id="pauseInput" type="text" class="form-control text-center btn btn-dark" value="Échap." onclick="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div>
<label for="pauseInput" title="Pause" class="col-2 col-form-label d-flex align-items-center justify-content-center"><i class="bi bi-pause"></i></label>
</fieldset>
<fieldset id="autorepeatFieldset" class="row g-2 mb-3 align-items-center text-center">
<legend class="text-start">Répétition automatique</legend>
<fieldset id="autorepeatFieldset" class="row g-2 mb-3 align-items-center text-center"><legend class="text-start">Répétition automatique</legend>
<label for="arrInput" class="col-2 col-form-label"><abbr title="Automatic Repeat Rate : période de répétition de l'action">ARR</abbr></label>
<div class="col-4"><div class="input-group"><input name="arr" id="arrInput" type="number" class="form-control text-center" value="50" min="2" max="200" step="1"><div class="input-group-text">ms</div></div></div>
<div class="col-4"><div class="input-group"><input name="das" id="dasInput" type="number" class="form-control text-center" value="300" min="100" max="500" step="5"><div class="input-group-text">ms</div></div></div>
<label for="dasInput" class="col-2 col-form-label"><abbr title="Delayed AutoShift : délai initial avant répétition">DAS</abbr></label>
</fieldset>
<fieldset class="row g-2 mb-3 align-items-center text-center">
<legend class="text-start">Interface</legend>
<fieldset class="row g-2 mb-3 align-items-center text-center"><legend class="text-start">Interface</legend>
<label for="stylesheetSelect" class="col-2 col-form-label">Thème</label>
<div class="col-4"><select name="stylesheet" id="stylesheetSelect" class="form-select" oninput="selectedStyleSheet.href = this.value">
<option value="css/classic.css" selected>Classique</option>
@ -67,11 +64,10 @@
<option value="css/electro.css">Électro</option>
<option value="css/retro.css">Rétro</option>
</select></div>
<div class="col-4 d-flex align-items-baseline"><input id="sfxVolumeRange" class="form-range" type="range" min="0" max="1" step="any" value="0.7"></div>
<div class="col-4 d-flex align-items-baseline"><input name="sfxVolumeRange" id="sfxVolumeRange" class="form-range" type="range" min="0" max="1" step="any" value="0.7"></div>
<label for="sfxVolumeRange" class="col-2 col-form-label">Volume</label>
</fieldset>
<fieldset class="row g-2 mb-3 align-items-center text-center">
<legend class="text-start">Partie</legend>
<fieldset class="row g-2 mb-3 align-items-center text-center"><legend class="text-start">Partie</legend>
<label for="levelInput" class="col-2 col-form-label text-center">Niveau</label>
<div class="col-4">
<input name="startLevel" id="levelInput" type="number" class="form-control text-center" value="1" min="1" max="15">
@ -104,11 +100,11 @@
</div>
<div class="card shadow">
<table id="statsTable" class="table mb-0">
<tr><th>Score</th> <td id="scoreCell">0</td> </tr>
<tr><th>Score</th> <td id="scoreCell">0</td> </tr>
<tr><th>Meilleur<br/>score</th><td id="highScoreCell"><script>document.write(Number(localStorage["highScore"]) || 0)</script></td></tr>
<tr><th>Niveau</th><td id="levelCell">0</td> </tr>
<tr><th>But</th> <td id="goalCell">0</td> </tr>
<tr><th>Temps</th> <td id="timeCell">00:00</td> </tr>
<tr><th>Niveau</th> <td id="levelCell">0</td> </tr>
<tr><th>But</th> <td id="goalCell">0</td> </tr>
<tr><th>Temps</th> <td id="timeCell">00:00</td> </tr>
</table>
</div>
</div>
@ -187,11 +183,11 @@
</div>
<div class="modal-body p-0">
<table class="table mb-0">
<tr><th>Score </th><td id="statsModalScoreCell"> </td><th>Niveau </th><td id="statsModalLevelCell"> </td></tr>
<tr><th>Meilleur score</th><td id="statsModalHighScoreCell"> </td><th>Temps </th><td id="statsModalTimeCell"> </td></tr>
<tr><th>Lignes </th><td id="statsModaltotalClearedLines"></td><th>Lignes par minute </th><td id="statsModaltotalClearedLinesPM"></td></tr>
<tr><th>Quatuors </th><td id="statsModalNbQuatuors"> </td><th>Plus long combo </th><td id="statsModalMaxCombo"> </td></tr>
<tr><th>Pirouettes </th><td id="statsModalNbTSpin"> </td><th>Plus long bout en bout</th><td id="statsModalMaxB2B"> </td></tr>
<tr><th>Score</th> <td id="statsModalScoreCell"></td> <th>Niveau</th> <td id="statsModalLevelCell"></td> </tr>
<tr><th>Meilleur score</th><td id="statsModalHighScoreCell"></td> <th>Temps</th> <td id="statsModalTimeCell"></td> </tr>
<tr><th>Lignes</th> <td id="statsModaltotalClearedLines"></td><th>Lignes par minute</th> <td id="statsModaltotalClearedLinesPM"></td></tr>
<tr><th>Quatuors</th> <td id="statsModalNbQuatuors"></td> <th>Plus long combo</th> <td id="statsModalMaxCombo"></td> </tr>
<tr><th>Pirouettes</th> <td id="statsModalNbTSpin"></td> <th>Plus long bout en bout</th><td id="statsModalMaxB2B"></td> </tr>
</table>
</div>
<div class="modal-footer">

22
js/app.js

@ -122,7 +122,7 @@ let playerActions = {
playSound(hardDropSound)
while (matrix.piece.move(TRANSLATION.DOWN, ROTATION.NONE, true)) stats.score += 2
matrixCard.classList.add("hard-dropped-table-animation")
lockDown(true)
lockDown()
return true
},
@ -162,7 +162,7 @@ function onkeydown(event) {
if (action()) {
lastActionSucceded = true
} else if (lastActionSucceded || !(action in REPEATABLE_ACTIONS)) {
wallSound.play()
playSound(wallSound)
lastActionSucceded = false
}
if (REPEATABLE_ACTIONS.includes(action)) {
@ -189,7 +189,7 @@ function autorepeat() {
if (actionsQueue[0]()) {
lastActionSucceded = true
} else if (lastActionSucceded) {
wallSound.play()
playSound(wallSound)
lastActionSucceded = false
}
}
@ -203,9 +203,12 @@ function onkeyup(event) {
action = settings.keyBind[event.key]
if (actionsQueue.includes(action)) {
actionsQueue.splice(actionsQueue.indexOf(action), 1)
if (!actionsQueue.length) {
scheduler.clearTimeout(repeat)
scheduler.clearInterval(autorepeat)
scheduler.clearTimeout(repeat)
scheduler.clearInterval(autorepeat)
if (actionsQueue.length) {
if (action == playerActions.softDrop) scheduler.setInterval(autorepeat, settings.fallPeriod/20)
else scheduler.setTimeout(repeat, settings.das)
} else {
matrix.drawPiece()
}
}
@ -216,15 +219,12 @@ function fall() {
matrix.piece.move(TRANSLATION.DOWN)
}
function lockDown(hardDropped=false) {
function lockDown() {
scheduler.clearTimeout(lockDown)
scheduler.clearInterval(fall)
if (lastActionSucceded && !hardDropped) playSound(wallSound)
if (matrix.lock()) {
let tSpin = matrix.piece.tSpin
let nbClearedLines = matrix.clearLines()
stats.lockDown(nbClearedLines, tSpin)
stats.lockDown(matrix.piece.tSpin, matrix.clearLines())
generate()
} else {

8
js/game_logic.js

@ -327,10 +327,10 @@ class Tetromino {
matrix.drawPiece()
return true
} else if (!hardDropped && translation == TRANSLATION.DOWN) {
this.locked = true
if (!scheduler.timeoutTasks.has(lockDown))
scheduler.setTimeout(lockDown, stats.lockDelay)
matrix.drawPiece()
this.locked = true
if (!scheduler.timeoutTasks.has(lockDown))
scheduler.setTimeout(lockDown, stats.lockDelay)
matrix.drawPiece()
}
}

2
js/interface.js

@ -194,7 +194,7 @@ class Stats {
return new Date() - this.startTime
}
lockDown(nbClearedLines, tSpin) {
lockDown(tSpin, nbClearedLines) {
this.totalClearedLines += nbClearedLines
if (nbClearedLines == 4) this.nbQuatuors++
if (tSpin == T_SPIN.T_SPIN) this.nbTSpin++