bug fixes

arthur-adriansens · Jan 6, 2024 · b6c22e7 · b6c22e7
1 parent 8e3be7d
commit b6c22e7
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 10 deletions.
diff --git a/src/js/piece.js b/src/js/piece.js
@@ -67,7 +67,7 @@ class Piece {
         }
 
         // color
-        ctx.fillStyle = clearTrail ? "white" : colors[this.piece];
+        ctx.fillStyle = clearTrail ? bgColor : colors[this.piece];
 
         // fill blocks
         for (let i in shape) {

diff --git a/src/js/setup.js b/src/js/setup.js
@@ -43,6 +43,7 @@ let speed = 40 - Number(speedIcon.dataset.state) * 10;
 let auto_speed = 750;
 let username = window.localStorage.getItem("username");
 let startScreen = false;
+let bgColor = window.getComputedStyle(document.querySelector(".main_layout")).backgroundColor;
 
 // event listeners
 throphy_logo.onload = () => {
@@ -110,6 +111,7 @@ window.onload = () => {
             document.body.classList.toggle("dark");
 
             localStorage.setItem("theme", document.body.classList.contains("dark") ? "dark" : "light");
+            bgColor = window.getComputedStyle(document.querySelector(".main_layout")).backgroundColor;
         });
     }
 };

diff --git a/src/style-dark.css b/src/style-dark.css
@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Comfortaa&family=DM+Mono&family=Press+Start+2P&display=swap');
-
 /* SETUP */
 :root {
     /*todo let them choose different black background shades*/
@@ -69,7 +67,7 @@
     transition: fill 1s, opacity 1s, filter 1s;
 }
 
-.dark img.settingIcon2:hover {
+.dark .settingIcon2:hover {
     filter: brightness(200%);
 }
 

diff --git a/src/style.css b/src/style.css
@@ -216,7 +216,7 @@ p {
 }
 
 .left.column>div {
-    border-left: none;
+    border-left: none !important;
     border-bottom-left-radius: 0px;
     border-top-left-radius: 0px;
 }
@@ -342,18 +342,17 @@ input.rang:invalid {
     right: 0;
     position: absolute;
     margin: 10px;
-    transition: fill 1s;
+    transition: fill 1s, opacity 1s, filter 1s;
     user-select: none;
 }
 
 .settingIcon2 {
     margin-top: 5px;
     margin-bottom: 5px;
     opacity: var(--settingsOpacity);
-    transition: opacity 1s, filter 1s;
 }
 
-img.settingIcon2:hover {
+.settingIcon2:hover {
     filter: brightness(0%);
 }
 
@@ -372,13 +371,13 @@ img.settingIcon2:hover {
 .dropIcon,
 .resetIcon {
     fill: grey;
-    transition: fill 1s;
+    transition: fill 1s, filter 1s;
 }
 
 .settingIcon:hover,
 .dropIcon:hover,
 .resetIcon:hover {
-    fill: black;
+    filter: brightness(0%);
 }
 
 .logo {