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

group tetr.io skins by authors

Browse Source
This commit is contained in:
Adrien MALINGREY
2026-03-14 17:53:56 +01:00
parent b2738f6923
commit 4320b46e37
7 changed files with 47 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
css/tetrio-skin.css
View File

@@ -1,7 +1,7 @@
:root {
--cell-size: 30px;
--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);
--skin-url: url(tetrio-skin/a_forest.png);
}
tr.matrix td:not(.mino) {

BIN
css/tetrio-skin/415652c2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 95 KiB

BIN
css/tetrio-skin/a_forest.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 83 KiB

BIN
css/tetrio-skin/a_forest2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

21
index.html
View File

@@ -12,8 +12,9 @@
<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/jstris-skin.css" title="Thème sélectionné" id="selectedStyleSheet">
<link rel="alternate stylesheet" href="css/jstris-skin.css" title="Sample...">
<link rel="stylesheet" href="css/tetrio-skin.css" title="Thème sélectionné" id="selectedStyleSheet">
<link rel="alternate stylesheet" href="css/tetrio-skin.css" title="Sample Tetr.io...">
<link rel="alternate stylesheet" href="css/jstris-skin.css" title="Sample JStris...">
<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,7 @@
<link rel="alternate stylesheet" href="css/heavy-metal.css" title="Heavy metal">
<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/stereo.css" title="3D">
<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>
@@ -79,8 +80,8 @@
<label for="stylesheetSelect" class="col-2 col-form-label">Thème</label>
<div class="col-4">
<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/tetrio-skin.css" selected>Sample Tetr.io...</option>
<option value="css/jstris-skin.css">Sample JStris...</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>
@@ -88,17 +89,19 @@
<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/stereo.css">3D</option>
</select>
</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(${this.value})`)">
</select>
</div>
<label for="skinURLSelect" class="col-2 col-form-label">Sample</label>
<label for="sfxVolumeRange" class="col-2 col-form-label">Volume</label>
<div class="col-4 d-flex align-items-baseline"><input name="sfxVolumeRange" id="sfxVolumeRange" class="form-range" type="range" min="0" max="1" step="any" value="0.7"></div>
<label for="sfxVolumeRange" class="col-2 col-form-label"><abbr title="Auteur des effets sonores : 25Pi25">Volume</abbr></label>
<div class="col-4 d-flex align-items-baseline">
<input name="sfxVolumeRange" id="sfxVolumeRange" class="form-range" type="range" min="0" max="1" step="any" value="0.7">
</div>
<div class="col-4">
<div class="form-check form-switch text-start">
<input id="fullscreenCheckbox" type="checkbox" role="switch" class="form-check-input" tabindex="0">

53
js/app.js
View File

@@ -361,6 +361,37 @@ stylesheetSelect.oninput = function (event) {
$("#skinURLSelect").empty();
switch (this.value) {
case 'css/tetrio-skin.css':
skinURLSelect.disabled = false;
const baseURL = "https://you.have.fail/tetrioplus/data"
fetch(`${baseURL}/data.json`)
.then((resp) => resp.json())
.then((json) => {
json = json.filter((item) => (item.type == "skin" && item.format == "tetrioraster" && /\.(?:png|jpg|jpeg|gif|bmp|webp|svg)$/i.test(item.path)))
const groups = Map.groupBy(json, (skin) => skin.author)
const data = groups.entries().map(([author, skins]) => {
return {
text: author,
children: skins.map((skin) => {
return {
id: `${baseURL}/${encodeURI(skin.path)}`,
text:`${skin.name}\n${skin.description}`
}
})
}
}).toArray()
data.push({
text: "AdrienMalin",
children: [{
id: `${document.location.href}/css/tetrio-skin/a_forest.png`,
text: "A forest"
}]
})
$('#skinURLSelect').select2({data: data});
})
break;
case 'css/jstris-skin.css':
skinURLSelect.disabled = false;
@@ -373,35 +404,15 @@ stylesheetSelect.oninput = function (event) {
text: group,
children: json[group].map(skin => ({
id: skin.link,
text: `${skin.name} (${skin.author})`,
text: `${skin.name} by ${skin.author}`,
})),
};
data.push(groupData);
}
$('#skinURLSelect').select2({data: data});
});
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: encodeURI(`https://you.have.fail/tetrioplus/data/${skin.path}`),
text:`${skin.name} (${skin.author})\n${skin.description}`
}
})
.filter((option) => ImageURLPattern.test(option.id))
$('#skinURLSelect').select2({data: data});
})
break;
default:
skinURLSelect.disabled = true;
break;

9
js/interface.js
View File

@@ -41,12 +41,7 @@ class Settings {
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,
);
var option = new Option('Sample sauvegardé', localStorage['skinURL']);
$('#skinURLSelect').append(option).trigger('change');
}
skinURLSelect.oninput();
@@ -399,6 +394,6 @@ Stats.prototype.timeFormat = new Intl.DateTimeFormat('fr-FR', {
function playSound(sound, note = 0) {
sound.currentTime = 0;
sound.playbackRate = Math.pow(5 / 4, note);
sound.playbackRate = note? Math.pow(5 / 4, note): 1;
sound.play();
}