Add internationalization support with English/German language toggle across all components

Integrated i18n system throughout the application with `useLanguage` hook providing translation function and language state. Added bilingual support to all user-facing strings in App.jsx (password validation, error messages, game creation, sheet sections), AdminPanel (user management, form validation, status messages), AdminSettingsModal (SMTP configuration), ChipModal, DesignModal, GamePickerCard (lobby interface,
This commit is contained in:
2026-08-02 10:33:40 +02:00
parent d96b75ca82
commit 33a972e502
21 changed files with 472 additions and 200 deletions
@@ -2,8 +2,10 @@ import React, { useEffect } from "react";
import { createPortal } from "react-dom";
import confetti from "canvas-confetti";
import { stylesTokens } from "../styles/theme";
import { useLanguage } from "../i18n";
export default function GameStartCelebration({ open, onClose }) {
const { t, language } = useLanguage();
useEffect(() => {
if (!open) return;
@@ -29,14 +31,14 @@ export default function GameStartCelebration({ open, onClose }) {
if (!open) return null;
return createPortal(
<div className="hp-start-overlay" onClick={onClose} role="dialog" aria-label="Spiel gestartet">
<div className="hp-start-overlay" onClick={onClose} role="dialog" aria-label={t("gameStarted")}>
<div className="hp-start-card" onClick={(event) => event.stopPropagation()}>
<div className="hp-start-rune"></div>
<div className="hp-start-kicker">Die Ermittlungen beginnen</div>
<div className="hp-start-title">Spiel gestartet</div>
<div className="hp-start-subtitle">Möge der beste Detektiv gewinnen.</div>
<div className="hp-start-kicker">{t("investigationsBegin")}</div>
<div className="hp-start-title">{t("gameStarted")}</div>
<div className="hp-start-subtitle">{t("bestDetective")}</div>
<button onClick={onClose} style={{ marginTop: 18, color: stylesTokens.textGold }}>
Los geht&apos;s
{language === "en" ? "Lets go" : "Los geht's"}
</button>
</div>
</div>,