fix autorepeat and volume save

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%),

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;

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">
+              <fieldset id="keyBindFielset" class="row g-2 mb-3 align-items-center text-center"><legend class="text-start">Commandes</legend>
-                <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">
+              <fieldset id="autorepeatFieldset" class="row g-2 mb-3 align-items-center text-center"><legend class="text-start">Répétition automatique</legend>
-                <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">
+              <fieldset class="row g-2 mb-3 align-items-center text-center"><legend class="text-start">Interface</legend>
-                <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">
+              <fieldset class="row g-2 mb-3 align-items-center text-center"><legend class="text-start">Partie</legend>
-                <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">

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)
+            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
+        stats.lockDown(matrix.piece.tSpin, matrix.clearLines())
-        let nbClearedLines = matrix.clearLines()
-        stats.lockDown(nbClearedLines, tSpin)
         
         generate()
     } else {

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++