use external skins

css/_common.css

@@ -1,5 +1,5 @@
 :root {
-    --cell-side: 25px;
+    --cell-size: 25px;
     --rX: -15;
     --rY: 0;
     --tZ: 25px;
@@ -62,7 +62,7 @@ td#timeCell {
 }
 
 #matrixTable {
-    margin-top: calc(-1 * var(--buffer-zone-rows) * var(--cell-side));
+    margin-top: calc(-1 * var(--buffer-zone-rows) * var(--cell-size));
 }
 
 @keyframes hard-dropped-table-animation {
@@ -87,8 +87,8 @@ tr.matrix td:not(.mino) {
 
 td {
     overflow: hidden;
-    width: var(--cell-side);
+    width: var(--cell-size);
-    height: var(--cell-side);
+    height: var(--cell-size);
     box-sizing: border-box;
 }
 
@@ -157,6 +157,7 @@ tr.cleared-line-animation {
     text-shadow: 1px 1px #000c;
     font-size: 3vmin;
     text-align: center;
+    z-index: 200;
 }
 
 #messagesSpan div {

css/custom.css

@@ -0,0 +1,79 @@
+:root {
+  --cell-size: 30px;
+  --sprite-size: calc(100% / 11);
+  --skin-url: url(https://tetrio.team2xh.net/images/skins/tf/tf.svg);
+  --bg-url: url();
+}
+
+body {
+  background-image: var(--bg-url) fixed;
+  background-size: cover;
+  background-position: center;
+}
+
+.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(--mino-sprite) * var(--sprite-size));
+}
+
+.I {
+    --mino-sprite: 4;
+}
+
+.J {
+    --mino-sprite: 5;
+}
+
+.L {
+    --mino-sprite: 1;
+}
+
+.O {
+    --mino-sprite: 2;
+}
+
+.S {
+    --mino-sprite: 3;
+}
+
+.T {
+    --mino-sprite: 6;
+}
+
+.Z {
+    --mino-sprite: 0;
+}
+
+.ghost,
+.disabled,
+.locking {
+  background-image:
+    var(--skin-url),
+    var(--skin-url);
+  background-size:
+    cover,
+    cover;
+  background-repeat:
+    no-repeat,
+    no-repeat;
+  background-position-x:
+    calc(var(--mino-sprite) * var(--sprite-size)),
+    calc(var(--overlay-sprite) * var(--sprite-size));
+  background-blend-mode: overlay;
+}
+
+.ghost {
+  --overlay-sprite: 7;
+}
+
+.disabled {
+  --overlay-sprite: 8;
+}
+
+.locking {
+  --overlay-sprite: 9;
+}

css/heavy-metal.css

@@ -2,7 +2,7 @@
   perspective: 500px;
 }
 #screenRow {
-  transform: rotateX(20deg);
+  transform: rotateX(15deg);
 }
 
 #screenRow .card {
@@ -28,10 +28,6 @@ tr.matrix td:not(.mino) {
   backdrop-filter: blur(6px);
 }
 
-tr:last-of-type .mino {
-  boxd-shadow: none;
-}
-
 .I {
   --hue: 197;
 }

css/jazz.css

