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

Show min/max players in results rows

Browse Source
This commit is contained in:
Frank Tovar
2026-02-03 02:03:58 +01:00
parent 70ab51ba44
commit 8af26f89b3
2 changed files with 14 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
wwwroot/js/ui.js
View File

@@ -236,7 +236,7 @@ export function renderResults() {
${r.screenshotUrl ? `<img class="thumb clickable-thumb" src="${r.screenshotUrl}" alt="${r.name}">` : ''}
<div class="game-meta">
<div class="title-line">${r.name}</div>
${r.genre ? `<div class="muted small">${r.genre}</div>` : ''}
${buildResultMeta(r)}
</div>
</td>
<td class="author-cell">${r.author ?? "—"}</td>
@@ -259,6 +259,16 @@ export function renderResults() {
});
}
function buildResultMeta(r) {
const hasPlayers = r.minPlayers || r.maxPlayers;
const players = hasPlayers
? t("card.players", { min: r.minPlayers ?? "?", max: r.maxPlayers ?? "?" })
: null;
const bits = [r.genre, players].filter(Boolean);
if (bits.length === 0) return "";
return `<div class="muted small">${bits.join(" • ")}</div>`;
}
export function renderPhaseTitles() {
const revealTitle = $("reveal-title");
const voteTitle = $("vote-title");

6
wwwroot/styles.css
View File

@@ -581,16 +581,16 @@ input[type="range"].full-slider::-moz-range-track {
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); }
.medal { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; font-size: 28px; 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 { background: linear-gradient(135deg, #d3d6ed, #bfc6e6); }
.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); }
.podium::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35); }
.results-table .game-cell {
display: flex;
gap: 10px;