diff --git a/css/_common.css b/css/_common.css
index 0c5ab83..9d5ab79 100644
--- a/css/_common.css
+++ b/css/_common.css
@@ -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;
-}
\ No newline at end of file
+}
diff --git a/css/tetrio-skin.css b/css/tetrio-skin.css
index 9a17a5a..6e58b71 100644
--- a/css/tetrio-skin.css
+++ b/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 {
- 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;
diff --git a/index.html b/index.html
index da97fdf..558a067 100644
--- a/index.html
+++ b/index.html
@@ -93,7 +93,7 @@
diff --git a/js/app.js b/js/app.js
index 840b525..bb68ab5 100644
--- a/js/app.js
+++ b/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
+ ? $(`
`)
+ : state.text
+)
+$.fn.select2.defaults.set("templateSelection", (state) =>
+ state.id
+ ? $(``)
+ : 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
- ? $(`
`)
- : state.text,
- templateSelection: state =>
- state.id
- ? $(``)
- : 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
- ? $(`
`)
- : state.text,
- templateSelection: state =>
- state.id
- ? $(``)
- : 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;
diff --git a/js/interface.js b/js/interface.js
index e576366..986d562 100644
--- a/js/interface.js
+++ b/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(
- '--skin-url',
- `url(${localStorage['skinURL']})`,
- );
+ skinURLSelect.oninput();
}
- stylesheetSelect.oninput();
}
save() {