diff --git a/css/stereo.css b/css/stereo.css index ddae8e4..42a3057 100644 --- a/css/stereo.css +++ b/css/stereo.css @@ -64,10 +64,6 @@ body { .card, .card-header { text-shadow: - calc(-0.01px * var(--rY) - 1px) calc(0.02px * var(--rX) - 1px) #ccc, - calc(-0.02px * var(--rY) - 1px) calc(0.04px * var(--rX) - 1px) #ccc, - calc(-0.01px * var(--rY) + 1px) calc(0.02px * var(--rX) + 1px) #222, - calc(-0.02px * var(--rY) + 1px) calc(0.04px * var(--rX) + 1px) #222, calc(-0.3px * var(--rY)) calc(0.4px * var(--rX)) 5px #0008; } @@ -105,8 +101,6 @@ body { tr.matrix td:not(.mino) { border: 0; - will-change: transform; - transform: translateZ(0); } .minoes-table td { @@ -121,18 +115,11 @@ tr.matrix td:not(.mino) { .minoes-table .mino::after { --light-x: calc(-0.5 - var(--rY) / 30 - var(--column) / 10 + 1); --light-y: calc(-0.5 + var(--rX) / 20 - var(--row) / 6 + 4); - --center-x: calc(35% + var(--light-x) * 10%); - --center-y: calc(35% + var(--light-y) * 10%); --center-color: hsla(var(--h), var(--s), calc(var(--l) * var(--light) * 1.1), var(--a)); --edge-color: hsla(var(--h), var(--s), calc(var(--l) * (var(--light) * 0.9)), var(--a)); - background: radial-gradient( - circle at var(--center-x) var(--center-y), - var(--center-color) 10%, - var(--edge-color) 100% - ); + background: var(--center-color); border-radius: 2px; border: 2px outset var(--center-color); - box-shadow: 0 0 7px hsla(var(--h), var(--s), calc(var(--l) * var(--light) * 1.3), 20%); } .minoes-table .mino::before, @@ -159,10 +146,18 @@ td.trail-animation { + (var(--light-y) * 0.3) + (var(--light-x) * 0.2) ); + --center-x: calc(35% + var(--light-x) * 10%); + --center-y: calc(35% + var(--light-y) * 10%); + background: radial-gradient( + circle at var(--center-x) var(--center-y), + var(--center-color) 10%, + var(--edge-color) 100% + ); } /* Left face */ .minoes-table .mino::before, +td.trail-animation::before, tr.cleared-line-animation td::before, .left .minoes-table .mino + .mino::before { --light: calc( @@ -170,13 +165,14 @@ tr.cleared-line-animation td::before, + (var(--light-x) * -0.2) + (var(--light-y) * 0.15) ); - transform: translate3d(-2px, -2px, calc(-1 * var(--cell-side))) rotateY(-90deg); + transform: translate3d(-1.5px, -1.5px, calc(-1 * var(--cell-side))) rotateY(-90deg); transform-origin: left; } /* Right face */ .right .minoes-table .mino + .mino::before, .minoes-table .mino + :not(.mino)::before, +.right td.trail-animation::before, .right tr.cleared-line-animation td::before { --light: calc( 0.85 @@ -191,23 +187,25 @@ tr.cleared-line-animation td::before, } .right .minoes-table .mino:last-child::before { - transform: translate3d(-2px, -2px, calc(-1 * var(--cell-side))) rotateY(90deg) !important; + transform: translate3d(-1.5px, -1.5px, calc(-1 * var(--cell-side))) rotateY(90deg) !important; transform-origin: right !important; } /* Top face */ .minoes-table .mino::after, +td.trail-animation::after, tr.cleared-line-animation td::after { --light: calc( 1.5 + (var(--light-y) * 0.2) ); - transform: translate3d(-2px, -2px, calc(-1 * var(--cell-side))) rotateX(90deg); + transform: translate3d(-1.5px, -1.5px, calc(-1 * var(--cell-side))) rotateX(90deg); transform-origin: top; } /* Bottom face */ .bottom .minoes-table .mino::after, +.bottom td.trail-animation::after, .bottom tr.cleared-line-animation td::after { --light: calc( 1.1 @@ -216,7 +214,7 @@ tr.cleared-line-animation td::after { --center-x: calc(65% + var(--light-x) * 10%); --center-y: calc(65% + var(--light-y) * 10%); filter: saturate(0.95); - transform: translate3d(-2px, -2px, calc(-1 * var(--cell-side))) rotateX(-90deg); + transform: translate3d(-1.5px, -1.5px, calc(-1 * var(--cell-side))) rotateX(-90deg); transform-origin: bottom; } @@ -231,8 +229,6 @@ tr.cleared-line-animation td::after { .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; } -td.trail-animation { --h: 180deg; --s: 50%; --l: 90%; --a: 0.4; } - #holdTable .J + :not(.mino), #holdTable .L + :not(.mino), @@ -250,13 +246,19 @@ td.trail-animation { --h: 180deg; --s: 50%; --l: 90%; --a: 0.4; } @keyframes trail-animation { from { background-color: hsla(180, 100%, 100%, 0.1); - box-shadow: 0 0 10px hsla(180, 100%, 100%, 0.2); + border-color: hsla(180, 100%, 100%, 0.1); } to { background-color: transparent; + border-color: transparent; } } +td.trail-animation::before, +td.trail-animation::after { + animation: trail-animation ease-out .3s; +} + @keyframes locked-animation { from { --h: 0deg; --s: 0%; --l: 100%; --a: 1; diff --git a/js/interface.js b/js/interface.js index 6c6c00c..702c207 100644 --- a/js/interface.js +++ b/js/interface.js @@ -21,6 +21,7 @@ const KEY_NAMES = new Proxy({ } }) + class Settings { constructor() { this.form = settingsForm