css/electro.css

@@ -19,9 +19,11 @@ body[data-bs-theme="dark"] {
     padding: 1px;
     position: relative;
     z-index: 0;
-    border-radius: 4px;
-    background-color: rgba(128, 128, 128, 25%);
-    box-shadow: 0px 0px 8px rgba(128, 128, 128, 75%);
+    box-shadow:
+        -1px -1px 4px rgba(128, 128, 128, 25%),
+        -1px  1px 4px rgba(128, 128, 128, 25%),
+         1px -1px 4px rgba(128, 128, 128, 25%),
+         1px  1px 4px rgba(128, 128, 128, 25%);
 }
 
 .mino:not(.ghost):not(.locking):before {
@@ -29,7 +31,7 @@ body[data-bs-theme="dark"] {
     position: absolute;
     z-index: -1;
     inset: 0;
-    margin: 1px 1px 0px 0px;
+    margin: 1px;
     padding: 2px;
     border-radius: 4px;
     --glint-x: calc(50% + 50% * (var(--piece-column) - var(--column))/10);
@@ -49,11 +51,19 @@ body[data-bs-theme="dark"] {
     background: transparent;
     border: 1px solid rgba(255, 255, 255, 0.3);
     border-radius: 3px;
-    box-shadow: 0px 0px 10px rgba(242, 255, 255, 75%);
+    box-shadow:
+        -1px -1px 8px rgba(242, 255, 255, 32%),
+        -1px  1px 8px rgba(242, 255, 255, 32%),
+         1px -1px 8px rgba(242, 255, 255, 32%),
+         1px  1px 8px rgba(242, 255, 255, 32%);
 }
 
 .moving.mino {
-    box-shadow: 0px 0px 5px rgba(128, 128, 128, 75%);
+    box-shadow:
+        -1px -1px 5px rgba(128, 128, 128, 35%),
+        -1px  1px 5px rgba(128, 128, 128, 35%),
+         1px -1px 5px rgba(128, 128, 128, 35%),
+         1px  1px 5px rgba(128, 128, 128, 35%);
 }
 
 .moving.mino:not(.locking) {
@@ -68,7 +78,11 @@ body[data-bs-theme="dark"] {
     background: rgba(186, 211, 255, 70%);
     border-color: rgba(242, 255, 255, 0.7);
     border-radius: 4px;
-    box-shadow: 0px 0px 10px rgba(242, 255, 255, 100%);
+    box-shadow:
+        -1px -1px 8px rgba(242, 255, 255, 32%),
+        -1px  1px 8px rgba(242, 255, 255, 32%),
+         1px -1px 8px rgba(242, 255, 255, 32%),
+         1px  1px 8px rgba(242, 255, 255, 32%);
 }
 
 @keyframes locked-animation {

js/interface.js

@@ -16,8 +16,8 @@ const KEY_NAMES = new Proxy({
     ["Enter"]       : "Entrée",
     ["Entrée"]      : "Enter",
 }, {
-    get(target, key) {
-        return key in target? target[key] : key
+    get(obj, keyName) {
+        return keyName in obj? obj[keyName] : keyName
     }
 })
 
@@ -64,12 +64,7 @@ class Settings {
             this[input.name] = input.checked == true
         }
     
-        this.keyBind = new Proxy({}, {
-            get: (target, key) => target[key.toLowerCase()],
-            set: (target, key, value) => target[key.toLowerCase()] = value,
-            has: (target, key) => key.toLowerCase() in target
-            
-        })
+        this.keyBind = {}
         for (let actionName in playerActions) {
             this.keyBind[settings[actionName]] = playerActions[actionName]
         }