use https://you.have.fail/tetrioplus/ skins

2026-03-11 15:05:34 +01:00
parent 7bdb9524ad
commit 54cb17fb88
7 changed files with 410 additions and 172 deletions
--- a/css/_common.css
+++ b/css/_common.css
@@ -289,3 +289,11 @@ tr.cleared-line-animation {
 #statsModal tr:last-child td {
    border-bottom: none;
 }
+
+.select2-dropdown {
+    width: min-content !important;
+}
+
+.select2-results__group {
+    display: inline-block;
+}
--- a/css/_select2-dark.css
+++ b/css/_select2-dark.css
@@ -1,42 +1,204 @@
-/* Select 2 bootstrap-5 theme override */
-/* https://github.com/apalfrey/select2-bootstrap-5-theme/issues/65#issuecomment-1846786325 */
-
-html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
-    background-color: transparent !important;
-    border: 1px solid #495057;
-}
-
-html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single {
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
-}
-
-html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
-	color: #dee2e6 !important;
-}
-
-html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
-	color: #dee2e6 !important;
-}
-
-html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
-	border: 1px solid var(--bs-gray-600);
-}
-
-html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
-	color: #dee2e6 !important;
-}
-
-html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
-    background-color: transparent !important;
-    color: #dee2e6 !important;
-}
-
-html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
-    color: #dee2e6 !important;
-    border: 1px solid #495057 !important;
+body .select2-container--bootstrap-5 .select2-selection {
+    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
+    border: var(--bs-border-width) solid var(--bs-border-color);
 }

