From 74de7bf4dd333ea696ed034ca890e9b9456dfeee Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Fri, 6 Feb 2026 10:02:11 +0100
Subject: [PATCH] Enhance winner management with localStorage updates

Refactored winner storage logic by introducing `clearWinnerLS` and replacing outdated functions with `getWinnerLS` and `setWinnerLS`. Added a `WinnerBadge` component to display the winner's status and updated game lifecycle handling to ensure proper winner reset and management.
---
 frontend/src/App.jsx                    | 43 +++++++++++++++++++++----
 frontend/src/components/WinnerBadge.jsx | 28 ++++++++++++++++
 frontend/src/utils/winnerStorage.js     | 40 ++++++++++++++---------
 3 files changed, 88 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/components/WinnerBadge.jsx

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 9581f76..e637ae2 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -4,7 +4,8 @@ import React, { useEffect, useState } from "react";
 import { api } from "./api/client";
 import { cycleTag } from "./utils/cycleTag";
 import { getChipLS, setChipLS, clearChipLS } from "./utils/chipStorage";
-import { getWinner, setWinner as saveWinnerLS } from "./utils/winnerStorage";
+
+import { getWinnerLS, setWinnerLS, clearWinnerLS } from "./utils/winnerStorage";
 
 import { useHpGlobalStyles } from "./styles/hooks/useHpGlobalStyles";
 import { styles } from "./styles/styles";
@@ -21,6 +22,7 @@ import GamePickerCard from "./components/GamePickerCard";
 import SheetSection from "./components/SheetSection";
 import DesignModal from "./components/DesignModal";
 import WinnerCard from "./components/WinnerCard";
+import WinnerBadge from "./components/WinnerBadge";
 
 export default function App() {
   useHpGlobalStyles();
@@ -80,6 +82,8 @@ export default function App() {
     setSheet(sh);
   };
 
+  // ===== Effects =====
+
   // Dropdown outside click
   useEffect(() => {
     const onDown = (e) => {
@@ -102,15 +106,19 @@ export default function App() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // load sheet when game changes
+  // load sheet + winner when game changes
   useEffect(() => {
     (async () => {
       if (!gameId) return;
+
       try {
         await reloadSheet();
-      } catch {}
-      // Winner pro Game aus LS laden
-      setWinnerName(getWinner(gameId));
+      } catch {
+        // ignore
+      }
+
+      // Sieger pro Game aus localStorage laden
+      setWinnerName(getWinnerLS(gameId));
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [gameId]);
@@ -188,15 +196,29 @@ export default function App() {
       method: "POST",
       body: JSON.stringify({ name: "Spiel " + new Date().toLocaleString() }),
     });
+
     const gs = await api("/games");
     setGames(gs);
     setGameId(g.id);
+
+    // Neues Spiel -> Sieger leer
+    clearWinnerLS(g.id);
+    setWinnerName("");
   };
 
   // ===== Winner actions =====
   const saveWinner = () => {
     if (!gameId) return;
-    saveWinnerLS(gameId, winnerName.trim());
+    const v = (winnerName || "").trim();
+
+    if (!v) {
+      clearWinnerLS(gameId);
+      setWinnerName("");
+      return;
+    }
+
+    setWinnerLS(gameId, v);
+    setWinnerName(v);
   };
 
   // ===== Sheet actions =====
@@ -338,6 +360,9 @@ export default function App() {
 
         <HelpModal open={helpOpen} onClose={() => setHelpOpen(false)} />
 
+        {/* Sieger Badge: nur wenn gesetzt */}
+        <WinnerBadge winner={(winnerName || "").trim()} />
+
         <div style={{ marginTop: 14, display: "grid", gap: 14 }}>
           {sections.map((sec) => (
             <SheetSection
@@ -380,7 +405,11 @@ export default function App() {
         }}
       />
 
-      <ChipModal chipOpen={chipOpen} closeChipModalToDash={closeChipModalToDash} chooseChip={chooseChip} />
+      <ChipModal
+        chipOpen={chipOpen}
+        closeChipModalToDash={closeChipModalToDash}
+        chooseChip={chooseChip}
+      />
     </div>
   );
 }
diff --git a/frontend/src/components/WinnerBadge.jsx b/frontend/src/components/WinnerBadge.jsx
new file mode 100644
index 0000000..323bf1f
--- /dev/null
+++ b/frontend/src/components/WinnerBadge.jsx
@@ -0,0 +1,28 @@
+// frontend/src/utils/winnerStorage.js
+
+function winnerKey(gameId) {
+  return `winner:${gameId}`;
+}
+
+export function getWinnerLS(gameId) {
+  if (!gameId) return "";
+  try {
+    return localStorage.getItem(winnerKey(gameId)) || "";
+  } catch {
+    return "";
+  }
+}
+
+export function setWinnerLS(gameId, name) {
+  if (!gameId) return;
+  try {
+    localStorage.setItem(winnerKey(gameId), (name || "").trim());
+  } catch {}
+}
+
+export function clearWinnerLS(gameId) {
+  if (!gameId) return;
+  try {
+    localStorage.removeItem(winnerKey(gameId));
+  } catch {}
+}
diff --git a/frontend/src/utils/winnerStorage.js b/frontend/src/utils/winnerStorage.js
index 7b65297..323bf1f 100644
--- a/frontend/src/utils/winnerStorage.js
+++ b/frontend/src/utils/winnerStorage.js
@@ -1,20 +1,28 @@
+// frontend/src/utils/winnerStorage.js
+
 function winnerKey(gameId) {
-    return `winner:${gameId}`;
-  }
+  return `winner:${gameId}`;
+}
 
-  export function getWinner(gameId) {
-    if (!gameId) return "";
-    try {
-      return localStorage.getItem(winnerKey(gameId)) || "";
-    } catch {
-      return "";
-    }
+export function getWinnerLS(gameId) {
+  if (!gameId) return "";
+  try {
+    return localStorage.getItem(winnerKey(gameId)) || "";
+  } catch {
+    return "";
   }
+}
 
-  export function setWinner(gameId, name) {
-    if (!gameId) return;
-    try {
-      localStorage.setItem(winnerKey(gameId), name || "");
-    } catch {}
-  }
-  
\ No newline at end of file
+export function setWinnerLS(gameId, name) {
+  if (!gameId) return;
+  try {
+    localStorage.setItem(winnerKey(gameId), (name || "").trim());
+  } catch {}
+}
+
+export function clearWinnerLS(gameId) {
+  if (!gameId) return;
+  try {
+    localStorage.removeItem(winnerKey(gameId));
+  } catch {}
+}