From 2f1ec2a6f7ea3f7b4b9471c0188bdace0e3a13b4 Mon Sep 17 00:00:00 2001 From: adrien Date: Thu, 28 Aug 2025 02:17:10 +0200 Subject: [PATCH 1/6] white border --- css/minimal.css | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/css/minimal.css b/css/minimal.css index d69d720..137604d 100644 --- a/css/minimal.css +++ b/css/minimal.css @@ -5,7 +5,12 @@ .minoes-table { display: flex; flex-direction: column; - filter: drop-shadow(5px 8px 0 rgba(9, 9, 9, 22%)); + filter: + drop-shadow(-2px 0 0 white) + drop-shadow(2px 0 0 white) + drop-shadow(0 -2px 0 white) + drop-shadow(0 2px 0 white) + drop-shadow(5px 8px 0 rgba(9, 9, 9, 22%)); } .minoes-table tr { @@ -80,7 +85,8 @@ tr.matrix td:not(.mino) { } .locking.mino { - filter: saturate(50%) brightness(130%); + --background-color: white; + --box-shadow-color: #DDD; } .locked.mino { @@ -105,4 +111,14 @@ tr.matrix td:not(.mino) { to { background-color: transparent; } +} + +@keyframes trail-animation { + from { + background-color: #ceffff10; + filter: saturate(50%) brightness(110%); + } + to { + background-color: transparent; + } } \ No newline at end of file From 67a0f06d0388cb839a7419a1363fbfbb0372e653 Mon Sep 17 00:00:00 2001 From: adrien Date: Thu, 28 Aug 2025 02:30:17 +0200 Subject: [PATCH 2/6] trail on soft drop --- css/minimal.css | 2 +- js/game_logic.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/css/minimal.css b/css/minimal.css index 137604d..47e4f5f 100644 --- a/css/minimal.css +++ b/css/minimal.css @@ -115,7 +115,7 @@ tr.matrix td:not(.mino) { @keyframes trail-animation { from { - background-color: #ceffff10; + background-color: #ceffff08; filter: saturate(50%) brightness(110%); } to { diff --git a/js/game_logic.js b/js/game_logic.js index 5ceba28..b5f4073 100644 --- a/js/game_logic.js +++ b/js/game_logic.js @@ -328,7 +328,7 @@ class Tetromino { let success = this.canMove(translation, rotation) if (success) { scheduler.clearTimeout(lockDown) - matrix.drawPiece(this, hardDropped? "trail-animation" : "") + matrix.drawPiece(this, translation == TRANSLATION.DOWN? "trail-animation" : "") this.center = success.center if (rotation) this.facing = success.facing this.lastRotation = rotation From bc5de2448d1e487e2a03d27ab2f76f4bcc239671 Mon Sep 17 00:00:00 2001 From: adrien Date: Thu, 28 Aug 2025 02:32:22 +0200 Subject: [PATCH 3/6] less blink --- css/retro.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/retro.css b/css/retro.css index f299d68..d0b71b8 100644 --- a/css/retro.css +++ b/css/retro.css @@ -120,7 +120,7 @@ td { } @keyframes blinker { - 50% { + 35% { opacity: 0; } } From 08763c501efa093885cf968e0b1c32a80cfdea8c Mon Sep 17 00:00:00 2001 From: adrien Date: Thu, 28 Aug 2025 10:32:48 +0200 Subject: [PATCH 4/6] change classic ghost piece --- css/classic.css | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/css/classic.css b/css/classic.css index 70ce6cf..416a710 100644 --- a/css/classic.css +++ b/css/classic.css @@ -84,15 +84,12 @@ .ghost.mino { margin: 1px; - background: transparent !important; - border: 2px solid var(--light-color) !important; box-shadow: - -2px -2px 6px #FFF8, - -2px 2px 6px #FFF8, - 2px -2px 6px #FFF8, - 2px 2px 6px #FFF8; - opacity: 65%; - + -2px -2px 4px #FFF8, + -2px 2px 4px #FFF8, + 2px -2px 4px #FFF8, + 2px 2px 4px #FFF8; + filter: brightness(180%) saturate(50%) blur(1px) opacity(30%); } .moving.mino { From 4b2cd0e5d21d3fb9e1ace4411fcdaedcd335424b Mon Sep 17 00:00:00 2001 From: adrien Date: Thu, 28 Aug 2025 10:40:19 +0200 Subject: [PATCH 5/6] change minimal ghost piece --- css/minimal.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/minimal.css b/css/minimal.css index 47e4f5f..b464bbc 100644 --- a/css/minimal.css +++ b/css/minimal.css @@ -76,7 +76,7 @@ tr.matrix td:not(.mino) { } .ghost.mino { - opacity: 50%; + opacity: 5%; box-shadow: none; } From 3729a3762aa6b1aa08a682aea48fb37ab5fe9bd5 Mon Sep 17 00:00:00 2001 From: adrien Date: Sat, 3 Jan 2026 02:55:03 +0100 Subject: [PATCH 6/6] pop2 style --- css/common.css | 4 ++ css/pop2.css | 70 ++++++++++++++++++++++++++++++++ css/{binaural.css => stereo.css} | 0 index.html | 6 ++- 4 files changed, 78 insertions(+), 2 deletions(-) create mode 100644 css/pop2.css rename css/{binaural.css => stereo.css} (100%) diff --git a/css/common.css b/css/common.css index 535f66d..fc4dc95 100644 --- a/css/common.css +++ b/css/common.css @@ -41,6 +41,10 @@ body { text-align: right; } +#timeCell { + min-width: 10ch; +} + .minoes-table { --piece-column: 0; --piece-row : 0; diff --git a/css/pop2.css b/css/pop2.css new file mode 100644 index 0000000..3d22cd8 --- /dev/null +++ b/css/pop2.css @@ -0,0 +1,70 @@ +body { + background-image: url("pop/bg.png"); + background-size: cover; +} + +body[data-bs-theme="dark"] { + --bs-body-bg: #2125296b; +} + +.btn-dark { + --bs-btn-bg: #2125296b; +} + +.card { + background: #25292d66; +} + +#matrixCard { + background-image: radial-gradient(#2226, #25292d66); +} + +.minoes-table { + background: transparent; +} + +.mino { + background: var(--color); + border: 3px solid var(--border); + box-shadow: 0 0 8px var(--border); +} + +.I { + --color: #00eaf888; + --border: #00eaf5; +} + +.J { + --color: #00a9f788; + --border: #00a9f7; +} + +.L { + --color: #f9b60088; + --border: #f9b600; +} + +.O { + --color: #e3e04988; + --border: #e3e049; +} + +.S { + --color: #7bd59e88; + --border: #7bd59e; +} + +.T { + --color: #d136e288; + --border: #d136e2; +} + +.Z { + --color: #E67D8688; + --border: #E67D86; +} + +.ghost { + --color: #fff4; + --border: #fff5; +} \ No newline at end of file diff --git a/css/binaural.css b/css/stereo.css similarity index 100% rename from css/binaural.css rename to css/stereo.css diff --git a/index.html b/index.html index 7d4e210..5d299d4 100644 --- a/index.html +++ b/index.html @@ -14,9 +14,10 @@ + - + @@ -72,10 +73,11 @@ + - +