feat: show message instead of just nothing when data is empty

ranking/rank.js

@@ -195,6 +195,19 @@ window.loadHeader(async function(headerContainer) {
         const players = cachedLeaderboardData[apiModeKey] || [];
         const isFes = mode === 'fes';
 
+        if (players.length === 0) {
+            const emptyMsg = document.createElement('div');
+            emptyMsg.className = 'rank-empty-message';
+            emptyMsg.style.fontFamily = 'Splatoon1, sans-serif';
+            emptyMsg.style.color = 'white';
+            emptyMsg.style.fontSize = '24px';
+            emptyMsg.style.textAlign = 'center';
+            emptyMsg.style.padding = '50px';
+            emptyMsg.textContent = "Looks like no one has appeared here, Play Splatoon on Wii U to compete here!";
+            container.appendChild(emptyMsg);
+            return;
+        }
+
         players.forEach((player, index) => {
             const rankNum = index + 1;
             const displayScore = Math.round(player.RankingScore);

ranking/styles.css

@@ -333,4 +333,19 @@ body {
     width: calc(100% - var(--sidebar-width));
     display: flex;
     flex-direction: column;
+}
+
+.rank-empty-message {
+    font-family: "Splatoon1", sans-serif;
+    color: white;
+    font-size: 28px;
+    text-align: center;
+    line-height: 1.4;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 150px;
+    width: 100%;
+    padding: 40px;
+    box-sizing: border-box;
 }