diff --git a/assets/en/svg/ui/34b4b97a4411.svg b/assets/en/svg/ui/34b4b97a4411.svg new file mode 100644 index 0000000..7db9407 --- /dev/null +++ b/assets/en/svg/ui/34b4b97a4411.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/en/svg/ui/btn_tab_fes-f6f7d08ee7f4877df0c7b32998f6bad81fd3f8c28e287168dfffe7d6efb09f77.svg b/assets/en/svg/ui/btn_tab_fes-f6f7d08ee7f4877df0c7b32998f6bad81fd3f8c28e287168dfffe7d6efb09f77.svg new file mode 100644 index 0000000..5430083 --- /dev/null +++ b/assets/en/svg/ui/btn_tab_fes-f6f7d08ee7f4877df0c7b32998f6bad81fd3f8c28e287168dfffe7d6efb09f77.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/assets/en/svg/ui/btn_tab_fes_selected-7a0ef00ee7f4877df0c7b32998f6bad81fd3f8c28e287168dfffe7d6efb09f77.svg b/assets/en/svg/ui/btn_tab_fes_selected-7a0ef00ee7f4877df0c7b32998f6bad81fd3f8c28e287168dfffe7d6efb09f77.svg new file mode 100644 index 0000000..3b682ad --- /dev/null +++ b/assets/en/svg/ui/btn_tab_fes_selected-7a0ef00ee7f4877df0c7b32998f6bad81fd3f8c28e287168dfffe7d6efb09f77.svg @@ -0,0 +1,126 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ranking/index.html b/ranking/index.html index 0fc660e..f1c8ebc 100644 --- a/ranking/index.html +++ b/ranking/index.html @@ -41,6 +41,17 @@ Ranked Battle + + Splatfest + + + +
+
+ +
Rice VS Bread
+
+
diff --git a/ranking/rank.js b/ranking/rank.js index 7b4c61c..70f5515 100644 --- a/ranking/rank.js +++ b/ranking/rank.js @@ -62,6 +62,49 @@ window.loadHeader(function(headerContainer) { } }; + const getRankIcon = (rank) => { + const icons = { + 1: "tx_nb_1_purple-e854b65457dce33c1570ee22dfdc6f3dbe74b49606d08bc92d69fb6d1ed7690a.svg", + 2: "tx_nb_2_purple-50c81f51ce9f30ce89dd3f01a9812c846e7fbb7a00fc95d72726a772d2ef5bd7.svg", + 3: "tx_nb_3_purple-0901c032e718a09d5e4c9c1f47646a3958da7bb566a2d4da06322d7be2a911aa.svg", + 4: "tx_nb_4_purple-a2e279292822c0f181b7726bcef1ee6c3d7a18b2763ec4d8c0a54ca452fc5e04.svg", + 5: "tx_nb_5_purple-16e43ef9f23e514f900ede4bde7bcb81aa062af961c553374fc7c80566cf8b47.svg", + 6: "tx_nb_6_purple-1ed2cae2808bb656eb89d986c9e10289fc273cb7d026b989af0aac39722c6989.svg", + 7: "tx_nb_7_purple-8cae82b95463c7ca3ab55f0bf652d10e2212b43d99e442d89fda9b1951c8b261.svg", + 8: "tx_nb_8_purple-faf0aa1407d058709db1338ba8d4c42495911d63e77e9653b74b26ff25f4f355.svg", + 9: "tx_nb_9_purple-68d2b702b4240b2cd2886fb146d2c9835e1a2fd79b8d218cb5b7fb32cecb4bfa.svg" + }; + return `../assets/en/svg/text/scene/rank/number/${icons[rank]}`; + }; + + const renderRankings = () => { + const container = document.getElementById('ranking-cards-container'); + if (!container) return; + container.innerHTML = ''; + + for (let i = 1; i <= 9; i++) { + const card = document.createElement('div'); + card.className = 'rank-card-container'; + card.innerHTML = ` +
+
+ +
+ +
Player ${i}
+
+
${2500 - (i * 10)}
+
+ + + + +
+ `; + container.appendChild(card); + } + }; + const init = () => { const cached = sessionStorage.getItem('user_cache'); if (cached) renderData(JSON.parse(cached)); @@ -84,7 +127,6 @@ window.loadHeader(function(headerContainer) { const nameEl = document.getElementById('mii-name'); if (nameEl) nameEl.textContent = "Guest"; } - console.error("Profile fetch failed:", err); }); const urlParams = new URLSearchParams(window.location.search); @@ -92,20 +134,22 @@ window.loadHeader(function(headerContainer) { const regImg = document.getElementById('img-regular'); const gachiImg = document.getElementById('img-gachi'); + const fesImg = document.getElementById('img-fes'); const images = { regular: "../assets/en/svg/ui/btn_tab_regular_selected-b636e3d21ace9434120061a32658b21a34feb6468553b6d6da30ce890b85ec1f.svg", gachi: "../assets/en/svg/ui/btn_tab_gachi_selected-4796f167399dca12cb274dcb0348cdf709a1f722ddd241210e55a3e04fdb6ff4.svg", + fes: "../assets/en/svg/ui/btn_tab_fes_selected-7a0ef00ee7f4877df0c7b32998f6bad81fd3f8c28e287168dfffe7d6efb09f77.svg", regular_off: "../assets/en/svg/ui/btn_tab_regular-40682de5f47922c608c0ddf6eddd44efcf4b0516092041cdb48977f777030487.svg", - gachi_off: "../assets/en/svg/ui/btn_tab_gachi-1ab8351babd76ea6dd8e23eb86293c8ceafaf23b9cae3001166fabf3a01011a7.svg" + gachi_off: "../assets/en/svg/ui/btn_tab_gachi-1ab8351babd76ea6dd8e23eb86293c8ceafaf23b9cae3001166fabf3a01011a7.svg", + fes_off: "../assets/en/svg/ui/btn_tab_fes-f6f7d08ee7f4877df0c7b32998f6bad81fd3f8c28e287168dfffe7d6efb09f77.svg" }; if (regImg) regImg.src = (mode === 'regular') ? images.regular : images.regular_off; if (gachiImg) gachiImg.src = (mode === 'gachi') ? images.gachi : images.gachi_off; + if (fesImg) fesImg.src = (mode === 'fes') ? images.fes : images.fes_off; - if (typeof loadRankings === 'function') { - loadRankings(); - } + renderRankings(); const loadingOverlay = document.getElementById("loading-overlay"); if (loadingOverlay) { @@ -118,14 +162,6 @@ window.loadHeader(function(headerContainer) { e.preventDefault(); const href = this.getAttribute('href'); window.history.pushState({}, '', href); - - const loadingOverlay = document.getElementById("loading-overlay"); - if (loadingOverlay) { - loadingOverlay.style.display = "flex"; - if (typeof window.animateLoadingCanvas === 'function') { - window.animateLoadingCanvas(); - } - } init(); }); }); diff --git a/ranking/styles.css b/ranking/styles.css index 96bc766..e773ac5 100644 --- a/ranking/styles.css +++ b/ranking/styles.css @@ -173,22 +173,115 @@ body { justify-content: center; gap: 15px; margin: 30px 0; - width: 100%; + transform: translateX(50px); } -.mode-button { - cursor: pointer; - width: 280px; - transition: transform 0.1s ease-in-out; - text-decoration: none; +.mode-button { width: 280px; transition: transform 0.1s ease; } +.mode-button:hover { transform: scale(1.03); } + +.rank-glass-panel { + width: 1044px; + background: rgba(0, 0, 0, 0.6); + border-radius: 25px; + margin: 40px auto; + padding: 30px 0; + display: flex; + flex-direction: column; + align-items: center; + transform: translateX(50px); } -.mode-button:hover { - transform: scale(1.03); +.rank-header-area { + text-align: center; + margin-bottom: 10px; } -.mode-button img { - width: 100%; - height: auto; - display: block; +.splatfest-title-svg { + height: 45px; + width: auto; +} + +.splatfest-subtitle { + font-family: "Regular", sans-serif; + color: white; + font-size: 22px; + margin-top: 5px; + letter-spacing: 0.5px; +} + +.rank-card-container { + position: relative; + width: 1000px; + height: 237px; +} + +.rank-bg { + position: absolute; + left: 27px; + top: 35px; + width: 952px; + height: 187px; + background-color: #000000; + border-radius: 30px; + z-index: 1; +} + +.rank-profile-circle { + position: absolute; + left: 74px; + top: 79px; + width: 96px; + height: 96px; + background: #ffffff; + border-radius: 50%; + z-index: 2; +} + +.rank-name-row { + position: absolute; + left: 204px; + top: 55px; + display: flex; + align-items: center; + gap: 10px; + z-index: 3; +} + +.rank-name { + font-family: 'Regular', sans-serif; + font-size: 40px; + color: white; +} + +.rank-power-icon { width: 54px; height: 42px; } + +.rank-power-value { + position: absolute; + left: 200px; + top: 70px; + font-family: 'Splatoon1', sans-serif; + font-size: 90px; + color: white; + z-index: 3; +} + +.rank-gear-row { + position: absolute; + left: 510px; + top: 95px; + display: flex; + gap: 12px; + z-index: 3; +} + +.gear-main { width: 130px; height: 112px; } +.gear-sub { width: 84px; height: 73px; } + +.rank-accent { + position: absolute; + left: 47px; + top: 20px; + width: 21px; + height: 41px; + z-index: 4; } \ No newline at end of file