support for jstris skin as well

css/jstris-skin.css

@@ -0,0 +1,55 @@
+:root {
+  --cell-size: 24px;
+  --sprite-size: calc(100% / 8);
+  --skin-url: url(https://i.imgur.com/HqGYC5G.png);
+}
+
+.mino {
+  width: var(--cell-size);
+  height: var(--cell-size);
+  background-image: var(--skin-url);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position-x: calc(var(--sprite-pos) * var(--sprite-size));
+}
+
+.I {
+    --sprite-pos: 6;
+}
+
+.J {
+    --sprite-pos: 7;
+}
+
+.L {
+    --sprite-pos: 3;
+}
+
+.O {
+    --sprite-pos: 4;
+}
+
+.S {
+    --sprite-pos: 5;
+}
+
+.T {
+    --sprite-pos: 8;
+}
+
+.Z {
+    --sprite-pos: 2;
+}
+
+.ghost {
+  --sprite-pos: 0;
+  opacity: 50%;
+}
+
+.disabled {
+  --sprite-pos: 1;
+}
+
+.locking.mino {
+    filter: saturate(60%) brightness(180%);
+}

css/tetrio-skin.css

@@ -2,31 +2,6 @@
   --cell-size: 30px;
   --sprite-size: calc(100% / 11);
   --skin-url: url(https://you.have.fail/ed/at/tetrioplus/data/content/skin/Haley%20Halcyon/tetrio_gameboy_plus.svg);
-  --bg-url: url();
-}
-
-body {
-  background-image: var(--bg-url) fixed;
-  background-size: cover;
-  background-position: center;
-}
-
-#matrixTable tr:last-child td {
-    position: relative;
-    overflow: visible;
-}
-
-#matrixTable tr:last-child td:after {
-    position: absolute;
-    content: "";
-    width: inherit;
-    height: inherit;
-    top: var(--cell-size);
-    left: 0;
-    background-image: var(--skin-url);
-    background-size: repeat;
-    background-position-x: calc(var(--sprite-pos) * var(--sprite-size));
-    --sprite-pos: 10;
 }
 
 .mino {

index.html

@@ -18,7 +18,8 @@
     <link rel="alternate stylesheet" href="css/jazz.css"     title="Jazz">
     <link rel="alternate stylesheet" href="css/old-school.css"     title="Old School">
     <link rel="alternate stylesheet" href="css/stereo.css"    title="Stéréo (3D)">
-    <link rel="alternate stylesheet" href="css/custom.css"    title="Personnalisé">
+    <link rel="alternate stylesheet" href="css/jstris-skin.css"    title="Skin type Jstris">
+    <link rel="alternate stylesheet" href="css/tetrio-skin.css"    title="Skin type Tetr.io">
     <link rel="apple-touch-icon"      sizes="180x180" href="favicons/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32"   href="favicons/T-2.png">
     <link rel="icon" type="image/png" sizes="16x16"   href="favicons/favicon-16x16.png">
@@ -81,7 +82,7 @@
                 <label for="stylesheetSelect" class="col-2 col-form-label">Thème</label>
                 <div class="col-4">
                   <select name="stylesheet" id="stylesheetSelect" class="form-select"
-                    oninput="selectedStyleSheet.href = this.value; skinURLdiv.style.setProperty('display', this.value === 'css/custom.css' ? 'flex' : 'none')">
+                    oninput="selectedStyleSheet.href = this.value; skinURLdiv.style.setProperty('display', this.value === 'css/tetrio-skin.css' || this.value === 'css/jstris-skin.css' ? 'flex' : 'none')">
                     <option value="css/classic.css" selected>Classique</option>
                     <option value="css/neo-classic.css" selected>Néo-classique</option>
                     <option value="css/synthwave.css">Synthwave</option>
@@ -90,14 +91,14 @@
                     <option value="css/jazz.css">Jazz</option>
                     <option value="css/old-school.css">Old School</option>
                     <option value="css/stereo.css">Stéréo (3D)</option>
-                    <option value="css/custom.css">Personnalisé</option>
+                    <option value="css/jstris-skin.css">Skin type Jstris</option>
+                    <option value="css/tetrio-skin.css">Skin type Tetr.io</option>
                   </select>
                 </div>
                 <div id="skinURLdiv" class="col-6" style="display: none;">
                   <div class="col-8">
-                    <input name="skinURL" id="skinURLInput" type="text" class="col-8 form-control text-center" 
+                    <input name="skinURL" id="skinURLInput" type="text" class="col-8 form-control text-start" 
-                    value="https://you.have.fail/ed/at/tetrioplus/data/content/skin/Haley%20Halcyon/tetrio_gameboy_plus.svg" placeholder="Adresse du skin"
+                    placeholder="Adresse du skin"
-                    title="Adresse d'une image de skin compatible avec Tetr.io Plus"
                     oninput="document.documentElement.style.setProperty('--skin-url', `url(${this.value})`)"
                     onfocus="this.select()">
                   </div>

js/interface.js

@@ -36,7 +36,7 @@ class Settings {
                 element.value = localStorage[element.name]
         })
         window.document.selectedStyleSheetSet = stylesheetSelect.value
-        if (stylesheetSelect.value === "css/custom.css") {
+        if (stylesheetSelect.value === "css/tetrio-skin.css" || stylesheetSelect.value === "css/jstris-skin.css") {
             skinURLdiv.style.setProperty('display', 'flex')
             document.documentElement.style.setProperty('--skin-url', `url(${skinURLInput.value})`)
         } else {