nessi
33a972e502
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,
48 lines
1.5 KiB
React
48 lines
1.5 KiB
React
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;
|
||
|
||
const burst = () => {
|
||
confetti({
|
||
particleCount: 70,
|
||
spread: 78,
|
||
startVelocity: 32,
|
||
origin: { y: 0.62 },
|
||
colors: ["#e9d8a6", "#7cffa8", "#8fb6ff", "#ffffff"],
|
||
});
|
||
};
|
||
|
||
burst();
|
||
const second = setTimeout(burst, 480);
|
||
const close = setTimeout(onClose, 3000);
|
||
return () => {
|
||
clearTimeout(second);
|
||
clearTimeout(close);
|
||
};
|
||
}, [open, onClose]);
|
||
|
||
if (!open) return null;
|
||
|
||
return createPortal(
|
||
<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">{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 }}>
|
||
{language === "en" ? "Let’s go" : "Los geht's"}
|
||
</button>
|
||
</div>
|
||
</div>,
|
||
document.body
|
||
);
|
||
}
|