use https://you.have.fail/tetrioplus/ skins
This commit is contained in:
149
js/app.js
149
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();
|
||||
};
|
||||
|
||||
@@ -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() {
|
||||
|
||||
Reference in New Issue
Block a user