"use client"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; type Screen = "home" | "settings" | "packs" | "playerCount" | "names" | "teamCount" | "teams" | "rules" | "turnIntro" | "playing" | "turnResults" | "roundResults" | "final"; type Pack = { id: string; name: string; emoji: string; words: string[]; custom?: boolean }; type Attempt = { id: string; word: string; valid: boolean }; const OBJECTS = [ "Chaise", "Lampe", "Ordinateur", "Radio", "Horloge", "Cahier", "Crayon", "Agrafeuse", "Valise", "Portefeuille", "Cadenas", "Casserole", "Poêle", "Grille-pain", "Micro-ondes", "Aspirateur", "Balai", "Éponge", "Savon", "Miroir", "Parapluie", "Chemise", "Écouteurs", "Batterie", "Tournevis", "Perceuse", "Trottinette", "Camion", "Bateau", "Ballon", "Raquette", "Poupée", "Puzzle", "Dé", "Bougie", "Armoire", "Ventilateur", "Radiateur", "Extincteur", "Jumelles", "Boussole", "Canapé", "Tabouret", "Imprimante", "Calculatrice", "Trombone", "Palette", "Thermomètre", "Réveil", "Ventouse", "Entonnoir", "Passoire", "Fouet", "Tire-bouchon", "Sifflet", "Hamac", "Ancre", "Parachute", "Skateboard", "Frisbee", "Aimant", "Anneau", "Aquarium", "Arrosoir", "Baignoire", "Balançoire", "Berceau", "Brosse à dents", "Casquette", "Chariot", "Coffre", "Colle", "Corbeille", "Couvercle", "Écharpe", "Flûte", "Gourde", "Hameçon", "Loupe", "Médaille", "Moulin", "Parasol", "Sablier", "Sonnette", "Trépied", "Tuyau", "Cloche", "Enclume", "Moustiquaire", "Tirelire", "Bidon", "Seringue", "Béquille", "Épingle", "Ruban", "Écrou", "Ressort", "Paillasson", "Éventail", "Microphone", "Enceinte", "Projecteur", "Console", "Manette", "Trépied photo", "Clé USB", "Multiprise", "Casque de moto", "Sac à dos", "Boîte à outils", "Saladier", "Mixeur", "Cafetière", "Boîte aux lettres", "Antivol", "Gilet", "Blouson", "Bottes", "Gants", "Cravate", "Tondeuse", "Sacoche", "Porte-clés", "Cintre", "Poubelle", "Serpillière", "Plumeau", "Vaporisateur", "Ouvre-boîte", "Remorque", "Gyrophare", "Rétroviseur", "Quille", "Palme", "Tuba", "Harmonica", "Accordéon", "Interphone", "Badge", "Passeport", "Calendrier", "Balance", "Pèse-personne", "Glacière", "Bâche", "Piquet", "Élastique", "Torchon", "Nappe", "Sèche-cheveux", "Pince à linge", "Bouée", "Biberon", "Trompette", "Violon", ]; const DIFFICULT_OBJECTS = [ "Sextant", "Vilebrequin", "Fuseau", "Kalimba", "Ocarina", "Alambic", "Amphore", "Monocle", "Périscope", "Sarbacane", "Catapulte", "Girouette", "Mousqueton", "Gourdin", "Carquois", "Étrier", "Menottes", "étau", "lanterne", "chandelier", "baudrier", "Mortier", "Flacon", "Mappemonde", "Cocotte", "Chausse-pied", "Hublot", "Balise", "Épuisette", "Coquetier", "Marque-page", "Encrier", "Canif", "Rapporteur", "Hachette", "Gouge", "Ciseau à bois", "Sécateur", "Xylophone", "Haltère", "Parpaing", "Spatule", "Thermos", ]; const CAREERS = [ "Boulanger", "Pâtissier", "Cuisinier", "Serveur", "Boucher", "Charcutier", "Poissonnier", "Fromager", "Épicier", "Agriculteur", "Éleveur", "Viticulteur", "Jardinier", "Fleuriste", "Paysagiste", "Maçon", "Menuisier", "Charpentier", "Plombier", "Électricien", "Peintre", "Carreleur", "Serrurier", "Soudeur", "Vitrier", "Architecte", "Géomètre", "Mécanicien", "Carrossier", "Garagiste", "Chauffeur", "Routier", "Livreur", "Pilote", "Marin", "Pêcheur", "Capitaine", "Médecin", "Chirurgien", "Infirmier", "Pharmacien", "Dentiste", "Vétérinaire", "Kinésithérapeute", "Psychologue", "Orthophoniste", "Ambulancier", "Sage-femme", "Opticien", "Pompier", "Policier", "Gendarme", "Militaire", "Avocat", "Juge", "Notaire", "Huissier", "Greffier", "Professeur", "Instituteur", "Éducateur", "Bibliothécaire", "Chercheur", "Archéologue", "Historien", "Traducteur", "Interprète", "Journaliste", "Écrivain", "Photographe", "Cameraman", "Réalisateur", "Acteur", "Chanteur", "Musicien", "Danseur", "Sculpteur", "Graphiste", "Informaticien", "Technicien", "Ingénieur", "Électronicien", "Comptable", "Banquier", "Assureur", "Secrétaire", "Réceptionniste", "Vendeur", "Caissier", "Commercial", "Coiffeur", "Barbier", "Esthéticien", "Tatoueur", "Couturier", "Cordonnier", "Horloger", "Bijoutier", "Facteur", "Éboueur", ]; const ANIMALS = [ "Cheval", "Âne", "Vache", "Taureau", "Mouton", "Chèvre", "Cochon", "Lapin", "Hamster", "Cochon d’Inde", "Furet", "Souris", "Rat", "Hérisson", "Écureuil", "Castor", "Marmotte", "Lièvre", "Renard", "Loup", "Ours brun", "Ours polaire", "Panda géant", "Panda roux", "Lion", "Tigre", "Léopard", "Guépard", "Jaguar", "Lynx", "Puma", "Panthère noire", "Hyène", "Coyote", "Éléphant", "Rhinocéros", "Hippopotame", "Girafe", "Zèbre", "Gazelle", "Antilope", "Bison", "Buffle", "Dromadaire", "Chameau", "Lama", "Renne", "Cerf", "Chevreuil", "Élan", "Sanglier", "Suricate", "Blaireau", "Loutre", "Belette", "Raton laveur", "Gorille", "Chimpanzé", "Orang-outan", "Babouin", "Macaque", "Ouistiti", "Lémurien", "Kangourou", "Wallaby", "Koala", "Chauve-souris", "Taupe", "Bouquetin", "Yak", "Autruche", "Aigle", "Faucon", "Vautour", "Hibou", "Chouette", "Corbeau", "Pie", "Perroquet", "Perruche", "Toucan", "Colibri", "Flamant rose", "Pélican", "Mouette", "Goéland", "Pingouin", "Manchot", "Canard", "Oie", "Cygne", "Poule", "Coq", "Dinde", "Paon", "Faisan", "Pigeon", "Tourterelle", "Moineau", "Rouge-gorge", "Mésange", "Hirondelle", "Merle", "Pic-vert", "Coucou", "Cigogne", "Héron", "Grue", "Martin-pêcheur", "Dauphin", "Orque", "Baleine bleue", "Baleine à bosse", "Cachalot", "Phoque", "Otarie", "Morse", "Requin blanc", "Requin-marteau", "Requin-baleine", "Espadon", "Thon", "Saumon", "Truite", "Sardine", "Anchois", "Maquereau", "Morue", "Merlu", "Bar", "Dorade", "Brochet", "Carpe", "Anguille", "Poisson-clown", "Poulpe", "Calmar", "Méduse", "Étoile de mer", "Oursin", "Crabe", "Homard", "Langouste", "Crevette", "Tortue", "Crocodile", "Alligator", "Caïman", "Iguane", "Caméléon", "Serpent", "Cobra", "Python", "Grenouille", "Crapaud", ]; const DIFFICULT_ANIMALS = [ "Gnou", "Alpaga", "Paresseux", "Fourmilier", "Tatou", "Mangouste", "Capucin", "Opossum", "Ornithorynque", "Porc-épic", "Albatros", "Béluga", "Narval", "Marsouin", "Silure", "Hippocampe", "Poisson-globe", "Murène", "Barracuda", "Seiche", "Gecko", "Salamandre", "Axolotl", "Raie manta", "Chacal", "Mante religieuse", "Veuve noire", "Scolopendre", "Concombre de mer", "Tyrannosaure", ]; const CHARACTERS = [ "Leonardo DiCaprio", "Tom Hanks", "Brad Pitt", "Johnny Depp", "Will Smith", "Morgan Freeman", "Jean Dujardin", "Omar Sy", "Louis de Funès", "Jennifer Lawrence", "Michael Jackson", "Elton John", "Bob Marley", "Madonna", "Beyoncé", "Lady Gaga", "Taylor Swift", "Rihanna", "Eminem", "Ed Sheeran", "Céline Dion", "Mylène Farmer", "Johnny Hallyday", "Jean-Jacques Goldman", "Stromae", "Soprano", "Pablo Picasso", "Vincent van Gogh", "Léonard de Vinci", "Barack Obama", "Donald Trump", "Emmanuel Macron", "Vladimir Poutine", "Squeezie", "Inoxtag", "Tibo InShape", "MrBeast", "Mickey Mouse", "Donald Duck", "Bugs Bunny", "Bob l’éponge", "Homer Simpson", "Scooby-Doo", "Shrek", "Simba", "Aladdin", "La Reine des neiges", "Buzz l’Éclair", "Ratatouille", "Pikachu", "Naruto", "Spider-Man", "Batman", "Superman", "Harry Potter", "Jackie Chan", "Shakira", "Kylian Mbappé", "Astérix", "Jim Carrey", "Arnold Schwarzenegger", "Jamel Debbouze", "Gad Elmaleh", "Aya Nakamura", "Zinédine Zidane", "Lionel Messi", "Teddy Riner", "Thomas Pesquet", "Tintin", "Peter Pan", "Dark Vador", "David Guetta", "Lucky Luke", "Iron-Man", "Max verstappen", ]; const VIDEO_GAMES = [ "Minecraft", "Fortnite", "Grand Theft Auto", "Mario Kart", "Super Mario Bros.", "The Legend of Zelda: Breath of the Wild", "Call of Duty : Warzone", "League of Legends", "Counter-Strike", "Valorant", "Overwatch", "World of Warcraft", "The Sims", "Animal Crossing: New Horizons", "Among Us", "Fall Guys", "Rocket League", "Red Dead Redemption", "The Last of Us", "God of War", "Assassin’s Creed II", "Far Cry", "Resident Evil", "Silent Hill", "Tomb Raider", "Uncharted", "Elden Ring", "Dark Souls", "Cyberpunk 2077", "The Witcher", "Skyrim", "Portal", "Half-Life", "Pac-Man", "Tetris", "Sonic the Hedgehog", "Street Fighter II", "Dead by Daylight", "Tekken", "Gran Turismo", ]; const BUILT_IN_PACKS: Pack[] = [ { id: "objects", name: "Pack Squiz'Zup - Objet", emoji: "📦", words: OBJECTS }, { id: "objects-difficult", name: "Pack Squiz'Zup - Objet (Difficile)", emoji: "🧭", words: DIFFICULT_OBJECTS }, { id: "careers", name: "Pack Squiz'Zup - Métier", emoji: "👷", words: CAREERS }, { id: "animals", name: "Pack Squiz'Zup - Animaux", emoji: "🦁", words: ANIMALS }, { id: "animals-difficult", name: "Pack Squiz'Zup - Animaux (Difficile)", emoji: "🦖", words: DIFFICULT_ANIMALS }, { id: "characters", name: "Pack Squiz'Zup - Personnage", emoji: "🎭", words: CHARACTERS }, { id: "video-games", name: "Pack Squiz'Zup - Jeux-Vidéo", emoji: "🎮", words: VIDEO_GAMES } ]; const BUILT_IN_PACK_IDS = BUILT_IN_PACKS.map((pack) => pack.id); const TEAM_STYLES = [ { name: "Équipe Azur", color: "#48b8ff", dark: "#087dc2", shellStart: "#249fdf", shellMiddle: "#0877c3", shellBottom: "#07478e", shellGlow: "rgba(104,218,255,.32)", shellAction: "rgba(7,71,142,.97)" }, { name: "Équipe Corail", color: "#ff6b6b", dark: "#c5304a", shellStart: "#ee5968", shellMiddle: "#bf3049", shellBottom: "#71162f", shellGlow: "rgba(255,172,184,.32)", shellAction: "rgba(113,22,47,.97)" }, { name: "Équipe Soleil", color: "#ffd84d", dark: "#b88600", shellStart: "#e6a928", shellMiddle: "#bd7811", shellBottom: "#714007", shellGlow: "rgba(255,232,137,.32)", shellAction: "rgba(113,64,7,.97)" }, { name: "Équipe Menthe", color: "#62df91", dark: "#168a4b", shellStart: "#32b983", shellMiddle: "#16825f", shellBottom: "#09503d", shellGlow: "rgba(155,255,215,.28)", shellAction: "rgba(9,80,61,.97)" } ]; const ROUND_INFO = [ { verb: "Décrivez !", short: "Faites deviner librement", icon: "💬", rule: "Décrivez les mots sans les prononcer. Les mots de la même famille, ceux qui sonnent pareil, les traductions et l’épellation sont interdits." }, { verb: "Un seul mot !", short: "Un indice, pas un de plus", icon: "☝️", rule: "Faites deviner chaque mot en ne prononçant qu’un seul mot. Choisissez bien votre indice : vous n’aurez pas de deuxième chance." }, { verb: "Mimez !", short: "Place au jeu d’acteur", icon: "🎭", rule: "Faites deviner les mots uniquement en les mimant. Aucun mot, son ou bruitage n’est autorisé." } ]; const shuffle = (items: T[]) => { const copy = [...items]; for (let i = copy.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [copy[i], copy[j]] = [copy[j], copy[i]]; } return copy; }; const normalizeWord = (word: string) => word .normalize("NFKC") .trim() .toLocaleLowerCase("fr-FR") .replace(/[’`´]/g, "'") .replace(/[‐‑–—]/g, "-") .replace(/\s+/g, " "); const uniqueWords = (words: string[]) => { const seen = new Set(); return words.filter((word) => { const key = normalizeWord(word); if (!key || seen.has(key)) return false; seen.add(key); return true; }); }; const teamOptionsFor = (players: number) => { if (players <= 5) return [2]; if (players <= 7) return [2, 3]; if (players <= 10) return [2, 3, 4]; if (players <= 15) return [3, 4]; return [4]; }; const wordCountForPlayers = (players: number) => players + 26; const toCsvUrl = (value: string) => { const trimmed = value.trim(); const match = trimmed.match(/spreadsheets\/d\/([a-zA-Z0-9-_]+)/); if (!match) return trimmed; const gid = trimmed.match(/[?#&]gid=(\d+)/)?.[1] ?? "0"; return `https://docs.google.com/spreadsheets/d/${match[1]}/export?format=csv&gid=${gid}`; }; const parseCsvWords = (text: string) => text .split(/\r?\n/) .map((line) => line.split(",")[0].replace(/^\s*"|"\s*$/g, "").replace(/""/g, '"').trim()) .filter(Boolean); function IconButton({ label, onClick, children }: { label: string; onClick: () => void; children: React.ReactNode }) { return ; } function AppHeader({ title, onBack, detail }: { title: string; onBack?: () => void; detail?: string }) { return (
{onBack ? : }
{detail && {detail}}

{title}

); } function PrimaryButton({ children, onClick, disabled = false }: { children: React.ReactNode; onClick: () => void; disabled?: boolean }) { return ; } function BackgroundSpiral() { const canvasRef = useRef(null); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const draw = () => { const context = canvas.getContext("2d"); if (!context) return; const bounds = canvas.getBoundingClientRect(); const width = Math.max(1, bounds.width); const height = Math.max(1, bounds.height); const pixelRatio = Math.min(window.devicePixelRatio || 1, 2); canvas.width = Math.round(width * pixelRatio); canvas.height = Math.round(height * pixelRatio); context.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0); context.clearRect(0, 0, width, height); const centerX = width / 2; const centerY = height / 2; const turnGap = Math.max(44, Math.min(59, width * 0.14)); const radiusPerRadian = turnGap / (Math.PI * 2); const maxRadius = Math.hypot(width, height) + turnGap * 3; const maxAngle = maxRadius / radiusPerRadian; const angleOffset = -Math.PI / 2 - 0.2; context.beginPath(); for (let angle = 0; angle <= maxAngle; angle += 0.025) { const radius = radiusPerRadian * angle; const x = centerX + Math.cos(angle + angleOffset) * radius; const y = centerY + Math.sin(angle + angleOffset) * radius; if (angle === 0) context.moveTo(x, y); else context.lineTo(x, y); } context.strokeStyle = "rgba(255,255,255,.09)"; context.lineWidth = Math.max(28, Math.min(40, width * 0.085)); context.lineCap = "round"; context.lineJoin = "round"; context.stroke(); }; draw(); window.addEventListener("resize", draw); window.visualViewport?.addEventListener("resize", draw); return () => { window.removeEventListener("resize", draw); window.visualViewport?.removeEventListener("resize", draw); }; }, []); return