adrien/quatuor
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

round

Browse Source
This commit is contained in:
Adrien MALINGREY
2026-03-11 19:52:19 +01:00
parent b8b743871e
commit 040dc5d5e9
13 changed files with 466 additions and 427 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
css/_common.css
View File

@@ -1,17 +1,17 @@
:root { :root {
--cell-size: 25px; --cell-size: 25px;
--rX: -15; --rX: -15;
--rY: 0; --rY: 0;
--tZ: 25px; --tZ: 25px;
} }
body { body {
background: linear-gradient(#212529, #14171a) fixed; background: linear-gradient(#212529, #14171a) fixed;
} }
@supports (backdrop-filter: blur()) { @supports (backdrop-filter: blur()) {
.modal::before { .modal::before {
content: ""; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
@@ -31,7 +31,7 @@ body {
} }
#matrixCard { #matrixCard {
background-image: radial-gradient(#222, #25292d) background-image: radial-gradient(#222, #25292d);
} }
.card-header { .card-header {
@@ -49,12 +49,12 @@ body {
} }
td#timeCell { td#timeCell {
min-width: 10ch; min-width: 10ch;
} }
.minoes-table { .minoes-table {
--piece-column: 0; --piece-column: 0;
--piece-row : 0; --piece-row: 0;
table-layout: fixed; table-layout: fixed;
border-collapse: separate; border-collapse: separate;
border-spacing: 0; border-spacing: 0;
@@ -71,7 +71,7 @@ td#timeCell {
} }
} }
.hard-dropped-table-animation { .hard-dropped-table-animation {
animation: hard-dropped-table-animation ease-in-out .2s; animation: hard-dropped-table-animation ease-in-out 0.2s;
} }
tr.buffer-zone td:not(.mino) { tr.buffer-zone td:not(.mino) {
@@ -79,9 +79,9 @@ tr.buffer-zone td:not(.mino) {
} }
tr.matrix td:not(.mino) { tr.matrix td:not(.mino) {
border-left : 1px solid #333; border-left: 1px solid #333;
border-right : 1px solid #333; border-right: 1px solid #333;
border-top : 1px solid #303030; border-top: 1px solid #303030;
border-bottom: 1px solid #303030; border-bottom: 1px solid #303030;
} }
@@ -113,33 +113,39 @@ td {
} }
td.trail-animation { td.trail-animation {
animation: trail-animation ease-out .3s; animation: trail-animation ease-out 0.3s;
} }
@keyframes cleared-line-animation { @keyframes cleared-line-animation {
from { from {
background-color: white; background-color: white;
filter: saturate(50%) brightness(300%); filter: saturate(50%) brightness(300%);
box-shadow: 0 0 0 #adb5bd, 0 0 0 #adb5bd; box-shadow:
0 0 0 #adb5bd,
0 0 0 #adb5bd;
} }
60% { 60% {
box-shadow: -60px 0 2px #adb5bd66, 60px 0 2px #adb5bd66; box-shadow:
-60px 0 2px #adb5bd66,
60px 0 2px #adb5bd66;
} }
to { to {
background-color: transparent; background-color: transparent;
box-shadow: -100px 0 5px transparent, 100px 0 5px transparent; box-shadow:
-100px 0 5px transparent,
100px 0 5px transparent;
} }
} }
tr.cleared-line-animation { tr.cleared-line-animation {
animation: cleared-line-animation ease-out .3s; animation: cleared-line-animation ease-out 0.3s;
} }
#holdTable .J, #holdTable .J,
#holdTable .L, #holdTable .L,
#holdTable .S, #holdTable .S,
#holdTable .T, #holdTable .T,
#holdTable .Z, #holdTable .Z,
#nextTable .J, #nextTable .J,
#nextTable .L, #nextTable .L,
#nextTable .S, #nextTable .S,
@@ -193,7 +199,6 @@ tr.cleared-line-animation {
opacity: 0; opacity: 0;
transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3);
line-height: var(--bs-body-line-height); line-height: var(--bs-body-line-height);
} }
30% { 30% {
opacity: 1; opacity: 1;
@@ -213,13 +218,13 @@ tr.cleared-line-animation {
@keyframes rotate-in-animation { @keyframes rotate-in-animation {
0% { 0% {
opacity:0; opacity: 0;
transform:rotate(200deg); transform: rotate(200deg);
line-height: var(--bs-body-line-height); line-height: var(--bs-body-line-height);
} }
30% { 30% {
opacity:1; opacity: 1;
transform:translateZ(0); transform: translateZ(0);
transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);
} }
80% { 80% {
@@ -235,15 +240,15 @@ tr.cleared-line-animation {
} }
#messagesSpan div.rotate-in-animation { #messagesSpan div.rotate-in-animation {
animation-name: rotate-in-animation; animation-name: rotate-in-animation;
animation-timing-function: cubic-bezier(.25,.46,.45,.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
animation-duration: 1s; animation-duration: 1s;
} }
#messagesSpan div.zoom-in-animation { #messagesSpan div.zoom-in-animation {
animation-name: zoom-in-animation; animation-name: zoom-in-animation;
animation-timing-function: cubic-bezier(.25,.46,.45,.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
transform-origin:center; transform-origin: center;
animation-duration: 1s; animation-duration: 1s;
} }

29
css/electro.css
View File

@@ -1,14 +1,14 @@
body { body {
background-image: url("electro/bg.jpg"); background-image: url('electro/bg.jpg');
background-size: cover; background-size: cover;
} }
body[data-bs-theme="dark"] { body[data-bs-theme='dark'] {
--bs-body-bg: #2125296b; --bs-body-bg: #2125296b;
} }
.btn-dark { .btn-dark {
--bs-btn-bg: #2125296b; --bs-btn-bg: #2125296b;
} }
.card { .card {
@@ -16,7 +16,7 @@ body[data-bs-theme="dark"] {
} }
tr.matrix td:not(.mino) { tr.matrix td:not(.mino) {
border-left : none; border-left: none;
border-bottom: none; border-bottom: none;
} }
@@ -30,29 +30,30 @@ tr.matrix td:not(.mino) {
} }
.mino:not(.ghost):not(.locking):before { .mino:not(.ghost):not(.locking):before {
content: ""; content: '';
position: absolute; position: absolute;
z-index: -1; z-index: -1;
inset: 0; inset: 0;
margin: 1px 1px 0px 0px; margin: 1px 1px 0px 0px;
padding: 2px; padding: 2px;
border-radius: 4px; border-radius: 4px;
--glint-x: calc(50% + 50% * (var(--piece-column) - var(--column))/10); --glint-x: calc(50% + 50% * (var(--piece-column) - var(--column)) / 10);
--glint-y: calc(50% + 50% * (var(--piece-row) - var(--row))/25); --glint-y: calc(50% + 50% * (var(--piece-row) - var(--row)) / 25);
background: radial-gradient( background: radial-gradient(
at var(--glint-x) var(--glint-y), at var(--glint-x) var(--glint-y),
rgba(204, 238, 247, 0.9) 0%, rgba(204, 238, 247, 0.9) 0%,
rgba(10, 159, 218, 0.9) 150%); rgba(10, 159, 218, 0.9) 150%
mask: );
linear-gradient(#666 0 0) content-box, mask:
linear-gradient(#fff 0 0); linear-gradient(#666 0 0) content-box,
linear-gradient(#fff 0 0);
mask-mode: luminance; mask-mode: luminance;
mask-composite: intersect; mask-composite: intersect;
} }
.ghost.mino { .ghost.mino {
background: rgba(242, 255, 255, 10%); background: rgba(242, 255, 255, 10%);
border : 2px solid rgba(255, 255, 255, 0.3); border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 3px; border-radius: 3px;
box-shadow: 0px 0px 10px rgba(242, 255, 255, 75%); box-shadow: 0px 0px 10px rgba(242, 255, 255, 75%);
} }

62
css/jazz.css
View File

@@ -1,5 +1,5 @@
body { body {
--bs-gutter-x: 0; --bs-gutter-x: 0;
background: black !important; background: black !important;
} }
@@ -7,11 +7,11 @@ body {
gap: 0 !important; gap: 0 !important;
margin: 0; margin: 0;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: .1em; letter-spacing: 0.1em;
} }
#screenRow { #screenRow {
--bs-gutter-x: 0; --bs-gutter-x: 0;
} }
.card { .card {
@@ -26,7 +26,7 @@ body {
} }
.card-header, .card-header,
.card-header th{ .card-header th {
background: transparent; background: transparent;
font-weight: 400 !important; font-weight: 400 !important;
font-size: 1.3em; font-size: 1.3em;
@@ -34,18 +34,14 @@ body {
} }
#screenRow .table { #screenRow .table {
--bs-border-width: 0; --bs-border-width: 0;
} }
.minoes-table { .minoes-table {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
filter: filter: drop-shadow(-2px 0 0 white) drop-shadow(2px 0 0 white) drop-shadow(0 -2px 0 white)
drop-shadow(-2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(5px 8px 0 rgba(9, 9, 9, 22%));
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 { .minoes-table tr {
@@ -93,7 +89,7 @@ body {
} }
td#timeCell { td#timeCell {
text-align: center; text-align: center;
} }
#matrixCard { #matrixCard {
@@ -128,45 +124,45 @@ tr.matrix td:not(.mino) {
} }
.I.mino { .I.mino {
background-color: #42AFE1; background-color: #42afe1;
border-color: #6CEAFF; border-color: #6ceaff;
--box-shadow-color: #6CEAFF; --box-shadow-color: #6ceaff;
} }
.J.mino { .J.mino {
background-color: #1165B5; background-color: #1165b5;
border-color: #339BFF; border-color: #339bff;
--box-shadow-color: #339BFF; --box-shadow-color: #339bff;
} }
.L.mino { .L.mino {
background-color: #F38927; background-color: #f38927;
border-color: #FFBA59; border-color: #ffba59;
--box-shadow-color: #FFBA59; --box-shadow-color: #ffba59;
} }
.O.mino { .O.mino {
background-color: #F6D03C; background-color: #f6d03c;
border-color: #FFFF7F; border-color: #ffff7f;
--box-shadow-color: #FFFF7F; --box-shadow-color: #ffff7f;
} }
.S.mino { .S.mino {
background-color: #32ee3e; background-color: #32ee3e;
border-color: #84F880; border-color: #84f880;
--box-shadow-color: #84F880; --box-shadow-color: #84f880;
} }
.T.mino { .T.mino {
background-color: #9739A2; background-color: #9739a2;
border-color: #D958E9; border-color: #d958e9;
--box-shadow-color: #D958E9; --box-shadow-color: #d958e9;
} }
.Z.mino { .Z.mino {
background-color: #EB4F65; background-color: #eb4f65;
border-color: #FF7F79; border-color: #ff7f79;
--box-shadow-color: #FF7F79; --box-shadow-color: #ff7f79;
} }
.ghost.mino { .ghost.mino {
@@ -218,4 +214,4 @@ tr.matrix td:not(.mino) {
to { to {
background-color: transparent; background-color: transparent;
} }
} }

16
css/jazz2.css
View File

@@ -36,37 +36,37 @@ tr.matrix td:not(.mino) {
.I.mino { .I.mino {
background-color: #0293b0; background-color: #0293b0;
--box-shadow-color: #05d2f2; --box-shadow-color: #05d2f2;
} }
.J.mino { .J.mino {
background-color: #2c69c2; background-color: #2c69c2;
--box-shadow-color: #7bb7f6; --box-shadow-color: #7bb7f6;
} }
.L.mino { .L.mino {
background-color: #fa9b23; background-color: #fa9b23;
--box-shadow-color: #FFBA59; --box-shadow-color: #ffba59;
} }
.O.mino { .O.mino {
background-color: #f9d92c; background-color: #f9d92c;
--box-shadow-color: #fff194; --box-shadow-color: #fff194;
} }
.S.mino { .S.mino {
background-color: #01a493; background-color: #01a493;
--box-shadow-color: #03e7d3;; --box-shadow-color: #03e7d3;
} }
.T.mino { .T.mino {
background-color: #6830d1; background-color: #6830d1;
--box-shadow-color: #bb88fc; --box-shadow-color: #bb88fc;
} }
.Z.mino { .Z.mino {
background-color: #ee2b58; background-color: #ee2b58;
--box-shadow-color: #fd4487;; --box-shadow-color: #fd4487;
} }
.ghost.mino { .ghost.mino {
@@ -115,4 +115,4 @@ tr.matrix td:not(.mino) {
to { to {
background-color: transparent; background-color: transparent;
} }
} }

42
css/jstris-skin.css
View File

@@ -1,11 +1,11 @@
:root { :root {
--cell-size: 24px; --cell-size: 24px;
--sprite-size: calc(100% / 8); --sprite-size: round(100% / 8, 1px);
--skin-url: url(https://i.imgur.com/HqGYC5G.png); --skin-url: url(https://i.imgur.com/HqGYC5G.png);
} }
.card { .card {
background-color: #1c1c1c; background-color: #1c1c1c;
} }
.card-body { .card-body {
@@ -15,7 +15,7 @@
#matrixCard { #matrixCard {
background-image: url(jstris-skin/jstris-grid.png); background-image: url(jstris-skin/jstris-grid.png);
background-position: bottom; background-position: bottom;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
tr.matrix td:not(.mino) { tr.matrix td:not(.mino) {
@@ -30,40 +30,40 @@ tr.matrix td:not(.mino) {
} }
.I { .I {
--sprite-pos: 6; --sprite-pos: 6;
} }
.J { .J {
--sprite-pos: 7; --sprite-pos: 7;
} }
.L { .L {
--sprite-pos: 3; --sprite-pos: 3;
} }
.O { .O {
--sprite-pos: 4; --sprite-pos: 4;
} }
.S { .S {
--sprite-pos: 5; --sprite-pos: 5;
} }
.T { .T {
--sprite-pos: 8; --sprite-pos: 8;
} }
.Z { .Z {
--sprite-pos: 2; --sprite-pos: 2;
} }
.ghost { .ghost {
--sprite-pos: 1; --sprite-pos: 1;
opacity: 50%; opacity: 50%;
} }
.disabled { .disabled {
--sprite-pos: 0; --sprite-pos: 0;
} }
.locking.mino { .locking.mino {
@@ -75,21 +75,7 @@ tr.matrix td:not(.mino) {
box-shadow: 4px 4px 10px #0002; box-shadow: 4px 4px 10px #0002;
} }
.option { .preview {
display: inline-block; --cell-size: 24px;
height: var(--cell-size); height: var(--cell-size);
}
.result {
--nb-sprites: 9;
}
.select2-container:not(.select2-container--disabled) .selection {
--nb-sprites: 4;
--sprite-pos: 4;
width: calc(var(--nb-sprites) * var(--cell-size));
background-position-x: calc(-1 * var(--sprite-pos) * var(--cell-size));
background-image: var(--skin-url);
background-size: cover;
background-repeat: no-repeat;
} }

42
css/minimal.css
View File

@@ -5,12 +5,8 @@
.minoes-table { .minoes-table {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
filter: filter: drop-shadow(-2px 0 0 white) drop-shadow(2px 0 0 white) drop-shadow(0 -2px 0 white)
drop-shadow(-2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(5px 8px 0 rgba(9, 9, 9, 22%));
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 { .minoes-table tr {
@@ -41,38 +37,38 @@ tr.matrix td:not(.mino) {
} }
.I.mino { .I.mino {
--background-color: #42AFE1; --background-color: #42afe1;
--box-shadow-color: #6CEAFF; --box-shadow-color: #6ceaff;
} }
.J.mino { .J.mino {
--background-color: #1165B5; --background-color: #1165b5;
--box-shadow-color: #339BFF; --box-shadow-color: #339bff;
} }
.L.mino { .L.mino {
--background-color: #F38927; --background-color: #f38927;
--box-shadow-color: #FFBA59; --box-shadow-color: #ffba59;
} }
.O.mino { .O.mino {
--background-color: #F6D03C; --background-color: #f6d03c;
--box-shadow-color: #FFFF7F; --box-shadow-color: #ffff7f;
} }
.S.mino { .S.mino {
--background-color: #51B84D; --background-color: #51b84d;
--box-shadow-color: #84F880; --box-shadow-color: #84f880;
} }
.T.mino { .T.mino {
--background-color: #9739A2; --background-color: #9739a2;
--box-shadow-color: #D958E9; --box-shadow-color: #d958e9;
} }
.Z.mino { .Z.mino {
--background-color: #EB4F65; --background-color: #eb4f65;
--box-shadow-color: #FF7F79; --box-shadow-color: #ff7f79;
} }
.ghost.mino { .ghost.mino {
@@ -86,8 +82,8 @@ tr.matrix td:not(.mino) {
} }
.locking.mino { .locking.mino {
--background-color: white; --background-color: white;
--box-shadow-color: #DDD; --box-shadow-color: #ddd;
} }
.locked.mino { .locked.mino {
@@ -122,4 +118,4 @@ tr.matrix td:not(.mino) {
to { to {
background-color: transparent; background-color: transparent;
} }
} }

73
css/old-school.css
View File

@@ -1,15 +1,15 @@
:root { :root {
--cell-size: 20px; --cell-size: 20px;
--sprite-size: 40px; --sprite-size: 40px;
} }
@font-face { @font-face {
font-family: "Early GameBoy"; font-family: 'Early GameBoy';
src: url("old-school/Early GameBoy.ttf"); src: url('old-school/Early GameBoy.ttf');
} }
#screenRow { #screenRow {
background-image: url("old-school/bg.png"); background-image: url('old-school/bg.png');
background-size: 10px; background-size: 10px;
padding: 40px 20px; padding: 40px 20px;
border: 3px inset black; border: 3px inset black;
@@ -21,9 +21,9 @@
} }
.card { .card {
background: #8D8E04; background: #8d8e04;
border-radius: 0; border-radius: 0;
border-image-source: url("old-school/border-sm.png"); border-image-source: url('old-school/border-sm.png');
border-image-slice: 25; border-image-slice: 25;
border-image-width: 13px; border-image-width: 13px;
border-image-repeat: repeat; border-image-repeat: repeat;
@@ -33,12 +33,12 @@
} }
.card-header { .card-header {
background: #8D8E04; background: #8d8e04;
} }
#matrixCard { #matrixCard {
background: #808302; background: #808302;
border-image-source: url("old-school/border-lg.png"); border-image-source: url('old-school/border-lg.png');
border-image-slice: 30; border-image-slice: 30;
border-image-width: 15px; border-image-width: 15px;
border-image-outset: 15px; border-image-outset: 15px;
@@ -48,16 +48,18 @@
.card, .card,
.card-header, .card-header,
#messagesSpan div { #messagesSpan div {
font-family: "Early GameBoy", monospace; font-family: 'Early GameBoy', monospace;
font-smooth: never; font-smooth: never;
-webkit-font-smoothing: none; -webkit-font-smoothing: none;
color: #254806; color: #254806;
text-shadow: -1px -1px 3px rgba(0, 0, 0, 40%), 1px 1px 1px rgba(0, 0, 0, 40%); text-shadow:
-1px -1px 3px rgba(0, 0, 0, 40%),
1px 1px 1px rgba(0, 0, 0, 40%);
} }
#statsTable { #statsTable {
font-size: .7em; font-size: 0.7em;
letter-spacing: -.1em; letter-spacing: -0.1em;
} }
#statsTable tr { #statsTable tr {
@@ -68,7 +70,7 @@
#statsTable th, #statsTable th,
#statsTable td { #statsTable td {
border: 0; border: 0;
padding: 0 .2rem; padding: 0 0.2rem;
} }
#statsTable td { #statsTable td {
@@ -77,7 +79,11 @@
} }
#messagesSpan { #messagesSpan {
text-shadow: -2px -2px #808302, -2px 2px #808302, 2px -2px #808302, 2px 2px #808302; text-shadow:
-2px -2px #808302,
-2px 2px #808302,
2px -2px #808302,
2px 2px #808302;
} }
.minoes-table td { .minoes-table td {
@@ -85,38 +91,40 @@
} }
.mino { .mino {
box-shadow: -2px -2px 5px rgba(0, 0, 0, 40%), 1px 1px 2px rgba(0, 0, 0, 40%); box-shadow:
-2px -2px 5px rgba(0, 0, 0, 40%),
1px 1px 2px rgba(0, 0, 0, 40%);
background-size: cover; background-size: cover;
background-image: url("old-school/sprites.png"); background-image: url('old-school/sprites.png');
background-position: calc(var(--sprite-pos) * var(--sprite-size)) 0px; background-position: calc(var(--sprite-pos) * var(--sprite-size)) 0px;
} }
.I.mino { .I.mino {
--sprite-pos: 0; --sprite-pos: 0;
} }
.J.mino { .J.mino {
--sprite-pos: 1; --sprite-pos: 1;
} }
.L.mino { .L.mino {
--sprite-pos: 2; --sprite-pos: 2;
} }
.O.mino { .O.mino {
--sprite-pos: 3; --sprite-pos: 3;
} }
.S.mino { .S.mino {
--sprite-pos: 4; --sprite-pos: 4;
} }
.T.mino { .T.mino {
--sprite-pos: 5; --sprite-pos: 5;
} }
.Z.mino { .Z.mino {
--sprite-pos: 6; --sprite-pos: 6;
} }
@keyframes blinker { @keyframes blinker {
@@ -139,18 +147,25 @@
} }
.hard-dropped-table-animation { .hard-dropped-table-animation {
animation: hard-dropped-table-animation steps(1) .2s; animation: hard-dropped-table-animation steps(1) 0.2s;
} }
@keyframes cleared-line-animation { @keyframes cleared-line-animation {
10%, 30%, 50%, 70%, 90% { 10%,
30%,
50%,
70%,
90% {
opacity: 0; opacity: 0;
} }
20%, 40%, 60%, 80% { 20%,
40%,
60%,
80% {
opacity: 100%; opacity: 100%;
} }
} }
tr.cleared-line-animation { tr.cleared-line-animation {
animation: cleared-line-animation ease-out .4s; animation: cleared-line-animation ease-out 0.4s;
} }

38
css/opera.css
View File

@@ -1,5 +1,5 @@
body { body {
--bs-gutter-x: 0; --bs-gutter-x: 0;
background: black !important; background: black !important;
} }
@@ -7,11 +7,11 @@ body {
gap: 0 !important; gap: 0 !important;
margin: 0; margin: 0;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: .1em; letter-spacing: 0.1em;
} }
#screenRow { #screenRow {
--bs-gutter-x: 0; --bs-gutter-x: 0;
} }
.card { .card {
@@ -22,7 +22,7 @@ body {
} }
.card-header, .card-header,
.card-header th{ .card-header th {
background: transparent; background: transparent;
font-weight: 400 !important; font-weight: 400 !important;
font-size: 1.3em; font-size: 1.3em;
@@ -30,7 +30,7 @@ body {
} }
#screenRow .table { #screenRow .table {
--bs-border-width: 0; --bs-border-width: 0;
} }
#holdTable { #holdTable {
@@ -76,7 +76,7 @@ body {
} }
td#timeCell { td#timeCell {
text-align: center; text-align: center;
} }
#matrixCard { #matrixCard {
@@ -95,38 +95,38 @@ td#timeCell {
} }
.I.mino { .I.mino {
background-color: #42AFE1; background-color: #42afe1;
border-color: #6CEAFF; border-color: #6ceaff;
} }
.J.mino { .J.mino {
background-color: #1165B5; background-color: #1165b5;
border-color: #339BFF; border-color: #339bff;
} }
.L.mino { .L.mino {
background-color: #F38927; background-color: #f38927;
border-color: #FFBA59; border-color: #ffba59;
} }
.O.mino { .O.mino {
background-color: #F6D03C; background-color: #f6d03c;
border-color: #FFFF7F; border-color: #ffff7f;
} }
.S.mino { .S.mino {
background-color: #32ee3e; background-color: #32ee3e;
border-color: #84F880; border-color: #84f880;
} }
.T.mino { .T.mino {
background-color: #9739A2; background-color: #9739a2;
border-color: #D958E9; border-color: #d958e9;
} }
.Z.mino { .Z.mino {
background-color: #EB4F65; background-color: #eb4f65;
border-color: #FF7F79; border-color: #ff7f79;
} }
.ghost.mino { .ghost.mino {

424
css/stereo.css
View File

@@ -6,38 +6,42 @@
} }
body { body {
background-image: url(stereo/bg.jpg), background-image:
radial-gradient(circle at center, url(stereo/bg.jpg),
#39444f 0%, radial-gradient(
#2c323b 25%, circle at center,
#293036 28%, #39444f 0%,
#252b32 34%, #2c323b 25%,
#242930 38%, #293036 28%,
#1a1d22 52%, #252b32 34%,
#191c22 53%, #242930 38%,
#151519 63%, #1a1d22 52%,
#141418 65%, #191c22 53%,
#0f0f12 74%, #151519 63%,
#0a0c0d 100%); #141418 65%,
background-repeat: space; #0f0f12 74%,
background-position: center; #0a0c0d 100%
background-size: cover; );
background-repeat: space;
background-position: center;
background-size: cover;
} }
#sceneDiv { #sceneDiv {
perspective: 500px; perspective: 500px;
cursor: grab; cursor: grab;
} }
#sceneDiv:active { #sceneDiv:active {
cursor: grabbing; cursor: grabbing;
} }
#screenRow { #screenRow {
--light-rX: calc(-1 * var(--rY) / 30); --light-rX: calc(-1 * var(--rY) / 30);
--light-rY: calc(var(--rX) / 20); --light-rY: calc(var(--rX) / 20);
display: block; display: block;
transform: translateZ(var(--tZ)) rotateX(calc((var(--rX)) * 1deg)) rotateY(calc((var(--rY)) * 1deg)); transform: translateZ(var(--tZ)) rotateX(calc((var(--rX)) * 1deg))
rotateY(calc((var(--rY)) * 1deg));
} }
#sceneDiv, #sceneDiv,
@@ -49,38 +53,37 @@ body {
.minoes-table tbody, .minoes-table tbody,
.minoes-table tr, .minoes-table tr,
.minoes-table td { .minoes-table td {
display: block; display: block;
transform-style: preserve-3d; transform-style: preserve-3d;
} }
#screenRow .col { #screenRow .col {
display: inline-block !important; display: inline-block !important;
width: max-content; width: max-content;
height: 100%; height: 100%;
vertical-align: top; vertical-align: top;
} }
.card { .card {
background: #36394180; background: #36394180;
} }
#matrixCard { #matrixCard {
background-image: none; background-image: none;
} }
#screenRow .card>* { #screenRow .card > * {
transform: translateZ(var(--cell-size)); transform: translateZ(var(--cell-size));
} }
#screenRow .card-header { #screenRow .card-header {
background-color: transparent; background-color: transparent;
border: none; border: none;
} }
.card, .card,
.card-header { .card-header {
text-shadow: text-shadow: calc(-0.3px * var(--rY)) calc(0.4px * var(--rX)) 5px #0008;
calc(-0.3px * var(--rY)) calc(0.4px * var(--rX)) 5px #0008;
} }
#holdTable .mino { #holdTable .mino {
@@ -95,35 +98,35 @@ body {
.minoes-table th, .minoes-table th,
.minoes-table td { .minoes-table td {
display: inline-block !important; display: inline-block !important;
width: max-content; width: max-content;
} }
.minoes-table tr { .minoes-table tr {
width: max-content; width: max-content;
height: var(--cell-size); height: var(--cell-size);
} }
#statsTable tr { #statsTable tr {
display: table; display: table;
width: 100%; width: 100%;
} }
#statsTable th, #statsTable th,
#statsTable td { #statsTable td {
display: table-cell; display: table-cell;
border: 0; border: 0;
} }
tr.matrix td:not(.mino) { tr.matrix td:not(.mino) {
border: 0; border: 0;
} }
.minoes-table td { .minoes-table td {
width: var(--cell-size); width: var(--cell-size);
height: var(--cell-size); height: var(--cell-size);
overflow: visible; overflow: visible;
position: relative; position: relative;
} }
.mino, .mino,
@@ -136,9 +139,9 @@ tr.matrix td:not(.mino) {
--light-y: calc(var(--light-rY) + var(--light-pY)); --light-y: calc(var(--light-rY) + var(--light-pY));
--center-color: hsla(var(--h), var(--s), calc(var(--l) * var(--light) * 1.1), var(--a)); --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)); --edge-color: hsla(var(--h), var(--s), calc(var(--l) * (var(--light) * 0.9)), var(--a));
background: var(--center-color); background: var(--center-color);
border-radius: 4px; border-radius: 4px;
border: 2px outset var(--center-color); border: 2px outset var(--center-color);
} }
.mino::before, .mino::before,
@@ -148,33 +151,29 @@ td.trail-animation::before,
td.trail-animation::after, td.trail-animation::after,
tr.cleared-line-animation td::before, tr.cleared-line-animation td::before,
tr.cleared-line-animation td::after { tr.cleared-line-animation td::after {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
display: block; display: block;
width: var(--cell-size); width: var(--cell-size);
height: var(--cell-size); height: var(--cell-size);
} }
/* Front face */ /* Front face */
.mino, .mino,
td.trail-animation { td.trail-animation {
--light: calc( --light: calc(1 + (var(--light-y) * 0.3) + (var(--light-x) * 0.2));
1 --center-x: calc(35% + var(--light-x) * 10%);
+ (var(--light-y) * 0.3) --center-y: calc(35% + var(--light-y) * 10%);
+ (var(--light-x) * 0.2) background: radial-gradient(
); circle at var(--center-x) var(--center-y),
--center-x: calc(35% + var(--light-x) * 10%); var(--center-color) 15%,
--center-y: calc(35% + var(--light-y) * 10%); var(--edge-color) 100%
background: radial-gradient( );
circle at var(--center-x) var(--center-y), box-shadow: 0 0 6px hsla(var(--h), var(--s), calc(var(--l) * var(--light) * 1.3), 40%);
var(--center-color) 15%, border-style: ridge;
var(--edge-color) 100% border-width: var(--rbw);
);
box-shadow: 0 0 6px hsla(var(--h), var(--s), calc(var(--l) * var(--light) * 1.3), 40%);
border-style: ridge;
border-width: var(--rbw);
} }
/* Left face */ /* Left face */
@@ -182,13 +181,9 @@ td.trail-animation {
td.trail-animation::before, td.trail-animation::before,
tr.cleared-line-animation td::before, tr.cleared-line-animation td::before,
.mino + .mino::before { .mino + .mino::before {
--light: calc( --light: calc(1.1 + (var(--light-x) * -0.2) + (var(--light-y) * 0.15));
1.1 transform: var(--t3d) rotateY(-90deg);
+ (var(--light-x) * -0.2) transform-origin: left;
+ (var(--light-y) * 0.15)
);
transform: var(--t3d) rotateY(-90deg);
transform-origin: left;
} }
/* Right face */ /* Right face */
@@ -196,61 +191,111 @@ tr.cleared-line-animation td::before,
.right .mino + .mino::before, .right .mino + .mino::before,
.right td.trail-animation::before, .right td.trail-animation::before,
.right tr.cleared-line-animation td::before { .right tr.cleared-line-animation td::before {
--light: calc( --light: calc(0.85 + (var(--light-x) * -0.2) + (var(--light-y) * -0.15));
0.85 --center-x: calc(65% + var(--light-x) * 10%);
+ (var(--light-x) * -0.2) --center-y: calc(35% + var(--light-y) * 10%);
+ (var(--light-y) * -0.15) filter: saturate(0.95);
); transform: translate3d(0, 0, var(--cell-size-opposite)) rotateY(-90deg);
--center-x: calc(65% + var(--light-x) * 10%); transform-origin: left;
--center-y: calc(35% + var(--light-y) * 10%);
filter: saturate(0.95);
transform: translate3d(0, 0, var(--cell-size-opposite)) rotateY(-90deg);
transform-origin: left;
} }
.right .mino:last-child::before { .right .mino:last-child::before {
transform: var(--t3d) rotateY(90deg) !important; transform: var(--t3d) rotateY(90deg) !important;
transform-origin: right !important; transform-origin: right !important;
} }
/* Top face */ /* Top face */
.mino::after, .mino::after,
td.trail-animation::after, td.trail-animation::after,
tr.cleared-line-animation td::after { tr.cleared-line-animation td::after {
--light: calc( --light: calc(1.5 + (var(--light-y) * 0.2));
1.5 transform: var(--t3d) rotateX(90deg);
+ (var(--light-y) * 0.2) transform-origin: top;
);
transform: var(--t3d) rotateX(90deg);
transform-origin: top;
} }
/* Bottom face */ /* Bottom face */
.bottom .mino::after, .bottom .mino::after,
.bottom td.trail-animation::after, .bottom td.trail-animation::after,
.bottom tr.cleared-line-animation td::after { .bottom tr.cleared-line-animation td::after {
--light: calc( --light: calc(1.1 + (var(--light-y) * -0.3));
1.1 --center-x: calc(65% + var(--light-x) * 10%);
+ (var(--light-y) * -0.3) --center-y: calc(65% + var(--light-y) * 10%);
); filter: saturate(0.95);
--center-x: calc(65% + var(--light-x) * 10%); transform: var(--t3d) rotateX(-90deg);
--center-y: calc(65% + var(--light-y) * 10%); transform-origin: bottom;
filter: saturate(0.95);
transform: var(--t3d) rotateX(-90deg);
transform-origin: bottom;
} }
.J, .J + :not(.mino) { --h: 210deg; --s: 78%; --l: 52%; --a: 0.75; } .J,
.L, .L + :not(.mino) { --h: 28deg; --s: 85%; --l: 52%; --a: 0.75; } .J + :not(.mino) {
.O, .O + :not(.mino) { --h: 48deg; --s: 88%; --l: 52%; --a: 0.75; } --h: 210deg;
.I, .I + :not(.mino) { --h: 200deg; --s: 70%; --l: 52%; --a: 0.75; } --s: 78%;
.S, .S + :not(.mino) { --h: 118deg; --s: 45%; --l: 52%; --a: 0.75; } --l: 52%;
.T, .T + :not(.mino) { --h: 293deg; --s: 48%; --l: 52%; --a: 0.75; } --a: 0.75;
.Z, .Z + :not(.mino) { --h: 352deg; --s: 75%; --l: 52%; --a: 0.75; } }
.L,
.L + :not(.mino) {
--h: 28deg;
--s: 85%;
--l: 52%;
--a: 0.75;
}
.O,
.O + :not(.mino) {
--h: 48deg;
--s: 88%;
--l: 52%;
--a: 0.75;
}
.I,
.I + :not(.mino) {
--h: 200deg;
--s: 70%;
--l: 52%;
--a: 0.75;
}
.S,
.S + :not(.mino) {
--h: 118deg;
--s: 45%;
--l: 52%;
--a: 0.75;
}
.T,
.T + :not(.mino) {
--h: 293deg;
--s: 48%;
--l: 52%;
--a: 0.75;
}
.Z,
.Z + :not(.mino) {
--h: 352deg;
--s: 75%;
--l: 52%;
--a: 0.75;
}
.ghost.mino, .ghost.mino + :not(.mino) { --h: 0deg; --s: 0%; --l: 55%; --a: 0.40; } .ghost.mino,
.locking.mino, .locking.mino + :not(.mino) { --h: 0deg; --s: 0%; --l: 92%; --a: 0.72; } .ghost.mino + :not(.mino) {
.disabled.mino, .disabled.mino + :not(.mino) { --h: 0deg; --s: 0%; --l: 45%; --a: 0.72; } --h: 0deg;
--s: 0%;
--l: 55%;
--a: 0.4;
}
.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;
}
#holdTable .J + :not(.mino), #holdTable .J + :not(.mino),
#holdTable .L + :not(.mino), #holdTable .L + :not(.mino),
@@ -262,13 +307,13 @@ tr.cleared-line-animation td::after {
#nextTable .S + :not(.mino), #nextTable .S + :not(.mino),
#nextTable .T + :not(.mino), #nextTable .T + :not(.mino),
#nextTable .Z + :not(.mino) { #nextTable .Z + :not(.mino) {
transform: translateX(50%); transform: translateX(50%);
} }
@keyframes trail-animation { @keyframes trail-animation {
from { from {
background-color: hsla(180, 100%, 100%, 0.1); background-color: hsla(180, 100%, 100%, 0.1);
border-color: hsla(180, 100%, 100%, 0.1); border-color: hsla(180, 100%, 100%, 0.1);
} }
to { to {
background-color: transparent; background-color: transparent;
@@ -278,111 +323,114 @@ tr.cleared-line-animation td::after {
td.trail-animation::before, td.trail-animation::before,
td.trail-animation::after { td.trail-animation::after {
animation: trail-animation ease-out .3s; animation: trail-animation ease-out 0.3s;
} }
@keyframes locked-animation { @keyframes locked-animation {
from { from {
--h: 0deg; --s: 0%; --l: 100%; --a: 1; --h: 0deg;
box-shadow: 0 0 10px hsla(180, 100%, 100%, 0.2); --s: 0%;
--l: 100%;
--a: 1;
box-shadow: 0 0 10px hsla(180, 100%, 100%, 0.2);
} }
} }
.locked.mino::before, .locked.mino::before,
.locked.mino::after { .locked.mino::after {
animation: locked-animation; animation: locked-animation;
animation-duration: .2s; animation-duration: 0.2s;
} }
@keyframes cleared-line-animation { @keyframes cleared-line-animation {
from { from {
background-color: white !important; background-color: white !important;
box-shadow: 0 0 0 white; box-shadow: 0 0 0 white;
} }
to { to {
background-color: #fff0; background-color: #fff0;
box-shadow: 0 0 100px transparent; box-shadow: 0 0 100px transparent;
} }
} }
tr.cleared-line-animation td::before, tr.cleared-line-animation td::before,
tr.cleared-line-animation td::after { tr.cleared-line-animation td::after {
animation: cleared-line-animation ease-out .3s; animation: cleared-line-animation ease-out 0.3s;
} }
@keyframes show-level-animation { @keyframes show-level-animation {
from { from {
opacity: 1; opacity: 1;
transform: translateY(200%); transform: translateY(200%);
} }
50% { 50% {
transform: translateY(0) scaleY(1); transform: translateY(0) scaleY(1);
line-height: var(--bs-body-line-height); line-height: var(--bs-body-line-height);
} }
to { to {
opacity: 1; opacity: 1;
transform: translateY(-100%) scaleY(0); transform: translateY(-100%) scaleY(0);
line-height: 0; line-height: 0;
} }
} }
@keyframes zoom-in-animation { @keyframes zoom-in-animation {
from { from {
opacity: 1; opacity: 1;
transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3);
line-height: var(--bs-body-line-height); line-height: var(--bs-body-line-height);
} }
30% { 30% {
transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);
} }
80% { 80% {
transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);
line-height: var(--bs-body-line-height); line-height: var(--bs-body-line-height);
} }
to { to {
opacity: 1; opacity: 1;
transform: scale3d(1.5, 0, 1); transform: scale3d(1.5, 0, 1);
line-height: 0; line-height: 0;
} }
} }
@keyframes rotate-in-animation { @keyframes rotate-in-animation {
0% { 0% {
opacity: 1; opacity: 1;
transform: rotate(200deg); transform: rotate(200deg);
line-height: var(--bs-body-line-height); line-height: var(--bs-body-line-height);
} }
30% { 30% {
transform: translateZ(0) scale3d(1, 1, 1); transform: translateZ(0) scale3d(1, 1, 1);
} }
80% { 80% {
transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);
line-height: var(--bs-body-line-height); line-height: var(--bs-body-line-height);
} }
to { to {
opacity: 1; opacity: 1;
transform: scale3d(1.5, 0, 1); transform: scale3d(1.5, 0, 1);
line-height: 0; line-height: 0;
} }
} }
@keyframes game-over-animation { @keyframes game-over-animation {
from { from {
opacity: 1; opacity: 1;
transform: translateY(200%); transform: translateY(200%);
} }
to { to {
opacity: 1; opacity: 1;
transform: translateY(0) scaleY(1); transform: translateY(0) scaleY(1);
line-height: var(--bs-body-line-height); line-height: var(--bs-body-line-height);
} }
} }

36
css/synthwave.css
View File

@@ -3,20 +3,20 @@ body {
background-size: cover; background-size: cover;
} }
body[data-bs-theme="dark"] { body[data-bs-theme='dark'] {
--bs-body-bg: #2125296b; --bs-body-bg: #2125296b;
} }
.btn-dark { .btn-dark {
--bs-btn-bg: #2125296b; --bs-btn-bg: #2125296b;
} }
.card { .card {
background: #25292d66; background: #25292d66;
} }
#matrixCard { #matrixCard {
background-image: radial-gradient(#2226, #25292d66); background-image: radial-gradient(#2226, #25292d66);
} }
.card, .card,
@@ -26,8 +26,8 @@ body[data-bs-theme="dark"] {
} }
.minoes-table { .minoes-table {
background: transparent; background: transparent;
border-spacing: 2px; border-spacing: 2px;
} }
#matrixTable { #matrixTable {
@@ -35,17 +35,17 @@ body[data-bs-theme="dark"] {
} }
#matrixTable td:not(.mino) { #matrixTable td:not(.mino) {
border-color: #8881; border-color: #8881;
border-top: none; border-top: none;
border-bottom: none; border-bottom: none;
} }
.mino { .mino {
background: var(--color); background: var(--color);
border: 3px solid var(--border); border: 3px solid var(--border);
border-radius: 6px; border-radius: 6px;
box-shadow: 0 0 8px var(--border); box-shadow: 0 0 8px var(--border);
filter: blur(0.5px); filter: blur(0.5px);
} }
.I { .I {
@@ -79,11 +79,11 @@ body[data-bs-theme="dark"] {
} }
.Z { .Z {
--color: #E67D8666; --color: #e67d8666;
--border: #E67D86; --border: #e67d86;
} }
.ghost { .ghost {
--color: #fff4; --color: #fff4;
--border: #fff5; --border: #fff5;
} }

46
css/tetrio-skin.css
View File

@@ -1,7 +1,7 @@
:root { :root {
--cell-size: 30px; --cell-size: 30px;
--sprite-size: round(100% / 11, 1px); --sprite-size: round(100% / 11, 1px);
--skin-url: url(https://you.have.fail/ed/at/tetrioplus/data/content/skin/Haley%20Halcyon/tetrio_gameboy_plus.svg); --skin-url: url(https://you.have.fail/ed/at/tetrioplus/data/content/skin/Haley%20Halcyon/tetrio_gameboy_plus.svg);
} }
tr.matrix td:not(.mino) { tr.matrix td:not(.mino) {
@@ -17,40 +17,40 @@ tr.matrix td:not(.mino) {
} }
.I { .I {
--sprite-pos: 4; --sprite-pos: 4;
} }
.J { .J {
--sprite-pos: 5; --sprite-pos: 5;
} }
.L { .L {
--sprite-pos: 1; --sprite-pos: 1;
} }
.O { .O {
--sprite-pos: 2; --sprite-pos: 2;
} }
.S { .S {
--sprite-pos: 3; --sprite-pos: 3;
} }
.T { .T {
--sprite-pos: 6; --sprite-pos: 6;
} }
.Z { .Z {
--sprite-pos: 0; --sprite-pos: 0;
} }
.ghost { .ghost {
--sprite-pos: 7; --sprite-pos: 7;
opacity: 40%; opacity: 40%;
} }
.disabled { .disabled {
--sprite-pos: 8; --sprite-pos: 8;
} }
.locking.mino { .locking.mino {
@@ -62,23 +62,7 @@ tr.matrix td:not(.mino) {
box-shadow: 4px 4px 10px #0002; box-shadow: 4px 4px 10px #0002;
} }
.option { .preview {
--cell-size: 24px; --cell-size: 24px;
display: inline-block;
height: var(--cell-size); height: var(--cell-size);
} }
.result {
--nb-sprites: 9;
}
.select2-container:not(.select2-container--disabled) .selection {
--padded-cell-size: calc(var(--cell-size) + 1px);
--nb-sprites: 4;
--sprite-pos: 2;
width: calc(var(--nb-sprites) * var(--padded-cell-size) - 1px);
background-position-x: calc(-1 * var(--sprite-pos) * var(--padded-cell-size));
background-image: var(--skin-url);
background-size: cover;
background-repeat: no-repeat;
}

2
index.html
View File

@@ -93,7 +93,7 @@
</div> </div>
<div class="col-4"> <div class="col-4">
<select name="skinURL" id="skinURLSelect" class="form-select" <select name="skinURL" id="skinURLSelect" class="form-select"
oninput="document.documentElement.style.setProperty('--skin-url', `url(${encodeURI(this.value)})`)"> oninput="document.documentElement.style.setProperty('--skin-url', `url(${this.value})`)">
</select> </select>
</div> </div>
<label for="skinURLSelect" class="col-2 col-form-label">Sample</label> <label for="skinURLSelect" class="col-2 col-form-label">Sample</label>

20
js/app.js
View File

@@ -318,14 +318,19 @@ sceneDiv.onwheel = function (event) {
screenRow.style.setProperty('--tZ', tZ + 'px'); screenRow.style.setProperty('--tZ', tZ + 'px');
}; };
const ImageURLPattern = /^(https?:\/\/.*\.(?:png|jpg|jpeg|gif|bmp|webp|svg))$/i
$.fn.select2.defaults.set("templateResult", (state) => $.fn.select2.defaults.set("templateResult", (state) =>
state.id state.id
? $(`<img class="option result" src="${state.id}" title="${state.text}" loading="lazy"/>`) ? $(`<img class="preview" src="${state.id}" title="${state.text}" loading="lazy"/>`)
: state.text : state.text
) )
$.fn.select2.defaults.set("templateSelection", (state) => $.fn.select2.defaults.set("templateSelection", (state) =>
state.id state.id
? $(`<span class="option selection" style="--skin-url: url(${state.id})" title="${state.text}" alt="${state.id}" loading="lazy"></span>`) ? $(`
<table class="minoes-table preview" style="--skin-url: url(${state.id});">
<tr><td class="Z mino"></td><td class="O mino"></td><td class="T mino"></td><td class="I mino"></td></tr>
</table>
`)
: state.text : state.text
) )
$.fn.select2.defaults.set("theme", "bootstrap-5") $.fn.select2.defaults.set("theme", "bootstrap-5")
@@ -336,7 +341,7 @@ $.fn.select2.defaults.set("placeholder", "URL de l'image")
$.fn.select2.defaults.set("tags", true) $.fn.select2.defaults.set("tags", true)
$.fn.select2.defaults.set("createTag", function (params) { $.fn.select2.defaults.set("createTag", function (params) {
const url = encodeURI(params.term); const url = encodeURI(params.term);
if (/^(https?:\/\/.*\.(?:png|jpg|jpeg|gif|bmp|webp|svg))$/i.test(url)) { if (ImageURLPattern.test(url)) {
return { return {
id: url, id: url,
text: 'Source externe', text: 'Source externe',
@@ -349,6 +354,7 @@ stylesheetSelect.oninput = function (event) {
selectedStyleSheet.href = this.value; selectedStyleSheet.href = this.value;
$("#skinURLSelect").empty(); $("#skinURLSelect").empty();
switch (this.value) { switch (this.value) {
case 'css/jstris-skin.css': case 'css/jstris-skin.css':
skinURLSelect.disabled = false; skinURLSelect.disabled = false;
@@ -362,7 +368,7 @@ stylesheetSelect.oninput = function (event) {
text: group, text: group,
children: json[group].map(skin => ({ children: json[group].map(skin => ({
id: skin.link, id: skin.link,
text: `${skin.name} (${skin.author})\n${skin.description}`, text: `${skin.name} (${skin.author})`,
})), })),
}; };
data.push(groupData); data.push(groupData);
@@ -371,6 +377,7 @@ stylesheetSelect.oninput = function (event) {
$('#skinURLSelect').select2({data: data}); $('#skinURLSelect').select2({data: data});
}); });
break; break;
case 'css/tetrio-skin.css': case 'css/tetrio-skin.css':
skinURLSelect.disabled = false; skinURLSelect.disabled = false;
@@ -381,10 +388,11 @@ stylesheetSelect.oninput = function (event) {
.filter((item) => (item.type == "skin" && item.format == "tetrioraster")) .filter((item) => (item.type == "skin" && item.format == "tetrioraster"))
.map((skin) => { .map((skin) => {
return { return {
id: `https://you.have.fail/tetrioplus/data/${skin.path}`, id: encodeURI(`https://you.have.fail/tetrioplus/data/${skin.path}`),
text:`${skin.name} (${skin.author})` text:`${skin.name} (${skin.author})\n${skin.description}`
} }
}) })
.filter((option) => ImageURLPattern.test(option.id))
$('#skinURLSelect').select2({data: data}); $('#skinURLSelect').select2({data: data});
}) })
break; break;