3D

css/binaural.css

@@ -1,38 +1,66 @@
-body * {
+.container-fluid {
     perspective: 1000px;
 }
 
-#screenRow {
-    transform: rotate3d(-1, 0, 0, 15deg);
+.container-fluid * {
     transform-style: preserve-3d;
 }
 
+#screenRow {
+    display: block;
+    transform: rotateX(var(--rX)) rotateY(var(--rY));
+}
+
+#screenRow * {
+    display: block;
+}
+
+#screenRow .col {
+    display: inline-block !important;
+    width: max-content;
+    height: 100%;
+    vertical-align: top;
+}
+
 .card {
     background-color: #363941;
 }
 
-.minoes-table {
-    transform-style: preserve-3d;
+.minoes-table th,
+.minoes-table td {
+    display: inline-block !important;
+    width: max-content;
     transform: translateZ(var(--cell-side));
-    transform: translateZ(0);
-    will-change: transform;
 }
 
 .minoes-table tr {
-    transform-style: preserve-3d;
+    width: max-content;
+    height: var(--cell-side);
+}
+
+#statsTable tr {
+    display: table;
+    width: 100%;
+}
+
+#statsTable th,
+#statsTable td {
+    display: table-cell;
 }
 
 tr.matrix td:not(.mino) {
     border: 0;
+    will-change: transform;
+    transform: translateZ(0);
 }
 
 .minoes-table td {
-    will-change: transform;
+    width: var(--cell-side) !important;
+    height: var(--cell-side);
 }
 
