From e7246c0a5d302f1b0591334c7716f059e23e2136 Mon Sep 17 00:00:00 2001
From: adrien <adrien@malingrey.fr>
Date: Thu, 7 Dec 2023 21:29:48 +0100
Subject: [PATCH] fix styleSheet change on chrome

---
 index.html | 15 ++++++++-------
 js/app.js  |  4 ++--
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index a20c1ab..205c5c3 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,8 @@
     <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 rel="stylesheet" href="css/common.css">
-    <link rel="stylesheet" href="css/classic.css" title="Classique">
+    <link rel="stylesheet" href="css/classic.css" id="selectedStyleSheet">
+    <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">
@@ -59,12 +60,12 @@
               <fieldset class="row g-2 mb-3 align-items-center text-center">
                 <legend class="text-start">Interface</legend>
                 <label for="stylesheetSelect" class="col-2 col-form-label">Thème</label>
-                <div class="col-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>
+                <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/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>
                 <label for="sfxVolumeRange" class="col-2 col-form-label">Volume</label>
diff --git a/js/app.js b/js/app.js
index b109eea..67af0e6 100644
--- a/js/app.js
+++ b/js/app.js
@@ -9,7 +9,7 @@ let lastActionSucceded = true
 let favicon
 
 window.onload = function(event) {
-    document.selectedStyleSheetSet = stylesheetSelect.value
+    selectedStyleSheet.href = stylesheetSelect.value
     favicon = document.querySelector("link[rel~='icon']")
 
     restart()
@@ -120,7 +120,7 @@ let playerActions = {
         scheduler.clearTimeout(lockDown)
         playSound(hardDropSound)
         while (matrix.piece.move(TRANSLATION.DOWN, ROTATION.NONE, true)) stats.score += 2
-        matrix.table.classList.add("hard-dropped-table-animation")
+        matrixCard.classList.add("hard-dropped-table-animation")
         lockDown(true)
         return true
     },