css/common.css

@@ -41,7 +41,7 @@ body {
         transform: translateY(2px);
     }
 }
-.hard-dropped-table-animation {
+#matrixTable.hard-dropped-table-animation {
     animation: hard-dropped-table-animation .2s;
 }
 

css/pop.css

@@ -3,14 +3,6 @@ body {
     background-size: cover;
 }
 
-body[data-bs-theme="dark"] {
-    --bs-body-bg: #2125296b;
-}
-
-.btn-dark {
-    --bs-btn-bg: #2125296b;
-}
-
 .card {
     background-color: rgba(37, 41, 45, 50%);
 }

index.html

@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css">
     <link rel="stylesheet" href="css/common.css">
     <link rel="stylesheet" href="css/classic.css" id="selectedStyleSheet">
-    <link rel="alternate stylesheet" href="css/classic.css" title="Classique">
+    <link rel="alternate stylesheet" href="css/classic.css" title="Classique" id="">
     <link rel="alternate stylesheet" href="css/minimal.css" title="Minimal">
     <link rel="alternate stylesheet" href="css/electro.css" title="Électro">
     <link rel="alternate stylesheet" href="css/pop.css" title="Pop">
@@ -63,8 +63,8 @@
                 <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>
                   <option value="css/minimal.css">Minimal</option>
-                  <option value="css/pop.css">Pop</option>
-                  <option value="css/electro.css">Électro</option>
+                  <option value="css/electro.css">Pop</option>
+                  <option value="css/pop.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>

js/game_logic.js

@@ -44,6 +44,29 @@ const FACING = {
     WEST:  3,
 }
 
+const KEY_NAMES = new Proxy({
+    ["ArrowLeft"]   : "←",
+    ["←"]           : "ArrowLeft",
+    ["ArrowRight"]  : "→",
+    ["→"]           : "ArrowRight",
+    ["ArrowUp"]     : "↑",
+    ["↑"]           : "ArrowUp",
+    ["ArrowDown"]   : "↓",
+    ["↓"]           : "ArrowDown",
+    [" "]           : "Espace",
+    ["Espace"]      : " ",
+    ["Escape"]      : "Échap.",
+    ["Échap."]      : "Escape",
+    ["Backspace"]   : "Ret. arrière",
+    ["Ret. arrière"]: "Backspace",
+    ["Enter"]       : "Entrée",
+    ["Entrée"]      : "Enter",
+}, {
+    get(obj, keyName) {
+        return keyName in obj? obj[keyName] : keyName
+    }
+})
+
 /* Customize Array to be use as position */
 Object.defineProperties(Array.prototype, {
     "x": {

js/interface.js

@@ -1,26 +1,3 @@
-const KEY_NAMES = new Proxy({
-    ["ArrowLeft"]   : "←",
-    ["←"]           : "ArrowLeft",
-    ["ArrowRight"]  : "→",
-    ["→"]           : "ArrowRight",
-    ["ArrowUp"]     : "↑",
-    ["↑"]           : "ArrowUp",
-    ["ArrowDown"]   : "↓",
-    ["↓"]           : "ArrowDown",
-    [" "]           : "Espace",
-    ["Espace"]      : " ",
-    ["Escape"]      : "Échap.",
-    ["Échap."]      : "Escape",
-    ["Backspace"]   : "Ret. arrière",
-    ["Ret. arrière"]: "Backspace",
-    ["Enter"]       : "Entrée",
-    ["Entrée"]      : "Enter",
-}, {
-    get(obj, keyName) {
-        return keyName in obj? obj[keyName] : keyName
-    }
-})
-
 class Settings {
     constructor() {
         this.form = settingsForm