Sounds!

app.js

@@ -638,6 +638,23 @@ class Stats {
         if (nbClearedLines == 4) this.nbQuatuors++
         if (tSpin == T_SPIN.T_SPIN) this.nbTSpin++
 
+        // Sound
+        if (sfxVolumeRange.value) {
+            if (nbClearedLines == 4 || (nbClearedLines && tSpin)) {
+                quatuorSound.currentTime = 0
+                quatuorSound.volume = sfxVolumeRange.value
+                quatuorSound.play()
+            } else if (nbClearedLines) {
+                lineClearSound.currentTime = 0
+                lineClearSound.volume = sfxVolumeRange.value
+                lineClearSound.play()
+            } else if (tSpin) {
+                tSpinSound.currentTime = 0
+                lineClearSound.volume = sfxVolumeRange.value
+                tSpinSound.play()
+            }
+        }
+
         // Cleared lines & T-Spin
         let awardedLineClears = AWARDED_LINE_CLEARS[tSpin][nbClearedLines]
         let patternScore = 100 * this.level * awardedLineClears
@@ -861,6 +878,9 @@ let playerActions = {
         scheduler.clearTimeout(lockDown)
         while (matrix.piece.move(TRANSLATION.DOWN, ROTATION.NONE, "trail-animation")) stats.score +=2
         matrix.table.classList.add("hard-dropped-table-animation")
+        hardDropSound.currentTime = 0
+        hardDropSound.volume = sfxVolumeRange.value
+        hardDropSound.play()
         lockDown()
     },
 

index.html

@@ -56,18 +56,21 @@
                 <div class="col-sm-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-sm-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">Volume</legend>
+                <label for="sfxVolumeRange" class="col-sm-2 col-form-label">Effets</label>
+                <div class="col-sm-4"><input id="sfxVolumeRange" class="form-range" type="range" min="0" max="1" step="any" value="1"></div>
+              </fieldset>
               <fieldset class="row g-2 mb-3 align-items-center text-center">
                 <legend class="text-start">Interface</legend>
                 <label for="stylesheetSelect" class="col-sm-2 col-form-label">Thème</label>
-                <div class="col-sm-4">
-                  <select name="stylesheet" id="stylesheetSelect" class="form-select" oninput="document.selectedStyleSheetSet=this.value">
-                    <option selected>Classique</option>
-                    <option>Minimal</option>
-                    <option>Pop</option>
-                    <option>Électro</option>
-                    <option>Rétro</option>
-                  </select>
-                </div>
+                <div class="col-sm-4"><select name="stylesheet" id="stylesheetSelect" class="form-select" oninput="document.selectedStyleSheetSet=this.value">
+                  <option selected>Classique</option>
+                  <option>Minimal</option>
+                  <option>Pop</option>
+                  <option>Électro</option>
+                  <option>Rétro</option>
+                </select></div>
               </fieldset>
               <fieldset class="row g-2 mb-3 align-items-center text-center">
                 <legend class="text-start">Partie</legend>
@@ -207,6 +210,11 @@
       <img src="S-0.png"/><img src="S-1.png"/><img src="S-2.png"/><img src="S-3.png"/>
       <img src="T-0.png"/><img src="T-1.png"/><img src="T-2.png"/><img src="T-3.png"/>
       <img src="Z-0.png"/><img src="Z-1.png"/><img src="Z-2.png"/><img src="Z-3.png"/>
+
+      <audio id="hardDropSound"  src="sound/808T_A.wav" preload="auto" type="audio/wav"></audio>
+      <audio id="tSpinSound"     src="sound/HIGHQ_A.wav" preload="auto" type="audio/wav"></audio>
+      <audio id="lineClearSound" src="sound/HIGHQ_B.wav" preload="auto" type="audio/wav"></audio>
+      <audio id="quatuorSound"   src="sound/HIGHQ_C.wav" preload="auto" type="audio/wav"></audio>
     </span>
     
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>