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) {
return `winner:${gameId}`;
}
export default function WinnerBadge({ winner }) {
const w = (winner || "").trim();
if (!w) return null;
export function getWinnerLS(gameId) {
if (!gameId) return "";
try {
return localStorage.getItem(winnerKey(gameId)) || "";
} catch {
return "";
}
}
return (
<div style={{ marginTop: 14 }}>
<div
style={{
...styles.card,
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) {
if (!gameId) return;
try {
localStorage.setItem(winnerKey(gameId), (name || "").trim());
} catch {}
}
export function clearWinnerLS(gameId) {
if (!gameId) return;
try {
localStorage.removeItem(winnerKey(gameId));
} catch {}
<div
style={{
padding: "8px 12px",
borderRadius: 999,
border: `1px solid ${stylesTokens.panelBorder}`,
background: stylesTokens.panelBg,
color: stylesTokens.textGold,
fontWeight: 1000,
whiteSpace: "nowrap",
}}
>
Gewonnen
</div>
</div>
</div>
);
}