frontend/src/components/WinnerBadge.jsx

@@ -1,28 +1,43 @@
-// frontend/src/utils/winnerStorage.js
+// src/components/WinnerBadge.jsx
+import React from "react";
+import { styles } from "../styles/styles";
+import { stylesTokens } from "../styles/theme";
 
-function winnerKey(gameId) {
+export default function WinnerBadge({ winner }) {
-  return `winner:${gameId}`;
+  const w = (winner || "").trim();
-}
+  if (!w) return null;
 
-export function getWinnerLS(gameId) {
+  return (
-  if (!gameId) return "";
+    <div style={{ marginTop: 14 }}>
-  try {
+      <div
-    return localStorage.getItem(winnerKey(gameId)) || "";
+        style={{
-  } catch {
+          ...styles.card,
-    return "";
+          padding: 12,
-  }
+          display: "flex",
-}
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: 10,
+        }}
+      >
+        <div>
+          <div style={{ fontWeight: 1000, color: stylesTokens.textGold }}>🏆 Sieger</div>
+          <div style={{ marginTop: 2, color: stylesTokens.textMain, opacity: 0.95 }}>{w}</div>
+        </div>
 
-export function setWinnerLS(gameId, name) {
+        <div
-  if (!gameId) return;
+          style={{
-  try {
+            padding: "8px 12px",
-    localStorage.setItem(winnerKey(gameId), (name || "").trim());
+            borderRadius: 999,
-  } catch {}
+            border: `1px solid ${stylesTokens.panelBorder}`,
-}
+            background: stylesTokens.panelBg,
-
+            color: stylesTokens.textGold,
-export function clearWinnerLS(gameId) {
+            fontWeight: 1000,
-  if (!gameId) return;
+            whiteSpace: "nowrap",
-  try {
+          }}
-    localStorage.removeItem(winnerKey(gameId));
+        >
-  } catch {}
+          Gewonnen
+        </div>
+      </div>
+    </div>
+  );
 }