Prevent sheet editing after game completion and add game start celebration with enhanced splash screen animations

Added read-only enforcement for finished games by checking `winner_user_id` in backend PATCH endpoint and frontend sheet interactions. Implemented GameStartCelebration component with confetti burst, animated overlay card, and pulsing rune icon. Enhanced splash screen with orbiting border animation, sparkle effects, and title rise transition. Added haptic feedback (vibration) to sheet
2026-08-02 09:28:16 +02:00
parent 29e063d88d
commit a8335e2034
6 changed files with 157 additions and 5 deletions
@@ -0,0 +1,45 @@
+import React, { useEffect } from "react";
+import { createPortal } from "react-dom";
+import confetti from "canvas-confetti";
+import { stylesTokens } from "../styles/theme";
+
+export default function GameStartCelebration({ open, onClose }) {
+  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="Spiel gestartet">
+      <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>
+        <button onClick={onClose} style={{ marginTop: 18, color: stylesTokens.textGold }}>
+          Los geht&apos;s
+        </button>
+      </div>
+    </div>,
+    document.body
+  );
+}