refactoring

app.js

@@ -17,11 +17,11 @@ const T_SPIN = {
     T_SPIN: "PIROUETTE"
 }
 
-// score = SCORES[tSpin][nbClearedLines]
+// score = AWARDED_LINE_CLEARS[tSpin][nbClearedLines]
-const SCORES = {
+const AWARDED_LINE_CLEARS = {
-    [T_SPIN.NONE]:   [0, 100, 300, 500, 800],
+    [T_SPIN.NONE]:   [0, 1, 3, 5, 8],
-    [T_SPIN.MINI]:   [100, 200],
+    [T_SPIN.MINI]:   [1, 2],
-    [T_SPIN.T_SPIN]: [400, 800, 1200, 1600]
+    [T_SPIN.T_SPIN]: [4, 8, 12, 16]
 }
 
 const CLEARED_LINES_NAMES = [
@@ -159,8 +159,8 @@ MinoesTable.prototype.init_center = [2, 2]
 
 
 class NextQueue extends MinoesTable {
-    constructor(id) {
+    constructor() {
-        super(id)
+        super("nextTable")
         this.pieces = this.init_centers.map(center => {
             let piece = new Tetromino.pick()
             piece.center = Array.from(center)
@@ -188,9 +188,9 @@ class NextQueue extends MinoesTable {
 NextQueue.prototype.init_centers = [[2, 2], [2, 5], [2, 8], [2, 11], [2, 14]]
 
 
-class PlayfieldMatrix extends MinoesTable {
+class Matrix extends MinoesTable {
-    constructor(id, piece_init_position) {
+    constructor() {
-        super(id, piece_init_position)
+        super("matrixTable")
         this.blocks = Array(this.rows).fill().map(() => Array(this.columns))
     }
 
@@ -226,7 +226,7 @@ class PlayfieldMatrix extends MinoesTable {
         }
     }
 }
-PlayfieldMatrix.prototype.init_center = [5, 4]
+Matrix.prototype.init_center = [5, 4]
 
 
 class Tetromino {
@@ -377,9 +377,7 @@ Z.prototype.minoesPosition = [
 class Settings {
     constructor() {
         this.form = settingsForm
-        for (let input of this.form.getElementsByTagName("input")) {
+        this.load()
-            if (localStorage[input.name]) input.value = localStorage[input.name]
-        }
         this.form.onsubmit = newGame
         this.modal = new bootstrap.Modal('#settingsModal')
         document.getElementById('settingsModal').addEventListener('shown.bs.modal', () => {
@@ -388,6 +386,19 @@ class Settings {
     }
 
     load() {
+        for (let input of this.form.getElementsByTagName("input")) {
+            if (localStorage[input.name]) input.value = localStorage[input.name]
+        }
+    }
+
+    show() {
+        resumeButton.disabled = false
+        settings.form.classList.remove('was-validated')
+        settings.modal.show()
+        settings.form.reportValidity()
+    }
+
+    getInputs() {
         for (let input of keyBindFielset.getElementsByTagName("input")) {
             this[input.name] = KEY_NAMES[input.value] || input.value
         }
@@ -484,7 +495,8 @@ class Stats {
 
     lockDown(nbClearedLines, tSpin) {
         // Cleared lines & T-Spin
-        let patternScore = SCORES[tSpin][nbClearedLines] * this.level
+        let awardedLineClears = AWARDED_LINE_CLEARS[tSpin][nbClearedLines]
+        let patternScore = 100 * this.level * awardedLineClears
         if (tSpin) messagesSpan.addNewChild("div", {
             className: "rotate-in-animation",
             innerHTML: tSpin
@@ -557,7 +569,7 @@ class Stats {
             this.b2b = -1
         }
 
-        this.goal -= nbClearedLines
+        this.goal -= awardedLineClears
         if (this.goal <= 0) this.level++
     }
 }
@@ -581,12 +593,16 @@ let scheduler = new Scheduler()
 let settings = new Settings()
 let stats = new Stats()
 let holdQueue = new MinoesTable("holdTable")
-let matrix = new PlayfieldMatrix("matrixTable")
+let matrix = new Matrix()
-let nextQueue = new NextQueue("nextTable")
+let nextQueue = new NextQueue()
 let playing = false
 
+function init() {
 
-function pause() {
+}
+
+
+function pauseSettings() {
     scheduler.clearInterval(fall)
     scheduler.clearTimeout(lockDown)
     scheduler.clearTimeout(repeat)
@@ -596,14 +612,11 @@ function pause() {
 
     document.onkeydown = null
 
-    resumeButton.disabled = false
+    settings.show()
-    settings.form.classList.remove('was-validated')
-    settings.modal.show()
-    settings.form.reportValidity()
 }
-onblur = pause
+onblur = pauseSettings
 
-pause()
+pauseSettings()
 
 function newGame(event) {
     if (!settings.form.checkValidity()) {
@@ -630,17 +643,20 @@ function newGame(event) {
 function resume(event) {
     event.preventDefault()
     event.stopPropagation()
+
     settings.form.reportValidity()
     settings.form.classList.add('was-validated')
 
     if (settings.form.checkValidity()) {
-        settings.load()
         settings.modal.hide()
+        settings.getInputs()
+
         document.onkeydown = onkeydown
         document.onkeyup = onkeyup
     
         stats.time = stats.pauseTime
         scheduler.setInterval(ticktack, 1000)
+
         if (matrix.piece) scheduler.setInterval(fall, stats.fallPeriod)
         else generate()
     }
@@ -694,7 +710,7 @@ let playerActions = {
         }
     },
     
-    pause: pause,
+    pause: pauseSettings,
 }
 
 // Handle player inputs
@@ -824,6 +840,7 @@ window.onbeforeunload = function(event) {
     if (playing) return false;
 }
 
+
 if ('serviceWorker' in navigator) {
     navigator.serviceWorker.register('service-worker.js');
 }

index.html

@@ -7,9 +7,9 @@
     <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-icons@1.10.4/font/bootstrap-icons.css">
     <link href="css/common.css" rel="stylesheet">
-    <link href="css/99.css" rel="stylesheet" title="99">
+    <link href="css/classic.css" rel="stylesheet" title="Classique">
-    <link href="css/effect.css" rel="alternate stylesheet" title="Effet">
+    <link href="css/electro.css" rel="alternate stylesheet" title="Électro">
-    <link href="css/neon.css" rel="alternate stylesheet" title="Néon">
+    <link href="css/new-wave.css" rel="alternate stylesheet" title="New Wave">
     <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">