3D light

css/common.css

@@ -1,6 +1,6 @@
 :root {
     --cell-side: 24px;
-    --rX: -15deg;
+    --rX: -15;
     --rY: 0;
     --tZ: 25px;
 }

css/stereo.css

@@ -29,8 +29,11 @@ body {
 }
 
 #screenRow {
+  --light-x: calc(0.5 - var(--rY) / 90);
+  --light-y: calc(0.5 - var(--rX) / 90);
+  --light-z: 1;
   display: block;
-  transform: translateZ(var(--tZ)) rotateX(var(--rX)) rotateY(var(--rY));
+  transform: translateZ(var(--tZ)) rotateX(calc((var(--rX)) * 1deg)) rotateY(calc((var(--rY)) * 1deg));
 }
 
 #screenRow * {
@@ -95,9 +98,22 @@ tr.matrix td:not(.mino) {
   overflow: visible;
 }
 
-.minoes-table .mino {
+.minoes-table .mino,
-  background: radial-gradient(circle at -150% -200%, #fffb 0%, var(--background-color) 100%);
+.minoes-table .mino::before,
-
+.minoes-table .mino + :not(.mino)::before,
+.minoes-table .mino::after {
+  --light: calc(
+    0.9
+    + (var(--light-y) * 0.3)
+    + (var(--light-x) * 0.2)
+  );
+  --center-color: hsla(var(--h), var(--s), calc(var(--l) * var(--light)), var(--a));
+  --edge-color: hsla(var(--h), var(--s), calc(var(--l) * (var(--light) * 0.8)), var(--a));
+  background: radial-gradient(
+    circle at calc(35% + var(--light-x) * 10%) calc(35% + var(--light-y) * 10%),
+    var(--center-color) 0%,
+    var(--edge-color) 100%
+  );
   border-radius: 2px;
 }
 
@@ -109,108 +125,215 @@ tr.matrix td:not(.mino) {
   top: 0;
   left: 0;
   display: block;
-  width: inherit;
+  width: var(--cell-side);
-  height: inherit;
+  height: var(--cell-side);
-  border-radius: 2px;
 }
 
-.minoes-table :not(.mino) + .mino::before,
+.minoes-table .mino::before,
-.left .minoes-table .mino + .mino::before {
-  background: var(--light-color);
-}
-
-.right .minoes-table .mino + .mino::before,
-.minoes-table .mino + :not(.mino)::before {
-  background: var(--dark-color);
-}
-
-.minoes-table :not(.mino) + .mino::before,
-.minoes-table .mino + .mino::before,
 .minoes-table .mino + :not(.mino)::before {
+  --light: calc(
+    1.1
+    + (var(--light-x) * 0.5)
+    + (var(--light-y) * 0.1)
+  );
   transform: translateZ(calc(-1 * var(--cell-side))) rotateY(-90deg);
   transform-origin: left;
 }
 
+.right .minoes-table .mino::before,
+.right .minoes-table .mino + :not(.mino)::before {
+  --light: calc(
+    0.85
+    + (var(--light-x) * -0.5)
+    + (var(--light-y) * -0.1)
+  );
+  filter: saturate(0.95);
+  transform: translateZ(calc(-1 * var(--cell-side))) rotateY(-90deg);
+  transform-origin: left;
+}
+
+.right .minoes-table .mino:last-child::before {
+  transform: translateZ(calc(-1 * var(--cell-side))) rotateY(90deg) !important;
+  transform-origin: right !important;
+}
+
 .minoes-table .mino::after {
-  background: var(--light-color);
+  --light: calc(
+    0.9
+    + (var(--light-y) * 0.6)
+  );
   transform: translateZ(calc(-1 * var(--cell-side))) rotateX(90deg);
   transform-origin: top;
 }
 
 .bottom .minoes-table .mino::after {
-  background: var(--dark-color);
+  --light: calc(
+    0.75
+    + (var(--light-y) * -0.6)
+  );
+  filter: saturate(0.95);
   transform: translateZ(calc(-1 * var(--cell-side))) rotateX(-90deg);
   transform-origin: bottom;
 }
 
 .I.mino,
 .I.mino + :not(.mino) {
-  --background-color: #42afe1b0;
+  --h: 200deg;
-  --light-color: #6ceaff80;
+  --s: 70%;
-  --dark-color: #00a4b0b0;
+  --l: 52%;
+  --a: 0.85;
 }
 
 .J.mino,
 .J.mino + :not(.mino) {
-  --background-color: #1165b5b0;
+  --h: 210deg;
-  --light-color: #339bff80;
+  --s: 78%;
-  --dark-color: #00009db0;
+  --l: 52%;
+  --a: 0.85;
 }
 
 .L.mino,
 .L.mino + :not(.mino) {
-  --background-color: #f38927b0;
+  --h: 28deg;
-  --light-color: #ffba5980;
+  --s: 85%;
-  --dark-color: #c54800b0;
+  --l: 52%;
+  --a: 0.85;
 }
 
 .O.mino,
 .O.mino + :not(.mino) {
-  --background-color: #f6d03cb0;
+  --h: 48deg;
-  --light-color: #ffff7f80;
+  --s: 88%;
-  --dark-color: #ca9501b0;
+  --l: 52%;
+  --a: 0.85;
 }
 
 .S.mino,
 .S.mino + :not(.mino) {
-  --background-color: #51b84db0;
+  --h: 118deg;
-  --light-color: #84f88080;
+  --s: 45%;
-  --dark-color: #1cbc02b0;
+  --l: 52%;
+  --a: 0.85;
 }
 
 .T.mino,
 .T.mino + :not(.mino) {
-  --background-color: #9739a2b0;
+  --h: 293deg;
-  --light-color: #d958e980;
+  --s: 48%;
-  --dark-color: #6e019ab0;
+  --l: 52%;
+  --a: 0.85;
 }
 
 .Z.mino,
 .Z.mino + :not(.mino) {
-  --background-color: #eb4f65b0;
+  --h: 352deg;
-  --light-color: #ff7f7980;
+  --s: 75%;
-  --dark-color: #ad1936b0;
+  --l: 52%;
+  --a: 0.85;
 }
 
 .ghost.mino,
 .ghost.mino + :not(.mino) {
-  --background-color: #8886;
+  --h: 0deg;
-  --light-color: #ccc6;
+  --s: 0%;
-  --dark-color: #6666;
+  --l: 55%;
+  --a: 0.40;
 }
 
 .locking.mino,
 .locking.mino + :not(.mino) {
-  --background-color: #eeeb;
+  --h: 0deg;
-  --light-color: #fffb;
+  --s: 0%;
-  --dark-color: #dddb;
+  --l: 92%;
+  --a: 0.72;
 }
 
 .disabled.mino,
 .disabled.mino + :not(.mino) {
-  --background-color: #888b;
+  --h: 0deg;
-  --light-color: #cccb;
+  --s: 0%;
-  --dark-color: #6666;
+  --l: 45%;
+  --a: 0.72;
+}
+
+.I.mino,
+.I.mino + :not(.mino) {
+  --h: 200deg;
+  --s: 70%;
+  --l: 52%;
+  --a: 0.85;
+}
+
+.J.mino,
+.J.mino + :not(.mino) {
+  --h: 210deg;
+  --s: 78%;
+  --l: 52%;
+  --a: 0.85;
+}
+
+.L.mino,
+.L.mino + :not(.mino) {
+  --h: 28deg;
+  --s: 85%;
+  --l: 52%;
+  --a: 0.85;
+}
+
+.O.mino,
+.O.mino + :not(.mino) {
+  --h: 48deg;
+  --s: 88%;
+  --l: 52%;
+  --a: 0.85;
+}
+
+.S.mino,
+.S.mino + :not(.mino) {
+  --h: 118deg;
+  --s: 45%;
+  --l: 52%;
+  --a: 0.85;
+}
+
+.T.mino,
+.T.mino + :not(.mino) {
+  --h: 293deg;
+  --s: 48%;
+  --l: 52%;
+  --a: 0.85;
+}
+
+.Z.mino,
+.Z.mino + :not(.mino) {
+  --h: 352deg;
+  --s: 75%;
+  --l: 52%;
+  --a: 0.85;
+}
+
+.ghost.mino,
+.ghost.mino + :not(.mino) {
+  --h: 0deg;
+  --s: 0%;
+  --l: 55%;
+  --a: 0.40;
+}
+
+.locking.mino,
+.locking.mino + :not(.mino) {
+  --h: 0deg;
+  --s: 0%;
+  --l: 92%;
+  --a: 0.72;
+}
+
+.disabled.mino,
+.disabled.mino + :not(.mino) {
+  --h: 0deg;
+  --s: 0%;
+  --l: 45%;
+  --a: 0.72;
 }
 
 #holdTable .J + :not(.mino),

js/app.js

@@ -263,7 +263,7 @@ window.onbeforeunload = function(event) {
 
 // Play with 3D
 let mousedown = false
-let rX0 = 0
+let rX0 = -15
 let rY0 = 0
 let clientX0 = 0
 let clientY0 = 0
@@ -280,18 +280,18 @@ sceneDiv.onmousemove = function(event) {
 	if (mousedown) {
         event.preventDefault()
         event.stopPropagation()
-        rX = (rX0 - event.clientY + clientY0 + 360) % 360
+        rX = (rX0 - event.clientY + clientY0) % 360
-        screenRow.style.setProperty("--rX", rX + "deg")
+        screenRow.style.setProperty("--rX", rX)
-        if (rX <= 180) {
+        if (rX >= 0) {
             screenRow.classList.remove("top")
             screenRow.classList.add("bottom")
         } else {
             screenRow.classList.add("top")
             screenRow.classList.remove("bottom")
         }
-        rY = (rY0 + event.clientX - clientX0 + 360) % 360
+        rY = (rY0 + event.clientX - clientX0) % 360
-        screenRow.style.setProperty("--rY", rY + "deg")
+        screenRow.style.setProperty("--rY", rY)
-        if (rY >= 180) {
+        if (rY <= 0) {
             screenRow.classList.remove("left")
             screenRow.classList.add("right")
         } else {