diff --git a/app.js b/app.js index 3ae6b09..4509d5d 100644 --- a/app.js +++ b/app.js @@ -123,6 +123,12 @@ class Scheduler { class MinoesTable { constructor(id) { this.table = document.getElementById(id) + Array.from(this.table.getElementsByTagName("tr")).forEach((tr, row) => { + Array.from(tr.getElementsByTagName("td")).forEach((td, column) => { + td.style.setProperty('--row', row) + td.style.setProperty('--column', column) + }) + }) this.rows = this.table.rows.length this.columns = this.table.rows[0].childElementCount } @@ -145,7 +151,9 @@ class MinoesTable { this.table.rows[position.y].cells[position.x].className = className } - drawPiece(piece=this.piece, className=piece.className + (piece.locked? " locked" : "")) { + drawPiece(piece=this.piece, className=piece.className) { + if (piece.locked) className += " locked" + if (piece==this.piece && actionsQueue.length) className += " moving" piece.minoesPosition[piece.facing] .translate(piece.center) .forEach(minoPosition => { @@ -228,6 +236,8 @@ class Matrix extends MinoesTable { this.ghost = piece.ghost super.drawPiece(this.ghost) super.drawPiece(piece, className) + matrix.table.style.setProperty('--ghost-column', this.ghost.center.x) + matrix.table.style.setProperty('--ghost-row', this.ghost.center.y) } redraw() { @@ -890,6 +900,7 @@ function onkeydown(event) { if (action == playerActions.softDrop) scheduler.setInterval(autorepeat, settings.fallPeriod/20) else scheduler.setTimeout(repeat, settings.das) } + matrix.drawPiece() } } } @@ -919,6 +930,7 @@ function onkeyup(event) { if (!actionsQueue.length) { scheduler.clearTimeout(repeat) scheduler.clearInterval(autorepeat) + matrix.drawPiece() } } } diff --git a/css/common.css b/css/common.css index d53a111..57974f1 100644 --- a/css/common.css +++ b/css/common.css @@ -18,6 +18,8 @@ body { } .minoes-table { + --ghost-row : 0; + --ghost-column: 0; table-layout: fixed; border-collapse: separate; border-spacing: 0; diff --git a/css/electro.css b/css/electro.css index 9b4cd06..34101ef 100644 --- a/css/electro.css +++ b/css/electro.css @@ -4,38 +4,52 @@ body { } .card { - background-color: rgba(37, 41, 45, 50%); + background-color: rgba(37, 41, 45, 30%); } -@supports (backdrop-filter: blur()) { - .card { - background-color: rgba(33, 37, 41, 20%); - backdrop-filter: blur(3px); - } +.mino:not(.ghost):not(.locked) { + padding: 0; + position: relative; + z-index: 0; + box-shadow: -1px -1px 4px rgba(128, 128, 128, 25%), + -1px 1px 4px rgba(128, 128, 128, 25%), + 1px -1px 4px rgba(128, 128, 128, 25%), + 1px 1px 4px rgba(128, 128, 128, 25%); } -.mino { - background-image: radial-gradient( - farthest-corner at 4px 6px, - hsla(196, 100%, 72%, 0.1) 0%, - hsla(196, 100%, 43%, 0.1) 150% - ); - border: 1px solid rgba(127, 229, 255, 0.7); +.mino:not(.ghost):not(.locked):before { + content: ""; + position: absolute; + z-index: -1; + inset: 0; + padding: 1px; border-radius: 0.3vmin; -} + --glint-x: calc(50% + 50% * (var(--ghost-column) - var(--column))/10); + --glint-y: calc(50% + 50% * (var(--ghost-row) - var(--row))/25); + background: radial-gradient( + at var(--glint-x) var(--glint-y), + rgba(204, 238, 247, 0.9) 0%, + rgba(0, 159, 218, 0.9) 150%); + mask: + linear-gradient(#666 0 0) content-box, + linear-gradient(#fff 0 0); + mask-mode: luminance; + mask-composite: intersect; + } .ghost.mino { background: transparent; - border: 1px solid rgba(255, 255, 255, 0.4); + border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 3px; - box-shadow: - -1px -1px 4px rgba(242, 255, 255, 16%), + box-shadow: -1px -1px 4px rgba(242, 255, 255, 16%), -1px 1px 4px rgba(242, 255, 255, 16%), 1px -1px 4px rgba(242, 255, 255, 16%), 1px 1px 4px rgba(242, 255, 255, 16%); } -.locked.mino { +.locked.mino, +.moving.mino { + border-width: 1px; background: rgba(186, 211, 255, 70%); border-color: rgba(242, 255, 255, 0.7); box-shadow: -1px -1px 4px rgba(186, 211, 255, 27%),