Initial commit

Create the Board Score PWA with offline support, Kurzgesagt-style themes, multiple game configs, dynamic players, avatars via DiceBear, and complete statistics.
2026-07-06 16:12:25 +02:00
commit bf67c58171
62 changed files with 54527 additions and 0 deletions
@@ -0,0 +1,83 @@
+import { useState, useRef, useEffect } from "react";
+import { Menu, Home, History, Settings, Users, BarChart2 } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { motion, AnimatePresence } from "framer-motion";
+import { Button } from "./ui/button";
+
+export function NavigationMenu() {
+  const [isOpen, setIsOpen] = useState(false);
+  const navigate = useNavigate();
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const nav = (path: string) => {
+    setIsOpen(false);
+    navigate(path);
+  };
+
+  return (
+    <div ref={menuRef} className="relative z-50">
+      <Button
+        variant="ghost"
+        size="icon"
+        onClick={() => setIsOpen(!isOpen)}
+        className="rounded-full hover:bg-black/10 dark:hover:bg-white/10"
+      >
+        <Menu className="w-6 h-6" />
+      </Button>
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95, transformOrigin: "top left" }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.95 }}
+            transition={{ duration: 0.15 }}
+            className="absolute top-full left-0 mt-2 w-56 bg-card border shadow-xl rounded-2xl overflow-hidden"
+          >
+            <div className="flex flex-col">
+              <button
+                onClick={() => nav("/")}
+                className="flex items-center w-full p-4 hover:bg-secondary text-left font-medium transition-colors"
+              >
+                <Home className="w-5 h-5 mr-3 text-primary" /> Accueil
+              </button>
+              <button
+                onClick={() => nav("/history")}
+                className="flex items-center w-full p-4 hover:bg-secondary text-left font-medium transition-colors border-t border-border/50"
+              >
+                <History className="w-5 h-5 mr-3 text-primary" /> Historique
+              </button>
+              <button
+                onClick={() => nav("/players")}
+                className="flex items-center w-full p-4 hover:bg-secondary text-left font-medium transition-colors border-t border-border/50"
+              >
+                <Users className="w-5 h-5 mr-3 text-primary" /> Joueurs
+              </button>
+              <button
+                onClick={() => nav("/stats")}
+                className="flex items-center w-full p-4 hover:bg-secondary text-left font-medium transition-colors border-t border-border/50"
+              >
+                <BarChart2 className="w-5 h-5 mr-3 text-primary" /> Statistiques
+              </button>
+              <button
+                onClick={() => nav("/settings")}
+                className="flex items-center w-full p-4 hover:bg-secondary text-left font-medium transition-colors border-t border-border/50"
+              >
+                <Settings className="w-5 h-5 mr-3 text-primary" /> Paramètres
+              </button>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}