defaults, round

css/_common.css

@@ -66,12 +66,12 @@ td#timeCell {
 }
 
 @keyframes hard-dropped-table-animation {
-    25% {
+    50% {
-        transform: translateY(3px);
+        transform: translate(0, 5px);
     }
 }
 .hard-dropped-table-animation {
-    animation: hard-dropped-table-animation .2s;
+    animation: hard-dropped-table-animation ease-in-out .2s;
 }
 
 tr.buffer-zone td:not(.mino) {

css/tetrio-skin.css

@@ -1,11 +1,12 @@
 :root {
     --cell-size: 30px;
-    --sprite-size: calc(100% / 11);
+    --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);
 }
 
-.minoes-table {
+tr.matrix td:not(.mino) {
-    border-collapse: collapse;
+    border-left: none;
+    border-bottom: none;
 }
 
 .mino {
@@ -62,6 +63,7 @@
 }
 
 .option {
+    --cell-size: 24px;
     display: inline-block;
     height: var(--cell-size);
 }
@@ -71,7 +73,6 @@
 }
 
 .select2-container:not(.select2-container--disabled) .selection {
-    --cell-size: 24px;
     --padded-cell-size: calc(var(--cell-size) + 1px);
     --nb-sprites: 4;
     --sprite-pos: 2;

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('${this.value}')`)">
+                  oninput="document.documentElement.style.setProperty('--skin-url', `url(${encodeURI(this.value)})`)">
                   </select>
                 </div>
                 <label for="skinURLSelect" class="col-2 col-form-label">Sample</label>

js/app.js

@@ -318,7 +318,33 @@ 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"/>`)
+    : 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>`)
+        : state.text
+)
+$.fn.select2.defaults.set("theme", "bootstrap-5")
+$.fn.select2.defaults.set("selectionCssClass", 'form-select')
+$.fn.select2.defaults.set("dropdownParent", $('#settingsModal'))
+$.fn.select2.defaults.set("dropdownAutoWidth", true)
+$.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)) {
+        return {
+            id: url,
+            text: 'Source externe',
+            newTag: true,
+        };
+    }
+});
+
 stylesheetSelect.oninput = function (event) {
     selectedStyleSheet.href = this.value;
 
@@ -342,33 +368,7 @@ stylesheetSelect.oninput = function (event) {
                         data.push(groupData);
                     }
 
-                    $('#skinURLSelect').select2({
+                    $('#skinURLSelect').select2({data: data});
-                        data: data,
-                        templateResult: state =>
-                            state.id
-                                ? $(`<img class="option result" src="${state.id}" title="${state.text}" loading="lazy"/>`)
-                                : state.text,
-                        templateSelection: state =>
-                            state.id
-                                ? $(`<span class="option selection" style="--skin-url: url(${state.id})" title="${state.text}" alt="${state.id}" loading="lazy"></span>`)
-                                : state.text,
-                        theme: 'bootstrap-5',
-                        selectionCssClass: 'form-select',
-                        dropdownParent: $('#settingsModal'),
-                        dropdownAutoWidth: true,
-                        placeholder: "URL de l'image",
-                        tags: true,
-                        createTag: function (params) {
-                            const url = encodeURI(params.term);
-                            if (ImageURLPattern.test(url)) {
-                                return {
-                                    id: url,
-                                    text: 'Source externe',
-                                    newTag: true,
-                                };
-                            }
-                        },
-                    });
                 });
             break;
         case 'css/tetrio-skin.css':
@@ -385,33 +385,7 @@ stylesheetSelect.oninput = function (event) {
                                 text:`${skin.name} (${skin.author})`
                             }
                         })
-                    $('#skinURLSelect').select2({
+                    $('#skinURLSelect').select2({data: data});
-                        data: data,
-                        templateResult: state =>
-                            state.id
-                                ? $(`<img class="option result" src="${state.id}" title="${state.text}" loading="lazy"/>`)
-                                : state.text,
-                        templateSelection: state =>
-                            state.id
-                                ? $(`<span class="option selection" style="--skin-url: url(${state.id})" title="${state.text}" alt="${state.id}" loading="lazy"></span>`)
-                                : state.text,
-                        theme: 'bootstrap-5',
-                        selectionCssClass: 'form-select',
-                        dropdownParent: $('#settingsModal'),
-                        dropdownAutoWidth: true,
-                        placeholder: "URL de l'image",
-                        tags: true,
-                        createTag: function (params) {
-                            const url = encodeURI(params.term);
-                            if (ImageURLPattern.test(url)) {
-                                return {
-                                    id: url,
-                                    text: 'Source externe',
-                                    newTag: true,
-                                };
-                            }
-                        },
-                    });
                 })
             break;
 

js/interface.js

@@ -36,6 +36,7 @@ class Settings {
         this.form.querySelectorAll('[name]').forEach(element => {
             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');
@@ -48,12 +49,8 @@ class Settings {
                 );
                 $('#skinURLSelect').append(option).trigger('change');
             }
-            document.documentElement.style.setProperty(
+            skinURLSelect.oninput();
-                '--skin-url',
-                `url(${localStorage['skinURL']})`,
-            );
         }
-        stylesheetSelect.oninput();
     }
 
     save() {