From 6d95acddd2d889c14afdbae862313852b5c40ff2 Mon Sep 17 00:00:00 2001
From: adrien <adrien@malingrey.fr>
Date: Mon, 11 Dec 2023 23:14:26 +0100
Subject: [PATCH] fix autorepeat and volume save

---
 css/classic.css  |  3 ++-
 css/common.css   |  7 ++++++-
 index.html       | 32 ++++++++++++++------------------
 js/app.js        | 22 +++++++++++-----------
 js/game_logic.js |  8 ++++----
 js/interface.js  |  2 +-
 6 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/css/classic.css b/css/classic.css
index d3a2897..9fc8ea6 100644
--- a/css/classic.css
+++ b/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%),
diff --git a/css/common.css b/css/common.css
index ba11dc0..c602d8d 100644
--- a/css/common.css
+++ b/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;
-}
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index cc5cd7e..06b198f 100644
--- a/index.html
+++ b/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">
diff --git a/js/app.js b/js/app.js
index 20fc8d0..d044ed2 100644
--- a/js/app.js
+++ b/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 {
diff --git a/js/game_logic.js b/js/game_logic.js
index 6c81874..2f0a74c 100644
--- a/js/game_logic.js
+++ b/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()
         }
     }
     
diff --git a/js/interface.js b/js/interface.js
index 4de2497..2664932 100644
--- a/js/interface.js
+++ b/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++