feat(leaderboard): add global rankings screen with solo/multi/all filters

This commit is contained in:
jessy-david-dev
2026-04-10 17:30:13 +02:00
parent 676e5ba756
commit aed510afd5
7 changed files with 279 additions and 2 deletions
+128
View File
@@ -1323,6 +1323,9 @@ body {
position: absolute;
top: 16px;
right: 16px;
display: flex;
align-items: center;
gap: 8px;
}
.btn-account {
@@ -1545,3 +1548,128 @@ body {
}
.game-path-sep { margin: 0 2px; }
.game-path-end { color: var(--green); font-weight: 600; }
/* ================================
Leaderboard
================================ */
.leaderboard-screen {
max-width: 640px;
margin: 0 auto;
padding: 24px 16px 48px;
}
.leaderboard-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
}
.leaderboard-title {
font-size: 24px;
font-weight: 800;
}
.leaderboard-tabs {
display: flex;
gap: 8px;
margin-bottom: 20px;
}
.leaderboard-tab {
flex: 1;
padding: 8px;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--bg-2);
color: var(--text-muted);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background var(--transition), color var(--transition);
}
.leaderboard-tab.active {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.leaderboard-loading {
display: flex;
justify-content: center;
padding: 48px;
}
.leaderboard-empty {
text-align: center;
color: var(--text-muted);
padding: 48px 0;
}
.leaderboard-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.leaderboard-row {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: var(--bg-2);
border-radius: var(--radius);
border: 1px solid var(--border);
}
.leaderboard-row.top {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 8%, var(--bg-2));
}
.lb-rank {
font-size: 22px;
width: 32px;
text-align: center;
flex-shrink: 0;
}
.lb-name {
font-weight: 700;
font-size: 15px;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lb-stats {
display: flex;
gap: 16px;
flex-shrink: 0;
}
.lb-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
}
.lb-stat-val {
font-size: 15px;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: var(--text);
}
.lb-stat-label {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
}