From 09f4785ef45b7f922901e5d7b2074d00ac5467cb Mon Sep 17 00:00:00 2001 From: adrien Date: Mon, 7 Apr 2025 23:37:24 +0200 Subject: [PATCH] 3D --- css/binaural.css | 179 ++++++++++++++++++++++++++++++++++++++++------- css/common.css | 2 + css/minimal.css | 16 ++--- js/app.js | 45 +++++++++++- 4 files changed, 209 insertions(+), 33 deletions(-) diff --git a/css/binaural.css b/css/binaural.css index dd2bfcd..423934d 100644 --- a/css/binaural.css +++ b/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; } -} \ No newline at end of file +} + +@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); + } +} diff --git a/css/common.css b/css/common.css index 3d93760..01b1334 100644 --- a/css/common.css +++ b/css/common.css @@ -1,5 +1,7 @@ :root { --cell-side: 24px; + --rX: -15deg; + --rY: 0; } body { diff --git a/css/minimal.css b/css/minimal.css index 5192fe6..d69d720 100644 --- a/css/minimal.css +++ b/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 { diff --git a/js/app.js b/js/app.js index 0d0515d..d256f29 100644 --- a/js/app.js +++ b/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 +} \ No newline at end of file