app.js

@@ -17,11 +17,11 @@ const T_SPIN = {
     T_SPIN: "PIROUETTE"
 }
 
-// score = AWARDED_LINE_CLEARS[tSpin][nbClearedLines]
-const AWARDED_LINE_CLEARS = {
-    [T_SPIN.NONE]:   [0, 1, 3, 5, 8],
-    [T_SPIN.MINI]:   [1, 2],
-    [T_SPIN.T_SPIN]: [4, 8, 12, 16]
+// score = SCORES[tSpin][nbClearedLines]
+const SCORES = {
+    [T_SPIN.NONE]:   [0, 100, 300, 500, 800],
+    [T_SPIN.MINI]:   [100, 200],
+    [T_SPIN.T_SPIN]: [400, 800, 1200, 1600]
 }
 
 const CLEARED_LINES_NAMES = [
@@ -159,8 +159,8 @@ MinoesTable.prototype.init_center = [2, 2]
 
 
 class NextQueue extends MinoesTable {
-    constructor() {
-        super("nextTable")
+    constructor(id) {
+        super(id)
         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 Matrix extends MinoesTable {
-    constructor() {
-        super("matrixTable")
+class PlayfieldMatrix extends MinoesTable {
+    constructor(id, piece_init_position) {
+        super(id, piece_init_position)
         this.blocks = Array(this.rows).fill().map(() => Array(this.columns))
     }
 
@@ -226,7 +226,7 @@ class Matrix extends MinoesTable {
         }
     }
 }
-Matrix.prototype.init_center = [5, 4]
+PlayfieldMatrix.prototype.init_center = [5, 4]
 
 
 class Tetromino {
@@ -377,7 +377,9 @@ Z.prototype.minoesPosition = [
 class Settings {
     constructor() {
         this.form = settingsForm
-        this.load()
+        for (let input of this.form.getElementsByTagName("input")) {
+            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', () => {
@@ -386,19 +388,6 @@ 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
         }
@@ -495,8 +484,7 @@ class Stats {
 
     lockDown(nbClearedLines, tSpin) {
         // Cleared lines & T-Spin
-        let awardedLineClears = AWARDED_LINE_CLEARS[tSpin][nbClearedLines]
-        let patternScore = 100 * this.level * awardedLineClears
+        let patternScore = SCORES[tSpin][nbClearedLines] * this.level
         if (tSpin) messagesSpan.addNewChild("div", {
             className: "rotate-in-animation",
             innerHTML: tSpin
@@ -569,7 +557,7 @@ class Stats {
             this.b2b = -1
         }
 
-        this.goal -= awardedLineClears
+        this.goal -= nbClearedLines
         if (this.goal <= 0) this.level++
     }
 }
@@ -593,16 +581,12 @@ let scheduler = new Scheduler()
 let settings = new Settings()
 let stats = new Stats()
 let holdQueue = new MinoesTable("holdTable")
-let matrix = new Matrix()
-let nextQueue = new NextQueue()
+let matrix = new PlayfieldMatrix("matrixTable")
+let nextQueue = new NextQueue("nextTable")
 let playing = false
 
-function init() {
 
-}
-
-
-function pauseSettings() {
+function pause() {
     scheduler.clearInterval(fall)
     scheduler.clearTimeout(lockDown)
     scheduler.clearTimeout(repeat)
@@ -612,11 +596,14 @@ function pauseSettings() {
 
     document.onkeydown = null
 
-    settings.show()
+    resumeButton.disabled = false
+    settings.form.classList.remove('was-validated')
+    settings.modal.show()
+    settings.form.reportValidity()
 }
-onblur = pauseSettings
+onblur = pause
 
-pauseSettings()
+pause()
 
 function newGame(event) {
     if (!settings.form.checkValidity()) {
@@ -643,20 +630,17 @@ 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()
     }
@@ -710,7 +694,7 @@ let playerActions = {
         }
     },
     
-    pause: pauseSettings,
+    pause: pause,
 }
 
 // Handle player inputs
@@ -840,7 +824,6 @@ 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/classic.css" rel="stylesheet" title="Classique">
-    <link href="css/electro.css" rel="alternate stylesheet" title="Électro">
-    <link href="css/new-wave.css" rel="alternate stylesheet" title="New Wave">
+    <link href="css/99.css" rel="stylesheet" title="99">
+    <link href="css/effect.css" rel="alternate stylesheet" title="Effet">
+    <link href="css/neon.css" rel="alternate stylesheet" title="Néon">
     <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">