xTr1m/GameList
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Give top results gold/silver/bronze treatment

Browse Source
This commit is contained in:
Frank Tovar
2026-02-03 01:57:56 +01:00
parent f1d7b8cd1b
commit 70ab51ba44
2 changed files with 15 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
wwwroot/js/ui.js
View File

@@ -227,8 +227,11 @@ export function renderResults() {
const tbody = table.querySelector("tbody"); const tbody = table.querySelector("tbody");
state.results.forEach((r, idx) => { state.results.forEach((r, idx) => {
const row = document.createElement("tr"); const row = document.createElement("tr");
const podiumClass = idx === 0 ? "podium podium-1" : idx === 1 ? "podium podium-2" : idx === 2 ? "podium podium-3" : "";
row.className = podiumClass;
const medal = idx === 0 ? "🥇" : idx === 1 ? "🥈" : idx === 2 ? "🥉" : `${idx + 1}`;
row.innerHTML = ` row.innerHTML = `
<td>${idx + 1}</td> <td class="rank-cell"><span class="medal">${medal}</span></td>
<td class="game-cell"> <td class="game-cell">
${r.screenshotUrl ? `<img class="thumb clickable-thumb" src="${r.screenshotUrl}" alt="${r.name}">` : ''} ${r.screenshotUrl ? `<img class="thumb clickable-thumb" src="${r.screenshotUrl}" alt="${r.name}">` : ''}
<div class="game-meta"> <div class="game-meta">

11
wwwroot/styles.css
View File

@@ -580,6 +580,17 @@ input[type="range"].full-slider::-moz-range-track {
font-size: 12px; font-size: 12px;
letter-spacing: 0.3px; letter-spacing: 0.3px;
} }
.results-table .rank-cell { width: 64px; text-align: center; }
.medal { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; font-size: 22px; font-weight: 800; color: #2c1c0d; background: #f1e5c7; box-shadow: inset 0 0 0 2px #e3d4bd, 0 6px 16px rgba(0,0,0,0.12); }
.podium { position: relative; background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(255,255,255,0.85)); box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
.podium td { border-bottom: none; }
.podium-1 { background: linear-gradient(135deg, #ffecb3, #ffd861); }
.podium-1 .medal { background: linear-gradient(135deg, #ffd54f, #ffca28); box-shadow: inset 0 0 0 2px #f1b000, 0 8px 18px rgba(0,0,0,0.2); }
.podium-2 { background: linear-gradient(135deg, #e3e6ed, #cfd6e6); }
.podium-2 .medal { background: linear-gradient(135deg, #d7dbe5, #c2c7d2); box-shadow: inset 0 0 0 2px #9ea3b1, 0 8px 18px rgba(0,0,0,0.18); }
.podium-3 { background: linear-gradient(135deg, #f0d0b0, #e2a96a); }
.podium-3 .medal { background: linear-gradient(135deg, #f2b37a, #e08a4a); box-shadow: inset 0 0 0 2px #c56d2c, 0 8px 18px rgba(0,0,0,0.2); }
.podium::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 10px; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35); }
.results-table .game-cell { .results-table .game-cell {
display: flex; display: flex;
gap: 10px; gap: 10px;