Refactor WinnerBadge component to simplify implementation

Moved logic for displaying the winner badge directly into the `WinnerBadge` component, removing unused local storage helper functions. Updated styling and streamlined the component for better clarity and maintainability.
This commit is contained in:
2026-02-06 10:05:21 +01:00
parent 74de7bf4dd
commit 6732208792

View File

@@ -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>
);
} }