@@ -110,8 +110,8 @@ tr.matrix td:not(.mino) {
 
 .minoes-table td {
     display: inline-block;
-    width: var(--cell-side);
+    width: var(--cell-size);
-    height: var(--cell-side);
+    height: var(--cell-size);
     padding: 0 !important;
     z-index: calc(200 - var(--row));
 }

css/jazz2.css

@@ -0,0 +1,118 @@
+.minoes-table {
+    display: flex;
+    flex-direction: column;
+    filter: drop-shadow(0 8px 1px #0008);
+}
+
+.minoes-table tr {
+    display: flex;
+    position: relative;
+    flex-direction: row;
+    z-index: calc(100 - var(--row));
+}
+
+tr.matrix td:not(.mino) {
+    border: none;
+    border-right: 1px solid #8884;
+}
+
+.minoes-table td {
+    display: inline-block;
+    width: var(--cell-size);
+    height: var(--cell-size);
+    padding: 0 !important;
+    z-index: calc(200 - var(--row));
+}
+
+.mino {
+    width: inherit;
+    height: inherit;
+    display: block;
+    padding: 0;
+    opacity: 100%;
+    border: none;
+    box-shadow: 0 -6px 0 var(--box-shadow-color);
+}
+
+.I.mino {
+    background-color: #0293b0;
+    --box-shadow-color: #05d2f2;
+}
+
+.J.mino {
+    background-color: #2c69c2;
+    --box-shadow-color: #7bb7f6;
+}
+
+.L.mino {
+    background-color: #fa9b23;
+    --box-shadow-color: #FFBA59;
+}
+
+.O.mino {
+    background-color: #f9d92c;
+    --box-shadow-color: #fff194;
+}
+
+.S.mino {
+    background-color: #01a493;
+    --box-shadow-color: #03e7d3;;
+}
+
+.T.mino {
+    background-color: #6830d1;
+    --box-shadow-color: #bb88fc;
+}
+
+.Z.mino {
+    background-color: #ee2b58;
+    --box-shadow-color: #fd4487;;
+}
+
+.ghost.mino {
+    background-color: #fff8;
+    box-shadow: none;
+    transform: blue(4px);
+}
+
+.moving.mino {
+    filter: saturate(80%) brightness(130%);
+}
+
+.locking.mino {
+    filter: saturate(20%) brightness(300%);
+}
+
+.locked.mino {
+    animation: locked-animation;
+    animation-duration: 0.2s;
+}
+
+.disabled.mino {
+    filter: brightness(50%) contrast(65%);
+}
+
+@keyframes locked-animation {
+    from {
+        filter: saturate(50%) brightness(300%);
+    }
+}
+
+@keyframes cleared-line-animation {
+    from {
+        background-color: #eeeeee;
+    }
+    to {
+        background-color: transparent;
+    }
+}
+
+@keyframes trail-animation {
+    from {
+        background-color: #ceffff05;
+        filter: saturate(50%) brightness(110%);
+    }
+    to {
+        background-color: transparent;
+    }
+}

css/minimal.css

@@ -26,8 +26,8 @@ tr.matrix td:not(.mino) {
 
 .minoes-table td {
     display: inline-block;
-    width: var(--cell-side);
+    width: var(--cell-size);
-    height: var(--cell-side);
+    height: var(--cell-size);
     padding: 0 !important;
     z-index: calc(200 - var(--row));
 }

css/neo-classic.css

@@ -33,7 +33,7 @@ tr.matrix td:not(.mino) {
 }
 
 .mino:after {
-  --size: calc(var(--cell-side) - 12px);
+  --size: calc(var(--cell-size) - 12px);
   position: absolute;
   content: "";
   box-sizing: content-box;

css/old-school.css

@@ -1,5 +1,5 @@
 :root {
-    --cell-side: 20px;
+    --cell-size: 20px;
     --sprite-size: 40px;
 }
 

css/stereo.css

@@ -1,8 +1,8 @@
 :root {
   --rbw: 4px;
   --tl: calc(-1 * var(--rbw));
-  --cell-side-opposite: calc(-1 * var(--cell-side));
+  --cell-size-opposite: calc(-1 * var(--cell-size));
-  --t3d: translate3d(var(--tl), var(--tl), var(--cell-side-opposite));
+  --t3d: translate3d(var(--tl), var(--tl), var(--cell-size-opposite));
 }
 
 body {
@@ -69,7 +69,7 @@ body {
 }
 
 #screenRow .card>* {
-  transform: translateZ(var(--cell-side));
+  transform: translateZ(var(--cell-size));
 }
 
 #screenRow .card-header {
@@ -101,7 +101,7 @@ body {
 
 .minoes-table tr {
   width: max-content;
-  height: var(--cell-side);
+  height: var(--cell-size);
 }
 
 #statsTable tr {
@@ -120,8 +120,8 @@ tr.matrix td:not(.mino) {
 }
 
 .minoes-table td {
-  width: var(--cell-side);
+  width: var(--cell-size);
-  height: var(--cell-side);
+  height: var(--cell-size);
   overflow: visible;
   position: relative;
 }
@@ -153,8 +153,8 @@ tr.cleared-line-animation td::after {
   top: 0;
   left: 0;
   display: block;
-  width: var(--cell-side);
+  width: var(--cell-size);
-  height: var(--cell-side);
+  height: var(--cell-size);
 }
 
 /* Front face */
@@ -204,7 +204,7 @@ tr.cleared-line-animation td::before,
   --center-x:  calc(65% + var(--light-x) * 10%);
   --center-y:  calc(35% + var(--light-y) * 10%);
   filter: saturate(0.95);
-  transform: translate3d(0, 0, var(--cell-side-opposite)) rotateY(-90deg);
+  transform: translate3d(0, 0, var(--cell-size-opposite)) rotateY(-90deg);
   transform-origin: left;
 }
 

css/svg.css

@@ -0,0 +1,43 @@
+tr.matrix td:not(.mino),
+tr.matrix td.mino {
+  border-left: none;
+  border-right: 1px solid #333;
+  border-top: 1px solid #333;
+  border-bottom: none;
+}
+
+.mino {
+  background-size: cover
+}
+
+.I {
+  background-image: url(https://www.svgrepo.com/show/395902/blue-square.svg)
+}
+
+.J {
+  background-image: url(https://www.svgrepo.com/show/395944/brown-square.svg);
+}
+
+.L {
+  background-image: url(https://www.svgrepo.com/show/397681/orange-square.svg);
+}
+
+.O {
+  background-image: url(https://www.svgrepo.com/show/398716/yellow-square.svg);
+}
+
+.S {
+  background-image: url(https://www.svgrepo.com/show/396582/green-square.svg);
+}
+
+.T {
+ background-image: url(https://www.svgrepo.com/show/398143/purple-square.svg);
+}
+
+.Z {
+  background-image: url(https://www.svgrepo.com/show/397699/red-square.svg);
+}
+
+.ghost {
+  background-image: url(https://www.svgrepo.com/show/398610/white-large-square.svg);
+}

css/synthwave.css

@@ -1,5 +1,5 @@
 body {
-    background-image: url(synthwave/bg.png);
+    background-image: url(synthwave/wtCSusF.jpeg);
     background-size: cover;
 }
 
@@ -21,7 +21,7 @@ body[data-bs-theme="dark"] {
 
 .card,
 #matrixCard {
-    background: repeating-linear-gradient(transparent, #111 1px);
+    background: repeating-linear-gradient(transparent, transparent 1px, #1114 2px, #1114 4px);
     backdrop-filter: blur(3px);
 }
 

index.html

@@ -18,6 +18,7 @@
     <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="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">
@@ -68,8 +69,19 @@
                 <label for="dasInput" class="col-2 col-form-label"><abbr title="Delayed AutoShift : délai initial avant répétition">DAS</abbr></label>
               </fieldset>
               <fieldset class="row g-2 mb-3 align-items-center text-center"><legend class="text-start">Interface</legend>
+                <label for="sfxVolumeRange" class="col-2 col-form-label">Volume</label>
+                <div class="col-4 d-flex align-items-baseline"><input name="sfxVolumeRange" id="sfxVolumeRange" class="form-range" type="range" min="0" max="1" step="any" value="0.7"></div>
+                <div class="col-4">
+                  <div class="form-check form-switch text-start">
+                    <input id="fullscreenCheckbox" type="checkbox" role="switch" class="form-check-input" tabindex="0">
+                    <label for="fullscreenCheckbox" class="form-check-label">Plein écran</label>
+                  </div>
+                </div>
+                <div class="col-2"></div>
                 <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">
+                <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')">
                     <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>
@@ -78,16 +90,18 @@
                     <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>
-                </select></div>
+                    <option value="css/custom.css">Personnalisé</option>
-                <div class="col-4">
+                  </select>
-                  <div class="form-check form-switch text-start">
-                    <input id="fullscreenCheckbox" type="checkbox" role="switch" class="form-check-input" tabindex="0">
-                    <label for="fullscreenCheckbox" class="form-check-label">Plein écran</label>
                 </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" 
+                    value="https://tetrio.team2xh.net/images/skins/ppt/ppt.svg" 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})`)">
+                  </div>
+                  <label for="skinURLInput" class="col-4 col-form-label">URL</label>
                 </div>
-                <div class="col-2"></div>
-                <label for="sfxVolumeRange" class="col-2 col-form-label">Volume</label>
-                <div class="col-4 d-flex align-items-baseline"><input name="sfxVolumeRange" id="sfxVolumeRange" class="form-range" type="range" min="0" max="1" step="any" value="0.7"></div>
               </fieldset>
               <fieldset class="row g-2 mb-3 align-items-center text-center"><legend class="text-start">Partie</legend>
                 <label for="levelInput" class="col-2 col-form-label text-center">Niveau</label>
@@ -124,9 +138,9 @@
             <table id="statsTable" class="table mb-0">
               <tr class="card-header fw-bold text-uppercase"><th>Score</th><td id="scoreCell">0</td>                                                                          </tr>
               <tr><th>Meilleur<br/>score</th><td id="highScoreCell"><script>document.write(Number(localStorage["highScore"]) || 0)</script></td></tr>
-              <tr><th>Niveau</th>                           <td id="levelCell">0</td>                                                                          </tr>
+              <tr><th>Niveau</th><td id="levelCell">0</td>      </tr>
               <tr><th>But</th>   <td id="goalCell">0</td>       </tr>
-              <tr><th>Temps</th>                            <td id="timeCell">00:00:00</td>                                                                       </tr>
+              <tr><th>Temps</th> <td id="timeCell">00:00:00</td></tr>
             </table>
           </div>
         </div>
@@ -206,7 +220,7 @@
             <div class="modal-body p-0">
               <table class="table mb-0">
                 <tr><th>Score</th>         <td id="statsModalScoreCell"></td>        <th>Quatuors</th>             <td id="statsModalNbQuatuors"></td>         </tr>
-                <tr><th>Meilleur score</th><td id="statsModalHighScoreCell"></td>    <th>Pirouettes</th>           <td id="statsModalNbTSpin"></td></td>       </tr>
+                <tr><th>Meilleur score</th><td id="statsModalHighScoreCell"></td>    <th>Pirouettes</th>           <td id="statsModalNbTSpin"></td>            </tr>
                 <tr><th>Temps</th>         <td id="statsModalTimeCell"></td>         <th>Plus long combo</th>      <td id="statsModalMaxCombo"></td>           </tr>
                 <tr><th>Niveau</th>        <td id="statsModalLevelCell"></td>        <th>Plus long bout à bout</th><td id="statsModalMaxB2B"></td>             </tr>
                 <tr><th>Lignes</th>        <td id="statsModaltotalClearedLines"></td><th>Lignes par minute</th>    <td id="statsModaltotalClearedLinesPM"></td></tr>

js/interface.js

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