From 80929e7fed436c6cdad29c392fa33ba8db7bca46 Mon Sep 17 00:00:00 2001
From: Tim <timoliptak@gmail.com>
Date: Tue, 7 Jul 2026 00:21:34 +0200
Subject: [PATCH] Skore: scrollovatelny zoznam s collapse serii, zrusenie
 preciarkavania

Standings.tsx rozdeleny na fixnu hlavicku, scrollovatelny zoznam kol
(overflow-y-auto, na mobile max-h-45vh) a fixne sucty, takze pri viacerych
odohratych kolach je vidno cely priebeh. Dokoncena seria (riadok Sigma) je
teraz klikatelna a zbaluje/rozbaluje svoje kola.

Zaroven zruseny line-through pri neuspesnom tipe v hernom pohlade aj v
detaile hry (History.tsx) -- neuspesny tip sa teraz len zobrazuje tlmenou farbou.
---
 frontend/src/components/Standings.tsx | 147 +++++++++++++++-----------
 frontend/src/pages/History.tsx        |   2 +-
 2 files changed, 86 insertions(+), 63 deletions(-)

diff --git a/frontend/src/components/Standings.tsx b/frontend/src/components/Standings.tsx
index a804ed3..fdf4c07 100644
--- a/frontend/src/components/Standings.tsx
+++ b/frontend/src/components/Standings.tsx
@@ -14,6 +14,15 @@ interface Props {
 
 export default function Standings({ standings, guesses = [], players, myOrder, desktop = false }: Props) {
   const [open, setOpen] = useState(false);
+  // Finished series (8/8 rounds) collapsed to just their Σ row; toggled per series.
+  const [collapsedSeries, setCollapsedSeries] = useState<Set<number>>(new Set());
+  const toggleSeries = (si: number) =>
+    setCollapsedSeries((prev) => {
+      const next = new Set(prev);
+      if (next.has(si)) next.delete(si);
+      else next.add(si);
+      return next;
+    });
 
   // Player columns in seat order; the local player's column is highlighted.
   const cols = [...players].sort((a, b) => a.order - b.order);
@@ -39,13 +48,11 @@ export default function Standings({ standings, guesses = [], players, myOrder, d
     total: desktop ? 20 : 18,
   };
 
-  const table = (
-    <div className="flex-1 flex flex-col px-3 pt-3 pb-4">
-      {/* Column headers */}
-      <div
-        className="grid items-end mb-1"
-        style={{ gridTemplateColumns: `28px repeat(${cols.length}, 1fr)` }}
-      >
+  const gridCols = { gridTemplateColumns: `28px repeat(${cols.length}, 1fr)` };
+
+  const columnHeader = (
+    <div className="px-3 pt-3 flex-shrink-0">
+      <div className="grid items-end mb-1" style={gridCols}>
         <div />
         {cols.map((p) => (
           <div
@@ -59,28 +66,31 @@ export default function Standings({ standings, guesses = [], players, myOrder, d
           </div>
         ))}
       </div>
-      <div className="h-px bg-gold/10 mb-1" />
+      <div className="h-px bg-gold/10" />
+    </div>
+  );
 
-      {/* Completed rounds, grouped by series with a per-series summary row */}
-      {standings.flatMap((seriesRounds, si) => {
-        const priorRounds = seriesRoundOffsets[si];
-        const elems = seriesRounds.map((scores, lri) => (
-          <div
-            key={`r-${si}-${lri}`}
-            className="grid items-center py-1 border-b border-gold/[.05]"
-            style={{ gridTemplateColumns: `28px repeat(${cols.length}, 1fr)` }}
-          >
+  // Completed rounds, grouped by series with a per-series summary row. Finished
+  // series can be collapsed to just their Σ row so long games stay scannable.
+  const rows = standings.flatMap((seriesRounds, si) => {
+    const priorRounds = seriesRoundOffsets[si];
+    const isFinished = seriesRounds.length === ROUNDS_PER_SERIES;
+    const isCollapsed = isFinished && collapsedSeries.has(si);
+    const elems = isCollapsed
+      ? []
+      : seriesRounds.map((scores, lri) => (
+          <div key={`r-${si}-${lri}`} className="grid items-center py-1 border-b border-gold/[.05]" style={gridCols}>
             <div className="text-center text-[#7a7252]" style={{ fontSize: fz.idx }}>
               {priorRounds + lri + 1}
             </div>
             {cols.map((p) => {
               const points = scores[p.order] ?? 0;
-              // Failed tip (0 points) → show the struck-through tip instead of 0.
+              // Failed tip → show the tip in the dimmer "0 points" color, no strikethrough.
               if (points === 0) {
                 return (
                   <div
                     key={p.order}
-                    className="text-center font-serif leading-none line-through"
+                    className="text-center font-serif leading-none"
                     style={{ fontSize: fz.cell, color: '#7a6e4a' }}
                   >
                     {guesses[si]?.[lri]?.[p.order] ?? 0}
@@ -100,56 +110,61 @@ export default function Standings({ standings, guesses = [], players, myOrder, d
           </div>
         ));
 
-        // After a finished series, sum its points per player.
-        if (seriesRounds.length === ROUNDS_PER_SERIES) {
-          elems.push(
-            <div
-              key={`s-${si}`}
-              className="grid items-center py-1 my-0.5 rounded bg-gold/[.07]"
-              style={{ gridTemplateColumns: `28px repeat(${cols.length}, 1fr)` }}
-            >
-              <div className="text-center font-serif text-gold" style={{ fontSize: fz.sigma }}>
-                Σ{si + 1}
+    // After a finished series, sum its points per player. Clicking toggles
+    // whether that series' individual rounds are shown.
+    if (isFinished) {
+      elems.push(
+        <div
+          key={`s-${si}`}
+          role="button"
+          tabIndex={0}
+          onClick={() => toggleSeries(si)}
+          onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && toggleSeries(si)}
+          className="grid items-center py-1 my-0.5 rounded bg-gold/[.07] cursor-pointer select-none"
+          style={gridCols}
+        >
+          <div className="text-center font-serif text-gold flex items-center justify-center gap-[2px]" style={{ fontSize: fz.sigma }}>
+            <span className="text-[8px] text-green-dim">{isCollapsed ? '▸' : '▾'}</span>
+            Σ{si + 1}
+          </div>
+          {cols.map((p) => {
+            const sum = seriesRounds.reduce((a, r) => a + (r[p.order] ?? 0), 0);
+            return (
+              <div
+                key={p.order}
+                className={`text-center font-serif leading-none ${
+                  p.order === myOrder ? 'text-gold-dim' : 'text-green-score'
+                }`}
+                style={{ fontSize: fz.cell, fontWeight: 600 }}
+              >
+                {sum}
               </div>
-              {cols.map((p) => {
-                const sum = seriesRounds.reduce((a, r) => a + (r[p.order] ?? 0), 0);
-                return (
-                  <div
-                    key={p.order}
-                    className={`text-center font-serif leading-none ${
-                      p.order === myOrder ? 'text-gold-dim' : 'text-green-score'
-                    }`}
-                    style={{ fontSize: fz.cell, fontWeight: 600 }}
-                  >
-                    {sum}
-                  </div>
-                );
-              })}
-            </div>,
-          );
-        }
-        return elems;
-      })}
+            );
+          })}
+        </div>,
+      );
+    }
+    return elems;
+  });
+
+  const scrollableRounds = (
+    <div className={`flex-1 min-h-0 overflow-y-auto px-3 ${desktop ? '' : 'max-h-[45vh]'}`}>
+      {rows}
 
       {/* Active round placeholder */}
-      <div
-        className="grid items-center py-1 rounded mt-0.5 bg-gold/[.04]"
-        style={{ gridTemplateColumns: `28px repeat(${cols.length}, 1fr)` }}
-      >
+      <div className="grid items-center py-1 rounded mt-0.5 bg-gold/[.04]" style={gridCols}>
         <div className="text-center font-medium text-gold" style={{ fontSize: fz.idx }}>{completedRounds + 1}</div>
         {cols.map((p) => (
           <div key={p.order} className="text-center text-[#7a7252]" style={{ fontSize: fz.dot }}>·</div>
         ))}
       </div>
+    </div>
+  );
 
-      <div className="flex-1 min-h-2" />
+  const totalsBlock = (
+    <div className="px-3 pb-4 pt-2 flex-shrink-0">
       <div className="h-px bg-gold/20 mb-2" />
-
-      {/* Totals */}
-      <div
-        className="grid items-center py-0.5"
-        style={{ gridTemplateColumns: `28px repeat(${cols.length}, 1fr)` }}
-      >
+      <div className="grid items-center py-0.5" style={gridCols}>
         <div className="text-center uppercase tracking-[.08em] text-green-dim" style={{ fontSize: fz.sigma }}>
           Σ
         </div>
@@ -168,13 +183,21 @@ export default function Standings({ standings, guesses = [], players, myOrder, d
     </div>
   );
 
+  const content = (
+    <div className="flex-1 min-h-0 flex flex-col">
+      {columnHeader}
+      {scrollableRounds}
+      {totalsBlock}
+    </div>
+  );
+
   if (desktop) {
     return (
       <aside className="w-[268px] flex-shrink-0 bg-header border-l border-[#142018] flex flex-col">
-        <div className="h-[58px] flex items-center gap-2 px-5 border-b border-[#14221a]">
+        <div className="h-[58px] flex items-center gap-2 px-5 border-b border-[#14221a] flex-shrink-0">
           <span className="font-serif uppercase tracking-[.12em] text-[13px] text-gold">Skóre</span>
         </div>
-        {table}
+        {content}
       </aside>
     );
   }
@@ -189,7 +212,7 @@ export default function Standings({ standings, guesses = [], players, myOrder, d
         <span>Skóre</span>
         <span className="text-green-dim">{open ? '▲' : '▼'}</span>
       </button>
-      {open && table}
+      {open && content}
     </div>
   );
 }
diff --git a/frontend/src/pages/History.tsx b/frontend/src/pages/History.tsx
index f50b561..8c610c5 100644
--- a/frontend/src/pages/History.tsx
+++ b/frontend/src/pages/History.tsx
@@ -128,7 +128,7 @@ function GameDetailView({ detail, onBack }: { detail: GameDetail; onBack: () =>
     return r.won ? (
       <span className="font-serif" style={{ fontSize: 14, color: '#c8bb95' }}>{r.points}</span>
     ) : (
-      <span className="font-serif line-through" style={{ fontSize: 14, color: '#7a6e4a' }}>{r.guess}</span>
+      <span className="font-serif" style={{ fontSize: 14, color: '#7a6e4a' }}>{r.guess}</span>
     );
   };
   const seriesTotal = (s: number | undefined, seat: number) =>