add ranking buttons
This commit is contained in:
parent
cf836891db
commit
dced30acae
3 changed files with 51 additions and 11 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in a new issue