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

27
css/_common.css
View File

@@ -11,7 +11,7 @@ body {
@supports (backdrop-filter: blur()) {
.modal::before {
content: "";
content: '';
position: absolute;
top: 0;
bottom: 0;
@@ -31,7 +31,7 @@ body {
}
#matrixCard {
background-image: radial-gradient(#222, #25292d)
background-image: radial-gradient(#222, #25292d);
}
.card-header {
@@ -71,7 +71,7 @@ td#timeCell {
}
}
.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) {
@@ -113,26 +113,32 @@ td {
}
td.trail-animation {
animation: trail-animation ease-out .3s;
animation: trail-animation ease-out 0.3s;
}
@keyframes cleared-line-animation {
from {
background-color: white;
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% {
box-shadow: -60px 0 2px #adb5bd66, 60px 0 2px #adb5bd66;
box-shadow:
-60px 0 2px #adb5bd66,
60px 0 2px #adb5bd66;
}
to {
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 {
animation: cleared-line-animation ease-out .3s;
animation: cleared-line-animation ease-out 0.3s;
}
#holdTable .J,
@@ -193,7 +199,6 @@ tr.cleared-line-animation {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
line-height: var(--bs-body-line-height);
}
30% {
opacity: 1;
@@ -236,13 +241,13 @@ tr.cleared-line-animation {
#messagesSpan div.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;
}
#messagesSpan div.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;
animation-duration: 1s;
}

9
css/electro.css
View File

@@ -1,9 +1,9 @@
body {
background-image: url("electro/bg.jpg");
background-image: url('electro/bg.jpg');
background-size: cover;
}
body[data-bs-theme="dark"] {
body[data-bs-theme='dark'] {
--bs-body-bg: #2125296b;
}
@@ -30,7 +30,7 @@ tr.matrix td:not(.mino) {
}
.mino:not(.ghost):not(.locking):before {
content: "";
content: '';
position: absolute;
z-index: -1;
inset: 0;
@@ -42,7 +42,8 @@ tr.matrix td:not(.mino) {
background: radial-gradient(
at var(--glint-x) var(--glint-y),
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,
linear-gradient(#fff 0 0);

50
css/jazz.css
View File

@@ -7,7 +7,7 @@ body {
gap: 0 !important;
margin: 0;
text-transform: uppercase;
letter-spacing: .1em;
letter-spacing: 0.1em;
}
#screenRow {
@@ -40,12 +40,8 @@ body {
.minoes-table {
display: flex;
flex-direction: column;
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%));
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 {
@@ -128,45 +124,45 @@ tr.matrix td:not(.mino) {
}
.I.mino {
background-color: #42AFE1;
border-color: #6CEAFF;
--box-shadow-color: #6CEAFF;
background-color: #42afe1;
border-color: #6ceaff;
--box-shadow-color: #6ceaff;
}
.J.mino {
background-color: #1165B5;
border-color: #339BFF;
--box-shadow-color: #339BFF;
background-color: #1165b5;
border-color: #339bff;
--box-shadow-color: #339bff;
}
.L.mino {
background-color: #F38927;
border-color: #FFBA59;
--box-shadow-color: #FFBA59;
background-color: #f38927;
border-color: #ffba59;
--box-shadow-color: #ffba59;
}
.O.mino {
background-color: #F6D03C;
border-color: #FFFF7F;
--box-shadow-color: #FFFF7F;
background-color: #f6d03c;
border-color: #ffff7f;
--box-shadow-color: #ffff7f;
}
.S.mino {
background-color: #32ee3e;
border-color: #84F880;
--box-shadow-color: #84F880;
border-color: #84f880;
--box-shadow-color: #84f880;
}
.T.mino {
background-color: #9739A2;
border-color: #D958E9;
--box-shadow-color: #D958E9;
background-color: #9739a2;
border-color: #d958e9;
--box-shadow-color: #d958e9;
}
.Z.mino {
background-color: #EB4F65;
border-color: #FF7F79;
--box-shadow-color: #FF7F79;
background-color: #eb4f65;
border-color: #ff7f79;
--box-shadow-color: #ff7f79;
}
.ghost.mino {

6
css/jazz2.css
View File

@@ -46,7 +46,7 @@ tr.matrix td:not(.mino) {
.L.mino {
background-color: #fa9b23;
--box-shadow-color: #FFBA59;
--box-shadow-color: #ffba59;
}
.O.mino {
@@ -56,7 +56,7 @@ tr.matrix td:not(.mino) {
.S.mino {
background-color: #01a493;
--box-shadow-color: #03e7d3;;
--box-shadow-color: #03e7d3;
}
.T.mino {
@@ -66,7 +66,7 @@ tr.matrix td:not(.mino) {
.Z.mino {
background-color: #ee2b58;
--box-shadow-color: #fd4487;;
--box-shadow-color: #fd4487;
}
.ghost.mino {

20
css/jstris-skin.css
View File

@@ -1,6 +1,6 @@
:root {
--cell-size: 24px;
--sprite-size: calc(100% / 8);
--sprite-size: round(100% / 8, 1px);
--skin-url: url(https://i.imgur.com/HqGYC5G.png);
}
@@ -75,21 +75,7 @@ tr.matrix td:not(.mino) {
box-shadow: 4px 4px 10px #0002;
}
.option {
display: inline-block;
.preview {
--cell-size: 24px;
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;
}

38
css/minimal.css
View File

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

53
css/old-school.css
View File

@@ -4,12 +4,12 @@
}
@font-face {
font-family: "Early GameBoy";
src: url("old-school/Early GameBoy.ttf");
font-family: 'Early GameBoy';
src: url('old-school/Early GameBoy.ttf');
}
#screenRow {
background-image: url("old-school/bg.png");
background-image: url('old-school/bg.png');
background-size: 10px;
padding: 40px 20px;
border: 3px inset black;
@@ -21,9 +21,9 @@
}
.card {
background: #8D8E04;
background: #8d8e04;
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-width: 13px;
border-image-repeat: repeat;
@@ -33,12 +33,12 @@
}
.card-header {
background: #8D8E04;
background: #8d8e04;
}
#matrixCard {
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-width: 15px;
border-image-outset: 15px;
@@ -48,16 +48,18 @@
.card,
.card-header,
#messagesSpan div {
font-family: "Early GameBoy", monospace;
font-family: 'Early GameBoy', monospace;
font-smooth: never;
-webkit-font-smoothing: none;
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 {
font-size: .7em;
letter-spacing: -.1em;
font-size: 0.7em;
letter-spacing: -0.1em;
}
#statsTable tr {
@@ -68,7 +70,7 @@
#statsTable th,
#statsTable td {
border: 0;
padding: 0 .2rem;
padding: 0 0.2rem;
}
#statsTable td {
@@ -77,7 +79,11 @@
}
#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 {
@@ -85,9 +91,11 @@
}
.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-image: url("old-school/sprites.png");
background-image: url('old-school/sprites.png');
background-position: calc(var(--sprite-pos) * var(--sprite-size)) 0px;
}
@@ -139,18 +147,25 @@
}
.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 {
10%, 30%, 50%, 70%, 90% {
10%,
30%,
50%,
70%,
90% {
opacity: 0;
}
20%, 40%, 60%, 80% {
20%,
40%,
60%,
80% {
opacity: 100%;
}
}
tr.cleared-line-animation {
animation: cleared-line-animation ease-out .4s;
animation: cleared-line-animation ease-out 0.4s;
}

28
css/opera.css
View File

@@ -7,7 +7,7 @@ body {
gap: 0 !important;
margin: 0;
text-transform: uppercase;
letter-spacing: .1em;
letter-spacing: 0.1em;
}
#screenRow {
@@ -95,38 +95,38 @@ td#timeCell {
}
.I.mino {
background-color: #42AFE1;
border-color: #6CEAFF;
background-color: #42afe1;
border-color: #6ceaff;
}
.J.mino {
background-color: #1165B5;
border-color: #339BFF;
background-color: #1165b5;
border-color: #339bff;
}
.L.mino {
background-color: #F38927;
border-color: #FFBA59;
background-color: #f38927;
border-color: #ffba59;
}
.O.mino {
background-color: #F6D03C;
border-color: #FFFF7F;
background-color: #f6d03c;
border-color: #ffff7f;
}
.S.mino {
background-color: #32ee3e;
border-color: #84F880;
border-color: #84f880;
}
.T.mino {
background-color: #9739A2;
border-color: #D958E9;
background-color: #9739a2;
border-color: #d958e9;
}
.Z.mino {
background-color: #EB4F65;
border-color: #FF7F79;
background-color: #eb4f65;
border-color: #ff7f79;
}
.ghost.mino {

134
css/stereo.css
View File

@@ -6,8 +6,10 @@
}
body {
background-image: url(stereo/bg.jpg),
radial-gradient(circle at center,
background-image:
url(stereo/bg.jpg),
radial-gradient(
circle at center,
#39444f 0%,
#2c323b 25%,
#293036 28%,
@@ -18,7 +20,8 @@ body {
#151519 63%,
#141418 65%,
#0f0f12 74%,
#0a0c0d 100%);
#0a0c0d 100%
);
background-repeat: space;
background-position: center;
background-size: cover;
@@ -37,7 +40,8 @@ body {
--light-rX: calc(-1 * var(--rY) / 30);
--light-rY: calc(var(--rX) / 20);
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,
@@ -79,8 +83,7 @@ body {
.card,
.card-header {
text-shadow:
calc(-0.3px * var(--rY)) calc(0.4px * var(--rX)) 5px #0008;
text-shadow: calc(-0.3px * var(--rY)) calc(0.4px * var(--rX)) 5px #0008;
}
#holdTable .mino {
@@ -160,11 +163,7 @@ tr.cleared-line-animation td::after {
/* Front face */
.mino,
td.trail-animation {
--light: calc(
1
+ (var(--light-y) * 0.3)
+ (var(--light-x) * 0.2)
);
--light: calc(1 + (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(
@@ -182,11 +181,7 @@ td.trail-animation {
td.trail-animation::before,
tr.cleared-line-animation td::before,
.mino + .mino::before {
--light: calc(
1.1
+ (var(--light-x) * -0.2)
+ (var(--light-y) * 0.15)
);
--light: calc(1.1 + (var(--light-x) * -0.2) + (var(--light-y) * 0.15));
transform: var(--t3d) rotateY(-90deg);
transform-origin: left;
}
@@ -196,11 +191,7 @@ tr.cleared-line-animation td::before,
.right .mino + .mino::before,
.right td.trail-animation::before,
.right tr.cleared-line-animation td::before {
--light: calc(
0.85
+ (var(--light-x) * -0.2)
+ (var(--light-y) * -0.15)
);
--light: calc(0.85 + (var(--light-x) * -0.2) + (var(--light-y) * -0.15));
--center-x: calc(65% + var(--light-x) * 10%);
--center-y: calc(35% + var(--light-y) * 10%);
filter: saturate(0.95);
@@ -217,10 +208,7 @@ tr.cleared-line-animation td::before,
.mino::after,
td.trail-animation::after,
tr.cleared-line-animation td::after {
--light: calc(
1.5
+ (var(--light-y) * 0.2)
);
--light: calc(1.5 + (var(--light-y) * 0.2));
transform: var(--t3d) rotateX(90deg);
transform-origin: top;
}
@@ -229,10 +217,7 @@ tr.cleared-line-animation td::after {
.bottom .mino::after,
.bottom td.trail-animation::after,
.bottom tr.cleared-line-animation td::after {
--light: calc(
1.1
+ (var(--light-y) * -0.3)
);
--light: calc(1.1 + (var(--light-y) * -0.3));
--center-x: calc(65% + var(--light-x) * 10%);
--center-y: calc(65% + var(--light-y) * 10%);
filter: saturate(0.95);
@@ -240,17 +225,77 @@ tr.cleared-line-animation td::after {
transform-origin: bottom;
}
.J, .J + :not(.mino) { --h: 210deg; --s: 78%; --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; }
.J,
.J + :not(.mino) {
--h: 210deg;
--s: 78%;
--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; }
.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; }
.ghost.mino,
.ghost.mino + :not(.mino) {
--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 .L + :not(.mino),
@@ -278,12 +323,15 @@ tr.cleared-line-animation td::after {
td.trail-animation::before,
td.trail-animation::after {
animation: trail-animation ease-out .3s;
animation: trail-animation ease-out 0.3s;
}
@keyframes locked-animation {
from {
--h: 0deg; --s: 0%; --l: 100%; --a: 1;
--h: 0deg;
--s: 0%;
--l: 100%;
--a: 1;
box-shadow: 0 0 10px hsla(180, 100%, 100%, 0.2);
}
}
@@ -291,7 +339,7 @@ td.trail-animation::after {
.locked.mino::before,
.locked.mino::after {
animation: locked-animation;
animation-duration: .2s;
animation-duration: 0.2s;
}
@keyframes cleared-line-animation {
@@ -307,7 +355,7 @@ td.trail-animation::after {
tr.cleared-line-animation td::before,
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 {

6
css/synthwave.css
View File

@@ -3,7 +3,7 @@ body {
background-size: cover;
}
body[data-bs-theme="dark"] {
body[data-bs-theme='dark'] {
--bs-body-bg: #2125296b;
}
@@ -79,8 +79,8 @@ body[data-bs-theme="dark"] {
}
.Z {
--color: #E67D8666;
--border: #E67D86;
--color: #e67d8666;
--border: #e67d86;
}
.ghost {

18
css/tetrio-skin.css
View File

@@ -62,23 +62,7 @@ tr.matrix td:not(.mino) {
box-shadow: 4px 4px 10px #0002;
}
.option {
.preview {
--cell-size: 24px;
display: inline-block;
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 class="col-4">
<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>
</div>
<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');
};
const ImageURLPattern = /^(https?:\/\/.*\.(?:png|jpg|jpeg|gif|bmp|webp|svg))$/i
$.fn.select2.defaults.set("templateResult", (state) =>
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
)
$.fn.select2.defaults.set("templateSelection", (state) =>
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
)
$.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("createTag", function (params) {
const url = encodeURI(params.term);
if (/^(https?:\/\/.*\.(?:png|jpg|jpeg|gif|bmp|webp|svg))$/i.test(url)) {
if (ImageURLPattern.test(url)) {
return {
id: url,
text: 'Source externe',
@@ -349,6 +354,7 @@ stylesheetSelect.oninput = function (event) {
selectedStyleSheet.href = this.value;
$("#skinURLSelect").empty();
switch (this.value) {
case 'css/jstris-skin.css':
skinURLSelect.disabled = false;
@@ -362,7 +368,7 @@ stylesheetSelect.oninput = function (event) {
text: group,
children: json[group].map(skin => ({
id: skin.link,
text: `${skin.name} (${skin.author})\n${skin.description}`,
text: `${skin.name} (${skin.author})`,
})),
};
data.push(groupData);
@@ -371,6 +377,7 @@ stylesheetSelect.oninput = function (event) {
$('#skinURLSelect').select2({data: data});
});
break;
case 'css/tetrio-skin.css':
skinURLSelect.disabled = false;
@@ -381,10 +388,11 @@ stylesheetSelect.oninput = function (event) {
.filter((item) => (item.type == "skin" && item.format == "tetrioraster"))
.map((skin) => {
return {
id: `https://you.have.fail/tetrioplus/data/${skin.path}`,
text:`${skin.name} (${skin.author})`
id: encodeURI(`https://you.have.fail/tetrioplus/data/${skin.path}`),
text:`${skin.name} (${skin.author})\n${skin.description}`
}
})
.filter((option) => ImageURLPattern.test(option.id))
$('#skinURLSelect').select2({data: data});
})
break;