frontendove optimalizacie

frontend/src/pages/GameTable.tsx

@@ -33,6 +33,11 @@ export default function GameTable() {
   const lingerTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const previousStash = gameStatus?.status.previous_stash ?? null;
+  // Every game_status payload recreates the stash object, so identify the trick
+  // by content — the timer must restart only when a *different* trick completes.
+  const previousStashKey = previousStash
+    ? `${previousStash.first_player}:${JSON.stringify(previousStash.cards)}`
+    : null;
 
   useEffect(() => {
     if (!previousStash) return;
@@ -43,7 +48,7 @@ export default function GameTable() {
       if (lingerTimer.current) clearTimeout(lingerTimer.current);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [gameStatus?.status.previous_stash?.first_player, JSON.stringify(gameStatus?.status.previous_stash?.cards)]);
+  }, [previousStashKey]);
 
   if (!gameStatus || !myPlayer) {
     return <p className="text-center text-green-dim pt-20 font-serif italic">Načítava sa…</p>;
@@ -84,13 +89,12 @@ export default function GameTable() {
   const topP = seat(2);
   const rightP = seat(3);
 
-  const wonOf = (o?: number) => (o === undefined ? 0 : active_round_stashes?.[o] ?? 0);
-  const guessOf = (o?: number): number | null => {
-    if (o === undefined) return null;
-    const g = active_round_guesses?.[String(o)];
-    return g === undefined ? null : g;
-  };
-  const activeOf = (o?: number) => o !== undefined && active_player === o;
+  // Live round state of one seat, shaped as PlayerCircle props.
+  const seatProps = (o?: number) => ({
+    won: o === undefined ? 0 : active_round_stashes?.[o] ?? 0,
+    guess: (o === undefined ? null : active_round_guesses?.[String(o)] ?? null) as number | null,
+    active: o !== undefined && active_player === o,
+  });
 
   // Exact cards still in a player's hand: started with cards_in_round, lost one
   // per completed trick, minus one more if they've already played this trick.
@@ -114,7 +118,7 @@ export default function GameTable() {
   const canEnd = myOrder === 0 || !hostConnected;
 
   // ── shared pieces ────────────────────────────────────────────────
-  const bannerText = activeOf(myOrder)
+  const bannerText = active_player === myOrder
     ? isPlayPhase
       ? 'Zahraj kartu'
       : 'Zadaj tip'
@@ -171,39 +175,21 @@ export default function GameTable() {
 
   const topSeat = (
     <div className="flex flex-col items-center gap-1.5">
-      <PlayerCircle
-        name={topP?.name ?? '—'}
-        won={wonOf(topP?.order)}
-        guess={guessOf(topP?.order)}
-        active={activeOf(topP?.order)}
-        size={desktop ? 64 : 52}
-      />
+      <PlayerCircle name={topP?.name ?? '—'} {...seatProps(topP?.order)} size={desktop ? 64 : 52} />
       <FaceDownCards count={cardsInHandOf(topP?.order)} direction="row" desktop={desktop} />
     </div>
   );
 
   const sideSeat = (p?: PlayerInfo) => (
     <div className="flex flex-col items-center gap-1.5">
-      <PlayerCircle
-        name={p?.name ?? '—'}
-        won={wonOf(p?.order)}
-        guess={guessOf(p?.order)}
-        active={activeOf(p?.order)}
-        size={desktop ? 60 : 48}
-      />
+      <PlayerCircle name={p?.name ?? '—'} {...seatProps(p?.order)} size={desktop ? 60 : 48} />
       <FaceDownCards count={cardsInHandOf(p?.order)} direction="col" desktop={desktop} />
     </div>
   );
 
   const meSeat = (
     <div className="flex justify-center">
-      <PlayerCircle
-        name={myPlayer.name}
-        won={wonOf(myOrder)}
-        guess={guessOf(myOrder)}
-        active={activeOf(myOrder)}
-        size={desktop ? 70 : 58}
-      />
+      <PlayerCircle name={myPlayer.name} {...seatProps(myOrder)} size={desktop ? 70 : 58} />
     </div>
   );