From 1f7757dec642d9818a66d9ae65415e3a9cf0fb6e Mon Sep 17 00:00:00 2001
From: mandalore <samleboy08@gmail.com>
Date: Sat, 27 Jun 2026 23:35:57 -0500
Subject: [PATCH] mobile: fold hidden stats into visible columns on small
 screens

W-L-T and ITC Rank appear as sub-text under the player name; Win% appears
under ITC Points. Desktop layout is unchanged. Skeleton loader also gets
matching placeholder lines on mobile.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/main.js | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/main.js b/src/main.js
index c29c9f0..31a0ae3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -259,8 +259,9 @@ function render(state) {
     tr.innerHTML =
       `<td class="font-mono text-base-content/60">${i === 0 ? `<strong class="text-base-content">1</strong>` : (i + 1)}</td>` +
       `<td><span class="font-semibold">${esc(name)}</span>` +
-        `${u.nickname && fullName(u) ? `<span class="block text-xs text-base-content/40">"${esc(u.nickname)}"</span>` : ""}</td>` +
-      `<td class="text-right font-mono font-bold">${fmtPts(r.ITCPoints)}</td>` +
+        `${u.nickname && fullName(u) ? `<span class="block text-xs text-base-content/40">"${esc(u.nickname)}"</span>` : ""}` +
+        `<span class="block text-xs opacity-40 sm:hidden"><span class="text-success">${r.wins || 0}</span>–<span class="text-error">${r.losses || 0}</span>–${r.ties || 0} · ITC #${r.placing ?? "—"}</span>` +
+        `</td>` +
       (() => {
         const uid = r.userId || r.user?.id;
         const d = uid && careerData[uid];
@@ -272,7 +273,10 @@ function render(state) {
           ? `<span class="block text-xs opacity-20">…</span>`
           : (d.w + d.l + d.t) === 0 ? ''
           : `<span class="block text-xs opacity-40">${fmtWpct(d.w, d.l, d.t)} career</span>`;
-        return `<td class="text-right font-mono hidden sm:table-cell">` +
+        const mobilePct = `<span class="block text-xs opacity-40 sm:hidden">${fmtWpct(r.wins, r.losses, r.ties)} win rate</span>`;
+        return `<td class="text-right font-mono font-bold">${fmtPts(r.ITCPoints)}` +
+            mobilePct + `</td>` +
+          `<td class="text-right font-mono hidden sm:table-cell">` +
             `<span class="text-success">${r.wins || 0}</span>–<span class="text-error">${r.losses || 0}</span>–${r.ties || 0}` +
             careerSub + `</td>` +
           `<td class="text-right font-mono hidden sm:table-cell">${fmtWpct(r.wins, r.losses, r.ties)}` +
@@ -341,8 +345,8 @@ function showSkeleton() {
     const tr = document.createElement("tr");
     tr.innerHTML =
       `<td><div class="skeleton h-4 w-5"></div></td>` +
-      `<td><div class="skeleton h-4 w-3/5"></div></td>` +
-      `<td><div class="skeleton h-4 w-12 ml-auto"></div></td>` +
+      `<td><div class="skeleton h-4 w-3/5"></div><div class="skeleton h-3 w-2/5 mt-1 sm:hidden"></div></td>` +
+      `<td><div class="skeleton h-4 w-12 ml-auto"></div><div class="skeleton h-3 w-10 mt-1 ml-auto sm:hidden"></div></td>` +
       `<td class="hidden sm:table-cell"><div class="skeleton h-4 w-14 ml-auto"></div></td>` +
       `<td class="hidden sm:table-cell"><div class="skeleton h-4 w-12 ml-auto"></div></td>` +
       `<td class="hidden sm:table-cell"><div class="skeleton h-4 w-10 ml-auto"></div></td>`;