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