forked from spacebar/SplatNet
Overhaul of how header is managed & loaded
- Fixes a bunch of hardcodes - Uses more centralized general.js more - adds Lang selector (not used currently) - Adds "to official splatoon website" text
This commit is contained in:
parent
7c5013e365
commit
5029fa3346
12 changed files with 10088 additions and 394 deletions
|
|
@ -1,119 +1,166 @@
|
|||
(function() {
|
||||
const MOVE_DATA = {
|
||||
y: [0, 0, 0, 0, 0, 0, 2.898550724637681, 2.898550724637681, 2.898550724637681, 2.898550724637681, 2.898550724637681, 2.898550724637681, 5.797101449275362, 5.797101449275362, 5.797101449275362, 5.797101449275362, 8.695652173913043, 8.695652173913043, 8.695652173913043, 11.594202898550725, 11.594202898550725, 11.594202898550725, 14.492753623188406, 14.492753623188406, 14.492753623188406, 17.391304347826086, 17.391304347826086, 20.28985507246377, 20.28985507246377, 23.18840579710145, 23.18840579710145, 26.08695652173913, 26.08695652173913, 28.985507246376812, 28.985507246376812, 31.884057971014492, 31.884057971014492, 34.78260869565217, 34.78260869565217, 37.68115942028985, 37.68115942028985, 40.57971014492754, 40.57971014492754, 43.47826086956522, 43.47826086956522, 46.3768115942029, 49.27536231884058, 49.27536231884058, 52.17391304347826, 52.17391304347826, 55.072463768115945, 55.072463768115945, 57.971014492753625, 60.869565217391305, 60.869565217391305, 63.768115942028984, 63.768115942028984, 66.66666666666667, 69.56521739130434, 69.56521739130434, 72.46376811594203, 72.46376811594203, 75.3623188405797, 75.3623188405797, 78.26086956521739, 81.15942028985508, 81.15942028985508, 84.05797101449275, 84.05797101449275, 86.95652173913044, 86.95652173913044, 89.85507246376811, 89.85507246376811, 92.7536231884058, 95.65217391304348, 95.65217391304348, 98.55072463768116, 98.55072463768116, 101.44927536231884, 101.44927536231884, 101.44927536231884, 104.34782608695652, 104.34782608695652, 107.2463768115942, 107.2463768115942, 110.14492753623189, 110.14492753623189, 110.14492753623189, 113.04347826086956, 113.04347826086956, 115.94202898550725, 115.94202898550725, 115.94202898550725, 118.84057971014492, 118.84057971014492, 118.84057971014492, 118.84057971014492, 121.73913043478261, 121.73913043478261, 121.73913043478261, 121.73913043478261, 124.6376811594203, 124.6376811594203, 124.6376811594203, 124.6376811594203, 124.6376811594203, 124.6376811594203, 124.6376811594203, 124.6376811594203, 124.6376811594203, 124.6376811594203],
|
||||
x: [-3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.619718309859155, -3.619718309859155, -3.591549295774648, -3.563380281690141, -3.535211267605634, -3.47887323943662, -3.4225352112676055, -3.3943661971830985, -3.3098591549295775, -3.2535211267605635, -3.169014084507042, -3.112676056338028, -3.028169014084507, -2.943661971830986, -2.859154929577465, -2.7464788732394365, -2.6619718309859155, -2.549295774647887, -2.436619718309859, -2.352112676056338, -2.23943661971831, -2.098591549295775, -1.9859154929577465, -1.8732394366197183, -1.76056338028169, -1.619718309859155, -1.4788732394366195, -1.3661971830985915, -1.2253521126760565, -1.084507042253521, -.943661971830986, -.8028169014084505, -.6619718309859155, -.52112676056338, -.380281690140845, -.21126760563380298, -.07042253521126751, .07042253521126751, .21126760563380298, .352112676056338, .492957746478873, .6338028169014089, .774647887323944, .915492957746479, 1.028169014084507, 1.169014084507042, 1.309859154929578, 1.450704225352113, 1.563380281690141, 1.704225352112676, 1.816901408450704, 1.929577464788733, 2.070422535211268, 2.183098591549296, 2.295774647887324, 2.408450704225352, 2.52112676056338, 2.605633802816902, 2.71830985915493, 2.802816901408451, 2.887323943661972, 2.971830985915493, 3.056338028169014, 3.140845070422535, 3.225352112676056, 3.281690140845071, 3.338028169014085, 3.394366197183099, 3.450704225352113, 3.507042253521127, 3.535211267605634, 3.563380281690141, 3.591549295774648, 3.619718309859155, 3.647887323943662, 3.647887323943662, 3.647887323943662],
|
||||
rotate: [-1.1781609195402298, -1.1781609195402298, -1.1781609195402298, -1.1781609195402298, -1.1781609195402298, -1.1666666666666665, -1.1666666666666665, -1.1551724137931034, -1.14367816091954, -1.14367816091954, -1.132183908045977, -1.1206896551724137, -1.1091954022988506, -1.0977011494252873, -1.0747126436781609, -1.0632183908045976, -1.0402298850574712, -1.028735632183908, -1.0172413793103448, -.9942528735632183, -.9712643678160919, -.9597701149425286, -.9367816091954022, -.9137931034482758, -.8908045977011494, -.867816091954023, -.8448275862068966, -.82183908045977, -.7988505747126436, -.7758620689655171, -.7528735632183907, -.7183908045977011, -.6954022988505747, -.6724137931034482, -.6379310344827586, -.6149425287356322, -.5804597701149425, -.557471264367816, -.5229885057471264, -.5, -.4655172413793103, -.43103448275862066, -.40804597701149425, -.37356321839080453, -.3505747126436781, -.3160919540229885, -.2816091954022988, -.24712643678160917, -.22413793103448276, -.18965517241379304, -.15517241379310343, -.1206896551724137, -.0862068965517242, -.06321839080459757, -.028735632183908066, .005747126436781658, .04022988505747138, .07471264367816088, .09770114942528729, .13218390804597702, .16666666666666674, .20114942528735646, .22413793103448287, .2586206896551724, .2931034482758621, .3275862068965518, .35057471264367823, .38505747126436773, .41954022988505746, .44252873563218387, .4770114942528736, .5, .5344827586206897, .5574712643678161, .5919540229885059, .6149425287356323, .6494252873563218, .6724137931034484, .6954022988505748, .7298850574712643, .7528735632183907, .7758620689655173, .7988505747126438, .8218390804597702, .8448275862068968, .867816091954023, .8908045977011496, .9137931034482758, .9367816091954024, .9482758620689657, .9712643678160919, .9942528735632186, 1.0057471264367814, 1.028735632183908, 1.0402298850574714, 1.0517241379310347, 1.0747126436781609, 1.0862068965517242, 1.0977011494252875, 1.1091954022988504, 1.1206896551724137, 1.132183908045977, 1.1436781609195403, 1.1436781609195403, 1.1551724137931036, 1.1551724137931036, 1.1666666666666665, 1.1666666666666665, 1.1666666666666665, 1.1666666666666665, 1.1781609195402298]
|
||||
};
|
||||
var MOVE_DATA = {
|
||||
y: [0, 0, 0, 0, 0, 0, 2.898550724637681, 2.898550724637681, 2.898550724637681, 2.898550724637681, 2.898550724637681, 2.898550724637681, 5.797101449275362, 5.797101449275362, 5.797101449275362, 5.797101449275362, 8.695652173913043, 8.695652173913043, 8.695652173913043, 11.594202898550725, 11.594202898550725, 11.594202898550725, 14.492753623188406, 14.492753623188406, 14.492753623188406, 17.391304347826086, 17.391304347826086, 20.28985507246377, 20.28985507246377, 23.18840579710145, 23.18840579710145, 26.08695652173913, 26.08695652173913, 28.985507246376812, 28.985507246376812, 31.884057971014492, 31.884057971014492, 34.78260869565217, 34.78260869565217, 37.68115942028985, 37.68115942028985, 40.57971014492754, 40.57971014492754, 43.47826086956522, 43.47826086956522, 46.3768115942029, 49.27536231884058, 49.27536231884058, 52.17391304347826, 52.17391304347826, 55.072463768115945, 55.072463768115945, 57.971014492753625, 60.869565217391305, 60.869565217391305, 63.768115942028984, 63.768115942028984, 66.66666666666667, 69.56521739130434, 69.56521739130434, 72.46376811594203, 72.46376811594203, 75.3623188405797, 75.3623188405797, 78.26086956521739, 81.15942028985508, 81.15942028985508, 84.05797101449275, 84.05797101449275, 86.95652173913044, 86.95652173913044, 89.85507246376811, 89.85507246376811, 92.7536231884058, 95.65217391304348, 95.65217391304348, 98.55072463768116, 98.55072463768116, 101.44927536231884, 101.44927536231884, 101.44927536231884, 104.34782608695652, 104.34782608695652, 107.2463768115942, 107.2463768115942, 110.14492753623189, 110.14492753623189, 110.14492753623189, 113.04347826086956, 113.04347826086956, 115.94202898550725, 115.94202898550725, 115.94202898550725, 118.84057971014492, 118.84057971014492, 118.84057971014492, 118.84057971014492, 121.73913043478261, 121.73913043478261, 121.73913043478261, 121.73913043478261, 124.6376811594203, 124.6376811594203, 124.6376811594203, 124.6376811594203, 124.6376811594203, 124.6376811594203, 124.6376811594203, 124.6376811594203, 124.6376811594203, 124.6376811594203],
|
||||
x: [-3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.647887323943662, -3.619718309859155, -3.619718309859155, -3.591549295774648, -3.563380281690141, -3.535211267605634, -3.47887323943662, -3.4225352112676055, -3.3943661971830985, -3.3098591549295775, -3.2535211267605635, -3.169014084507042, -3.112676056338028, -3.028169014084507, -2.943661971830986, -2.859154929577465, -2.7464788732394365, -2.6619718309859155, -2.549295774647887, -2.436619718309859, -2.352112676056338, -2.23943661971831, -2.098591549295775, -1.9859154929577465, -1.8732394366197183, -1.76056338028169, -1.619718309859155, -1.4788732394366195, -1.3661971830985915, -1.2253521126760565, -1.084507042253521, -.943661971830986, -.8028169014084505, -.6619718309859155, -.52112676056338, -.380281690140845, -.21126760563380298, -.07042253521126751, .07042253521126751, .21126760563380298, .352112676056338, .492957746478873, .6338028169014089, .774647887323944, .915492957746479, 1.028169014084507, 1.169014084507042, 1.309859154929578, 1.450704225352113, 1.563380281690141, 1.704225352112676, 1.816901408450704, 1.929577464788733, 2.070422535211268, 2.183098591549296, 2.295774647887324, 2.408450704225352, 2.52112676056338, 2.605633802816902, 2.71830985915493, 2.802816901408451, 2.887323943661972, 2.971830985915493, 3.056338028169014, 3.140845070422535, 3.225352112676056, 3.281690140845071, 3.338028169014085, 3.394366197183099, 3.450704225352113, 3.507042253521127, 3.535211267605634, 3.563380281690141, 3.591549295774648, 3.619718309859155, 3.647887323943662, 3.647887323943662, 3.647887323943662],
|
||||
rotate: [-1.1781609195402298, -1.1781609195402298, -1.1781609195402298, -1.1781609195402298, -1.1781609195402298, -1.1666666666666665, -1.1666666666666665, -1.1551724137931034, -1.14367816091954, -1.14367816091954, -1.132183908045977, -1.1206896551724137, -1.1091954022988506, -1.0977011494252873, -1.0747126436781609, -1.0632183908045976, -1.0402298850574712, -1.028735632183908, -1.0172413793103448, -.9942528735632183, -.9712643678160919, -.9597701149425286, -.9367816091954022, -.9137931034482758, -.8908045977011494, -.867816091954023, -.8448275862068966, -.82183908045977, -.7988505747126436, -.7758620689655171, -.7528735632183907, -.7183908045977011, -.6954022988505747, -.6724137931034482, -.6379310344827586, -.6149425287356322, -.5804597701149425, -.557471264367816, -.5229885057471264, -.5, -.4655172413793103, -.43103448275862066, -.40804597701149425, -.37356321839080453, -.3505747126436781, -.3160919540229885, -.2816091954022988, -.24712643678160917, -.22413793103448276, -.18965517241379304, -.15517241379310343, -.1206896551724137, -.0862068965517242, -.06321839080459757, -.028735632183908066, .005747126436781658, .04022988505747138, .07471264367816088, .09770114942528729, .13218390804597702, .16666666666666674, .20114942528735646, .22413793103448287, .2586206896551724, .2931034482758621, .3275862068965518, .35057471264367823, .38505747126436773, .41954022988505746, .44252873563218387, .4770114942528736, .5, .5344827586206897, .5574712643678161, .5919540229885059, .6149425287356323, .6494252873563218, .6724137931034484, .6954022988505748, .7298850574712643, .7528735632183907, .7758620689655173, .7988505747126438, .8218390804597702, .8448275862068968, .867816091954023, .8908045977011496, .9137931034482758, .9367816091954024, .9482758620689657, .9712643678160919, .9942528735632186, 1.0057471264367814, 1.028735632183908, 1.0402298850574714, 1.0517241379310347, 1.0747126436781609, 1.0862068965517242, 1.0977011494252875, 1.1091954022988504, 1.1206896551724137, 1.132183908045977, 1.1436781609195403, 1.1436781609195403, 1.1551724137931036, 1.1551724137931036, 1.1666666666666665, 1.1666666666666665, 1.1666666666666665, 1.1666666666666665, 1.1781609195402298]
|
||||
};
|
||||
|
||||
function lerp(array, progress) {
|
||||
const n = (array.length - 1) * progress;
|
||||
const i = parseInt(n);
|
||||
const r = n - i;
|
||||
if (i >= array.length - 1) return array[array.length - 1];
|
||||
return array[i] * (1 - r) + array[i + 1] * r;
|
||||
}
|
||||
function lerp(array, progress) {
|
||||
var n = (array.length - 1) * progress;
|
||||
var i = parseInt(n);
|
||||
var r = n - i;
|
||||
if (i >= array.length - 1) return array[array.length - 1];
|
||||
return array[i] * (1 - r) + array[i + 1] * r;
|
||||
}
|
||||
|
||||
function animateLoadingCanvas() {
|
||||
const canvas = document.getElementById("loading-canvas");
|
||||
const loadingOverlay = document.getElementById("loading-overlay");
|
||||
if (!canvas || !loadingOverlay) return;
|
||||
const ctx = canvas.getContext("2d");
|
||||
const image = new Image();
|
||||
image.src = "/assets/en/loading/@2x-se6335ab797-cb27d69f23a4d1112bc2a0d272538f39dd3017be20e5f2e3f4a460bd0071b68d.png";
|
||||
const frameWidth = 100, frameHeight = 100, totalFrames = 17;
|
||||
let currentFrame = 0, lastUpdateTime = 0, animationId;
|
||||
|
||||
image.onload = () => {
|
||||
function animate(timestamp = 0) {
|
||||
if (loadingOverlay.style.display === "none") {
|
||||
cancelAnimationFrame(animationId);
|
||||
return;
|
||||
}
|
||||
if (!lastUpdateTime) lastUpdateTime = timestamp;
|
||||
if (timestamp - lastUpdateTime > 50) {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.drawImage(image, 0, currentFrame * frameHeight, frameWidth, frameHeight, 0, 0, frameWidth, frameHeight);
|
||||
currentFrame = (currentFrame + 1) % totalFrames;
|
||||
lastUpdateTime = timestamp;
|
||||
}
|
||||
animationId = requestAnimationFrame(animate);
|
||||
window.animateLoadingCanvas = function() {
|
||||
var canvas = document.getElementById("loading-canvas");
|
||||
var loadingOverlay = document.getElementById("loading-overlay");
|
||||
if (!canvas || !loadingOverlay) return;
|
||||
var ctx = canvas.getContext("2d");
|
||||
var image = new Image();
|
||||
image.src = "/assets/en/loading/@2x-se6335ab797-cb27d69f23a4d1112bc2a0d272538f39dd3017be20e5f2e3f4a460bd0071b68d.png";
|
||||
var frameWidth = 100, frameHeight = 100, totalFrames = 17;
|
||||
var currentFrame = 0, lastUpdateTime = 0, animationId;
|
||||
|
||||
image.onload = function() {
|
||||
function animate(timestamp) {
|
||||
if (!timestamp) timestamp = 0;
|
||||
if (loadingOverlay.style.display === "none") {
|
||||
cancelAnimationFrame(animationId);
|
||||
return;
|
||||
}
|
||||
if (!lastUpdateTime) lastUpdateTime = timestamp;
|
||||
if (timestamp - lastUpdateTime > 50) {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.drawImage(image, 0, currentFrame * frameHeight, frameWidth, frameHeight, 0, 0, frameWidth, frameHeight);
|
||||
currentFrame = (currentFrame + 1) % totalFrames;
|
||||
lastUpdateTime = timestamp;
|
||||
}
|
||||
animationId = requestAnimationFrame(animate);
|
||||
}
|
||||
animationId = requestAnimationFrame(animate);
|
||||
};
|
||||
}
|
||||
|
||||
var SQUID_CONFIG = {
|
||||
count: 5,
|
||||
u: 18,
|
||||
frameSize: 64,
|
||||
totalFrames: 8,
|
||||
fps: 30,
|
||||
imageSrc: "/assets/ika-8e075a29ff487983044303f98958fb8c852bc3e9ab07ee7597724b6c0aa4a5d7.png"
|
||||
};
|
||||
|
||||
window.initSquids = function() {
|
||||
var canvas = document.getElementById("squid-canvas");
|
||||
if (!canvas) return;
|
||||
var ctx = canvas.getContext("2d");
|
||||
var squids = [];
|
||||
var image = new Image();
|
||||
image.src = SQUID_CONFIG.imageSrc;
|
||||
|
||||
var lastTime = 0;
|
||||
var interval = 1000 / SQUID_CONFIG.fps;
|
||||
|
||||
function createSquid() {
|
||||
return {
|
||||
baseX: Math.random() * (canvas.width - SQUID_CONFIG.frameSize),
|
||||
baseY: canvas.height + (Math.random() * 500),
|
||||
x: 0, y: 0,
|
||||
invertX: Math.random() > 0.5,
|
||||
scale: 1 - Math.random() / 3,
|
||||
imageFrame: Math.random() * SQUID_CONFIG.u,
|
||||
speed: 0.5,
|
||||
drift: 0.2 + (Math.random() * 0.3)
|
||||
};
|
||||
}
|
||||
|
||||
const SQUID_CONFIG = {
|
||||
count: 5,
|
||||
u: 18,
|
||||
frameSize: 64,
|
||||
totalFrames: 8,
|
||||
fps: 30,
|
||||
imageSrc: "/assets/ika-8e075a29ff487983044303f98958fb8c852bc3e9ab07ee7597724b6c0aa4a5d7.png"
|
||||
};
|
||||
|
||||
function initSquids() {
|
||||
const canvas = document.getElementById("squid-canvas");
|
||||
if (!canvas) return;
|
||||
const ctx = canvas.getContext("2d");
|
||||
const squids = [];
|
||||
const image = new Image();
|
||||
image.src = SQUID_CONFIG.imageSrc;
|
||||
|
||||
let lastTime = 0;
|
||||
const interval = 1000 / SQUID_CONFIG.fps;
|
||||
|
||||
function createSquid() {
|
||||
return {
|
||||
baseX: Math.random() * (canvas.width - SQUID_CONFIG.frameSize),
|
||||
baseY: canvas.height + (Math.random() * 500),
|
||||
x: 0, y: 0,
|
||||
invertX: Math.random() > 0.5,
|
||||
scale: 1 - Math.random() / 3,
|
||||
imageFrame: Math.random() * SQUID_CONFIG.u,
|
||||
speed: 0.5,
|
||||
drift: 0.2 + (Math.random() * 0.3)
|
||||
};
|
||||
}
|
||||
|
||||
function animate(currentTime) {
|
||||
requestAnimationFrame(animate);
|
||||
const elapsed = currentTime - lastTime;
|
||||
if (elapsed > interval) {
|
||||
lastTime = currentTime - (elapsed % interval);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
for (let i = 0; i < squids.length; i++) {
|
||||
let f = squids[i], d = f.imageFrame / SQUID_CONFIG.u;
|
||||
f.baseY -= f.drift;
|
||||
f.x = f.baseX + lerp(MOVE_DATA.x, d) * (f.invertX ? -1 : 1);
|
||||
f.y = f.baseY - lerp(MOVE_DATA.y, d);
|
||||
let rotate = lerp(MOVE_DATA.rotate, d);
|
||||
f.imageFrame += f.speed;
|
||||
if (f.imageFrame >= SQUID_CONFIG.u) {
|
||||
f.imageFrame = 0;
|
||||
f.baseY -= MOVE_DATA.y[MOVE_DATA.y.length - 1];
|
||||
f.baseX += (MOVE_DATA.x[MOVE_DATA.x.length - 1] || 0) * (f.invertX ? -1 : 1);
|
||||
f.invertX = !f.invertX;
|
||||
}
|
||||
ctx.save();
|
||||
ctx.translate(f.x + (SQUID_CONFIG.frameSize * f.scale) / 2, f.y + (SQUID_CONFIG.frameSize * f.scale) / 2);
|
||||
ctx.rotate(rotate * Math.PI / 180);
|
||||
ctx.scale(f.scale, f.scale);
|
||||
let spriteIdx = Math.floor(f.imageFrame) % SQUID_CONFIG.totalFrames;
|
||||
ctx.drawImage(image, spriteIdx * SQUID_CONFIG.frameSize, 0, SQUID_CONFIG.frameSize, SQUID_CONFIG.frameSize, -SQUID_CONFIG.frameSize/2, -SQUID_CONFIG.frameSize/2, SQUID_CONFIG.frameSize, SQUID_CONFIG.frameSize);
|
||||
ctx.restore();
|
||||
if (f.y < -150) squids[i] = createSquid();
|
||||
function animate(currentTime) {
|
||||
requestAnimationFrame(animate);
|
||||
var elapsed = currentTime - lastTime;
|
||||
if (elapsed > interval) {
|
||||
lastTime = currentTime - (elapsed % interval);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
for (var i = 0; i < squids.length; i++) {
|
||||
var f = squids[i], d = f.imageFrame / SQUID_CONFIG.u;
|
||||
f.baseY -= f.drift;
|
||||
f.x = f.baseX + lerp(MOVE_DATA.x, d) * (f.invertX ? -1 : 1);
|
||||
f.y = f.baseY - lerp(MOVE_DATA.y, d);
|
||||
var rotate = lerp(MOVE_DATA.rotate, d);
|
||||
f.imageFrame += f.speed;
|
||||
if (f.imageFrame >= SQUID_CONFIG.u) {
|
||||
f.imageFrame = 0;
|
||||
f.baseY -= MOVE_DATA.y[MOVE_DATA.y.length - 1];
|
||||
f.baseX += (MOVE_DATA.x[MOVE_DATA.x.length - 1] || 0) * (f.invertX ? -1 : 1);
|
||||
f.invertX = !f.invertX;
|
||||
}
|
||||
ctx.save();
|
||||
ctx.translate(f.x + (SQUID_CONFIG.frameSize * f.scale) / 2, f.y + (SQUID_CONFIG.frameSize * f.scale) / 2);
|
||||
ctx.rotate(rotate * Math.PI / 180);
|
||||
ctx.scale(f.scale, f.scale);
|
||||
var spriteIdx = Math.floor(f.imageFrame) % SQUID_CONFIG.totalFrames;
|
||||
ctx.drawImage(image, spriteIdx * SQUID_CONFIG.frameSize, 0, SQUID_CONFIG.frameSize, SQUID_CONFIG.frameSize, -SQUID_CONFIG.frameSize/2, -SQUID_CONFIG.frameSize/2, SQUID_CONFIG.frameSize, SQUID_CONFIG.frameSize);
|
||||
ctx.restore();
|
||||
if (f.y < -150) squids[i] = createSquid();
|
||||
}
|
||||
}
|
||||
|
||||
image.onload = () => {
|
||||
for (let i = 0; i < SQUID_CONFIG.count; i++) squids.push(createSquid());
|
||||
requestAnimationFrame(animate);
|
||||
};
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
animateLoadingCanvas();
|
||||
initSquids();
|
||||
image.onload = function() {
|
||||
for (var i = 0; i < SQUID_CONFIG.count; i++) squids.push(createSquid());
|
||||
requestAnimationFrame(animate);
|
||||
};
|
||||
}
|
||||
|
||||
window.initDropdown = function() {
|
||||
var $toggle = $('#dropdownToggle');
|
||||
var $optionsList = $('#dropdownOptions');
|
||||
var $selectedImg = $('#selected-img');
|
||||
|
||||
if ($toggle.length) {
|
||||
$toggle.off('click').on('click', function(e) {
|
||||
e.stopPropagation();
|
||||
$optionsList.toggleClass('show');
|
||||
});
|
||||
|
||||
$optionsList.off('click').on('click', 'li', function() {
|
||||
var newSrc = $(this).attr('data-src');
|
||||
$selectedImg.attr('src', newSrc);
|
||||
$optionsList.removeClass('show');
|
||||
});
|
||||
|
||||
$(document).off('click.dropdown').on('click.dropdown', function() {
|
||||
$optionsList.removeClass('show');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
window.loadHeaderCallbacks = [];
|
||||
window.loadHeader = function(callback) {
|
||||
if (window.headerLoaded) {
|
||||
callback(document.getElementById("header-container"));
|
||||
} else {
|
||||
window.loadHeaderCallbacks.push(callback);
|
||||
}
|
||||
};
|
||||
|
||||
fetch("../header.html")
|
||||
.then(res => res.text())
|
||||
.then(html => {
|
||||
const container = document.getElementById("header-container");
|
||||
if (container) {
|
||||
container.innerHTML = html;
|
||||
window.headerLoaded = true;
|
||||
window.loadHeaderCallbacks.forEach(cb => cb(container));
|
||||
}
|
||||
})
|
||||
.catch(err => console.error("Header load failed:", err));
|
||||
|
||||
$(document).ready(function() {
|
||||
window.animateLoadingCanvas();
|
||||
window.initSquids();
|
||||
|
||||
window.loadHeader(function() {
|
||||
window.initDropdown();
|
||||
});
|
||||
})();
|
||||
});
|
||||
9597
assets/jquery-1.9.1.js
vendored
Normal file
9597
assets/jquery-1.9.1.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -1,63 +1,62 @@
|
|||
fetch("../header.html")
|
||||
.then(res => res.text())
|
||||
.then(html => {
|
||||
const headerContainer = document.getElementById("header-container");
|
||||
if (headerContainer) headerContainer.innerHTML = html;
|
||||
|
||||
if (typeof CONFIG !== 'undefined') {
|
||||
const apiBase = CONFIG.API_BASE_URL.replace(/\/$/, "");
|
||||
const logoutForm = document.getElementById("logout-form");
|
||||
window.loadHeader(function(headerContainer) {
|
||||
if (typeof CONFIG !== 'undefined') {
|
||||
const apiBase = CONFIG.API_BASE_URL.replace(/\/$/, "");
|
||||
const logoutForm = document.getElementById("logout-form");
|
||||
|
||||
if (logoutForm) {
|
||||
logoutForm.action = apiBase + "/api/v1/spfn/logout";
|
||||
const originInput = document.getElementById("logout_frontend_origin");
|
||||
if (originInput) originInput.value = window.location.origin;
|
||||
|
||||
if (logoutForm) {
|
||||
logoutForm.action = apiBase + "/api/v1/spfn/logout";
|
||||
const originInput = document.getElementById("logout_frontend_origin");
|
||||
if (originInput) originInput.value = window.location.origin;
|
||||
|
||||
logoutForm.addEventListener('submit', () => {
|
||||
sessionStorage.removeItem('user_cache');
|
||||
});
|
||||
}
|
||||
|
||||
const renderData = (data) => {
|
||||
if (typeof data === 'string') {
|
||||
try { data = JSON.parse(data); }
|
||||
catch (e) { console.error(e); }
|
||||
}
|
||||
const nameEl = document.getElementById('mii-name');
|
||||
const imgEl = document.getElementById('mii-img');
|
||||
if (nameEl) {
|
||||
nameEl.textContent = (data.mii && data.mii.name) || data.nickname || data.user_id || data.username || "User";
|
||||
}
|
||||
if (imgEl) {
|
||||
const miiBlob = (data.mii && data.mii.data) || data.mii_data;
|
||||
if (miiBlob) {
|
||||
imgEl.src = `https://mii-unsecure.ariankordi.net/miis/image.png?erri=s6u7r-rsp&data=${encodeURIComponent(miiBlob)}&type=face&width=270`;
|
||||
imgEl.style.display = 'block';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const cached = sessionStorage.getItem('user_cache');
|
||||
if (cached) renderData(JSON.parse(cached));
|
||||
|
||||
fetch(apiBase + "/api/v1/me", { credentials: 'include' })
|
||||
.then(res => res.ok ? res.json() : Promise.reject(res))
|
||||
.then(data => {
|
||||
sessionStorage.setItem('user_cache', JSON.stringify(data));
|
||||
renderData(data);
|
||||
})
|
||||
.catch(err => {
|
||||
if (!cached) {
|
||||
const nameEl = document.getElementById('mii-name');
|
||||
if (nameEl) nameEl.textContent = "Guest";
|
||||
}
|
||||
console.error(err);
|
||||
});
|
||||
logoutForm.addEventListener('submit', () => {
|
||||
sessionStorage.removeItem('user_cache');
|
||||
});
|
||||
}
|
||||
|
||||
const friendButton = document.querySelector('.menu-item.equipment');
|
||||
if (friendButton) friendButton.classList.add('active');
|
||||
const renderData = (data) => {
|
||||
if (typeof data === 'string') {
|
||||
try { data = JSON.parse(data); }
|
||||
catch (e) { console.error(e); }
|
||||
}
|
||||
const nameEl = document.getElementById('mii-name');
|
||||
const imgEl = document.getElementById('mii-img');
|
||||
if (nameEl) {
|
||||
nameEl.textContent = (data.mii && data.mii.name) || data.nickname || data.user_id || data.username || "User";
|
||||
}
|
||||
if (imgEl) {
|
||||
const miiBlob = (data.mii && data.mii.data) || data.mii_data;
|
||||
if (miiBlob) {
|
||||
imgEl.src = `https://mii-unsecure.ariankordi.net/miis/image.png?erri=s6u7r-rsp&data=${encodeURIComponent(miiBlob)}&type=face&width=270`;
|
||||
imgEl.style.display = 'block';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const overlay = document.getElementById("loading-overlay");
|
||||
if (overlay) overlay.style.display = "none";
|
||||
});
|
||||
const cached = sessionStorage.getItem('user_cache');
|
||||
if (cached) renderData(JSON.parse(cached));
|
||||
|
||||
fetch(apiBase + "/api/v1/me", { credentials: 'include' })
|
||||
.then(res => res.ok ? res.json() : Promise.reject(res))
|
||||
.then(data => {
|
||||
sessionStorage.setItem('user_cache', JSON.stringify(data));
|
||||
renderData(data);
|
||||
})
|
||||
.catch(err => {
|
||||
if (!cached) {
|
||||
const nameEl = document.getElementById('mii-name');
|
||||
if (nameEl) nameEl.textContent = "Guest";
|
||||
}
|
||||
console.error(err);
|
||||
});
|
||||
}
|
||||
|
||||
const equipButton = headerContainer.querySelector('.menu-item.equipment');
|
||||
if (equipButton) {
|
||||
equipButton.classList.add('active');
|
||||
}
|
||||
|
||||
const overlay = document.getElementById("loading-overlay");
|
||||
if (overlay) {
|
||||
overlay.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
|
@ -4,8 +4,8 @@
|
|||
<meta charset="UTF-8" />
|
||||
<title>SplatNet - Splatoon's multiplayer service hub</title>
|
||||
<link rel="icon" href="../favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="styles.css" />\
|
||||
<script src="/assets/general.js"></script>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<script src="/assets/jquery-1.9.1.js"></script>
|
||||
<script src="/config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -22,11 +22,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="main-wrapper">
|
||||
|
||||
<div id="header-container"></div>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<div class="logo-left-align">
|
||||
<div id="stage-header-logo">
|
||||
<img class="bg-layer" src="../assets/en/svg/ui/bg_h1-62e768f2a1ca52f993b5953c78d46bc53b35b70df7f8e13619a982f8f10ab750.svg">
|
||||
|
|
@ -34,10 +30,14 @@
|
|||
<img class="label-layer" src="../assets/en/svg/text/scene/equipment/tx_equipment-ea02b805bb9aec4677fb4a4629f515d402822e8eed1f3fcc524336fe3c813fee.svg">
|
||||
</div>
|
||||
<div class="equipmentsubtitle-text">
|
||||
Check out the gear and weapons you had equipped while playing online!
|
||||
Check out the gear and weapons you had equipped while playing online!
|
||||
</div>
|
||||
</div>
|
||||
<div class="stages-container" id="stages-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/assets/general.js"></script>
|
||||
<script src="equipment.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,81 +1,60 @@
|
|||
fetch("../header.html")
|
||||
.then(res => res.text())
|
||||
.then(html => {
|
||||
const headerContainer = document.getElementById("header-container");
|
||||
if (headerContainer) headerContainer.innerHTML = html;
|
||||
window.loadHeader(function(headerContainer) {
|
||||
const friendButton = headerContainer.querySelector('.menu-item.friend');
|
||||
if (friendButton) {
|
||||
friendButton.classList.add('active');
|
||||
}
|
||||
|
||||
if (typeof CONFIG !== 'undefined') {
|
||||
const apiBase = CONFIG.API_BASE_URL.replace(/\/$/, "");
|
||||
const logoutForm = document.getElementById("logout-form");
|
||||
if (typeof CONFIG !== 'undefined') {
|
||||
const apiBase = CONFIG.API_BASE_URL.replace(/\/$/, "");
|
||||
const logoutForm = document.getElementById("logout-form");
|
||||
|
||||
if (logoutForm) {
|
||||
logoutForm.action = apiBase + "/api/v1/spfn/logout";
|
||||
const originInput = document.getElementById("logout_frontend_origin");
|
||||
if (originInput) originInput.value = window.location.origin;
|
||||
|
||||
if (logoutForm) {
|
||||
logoutForm.action = apiBase + "/api/v1/spfn/logout";
|
||||
const originInput = document.getElementById("logout_frontend_origin");
|
||||
if (originInput) originInput.value = window.location.origin;
|
||||
|
||||
logoutForm.addEventListener('submit', () => {
|
||||
sessionStorage.removeItem('user_cache');
|
||||
});
|
||||
}
|
||||
|
||||
const renderData = (data) => {
|
||||
if (typeof data === 'string') {
|
||||
try { data = JSON.parse(data); }
|
||||
catch (e) { console.error(e); }
|
||||
}
|
||||
const nameEl = document.getElementById('mii-name');
|
||||
const imgEl = document.getElementById('mii-img');
|
||||
if (nameEl) {
|
||||
nameEl.textContent = (data.mii && data.mii.name) || data.nickname || data.user_id || data.username || "User";
|
||||
}
|
||||
if (imgEl) {
|
||||
const miiBlob = (data.mii && data.mii.data) || data.mii_data;
|
||||
if (miiBlob) {
|
||||
imgEl.src = `https://mii-unsecure.ariankordi.net/miis/image.png?erri=s6u7r-rsp&data=${encodeURIComponent(miiBlob)}&type=face&width=270`;
|
||||
imgEl.style.display = 'block';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const cached = sessionStorage.getItem('user_cache');
|
||||
if (cached) renderData(JSON.parse(cached));
|
||||
|
||||
fetch(apiBase + "/api/v1/me", { credentials: 'include' })
|
||||
.then(res => res.ok ? res.json() : Promise.reject(res))
|
||||
.then(data => {
|
||||
sessionStorage.setItem('user_cache', JSON.stringify(data));
|
||||
renderData(data);
|
||||
})
|
||||
.catch(err => {
|
||||
if (!cached) {
|
||||
const nameEl = document.getElementById('mii-name');
|
||||
if (nameEl) nameEl.textContent = "Guest";
|
||||
}
|
||||
console.error(err);
|
||||
});
|
||||
logoutForm.addEventListener('submit', () => {
|
||||
sessionStorage.removeItem('user_cache');
|
||||
});
|
||||
}
|
||||
|
||||
const friendButton = headerContainer.querySelector('.menu-item.friend');
|
||||
if (friendButton) {
|
||||
friendButton.classList.add('active');
|
||||
}
|
||||
|
||||
// temporaily force hide lol
|
||||
document.getElementById("loading-overlay").style.display = "none";
|
||||
const renderData = (data) => {
|
||||
if (typeof data === 'string') {
|
||||
try { data = JSON.parse(data); } catch (e) {}
|
||||
}
|
||||
const nameEl = document.getElementById('mii-name');
|
||||
const imgEl = document.getElementById('mii-img');
|
||||
if (nameEl) nameEl.textContent = data.nickname || data.mii.name || "User";
|
||||
if (imgEl && (data.mii && data.mii.data)) {
|
||||
imgEl.src = `https://mii-unsecure.ariankordi.net/miis/image.png?erri=s6u7r-rsp&data=${encodeURIComponent(data.mii.data)}&type=face&width=270`;
|
||||
imgEl.style.display = 'block';
|
||||
}
|
||||
};
|
||||
|
||||
const cached = sessionStorage.getItem('user_cache');
|
||||
if (cached) renderData(JSON.parse(cached));
|
||||
|
||||
fetch(apiBase + "/api/v1/me", { credentials: 'include' })
|
||||
.then(res => res.ok ? res.json() : Promise.reject(res))
|
||||
.then(data => {
|
||||
sessionStorage.setItem('user_cache', JSON.stringify(data));
|
||||
renderData(data);
|
||||
})
|
||||
.catch(() => {
|
||||
if (!cached) document.getElementById('mii-name').textContent = "Guest";
|
||||
});
|
||||
}
|
||||
|
||||
const loadingOverlay = document.getElementById("loading-overlay");
|
||||
if (loadingOverlay) loadingOverlay.style.display = "none";
|
||||
});
|
||||
|
||||
//todo: actually make it useful..
|
||||
function friendsbox() {
|
||||
const infoBox = document.createElement('div');
|
||||
infoBox.className = 'splat-info-box';
|
||||
|
||||
infoBox.innerHTML = `
|
||||
<p>In Splatoon, you can join online matches that your friends are participating in. Here will show your friends that are online. Register your friends on Wii U and play Splatoon!</p>
|
||||
`;
|
||||
infoBox.innerHTML = `<p>In Splatoon, you can join online matches that your friends are participating in. Here will show your friends that are online. Register your friends on Wii U and play Splatoon!</p>`;
|
||||
const contentArea = document.querySelector('.content');
|
||||
if (contentArea) {
|
||||
contentArea.appendChild(infoBox);
|
||||
}
|
||||
if (contentArea) contentArea.appendChild(infoBox);
|
||||
}
|
||||
|
||||
friendsbox();
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<title>SplatNet - Splatoon's multiplayer service hub</title>
|
||||
<link rel="icon" href="../favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<script src="/assets/general.js"></script>
|
||||
<script src="/assets/jquery-1.9.1.js"></script>
|
||||
<script src="/config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -22,11 +22,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="main-wrapper">
|
||||
|
||||
<div id="header-container"></div>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<div class="logo-left-align">
|
||||
<div id="stage-header-logo">
|
||||
<img class="bg-layer" src="../assets/en/svg/ui/bg_h1-62e768f2a1ca52f993b5953c78d46bc53b35b70df7f8e13619a982f8f10ab750.svg">
|
||||
|
|
@ -34,11 +30,14 @@
|
|||
<img class="label-layer" src="../assets/en/svg/text/scene/friendlist/tx_friendlist_wht-2bfe8465098d51b8154befcd805ada60d17bca5e1324f26fee3eb43278a8652b.svg">
|
||||
</div>
|
||||
<div class="friendsubtitle-text">
|
||||
Check the online status of your friends or see who you're battling with!
|
||||
Check the online status of your friends or see who you're battling with!
|
||||
</div>
|
||||
</div>
|
||||
<div class="stages-container" id="stages-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/assets/general.js"></script>
|
||||
<script src="friendlist.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
24
header.html
24
header.html
|
|
@ -3,7 +3,6 @@
|
|||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="../style.css" />
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -75,9 +74,30 @@
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lang-options">
|
||||
<div class="image-dropdown-toggle" id="dropdownToggle">
|
||||
<img id="selected-img" src="../assets/en/svg/text/menu/tx_English-11762e5c1d4ff09f310bcf46f3dbfbfbe8c8ef2ee8a12b7e793c784d44442d4f.svg" alt="English">
|
||||
<img class="dropdown-arrow-icon" src="../assets/en/svg/ui/ico_pulldown-daeb8f6ce24ca8e2faedddd342929c54d3d323ff25116ea0877be93efba2a347.svg">
|
||||
</div>
|
||||
|
||||
<ul class="image-dropdown-options" id="dropdownOptions">
|
||||
<li data-value="en" data-src="../assets/en/svg/text/menu/tx_English-11762e5c1d4ff09f310bcf46f3dbfbfbe8c8ef2ee8a12b7e793c784d44442d4f.svg">
|
||||
<img src="../assets/en/svg/text/menu/tx_English-11762e5c1d4ff09f310bcf46f3dbfbfbe8c8ef2ee8a12b7e793c784d44442d4f.svg">
|
||||
</li>
|
||||
<li data-value="jp" data-src="../assets/en/svg/text/menu/tx_Japanese-2ffb0b4509759532318fba9d93b7befb8d6d4b3aa5434afe159d7656c60bedea.svg">
|
||||
<img src="../assets/en/svg/text/menu/tx_Japanese-2ffb0b4509759532318fba9d93b7befb8d6d4b3aa5434afe159d7656c60bedea.svg">
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="websiteredirect-link-container" style="text-align: center; margin-top: 15px;">
|
||||
<a href="https://www.nintendo.co.jp/wiiu/agmj/" target="_blank" rel="noopener noreferrer">
|
||||
<img src="/assets/en/svg/text/menu/tx_officialpage-51d6bd752e52fb7c599246bec3c9bbb960e9f2ab063cf6e9e5b037e8fab8a7ea.svg" alt="Description" style="max-width: 100%; height: auto;">
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<script src="config.js"></script>
|
||||
<script src="logout.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<title>SplatNet - Splatoon's multiplayer service hub</title>
|
||||
<link rel="icon" href="../favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<script src="/assets/general.js"></script>
|
||||
<script src="/assets/jquery-1.9.1.js"></script>
|
||||
<script src="/config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -22,11 +22,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="main-wrapper">
|
||||
|
||||
<div id="header-container"></div>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<div class="logo-left-align">
|
||||
<div id="stage-header-logo">
|
||||
<img class="bg-layer" src="../assets/en/svg/ui/bg_h1-62e768f2a1ca52f993b5953c78d46bc53b35b70df7f8e13619a982f8f10ab750.svg">
|
||||
|
|
@ -34,10 +30,14 @@
|
|||
<img class="label-layer" src="../assets/en/svg/text/scene/rank/tx_ranking_wht-f79b9c472757006700455a8b74eaa4e50fee7c316373c98d873e0769f9bdb6d9.svg">
|
||||
</div>
|
||||
<div class="equipmentsubtitle-text">
|
||||
Win battles to raise your weekly rank! Rankings are reset every Sunday at midnight! (Your rank is calculated by multiplying number of wins X win rate.)
|
||||
Win battles to raise your weekly rank! Rankings are reset every Sunday at midnight! (Your rank is calculated by multiplying number of wins X win rate.)
|
||||
</div>
|
||||
</div>
|
||||
<div class="stages-container" id="stages-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/assets/general.js"></script>
|
||||
<script src="rank.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
123
ranking/rank.js
123
ranking/rank.js
|
|
@ -1,65 +1,68 @@
|
|||
fetch("../header.html")
|
||||
.then(res => res.text())
|
||||
.then(html => {
|
||||
const headerContainer = document.getElementById("header-container");
|
||||
if (headerContainer) headerContainer.innerHTML = html;
|
||||
window.loadHeader(function(headerContainer) {
|
||||
const rankButton = headerContainer.querySelector('.menu-item.rank');
|
||||
if (rankButton) {
|
||||
rankButton.classList.add('active');
|
||||
}
|
||||
|
||||
if (typeof CONFIG !== 'undefined') {
|
||||
const apiBase = CONFIG.API_BASE_URL.replace(/\/$/, "");
|
||||
const logoutForm = document.getElementById("logout-form");
|
||||
if (typeof CONFIG !== 'undefined') {
|
||||
const apiBase = CONFIG.API_BASE_URL.replace(/\/$/, "");
|
||||
const logoutForm = document.getElementById("logout-form");
|
||||
|
||||
if (logoutForm) {
|
||||
logoutForm.action = apiBase + "/api/v1/spfn/logout";
|
||||
const originInput = document.getElementById("logout_frontend_origin");
|
||||
if (originInput) originInput.value = window.location.origin;
|
||||
|
||||
if (logoutForm) {
|
||||
logoutForm.action = apiBase + "/api/v1/spfn/logout";
|
||||
const originInput = document.getElementById("logout_frontend_origin");
|
||||
if (originInput) originInput.value = window.location.origin;
|
||||
|
||||
logoutForm.addEventListener('submit', () => {
|
||||
sessionStorage.removeItem('user_cache');
|
||||
});
|
||||
}
|
||||
|
||||
const renderData = (data) => {
|
||||
if (typeof data === 'string') {
|
||||
try { data = JSON.parse(data); }
|
||||
catch (e) { console.error(e); }
|
||||
}
|
||||
const nameEl = document.getElementById('mii-name');
|
||||
const imgEl = document.getElementById('mii-img');
|
||||
if (nameEl) {
|
||||
nameEl.textContent = (data.mii && data.mii.name) || data.nickname || data.user_id || data.username || "User";
|
||||
}
|
||||
if (imgEl) {
|
||||
const miiBlob = (data.mii && data.mii.data) || data.mii_data;
|
||||
if (miiBlob) {
|
||||
imgEl.src = `https://mii-unsecure.ariankordi.net/miis/image.png?erri=s6u7r-rsp&data=${encodeURIComponent(miiBlob)}&type=face&width=270`;
|
||||
imgEl.style.display = 'block';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const cached = sessionStorage.getItem('user_cache');
|
||||
if (cached) renderData(JSON.parse(cached));
|
||||
|
||||
fetch(apiBase + "/api/v1/me", { credentials: 'include' })
|
||||
.then(res => res.ok ? res.json() : Promise.reject(res))
|
||||
.then(data => {
|
||||
sessionStorage.setItem('user_cache', JSON.stringify(data));
|
||||
renderData(data);
|
||||
})
|
||||
.catch(err => {
|
||||
if (!cached) {
|
||||
const nameEl = document.getElementById('mii-name');
|
||||
if (nameEl) nameEl.textContent = "Guest";
|
||||
}
|
||||
console.error(err);
|
||||
});
|
||||
logoutForm.addEventListener('submit', () => {
|
||||
sessionStorage.removeItem('user_cache');
|
||||
});
|
||||
}
|
||||
|
||||
const friendButton = headerContainer.querySelector('.menu-item.rank');
|
||||
if (friendButton) {
|
||||
friendButton.classList.add('active');
|
||||
}
|
||||
|
||||
// temporaily force hide lol
|
||||
document.getElementById("loading-overlay").style.display = "none";
|
||||
const renderData = (data) => {
|
||||
if (typeof data === 'string') {
|
||||
try { data = JSON.parse(data); } catch (e) { console.error(e); }
|
||||
}
|
||||
|
||||
const nameEl = document.getElementById('mii-name');
|
||||
const imgEl = document.getElementById('mii-img');
|
||||
|
||||
if (nameEl) {
|
||||
nameEl.textContent = (data.mii && data.mii.name) || data.nickname || data.user_id || data.username || "User";
|
||||
}
|
||||
|
||||
if (imgEl) {
|
||||
const miiBlob = (data.mii && data.mii.data) || data.mii_data;
|
||||
if (miiBlob) {
|
||||
imgEl.src = `https://mii-unsecure.ariankordi.net/miis/image.png?erri=s6u7r-rsp&data=${encodeURIComponent(miiBlob)}&type=face&width=270`;
|
||||
imgEl.style.display = 'block';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const cached = sessionStorage.getItem('user_cache');
|
||||
if (cached) renderData(JSON.parse(cached));
|
||||
|
||||
fetch(apiBase + "/api/v1/me", { credentials: 'include' })
|
||||
.then(res => res.ok ? res.json() : Promise.reject(res))
|
||||
.then(data => {
|
||||
sessionStorage.setItem('user_cache', JSON.stringify(data));
|
||||
renderData(data);
|
||||
})
|
||||
.catch(err => {
|
||||
if (!cached) {
|
||||
const nameEl = document.getElementById('mii-name');
|
||||
if (nameEl) nameEl.textContent = "Guest";
|
||||
}
|
||||
console.error("Profile fetch failed:", err);
|
||||
});
|
||||
}
|
||||
|
||||
if (typeof loadRankings === 'function') {
|
||||
loadRankings();
|
||||
}
|
||||
|
||||
const loadingOverlay = document.getElementById("loading-overlay");
|
||||
if (loadingOverlay) {
|
||||
loadingOverlay.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<title>SplatNet - Splatoon's multiplayer service hub</title>
|
||||
<link rel="icon" href="../favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<script src="/assets/general.js"></script>
|
||||
<script src="/assets/jquery-1.9.1.js"></script>
|
||||
<script src="/config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -42,67 +42,7 @@
|
|||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
fetch("../header.html")
|
||||
.then(res => res.text())
|
||||
.then(html => {
|
||||
const headerContainer = document.getElementById("header-container");
|
||||
if (headerContainer) {
|
||||
headerContainer.innerHTML = html;
|
||||
const friendButton = headerContainer.querySelector('.menu-item.stage');
|
||||
if (friendButton) friendButton.classList.add('active');
|
||||
}
|
||||
|
||||
if (typeof CONFIG !== 'undefined') {
|
||||
const apiBase = CONFIG.API_BASE_URL.replace(/\/$/, "");
|
||||
const logoutForm = document.getElementById("logout-form");
|
||||
if (logoutForm) {
|
||||
logoutForm.action = apiBase + "/api/v1/spfn/logout";
|
||||
const originInput = document.getElementById("logout_frontend_origin");
|
||||
if (originInput) originInput.value = window.location.origin;
|
||||
logoutForm.addEventListener('submit', () => sessionStorage.removeItem('user_cache'));
|
||||
}
|
||||
|
||||
const renderData = (data) => {
|
||||
if (typeof data === 'string') {
|
||||
try { data = JSON.parse(data); } catch (e) { console.error(e); }
|
||||
}
|
||||
const nameEl = document.getElementById('mii-name');
|
||||
const imgEl = document.getElementById('mii-img');
|
||||
if (nameEl) {
|
||||
nameEl.textContent = (data.mii && data.mii.name) || data.nickname || data.user_id || data.username || "User";
|
||||
}
|
||||
if (imgEl) {
|
||||
const miiBlob = (data.mii && data.mii.data) || data.mii_data;
|
||||
if (miiBlob) {
|
||||
imgEl.src = `https://mii-unsecure.ariankordi.net/miis/image.png?erri=s6u7r-rsp&data=${encodeURIComponent(miiBlob)}&type=face&width=270`;
|
||||
imgEl.style.display = 'block';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const cached = sessionStorage.getItem('user_cache');
|
||||
if (cached) renderData(JSON.parse(cached));
|
||||
|
||||
fetch(apiBase + "/api/v1/me", { credentials: 'include' })
|
||||
.then(res => res.ok ? res.json() : Promise.reject(res))
|
||||
.then(data => {
|
||||
sessionStorage.setItem('user_cache', JSON.stringify(data));
|
||||
renderData(data);
|
||||
})
|
||||
.catch(err => {
|
||||
if (!cached) {
|
||||
const nameEl = document.getElementById('mii-name');
|
||||
if (nameEl) nameEl.textContent = "Guest";
|
||||
}
|
||||
console.error(err);
|
||||
});
|
||||
}
|
||||
|
||||
})
|
||||
.catch(err => console.error("Failed to load header:", err));
|
||||
</script>
|
||||
|
||||
<script src="/assets/general.js"></script>
|
||||
<script src="stages.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,3 +1,62 @@
|
|||
window.loadHeader(function(headerContainer) {
|
||||
const stageButton = headerContainer.querySelector('.menu-item.stage');
|
||||
if (stageButton) {
|
||||
stageButton.classList.add('active');
|
||||
}
|
||||
|
||||
if (typeof CONFIG !== 'undefined') {
|
||||
const apiBase = CONFIG.API_BASE_URL.replace(/\/$/, "");
|
||||
const logoutForm = document.getElementById("logout-form");
|
||||
|
||||
if (logoutForm) {
|
||||
logoutForm.action = apiBase + "/api/v1/spfn/logout";
|
||||
const originInput = document.getElementById("logout_frontend_origin");
|
||||
if (originInput) originInput.value = window.location.origin;
|
||||
|
||||
logoutForm.addEventListener('submit', () => {
|
||||
sessionStorage.removeItem('user_cache');
|
||||
});
|
||||
}
|
||||
|
||||
const renderData = (data) => {
|
||||
if (typeof data === 'string') {
|
||||
try { data = JSON.parse(data); } catch (e) { console.error(e); }
|
||||
}
|
||||
const nameEl = document.getElementById('mii-name');
|
||||
const imgEl = document.getElementById('mii-img');
|
||||
if (nameEl) {
|
||||
nameEl.textContent = (data.mii && data.mii.name) || data.nickname || data.user_id || data.username || "User";
|
||||
}
|
||||
if (imgEl) {
|
||||
const miiBlob = (data.mii && data.mii.data) || data.mii_data;
|
||||
if (miiBlob) {
|
||||
imgEl.src = `https://mii-unsecure.ariankordi.net/miis/image.png?erri=s6u7r-rsp&data=${encodeURIComponent(miiBlob)}&type=face&width=270`;
|
||||
imgEl.style.display = 'block';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const cached = sessionStorage.getItem('user_cache');
|
||||
if (cached) renderData(JSON.parse(cached));
|
||||
|
||||
fetch(apiBase + "/api/v1/me", { credentials: 'include' })
|
||||
.then(res => res.ok ? res.json() : Promise.reject(res))
|
||||
.then(data => {
|
||||
sessionStorage.setItem('user_cache', JSON.stringify(data));
|
||||
renderData(data);
|
||||
})
|
||||
.catch(err => {
|
||||
if (!cached) {
|
||||
const nameEl = document.getElementById('mii-name');
|
||||
if (nameEl) nameEl.textContent = "Guest";
|
||||
}
|
||||
console.error(err);
|
||||
});
|
||||
}
|
||||
|
||||
renderStages();
|
||||
});
|
||||
|
||||
const API_URL = `${CONFIG.API_BASE_URL}/api/v1/boss`;
|
||||
|
||||
function stageNames(stages, lang = "en-US") {
|
||||
|
|
@ -6,7 +65,6 @@ function stageNames(stages, lang = "en-US") {
|
|||
|
||||
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";
|
||||
|
|
@ -23,8 +81,7 @@ function getStageClass(stageName) {
|
|||
if (name.includes("saltspray")) return "sprite-saltspray";
|
||||
if (name.includes("urchin")) return "sprite-urchin";
|
||||
if (name.includes("walleye")) return "sprite-walleye";
|
||||
|
||||
return "sprite"; // fallback
|
||||
return "sprite";
|
||||
}
|
||||
|
||||
async function fetchRotations() {
|
||||
|
|
@ -35,16 +92,12 @@ async function fetchRotations() {
|
|||
const rotations = data?.pretendo?.rotations ?? {};
|
||||
const now = new Date();
|
||||
const timestamps = Object.keys(rotations).sort((a, b) => Number(a) - Number(b));
|
||||
|
||||
const result = [];
|
||||
|
||||
for (const ts of timestamps) {
|
||||
const start = new Date(Number(ts));
|
||||
const end = new Date(start.getTime() + 2 * 60 * 60 * 1000);
|
||||
if (end < now) continue;
|
||||
|
||||
const r = rotations[ts];
|
||||
|
||||
result.push({
|
||||
turf: stageNames(r.turfStages),
|
||||
ranked: stageNames(r.rankedStages),
|
||||
|
|
@ -53,10 +106,9 @@ async function fetchRotations() {
|
|||
endTime: end,
|
||||
});
|
||||
}
|
||||
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch rotations:", error);
|
||||
console.error(error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
|
@ -68,33 +120,27 @@ async function renderStages() {
|
|||
try {
|
||||
rotations = await fetchRotations();
|
||||
} catch (err) {
|
||||
console.error("Error in renderStages:", err);
|
||||
console.error(err);
|
||||
} finally {
|
||||
loadingOverlay.style.display = "none";
|
||||
if (loadingOverlay) loadingOverlay.style.display = "none";
|
||||
}
|
||||
|
||||
if (!rotations.length) {
|
||||
container.innerHTML = `<h2 class="error-message">Something went wrong! Try reloading the page.</h2>`;
|
||||
return;
|
||||
}
|
||||
|
||||
let html = "";
|
||||
|
||||
for (const rotation of rotations) {
|
||||
const optionsDate = { day: "2-digit", month: "2-digit" };
|
||||
const optionsTime = { hour: "numeric", minute: "2-digit", hour12: true };
|
||||
const timeZone = "Europe/Paris";
|
||||
const formattedTime = `${rotation.startTime.toLocaleDateString("en-GB", { ...optionsDate, timeZone })} at ${rotation.startTime.toLocaleTimeString("en-GB", { ...optionsTime, timeZone })} (CEST) ~ ${rotation.endTime.toLocaleDateString("en-GB", { ...optionsDate, timeZone })} at ${rotation.endTime.toLocaleTimeString("en-GB", { ...optionsTime, timeZone })} (CEST)`;
|
||||
|
||||
html += `
|
||||
<div class="rotation-time">${formattedTime}</div>
|
||||
|
||||
<div class="stages-section">
|
||||
<div class="mode-header">
|
||||
<img class="mode-title" src="/assets/en/svg/ui/ico_stage_regular-54557ab86d0cba16cf002e6d299f87dccb41655de8a171d32928bfebda3f3692.svg" alt="Regular Battle">
|
||||
<div class="mode-text"><img src="/assets/en/svg/text/scene/stage/tx_regularmatch-2cee60cbe41a1594b8d5ef867138f99d843cfce6efe0c490a41632b2e99ec685.svg" alt="Regular Battle"></div>
|
||||
</div>
|
||||
|
||||
<div class="stages">
|
||||
${rotation.turf.map(name => `
|
||||
<div class="stage-item">
|
||||
|
|
@ -104,18 +150,15 @@ async function renderStages() {
|
|||
`).join("")}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stages-section">
|
||||
<div class="mode-header">
|
||||
<img class="mode-title" src="/assets/en/svg/ui/ico_stage_gachi-d2041f3d0fc360ad6c7c00dc4f5bfd1aa626a251d35af88c076b5498d8eb991d.svg" alt="Ranked Battle">
|
||||
<div class="mode-text"><img src="/assets/en/svg/text/scene/stage/tx_gachimatch-08a066c73d4dcf466c435be611b996ffd7930d19d9a6a865b712cd5dd802534f.svg" alt="Ranked Battle"></div>
|
||||
</div>
|
||||
|
||||
<div class="ranked-mode-labels">
|
||||
<div class="battle-mode-text"><img src="/assets/en/svg/text/scene/stage/tx_rule-76cf0777fb715a9478f8b579512541f3f14ed834566e0b6e153834a57d726021.svg" alt="Battle Mode"></div>
|
||||
<div class="ranked-mode-text">${rotation.ranked_mode}</div>
|
||||
</div>
|
||||
|
||||
<div class="stages">
|
||||
${rotation.ranked.map(name => `
|
||||
<div class="stage-item">
|
||||
|
|
@ -127,8 +170,5 @@ async function renderStages() {
|
|||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
renderStages();
|
||||
}
|
||||
80
style.css
80
style.css
|
|
@ -43,7 +43,7 @@ body {
|
|||
position: absolute;
|
||||
bottom: -28px;
|
||||
left: 0;
|
||||
width: 340px;
|
||||
width: 330px;
|
||||
height: 30px;
|
||||
background-image: url('assets/en/svg/ui/bg_menu_bottom_wave-03056ad08bac76d5bf1d0bc2895f30cda65a731d9d69789719da70a084be31cb.svg');
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -79,10 +79,10 @@ body {
|
|||
background-position: 0 -1564px;
|
||||
}
|
||||
|
||||
.icon-navi-friend:hover, .icon-navi-friend.active, .friend:hover, .friend.active { background-position: 0 -1508px; }
|
||||
.icon-navi-ranking:hover, .icon-navi-ranking.active, .rank:hover, .rank.active { background-position: 0 -1620px; }
|
||||
.icon-navi-equipment:hover, .icon-navi-equipment.active, .equipment:hover, .equipment.active { background-position: 0 -1452px; }
|
||||
.icon-navi-stage:hover, .icon-navi-stage.active, .stage:hover, .stage.active { background-position: 0 -1676px; }
|
||||
.menu-item.friend:hover, .menu-item.friend.active { background-position: 0 -1508px !important; }
|
||||
.menu-item.rank:hover, .menu-item.rank.active { background-position: 0 -1620px !important; }
|
||||
.menu-item.equipment:hover, .menu-item.equipment.active { background-position: 0 -1452px !important; }
|
||||
.menu-item.stage:hover, .menu-item.stage.active { background-position: 0 -1676px !important; }
|
||||
|
||||
.menu-item img {
|
||||
position: absolute;
|
||||
|
|
@ -215,4 +215,74 @@ body {
|
|||
.btn-icon, .btn-label-img {
|
||||
height: 18px;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.lang-options {
|
||||
width: 220px;
|
||||
margin: 20px auto 0;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.image-dropdown-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
gap: 10px;
|
||||
padding: 5px;
|
||||
background: transparent; /* Removes the box */
|
||||
}
|
||||
|
||||
.image-dropdown-toggle img:first-child {
|
||||
height: 24px; /* Adjust based on your SVG height */
|
||||
}
|
||||
|
||||
.dropdown-arrow-icon {
|
||||
height: 12px;
|
||||
/* Use filter if you need the arrow to be white/different color */
|
||||
}
|
||||
|
||||
.image-dropdown-options {
|
||||
display: none; /* Hidden by default */
|
||||
position: absolute;
|
||||
bottom: 100%; /* Opens upwards, or use top: 100% to open down */
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.image-dropdown-options.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.image-dropdown-options li {
|
||||
padding: 8px 15px;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.image-dropdown-options li:hover {
|
||||
opacity: 0.7;
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.image-dropdown-options img {
|
||||
height: 24px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.image-dropdown-options.show {
|
||||
display: block !important;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.websiteredirect-link-container img {
|
||||
width: 180px;
|
||||
height: auto;
|
||||
}
|
||||
Loading…
Reference in a new issue