add ranking buttons

This commit is contained in:
kittentm 2026-03-06 00:21:18 +01:00
commit dced30acae
No known key found for this signature in database
GPG key ID: AC43DFDBC1F44A91
3 changed files with 51 additions and 11 deletions

View file

@ -11,16 +11,6 @@
<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">
<img src="/assets/en/svg/text/wait/tx_loading-dccf3fb801ca859f2d17992f5cd7da62995c1fe81a306dd103398ef7c0e25b70.svg" alt="Loading">
</div>
</div>
<div class="main-wrapper">
<div class="content">
<div class="logo-left-align">
@ -29,10 +19,20 @@
<img class="icon-layer" src="../assets/en/svg/ui/ico_ranking-c89e570ab4d08a764d285e453423188b1976895b3feacf031e3f231b1506b441.svg">
<img class="label-layer" src="../assets/en/svg/text/scene/rank/tx_ranking_wht-f79b9c472757006700455a8b74eaa4e50fee7c316373c98d873e0769f9bdb6d9.svg">
</div>
<div class="equipmentsubtitle-text">
<div class="equipmentsubtitle-text" id="mode-subtitle">
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="mode-selection">
<a href="?mode=regular" class="mode-button" id="link-regular">
<img id="img-regular" src="../assets/en/svg/ui/btn_tab_regular-40682de5f47922c608c0ddf6eddd44efcf4b0516092041cdb48977f777030487.svg" alt="Turf War">
</a>
<a href="?mode=gachi" class="mode-button" id="link-gachi">
<img id="img-gachi" src="../assets/en/svg/ui/btn_tab_gachi-1ab8351babd76ea6dd8e23eb86293c8ceafaf23b9cae3001166fabf3a01011a7.svg" alt="Ranked Battle">
</a>
</div>
<div class="stages-container" id="stages-container"></div>
</div>
</div>

View file

@ -57,6 +57,21 @@ window.loadHeader(function(headerContainer) {
});
}
const urlParams = new URLSearchParams(window.location.search);
const mode = urlParams.get('mode');
const images = {
regular: "../assets/en/svg/ui/btn_tab_regular_selected-b636e3d21ace9434120061a32658b21a34feb6468553b6d6da30ce890b85ec1f.svg",
gachi: "../assets/en/svg/ui/btn_tab_gachi_selected-4796f167399dca12cb274dcb0348cdf709a1f722ddd241210e55a3e04fdb6ff4.svg"
};
if (mode === 'regular') {
const regImg = document.getElementById('img-regular');
if (regImg) regImg.src = images.regular;
} else if (mode === 'gachi') {
const gachiImg = document.getElementById('img-gachi');
if (gachiImg) gachiImg.src = images.gachi;
}
if (typeof loadRankings === 'function') {
loadRankings();
}

View file

@ -167,4 +167,29 @@ body {
font-family: "Regular", sans-serif;
font-size: 24px;
line-height: 1.3;
}
.mode-selection {
display: flex;
justify-content: center;
gap: 15px;
margin: 30px 0;
width: 100%;
}
.mode-button {
cursor: pointer;
width: 280px;
transition: transform 0.1s ease-in-out;
text-decoration: none;
}
.mode-button:hover {
transform: scale(1.03);
}
.mode-button img {
width: 100%;
height: auto;
display: block;
}