add dummy pages
This commit is contained in:
parent
48ef84898a
commit
dd90462f80
13 changed files with 897 additions and 42 deletions
133
equipment/equipment.js
Normal file
133
equipment/equipment.js
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
function loadHeader() {
|
||||
fetch("../../../header.html")
|
||||
.then(res => res.text())
|
||||
.then(html => {
|
||||
const headerContainer = document.getElementById("header-container");
|
||||
if (headerContainer) {
|
||||
headerContainer.innerHTML = html;
|
||||
|
||||
const stageButton = headerContainer.querySelector('.menu-item.stage');
|
||||
if (stageButton) {
|
||||
stageButton.classList.add('active');
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(err => console.error("Failed to load header:", err));
|
||||
}
|
||||
|
||||
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;
|
||||
const frameHeight = 100;
|
||||
const totalFrames = 17;
|
||||
let currentFrame = 0;
|
||||
let lastUpdateTime = 0;
|
||||
let animationId;
|
||||
image.onload = () => {
|
||||
function animate(timestamp = 0) {
|
||||
if (loadingOverlay.style.display === "none") {
|
||||
cancelAnimationFrame(animationId);
|
||||
return;
|
||||
}
|
||||
if (!lastUpdateTime) lastUpdateTime = timestamp;
|
||||
const elapsed = timestamp - lastUpdateTime;
|
||||
if (elapsed > 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);
|
||||
};
|
||||
}
|
||||
|
||||
//pain in the ass to implement. im proud of ts
|
||||
const canvas = document.getElementById("squid-canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
const frameWidth = 64;
|
||||
const frameHeight = 64;
|
||||
const totalFrames = 8;
|
||||
const squidCount = 5;
|
||||
const squids = [];
|
||||
const canvasWidth = canvas.width;
|
||||
const canvasHeight = canvas.height;
|
||||
const titleYThreshold = 0;
|
||||
|
||||
function createSquid() {
|
||||
return {
|
||||
x: Math.random() * canvasWidth,
|
||||
y: canvasHeight + Math.random() * 300,
|
||||
currentFrame: Math.floor(Math.random() * totalFrames),
|
||||
speed: 0.05 + Math.random() * 0.15,
|
||||
lastFrameUpdate: 0
|
||||
};
|
||||
}
|
||||
|
||||
for (let i = 0; i < squidCount; i++) {
|
||||
squids.push(createSquid());
|
||||
}
|
||||
|
||||
let lastTimestamp = 0;
|
||||
|
||||
const image = new Image();
|
||||
image.src = "/assets/ika-8e075a29ff487983044303f98958fb8c852bc3e9ab07ee7597724b6c0aa4a5d7.png";
|
||||
|
||||
image.onload = () => {
|
||||
function animate(timestamp = 0) {
|
||||
if (!lastTimestamp) lastTimestamp = timestamp;
|
||||
const delta = timestamp - lastTimestamp;
|
||||
|
||||
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
|
||||
|
||||
for (const squid of squids) {
|
||||
squid.y -= squid.speed * delta;
|
||||
|
||||
if (squid.y + frameHeight < titleYThreshold) {
|
||||
squid.x = Math.random() * canvasWidth;
|
||||
squid.y = canvasHeight + Math.random() * 300;
|
||||
squid.currentFrame = Math.floor(Math.random() * totalFrames);
|
||||
squid.speed = 0.05 + Math.random() * 0.15;
|
||||
}
|
||||
|
||||
if (timestamp - squid.lastFrameUpdate > 100) {
|
||||
squid.currentFrame = (squid.currentFrame + 1) % totalFrames;
|
||||
squid.lastFrameUpdate = timestamp;
|
||||
}
|
||||
|
||||
ctx.drawImage(
|
||||
image,
|
||||
squid.currentFrame * frameWidth,
|
||||
0,
|
||||
frameWidth,
|
||||
frameHeight,
|
||||
squid.x,
|
||||
squid.y,
|
||||
frameWidth,
|
||||
frameHeight
|
||||
);
|
||||
}
|
||||
|
||||
lastTimestamp = timestamp;
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
animateLoadingCanvas();
|
||||
44
equipment/index.html
Normal file
44
equipment/index.html
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="header-container"></div>
|
||||
|
||||
<div id="squid-container">
|
||||
<canvas id="squid-canvas" width="1920" height="1080"></canvas>
|
||||
</div>
|
||||
|
||||
<div id="loading-overlay" class="loading-overlay">
|
||||
<canvas id="loading-canvas" width="100" height="100"></canvas>
|
||||
<div id="loading-text">Loading</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
//TODO: migrate into accompanying JS, just put it in here for now to allow for copy paste,
|
||||
//however ie screams abt you doing this afaik
|
||||
fetch("../header.html")
|
||||
.then(res => res.text())
|
||||
.then(html => {
|
||||
const headerContainer = document.getElementById("header-container");
|
||||
headerContainer.innerHTML = html;
|
||||
|
||||
const friendButton = headerContainer.querySelector('.menu-item.equipment');
|
||||
if (friendButton) {
|
||||
friendButton.classList.add('active');
|
||||
}
|
||||
|
||||
// temporaily force hide lol
|
||||
document.getElementById("loading-overlay").style.display = "none";
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="equipment.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
106
equipment/styles.css
Normal file
106
equipment/styles.css
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
@font-face {
|
||||
font-family: "Splatoon1";
|
||||
src: url("../splatoon1.otf") format("opentype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Regular";
|
||||
src: url("../regular.otf") format("opentype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
min-height: 100vh;
|
||||
background-image: url("/assets/en/bg/@2x/bg_equipment-bedf92d6f41ee59b7f391f7e01d7ec00cb932e5152a2196ac939df0ad6c674b3.png");
|
||||
background-repeat: repeat;
|
||||
background-size: 800px 800px;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.menu-item .hover-state {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-item:hover .hover-state,
|
||||
.menu-item.active .hover-state {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-item:hover .default,
|
||||
.menu-item.active .default {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 200px;
|
||||
height: 250px;
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
border: 3px solid white;
|
||||
border-radius: 12px;
|
||||
padding: 20px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#loading-canvas {
|
||||
image-rendering: pixelated;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#loading-text {
|
||||
margin-top: 12px;
|
||||
color: white;
|
||||
font-family: "Splatoon1", sans-serif;
|
||||
font-size: 20px;
|
||||
letter-spacing: 1.2px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#squid-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: visible;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#squid-canvas {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
transform: translateX(-50%);
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
will-change: transform;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
z-index: 0;
|
||||
display: block;
|
||||
}
|
||||
133
friend_list/friendlist.js
Normal file
133
friend_list/friendlist.js
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
function loadHeader() {
|
||||
fetch("../../../header.html")
|
||||
.then(res => res.text())
|
||||
.then(html => {
|
||||
const headerContainer = document.getElementById("header-container");
|
||||
if (headerContainer) {
|
||||
headerContainer.innerHTML = html;
|
||||
|
||||
const stageButton = headerContainer.querySelector('.menu-item.stage');
|
||||
if (stageButton) {
|
||||
stageButton.classList.add('active');
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(err => console.error("Failed to load header:", err));
|
||||
}
|
||||
|
||||
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;
|
||||
const frameHeight = 100;
|
||||
const totalFrames = 17;
|
||||
let currentFrame = 0;
|
||||
let lastUpdateTime = 0;
|
||||
let animationId;
|
||||
image.onload = () => {
|
||||
function animate(timestamp = 0) {
|
||||
if (loadingOverlay.style.display === "none") {
|
||||
cancelAnimationFrame(animationId);
|
||||
return;
|
||||
}
|
||||
if (!lastUpdateTime) lastUpdateTime = timestamp;
|
||||
const elapsed = timestamp - lastUpdateTime;
|
||||
if (elapsed > 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);
|
||||
};
|
||||
}
|
||||
|
||||
//pain in the ass to implement. im proud of ts
|
||||
const canvas = document.getElementById("squid-canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
const frameWidth = 64;
|
||||
const frameHeight = 64;
|
||||
const totalFrames = 8;
|
||||
const squidCount = 5;
|
||||
const squids = [];
|
||||
const canvasWidth = canvas.width;
|
||||
const canvasHeight = canvas.height;
|
||||
const titleYThreshold = 0;
|
||||
|
||||
function createSquid() {
|
||||
return {
|
||||
x: Math.random() * canvasWidth,
|
||||
y: canvasHeight + Math.random() * 300,
|
||||
currentFrame: Math.floor(Math.random() * totalFrames),
|
||||
speed: 0.05 + Math.random() * 0.15,
|
||||
lastFrameUpdate: 0
|
||||
};
|
||||
}
|
||||
|
||||
for (let i = 0; i < squidCount; i++) {
|
||||
squids.push(createSquid());
|
||||
}
|
||||
|
||||
let lastTimestamp = 0;
|
||||
|
||||
const image = new Image();
|
||||
image.src = "/assets/ika-8e075a29ff487983044303f98958fb8c852bc3e9ab07ee7597724b6c0aa4a5d7.png";
|
||||
|
||||
image.onload = () => {
|
||||
function animate(timestamp = 0) {
|
||||
if (!lastTimestamp) lastTimestamp = timestamp;
|
||||
const delta = timestamp - lastTimestamp;
|
||||
|
||||
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
|
||||
|
||||
for (const squid of squids) {
|
||||
squid.y -= squid.speed * delta;
|
||||
|
||||
if (squid.y + frameHeight < titleYThreshold) {
|
||||
squid.x = Math.random() * canvasWidth;
|
||||
squid.y = canvasHeight + Math.random() * 300;
|
||||
squid.currentFrame = Math.floor(Math.random() * totalFrames);
|
||||
squid.speed = 0.05 + Math.random() * 0.15;
|
||||
}
|
||||
|
||||
if (timestamp - squid.lastFrameUpdate > 100) {
|
||||
squid.currentFrame = (squid.currentFrame + 1) % totalFrames;
|
||||
squid.lastFrameUpdate = timestamp;
|
||||
}
|
||||
|
||||
ctx.drawImage(
|
||||
image,
|
||||
squid.currentFrame * frameWidth,
|
||||
0,
|
||||
frameWidth,
|
||||
frameHeight,
|
||||
squid.x,
|
||||
squid.y,
|
||||
frameWidth,
|
||||
frameHeight
|
||||
);
|
||||
}
|
||||
|
||||
lastTimestamp = timestamp;
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
animateLoadingCanvas();
|
||||
44
friend_list/index.html
Normal file
44
friend_list/index.html
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="header-container"></div>
|
||||
|
||||
<div id="squid-container">
|
||||
<canvas id="squid-canvas" width="1920" height="1080"></canvas>
|
||||
</div>
|
||||
|
||||
<div id="loading-overlay" class="loading-overlay">
|
||||
<canvas id="loading-canvas" width="100" height="100"></canvas>
|
||||
<div id="loading-text">Loading</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
//TODO: migrate into accompanying JS, just put it in here for now to allow for copy paste,
|
||||
//however ie screams abt you doing this afaik
|
||||
fetch("../header.html")
|
||||
.then(res => res.text())
|
||||
.then(html => {
|
||||
const headerContainer = document.getElementById("header-container");
|
||||
headerContainer.innerHTML = html;
|
||||
|
||||
const friendButton = headerContainer.querySelector('.menu-item.friend');
|
||||
if (friendButton) {
|
||||
friendButton.classList.add('active');
|
||||
}
|
||||
|
||||
// temporaily force hide lol
|
||||
document.getElementById("loading-overlay").style.display = "none";
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="friendlist.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
106
friend_list/styles.css
Normal file
106
friend_list/styles.css
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
@font-face {
|
||||
font-family: "Splatoon1";
|
||||
src: url("../splatoon1.otf") format("opentype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Regular";
|
||||
src: url("../regular.otf") format("opentype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
min-height: 100vh;
|
||||
background-image: url("/assets/en/bg/@2x/bg_friendlist-d20dccde83e0d769455ff580421b84805be7ff1c6494e812200a51d067b10be0.png");
|
||||
background-repeat: repeat;
|
||||
background-size: 800px 800px;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.menu-item .hover-state {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-item:hover .hover-state,
|
||||
.menu-item.active .hover-state {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-item:hover .default,
|
||||
.menu-item.active .default {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 200px;
|
||||
height: 250px;
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
border: 3px solid white;
|
||||
border-radius: 12px;
|
||||
padding: 20px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#loading-canvas {
|
||||
image-rendering: pixelated;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#loading-text {
|
||||
margin-top: 12px;
|
||||
color: white;
|
||||
font-family: "Splatoon1", sans-serif;
|
||||
font-size: 20px;
|
||||
letter-spacing: 1.2px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#squid-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: visible;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#squid-canvas {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
transform: translateX(-50%);
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
will-change: transform;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
z-index: 0;
|
||||
display: block;
|
||||
}
|
||||
80
header.html
80
header.html
|
|
@ -11,49 +11,49 @@
|
|||
<img src="../assets/en/ui/SplatNetLogo.png" alt="SplatNet">
|
||||
</div>
|
||||
|
||||
<div class="menu-item friend">
|
||||
<img class="bg default" src="../assets/en/ui/default.png">
|
||||
<img class="bg hover-state" src="../assets/en/ui/friendlist-selected.png">
|
||||
|
||||
<img class="icon default" src="../assets/en/svg/ui/ico_friendlist-320cb666486606280b494d4d4427451b2de2c9ad01f3332c286433c6f536db0a.svg">
|
||||
<img class="icon hover-state" src="../assets/en/svg/ui/ico_friendlist_wht-032a1f27d7f1529f75f86f8976877a12ce0ec18496e84fcb249a510129aa337c.svg">
|
||||
|
||||
<img class="label default" src="../assets/en/svg/text/menu/tx_friendlist-c96280213f50b1bc3c6380aa2bf191f6aaf4fd2da44a111bcbb1495444f23868.svg">
|
||||
<img class="label hover-state" src="../assets/en/svg/text/menu/tx_friendlist_wht-b805b3146503cef16e75964333f58c2934bc3b6b6e1cd6e21172c85706a4deda.svg">
|
||||
</div>
|
||||
<a href="/friend_list/" class="menu-link">
|
||||
<div class="menu-item friend">
|
||||
<img class="bg default" src="../assets/en/ui/default.png">
|
||||
<img class="bg hover-state" src="../assets/en/ui/friendlist-selected.png">
|
||||
<img class="icon default" src="../assets/en/svg/ui/ico_friendlist-320cb666486606280b494d4d4427451b2de2c9ad01f3332c286433c6f536db0a.svg">
|
||||
<img class="icon hover-state" src="../assets/en/svg/ui/ico_friendlist_wht-032a1f27d7f1529f75f86f8976877a12ce0ec18496e84fcb249a510129aa337c.svg">
|
||||
<img class="label default" src="../assets/en/svg/text/menu/tx_friendlist-c96280213f50b1bc3c6380aa2bf191f6aaf4fd2da44a111bcbb1495444f23868.svg">
|
||||
<img class="label hover-state" src="../assets/en/svg/text/menu/tx_friendlist_wht-b805b3146503cef16e75964333f58c2934bc3b6b6e1cd6e21172c85706a4deda.svg">
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="menu-item rank">
|
||||
<img class="bg default" src="../assets/en/ui/default.png">
|
||||
<img class="bg hover-state" src="../assets/en/ui/rank-selected.png">
|
||||
|
||||
<img class="icon default" src="../assets/en/svg/ui/ico_ranking-c89e570ab4d08a764d285e453423188b1976895b3feacf031e3f231b1506b441.svg">
|
||||
<img class="icon hover-state" src="../assets/en/svg/ui/ico_ranking_wht-526d8e4da303f0c9e77ee41ea8422d265f41280e2ffc6ffa763b35d96f8e51f1.svg">
|
||||
|
||||
<img class="label default" src="../assets/en/svg/text/menu/tx_ranking-8d97ac01b5b5c5b9244c8a4960bce79d33349175d141b06da0d835c71c8298e2.svg">
|
||||
<img class="label hover-state" src="../assets/en/svg/text/menu/tx_ranking_wht-6b4dcbc2bb6f0d50c8e6180ec1da935b54c3b0cc761dd7700b26c7bd1b5ac9d4.svg">
|
||||
</div>
|
||||
<a href="/rank/" class="menu-link">
|
||||
<div class="menu-item rank">
|
||||
<img class="bg default" src="../assets/en/ui/default.png">
|
||||
<img class="bg hover-state" src="../assets/en/ui/rank-selected.png">
|
||||
<img class="icon default" src="../assets/en/svg/ui/ico_ranking-c89e570ab4d08a764d285e453423188b1976895b3feacf031e3f231b1506b441.svg">
|
||||
<img class="icon hover-state" src="../assets/en/svg/ui/ico_ranking_wht-526d8e4da303f0c9e77ee41ea8422d265f41280e2ffc6ffa763b35d96f8e51f1.svg">
|
||||
<img class="label default" src="../assets/en/svg/text/menu/tx_ranking-8d97ac01b5b5c5b9244c8a4960bce79d33349175d141b06da0d835c71c8298e2.svg">
|
||||
<img class="label hover-state" src="../assets/en/svg/text/menu/tx_ranking_wht-6b4dcbc2bb6f0d50c8e6180ec1da935b54c3b0cc761dd7700b26c7bd1b5ac9d4.svg">
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="menu-item equipment">
|
||||
<img class="bg default" src="../assets/en/ui/default.png">
|
||||
<img class="bg hover-state" src="../assets/en/ui/equipment-selected.png">
|
||||
|
||||
<img class="icon default" src="../assets/en/svg/ui/ico_equipment-40943361040a3d62c745a21d1a1fa95794c851f378e11334f2dc6c1cc81b4984.svg">
|
||||
<img class="icon hover-state" src="../assets/en/svg/ui/ico_equipment_wht-a9d551da5fa6a6792cb2bf8aca2938a107a983a13aef9f4fd020493e6412435e.svg">
|
||||
|
||||
<img class="label default" src="../assets/en/svg/text/menu/tx_equipment-8d59c4296bdafb1746824229dc9300ef6b140d4bda0bb0284a662903f20afe45.svg">
|
||||
<img class="label hover-state" src="../assets/en/svg/text/menu/tx_equipment_wht-940f9bdfe17d321ac6bc737021f1b837ccace05cf0a14e24315e2a39d3d52a3e.svg">
|
||||
</div>
|
||||
<a href="/equipment/" class="menu-link">
|
||||
<div class="menu-item equipment">
|
||||
<img class="bg default" src="../assets/en/ui/default.png">
|
||||
<img class="bg hover-state" src="../assets/en/ui/equipment-selected.png">
|
||||
<img class="icon default" src="../assets/en/svg/ui/ico_equipment-40943361040a3d62c745a21d1a1fa95794c851f378e11334f2dc6c1cc81b4984.svg">
|
||||
<img class="icon hover-state" src="../assets/en/svg/ui/ico_equipment_wht-a9d551da5fa6a6792cb2bf8aca2938a107a983a13aef9f4fd020493e6412435e.svg">
|
||||
<img class="label default" src="../assets/en/svg/text/menu/tx_equipment-8d59c4296bdafb1746824229dc9300ef6b140d4bda0bb0284a662903f20afe45.svg">
|
||||
<img class="label hover-state" src="../assets/en/svg/text/menu/tx_equipment_wht-940f9bdfe17d321ac6bc737021f1b837ccace05cf0a14e24315e2a39d3d52a3e.svg">
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="menu-item stage">
|
||||
<img class="bg default" src="../assets/en/ui/default.png">
|
||||
<img class="bg hover-state" src="../assets/en/ui/stage-selected.png">
|
||||
|
||||
<img class="icon default" src="../assets/en/svg/ui/ico_stage-8dbc9e30d2dd9f99f4d1678fe53c4aaada7f7ff43929880a0c9f4e49f148f540.svg">
|
||||
<img class="icon hover-state" src="../assets/en/svg/ui/ico_stage_wht-0093ccdcb4a0985c929e77571e4baf690f39def2f97b84a4cb4109e4a4ae10b4.svg">
|
||||
|
||||
<img class="label default" src="../assets/en/svg/text/menu/tx_stageinfo-5e7f00d4a18387e2ee3065e97a475e23002554c3facc1dc6816cdb157c5985c4.svg">
|
||||
<img class="label hover-state" src="../assets/en/svg/text/menu/tx_stageinfo_wht-5fa41cd0a2c7e72f93cb7ec6821d01af7f5d05e91b9dc16b002197e69fdf9440.svg">
|
||||
</div>
|
||||
<a href="/stages/" class="menu-link">
|
||||
<div class="menu-item stage">
|
||||
<img class="bg default" src="../assets/en/ui/default.png">
|
||||
<img class="bg hover-state" src="../assets/en/ui/stage-selected.png">
|
||||
<img class="icon default" src="../assets/en/svg/ui/ico_stage-8dbc9e30d2dd9f99f4d1678fe53c4aaada7f7ff43929880a0c9f4e49f148f540.svg">
|
||||
<img class="icon hover-state" src="../assets/en/svg/ui/ico_stage_wht-0093ccdcb4a0985c929e77571e4baf690f39def2f97b84a4cb4109e4a4ae10b4.svg">
|
||||
<img class="label default" src="../assets/en/svg/text/menu/tx_stageinfo-5e7f00d4a18387e2ee3065e97a475e23002554c3facc1dc6816cdb157c5985c4.svg">
|
||||
<img class="label hover-state" src="../assets/en/svg/text/menu/tx_stageinfo_wht-5fa41cd0a2c7e72f93cb7ec6821d01af7f5d05e91b9dc16b002197e69fdf9440.svg">
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="twitterbgbox">
|
||||
<div class="button-container">
|
||||
|
|
|
|||
44
rank/index.html
Normal file
44
rank/index.html
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="header-container"></div>
|
||||
|
||||
<div id="squid-container">
|
||||
<canvas id="squid-canvas" width="1920" height="1080"></canvas>
|
||||
</div>
|
||||
|
||||
<div id="loading-overlay" class="loading-overlay">
|
||||
<canvas id="loading-canvas" width="100" height="100"></canvas>
|
||||
<div id="loading-text">Loading</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
//TODO: migrate into accompanying JS, just put it in here for now to allow for copy paste,
|
||||
//however ie screams abt you doing this afaik
|
||||
fetch("../header.html")
|
||||
.then(res => res.text())
|
||||
.then(html => {
|
||||
const headerContainer = document.getElementById("header-container");
|
||||
headerContainer.innerHTML = html;
|
||||
|
||||
const friendButton = headerContainer.querySelector('.menu-item.rank');
|
||||
if (friendButton) {
|
||||
friendButton.classList.add('active');
|
||||
}
|
||||
|
||||
// temporaily force hide lol
|
||||
document.getElementById("loading-overlay").style.display = "none";
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="rank.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
133
rank/rank.js
Normal file
133
rank/rank.js
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
function loadHeader() {
|
||||
fetch("../../../header.html")
|
||||
.then(res => res.text())
|
||||
.then(html => {
|
||||
const headerContainer = document.getElementById("header-container");
|
||||
if (headerContainer) {
|
||||
headerContainer.innerHTML = html;
|
||||
|
||||
const stageButton = headerContainer.querySelector('.menu-item.stage');
|
||||
if (stageButton) {
|
||||
stageButton.classList.add('active');
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(err => console.error("Failed to load header:", err));
|
||||
}
|
||||
|
||||
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;
|
||||
const frameHeight = 100;
|
||||
const totalFrames = 17;
|
||||
let currentFrame = 0;
|
||||
let lastUpdateTime = 0;
|
||||
let animationId;
|
||||
image.onload = () => {
|
||||
function animate(timestamp = 0) {
|
||||
if (loadingOverlay.style.display === "none") {
|
||||
cancelAnimationFrame(animationId);
|
||||
return;
|
||||
}
|
||||
if (!lastUpdateTime) lastUpdateTime = timestamp;
|
||||
const elapsed = timestamp - lastUpdateTime;
|
||||
if (elapsed > 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);
|
||||
};
|
||||
}
|
||||
|
||||
//pain in the ass to implement. im proud of ts
|
||||
const canvas = document.getElementById("squid-canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
const frameWidth = 64;
|
||||
const frameHeight = 64;
|
||||
const totalFrames = 8;
|
||||
const squidCount = 5;
|
||||
const squids = [];
|
||||
const canvasWidth = canvas.width;
|
||||
const canvasHeight = canvas.height;
|
||||
const titleYThreshold = 0;
|
||||
|
||||
function createSquid() {
|
||||
return {
|
||||
x: Math.random() * canvasWidth,
|
||||
y: canvasHeight + Math.random() * 300,
|
||||
currentFrame: Math.floor(Math.random() * totalFrames),
|
||||
speed: 0.05 + Math.random() * 0.15,
|
||||
lastFrameUpdate: 0
|
||||
};
|
||||
}
|
||||
|
||||
for (let i = 0; i < squidCount; i++) {
|
||||
squids.push(createSquid());
|
||||
}
|
||||
|
||||
let lastTimestamp = 0;
|
||||
|
||||
const image = new Image();
|
||||
image.src = "/assets/ika-8e075a29ff487983044303f98958fb8c852bc3e9ab07ee7597724b6c0aa4a5d7.png";
|
||||
|
||||
image.onload = () => {
|
||||
function animate(timestamp = 0) {
|
||||
if (!lastTimestamp) lastTimestamp = timestamp;
|
||||
const delta = timestamp - lastTimestamp;
|
||||
|
||||
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
|
||||
|
||||
for (const squid of squids) {
|
||||
squid.y -= squid.speed * delta;
|
||||
|
||||
if (squid.y + frameHeight < titleYThreshold) {
|
||||
squid.x = Math.random() * canvasWidth;
|
||||
squid.y = canvasHeight + Math.random() * 300;
|
||||
squid.currentFrame = Math.floor(Math.random() * totalFrames);
|
||||
squid.speed = 0.05 + Math.random() * 0.15;
|
||||
}
|
||||
|
||||
if (timestamp - squid.lastFrameUpdate > 100) {
|
||||
squid.currentFrame = (squid.currentFrame + 1) % totalFrames;
|
||||
squid.lastFrameUpdate = timestamp;
|
||||
}
|
||||
|
||||
ctx.drawImage(
|
||||
image,
|
||||
squid.currentFrame * frameWidth,
|
||||
0,
|
||||
frameWidth,
|
||||
frameHeight,
|
||||
squid.x,
|
||||
squid.y,
|
||||
frameWidth,
|
||||
frameHeight
|
||||
);
|
||||
}
|
||||
|
||||
lastTimestamp = timestamp;
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
animateLoadingCanvas();
|
||||
106
rank/styles.css
Normal file
106
rank/styles.css
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
@font-face {
|
||||
font-family: "Splatoon1";
|
||||
src: url("../splatoon1.otf") format("opentype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Regular";
|
||||
src: url("../regular.otf") format("opentype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
min-height: 100vh;
|
||||
background-image: url("/assets/en/bg/@2x/bg_ranking-a7432ce7bf194d220345649d7369a52fb977878c79c539ed40e2065ec5d8cb85.png");
|
||||
background-repeat: repeat;
|
||||
background-size: 800px 800px;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.menu-item .hover-state {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-item:hover .hover-state,
|
||||
.menu-item.active .hover-state {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-item:hover .default,
|
||||
.menu-item.active .default {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 200px;
|
||||
height: 250px;
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
border: 3px solid white;
|
||||
border-radius: 12px;
|
||||
padding: 20px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#loading-canvas {
|
||||
image-rendering: pixelated;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#loading-text {
|
||||
margin-top: 12px;
|
||||
color: white;
|
||||
font-family: "Splatoon1", sans-serif;
|
||||
font-size: 20px;
|
||||
letter-spacing: 1.2px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#squid-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: visible;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#squid-canvas {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
transform: translateX(-50%);
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
will-change: transform;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
z-index: 0;
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -135,7 +135,7 @@ for (let i = 0; i < squidCount; i++) {
|
|||
let lastTimestamp = 0;
|
||||
|
||||
const image = new Image();
|
||||
image.src = "/assets/squids.png";
|
||||
image.src = "/assets/ika-8e075a29ff487983044303f98958fb8c852bc3e9ab07ee7597724b6c0aa4a5d7.png";
|
||||
|
||||
image.onload = () => {
|
||||
function animate(timestamp = 0) {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ body {
|
|||
display: flex;
|
||||
align-items: flex-start;
|
||||
min-height: 100vh;
|
||||
background-image: url("/assets/en/bg/bg_stage-e8559cd1808f36e1ead7594ce89cada8d8fb4267892f4771368e384612cf3df8.png");
|
||||
background-image: url("/assets/en/bg/@2x/bg_stage-e8fe89423bce5899a3edea3884841d9eed10a3099b29482277d0dbd4a25d8b9e.png");
|
||||
background-repeat: repeat;
|
||||
background-size: 800px 800px;
|
||||
background-attachment: fixed;
|
||||
|
|
|
|||
|
|
@ -213,4 +213,10 @@
|
|||
|
||||
.menu-item.active .default {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.menu-link {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
color: inherit;
|
||||
}
|
||||
Loading…
Reference in a new issue