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:
@@ -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>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user