refactoring

app.js

@@ -391,7 +391,7 @@ class Settings {
         this.form = settingsForm
         this.load()
         this.modal = new bootstrap.Modal('#settingsModal')
-        document.getElementById('settingsModal').addEventListener('shown.bs.modal', () => {
+        settingsModal.addEventListener('shown.bs.modal', () => {
             resumeButton.focus()
         })
         this.init()
@@ -401,6 +401,13 @@ class Settings {
         for (let input of this.form.getElementsByTagName("input")) {
             if (localStorage[input.name]) input.value = localStorage[input.name]
         }
+        document.selectedStyleSheetSet=stylesheetSelect.value
+    }
+
+    save() {
+        for (let input of this.form.getElementsByTagName("input")) {
+            localStorage[input.name] = input.value
+        }
     }
 
     init() {
@@ -451,11 +458,18 @@ function changeKey(input) {
 
 class Stats {
     constructor() {
-        this.highScore = Number(localStorage["highScore"]) || 0
+        this.modal = new bootstrap.Modal('#statsModal')
+        this.load()
         this.init()
     }
 
+    load() {
+        this.highScore = Number(localStorage["highScore"]) || 0
+    }
+
     init() {
+        this.score = 0
+        this.goal = 0
         this.combo = 0
         this.b2b = 0
         this.startTime = new Date()
@@ -608,6 +622,25 @@ class Stats {
         this.goal -= awardedLineClears
         if (this.goal <= 0) this.level++
     }
+
+    show() {
+        let time = stats.time
+        statsModalScoreCell.innerText           = this.score.toLocaleString()
+        statsModalHighScoreCell.innerText       = this.highScore.toLocaleString()
+        statsModalLevelCell.innerText           = this.level
+        statsModalTimeCell.innerText            = this.timeFormat.format(time)
+        statsModaltotalClearedLines.innerText   = this.totalClearedLines
+        statsModaltotalClearedLinesPM.innerText = (stats.totalClearedLines * 60000 / time).toFixed(2)
+        statsModalNbQuatris.innerText           = this.nbQuatris
+        statsModalNbTSpin.innerText             = this.nbTSpin
+        statsModalMaxCombo.innerText            = this.maxCombo
+        statsModalMaxB2B.innerText              = this.maxB2B
+        this.modal.show()
+    }
+
+    save() {
+        localStorage["highScore"] = this.highScore
+    }
 }
 Stats.prototype.timeFormat = new Intl.DateTimeFormat("fr-FR", {
     minute: "2-digit",
@@ -632,7 +665,6 @@ let holdQueue = new MinoesTable("holdTable")
 let matrix = new Matrix()
 let nextQueue = new NextQueue()
 let playing = false
-let gameOverModal = new bootstrap.Modal('#gameOverModal')
 
 function pauseSettings() {
     scheduler.clearInterval(fall)
@@ -663,8 +695,6 @@ function newGame(event) {
         titleHeader.innerHTML = "PAUSE"
         resumeButton.innerHTML = "Reprendre"
         event.target.onsubmit = resume
-        stats.score = 0
-        stats.goal = 0
         stats.level = levelInput.valueAsNumber
         localStorage["startLevel"] = levelInput.value
         playing = true
@@ -860,22 +890,11 @@ function gameOver() {
     scheduler.clearInterval(ticktack)
     playing = false
 
-    goScoreCell.innerText = stats.score.toLocaleString()
-    goHighScoreCell.innerText = stats.highScore.toLocaleString()
-    goLevelCell.innerText = stats.level
-    let time = stats.time
-    goTimeCell.innerText = stats.timeFormat.format(time)
-    gototalClearedLines.innerText = stats.totalClearedLines
-    gototalClearedLinesPM.innerText = (stats.totalClearedLines * 60000 / time).toFixed(2)
-    goNbQuatris.innerText = stats.nbQuatris
-    goNbTSpin.innerText = stats.nbTSpin
-    goMaxCombo.innerText = stats.maxCombo
-    goMaxB2B.innerText = stats.maxB2B
-    gameOverModal.show()
+    stats.show()
 }
 
 function restart() {
-    gameOverModal.hide()
+    stats.modal.hide()
     holdQueue.init()
     stats.init()
     matrix.init()
@@ -886,10 +905,8 @@ function restart() {
 }
 
 window.onbeforeunload = function(event) {
-    localStorage["highScore"] = stats.highScore
-    for (let input of settings.form.getElementsByTagName("input")) {
-        localStorage[input.name] = input.value
-    }
+    stats.save()
+    settings.save()
     if (playing) return false;
 }
 

css/retro.css

@@ -7,8 +7,11 @@
     src: url("retro/Early GameBoy.ttf");
 }
 
-body {
+#screenRow {
     background-image: url("retro/dark-bg.png");
+    padding: 40px;
+    border: 3px inset black;
+    border-radius: 10px;
 }
 
 .card {

index.html

@@ -5,13 +5,13 @@
     <title>QUATRIS</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="color-scheme" content="dark">
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css">
-    <link href="css/common.css" rel="stylesheet">
-    <link href="css/classic.css" rel="stylesheet" title="Classique">
-    <link href="css/electro.css" rel="alternate stylesheet" title="Électro">
-    <link href="css/pop.css" rel="alternate stylesheet" title="Pop">
-    <link href="css/retro.css" rel="alternate stylesheet" title="Rétro">
+    <link rel="stylesheet" href="css/common.css">
+    <link rel="stylesheet" href="css/classic.css"title="Classique">
+    <link rel="alternate stylesheet" href="css/electro.css" title="Électro">
+    <link rel="alternate stylesheet" href="css/pop.css" title="Pop">
+    <link rel="alternate stylesheet" href="css/retro.css" title="Rétro">
     <link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
@@ -96,6 +96,18 @@
                 </div>
                 <label for="dasInput" class="col-sm-2 col-form-label" title="Delayed AutoShift : délai initial avant répétition">DAS</label>
               </fieldset>
+              <fieldset class="row g-2 mb-3 align-items-center text-center">
+                <legend class="text-start">Feuille de style</legend>
+                <label for="stylesheetSelect" class="col-sm-2 col-form-label text-center">Style</label>
+                <div class="col-sm-4">
+                  <select id="stylesheetSelect" class="form-select" onclick="document.selectedStyleSheetSet=this.value">
+                    <option selected>Classique</option>
+                    <option>Électro</option>
+                    <option>Pop</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>
                 <label for="levelInput" class="col-sm-2 col-form-label text-center">Niveau</label>
@@ -114,7 +126,7 @@
 
     <div class="container-fluid d-flex h-100 justify-content-center d-flex align-items-center">
 
-      <div class="row row-cols-auto align-items-start gap-2">
+      <div id="screenRow" class="row row-cols-auto align-items-start gap-2">
         <div class="col d-flex flex-column align-items-end">
           <div class="card mb-4">
             <div class="card-header text-center"><strong>HOLD</strong></div>
@@ -203,21 +215,21 @@
 
     </div>
 
-    <div class="modal fade" id="GameOverModal" tabindex="-1">
+    <div class="modal fade" id="statsModal" tabindex="-1">
       <div class="modal-dialog modal-dialog-centered">
         <div class="modal-dialog">
           <div class="modal-content">
             <div class="modal-header">
-              <h1 class="modal-title w-100 text-center">Fin</h1>
+              <h2 class="modal-title w-100 text-center">Fin</h2>
               <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
             </div>
             <div class="modal-body p-0">
               <table class="table mb-0">
-                <tr><th>Score</th>                    <td id="goScoreCell"></td>         <th>Niveau</th>                  <td id="goLevelCell"></td>           </tr>
-                <tr><th>Meilleur score</th>           <td id="goHighScoreCell"></td>     <th>Temps</th>                   <td id="goTimeCell"></td>            </tr>
-                <tr><th>Lignes</th>                   <td id="gototalClearedLines"></td> <th>Lignes par minutes</th>      <td id="gototalClearedLinesPM"></td> </tr>
-                <tr><th>Quatris</th>                  <td id="goNbQuatris"></td>         <th>Pirouettes</th>              <td id="goNbTSpin"></td>             </tr>
-                <tr><th>Plus grand enchaînement</th>  <td id="goMaxCombo"></td>          <th>Plus grand bout à bout</th>  <td id="goMaxB2B"></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 minutes</th>      <td id="statsModaltotalClearedLinesPM"></td> </tr>
+                <tr><th>Quatris</th>                  <td id="statsModalNbQuatris"></td>         <th>Pirouettes</th>              <td id="statsModalNbTSpin"></td>             </tr>
+                <tr><th>Plus grand enchaînement</th>  <td id="statsModalMaxCombo"></td>          <th>Plus grand bout à bout</th>  <td id="statsModalMaxB2B"></td>              </tr>
               </table>
             </div>
             <div class="modal-footer">