adrien/quatuor
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Adrien MALINGREY
2026-03-11 15:05:34 +01:00
parent 7bdb9524ad
commit 54cb17fb88
7 changed files with 410 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
css/_common.css
View File

@@ -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;
}

220
css/_select2-dark.css
View File

@@ -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;
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-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");
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);
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
color: #dee2e6 !important;
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);
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
color: #dee2e6 !important;
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);
}
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);
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);
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
color: #dee2e6 !important;
.is-valid + body .select2-container--bootstrap-5 .select2-selection,
.was-validated
select:valid
+ body
.select2-container--bootstrap-5
.select2-selection {
border-color: #198754;
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
background-color: transparent !important;
color: #dee2e6 !important;
.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);
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
color: #dee2e6 !important;
border: 1px solid #495057 !important;
background-color: var(--bs-body-bg);
.is-invalid + body .select2-container--bootstrap-5 .select2-selection,
.was-validated
select:invalid
+ body
.select2-container--bootstrap-5
.select2-selection {
border-color: #dc3545;
}
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;
.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);
}

51
css/jstris-skin.css
View File

@@ -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;
}

49
css/tetrio-skin.css
View File

@@ -1,7 +1,7 @@
:root {
--cell-size: 30px;
--sprite-size: calc(100% / 11);
--skin-url: url(https://you.have.fail/ed/at/tetrioplus/data/content/skin/Haley%20Halcyon/tetrio_gameboy_plus.svg);
--cell-size: 30px;
--sprite-size: calc(100% / 11);
--skin-url: url(https://you.have.fail/ed/at/tetrioplus/data/content/skin/Haley%20Halcyon/tetrio_gameboy_plus.svg);
}
.minoes-table {
@@ -9,12 +9,12 @@
}
.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(--sprite-pos) * var(--sprite-size));
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(--sprite-pos) * var(--sprite-size));
}
.I {
@@ -46,14 +46,39 @@
}
.ghost {
--sprite-pos: 7;
opacity: 40%;
--sprite-pos: 7;
opacity: 40%;
}
.disabled {
--sprite-pos: 8;
--sprite-pos: 8;
}
.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;
}

16
index.html
View File

@@ -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>

149
js/app.js
View File

@@ -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();
};

89
js/interface.js
View File

@@ -36,77 +36,24 @@ 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
) {
$('#skinURLSelect').val(localStorage['skinURL']).trigger('change');
} else {
var option = new Option(
'Source externe',
localStorage['skinURL'],
true,
true,
);
$('#skinURLSelect').append(option).trigger('change');
}
document.documentElement.style.setProperty(
'--skin-url',
`url(${localStorage['skinURL']})`,
);
}
});
if (localStorage['skinURL']) {
if ($('#skinURLSelect').find("option[value='" + localStorage['skinURL'] + "']").length) {
$('#skinURLSelect').val(localStorage['skinURL']).trigger('change');
} else {
var option = new Option(
'Source externe',
localStorage['skinURL'],
true,
true,
);
$('#skinURLSelect').append(option).trigger('change');
}
document.documentElement.style.setProperty(
'--skin-url',
`url(${localStorage['skinURL']})`,
);
}
stylesheetSelect.oninput();
}
save() {