group tetr.io skins by authors

css/tetrio-skin.css

@@ -1,7 +1,7 @@
 :root {
   --cell-size: 30px;
   --sprite-size: round(100% / 11, 1px);
-  --skin-url: url(https://you.have.fail/ed/at/tetrioplus/data/content/skin/Haley%20Halcyon/tetrio_gameboy_plus.svg);
+  --skin-url: url(tetrio-skin/a_forest.png);
 }
 
 tr.matrix td:not(.mino) {

index.html

@@ -12,8 +12,9 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />
     <link rel="stylesheet" href="css/_select2-dark.css">
     <link rel="stylesheet" href="css/_common.css">
-    <link rel="stylesheet" href="css/jstris-skin.css" title="Thème sélectionné" id="selectedStyleSheet">
+    <link rel="stylesheet" href="css/tetrio-skin.css" title="Thème sélectionné" id="selectedStyleSheet">
-    <link rel="alternate stylesheet" href="css/jstris-skin.css" title="Sample...">
+    <link rel="alternate stylesheet" href="css/tetrio-skin.css" title="Sample Tetr.io...">
+    <link rel="alternate stylesheet" href="css/jstris-skin.css" title="Sample JStris...">
     <link rel="alternate stylesheet" href="css/classic.css"     title="Classique">
     <link rel="alternate stylesheet" href="css/neo-classic.css" title="Néo-classique">
     <link rel="alternate stylesheet" href="css/electro.css"     title="Électro">
@@ -21,7 +22,7 @@
     <link rel="alternate stylesheet" href="css/heavy-metal.css" title="Heavy metal">
     <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/stereo.css"      title="3D">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/js/select2.min.js"></script>
@@ -79,8 +80,8 @@
                 <label for="stylesheetSelect" class="col-2 col-form-label">Thème</label>
                 <div class="col-4">
                   <select name="stylesheet" id="stylesheetSelect" class="form-select">
-                    <option value="css/jstris-skin.css" selected>Sample JStris...</option>
+                    <option value="css/tetrio-skin.css" selected>Sample Tetr.io...</option>
-                    <option value="css/tetrio-skin.css">Sample Tetr.io...</option>
+                    <option value="css/jstris-skin.css">Sample JStris...</option>
                     <option value="css/classic.css">Classique</option>
                     <option value="css/neo-classic.css">Néo-classique</option>
                     <option value="css/synthwave.css">Synthwave</option>
@@ -88,17 +89,19 @@
                     <option value="css/heavy-metal.css">Heavy metal</option>
                     <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/stereo.css">3D</option>
                   </select>
                 </div>
                 <div class="col-4">
                   <select name="skinURL" id="skinURLSelect" class="form-select"
-                  oninput="document.documentElement.style.setProperty('--skin-url', `url(${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>
-                <label for="sfxVolumeRange" class="col-2 col-form-label">Volume</label>
+                <label for="sfxVolumeRange" class="col-2 col-form-label"><abbr title="Auteur des effets sonores : 25Pi25">Volume</abbr></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 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">

js/app.js

@@ -361,6 +361,37 @@ stylesheetSelect.oninput = function (event) {
     $("#skinURLSelect").empty();
 
     switch (this.value) {
+        case 'css/tetrio-skin.css':
+            skinURLSelect.disabled = false;
+
+            const baseURL = "https://you.have.fail/tetrioplus/data"
+            fetch(`${baseURL}/data.json`)
+                .then((resp) => resp.json())
+                .then((json) => {
+                    json = json.filter((item) => (item.type == "skin" && item.format == "tetrioraster" && /\.(?:png|jpg|jpeg|gif|bmp|webp|svg)$/i.test(item.path)))
+                    const groups = Map.groupBy(json, (skin) => skin.author)
+                    const data = groups.entries().map(([author, skins]) => {
+                        return {
+                            text: author,
+                            children: skins.map((skin) => {
+                                return {
+                                    id: `${baseURL}/${encodeURI(skin.path)}`,
+                                    text:`${skin.name}\n${skin.description}`
+                                }
+                            })
+                        }
+                    }).toArray()
+                    data.push({
+                        text: "AdrienMalin",
+                        children: [{
+                            id: `${document.location.href}/css/tetrio-skin/a_forest.png`,
+                            text: "A forest"
+                        }]
+                    })
+                    $('#skinURLSelect').select2({data: data});
+                })
+            break;
+
         case 'css/jstris-skin.css':
             skinURLSelect.disabled = false;
 
@@ -373,35 +404,15 @@ stylesheetSelect.oninput = function (event) {
                             text: group,
                             children: json[group].map(skin => ({
                                 id: skin.link,
-                                text: `${skin.name} (${skin.author})`,
+                                text: `${skin.name} by ${skin.author}`,
                             })),
                         };
                         data.push(groupData);
                     }
-
                     $('#skinURLSelect').select2({data: data});
                 });
             break;
 
-        case 'css/tetrio-skin.css':
-            skinURLSelect.disabled = false;
-
-            fetch("https://you.have.fail/tetrioplus/data/data.json")
-                .then((resp) => resp.json())
-                .then((json) => {
-                    const data = json
-                        .filter((item) => (item.type == "skin" && item.format == "tetrioraster"))
-                        .map((skin) => {
-                            return {
-                                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;
-
         default:
             skinURLSelect.disabled = true;
             break;

js/interface.js

@@ -41,12 +41,7 @@ class Settings {
             if ($('#skinURLSelect').find("option[value='" + localStorage['skinURL'] + "']").length) {
                 $('#skinURLSelect').val(localStorage['skinURL']).trigger('change');
             } else {
-                var option = new Option(
+                var option = new Option('Sample sauvegardé', localStorage['skinURL']);
-                    'Source externe',
-                    localStorage['skinURL'],
-                    true,
-                    true,
-                );
                 $('#skinURLSelect').append(option).trigger('change');
             }
             skinURLSelect.oninput();
@@ -399,6 +394,6 @@ Stats.prototype.timeFormat = new Intl.DateTimeFormat('fr-FR', {
 
 function playSound(sound, note = 0) {
     sound.currentTime = 0;
-    sound.playbackRate = Math.pow(5 / 4, note);
+    sound.playbackRate = note? Math.pow(5 / 4, note): 1;
     sound.play();
 }