spacebar/SplatNet
spacebar/SplatNet
Watch
13
1
Fork
You've already forked SplatNet
 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move stage icns to use spritesheet to reduce net strain on server

Browse source
This commit is contained in:
kittentm 2026-02-20 06:01:25 +01:00
commit 4d95943fe9
19 changed files with 63 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

31
stages/stages.js
View file

@ -4,12 +4,27 @@ function stageNames(stages, lang = "en-US") {
return stages.map(s => s.translatedNames[lang]);
}
function stageImagePath(stageName) {
const firstWord = stageName
.split(" ")[0]
.toLowerCase()
.replace(/['.]/g, "");
return `/assets/stages/${firstWord}.png`;
function getStageClass(stageName) {
const name = stageName.toLowerCase();
if (name.includes("ancho-v")) return "sprite-ancho-v";
if (name.includes("arowana")) return "sprite-arowana";
if (name.includes("blackbelly")) return "sprite-blackbelly";
if (name.includes("bluefin")) return "sprite-bluefin";
if (name.includes("camp")) return "sprite-camp";
if (name.includes("flounder")) return "sprite-flounder";
if (name.includes("hammerhead")) return "sprite-hammerhead";
if (name.includes("kelp")) return "sprite-kelp";
if (name.includes("mahi-mahi")) return "sprite-mahi-mahi";
if (name.includes("moray")) return "sprite-moray";
if (name.includes("museum")) return "sprite-museum";
if (name.includes("piranha")) return "sprite-piranha";
if (name.includes("port")) return "sprite-port";
if (name.includes("saltspray")) return "sprite-saltspray";
if (name.includes("urchin")) return "sprite-urchin";
if (name.includes("walleye")) return "sprite-walleye";
return "sprite"; // fallback
}
async function fetchRotations() {
@ -83,7 +98,7 @@ async function renderStages() {
<div class="stages">
${rotation.turf.map(name => `
<div class="stage-item">
<img src="${stageImagePath(name)}" alt="${name}">
<div class="sprite ${getStageClass(name)}"></div>
<div class="stage-title">${name}</div>
</div>
`).join("")}
@ -104,7 +119,7 @@ async function renderStages() {
<div class="stages">
${rotation.ranked.map(name => `
<div class="stage-item">
<img src="${stageImagePath(name)}" alt="${name}">
<div class="sprite ${getStageClass(name)}"></div>
<div class="stage-title">${name}</div>
</div>
`).join("")}

48
stages/styles.css
View file

@ -170,13 +170,6 @@ body {
max-width: 400px;
}
.stages img {
width: 100%;
height: auto;
display: block;
margin-bottom: 10px;
}
.stage-title {
font-family: "Regular", sans-serif;
text-align: center;
@ -291,4 +284,43 @@ body {
height: 35px;
width: auto;
display: block;
}
}
.sprite {
background-image: url("/assets/stages/stages.png");
background-repeat: no-repeat;
display: block;
width: 100%;
max-width: 640px;
aspect-ratio: 16 / 9;
background-size: 406.25% auto;
margin-bottom: 10px;
}
.sprite-ancho-v { background-position: 0.255% 0.336%; }
.sprite-arowana { background-position: 33.418% 0.336%; }
.sprite-blackbelly { background-position: 66.582% 0.336%; }
.sprite-urchin { background-position: 99.745% 0.336%; }
.sprite-bluefin { background-position: 0.255% 25.168%; }
.sprite-camp { background-position: 33.418% 25.168%; }
.sprite-flounder { background-position: 66.582% 25.168%; }
.sprite-walleye { background-position: 99.745% 25.168%; }
.sprite-hammerhead { background-position: 4.337% 50%; }
.sprite-kelp { background-position: 37.5% 50%; }
.sprite-mahi-mahi { background-position: 0.255% 74.832%; }
.sprite-moray { background-position: 33.418% 74.832%; }
.sprite-museum { background-position: 66.582% 74.832%; }
.sprite-piranha { background-position: 0.255% 99.664%; }
.sprite-port { background-position: 33.418% 99.664%; }
.sprite-saltspray { background-position: 66.582% 99.664%; }
.sprite-github { width: 30px; height: 30px; background-position: -5px -745px; background-size: initial; aspect-ratio: 1/1; }
.sprite-gmail { width: 30px; height: 30px; background-position: -45px -745px; background-size: initial; aspect-ratio: 1/1; }
.sprite-linkedin { width: 30px; height: 30px; background-position: -1385px -745px; background-size: initial; aspect-ratio: 1/1; }
.sprite-stackoverflow { width: 30px; height: 30px; background-position: -1425px -745px; background-size: initial; aspect-ratio: 1/1; }
.sprite-tumblr { width: 30px; height: 30px; background-position: -1465px -745px; background-size: initial; aspect-ratio: 1/1; }
.sprite-twitter { width: 30px; height: 30px; background-position: -1505px -745px; background-size: initial; aspect-ratio: 1/1; }