more sounds

css/_common.css

@@ -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;
 }

css/electro.css

@@ -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);

css/jazz.css

@@ -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: 
+    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 {
@@ -128,45 +124,45 @@ tr.matrix td:not(.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 {
-    background-color: #1165B5;
+    background-color: #1165b5;
-    border-color: #339BFF;
+    border-color: #339bff;
-    --box-shadow-color: #339BFF;
+  --box-shadow-color: #339bff;
 }
 
 .L.mino {
-    background-color: #F38927;
+    background-color: #f38927;
-    border-color: #FFBA59;
+    border-color: #ffba59;
-    --box-shadow-color: #FFBA59;
+  --box-shadow-color: #ffba59;
 }
 
 .O.mino {
-    background-color: #F6D03C;
+    background-color: #f6d03c;
-    border-color: #FFFF7F;
+    border-color: #ffff7f;
-    --box-shadow-color: #FFFF7F;
+  --box-shadow-color: #ffff7f;
 }
 
 .S.mino {
     background-color: #32ee3e;
-    border-color: #84F880;
+    border-color: #84f880;
-    --box-shadow-color: #84F880;
+  --box-shadow-color: #84f880;
 }
 
 .T.mino {
-    background-color: #9739A2;
+    background-color: #9739a2;
-    border-color: #D958E9;
+    border-color: #d958e9;
-    --box-shadow-color: #D958E9;
+  --box-shadow-color: #d958e9;
 }
 
 .Z.mino {
-    background-color: #EB4F65;
+    background-color: #eb4f65;
-    border-color: #FF7F79;
+    border-color: #ff7f79;
-    --box-shadow-color: #FF7F79;
+  --box-shadow-color: #ff7f79;
 }
 
 .ghost.mino {

css/jazz2.css

@@ -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 {

css/jstris-skin.css

@@ -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 {
+.preview {
-    display: inline-block;
+  --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;
-}

css/minimal.css

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

css/old-school.css

@@ -4,12 +4,12 @@
 }
 
 @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 {
-    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;
+    font-size: 0.7em;
-    letter-spacing: -.1em;
+    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;
 }

css/opera.css

@@ -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;
+    background-color: #42afe1;
-    border-color: #6CEAFF;
+    border-color: #6ceaff;
 }
 
 .J.mino {
-    background-color: #1165B5;
+    background-color: #1165b5;
-    border-color: #339BFF;
+    border-color: #339bff;
 }
 
 .L.mino {
-    background-color: #F38927;
+    background-color: #f38927;
-    border-color: #FFBA59;
+    border-color: #ffba59;
 }
 
 .O.mino {
-    background-color: #F6D03C;
+    background-color: #f6d03c;
-    border-color: #FFFF7F;
+    border-color: #ffff7f;
 }
 
 .S.mino {
     background-color: #32ee3e;
-    border-color: #84F880;
+    border-color: #84f880;
 }
 
 .T.mino {
-    background-color: #9739A2;
+    background-color: #9739a2;
-    border-color: #D958E9;
+    border-color: #d958e9;
 }
 
 .Z.mino {
-    background-color: #EB4F65;
+    background-color: #eb4f65;
-    border-color: #FF7F79;
+    border-color: #ff7f79;
 }
 
 .ghost.mino {

css/stereo.css

@@ -6,8 +6,10 @@
 }
 
 body {
-  background-image: url(stereo/bg.jpg),
+    background-image:
-    radial-gradient(circle at center,
+        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:
+    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 {
@@ -160,11 +163,7 @@ tr.cleared-line-animation td::after {
 /* Front face */
 .mino,
 td.trail-animation {
-  --light: calc(
+  --light: calc(1 + (var(--light-y) * 0.3) + (var(--light-x) * 0.2));
-    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(
+  --light: calc(1.1 + (var(--light-x) * -0.2) + (var(--light-y) * 0.15));
-    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(
+  --light: calc(0.85 + (var(--light-x) * -0.2) + (var(--light-y) * -0.15));
-    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(
+  --light: calc(1.5 + (var(--light-y) * 0.2));
-    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(
+  --light: calc(1.1 + (var(--light-y) * -0.3));
-    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; }
+.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 .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 {

css/synthwave.css

@@ -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;
+  --color: #e67d8666;
-  --border: #E67D86;
+  --border: #e67d86;
 }
 
 .ghost {

css/tetrio-skin.css

@@ -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;
-}

index.html

@@ -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>
@@ -247,11 +247,58 @@
       <img src="favicons/T-0.png"/><img src="favicons/T-1.png"/><img src="favicons/T-2.png"/><img src="favicons/T-3.png"/>
       <img src="favicons/Z-0.png"/><img src="favicons/Z-1.png"/><img src="favicons/Z-2.png"/><img src="favicons/Z-3.png"/>
 
-      <audio id="wallSound"      src="sounds/808K_A.wav" preload="auto" type="audio/wav"></audio>
+      <audio id = "btb_1"              src = "snd/btb_1.ogg"              preload = "auto" type = "audio/ogg"></audio>
-      <audio id="hardDropSound"  src="sounds/909S.wav"   preload="auto" type="audio/wav"></audio>
+      <audio id = "btb_2"              src = "snd/btb_2.ogg"              preload = "auto" type = "audio/ogg"></audio>
-      <audio id="lineClearSound" src="sounds/808COW.wav" preload="auto" type="audio/wav"></audio>
+      <audio id = "btb_3"              src = "snd/btb_3.ogg"              preload = "auto" type = "audio/ogg"></audio>
-      <audio id="tSpinSound"     src="sounds/78GUIR.wav" preload="auto" type="audio/wav"></audio>
+      <audio id = "btb_break"          src = "snd/btb_break.ogg"          preload = "auto" type = "audio/ogg"></audio>
-      <audio id="quatuorSound"   src="sounds/BRRDC1.wav" preload="auto" type="audio/wav"></audio>
+      <audio id = "clearbtb"           src = "snd/clearbtb.ogg"           preload = "auto" type = "audio/ogg"></audio>
+      <audio id = "clearline"          src = "snd/clearline.ogg"          preload = "auto" type = "audio/ogg"></audio>
+      <audio id = "clearquad"          src = "snd/clearquad.ogg"          preload = "auto" type = "audio/ogg"></audio>
+      <audio id = "clearspin"          src = "snd/clearspin.ogg"          preload = "auto" type = "audio/ogg"></audio>
+      <audio id = "combo_1_power"      src = "snd/combo_1_power.mp3"      preload = "auto" type = "audio/mp3"></audio>
+      <audio id = "combo_1"            src = "snd/combo_1.mp3"            preload = "auto" type = "audio/mp3"></audio>
+      <audio id = "combo_10_power"     src = "snd/combo_10_power.mp3"     preload = "auto" type = "audio/mp3"></audio>
+      <audio id = "combo_10"           src = "snd/combo_10.mp3"           preload = "auto" type = "audio/mp3"></audio>
+      <audio id = "combo_11_power"     src = "snd/combo_11_power.mp3"     preload = "auto" type = "audio/mp3"></audio>
+      <audio id = "combo_11"           src = "snd/combo_11.mp3"           preload = "auto" type = "audio/mp3"></audio>
+      <audio id = "combo_12_power"     src = "snd/combo_12_power.mp3"     preload = "auto" type = "audio/mp3"></audio>
+      <audio id = "combo_12"           src = "snd/combo_12.mp3"           preload = "auto" type = "audio/mp3"></audio>
+      <audio id = "combo_13_power"     src = "snd/combo_13_power.mp3"     preload = "auto" type = "audio/mp3"></audio>
+      <audio id = "combo_13"           src = "snd/combo_13.mp3"           preload = "auto" type = "audio/mp3"></audio>
+      <audio id = "combo_14_power"     src = "snd/combo_14_power.mp3"     preload = "auto" type = "audio/mp3"></audio>
+      <audio id = "combo_14"           src = "snd/combo_14.mp3"           preload = "auto" type = "audio/mp3"></audio>
+      <audio id = "combo_15_power"     src = "snd/combo_15_power.mp3"     preload = "auto" type = "audio/mp3"></audio>
+      <audio id = "combo_15"           src = "snd/combo_15.mp3"           preload = "auto" type = "audio/mp3"></audio>
+      <audio id = "combo_16_power"     src = "snd/combo_16_power.ogg"     preload = "auto" type = "audio/ogg"></audio>
+      <audio id = "combo_16"           src = "snd/combo_16.ogg"           preload = "auto" type = "audio/ogg"></audio>
+      <audio id = "combo_2_power"      src = "snd/combo_2_power.mp3"      preload = "auto" type = "audio/mp3"></audio>
+      <audio id = "combo_2"            src = "snd/combo_2.mp3"            preload = "auto" type = "audio/mp3"></audio>
+      <audio id = "combo_3_power"      src = "snd/combo_3_power.mp3"      preload = "auto" type = "audio/mp3"></audio>
+      <audio id = "combo_3"            src = "snd/combo_3.mp3"            preload = "auto" type = "audio/mp3"></audio>
+      <audio id = "combo_4_power"      src = "snd/combo_4_power.mp3"      preload = "auto" type = "audio/mp3"></audio>
+      <audio id = "combo_4"            src = "snd/combo_4.mp3"            preload = "auto" type = "audio/mp3"></audio>
+      <audio id = "combo_5_power"      src = "snd/combo_5_power.mp3"      preload = "auto" type = "audio/mp3"></audio>
+      <audio id = "combo_5"            src = "snd/combo_5.mp3"            preload = "auto" type = "audio/mp3"></audio>
+      <audio id = "combo_6_power"      src = "snd/combo_6_power.mp3"      preload = "auto" type = "audio/mp3"></audio>
+      <audio id = "combo_6"            src = "snd/combo_6.mp3"            preload = "auto" type = "audio/mp3"></audio>
+      <audio id = "combo_7_power"      src = "snd/combo_7_power.mp3"      preload = "auto" type = "audio/mp3"></audio>
+      <audio id = "combo_7"            src = "snd/combo_7.mp3"            preload = "auto" type = "audio/mp3"></audio>
+      <audio id = "combo_8_power"      src = "snd/combo_8_power.mp3"      preload = "auto" type = "audio/mp3"></audio>
+      <audio id = "combo_8"            src = "snd/combo_8.mp3"            preload = "auto" type = "audio/mp3"></audio>
+      <audio id = "combo_9_power"      src = "snd/combo_9_power.mp3"      preload = "auto" type = "audio/mp3"></audio>
+      <audio id = "combo_9"            src = "snd/combo_9.mp3"            preload = "auto" type = "audio/mp3"></audio>
+      <audio id = "combobreak"         src = "snd/combobreak.mp3"         preload = "auto" type = "audio/mp3"></audio>
+      <audio id = "floor"              src = "snd/floor.ogg"              preload = "auto" type = "audio/ogg"></audio>
+      <audio id = "harddrop"           src = "snd/harddrop.ogg"           preload = "auto" type = "audio/ogg"></audio>
+      <audio id = "hit"                src = "snd/hit.mp3"                preload = "auto" type = "audio/mp3"></audio>
+      <audio id = "hold"               src = "snd/hold.ogg"               preload = "auto" type = "audio/ogg"></audio>
+      <audio id = "hyperalert"         src = "snd/hyperalert.mp3"         preload = "auto" type = "audio/mp3"></audio>
+      <audio id = "menuconfirm"        src = "snd/menuconfirm.mp3"        preload = "auto" type = "audio/mp3"></audio>
+      <audio id = "menuhover"          src = "snd/menuhover.ogg"          preload = "auto" type = "audio/ogg"></audio>
+      <audio id = "move"               src = "snd/move.ogg"               preload = "auto" type = "audio/ogg"></audio>
+      <audio id = "rotate"             src = "snd/rotate.ogg"             preload = "auto" type = "audio/ogg"></audio>
+      <audio id = "shatter"            src = "snd/shatter.mp3"            preload = "auto" type = "audio/mp3"></audio>
+      <audio id = "spin"               src = "snd/spin.ogg"               preload = "auto" type = "audio/ogg"></audio>
     </span>
     
     <script src="js/game_logic.js" language="Javascript" type="text/javascript"></script>

js/app.js

@@ -32,6 +32,7 @@ function pauseSettings() {
     document.onkeydown = null;
 
     settings.show();
+    playSound(menuhover)
 }
 
 function newGame(event) {
@@ -82,6 +83,8 @@ function resume(event) {
 
         if (matrix.piece) scheduler.setInterval(fall, stats.fallPeriod);
         else generate();
+
+        playSound(menuconfirm)
     }
 }
 
@@ -103,19 +106,19 @@ function generate(piece) {
 }
 
 let playerActions = {
-    moveLeft: () => matrix.piece.move(TRANSLATION.LEFT),
+    moveLeft: () => matrix.piece.move(TRANSLATION.LEFT)? playSound(move) : playSound(hit),
 
-    moveRight: () => matrix.piece.move(TRANSLATION.RIGHT),
+    moveRight: () => matrix.piece.move(TRANSLATION.RIGHT)? playSound(move) : playSound(hit),
 
-    rotateClockwise: () => matrix.piece.rotate(ROTATION.CW),
+    rotateClockwise: () => matrix.piece.rotate(ROTATION.CW)? playSound(rotate) : playSound(hit),
 
-    rotateCounterclockwise: () => matrix.piece.rotate(ROTATION.CCW),
+    rotateCounterclockwise: () => matrix.piece.rotate(ROTATION.CCW)? playSound(rotate) : playSound(hit),
 
-    softDrop: () => matrix.piece.move(TRANSLATION.DOWN) && ++stats.score,
+    softDrop: () => (matrix.piece.move(TRANSLATION.DOWN) && ++stats.score)? playSound(move) : playSound(floor),
 
     hardDrop: function () {
         scheduler.clearTimeout(lockDown);
-        playSound(hardDropSound);
+        playSound(harddrop);
         while (matrix.piece.move(TRANSLATION.DOWN, ROTATION.NONE, true)) stats.score += 2;
         matrixCard.classList.remove('hard-dropped-table-animation');
         matrixCard.offsetHeight;
@@ -128,6 +131,7 @@ let playerActions = {
         if (matrix.piece.holdEnabled) {
             scheduler.clearInterval(fall);
             scheduler.clearTimeout(lockDown);
+            playSound(hold)
 
             let piece = matrix.piece;
             piece.facing = FACING.NORTH;
@@ -318,14 +322,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 +345,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 +358,7 @@ stylesheetSelect.oninput = function (event) {
     selectedStyleSheet.href = this.value;
 
     $("#skinURLSelect").empty();
+
     switch (this.value) {
         case 'css/jstris-skin.css':
             skinURLSelect.disabled = false;
@@ -362,7 +372,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 +381,7 @@ stylesheetSelect.oninput = function (event) {
                     $('#skinURLSelect').select2({data: data});
                 });
             break;
+
         case 'css/tetrio-skin.css':
             skinURLSelect.disabled = false;
 
@@ -381,10 +392,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}`,
+                                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});
                 })
             break;

js/game_logic.js

@@ -17,7 +17,7 @@ const T_SPIN = {
     T_SPIN: "PIROUETTE"
 }
 
-// score = AWARDED_LINE_CLEARS[tSpin][nbClearedLines]
+// score = AWARDED_LINE_CLEARS[tSpin][clearedLines]
 const AWARDED_LINE_CLEARS = {
     [T_SPIN.NONE]:   [0, 1, 3, 5, 8],
     [T_SPIN.MINI]:   [1, 2],
@@ -282,18 +282,18 @@ class Matrix extends MinoesTable {
     }
 
     clearLines() {
-        let nbClearedLines = 0
+        let clearedLines = 0
         for (let y=0; y<this.rows; y++) {
             let row = this.blocks[y]
             if (row.filter(lockedMino => lockedMino).length == this.columns) {
-                nbClearedLines++
+                clearedLines++
                 this.blocks.splice(y, 1)
                 this.blocks.unshift(Array(matrix.columns))
                 this.table.rows[y].classList.add("cleared-line-animation")
             }
         }
         this.redraw()
-        return nbClearedLines
+        return clearedLines
     }
 }
 Matrix.prototype.init_center = [4, 4]

js/interface.js

@@ -144,8 +144,8 @@ class Stats {
         levelInput.value = localStorage['startLevel'] || 1;
         this.score = 0;
         this.goal = 0;
-        this.combo = 0;
+        this.combo = -1;
-        this.b2b = 0;
+        this.b2b = -1;
         this.startTime = new Date();
         this.lockDelay = DELAY.LOCK;
         this.totalClearedLines = 0;
@@ -231,23 +231,23 @@ class Stats {
         return new Date() - this.startTime;
     }
 
-    lockDown(tSpin, nbClearedLines) {
+    lockDown(tSpin, clearedLines) {
-        this.totalClearedLines += nbClearedLines;
+        this.totalClearedLines += clearedLines;
-        if (nbClearedLines == 4) this.nbQuatuors++;
+        if (clearedLines == 4) this.nbQuatuors++;
         if (tSpin == T_SPIN.T_SPIN) this.nbTSpin++;
 
         // Cleared lines & T-Spin
-        let awardedLineClears = AWARDED_LINE_CLEARS[tSpin][nbClearedLines];
+        let awardedLineClears = AWARDED_LINE_CLEARS[tSpin][clearedLines];
         let patternScore = 100 * this.level * awardedLineClears;
         if (tSpin)
             messagesSpan.addNewChild('div', {
                 className: 'rotate-in-animation',
                 innerHTML: tSpin,
             });
-        if (nbClearedLines)
+        if (clearedLines)
             messagesSpan.addNewChild('div', {
                 className: 'zoom-in-animation',
-                innerHTML: CLEARED_LINES_NAMES[nbClearedLines],
+                innerHTML: CLEARED_LINES_NAMES[clearedLines],
             });
         if (patternScore) {
             messagesSpan.addNewChild('div', {
@@ -259,10 +259,10 @@ class Stats {
         }
 
         // Combo
-        if (nbClearedLines) {
+        if (clearedLines) {
             this.combo++;
             if (this.combo >= 1) {
-                let comboScore = (nbClearedLines == 1 ? 20 : 50) * this.combo * this.level;
+                let comboScore = (clearedLines == 1 ? 20 : 50) * this.combo * this.level;
                 if (this.combo == 1) {
                     messagesSpan.addNewChild('div', {
                         className: 'zoom-in-animation',
@@ -279,11 +279,12 @@ class Stats {
                 this.score += comboScore;
             }
         } else {
+            if (this.combo >= 1) playSound(combobreak)
             this.combo = -1;
         }
 
         // Back to back sequence
-        if (nbClearedLines == 4 || (tSpin && nbClearedLines)) {
+        if (clearedLines == 4 || (tSpin && clearedLines)) {
             this.b2b++;
             if (this.b2b >= 1) {
                 let b2bScore = patternScore / 2;
@@ -302,23 +303,64 @@ class Stats {
                 }
                 this.score += b2bScore;
             }
-        } else if (nbClearedLines && !tSpin) {
+        } else if (clearedLines && !tSpin) {
             if (this.b2b >= 1) {
                 messagesSpan.addNewChild('div', {
                     className: 'zoom-in-animation',
                     style: 'animation-delay: .4s',
                     innerHTML: `FIN DU BOUT À BOUT`,
                 });
+                playSound(btb_break)
             }
             this.b2b = -1;
         }
 
-        // Sound
+        // Sounds
-        if (sfxVolumeRange.value) {
+        if (clearedLines == 4 || (tSpin && clearedLines)) {
-            if (nbClearedLines == 4) playSound(quatuorSound, this.combo);
+            if (this.b2b >= 1) switch(this.b2b) {
-            else if (nbClearedLines) playSound(lineClearSound, this.combo);
+                case 1: playSound(btb_1); break
-            if (tSpin) playSound(tSpinSound, this.combo);
+                case 2: playSound(btb_2); break
-        }
+                default: playSound(btb_3)
+            } else if (this.combo >= 1) switch(this.combo) {
+                case 1: playSound(combo_1_power); break
+                case 2: playSound(combo_2_power); break
+                case 3: playSound(combo_3_power); break
+                case 4: playSound(combo_4_power); break
+                case 5: playSound(combo_5_power); break
+                case 6: playSound(combo_6_power); break
+                case 7: playSound(combo_7_power); break
+                case 8: playSound(combo_8_power); break
+                case 9: playSound(combo_9_power); break
+                case 10: playSound(combo_10_power); break
+                case 11: playSound(combo_11_power); break
+                case 12: playSound(combo_12_power); break
+                case 13: playSound(combo_13_power); break
+                case 14: playSound(combo_14_power); break
+                case 15: playSound(combo_15_power); break
+                default: playSound(combo_16_power)
+            } else if (clearedLines == 4) playSound(clearbtb);
+            else playSound(clearspin);
+        } else if (this.combo >= 1) switch(this.combo) {
+            case 1: playSound(combo_1); break
+            case 2: playSound(combo_2); break
+            case 3: playSound(combo_3); break
+            case 4: playSound(combo_4); break
+            case 5: playSound(combo_5); break
+            case 6: playSound(combo_6); break
+            case 7: playSound(combo_7); break
+            case 8: playSound(combo_8); break
+            case 9: playSound(combo_9); break
+            case 10: playSound(combo_10); break
+            case 11: playSound(combo_11); break
+            case 12: playSound(combo_12); break
+            case 13: playSound(combo_13); break
+            case 14: playSound(combo_14); break
+            case 15: playSound(combo_15); break
+            default: playSound(combo_16)
+        } else if (tSpin) {
+            if (clearedLines) playSound(clearspin);
+            else playSound(spin);
+        } else if (clearedLines) playSound(clearline);
 
         this.goal -= awardedLineClears;
         if (this.goal <= 0) this.level++;