-html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__group {
-	color: var(--bs-secondary-color)!important;
+body
+    .select2-container--bootstrap-5.select2-container--focus
+    .select2-selection,
+body
+    .select2-container--bootstrap-5.select2-container--open
+    .select2-selection {
+    border-color: var(--bs-link-hover-color);
+    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+
+body
+    .select2-container--bootstrap-5
+    .select2-selection--multiple
+    .select2-selection__clear,
+body
+    .select2-container--bootstrap-5
+    .select2-selection--single
+    .select2-selection__clear {
+    background: transparent
+        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23676a6d'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e")
+        50%/0.75rem auto no-repeat;
+}
+body
+    .select2-container--bootstrap-5
+    .select2-selection--multiple
+    .select2-selection__clear:hover,
+body
+    .select2-container--bootstrap-5
+    .select2-selection--single
+    .select2-selection__clear:hover {
+    background: transparent
+        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e")
+        50%/0.75rem auto no-repeat;
+}
+body .select2-container--bootstrap-5 .select2-dropdown {
+    color: var(--bs-body-color);
+    background-color: var(--bs-body-bg);
+    border-color: var(--bs-link-hover-color);
+}
+
+body
+    .select2-container--bootstrap-5
+    .select2-dropdown
+    .select2-search
+    .select2-search__field {
+    color: var(--bs-body-color);
+    background-color: var(--bs-body-bg);
+    background-clip: padding-box;
+    border: var(--bs-border-width) solid var(--bs-border-color);
+}
+body
+    .select2-container--bootstrap-5
+    .select2-dropdown
+    .select2-search
+    .select2-search__field:focus {
+    border-color: var(--bs-link-hover-color);
+    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+body
+    .select2-container--bootstrap-5
+    .select2-dropdown
+    .select2-results__options
+    .select2-results__option.select2-results__message {
+    color: #6c757d;
+}
+body
+    .select2-container--bootstrap-5
+    .select2-dropdown
+    .select2-results__options
+    .select2-results__option.select2-results__option--highlighted {
+    color: var(--bs-body-color);
+    background-color: var(--bs-light-bg-subtle) !important;
+}
+body
+    .select2-container--bootstrap-5
+    .select2-dropdown
+    .select2-results__options
+    .select2-results__option.select2-results__option--selected,
+body
+    .select2-container--bootstrap-5
+    .select2-dropdown
+    .select2-results__options
+    .select2-results__option[aria-selected="true"]:not(
+        .select2-results__option--highlighted
+    ) {
+    color: var(--bs-body-color);
+    background-color: var(--bs-dark-bg-subtle);
+}
+body
+    .select2-container--bootstrap-5
+    .select2-dropdown
+    .select2-results__options
+    .select2-results__option.select2-results__option--disabled,
+body
+    .select2-container--bootstrap-5
+    .select2-dropdown
+    .select2-results__options
+    .select2-results__option[aria-disabled="true"] {
+    color: #6c757d;
+}
+body
+    .select2-container--bootstrap-5
+    .select2-dropdown
+    .select2-results__options
+    .select2-results__option[role="group"]
+    .select2-results__group {
+    color: #6c757d;
+}
+body
+    .select2-container--bootstrap-5
+    .select2-selection--single
+    .select2-selection__rendered {
+    color: var(--bs-body-color);
+}
+body
+    .select2-container--bootstrap-5
+    .select2-selection--single
+    .select2-selection__rendered
+    .select2-selection__placeholder {
+    color: #6c757d;
+}
+body
+    .select2-container--bootstrap-5
+    .select2-selection--multiple
+    .select2-selection__rendered
+    .select2-selection__choice {
+    color: var(--bs-body-color);
+    border: var(--bs-border-width) solid var(--bs-border-color);
+}
+
+body
+    .select2-container--bootstrap-5.select2-container--disabled
+    .select2-selection,
+body
+    .select2-container--bootstrap-5.select2-container--disabled.select2-container--focus
+    .select2-selection {
+    color: #6c757d;
+    background-color: var(--bs-light-bg-subtle);
+    border-color: var(--bs-dark-bg-subtle);
+}
+.is-valid + body .select2-container--bootstrap-5 .select2-selection,
+.was-validated
+    select:valid
+    + body
+    .select2-container--bootstrap-5
+    .select2-selection {
+    border-color: #198754;
+}
+.is-valid
+    + body
+    .select2-container--bootstrap-5.select2-container--focus
+    .select2-selection,
+.is-valid
+    + body
+    .select2-container--bootstrap-5.select2-container--open
+    .select2-selection,
+.was-validated
+    select:valid
+    + body
+    .select2-container--bootstrap-5.select2-container--focus
+    .select2-selection,
+.was-validated
+    select:valid
+    + body
+    .select2-container--bootstrap-5.select2-container--open
+    .select2-selection {
+    border-color: #198754;
+    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
+}
+.is-invalid + body .select2-container--bootstrap-5 .select2-selection,
+.was-validated
+    select:invalid
+    + body
+    .select2-container--bootstrap-5
+    .select2-selection {
+    border-color: #dc3545;
+}
+.is-invalid
+    + body
+    .select2-container--bootstrap-5.select2-container--focus
+    .select2-selection,
+.is-invalid
+    + body
+    .select2-container--bootstrap-5.select2-container--open
+    .select2-selection,
+.was-validated
+    select:invalid
+    + body
+    .select2-container--bootstrap-5.select2-container--focus
+    .select2-selection,
+.was-validated
+    select:invalid
+    + body
+    .select2-container--bootstrap-5.select2-container--open
+    .select2-selection {
+    border-color: #dc3545;
+    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
 }
--- a/css/jstris-skin.css
+++ b/css/jstris-skin.css
@@ -4,38 +4,14 @@
  --skin-url: url(https://i.imgur.com/HqGYC5G.png);
 }

-.select2-dropdown {
-    width: min-content !important;
-}
-
-.select2-results__group {
-    display: inline-block;
-}
-
-.option {
-    display: inline-block;
-    width: calc(var(--nb-sprites) * var(--cell-size));
-    height: var(--cell-size);
-}
-
-.result {
-    --nb-sprites: 9;
-}
-
-.selection {
-    background-position-x: calc(-1 * var(--sprite-pos) * var(--cell-size));
-    --nb-sprites: 4;
-    --sprite-pos: 4;
-    background-image: var(--skin-url);
-    background-size: cover;
-    background-repeat: no-repeat;
-    vertical-align: middle;
-}
-
 .card {
  background-color: #1c1c1c;
 }

+.card-body {
+    background-color: black;
+}
+
 #matrixCard {
    background-image: url(jstris-skin/jstris-grid.png);
    background-position: bottom;
@@ -100,3 +76,22 @@ tr.matrix td:not(.mino) {
 #nextTable .mino {
    box-shadow: 4px 4px 10px #0002;
 }
+
+.option {
+    display: inline-block;
+    height: var(--cell-size);
+}
+
+.result {
+    --nb-sprites: 9;
+}
+
+.select2-container:not(.select2-container--disabled) .selection {
+    width: calc(var(--nb-sprites) * var(--cell-size));
+    background-position-x: calc(-1 * var(--sprite-pos) * var(--cell-size));
+    --nb-sprites: 4;
+    --sprite-pos: 4;
+    background-image: var(--skin-url);
+    background-size: cover;
+    background-repeat: no-repeat;
+}
--- a/css/tetrio-skin.css
+++ b/css/tetrio-skin.css
@@ -57,3 +57,28 @@
 .locking.mino {
    filter: saturate(60%) brightness(180%);
 }
+
+#holdTable .mino,
+#nextTable .mino {
+    box-shadow: 4px 4px 10px #0002;
+}
+
+.option {
+    display: inline-block;
+    height: var(--cell-size);
+}
+
+.result {
+    --nb-sprites: 9;
+}
+
+.select2-container:not(.select2-container--disabled) .selection {
+    --padded-cell-size: calc(var(--cell-size) + 1px);
+    width: calc(var(--nb-sprites) * var(--padded-cell-size));
+    background-position-x: calc(-1 * var(--sprite-pos) * var(--padded-cell-size));
+    --nb-sprites: 3;
+    --sprite-pos: 4;
+    background-image: var(--skin-url);
+    background-size: cover;
+    background-repeat: no-repeat;
+}
--- a/index.html
+++ b/index.html
@@ -12,7 +12,8 @@
    <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/classic.css" title="Thème sélectionné" id="selectedStyleSheet">
+    <link rel="stylesheet" href="css/jstris-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/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,6 @@
    <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/jstris-skin.css" title="Sample...">
    <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>
@@ -78,21 +78,21 @@
              <fieldset class="row g-2 mb-3 align-items-center text-center"><legend class="text-start">Interface</legend>
                <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; skinURLSelect.disabled = this.value !== 'css/jstris-skin.css';">
-                    <option value="css/classic.css" selected>Classique</option>
-                    <option value="css/neo-classic.css" selected>Néo-classique</option>
+                  <select name="stylesheet" id="stylesheetSelect" class="form-select">
+                    <option value="css/jstris-skin.css" selected>Sample JStris...</option>
+                    <option value="css/tetrio-skin.css">Sample Tetr.io...</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>
                    <option value="css/electro.css">Électro</option>
                    <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/jstris-skin.css">Sample...</option>
                  </select>
                </div>
                <div class="col-4">
-                  <select name="skinURL" id="skinURLSelect" class="form-select" disabled
+                  <select name="skinURL" id="skinURLSelect" class="form-select"
                  oninput="document.documentElement.style.setProperty('--skin-url', `url(${this.value})`)">
                  </select>
                </div>
--- a/js/app.js
+++ b/js/app.js
@@ -1,27 +1,3 @@
-let scheduler = new Scheduler();
-let settings = new Settings();
-let stats = new Stats();
-let holdQueue = new HoldQueue();
-let matrix = new Matrix();
-let nextQueue = new NextQueue();
-let playing = false;
-//let lastActionSucceded = true
-let favicon;
-
-window.onload = function (event) {
-    favicon = document.querySelector("link[rel~='icon']");
-    
-    fullscreenCheckbox.onchange = function () {
-        if (this.checked) {
-            document.documentElement.requestFullscreen();
-        } else {
-            document.exitFullscreen();
-        }
-    };
-
-    restart();
-};
-
 document.onfullscreenchange = function () {
    if (document.fullscreenElement) {
        fullscreenCheckbox.checked = true;
@@ -326,6 +302,14 @@ sceneDiv.onmouseup = document.onmouseleave = function (event) {
    mousedown = false;
 };

+fullscreenCheckbox.onchange = function () {
+    if (this.checked) {
+        document.documentElement.requestFullscreen();
+    } else {
+        document.exitFullscreen();
+    }
+};
+
 sceneDiv.onwheel = function (event) {
    event.preventDefault();
    event.stopPropagation();
@@ -333,3 +317,120 @@ sceneDiv.onwheel = function (event) {
    tZ -= event.deltaY;
    screenRow.style.setProperty('--tZ', tZ + 'px');
 };
+
+const ImageURLPattern = /^(https?:\/\/.*\.(?:png|jpg|jpeg|gif|bmp|webp|svg))$/i;
+stylesheetSelect.oninput = function (event) {
+    selectedStyleSheet.href = this.value;
+
+    $("#skinURLSelect").empty();
+    switch (this.value) {
+        case 'css/jstris-skin.css':
+            skinURLSelect.disabled = false;
+
+            fetch('https://konsola5.github.io/jstris-customization-database/jstrisCustomizationDatabase.json')
+                .then(response => response.json())
+                .then(json => {
+                    const data = [];
+                    for (const group in json) {
+                        const groupData = {
+                            text: group,
+                            children: json[group].map(skin => ({
+                                id: skin.link,
+                                text: `${skin.name} (${skin.author})`,
+                            })),
+                        };
+                        data.push(groupData);
+                    }
+
+                    $('#skinURLSelect').select2({
+                        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':
+            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: `https://you.have.fail/tetrioplus/data/${skin.path}`,
+                                text:`${skin.name} (${skin.author})`
+                            }
+                        })
+                    $('#skinURLSelect').select2({
+                        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;
+
+        default:
+            skinURLSelect.disabled = true;
+            break;
+    }
+}
+
+let scheduler = new Scheduler();
+let settings = new Settings();
+let stats = new Stats();
+let holdQueue = new HoldQueue();
+let matrix = new Matrix();
+let nextQueue = new NextQueue();
+let playing = false;
+//let lastActionSucceded = true
+let favicon = document.querySelector("link[rel~='icon']");
+
+window.onload = function (event) {
+    restart();
+};
--- a/js/interface.js
+++ b/js/interface.js
@@ -36,61 +36,8 @@ class Settings {
        this.form.querySelectorAll('[name]').forEach(element => {
            if (element.name in localStorage) element.value = localStorage[element.name];
        });
-        selectedStyleSheet.href = stylesheetSelect.value;
-        skinURLSelect.disabled = stylesheetSelect.value !== 'css/jstris-skin.css';
-
-        fetch(
-            'https://konsola5.github.io/jstris-customization-database/jstrisCustomizationDatabase.json',
-        )
-            .then(response => response.json())
-            .then(json => {
-                for (const group in json) {
-                    const optgroup = document.createElement('optgroup');
-                    optgroup.label = group;
-                    json[group].forEach(skin => {
-                        const option = document.createElement('option');
-                        option.value = skin.link;
-                        option.textContent = `${skin.name} (${skin.author})`;
-                        optgroup.appendChild(option);
-                    });
-                    skinURLSelect.appendChild(optgroup);
-                }
-
-                $('#skinURLSelect').select2({
-                    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 (/^(https?:\/\/.*\.(?:png|jpg|jpeg|gif|bmp|webp|svg))$/i.test(url)) {
-                            return {
-                                id: url,
-                                text: 'Source externe',
-                                newTag: true,
-                            };
-                        }
-                    },
-                });
        if (localStorage['skinURL']) {
-                    if (
-                        $('#skinURLSelect').find("option[value='" + localStorage['skinURL'] + "']")
-                            .length
-                    ) {
+            if ($('#skinURLSelect').find("option[value='" + localStorage['skinURL'] + "']").length) {
                $('#skinURLSelect').val(localStorage['skinURL']).trigger('change');
            } else {
                var option = new Option(
@@ -106,7 +53,7 @@ class Settings {
                `url(${localStorage['skinURL']})`,
            );
        }
-            });
+        stylesheetSelect.oninput();
    }

    save() {