a bit of 3D

2026-03-05 21:14:34 +01:00
parent 896b26684a
commit aed0601933
4 changed files with 78 additions and 11 deletions
--- a/css/_common.css
+++ b/css/_common.css
@@ -0,0 +1,290 @@
+:root {
+    --cell-side: 25px;
+    --rX: -15;
+    --rY: 0;
+    --tZ: 25px;
+}
+
+body {
+  background: linear-gradient(#212529, #14171a) fixed;
+}
+
+@supports (backdrop-filter: blur()) {
+    .modal::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        backdrop-filter: blur(2px);
+    }
+
+    .modal-content {
+        background-color: #212529b3;
+        backdrop-filter: blur(10px);
+    }
+}
+
+.card {
+    background-color: #25292d;
+}
+
+#matrixCard {
+    background-image: radial-gradient(#222, #25292d)
+}
+
+.card-header {
+    text-shadow: 0 0 2px black;
+}
+
+.modal-title {
+    text-shadow: 0 0 8px var(--bs-light);
+    font-weight: 600;
+}
+
+#statsTable td,
+#statsModal td {
+    text-align: right;
+}
+
+td#timeCell {
+  min-width: 10ch;
+}
+
+.minoes-table {
+    --piece-column: 0;
+    --piece-row   : 0;
+    table-layout: fixed;
+    border-collapse: separate;
+    border-spacing: 0;
+    width: min-content;
+}
+
+#matrixTable {
+    margin-top: calc(-1 * var(--buffer-zone-rows) * var(--cell-side));
+}
+
+@keyframes hard-dropped-table-animation {
+    25% {
+        transform: translateY(3px);
+    }
+}
+.hard-dropped-table-animation {
+    animation: hard-dropped-table-animation .2s;
+}
+
+tr.buffer-zone td:not(.mino) {
+    border-width: 0;
+}
+
+tr.matrix td:not(.mino) {
+    border-left  : 1px solid #333;
+    border-right : 1px solid #333;
+    border-top   : 1px solid #303030;
+    border-bottom: 1px solid #303030;
+}
+
+td {
+    overflow: hidden;
+    width: var(--cell-side);
+    height: var(--cell-side);
+    box-sizing: border-box;
+}
+
+@keyframes trail-animation {
+    from {
+        background-color: #ceffff40;
+    }
+    to {
+        background-color: transparent;
+    }
+}
+
+@keyframes locked-animation {
+    from {
+        filter: saturate(50%) brightness(400%);
+    }
+}
+
+.locked.mino {
+    animation: locked-animation;
+    animation-duration: 0.2s;
+}
+
+td.trail-animation {
+    animation: trail-animation ease-out .3s;
+}
+
+@keyframes cleared-line-animation {
+    from {
+        background-color: white;
+        filter: saturate(50%) brightness(300%);
+        box-shadow: 0 0 0 #adb5bd, 0 0 0 #adb5bd;
+    }
+    60% {
+        box-shadow: -60px 0 2px #adb5bd66, 60px 0 2px #adb5bd66;
+    }
+    to {
+        background-color: transparent;
+        box-shadow: -100px 0 5px transparent, 100px 0 5px transparent;
+    }
+}
+
+tr.cleared-line-animation {
+    animation: cleared-line-animation ease-out .3s;
+}
+
+#holdTable .J,
+#holdTable .L,
+#holdTable .S,
+#holdTable .T,
+#holdTable .Z, 
+#nextTable .J,
+#nextTable .L,
+#nextTable .S,
+#nextTable .T,
+#nextTable .Z {
+    transform: translateX(50%);
+}
+
+#messagesSpan {
+    position: absolute;
+    top: 5%;
+    left: 50%;
+    transform: translate(-50%, 0);
+    color: #fffc;
+    text-shadow: 1px 1px #000c;
+    font-size: 3vmin;
+    text-align: center;
+}
+
+#messagesSpan div {
+    opacity: 0;
+    overflow: hidden;
+}
+
+@keyframes show-level-animation {
+    from {
+        opacity: 0;
+        transform: translateY(200%);
+    }
+    50% {
+        opacity: 100%;
+        transform: translateY(0) scaleY(1);
+        line-height: var(--bs-body-line-height);
+    }
+    to {
+        opacity: 0;
+        transform: translateY(-100%) scaleY(0);
+        line-height: 0;
+    }
+}
+
+#messagesSpan div.show-level-animation {
+    animation: show-level-animation;
+    animation-timing-function: (0.4, 0, 0.6, 1);
+    animation-duration: 2s;
+}
+
+@keyframes zoom-in-animation {
+    from {
+        opacity: 0;
+        transform: scale3d(0.3, 0.3, 0.3);
+        line-height: var(--bs-body-line-height);
+
+    }
+    30% {
+        opacity: 1;
+        transform: scale3d(1, 1, 1);
+    }
+    80% {
+        opacity: 1;
+        transform: scale3d(1, 1, 1);
+        line-height: var(--bs-body-line-height);
+    }
+    to {
+        opacity: 0;
+        transform: scale3d(1.5, 0, 1);
+        line-height: 0;
+    }
+}
+
+@keyframes rotate-in-animation {
+    0% {
+        opacity:0;
+        transform:rotate(200deg);
+        line-height: var(--bs-body-line-height);
+    }
+    30% {
+        opacity:1;
+        transform:translateZ(0);
+        transform: scale3d(1, 1, 1);
+    }
+    80% {
+        opacity: 1;
+        transform: scale3d(1, 1, 1);
+        line-height: var(--bs-body-line-height);
+    }
+    to {
+        opacity: 0;
+        transform: scale3d(1.5, 0, 1);
+        line-height: 0;
+    }
+}
+
+#messagesSpan div.rotate-in-animation {
+    animation-name:  rotate-in-animation;
+    animation-timing-function: cubic-bezier(.25,.46,.45,.94);
+    animation-duration: 1s;
+}
+
+#messagesSpan div.zoom-in-animation {
+    animation-name: zoom-in-animation;
+    animation-timing-function: cubic-bezier(.25,.46,.45,.94);
+    transform-origin:center;
+    animation-duration: 1s;
+}
+
+@keyframes game-over-animation {
+    from {
+        opacity: 0;
+        transform: translateY(200%);
+    }
+    to {
+        opacity: 100%;
+        transform: translateY(0) scaleY(1);
+        line-height: var(--bs-body-line-height);
+    }
+}
+
+#messagesSpan div.game-over-animation {
+    animation: game-over-animation;
+    animation-timing-function: (0.4, 0, 0.6, 1);
+    animation-duration: 2s;
+}
+
+#statsModal table {
+    border-collapse: collapse;
+}
+
+#statsModal th {
+    padding-left: 0;
+    padding-right: 0.5rem;
+    padding-bottom: 0.2rem;
+    border-left: 0.5rem solid transparent;
+    border-right: 0;
+}
+
+#statsModal td {
+    padding-left: 0.5rem;
+    padding-right: 0;
+    padding-bottom: 0.2rem;
+    border-left: 0;
+    border-right: 0.5rem solid transparent;
+}
+
+#statsModal tr:last-child th,
+#statsModal tr:last-child td {
+    border-bottom: none;
+}