Present results in data grid with thumbnails and lightbox links

wwwroot/app.js

@@ -153,19 +153,50 @@ function renderVotes() {
 }
 
 function renderResults() {
-  const list = $("results-list");
+  const container = $("results-list");
-  list.innerHTML = "";
+  container.innerHTML = "";
-  state.results.forEach((r) => {
+  const table = document.createElement("table");
-    const card = buildCard({
+  table.className = "results-table";
-      id: r.id,
+  table.innerHTML = `
-      name: r.name,
+    <thead>
-      genre: `${r.total} pts • ${r.count} votes • avg ${r.average.toFixed(1)}`,
+      <tr>
-      description: r.description || (r.author ? `By ${r.author}` : ""),
+        <th>Rank</th>
-      screenshotUrl: r.screenshotUrl,
+        <th>Game</th>
-      youtubeUrl: r.youtubeUrl,
+        <th>Author</th>
-      author: r.author
+        <th>Votes</th>
-    }, { showAuthor: true });
+        <th>Avg</th>
-    list.appendChild(card);
+        <th>Total</th>
+        <th>Links</th>
+      </tr>
+    </thead>
+    <tbody></tbody>
+  `;
+  const tbody = table.querySelector("tbody");
+  state.results.forEach((r, idx) => {
+    const row = document.createElement("tr");
+    row.innerHTML = `
+      <td>${idx + 1}</td>
+      <td class="game-cell">
+         ${r.screenshotUrl ? `<img class="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>` : ''}
+         </div>
+      </td>
+      <td>${r.author ?? "—"}</td>
+      <td>${r.count}</td>
+      <td>${r.average.toFixed(1)}</td>
+      <td>${r.total}</td>
+      <td>
+        ${r.youtubeUrl ? `<a class="link compact" href="${r.youtubeUrl}" target="_blank" rel="noopener">YouTube ↗</a>` : ''}
+        ${r.screenshotUrl ? `<button class="thumb-open" data-img="${r.screenshotUrl}" aria-label="Open screenshot">View</button>` : ''}
+      </td>
+    `;
+    tbody.appendChild(row);
+  });
+  container.appendChild(table);
+  container.querySelectorAll(".thumb-open").forEach(btn => {
+    btn.addEventListener("click", () => openLightbox(btn.dataset.img, "Screenshot"));
   });
 }
 
@@ -271,8 +302,8 @@ function buildCard(s, { showAuthor }) {
     <div class="card-body">
       <div class="card-title-row">
         <h3>${s.name}</h3>
+        ${s.youtubeUrl ? `<a class="link compact" href="${s.youtubeUrl}" target="_blank" rel="noopener">YouTube ↗</a>` : ""}
         <div class="title-meta">
-          ${s.youtubeUrl ? `<a class="link compact" href="${s.youtubeUrl}" target="_blank" rel="noopener">YouTube ↗</a>` : ""}
           ${showAuthor && s.author ? `<span class="chip">${s.author}</span>` : ""}
         </div>
       </div>

wwwroot/styles.css

@@ -291,3 +291,32 @@ input[type="range"].full-slider::-moz-range-track {
   justify-content: space-between;
   align-items: center;
 }
+
+.results-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.results-table th, .results-table td {
+  padding: 10px;
+  border-bottom: 1px solid #1f2937;
+}
+.results-table th { text-align: left; color: #9ca3af; font-size: 12px; letter-spacing: 0.3px; }
+.results-table .game-cell { display: flex; gap: 10px; align-items: center; }
+.results-table .thumb {
+  width: 72px;
+  height: 48px;
+  object-fit: cover;
+  border-radius: 6px;
+  border: 1px solid #1f2937;
+}
+.results-table .game-meta { display: flex; flex-direction: column; gap: 2px; }
+.results-table .title-line { font-weight: 700; }
+.results-table .muted.small { font-size: 12px; color: #9ca3af; }
+.thumb-open {
+  background: #111827;
+  border: 1px solid #1f2937;
+  color: #e5e7eb;
+  border-radius: 6px;
+  padding: 4px 8px;
+  cursor: pointer;
+}