swap stats th and td

css/_common.css

@@ -30,6 +30,10 @@ body {
     background-color: #25292d;
 }
 
+#statsTable th {
+    text-align: right;
+}
+
 #matrixCard {
     background-image: radial-gradient(#222, #25292d);
 }
@@ -43,11 +47,6 @@ body {
     font-weight: 600;
 }
 
-#statsTable td,
-#statsModal td {
-    text-align: right;
-}
-
 td#timeCell {
     min-width: 10ch;
 }
@@ -274,20 +273,22 @@ tr.cleared-line-animation {
     border-collapse: collapse;
 }
 
-#statsModal th {
+#statsModal td {
     padding-left: 0;
     padding-right: 0.5rem;
     padding-bottom: 0.2rem;
     border-left: 0.5rem solid transparent;
     border-right: 0;
+    width: max-content;
 }
 
-#statsModal td {
+#statsModal th {
     padding-left: 0.5rem;
     padding-right: 0;
     padding-bottom: 0.2rem;
     border-left: 0;
     border-right: 0.5rem solid transparent;
+    text-align: right;
 }
 
 #statsModal tr:last-child th,

index.html

@@ -143,11 +143,11 @@
         </div>
           <div class="card shadow">
             <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>But</th>   <td id="goalCell">0</td>       </tr>
-              <tr><th>Temps</th> <td id="timeCell">00:00:00</td></tr>
+              <tr class="card-header fw-bold text-uppercase"><td>Score</td><th id="scoreCell">0</th>                                                                          </tr>
+              <tr><td>Meilleur<br/>score</td><th id="highScoreCell"><script>document.write(Number(localStorage["highScore"]) || 0)</script></th></tr>
+              <tr><td>Niveau</td><th id="levelCell">0</th>      </tr>
+              <tr><td>But</td>   <th id="goalCell">0</th>       </tr>
+              <tr><td>Temps</td> <th id="timeCell">00:00:00</th></tr>
             </table>
           </div>
         </div>
@@ -226,11 +226,16 @@
             </div>
             <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>            </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>
+                <tr><td>Score</td>                <th id="statsModalScoreCell"></th>          </tr>
+                <tr><td>Meilleur score</td>       <th id="statsModalHighScoreCell"></th>      </tr>
+                <tr><td>Niveau</td>               <th id="statsModalLevelCell"></th>          </tr>
+                <tr><td>Temps</td>                <th id="statsModalTimeCell"></th>           </tr>
+                <tr><td>Lignes</td>               <th id="statsModaltotalClearedLines"></th>  </tr>
+                <tr><td>Lignes par minute</td>    <th id="statsModaltotalClearedLinesPM"><htd></tr>
+                <tr><td>Quatuors</td>             <th id="statsModalNbQuatuors"></th>         </tr>
+                <tr><td>Pirouettes</td>           <th id="statsModalNbTSpin"></th>            </tr>
+                <tr><td>Plus long combo</td>      <th id="statsModalMaxCombo"></th>           </tr>
+                <tr><td>Plus long bout à bout</td><th id="statsModalMaxB2B"></th>             </tr>
               </table>
             </div>
             <div class="modal-footer">

js/app.js

@@ -323,7 +323,6 @@ 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="preview" src="${state.id}" title="${state.text}" loading="lazy"/>`)
@@ -331,12 +330,12 @@ $.fn.select2.defaults.set("templateResult", (state) =>
 )
 $.fn.select2.defaults.set("templateSelection", (state) =>
     state.id
-        ? $(`
+    ? $(`
 <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("selectionCssClass", 'form-select')
@@ -346,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 (ImageURLPattern.test(url)) {
+    if (/^(https?:\/\/.*\.(?:png|jpg|jpeg|gif|bmp|webp|svg))$/i.test(url)) {
         return {
             id: url,
             text: 'Source externe',
@@ -357,13 +356,13 @@ $.fn.select2.defaults.set("createTag", function (params) {
 
 stylesheetSelect.oninput = function (event) {
     selectedStyleSheet.href = this.value;
-
-    $("#skinURLSelect").empty();
+    var skinURL = skinURLSelect.value
     
     switch (this.value) {
         case 'css/tetrio-skin.css':
-            skinURLSelect.disabled = false;
-
+            localStorage[skinURLSelect.name] = skinURLSelect.value
+            skinURLSelect.name = "tetrioSkinURL"
+            $("#skinURLSelect").empty();
             const baseURL = "https://you.have.fail/tetrioplus/data"
             fetch(`${baseURL}/data.json`)
                 .then((resp) => resp.json())
@@ -376,7 +375,7 @@ stylesheetSelect.oninput = function (event) {
                             children: skins.map((skin) => {
                                 return {
                                     id: `${baseURL}/${encodeURI(skin.path)}`,
-                                    text:`${skin.name}\n${skin.description}`
+                                    text: skin.description? `${skin.name}\n${skin.description}` : `${skin.name}`
                                 }
                             })
                         }
@@ -389,13 +388,25 @@ stylesheetSelect.oninput = function (event) {
                         }]
                     })
                     data.sort((group1, group2) => group1.text > group2.text)
-                    $('#skinURLSelect').select2({data: data});
+
+                    skinURLSelect.disabled = false;
+                    $('#skinURLSelect').select2({data: data})
+                    if (skinURL = localStorage['tetrioSkinURL']) {
+                        if ($('#skinURLSelect').find(`option[value='${skinURL}']`).length) {
+                            $('#skinURLSelect').val(skinURL).trigger('change');
+                        } else {
+                            var option = new Option('Sample sauvegardé', skinURL);
+                            $('#skinURLSelect').append(option).trigger('change');
+                        }
+                        skinURLSelect.oninput();
+                    }
                 })
             break;
 
         case 'css/jstris-skin.css':
-            skinURLSelect.disabled = false;
-
+            localStorage[skinURLSelect.name] = skinURLSelect.value
+            skinURLSelect.name = "jstrisSkinURL"
+            $("#skinURLSelect").empty();
             fetch('https://konsola5.github.io/jstris-customization-database/jstrisCustomizationDatabase.json')
                 .then(response => response.json())
                 .then(json => {
@@ -410,7 +421,18 @@ stylesheetSelect.oninput = function (event) {
                         };
                         data.push(groupData);
                     }
-                    $('#skinURLSelect').select2({data: data});
+
+                    skinURLSelect.disabled = false;
+                    $('#skinURLSelect').select2({data: data})
+                    if (skinURL = localStorage['jstrisSkinURL']) {
+                        if ($('#skinURLSelect').find(`option[value='${skinURL}']`).length) {
+                            $('#skinURLSelect').val(skinURL).trigger('change');
+                        } else {
+                            var option = new Option('Sample sauvegardé', skinURL);
+                            $('#skinURLSelect').append(option).trigger('change');
+                        }
+                        skinURLSelect.oninput();
+                    }
                 });
             break;
 

js/interface.js

@@ -37,15 +37,6 @@ class Settings {
             if (element.name in localStorage) element.value = localStorage[element.name];
         });
         stylesheetSelect.oninput();
-        if (localStorage['skinURL']) {
-            if ($('#skinURLSelect').find("option[value='" + localStorage['skinURL'] + "']").length) {
-                $('#skinURLSelect').val(localStorage['skinURL']).trigger('change');
-            } else {
-                var option = new Option('Sample sauvegardé', localStorage['skinURL']);
-                $('#skinURLSelect').append(option).trigger('change');
-            }
-            skinURLSelect.oninput();
-        }
     }
 
     save() {