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

defaults, round

Browse Source
This commit is contained in:
Adrien MALINGREY
2026-03-11 18:10:20 +01:00
parent 018d623143
commit b8b743871e
5 changed files with 41 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
css/_common.css
View File

@@ -66,12 +66,12 @@ td#timeCell {
}
@keyframes hard-dropped-table-animation {
25% {
transform: translateY(3px);
50% {
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) {
@@ -296,4 +296,4 @@ tr.cleared-line-animation {
.select2-results__group {
display: inline-block;
}
}

9
css/tetrio-skin.css
View File

@@ -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 {
border-collapse: collapse;
tr.matrix td:not(.mino) {
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;

2
index.html
View File

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

84
js/app.js
View File

@@ -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({
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,
};
}
},
});
$('#skinURLSelect').select2({data: data});
});
break;
case 'css/tetrio-skin.css':
@@ -385,33 +385,7 @@ stylesheetSelect.oninput = function (event) {
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,
};
}
},
});
$('#skinURLSelect').select2({data: data});
})
break;

7
js/interface.js
View File

@@ -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(
'--skin-url',
`url(${localStorage['skinURL']})`,
);
skinURLSelect.oninput();
}
stylesheetSelect.oninput();
}
save() {