-.mino {
+.minoes-table .mino {
     background: var(--background-color);
-    transform-style: preserve-3d;
     overflow: visible;
 }
 
@@ -45,63 +73,84 @@ tr.matrix td:not(.mino) {
     left: 0;
     width: inherit;
     height: inherit;
-    background: var(--light-color);
-    z-index: -1;
 }
 
 .mino::before {
-    transform: rotateY(-90deg);
+    background: var(--light-color);
+    transform: translateZ(calc(-1 * var(--cell-side))) rotateY(-90deg);
     transform-origin: left;
 }
 
+.right .mino::before {
+    background: var(--dark-color);
+    transform: translateZ(calc(-1 * var(--cell-side))) rotateY(90deg);
+    transform-origin: right;
+}
+
 .mino::after {
-    transform: rotateX(90deg);
+    background: var(--light-color);
+    transform: translateZ(calc(-1 * var(--cell-side))) rotateX(90deg);
     transform-origin: top;
 }
 
+.bottom .mino::after {
+    background: var(--dark-color);
+    transform: translateZ(calc(-1 * var(--cell-side))) rotateX(-90deg);
+    transform-origin: bottom;
+}
+
 .I.mino {
-    --background-color: #42AFE180;
+    --background-color: #42AFE1B0;
     --light-color: #6CEAFF80;
+    --dark-color: #00a4b0B0;
 }
 
 .J.mino {
     --background-color: #1165B5B0;
     --light-color: #339BFF80;
+    --dark-color: #00009dB0;
 }
 
 .L.mino {
     --background-color: #F38927B0;
     --light-color: #FFBA5980;
+    --dark-color: #c54800B0;
 }
 
 .O.mino {
     --background-color: #F6D03CB0;
     --light-color: #FFFF7F80;
+    --dark-color: #ca9501B0;
 }
 
 .S.mino {
     --background-color: #51B84DB0;
     --light-color: #84F88080;
+    --dark-color: #1cbc02B0;
 }
 
 .T.mino {
     --background-color: #9739A2B0;
     --light-color: #D958E980;
+    --dark-color: #6e019aB0;
 }
 
 .Z.mino {
     --background-color: #EB4F65B0;
     --light-color: #FF7F7980;
+    --dark-color: #ad1936B0;
 }
 
 .ghost.mino {
-    --background-color: #8888;
-    --light-color: #CCC8;
+    --background-color: #8886;
+    --light-color: #CCC6;
+    --dark-color: #3336;
 }
 
 .locking.mino {
-    --background-color: #EEE8;
-    --light-color: #FFF8;
+    --background-color: #EEEB;
+    --light-color: #FFFB;
+    --dark-color: #DDDB;
 }
 
 .disabled.mino {
@@ -109,15 +158,97 @@ tr.matrix td:not(.mino) {
     --light-color: #FFF8;
 }
 
-.hard-dropped-table-animation {
-    animation: none;
+#holdTable .J,
+#holdTable .L,
+#holdTable .S,
+#holdTable .T,
+#holdTable .Z, 
+#nextTable .J,
+#nextTable .L,
+#nextTable .S,
+#nextTable .T,
+#nextTable .Z {
+    transform: translateZ(var(--cell-side)) translateX(50%);
 }
 
 @keyframes cleared-line-animation {
     from {
-        background-color: #eeeeee;
+        opacity: 1;
+        background-color: #ceffff66;
+        box-shadow: -200px 0 5px white, 200px 0 5px white;
     }
     to {
+        opacity: 1;
         background-color: transparent;
     }
-}
+}
+
+@keyframes show-level-animation {
+    from {
+        opacity: 1;
+        transform: translateY(200%);
+    }
+    50% {
+        transform: translateY(0) scaleY(1);
+        line-height: var(--bs-body-line-height);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(-100%) scaleY(0);
+        line-height: 0;
+    }
+}
+
+@keyframes zoom-in-animation {
+    from {
+        opacity: 1;
+        transform: scale3d(0.3, 0.3, 0.3);
+        line-height: var(--bs-body-line-height);
+
+    }
+    30% {
+        transform: scale3d(1, 1, 1);
+    }
+    80% {
+        transform: scale3d(1, 1, 1);
+        line-height: var(--bs-body-line-height);
+    }
+    to {
+        opacity: 1;
+        transform: scale3d(1.5, 0, 1);
+        line-height: 0;
+    }
+}
+
+@keyframes rotate-in-animation {
+    0% {
+        opacity: 1;
+        transform:rotate(200deg);
+        line-height: var(--bs-body-line-height);
+    }
+    30% {
+        transform:translateZ(0);
+        transform: scale3d(1, 1, 1);
+    }
+    80% {
+        transform: scale3d(1, 1, 1);
+        line-height: var(--bs-body-line-height);
+    }
+    to {
+        opacity: 1;
+        transform: scale3d(1.5, 0, 1);
+        line-height: 0;
+    }
+}
+
+@keyframes game-over-animation {
+    from {
+        opacity: 1;
+        transform: translateY(200%);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scaleY(1);
+        line-height: var(--bs-body-line-height);
+    }
+}

css/common.css

@@ -1,5 +1,7 @@
 :root {
     --cell-side: 24px;
+    --rX: -15deg;
+    --rY: 0;
 }
 
 body {

css/minimal.css

@@ -32,42 +32,42 @@ tr.matrix td:not(.mino) {
     width: inherit;
     height: inherit;
     display: block;
-    box-shadow: 0 -6px 0 var(--light-color);
+    box-shadow: 0 -6px 0 var(--box-shadow-color);
 }
 
 .I.mino {
     --background-color: #42AFE1;
-    --light-color: #6CEAFF;
+    --box-shadow-color: #6CEAFF;
 }
 
 .J.mino {
     --background-color: #1165B5;
-    --light-color: #339BFF;
+    --box-shadow-color: #339BFF;
 }
 
 .L.mino {
     --background-color: #F38927;
-    --light-color: #FFBA59;
+    --box-shadow-color: #FFBA59;
 }
 
 .O.mino {
     --background-color: #F6D03C;
-    --light-color: #FFFF7F;
+    --box-shadow-color: #FFFF7F;
 }
 
 .S.mino {
     --background-color: #51B84D;
-    --light-color: #84F880;
+    --box-shadow-color: #84F880;
 }
 
 .T.mino {
     --background-color: #9739A2;
-    --light-color: #D958E9;
+    --box-shadow-color: #D958E9;
 }
 
 .Z.mino {
     --background-color: #EB4F65;
-    --light-color: #FF7F79;
+    --box-shadow-color: #FF7F79;
 }
 
 .ghost.mino {

js/app.js

@@ -244,7 +244,7 @@ messagesSpan.onanimationend = function(event) {
 }
 
 function gameOver() {
-    matrix.piece.locked = false
+    matrix.piece.locked = true
     matrix.drawPiece()
 
     document.onkeydown = null
@@ -260,3 +260,46 @@ window.onbeforeunload = function(event) {
     settings.save()
     if (playing) return false;
 }
+
+// Play with 3D
+let mousedown = false
+let rX0 = 0
+let rY0 = 0
+let clientX0 = 0
+let clientY0 = 0
+
+screenRow.onmousedown = function(event) {
+    mousedown = true
+    rX0 = parseInt(getComputedStyle(screenRow).getPropertyValue("--rX"))
+    dy0 = parseInt(getComputedStyle(screenRow).getPropertyValue("--rY"))
+    clientX0 = event.clientX
+    clientY0 = event.clientY
+}
+
+screenRow.onmousemove = function(event) {
+	if (mousedown) {
+        event.preventDefault()
+        rX = (rX0 - event.clientY + clientY0 + 360) % 360
+        screenRow.style.setProperty("--rX", rX + "deg")
+        if (rX <= 180) {
+            screenRow.classList.remove("top")
+            screenRow.classList.add("bottom")
+        } else {
+            screenRow.classList.add("top")
+            screenRow.classList.remove("bottom")
+        }
+        rY = (rY0 + event.clientX - clientX0 + 360) % 360
+        screenRow.style.setProperty("--rY", rY + "deg")
+        if (rY >= 180) {
+            screenRow.classList.remove("left")
+            screenRow.classList.add("right")
+        } else {
+            screenRow.classList.add("left")
+            screenRow.classList.remove("right")
+        }
+    }
+}
+
+screenRow.onmouseup = function(event) {
+    mousedown = false
+}