/** * Écran de jeu multijoueur — Ticket Cricket 2026. * * Règles clés : * - Tour par tour, seul le joueur actif peut piocher. * - Joueur à 10 000 $ de dette totale → éliminé (spectateur). * - Cartes T3 : transfert automatique de dette au joueur suivant. * - Poll toutes les ~1,8 s. */ import { useState, useEffect, useRef, useCallback, useMemo } from "react"; import { motion, AnimatePresence } from "motion/react"; import { createPortal } from "react-dom"; import { useLocation } from "wouter"; import { Home, Crown, Shuffle, X, ChevronLeft, ChevronRight, ChevronDown, Clock, Target, Trophy, Layers, User, ArrowRight, ArrowLeft, Banknote, TrendingDown, TrendingUp, Mail, Skull, CheckCircle, Eye, EyeOff, History, ListOrdered, UserX, LogOut, Search, Siren, Megaphone, Music, Ticket, Users, } from "lucide-react"; import { getSession, drawCard, resetGame, leaveSession, addDebt, eliminatePlayer, endTurn, mpStorage, acknowledgeElimination, kickPlayer, type Session, } from "@/game/utils/sessionApi"; import { getCardConfig, drawerNetAmount, nextPlayerAmount, computePlayerTotal, formatPrice, CATEGORY_INFO, CATEGORY_ORDER, TYPE_INFO, type CardCategory, type CardConfig, } from "@/game/utils/cardConfig"; import { filterByCategory } from "@/game/utils/cardCategories"; import { PoliceTape } from "@/game/ui/PoliceUI"; import ticketImg from "@/game/utils/ticketImg"; import { WinnerOverlay } from "@/game/ui/WinnerOverlay"; import { PodiumOverlay, type PodiumPlayer } from "@/game/ui/PodiumOverlay"; import { GeneratedCard, CardBack as GeneratedCardBack } from "@/game/components/GeneratedCard"; import { MiniGame } from "@/game/components/MiniGame"; import { DraggableCard } from "@/game/components/DraggableCard"; import { rollMiniGame, type MiniGameLevel } from "@/game/utils/miniGameUtils"; import { triggerPerquisitionAlert } from "@/game/utils/alertSound"; import { SOLO_MINI_GAME_LEVEL_KEY, SOLO_MINI_GAME_DIFFICULTY_KEY, type MiniGameDifficulty } from "@/game/components/MultiplayerModal"; import { trpc } from "@/lib/trpc"; import { getAvatarDisplay } from "@/game/utils/avatarConfig"; import { BadgeVisual } from "@/components/BadgeVisuals"; import { MusicControl } from "@/game/components/MusicControl"; import { MusicPlayerPage } from "@/game/components/MusicPlayerPage"; import { useGameAuth } from "@/hooks/useGameAuth"; const FONT_BANGERS: React.CSSProperties = { fontFamily: "'Bangers', cursive" }; const FONT_FREDOKA: React.CSSProperties = { fontFamily: "'Fredoka One', cursive" }; // ── Palette de couleurs assignée par ordre de jeu ────────── const PLAYER_COLOR_PALETTE = [ { text: "#fb923c", bg: "rgba(249,115,22,0.13)", border: "rgba(249,115,22,0.3)", dot: "#f97316" }, // orange { text: "#4ade80", bg: "rgba(34,197,94,0.13)", border: "rgba(34,197,94,0.3)", dot: "#22c55e" }, // green { text: "#c084fc", bg: "rgba(168,85,247,0.13)", border: "rgba(168,85,247,0.3)", dot: "#a855f7" }, // purple { text: "#f472b6", bg: "rgba(236,72,153,0.13)", border: "rgba(236,72,153,0.3)", dot: "#ec4899" }, // pink { text: "#2dd4bf", bg: "rgba(20,184,166,0.13)", border: "rgba(20,184,166,0.3)", dot: "#14b8a6" }, // teal { text: "#facc15", bg: "rgba(234,179,8,0.13)", border: "rgba(234,179,8,0.3)", dot: "#eab308" }, // yellow { text: "#f87171", bg: "rgba(239,68,68,0.13)", border: "rgba(239,68,68,0.3)", dot: "#ef4444" }, // red ]; // Couleur fixe pour le joueur local : bleu const MY_COLOR = { text: "#60a5fa", bg: "rgba(59,130,246,0.14)", border: "rgba(59,130,246,0.35)", dot: "#3b82f6" }; // ──────────────────────────────────────────────────────────── // Utilitaire : trouver le prochain joueur actif (T3 sans avancement de tour) // ──────────────────────────────────────────────────────────── function getNextActivePlayerId(s: Session, currentPlayerId: string): string | null { const n = s.turnOrder.length; const currentIdx = s.turnOrder.indexOf(currentPlayerId); if (currentIdx === -1 || n <= 1) return null; const eliminated = s.eliminatedPlayers ?? []; let nextIdx = (currentIdx + 1) % n; let attempts = 0; while (eliminated.includes(s.turnOrder[nextIdx]) && attempts < n) { nextIdx = (nextIdx + 1) % n; attempts++; } const nextId = s.turnOrder[nextIdx]; return nextId !== currentPlayerId ? nextId : null; } const POLL_INTERVAL = 2500; const TOTAL_CARDS = 324; const DEFAULT_ELIMINATION_THRESHOLD = 10_000; // remplacé par session.eliminationThreshold // ── Registre runtime des cartes personnalisées multijoueur ── const mpCustomCardRegistry = new Map(); const mpCustomMefaitRegistry = new Map(); function loadMpCustomCards(cards: Array<{ id: number; category: string; mefait: string | null; ticketPrice: number; frais: number; impots: number; taxe: number; }>): void { mpCustomCardRegistry.clear(); mpCustomMefaitRegistry.clear(); for (const card of cards) { const cat = card.category as "contravention" | "contribuable" | "investisseur"; const isT3 = cat === "investisseur"; const isT2 = cat === "contribuable"; const cardType = isT3 ? 3 : isT2 ? 2 : 1; const cfg: CardConfig = { id: -card.id, category: cat, cardType, ticketPrice: card.ticketPrice, frais: card.frais, impots: card.impots, taxe: card.taxe, } as unknown as CardConfig; mpCustomCardRegistry.set(-card.id, cfg); // Texte méfait : soit le texte personnalisé, soit le texte par défaut investisseur if (card.mefait) { mpCustomMefaitRegistry.set(-card.id, card.mefait); } else if (cat === "investisseur") { mpCustomMefaitRegistry.set(-card.id, "Ticket au prochain criminel"); } } } function getCardConfigMp(id: number): CardConfig { if (id < 0) { const custom = mpCustomCardRegistry.get(id); if (custom) return custom; } return getCardConfig(id); } function getMpCustomMefait(id: number): string | undefined { if (id < 0) return mpCustomMefaitRegistry.get(id); return undefined; } function computePlayerTotalMp(cardIds: number[]): number { return cardIds.reduce((sum, id) => sum + drawerNetAmount(getCardConfigMp(id)), 0); } // ──────────────────────────────────────────────────────────── // Icône main SVG // ──────────────────────────────────────────────────────────── function HandIcon({ size = 20 }: { size?: number }) { return ( ); } // ──────────────────────────────────────────────────────────── // TurnNotification — bulle centrale animée // ──────────────────────────────────────────────────────────── function TurnNotification({ isMe, myName, currentName, onDismiss, myAvatarDisplay: myAvatarDisplayProp, currentAvatarDisplay: currentAvatarDisplayProp, myPlayerId, currentPlayerId, guestEmojis: guestEmojisProp, }: { isMe: boolean; myName: string; currentName: string; onDismiss?: () => void; myAvatarDisplay?: { type: "emoji" | "image" | "default"; content: string } | null; currentAvatarDisplay?: { type: "emoji" | "image" | "default"; content: string } | null; myPlayerId?: string; currentPlayerId?: string; guestEmojis?: Record; }) { // Résoudre l'emoji en interne avec un state local pour se mettre à jour dynamiquement // Les avatars sont résolus directement dans le parent (guestEmojis inclus) // On utilise les props directement pour éviter les décalages de timing const myAvatarDisplay = myAvatarDisplayProp ?? null; const currentAvatarDisplay = currentAvatarDisplayProp ?? null; return ( {/* Corps */}
{isMe ? ( <> {/* Avatar du joueur local */}
{myAvatarDisplay?.type === "emoji" ? ( {myAvatarDisplay.content} ) : myAvatarDisplay?.type === "image" ? ( ) : ( {(myName || "?")[0].toUpperCase()} )}
{myName} À TON TOUR D'AVOIR UN TICKET D'ACCORD ) : ( <> C'est le tour de {/* Avatar du joueur actif (vue spectateur) */}
{currentAvatarDisplay?.type === "emoji" ? ( {currentAvatarDisplay.content} ) : currentAvatarDisplay?.type === "image" ? ( ) : ( {(currentName || "?")[0].toUpperCase()} )}
{currentName.toUpperCase()} )}
); } // ──────────────────────────────────────────────────────────── // EliminationBanner — overlay si je suis éliminé // ──────────────────────────────────────────────────────────── function EliminationBanner({ name, threshold, activePlayers, }: { name: string; threshold: number; activePlayers: number; }) { return (
ÉLIMINÉ — mode spectateur
{name} · seuil {formatPrice(threshold)} atteint
{activePlayers > 0 && (
{activePlayers} restant{activePlayers > 1 ? "s" : ""}
)}
); } // ──────────────────────────────────────────────────────────── // ConfirmResetModal // ──────────────────────────────────────────────────────────── function ConfirmResetModal({ onConfirm, onCancel, loading, deckTotal, }: { onConfirm: () => void; onCancel: () => void; loading: boolean; deckTotal: number; }) { return createPortal( e.stopPropagation()} >
MÉLANGER LE DECK ?

Les {deckTotal} cartes seront remises dans le deck, mélangées et les éliminations seront effacées.

{loading ? "MÉLANGE..." : "OUI, MÉLANGER"} Annuler
, document.body ); } // ──────────────────────────────────────────────────────────── // PrisonBars — grilles de prison SVG animées // ──────────────────────────────────────────────────────────── function PrisonBars() { return ( {[30, 70, 110, 150, 170].map((x, i) => ( ))} ); } // ──────────────────────────────────────────────────────────── // EliminationPauseOverlay — overlay pour le joueur éliminé // ──────────────────────────────────────────────────────────── function EliminationPauseOverlay({ playerName, total, threshold, myCardsCount, lastCardNum, onAcknowledge, isAcknowledging, skinId, }: { playerName: string; total: number; threshold: number; myCardsCount: number; lastCardNum?: number | null; onAcknowledge: () => void; isAcknowledging: boolean; skinId?: string; }) { const [showLastCard, setShowLastCard] = useState(false); return ( {/* Grilles animées en arrière-plan */}
{/* Conteneur centré — évite le débordement sur mobile */}
{/* Icône prison */}
{/* Titre */}
TU VAS EN PRISON !
{playerName} — éliminé
{/* Carte récap dette */}
TON BILAN
Dette totale {formatPrice(total)}
Limite d'élimination {formatPrice(threshold)}
Cartes piochées {myCardsCount} ticket{myCardsCount > 1 ? "s" : ""}
{/* Message spectateur */} Appuie sur le bouton pour devenir spectateur
et laisser la partie continuer. {/* Bouton voir le dernier ticket */} {lastCardNum != null && ( setShowLastCard(true)} className="w-full py-3.5 bg-[#1a083d] border-[4px] border-purple-500 rounded-2xl flex items-center justify-center gap-2" style={{ ...FONT_BANGERS, fontSize: "1.05rem", letterSpacing: "0.06em", color: "#c084fc", boxShadow: "4px 4px 0px #000" }} > VOIR LE DERNIER TICKET )} {/* Bouton terminer */} {isAcknowledging ? "EN COURS..." : <> FINIR MES JOURS EN PRISON} {/* ── Modal dernier ticket ── */} {showLastCard && lastCardNum != null && ( setShowLastCard(false)} > e.stopPropagation()} >
DERNIER TICKET RECU
setShowLastCard(false)} className="px-8 py-3 bg-purple-600 border-[4px] border-black rounded-2xl flex items-center gap-2" style={{ ...FONT_BANGERS, fontSize: "1.1rem", letterSpacing: "0.06em", color: "#fff", boxShadow: "4px 4px 0px #000" }} > FERMER )}
{/* fin conteneur centré */} ); } // ──────────────────────────────────────────────────────────── // GamePausedOverlay — notification compacte fixe au centre pour les autres joueurs // ──────────────────────────────────────────────────────────── function GamePausedOverlay({ eliminatedName, eliminatedTotal, gameFinished = false }: { eliminatedName: string; eliminatedTotal: number; gameFinished?: boolean }) { return (
{/* Barre top — titre + icône */}
PARTIE EN PAUSE
{/* Corps — nom du joueur + dette */}
{/* Avatar prison */}
{/* Texte */}
{eliminatedName.toUpperCase()}
va en prison…
{/* Dette totale */}
{formatPrice(eliminatedTotal)} de dette
{/* Footer — attente */}
{gameFinished ? `En attente que ${eliminatedName} confirme avant l'annonce du gagnant…` : `En attente que ${eliminatedName} confirme…`}
); } // ──────────────────────────────────────────────────────────── // MyTicketsPanel — panneau "Mes tickets" // ──────────────────────────────────────────────────────────── function MyTicketsPanel({ cards, playerName, receivedDebt = 0, receivedCards = [], isEliminated = false, threshold = 10_000, disabledCardTypes = [], onClose, session, myPlayerId, miniGameHistory = [], skinId, }: { cards: number[]; playerName: string; receivedDebt?: number; receivedCards?: number[]; isEliminated?: boolean; threshold?: number; disabledCardTypes?: number[]; onClose: () => void; session?: Session | null; myPlayerId?: string; miniGameHistory?: Array<{ success: boolean; amount: number; turnLabel: string }>; skinId?: string; }) { const [activeTab, setActiveTab] = useState("contravention"); const [focusedCard, setFocusedCard] = useState(null); const [focusedIsReceived, setFocusedIsReceived] = useState(false); const [showHistory, setShowHistory] = useState(false); const myDrawerTotal = computePlayerTotalMp(cards); // receivedDebt = session.playerDebts[playerId] qui contient DÉJÀ les deltas de perquisitions // (appliqués via addDebt() côté serveur Supabase). Ne pas recalculer miniGameBonus ici. const totalPrice = myDrawerTotal + receivedDebt; const tabCards = filterByCategory(cards, activeTab); const validReceivedCards = receivedCards.filter(id => id !== 0); // Filtrer les IDs invalides const tabReceivedCards = activeTab === "investisseur" ? validReceivedCards : []; const catInfo = CATEGORY_INFO[activeTab]; const allTabCards = [...tabCards, ...tabReceivedCards]; const zoomedIdx = focusedCard !== null ? allTabCards.indexOf(focusedCard) : -1; const isOverThreshold = totalPrice >= threshold; // ── Lookup: pour chaque carte T3 piochée, qui l'a reçue ? ── const t3ReceiverMap: Record = {}; if (session && myPlayerId) { session.turnOrder.forEach(pid => { if (pid !== myPlayerId) { const theirReceived = session.playerReceivedCards?.[pid] ?? []; theirReceived.forEach(cardNum => { if (cards.includes(cardNum)) { const receiver = session.players.find(p => p.id === pid); if (receiver) t3ReceiverMap[cardNum] = receiver.name; } }); } }); } // ── Lookup: pour chaque carte T3 reçue, qui l'a envoyée ? ── const t3SenderMap: Record = {}; if (session && myPlayerId) { const myReceived = validReceivedCards; session.turnOrder.forEach(pid => { if (pid !== myPlayerId) { const theirCards = session.playerCards?.[pid] ?? []; theirCards.forEach(cardNum => { if (myReceived.includes(cardNum)) { const sender = session.players.find(p => p.id === pid); if (sender) t3SenderMap[cardNum] = sender.name; } }); } }); } // ── Construire l'historique enrichi ─────────────────────── const historyEntries = (() => { let running = 0; // Cartes piochées const drawnEntries = cards.map((cardNum, i) => { const cfg = getCardConfigMp(cardNum); const net = drawerNetAmount(cfg); running += net; return { idx: i + 1, cardNum, category: cfg.category as "contravention"|"contribuable"|"investisseur", cardType: cfg.cardType, ticketPrice: cfg.ticketPrice ?? 0, frais: cfg.frais ?? 0, impots: cfg.impots ?? 0, taxe: cfg.taxe ?? 0, amountSent: nextPlayerAmount(cfg), receiverName: t3ReceiverMap[cardNum] ?? "", net, runningTotal: running, isReceived: false, }; }); // Cartes T3 reçues const receivedEntries = validReceivedCards.map((cardNum, i) => { const cfg = getCardConfigMp(cardNum); const amt = nextPlayerAmount(cfg); running += amt; return { idx: cards.length + i + 1, cardNum, category: "investisseur" as const, cardType: 3 as const, ticketPrice: cfg.ticketPrice ?? 0, frais: 0, impots: 0, taxe: cfg.taxe ?? 0, amountSent: 0, receiverName: "", senderName: t3SenderMap[cardNum] ?? "", net: amt, runningTotal: running, isReceived: true, }; }); // Ajouter les perquisitions de groupe const raidEntries = ((session as any)?.groupMiniGameHistory || []).map((game: any, i: number) => { const totalDelta = game.results.reduce((sum: number, r: any) => sum + (r.success ? -r.amount : r.amount), 0); running += totalDelta; return { idx: cards.length + validReceivedCards.length + i + 1, type: "raid", triggeredByName: game.triggeredByName, results: game.results, delta: totalDelta, runningTotal: running, timestamp: game.timestamp, }; }); // Fusionner et trier par timestamp const allEntries = [...drawnEntries, ...receivedEntries, ...raidEntries]; // Ajouter des timestamps aux cartes (ordre d'ajout) allEntries.forEach((entry, idx) => { if (!entry.timestamp) { entry.timestamp = idx * 1000; } }); // Trier par timestamp allEntries.sort((a, b) => (a.timestamp || 0) - (b.timestamp || 0)); // Recalculer les running totals let recalcRunning = 0; allEntries.forEach((entry) => { if (entry.isReceived || entry.cardNum) { recalcRunning += entry.net || 0; } else if (entry.type === "raid") { recalcRunning += entry.delta || 0; } entry.runningTotal = recalcRunning; }); return allEntries; })(); return ( e.stopPropagation()} > {/* Header */}
{isEliminated ? : }
{isEliminated ? "ÉLIMINÉ" : "MES TICKETS"}
{playerName}
{cards.length}
{/* Bouton Historique */} setShowHistory(v => !v)} className={`w-9 h-9 border-[3px] border-black rounded-full flex items-center justify-center transition-colors ${ showHistory ? "bg-yellow-400" : "bg-white/15" }`} style={{ boxShadow: "2px 2px 0px #000" }} title="Historique des dettes" >
{/* ── Dette totale + limite ── */}
Dette totale {formatPrice(totalPrice)}
Limite {formatPrice(threshold)}
{/* ── VUE HISTORIQUE ── */} {showHistory ? (
{/* Titre */}
HISTORIQUE DES DETTES {historyEntries.length} entrée{historyEntries.length > 1 ? "s" : ""}
{historyEntries.length === 0 ? (

Aucun ticket pour l'instant…

) : ( <> {/* ── CARTES UNIQUEMENT ── */} {historyEntries.filter((e: any) => e.cardNum !== undefined).map((entry, i) => { const overLimit = entry.runningTotal >= threshold; // ── T1 Contravention (jaune) ────────────────── if (entry.category === "contravention") { const hasFreis = entry.frais > 0; return (
{hasFreis ? ( Ticket {formatPrice(entry.ticketPrice)} {" + Frais "} {formatPrice(entry.frais)} {" = "} {formatPrice(entry.ticketPrice + entry.frais)} ) : ( Ticket {formatPrice(entry.ticketPrice)} )}
); } // ── T2 Contribuable (vert) ───────────────────── if (entry.category === "contribuable") { const hasReduction = entry.impots > 0; return (
0 $ {hasReduction && ( – Réduction impôts {formatPrice(entry.impots)} )}
); } // ── T3 Investisseur REÇUE (rose) ─────────────── if (entry.isReceived) { const total = (entry.ticketPrice) + (entry.taxe); return (
Ticket investisseur reçu{entry.senderName ? <> de {entry.senderName} : ""}
+{formatPrice(total)} ajouté à ta dette
{entry.taxe > 0 && (
Prix {formatPrice(entry.ticketPrice)} + Taxe {formatPrice(entry.taxe)}
)}
); } // ── T3 Investisseur ENVOYÉE (mauve) ──────────── if (entry.category === "investisseur" && !entry.isReceived) { const totalSent = entry.amountSent; // ticketPrice + taxe return (
Ticket investisseur envoyé{entry.receiverName ? <> à {entry.receiverName} : ""}
-{formatPrice(totalSent)} remboursé sur ta dette
{entry.taxe > 0 && (
Prix {formatPrice(entry.ticketPrice)} + Taxe {formatPrice(entry.taxe)}
)}
); } return null; })} {/* ── SÉPARATION : CARTES vs PERQUISITIONS ── */}
{/* Titre des perquisitions */} {historyEntries.filter((e: any) => e.type === "raid").length > 0 && (
HISTORIQUE DES PERQUISITIONS
)} {/* ── PERQUISITIONS UNIQUEMENT ── */} {historyEntries.filter((e: any) => e.type === "raid").map((entry, idx) => { return (
Perquisition de groupe {" — "} {entry.delta > 0 ? "+" : ""}{formatPrice(entry.delta)}
); })} {/* Entrées de perquisition personnelles — avec tri optionnel */} {miniGameHistory.length > 0 && (
Perquisitions
)} {miniGameHistory.map((mg, i) => (
Perquisition — {mg.success ? ( <>Réduction {formatPrice(mg.amount)} ) : ( <>Ticket {formatPrice(mg.amount)} )}
{mg.turnLabel}
 ))} {/* Récapitulatif final — SUPPRIMÉ (déjà affiché en haut du panneau) */} )}
) : ( <>{/* Onglets catégories — nouveau design segmenté */}
{CATEGORY_ORDER.filter((cat) => { // Masquer les catégories dont le type est désactivé if (cat === "contribuable" && disabledCardTypes.includes(2)) return false; if (cat === "investisseur" && disabledCardTypes.includes(3)) return false; return true; }).map((cat, catIdx, visibleCats) => { const info = CATEGORY_INFO[cat]; const count = filterByCategory(cards, cat).length + (cat === "investisseur" ? validReceivedCards.length : 0); const isActive = activeTab === cat; const isLast = catIdx === visibleCats.length - 1; return ( setActiveTab(cat)} className={`flex-1 relative flex flex-col items-center justify-center py-3 overflow-hidden ${!isLast ? "border-r-[3px] border-black" : ""}`} style={{ background: isActive ? info.color : "rgba(255,255,255,0.05)" }} > {isActive && ( )} {info.label}
0 ? info.color : "#374151") }} > 0 ? (cat === "contravention" ? "text-black" : "text-white") : "text-white/40")} > {count}
); })}
{/* Séparateur */}
{/* Sous-total */}
{catInfo.label} — {tabCards.length + tabReceivedCards.length} ticket{(tabCards.length + tabReceivedCards.length) > 1 ? "s" : ""} {formatPrice(computePlayerTotalMp(tabCards) + (activeTab === "investisseur" ? receivedDebt : 0))}
{/* Grille de cartes */}
{tabCards.length === 0 && tabReceivedCards.length === 0 ? (

Aucun ticket {catInfo.label.toLowerCase()} pour l'instant…

) : ( {/* Cartes piochées */} {tabCards.length > 0 && (
{tabReceivedCards.length > 0 && (
Mes cartes piochées
)}
{tabCards.map((cardNum, idx) => { const cfg = getCardConfigMp(cardNum); const net = drawerNetAmount(cfg); const bgC = cfg.cardType === 2 ? "#16A34A" : cfg.cardType === 3 ? "#7C3AED" : catInfo.color; const ti = TYPE_INFO[cfg.cardType]; return ( { setFocusedCard(cardNum); setFocusedIsReceived(false); }} className="relative rounded-xl border-[3px] overflow-hidden cursor-pointer" style={{ aspectRatio: "5/7", boxShadow: "4px 4px 0px #000", background: "#0c1a4e", borderColor: cfg.cardType === 2 ? "#16A34A" : cfg.cardType === 3 ? "#7C3AED" : "#000", minHeight: "120px", }} >
{net >= 0 ? "+" : ""}{formatPrice(net)}
{ti.shortLabel}
); })}
)} {/* Cartes T3 reçues */} {tabReceivedCards.length > 0 && (
Reçues d'un autre joueur ({tabReceivedCards.length})
{tabReceivedCards.map((cardNum, idx) => { const cfg = getCardConfigMp(cardNum); const nextAmt = nextPlayerAmount(cfg); return ( { setFocusedCard(cardNum); setFocusedIsReceived(true); }} className="relative rounded-xl overflow-hidden cursor-pointer" style={{ aspectRatio: "5/7", border: "3px solid #EC4899", boxShadow: "4px 4px 0px #000", background: "#0c1a4e", minHeight: "120px", }} >
+{formatPrice(nextAmt)}
REÇU
); })}
)} )}
)} {/* Safe area bottom */}
{/* Vue zoom d'une carte */} {focusedCard !== null && (() => { const cfg = getCardConfigMp(focusedCard); const net = drawerNetAmount(cfg); const nextAmt = nextPlayerAmount(cfg); const ti = TYPE_INFO[cfg.cardType]; const headerBg = focusedIsReceived ? "#EC4899" : ti.color; const fCatInfo = CATEGORY_INFO[cfg.category]; return ( { setFocusedCard(null); setFocusedIsReceived(false); }} > e.stopPropagation()} >
e.stopPropagation()} >
{focusedIsReceived && } {focusedIsReceived ? "REÇUE" : ti.shortLabel} — #{String(focusedCard).padStart(3, "0")}
{fCatInfo.label}
{focusedIsReceived ? ( <>
Dette reçue{focusedCard !== null && t3SenderMap[focusedCard] ? <> de {t3SenderMap[focusedCard]} : ""} +{formatPrice(nextAmt)}
Ticket de base +{formatPrice(cfg.ticketPrice ?? 0)}
{(cfg.taxe ?? 0) > 0 && (
Taxe incluse +{formatPrice(cfg.taxe ?? 0)}
)} ) : ( <>
Effet sur toi = 0 ? "text-red-400" : "text-green-400"}> {net >= 0 ? "+" : ""}{formatPrice(net)}
{nextAmt > 0 && (
Joueur suivant +{formatPrice(nextAmt)}
)} )}
{/* Navigation */}
e.stopPropagation()}> { if (zoomedIdx > 0) { const prev = allTabCards[zoomedIdx - 1]; setFocusedCard(prev); setFocusedIsReceived(tabReceivedCards.includes(prev)); } }} disabled={zoomedIdx <= 0} className="w-12 h-12 bg-white/10 border-[2px] border-white/20 rounded-xl flex items-center justify-center text-white/60 disabled:opacity-20" > {zoomedIdx + 1} / {allTabCards.length} { if (zoomedIdx < allTabCards.length - 1) { const next = allTabCards[zoomedIdx + 1]; setFocusedCard(next); setFocusedIsReceived(tabReceivedCards.includes(next)); } }} disabled={zoomedIdx >= allTabCards.length - 1} className="w-12 h-12 bg-white/10 border-[2px] border-white/20 rounded-xl flex items-center justify-center text-white/60 disabled:opacity-20" > { setFocusedCard(null); setFocusedIsReceived(false); }} className="w-12 h-12 bg-red-500 border-[3px] border-black rounded-full flex items-center justify-center ml-1" style={{ boxShadow: "3px 3px 0px #000" }} >
); })()} ); } // ──────────────────────────────────────────────────────────── // MultiplayerGameScreen — écran principal // ──────────────────────────────────────────────────────────── export function MultiplayerGameScreen() { const [, navigate] = useLocation(); const { code, playerId, playerName, isHost, guestEmoji } = mpStorage.load(); const { isAuthenticated } = useGameAuth(); // ─ Statistiques de jeu ─ const recordResultMutation = trpc.stats.recordResult.useMutation(); const statsRecordedRef = useRef(false); const endGameMutation = trpc.badges.endGame.useMutation(); const badgesRecordedRef = useRef(false); const [session, setSession] = useState(null); const [error, setError] = useState(""); const [isDrawing, setIsDrawing] = useState(false); const [isResetting, setIsResetting] = useState(false); const [showNotif, setShowNotif] = useState(false); const [showCard, setShowCard] = useState(true); const [showCardFront, setShowCardFront] = useState(true); // false = dos, true = face const [showMyTickets, setShowMyTickets] = useState(false); const [showConfirmReset, setShowConfirmReset] = useState(false); const [showConfirmLeave, setShowConfirmLeave] = useState(false); const [showMusicPlayer, setShowMusicPlayer] = useState(false); const [justEliminated, setJustEliminated] = useState(null); // kept for flash notif minor uses const [isEndingTurn, setIsEndingTurn] = useState(false); // State séparé pour la fin de tour après perquisition — indépendant de isEndingTurn const [isEndingTurnPerquisition, setIsEndingTurnPerquisition] = useState(false); const isEndingTurnPerquisitionRef = useRef(false); const [bubbleCard, setBubbleCard] = useState<{ cardNum: number; playerName: string; playerId?: string } | null>(null); const [showPrevCard, setShowPrevCard] = useState(false); // ─ Masquer la carte (pour les non-actifs) ─ const [cardHiddenByViewer, setCardHiddenByViewer] = useState(false); // ─ Élimination avec pause ─ const [showMyEliminationOverlay, setShowMyEliminationOverlay] = useState(false); const [isAcknowledging, setIsAcknowledging] = useState(false); const prevPendingAck = useRef([]); // ─ Ref emoji persistant (local + serveur) pour éviter les flashs dans les notifs ─ const myEmojiRef = useRef(guestEmoji || ""); const [myEmojiResolved, setMyEmojiResolved] = useState(guestEmoji || ""); // ─ Flux carte T3 investisseur ─ const [pendingT3, setPendingT3] = useState<{ nextPlayerId: string; nextAmt: number; taxAmt: number; nextPlayerName: string; totalRefund: number; } | null>(null); const [isSendingT3, setIsSendingT3] = useState(false); // Modal de sélection du destinataire T3 const [showT3TargetModal, setShowT3TargetModal] = useState(false); const [t3ConfirmTarget, setT3ConfirmTarget] = useState(null); const [showTaxNotif, setShowTaxNotif] = useState<{ amount: number } | null>(null); const prevT3ReceivedRef = useRef>({}); // pid -> count (conservé pour usage futur) const [showReceivedTicketNotif, setShowReceivedTicketNotif] = useState<{ amount: number; fromName: string; } | null>(null); // Notification spectateur : "X envoie un ticket à Y" (pour les joueurs non impliqués) const [showT3SpectatorNotif, setShowT3SpectatorNotif] = useState<{ senderName: string; receiverName: string; senderId: string; receiverId: string; } | null>(null); // ref gardée mais plus utilisée pour la détection const t3NotifReceiverCountRef = useRef(0); // ─ Notification "joueur a quitté/été expulsé" ─ const [playerLeftNotif, setPlayerLeftNotif] = useState<{ playerName: string; wasKicked: boolean; } | null>(null); const playerLeftTimeout = useRef | null>(null); const lastRecentLeaveTs = useRef(0); // timestamp déjà affiché // ─ Modal d'expulsion (host) ─ const [showKickModal, setShowKickModal] = useState(false); const [showTransactionDrawer, setShowTransactionDrawer] = useState(false); const [isKicking, setIsKicking] = useState(false); // ─ Dropdown joueurs ─ const [showPlayerDropdown, setShowPlayerDropdown] = useState(false); const [showHistoryPanel, setShowHistoryPanel] = useState(false); // ─ Podium classement final ─ const [showPodium, setShowPodium] = useState(false); // ─ Perquisition (synchronisée via tRPC) ─ // Mode du mini-jeu en cours pour CE joueur (null = pas de mini-jeu) const [miniGameMode, setMiniGameMode] = useState<"run" | "hide" | null>(null); // ID de l'événement mini-jeu en cours const [miniGameEventId, setMiniGameEventId] = useState(null); // Nombre total de joueurs actifs pour ce mini-jeu const [miniGameTotalPlayers, setMiniGameTotalPlayers] = useState(0); // Le joueur qui a déclenché le mini-jeu attend que tous aient terminé const [waitingForAllPlayers, setWaitingForAllPlayers] = useState(false); // ID du joueur qui a déclenché le mini-jeu (pour savoir qui doit attendre) const [miniGameTriggeredBy, setMiniGameTriggeredBy] = useState(null); const miniGameTriggeredByRef = useRef(null); // Ref pour éviter les problèmes de closure dans fetchMiniGameStatus // Résultats de la Perquisition (affichés après résolution) const [miniGameResultsData, setMiniGameResultsData] = useState | null>(null); // Phase d'alerte perquisition : "trigger-alert" (piocheur voit message) | "common-alert" (tous voient message) | null const [miniGameAlertPhase, setMiniGameAlertPhase] = useState<"trigger-alert" | "common-alert" | null>(null); // Mode du mini-jeu en attente (avant que le joueur clique PAS LE CHOIX) const [pendingMiniGameMode, setPendingMiniGameMode] = useState<"run" | "hide" | null>(null); // Vrai si une perquisition a eu lieu ce tour → le joueur actif ne pioche pas const [miniGameSkippedDraw, setMiniGameSkippedDraw] = useState(false); // Ref miroir de miniGameSkippedDraw pour éviter les problèmes de stale closure dans handleEndTurn const miniGameSkippedDrawRef = useRef(false); // Historique des perquisitions pour l'affichage dans "Mes tickets" et le journal const [miniGameHistory, setMiniGameHistory] = useState>([]); // Historique de groupe des perquisitions (pour le journal de partie) const [groupMiniGameHistory, setGroupMiniGameHistory] = useState; timestamp: number }>>([]); const miniGamePollRef = useRef | null>(null); const miniGameStatusPollRef = useRef | null>(null); // Refs pour stocker la version la plus récente des fonctions de polling (évite les stale closures) const fetchActiveMiniGameRef = useRef<() => Promise>(async () => {}); const fetchMiniGameStatusRef = useRef<() => Promise>(async () => {}); const lastMiniGameId = useRef(null); const resolvedMiniGameIds = useRef>(new Set()); // IDs des événements déjà résolus — ignorés par fetchActiveMiniGame const drawsSinceLastMiniGameRef = useRef(0); // Compteur de tirages depuis la dernière perquisition const trpcUtils = trpc.useUtils(); const triggerMiniGame = trpc.miniGame.trigger.useMutation(); const submitMiniGameResult = trpc.miniGame.submitResult.useMutation(); const resolveMiniGame = trpc.miniGame.resolve.useMutation(); // Historique des perquisitions résolues depuis la DB (source de vérité) // Intervalle augmenté à 4000ms (au lieu de 3000ms) : l'historique des perquisitions // n'est pas critique en temps réel (affiché dans un panneau secondaire) const miniGameHistoryQuery = trpc.miniGame.getHistory.useQuery( { sessionCode: code ?? "" }, { enabled: !!(code), refetchInterval: 4000, staleTime: 0 }, ); const dbMiniGameHistory = miniGameHistoryQuery.data ?? []; // ─ Options de session (skins + extensions) — chargées depuis la DB du host ─ // IMPORTANT : staleTime: 0 pour forcer une lecture fraîche à chaque fois // refetchInterval: 1000 pour mettre à jour la difficulté toutes les 1 seconde // Intervalle augmenté à 2000ms (au lieu de 1000ms) : les options de session changent rarement // pendant une partie, et réduire la fréquence allège la charge réseau avec 10 joueurs const sessionOptionsQuery = trpc.sessionOptions.getOptions.useQuery( { sessionCode: code ?? "" }, { enabled: !!(code), refetchOnWindowFocus: false, staleTime: 0, refetchInterval: 2000 }, ); const sessionSkinsEnabled = sessionOptionsQuery.data?.skinsEnabled ?? false; const sessionSkinMode = sessionOptionsQuery.data?.skinMode ?? "off"; // Options de perquisition depuis notre DB (source de vérité, car Supabase ne retourne pas ces champs) const sessionMiniGameLevel = (sessionOptionsQuery.data?.miniGameLevel ?? null) as MiniGameLevel | null; const sessionMiniGameDifficulty = sessionOptionsQuery.data?.miniGameDifficulty ?? null; const sessionMiniGameEnabled = sessionOptionsQuery.data?.miniGameEnabled ?? null; // Fonction pour obtenir la difficulté actuelle (lue à chaque utilisation, pas de cache) const getMultiplayerMiniGameDifficulty = (): MiniGameDifficulty => { // Priorité : notre DB (sessionMiniGameDifficulty) > Supabase > localStorage > défaut const raw = sessionMiniGameDifficulty ?? session?.miniGameDifficulty ?? localStorage.getItem(SOLO_MINI_GAME_DIFFICULTY_KEY) ?? "tranquille"; return (raw === "hardcore" ? "hardcore" : "tranquille") as MiniGameDifficulty; }; // ── Historique par tour - optimisé avec useMemo ── const mpGlobalHistoryTours = useMemo(() => { if (!session || !session.playerCards || Object.keys(session.playerCards).length === 0) return []; const tours: any[] = []; const counts: Record = {}; session.turnOrder.forEach((pid: string) => { counts[pid] = ((session as any).playerCards?.[pid] ?? []).length; }); const maxCards = Math.max(...Object.values(counts), 0); for (let t = 0; t < maxCards; t++) { const txs: any[] = []; session.turnOrder.forEach((pid: string) => { const cards = ((session as any).playerCards?.[pid] ?? []); if (t < cards.length) { const name = session.players.find((p: any) => p.id === pid)?.name ?? "?"; const cfg = getCardConfigMp(cards[t]); const cat = CATEGORY_INFO[cfg.category]; // Pour les cartes T3 (Investisseur), afficher deux lignes : piocheur et récepteur if (cfg.category === "investisseur") { const amountSent = nextPlayerAmount(cfg); // Ligne 1 : piocheur (montant négatif = réduction de dette) txs.push({ type: "card", name, amt: -amountSent, cat, isT3Sender: true }); // Ligne 2 : récepteur (montant positif = augmentation de dette) const nextPlayerId = getNextActivePlayerId(session, pid); const receiverName = nextPlayerId ? session.players.find((p: any) => p.id === nextPlayerId)?.name ?? "?" : "?"; txs.push({ type: "card", name: receiverName, amt: amountSent, cat, isT3Receiver: true }); } else { // Pour T1 et T2, une seule ligne const amt = drawerNetAmount(cfg); txs.push({ type: "card", name, amt, cat }); } } }); if (txs.length > 0) tours.push({ num: t + 1, txs }); } return tours.reverse(); }, [session?.turnOrder, session?.playerCards, session?.players]); // ── Historique des perquisitions - source de vérité = DB via dbMiniGameHistory ── const mpGlobalHistoryRaids = useMemo(() => { if (!dbMiniGameHistory || dbMiniGameHistory.length === 0) return null; const allResults: Array<{ gameIdx: number; resultIdx: number; playerId: string; success: boolean; amount: number }> = []; dbMiniGameHistory.forEach((game: any, gIdx: number) => { if (game?.results) { game.results.forEach((result: any, rIdx: number) => { allResults.push({ gameIdx: gIdx, resultIdx: rIdx, playerId: result.playerId, success: result.success, amount: result.amount }); }); } }); return allResults.length > 0 ? allResults : null; }, [dbMiniGameHistory]); // Skin actif du joueur local (pour l'enregistrement) // Toujours charger le skin actif, même si skinsEnabled n'est pas encore confirmé // Pour les joueurs non connectés, la query échouera silencieusement (retry: false) const { data: myActiveSkinId, isError: skinQueryError, isFetched: skinQueryFetched } = trpc.skins.getActiveSkin.useQuery(undefined, { retry: false, staleTime: 60_000, }); // Skin effectif : skin actif du joueur connecté, ou "classique" par défaut pour les invités const effectiveSkinId: string = (myActiveSkinId as string | undefined) ?? "classique"; // Mutation pour enregistrer le skin du joueur local dans la session const registerPlayerSkinMutation = trpc.sessionOptions.registerPlayerSkin.useMutation(); const skinRegisteredRef = useRef(false); // Enregistrer le skin du joueur local quand la session démarre et que skinsEnabled est actif // Se déclenche dès que : sessionSkinsEnabled est true + code + playerId + skin query terminée useEffect(() => { if (!sessionSkinsEnabled || !code || !playerId) return; // Attendre que la query skin soit terminée (succès ou erreur) if (!skinQueryFetched && !skinQueryError) return; // Éviter les enregistrements multiples if (skinRegisteredRef.current) return; skinRegisteredRef.current = true; registerPlayerSkinMutation.mutate({ sessionCode: code, playerId, skinId: effectiveSkinId, }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [sessionSkinsEnabled, code, playerId, effectiveSkinId, skinQueryFetched, skinQueryError]); // Skins des joueurs : map playerId -> skinId (chargé depuis la DB) // Rafraîchir régulièrement pour détecter les skins des nouveaux joueurs const playerSkinsQuery = trpc.sessionOptions.getPlayerSkins.useQuery( { sessionCode: code ?? "" }, // Intervalle augmenté à 5000ms (au lieu de 3000ms) : les skins sont enregistrés au début // de la partie et ne changent pas pendant le jeu { enabled: !!(code) && sessionSkinsEnabled, refetchOnWindowFocus: false, staleTime: 5_000, refetchInterval: 5_000 }, ); // Map playerId -> skinId pour l'affichage des cartes const playerSkinMap: Record = (playerSkinsQuery.data as Record) ?? {}; // Identifier le host (premier joueur dans turnOrder) et son skin const hostPlayerId = session?.turnOrder?.[0] ?? ""; const hostSkinId: string | undefined = playerSkinMap[hostPlayerId] ?? undefined; // Skin du joueur local : en mode "shared", tous utilisent le skin du host const mySkinId: string | undefined = sessionSkinsEnabled ? (sessionSkinMode === "shared" ? (hostSkinId ?? effectiveSkinId) : (playerSkinMap[playerId ?? ""] ?? effectiveSkinId)) : undefined; /** Résoudre le skin d'un joueur selon le mode (shared → host skin, individual → son propre skin) */ const resolvePlayerSkin = (pid: string): string | undefined => { if (!sessionSkinsEnabled) return undefined; if (sessionSkinMode === "shared") return hostSkinId ?? "classique"; // En mode individual, utiliser le skin enregistré du joueur, ou "classique" par défaut return playerSkinMap[pid] ?? "classique"; }; const pollRef = useRef | null>(null); const prevTurnIdx = useRef(-1); const prevLastCard = useRef(null); const notifTimeout = useRef | null>(null); const elimTimeout = useRef | null>(null); const firstLoadDone = useRef(false); const prevReceivedCardCount = useRef(0); // Compteurs de retries réseau — protègent contre les faux positifs transitoires const networkErrorCount = useRef(0); // erreurs réseau consécutives const notInGameCount = useRef(0); // fois consécutives où stillInGame=false const sessionNotFoundCount = useRef(0); // fois consécutives où session introuvable // Déduplication des notifications de tour : mémorise le turnIndex déjà notifié const lastNotifTurnIdx = useRef(-1); // Clé incrémentale pour forcer AnimatePresence à remonter proprement la notif const [notifMountKey, setNotifMountKey] = useState(0); // Ref synchrone pour savoir si la notif est à l'écran (évite les closures stales) const showNotifRef = useRef(false); // Redirection si pas de session useEffect(() => { if (!code || !playerId) navigate("/"); }, []); // ── Charger les cartes personnalisées de l'hôte pour cette session ── const sessionCustomCardsQuery = trpc.sessionCustomCards.getForSession.useQuery( { sessionCode: code ?? "" }, { enabled: !!(code), refetchOnWindowFocus: false, staleTime: 60_000 }, ); useEffect(() => { if (sessionCustomCardsQuery.data) { loadMpCustomCards(sessionCustomCardsQuery.data as any); } }, [sessionCustomCardsQuery.data]); // ── Profils joueurs (avatar + badge) pour l'affichage dans le scoreboard ── const mpPlayerNames = useMemo( () => (session?.players ?? []).map((p) => p.name), // eslint-disable-next-line react-hooks/exhaustive-deps [(session?.players ?? []).map((p) => p.name).join(",")] ); const { data: mpPlayerProfiles } = trpc.gameAuth.getPlayerProfiles.useQuery( { playerNames: mpPlayerNames }, { enabled: mpPlayerNames.length > 0, staleTime: 0, refetchOnWindowFocus: false } ); // ─ Emojis des joueurs invités (sans compte) ─ // Intervalle augmenté à 3000ms (au lieu de 2000ms) : les emojis invités changent rarement // pendant la partie (enregistrés au montage), réduit la charge avec 10 joueurs const { data: guestEmojis } = trpc.guestAvatar.getEmojis.useQuery( { sessionCode: code }, { enabled: !!code, staleTime: 0, refetchInterval: 3_000, refetchOnMount: true, refetchOnWindowFocus: false } ); // Enregistrer son propre emoji au montage si on est un invité avec un emoji const setGuestEmojiMutation = trpc.guestAvatar.setEmoji.useMutation(); useEffect(() => { if (guestEmoji && playerId && code) { setGuestEmojiMutation.mutate({ sessionCode: code, playerId, emoji: guestEmoji }); } // eslint-disable-next-line react-hooks/exhaustive-deps }, []); // Mettre à jour myEmojiRef + myEmojiResolved dès que guestEmojis arrive du serveur useEffect(() => { if (!playerId) return; const serverEmoji = (guestEmojis as Record | undefined)?.[playerId]; const resolved = serverEmoji || guestEmoji || ""; if (resolved) { myEmojiRef.current = resolved; setMyEmojiResolved(resolved); } }, [guestEmojis, playerId, guestEmoji]); // Réinitialiser le masquage à chaque nouvelle carte useEffect(() => { setCardHiddenByViewer(false); }, [session?.lastCard]); const isMyTurn = useCallback( (s: Session) => s.state === "playing" && s.turnOrder[s.currentTurnIndex] === playerId, [playerId], ); /** * Affiche la notification de tour de manière idempotente. * - Ignore si ce turnIndex a déjà déclenché une notif (anti-doublon). * - Si une notif est déjà visible, coupe-la 80 ms avant de relancer * pour forcer AnimatePresence à démonter/remonter l'ancien composant. */ const triggerTurnNotif = useCallback((s: Session, forceAutoClose: boolean) => { const idx = s.currentTurnIndex; // Anti-doublon strict : même tour → on ignore if (lastNotifTurnIdx.current === idx) return; lastNotifTurnIdx.current = idx; const isMeTurn = s.turnOrder[idx] === playerId; const doShow = () => { if (notifTimeout.current) clearTimeout(notifTimeout.current); setNotifMountKey(k => k + 1); // nouveau montage = nouvelle animation d'entrée showNotifRef.current = true; setShowNotif(true); if (!isMeTurn || forceAutoClose) { // Auto-dismiss pour les spectateurs ou après handleEndTurn notifTimeout.current = setTimeout(() => { showNotifRef.current = false; setShowNotif(false); }, 2400); } }; // Attendre que guestEmojis soit chargé avant d'afficher la notif pour tout joueur invité // (joueur local sans emoji résolu OU spectateur regardant un joueur invité) const needEmojiWait = !isAuthenticated && (!myEmojiRef.current || !isMeTurn); const baseDelay = needEmojiWait ? 800 : 0; if (showNotifRef.current) { // Une notif est déjà visible → on la fait sortir proprement puis on relance if (notifTimeout.current) clearTimeout(notifTimeout.current); showNotifRef.current = false; setShowNotif(false); setTimeout(doShow, 120 + baseDelay); // laisse exit animation se jouer } else if (baseDelay > 0) { setTimeout(doShow, baseDelay); } else { doShow(); } }, [playerId, isAuthenticated, myEmojiRef]); // ── Polling ────────────────────────────────────────────── const fetchSession = useCallback(async () => { if (!code) return; try { const { session: s } = await getSession(code); setError(""); // Réinitialiser les compteurs d'erreur à chaque succès networkErrorCount.current = 0; sessionNotFoundCount.current = 0; // Si ce joueur a été expulsé (plus dans la liste des joueurs) // Protection : attendre 3 confirmations consécutives avant de naviguer // (évite les faux positifs dus à des réponses API transitoires ou en retard) if (firstLoadDone.current) { const stillInGame = s.players.some(p => p.id === playerId); if (!stillInGame) { notInGameCount.current += 1; if (notInGameCount.current >= 3) { mpStorage.clear(); navigate("/"); return; } // Pas encore confirmé — ignorer cette réponse et attendre le prochain poll return; } else { notInGameCount.current = 0; } } const turnChanged = prevTurnIdx.current !== s.currentTurnIndex; const cardChanged = prevLastCard.current !== s.lastCard; if (turnChanged || cardChanged) { setShowCard(false); setTimeout(() => setShowCard(true), 50); } // FIX: Réinitialiser miniGameSkippedDraw quand le tour change // Sinon, le joueur suivant verra "TERMINER MON TOUR" au lieu de "RECEVOIR UN TICKET" if (turnChanged) { setMiniGameSkippedDraw(false); miniGameSkippedDrawRef.current = false; // Ref miroir resolvedMiniGameIds.current.clear(); // Réinitialiser aussi les IDs résolus setMiniGameAlertPhase(null); setPendingMiniGameMode(null); // NOTE : drawsSinceLastMiniGameRef n'est PAS réinitialisé ici. // Le compteur s'accumule sur tous les tours du joueur local jusqu'à une perquisition. // Il est réinitialisé uniquement quand une perquisition se déclenche (dans handleDraw). } // Notification de changement de tour (sauf au premier chargement) if (firstLoadDone.current && turnChanged && s.state === "playing") { // Mettre à jour la bulle "carte précédente" avec la carte du joueur qui vient de terminer if (s.lastCard !== null && s.lastCardDrawnBy) { const bPlayer = s.players.find((p) => p.id === s.lastCardDrawnBy); if (bPlayer) setBubbleCard({ cardNum: s.lastCard, playerName: bPlayer.name, playerId: bPlayer.id }); } // Utiliser triggerTurnNotif pour éviter les doublons (race condition poll + handleEndTurn) triggerTurnNotif(s, false); } prevTurnIdx.current = s.currentTurnIndex; prevLastCard.current = s.lastCard; // ─ Détecter si JE suis nouvellement dans pendingEliminationAck ─ const pending = s.pendingEliminationAck ?? []; const wasInPending = prevPendingAck.current.includes(playerId); const nowInPending = pending.includes(playerId); if (!wasInPending && nowInPending) { setShowMyEliminationOverlay(true); // Fermer la notif "ticket reçu" si elle est encore affichée, // pour que l'overlay d'élimination (z-100) soit bien visible setShowReceivedTicketNotif(null); } prevPendingAck.current = pending; // ─ Détecter un nouveau ticket T3 reçu (pour le joueur destinataire) ─ const newReceivedCards = s.playerReceivedCards?.[playerId] ?? []; const newReceivedCount = newReceivedCards.length; if ( firstLoadDone.current && newReceivedCount > prevReceivedCardCount.current && s.lastCardDrawnBy !== playerId ) { // Ne pas afficher la notif "ticket reçu" pendant ou juste après une perquisition const perquisitionActive = miniGameAlertPhase !== null || miniGameMode !== null || waitingForAllPlayers || miniGameResultsData !== null; // Vérifier aussi le dernier cardId reçu : ignorer cardId=0 (perquisition auto-dette) const lastReceivedCardId = newReceivedCards[newReceivedCards.length - 1]; const isPerquisitionDebt = lastReceivedCardId === 0 || lastReceivedCardId === null || lastReceivedCardId === undefined; if (!perquisitionActive && !isPerquisitionDebt) { const drawerPlayer = s.players.find((p) => p.id === s.lastCardDrawnBy); // Ignorer cardId=0 (perquisition auto-dette) et lastCard null if (s.lastCard !== null && s.lastCard !== 0) { const cfg = getCardConfigMp(s.lastCard); const receivedAmt = nextPlayerAmount(cfg); if (receivedAmt > 0) { setShowReceivedTicketNotif({ amount: receivedAmt, fromName: drawerPlayer?.name ?? "un joueur", }); } } } } prevReceivedCardCount.current = newReceivedCount; // ─ Détecter si la carte qui vient d'être piochée est T3 (notif spectateur dès la pioche) ─ if (firstLoadDone.current && cardChanged && s.lastCard !== null) { const drawnCfg = getCardConfigMp(s.lastCard); if (drawnCfg.cardType === 3 && s.lastCardDrawnBy && s.lastCardDrawnBy !== playerId) { const nextReceiverId = getNextActivePlayerId(s, s.lastCardDrawnBy); if (nextReceiverId && nextReceiverId !== playerId) { // Je suis spectateur (ni l'envoyeur ni le receveur désigné) const senderPlayer = s.players.find((p) => p.id === s.lastCardDrawnBy); const receiverPlayer = s.players.find((p) => p.id === nextReceiverId); if (senderPlayer && receiverPlayer) { setShowT3SpectatorNotif({ senderName: senderPlayer.name, receiverName: receiverPlayer.name, senderId: senderPlayer.id, receiverId: nextReceiverId, }); } } } else if (drawnCfg.cardType !== 3) { // Nouvelle carte non-T3 piochée → fermer toute notif spectateur T3 résiduelle setShowT3SpectatorNotif(null); } } // ── Détecter si un joueur vient de quitter / être expulsé ── if ( firstLoadDone.current && s.recentLeave && s.recentLeave.timestamp > lastRecentLeaveTs.current ) { lastRecentLeaveTs.current = s.recentLeave.timestamp; // Ne pas afficher la notif pour soi-même (le joueur qui quitte navigue déjà) if (s.recentLeave.playerName !== playerName) { if (playerLeftTimeout.current) clearTimeout(playerLeftTimeout.current); setPlayerLeftNotif({ playerName: s.recentLeave.playerName, wasKicked: !!s.recentLeave.kickedBy, }); playerLeftTimeout.current = setTimeout(() => setPlayerLeftNotif(null), 5000); } } setSession(s); firstLoadDone.current = true; if (s.state === "lobby") navigate("/lobby"); // ─ Redirection globale quand le gagnant quitte ─ // Si la partie est terminée et qu'il ne reste plus qu'un seul joueur dans la session // (le gagnant a quitté), les spectateurs encore connectés sont redirigés au menu. if (s.state === "finished") { // Calculer le gagnant côté client : dernier joueur actif (non-éliminé) const activeInFinished = s.players.filter( (p: { id: string }) => !(s.eliminatedPlayers ?? []).includes(p.id) ); // Si le gagnant n'est plus dans la session et que je ne suis pas le gagnant if (activeInFinished.length === 0 && !s.players.some((p: { id: string }) => p.id === playerId)) { // Je suis un spectateur et la session est vide — retour au menu mpStorage.clear(); navigate("/"); return; } } // ─ Dernier joueur restant = gagnant automatique ─ // Si la partie est en cours et qu'il ne reste qu'un seul joueur non-éliminé, // ce joueur est déclaré gagnant côté client (les autres ont tous quitté). if (s.state === "playing") { const activePlayers = s.players.filter( (p: { id: string }) => !(s.eliminatedPlayers ?? []).includes(p.id) ); if (activePlayers.length === 1 && activePlayers[0].id === playerId) { // Je suis le dernier joueur restant — victoire automatique côté client setSession({ ...s, state: "finished" }); return; } } } catch (e: any) { if (e.message?.includes("introuvable") || e.message?.includes("expirée")) { // Protection : attendre 3 erreurs consécutives avant de naviguer // (évite les redirections sur erreur réseau temporaire ou timeout Supabase) sessionNotFoundCount.current += 1; if (sessionNotFoundCount.current >= 3) { mpStorage.clear(); navigate("/"); } else { setError("Connexion instable…"); } } else { networkErrorCount.current += 1; setError("Connexion instable…"); } } }, [code, isMyTurn, navigate, triggerTurnNotif]); useEffect(() => { fetchSession(); pollRef.current = setInterval(fetchSession, POLL_INTERVAL); return () => { if (pollRef.current) clearInterval(pollRef.current); if (notifTimeout.current) clearTimeout(notifTimeout.current); if (elimTimeout.current) clearTimeout(elimTimeout.current); if (playerLeftTimeout.current) clearTimeout(playerLeftTimeout.current); }; }, [fetchSession]); // ── Polling mini-jeu pour les spectateurs ─────────────────────────────────── // Interroge getActive toutes les 500ms pour détecter un mini-jeu déclenché par un autre joueur // Utilise trpcUtils.fetch() au lieu de raw fetch pour gérer automatiquement superjson const fetchActiveMiniGame = useCallback(async () => { if (!code || miniGameMode !== null) return; // Déjà en train de jouer un mini-jeu if (miniGameAlertPhase !== null) return; // Déjà en phase d'alerte if (waitingForAllPlayers) return; // Déjà en attente des résultats — ne pas redéclencher if (miniGameResultsData !== null) return; // Résultats en cours d'affichage — ne pas redéclencher try { const event = await trpcUtils.miniGame.getActive.fetch({ sessionCode: code }, { staleTime: 0 }); if (event && event.id !== lastMiniGameId.current && !resolvedMiniGameIds.current.has(event.id)) { lastMiniGameId.current = event.id; setMiniGameEventId(event.id); setMiniGameTriggeredBy(event.triggeredBy ?? null); miniGameTriggeredByRef.current = event.triggeredBy ?? null; setPendingMiniGameMode(event.mode); // Utiliser le totalPlayers stocké dans l'event en DB (source de vérité définie par le déclencheur) setMiniGameTotalPlayers(event.totalPlayers ?? 1); // Fermer toute notification en cours pour laisser place à la perquisition setShowReceivedTicketNotif(null); showNotifRef.current = false; setShowNotif(false); // Son d'alerte + vibration pour prévenir le joueur triggerPerquisitionAlert(); // Si c'est mon tour et que je suis le déclencheur, marquer que la pioche est remplacée if (event.triggeredBy === playerId) { setMiniGameSkippedDraw(true); miniGameSkippedDrawRef.current = true; } // Afficher le message commun ("Prêt à t'enfuir/te cacher ?") + bouton "COMMENCER" setMiniGameAlertPhase("common-alert"); } } catch (e) { // Silencieux — le polling réessaiera } }, [code, miniGameMode, miniGameAlertPhase, waitingForAllPlayers, miniGameResultsData, trpcUtils]); // Mettre à jour la ref avec la version la plus récente de fetchActiveMiniGame useEffect(() => { fetchActiveMiniGameRef.current = fetchActiveMiniGame; }, [fetchActiveMiniGame]); // Initialiser et gérer le polling du mini-jeu — utiliser useEffect avec dépendances minimales useEffect(() => { // Appel immédiat pour détection rapide fetchActiveMiniGameRef.current(); // Polling toutes les 250ms — appelle toujours la version la plus récente via la Ref miniGamePollRef.current = setInterval(() => { fetchActiveMiniGameRef.current(); }, 250); return () => { if (miniGamePollRef.current) clearInterval(miniGamePollRef.current); }; }, []); // ── Polling du statut de la Perquisition (piocheur attend tous les joueurs) ── // Ref pour tracker si on a déjà ajouté les résultats à l'historique (éviter les doublons) const miniGameHistoryProcessedRef = useRef>(new Set()); // Ref pour tracker si on a déjà appliqué la dette (éviter les appels multiples à addDebt) const miniGameDebtAppliedRef = useRef>(new Set()); // Verrou synchrone pour éviter la race condition : deux appels async simultanés qui passent // tous les deux la garde has() avant que le premier ait terminé son addDebt const miniGameDebtLockRef = useRef(false); const fetchMiniGameStatus = useCallback(async () => { if (!code || !waitingForAllPlayers || miniGameEventId === null || miniGameTotalPlayers === 0) return; try { const status = await trpcUtils.miniGame.getStatus.fetch({ sessionCode: code, eventId: miniGameEventId, totalPlayers: miniGameTotalPlayers }, { staleTime: 0 }); if (status?.allDone) { // Stopper le polling de statut immédiatement pour éviter les doubles appels if (miniGameStatusPollRef.current) { clearInterval(miniGameStatusPollRef.current); miniGameStatusPollRef.current = null; } // Tous ont terminé : résoudre et afficher les résultats setWaitingForAllPlayers(false); setMiniGameResultsData(status.results); // ── CORRECTION BUG DETTE ── // Problème : avec 10 joueurs, chaque joueur appelait addDebt pour lui-même simultanément. // Supabase fait un UPDATE JSON non-atomique : les écritures simultanées s'écrasent mutuellement. // Solution : SEUL le piocheur (déclencheur) applique les dettes de TOUS les joueurs // séquentiellement (un par un), garantissant qu'il n'y a jamais de race condition. // Les autres joueurs ne font rien ici : leur dette sera visible via le polling de session. if (status.results && session) { // Utiliser la ref pour éviter les problèmes de closure (miniGameTriggeredBy peut être null dans la closure) const isDrawer = (miniGameTriggeredByRef.current ?? miniGameTriggeredBy) === playerId; if (isDrawer && !miniGameDebtAppliedRef.current.has(miniGameEventId) && !miniGameDebtLockRef.current) { // Poser le verrou IMMEDÍATEMENT (synchrone) avant tout await miniGameDebtLockRef.current = true; miniGameDebtAppliedRef.current.add(miniGameEventId); try { // Appliquer les dettes de TOUS les joueurs séquentiellement (pas en parallèle) // pour éviter les race conditions sur le JSON Supabase let updatedSession = session; for (const r of status.results as { playerId: string; success: boolean; amount: number }[]) { const delta = r.success ? -r.amount : r.amount; try { const res = await addDebt(code, playerId, r.playerId, delta, 0); updatedSession = res.session; // Vérifier l'élimination après chaque dette positive (augmentation) if (delta > 0) { const targetPlayer = updatedSession.players.find((p: { id: string; name: string }) => p.id === r.playerId); if (targetPlayer) { updatedSession = await checkAndEliminate(updatedSession, r.playerId, targetPlayer.name); } } } catch (e) { // Silencieux pour ce joueur, continuer avec les suivants } } setSession(updatedSession); } catch (e) { // Silencieux } // Libérer le verrou après tous les appels miniGameDebtLockRef.current = false; } // Les non-piocheurs : pas d'appel addDebt ici. // Leur dette sera mise à jour via le polling fetchSession (toutes les 2s). // Ajouter les résultats à l'historique SEULEMENT si on ne l'a pas déjà fait if (!miniGameHistoryProcessedRef.current.has(miniGameEventId)) { miniGameHistoryProcessedRef.current.add(miniGameEventId); const myResult = status.results.find((r: { playerId: string; success: boolean; amount: number }) => r.playerId === playerId); if (myResult) { const turnLabel = `Tour ${session.drawn.length}`; setMiniGameHistory(prev => [...prev, { success: myResult.success, amount: myResult.amount, turnLabel }]); } // Alimenter l'historique de groupe const triggererPlayer = session.players.find((p: { id: string; name: string }) => p.id === miniGameTriggeredBy); const groupResults = status.results.map((r: { playerId: string; success: boolean; amount: number }) => { const p = session.players.find((pl: { id: string; name: string }) => pl.id === r.playerId); return { playerName: p?.name ?? r.playerId, success: r.success, amount: r.amount }; }); setGroupMiniGameHistory(prev => [...prev, { triggeredByName: triggererPlayer?.name ?? "?", results: groupResults, timestamp: Date.now(), // Stocker l'index de tirage au moment de la perquisition pour l'ordre chronologique drawnIndex: session.drawn.length, }]); } } // Marquer l'événement comme résolu et l'ajouter aux IDs résolus pour bloquer fetchActiveMiniGame if (miniGameEventId !== null) resolvedMiniGameIds.current.add(miniGameEventId); resolveMiniGame.mutateAsync({ sessionCode: code, eventId: miniGameEventId }).catch(() => {}); setMiniGameEventId(null); // miniGameSkippedDraw reste true pour que le bouton "TERMINER MON TOUR" soit disponible // Fermer les résultats après 2s SEULEMENT pour les spectateurs (pas pour le piocheur) // Le piocheur doit cliquer le bouton TERMINER MON TOUR pour fermer l'overlay const isDrawerPlayer = session?.turnOrder[session?.currentTurnIndex] === playerId; if (!isDrawerPlayer) { setTimeout(() => setMiniGameResultsData(null), 2000); } } } catch (e) { // Silencieux } }, [code, waitingForAllPlayers, miniGameEventId, miniGameTotalPlayers, resolveMiniGame, session, playerId, miniGameTriggeredBy, trpcUtils]); useEffect(() => { if (!waitingForAllPlayers) return; // Appel immédiat pour éviter d'attendre 200ms fetchMiniGameStatus(); miniGameStatusPollRef.current = setInterval(() => fetchMiniGameStatusRef.current(), 200); return () => { if (miniGameStatusPollRef.current) clearInterval(miniGameStatusPollRef.current); }; }, [waitingForAllPlayers]); // CORRECTION : Dépendance minimale pour éviter la réinitialisation du polling // Mettre à jour la ref avec la version la plus récente de fetchMiniGameStatus useEffect(() => { fetchMiniGameStatusRef.current = fetchMiniGameStatus; }, [fetchMiniGameStatus]); // ── Auto-fermeture de la notif spectateur T3 ────────────── // Se ferme quand l'envoyeur termine son tour (currentTurnIndex change) useEffect(() => { if (!showT3SpectatorNotif || !session) return; const { senderId } = showT3SpectatorNotif; const senderNoLongerCurrent = session.turnOrder[session.currentTurnIndex] !== senderId; if (senderNoLongerCurrent) { setShowT3SpectatorNotif(null); } }, [session, showT3SpectatorNotif]); // ── Vérifier l'élimination après draw ou addDebt ────────── const checkAndEliminate = useCallback(async ( s: Session, targetId: string, targetName: string, ): Promise => { const cards = s.playerCards?.[targetId] ?? []; const debt = s.playerDebts?.[targetId] ?? 0; // playerDebts contient déjà tous les deltas (cartes T3 + perquisitions via addDebt) const total = computePlayerTotalMp(cards) + debt; // Lire le seuil depuis la session (dynamique selon la difficulté choisie) const sessionThreshold = s.eliminationThreshold ?? DEFAULT_ELIMINATION_THRESHOLD; const alreadyElim = (s.eliminatedPlayers ?? []).includes(targetId); if (!alreadyElim && total >= sessionThreshold) { try { const { session: sElim } = await eliminatePlayer(code, targetId); // Le polling détectera pendingEliminationAck et affichera les overlays setJustEliminated(targetName); // petit flash court pour les spectateurs non-paused if (elimTimeout.current) clearTimeout(elimTimeout.current); elimTimeout.current = setTimeout(() => setJustEliminated(null), 1800); return sElim; } catch (e) { console.error("Erreur élimination:", e); } } return s; }, [code]); // ── // ── Piocher ─────────────────────────────────────── const handleDraw = async () => { if (!session || isDrawing || !isMyTurn(session)) return; const isEliminated = (session.eliminatedPlayers ?? []).includes(playerId); if (isEliminated) return; // Note: miniGameSkippedDraw est réinitialisé avant d'appeler drawCard depuis l'overlay des résultats // ── VÉRIFIER SI UNE PERQUISITION DOIT APPARAÎTRE ── // Priorité : sessionOptionsQuery (notre DB) > session Supabase > localStorage > défaut // Supabase ne retourne pas miniGameEnabled/miniGameLevel, donc on utilise notre DB comme source de vérité const miniGameEnabledCheck = sessionMiniGameEnabled !== null ? sessionMiniGameEnabled : (session.miniGameEnabled !== false); // défaut: activé if (miniGameEnabledCheck) { // Lire le niveau depuis notre DB, sinon depuis localStorage (fallback) let miniGameLevel: MiniGameLevel = sessionMiniGameLevel ?? 1; if (!sessionMiniGameLevel) { try { const stored = localStorage.getItem(SOLO_MINI_GAME_LEVEL_KEY); if (stored) miniGameLevel = (parseInt(stored, 10) as MiniGameLevel) || 1; } catch { /* ignore */ } } const { triggered, mode } = rollMiniGame(miniGameLevel, drawsSinceLastMiniGameRef.current); if (triggered) { // Réinitialiser le compteur de tirages drawsSinceLastMiniGameRef.current = 0; setMiniGameSkippedDraw(true); // Bloquer la pioche miniGameSkippedDrawRef.current = true; // Ref miroir pour handleEndTurn // Étape 1 : Afficher le message d'alerte au piocheur ("le groupe va devoir se sauver") setPendingMiniGameMode(mode); setMiniGameAlertPhase("trigger-alert"); return; } // Incrémenter le compteur de tirages sans perquisition drawsSinceLastMiniGameRef.current++; } // ── PIOCHE NORMALE (pas de perquisition) ── setIsDrawing(true); showNotifRef.current = false; setShowNotif(false); setShowCardFront(false); // Montrer le dos en premier (comme en solo) try { let s = (await drawCard(code, playerId)).session; setSession(s); prevTurnIdx.current = s.currentTurnIndex; prevLastCard.current = s.lastCard; setShowCard(false); setTimeout(() => { setShowCard(true); // Retourner la carte face visible après l'animation d'entrée (350ms) setTimeout(() => setShowCardFront(true), 320); }, 50); // ─ Vérifier l'élimination IMMÉDIATEMENT après la pioche ─ // Si le joueur dépasse la limite avec cette carte, il est éliminé sans attendre handleEndTurn. s = await checkAndEliminate(s, playerId, playerName); setSession(s); // Si le joueur vient d'être éliminé, on ne continue pas (pendingEliminationAck prend le relais) if ((s.eliminatedPlayers ?? []).includes(playerId)) { return; } // Carte Type 3 : préparer l'envoi manuel (via bouton "Envoyer le ticket") if (s.lastCard !== null && s.turnOrder.length > 1 && s.state === "playing") { const cfg = getCardConfigMp(s.lastCard); const nextAmt = nextPlayerAmount(cfg); if (nextAmt > 0) { const nextPlayerId = getNextActivePlayerId(s, playerId); if (nextPlayerId) { const nextPlayer = s.players.find((p) => p.id === nextPlayerId); setPendingT3({ nextPlayerId, nextAmt, taxAmt: cfg.taxe ?? 0, totalRefund: nextAmt, // Le remboursement total = nextAmt (prix + taxe) nextPlayerName: nextPlayer?.name ?? "joueur suivant", }); } } } } catch (e: any) { setError(e.message ?? "Erreur lors du tirage"); } finally { setIsDrawing(false); } }; // ── Ouvrir le modal de sélection du destinataire T3 ──── const handleSendT3 = () => { if (!pendingT3 || isSendingT3) return; setShowT3TargetModal(true); }; // ── Envoyer le ticket T3 au joueur choisi ──── const handleConfirmT3Target = async (targetPlayerId: string) => { if (!pendingT3 || !session || isSendingT3) return; setShowT3TargetModal(false); setIsSendingT3(true); const { nextAmt } = pendingT3; try { let s2 = (await addDebt(code, playerId, targetPlayerId, nextAmt, session.lastCard!)).session; setSession(s2); setPendingT3(null); // ─ Vérifier l'élimination du destinataire T3 immédiatement après l'envoi ─ const t3Target = s2.players.find((p: any) => p.id === targetPlayerId); if (t3Target) { s2 = await checkAndEliminate(s2, targetPlayerId, t3Target.name); setSession(s2); } // Afficher la notification de remboursement pour le piocheur (toujours, même si taxe=0) const { totalRefund } = pendingT3; setShowTaxNotif({ amount: totalRefund }); } catch (e: any) { setError(e.message ?? "Erreur lors de l'envoi du ticket"); } finally { setIsSendingT3(false); } }; // ── Terminer le tour ──────────────────────────────────────── // L'élimination est vérifiée ICI (après que le joueur a lu sa carte) // et non pas immédiatement après la pioche. const handleEndTurn = async () => { if (!session || isEndingTurn) return; // Vérifier que le joueur a bien pioché (après perquisition, drawCard est appelé depuis l'overlay) if (!hasDrawnThisTurn) { setError("Vous devez piocher une carte avant de terminer votre tour"); return; } setIsEndingTurn(true); try { // Vérifier l'élimination du joueur AVANT de terminer le tour // Cela garantit que le joueur a eu le temps de lire sa carte let currentSession = session; currentSession = await checkAndEliminate(currentSession, playerId, playerName); setSession(currentSession); // Vérifier aussi l'élimination du destinataire T3 s'il y en avait un if (currentSession.lastCard !== null) { const lastCfg = getCardConfigMp(currentSession.lastCard); if (lastCfg.cardType === 3 && currentSession.lastCardDrawnBy === playerId) { const t3TargetId = getNextActivePlayerId(currentSession, playerId); if (t3TargetId) { const t3Target = currentSession.players.find((p) => p.id === t3TargetId); if (t3Target) { currentSession = await checkAndEliminate(currentSession, t3TargetId, t3Target.name); setSession(currentSession); } } } } // Si le joueur vient d'être éliminé, ne pas terminer le tour // (le système de pendingEliminationAck prend le relais) const justElim = (currentSession.eliminatedPlayers ?? []).includes(playerId); if (justElim) { setIsEndingTurn(false); return; } const { session: s } = await endTurn(code, playerId); // Mettre à jour la bulle immédiatement pour le joueur courant if (s.lastCard !== null && s.lastCardDrawnBy) { const prevPlayer = s.players.find((p) => p.id === s.lastCardDrawnBy); if (prevPlayer) setBubbleCard({ cardNum: s.lastCard, playerName: prevPlayer.name, playerId: prevPlayer.id }); } // Mettre à jour prevTurnIdx AVANT triggerTurnNotif pour que le prochain poll ne redéclenche pas prevTurnIdx.current = s.currentTurnIndex; setSession(s); // Réinitialiser le flag de perquisition après la fin du tour setMiniGameSkippedDraw(false); miniGameSkippedDrawRef.current = false; // Ref miroir // Afficher la notif "Tour de [suivant]" — forceAutoClose=true car ce n'est plus mon tour if (s.state === "playing") { triggerTurnNotif(s, true); } } catch (e: any) { setError(e.message ?? "Erreur fin de tour"); } finally { setIsEndingTurn(false); } }; // ── Fin de tour PERQUISITION — Fonction séparée, PRIORITÉ ABSOLUE ────────── // Cette fonction est TOTALEMENT indépendante de handleEndTurn. // Elle n'a AUCUNE garde : pas de hasDrawnThisTurn, pas de checkAndEliminate, // pas de pendingAck, pas de showTaxNotif, pas de miniGameSkippedDraw check. // Elle appelle endTurn() directement et passe le tour au joueur suivant. const forceEndTurnPerquisition = async () => { // Double-protection via ref pour éviter les appels multiples if (isEndingTurnPerquisitionRef.current) return; if (!session) return; isEndingTurnPerquisitionRef.current = true; setIsEndingTurnPerquisition(true); try { // 1. Fermer immédiatement l'overlay des résultats setMiniGameResultsData(null); // 2. Appel DIRECT à endTurn — aucune vérification d'élimination, aucune garde const { session: s } = await endTurn(code, playerId); // 3. Mettre à jour la bulle de carte précédente if (s.lastCard !== null && s.lastCardDrawnBy) { const prevPlayer = s.players.find((p: any) => p.id === s.lastCardDrawnBy); if (prevPlayer) setBubbleCard({ cardNum: s.lastCard, playerName: prevPlayer.name, playerId: prevPlayer.id }); } // 4. Mettre à jour prevTurnIdx AVANT triggerTurnNotif prevTurnIdx.current = s.currentTurnIndex; setSession(s); // 5. Réinitialiser TOUS les états de perquisition setMiniGameSkippedDraw(false); miniGameSkippedDrawRef.current = false; setWaitingForAllPlayers(false); setMiniGameAlertPhase(null); setPendingMiniGameMode(null); setMiniGameMode(null); resolvedMiniGameIds.current.clear(); // 6. Afficher la notif "Tour de [suivant]" if (s.state === "playing") { triggerTurnNotif(s, true); } } catch (e: any) { setError(e.message ?? "Erreur fin de tour (perquisition)"); } finally { isEndingTurnPerquisitionRef.current = false; setIsEndingTurnPerquisition(false); } }; // ── Mélanger (host) ─────────────────────────────────── const handleReset = async () => { if (!isHost || isResetting) return; setIsResetting(true); try { const { session: s } = await resetGame(code, playerId); // Forcer la réintégration des éliminés et la remise à zéro des dettes côté client // (le serveur Supabase peut ne pas vider ces champs selon sa version) const resetSession = { ...s, eliminatedPlayers: [], pendingEliminationAck: [], playerCards: Object.fromEntries(s.turnOrder.map((pid: string) => [pid, []])), playerDebts: Object.fromEntries(s.turnOrder.map((pid: string) => [pid, 0])), playerReceivedCards: Object.fromEntries(s.turnOrder.map((pid: string) => [pid, []])), lastCard: null, lastCardDrawnBy: null, }; setSession(resetSession); prevTurnIdx.current = s.currentTurnIndex; prevLastCard.current = s.lastCard; firstLoadDone.current = false; // Éviter la notif immédiate lastNotifTurnIdx.current = -1; showNotifRef.current = false; setShowNotif(false); setNotifMountKey(0); setJustEliminated(null); setBubbleCard(null); setShowPrevCard(false); setShowCardFront(true); setShowConfirmReset(false); setPendingT3(null); setShowTaxNotif(null); setShowReceivedTicketNotif(null); setShowT3SpectatorNotif(null); setShowMyEliminationOverlay(false); setMiniGameTriggeredBy(null); miniGameTriggeredByRef.current = null; setWaitingForAllPlayers(false); setMiniGameMode(null); setMiniGameEventId(null); setMiniGameSkippedDraw(false); miniGameSkippedDrawRef.current = false; // Ref miroir setMiniGameResultsData(null); // Reset overlay résultats perquisition setIsEndingTurnPerquisition(false); isEndingTurnPerquisitionRef.current = false; setMiniGameHistory([]); setGroupMiniGameHistory([]); prevPendingAck.current = []; // Réinitialiser les guards de stats/badges pour la nouvelle partie statsRecordedRef.current = false; badgesRecordedRef.current = false; } catch (e: any) { setError(e.message ?? "Erreur mélange"); } finally { setIsResetting(false); } }; // ── Expulser un joueur (host) ──────────────────────────── const handleKick = async (targetId: string) => { if (!isHost || isKicking) return; setIsKicking(true); try { const { session: s } = await kickPlayer(code, playerId, targetId); setSession(s); setShowKickModal(false); } catch (e: any) { setError(e.message ?? "Erreur expulsion"); } finally { setIsKicking(false); } }; // ── Quitter ───────────────────────────────────────────── const handleLeave = async () => { try { await leaveSession(code, playerId); } catch {} mpStorage.clear(); navigate("/"); }; // ── Confirmer l'élimination (devient spectateur) ───────── const handleAcknowledge = async () => { if (isAcknowledging) return; setIsAcknowledging(true); try { const { session: s } = await acknowledgeElimination(code, playerId); setSession(s); setShowMyEliminationOverlay(false); prevPendingAck.current = s.pendingEliminationAck ?? []; } catch (e: any) { setError(e.message ?? "Erreur confirmation"); } finally { setIsAcknowledging(false); } }; // ─ Enregistrer le résultat de la partie multi (une seule fois) ─ // NOTE: Ce useEffect DOIT être avant le guard if (!session) pour respecter les règles des hooks React useEffect(() => { if (!session || !isAuthenticated || statsRecordedRef.current) return; const _isFinished = session.state === "finished"; const _pendingAck = session.pendingEliminationAck ?? []; if (!_isFinished || _pendingAck.length > 0) return; const _eliminated = session.eliminatedPlayers ?? []; const _amEliminated = _eliminated.includes(playerId); const _myCards: number[] = session.playerCards?.[playerId] ?? []; const _myReceivedDebt: number = session.playerDebts?.[playerId] ?? 0; const _myTotal = computePlayerTotalMp(_myCards) + _myReceivedDebt; const _playerTotals = session.turnOrder.map((pid: string) => ({ pid, total: computePlayerTotalMp(session.playerCards?.[pid] ?? []) + (session.playerDebts?.[pid] ?? 0), })); const _activePlayers = _playerTotals.filter((t: { pid: string; total: number }) => !_eliminated.includes(t.pid)); const _winner = _isFinished && _activePlayers.length === 1 ? session.players.find((p: { id: string }) => p.id === _activePlayers[0]?.pid) : null; const _isDraw = _isFinished && _activePlayers.length > 1; statsRecordedRef.current = true; const isWinner = _winner != null && _winner.id === playerId; const isLoser = _amEliminated || (_isDraw ? false : _winner != null && _winner.id !== playerId); if (isWinner) { recordResultMutation.mutate({ mode: "multi", result: "win", finalDebt: _myTotal, cardsDrawn: _myCards.length }); } else if (isLoser) { recordResultMutation.mutate({ mode: "multi", result: "loss", finalDebt: _myTotal, cardsDrawn: _myCards.length }); } }, [session, isAuthenticated, playerId, recordResultMutation]); // ─ Enregistrer la fin de partie pour les badges (TOUS les joueurs) ─ // Chaque joueur enregistre ses propres stats et débloquer ses badges // quand la partie se termine réellement (victoire ou élimination). useEffect(() => { if (!session || !isAuthenticated || badgesRecordedRef.current) return; const _isFinished = session.state === "finished"; const _pendingAck = session.pendingEliminationAck ?? []; if (!_isFinished || _pendingAck.length > 0) return; const _eliminated = session.eliminatedPlayers ?? []; const _myCards: number[] = session.playerCards?.[playerId] ?? []; const _myReceivedDebt: number = session.playerDebts?.[playerId] ?? 0; const _myTotal = computePlayerTotalMp(_myCards) + _myReceivedDebt; const _playerTotals = session.turnOrder.map((pid: string) => ({ pid, total: computePlayerTotalMp(session.playerCards?.[pid] ?? []) + (session.playerDebts?.[pid] ?? 0), })); const _activePlayers = _playerTotals.filter((t: { pid: string; total: number }) => !_eliminated.includes(t.pid)); const _winner = _isFinished && _activePlayers.length === 1 ? session.players.find((p: { id: string }) => p.id === _activePlayers[0]?.pid) : null; const _amEliminated = _eliminated.includes(playerId); const _isDraw = _isFinished && _activePlayers.length > 1; badgesRecordedRef.current = true; const isWinner = _winner != null && _winner.id === playerId; const isLoser = _amEliminated || (_isDraw ? false : _winner != null && _winner.id !== playerId); const result = isWinner ? "win" : isLoser ? "loss" : "draw"; // Calculer les compteurs par type de carte piochée par le host let contrventionsDrawn = 0; let contribuablesDrawn = 0; let investisseursDrawn = 0; for (const cardId of _myCards) { const cfg = getCardConfigMp(cardId); if (cfg.category === "contravention") contrventionsDrawn++; else if (cfg.category === "contribuable") contribuablesDrawn++; else if (cfg.category === "investisseur") investisseursDrawn++; } endGameMutation.mutate({ mode: "multi", result, finalDebt: _myTotal, cardsDrawn: _myCards.length, contrventionsDrawn, contribuablesDrawn, investisseursDrawn, }); }, [session, isAuthenticated, isHost, playerId, endGameMutation]); // ── Calculs dérivés mémoïsés — DOIVENT être avant tout return conditionnel (règles des hooks) ── // Mémoïser pour éviter les recalculs à chaque render (hot path en multijoueur 10 joueurs) const playerTotals = useMemo(() => (session?.turnOrder ?? []).map((pid) => ({ pid, total: computePlayerTotalMp(session?.playerCards?.[pid] ?? []) + (session?.playerDebts?.[pid] ?? 0), })), [session?.turnOrder, session?.playerCards, session?.playerDebts]); const eliminatedForMemo = session?.eliminatedPlayers ?? []; const minTotal = useMemo(() => { const active = playerTotals.filter(t => !eliminatedForMemo.includes(t.pid)); if (active.length === 0) return 0; return Math.min(...active.map(t => t.total)); }, [playerTotals, eliminatedForMemo]); // ── Rendu de chargement ────────────────────────────────── if (!session) { return (
Connexion à la session… {error && {error}}
); } const ELIMINATION_THRESHOLD = session.eliminationThreshold ?? DEFAULT_ELIMINATION_THRESHOLD; const disabledCardTypes: number[] = session.disabledCardTypes ?? []; const myTurn = isMyTurn(session); const amEliminated = (session.eliminatedPlayers ?? []).includes(playerId); const currentPlayer = session.players.find((p) => p.id === session.turnOrder[session.currentTurnIndex]); const remaining = session.deck.length; const drawnCount = session.drawn.length; const isFinished = session.state === "finished"; // Taille réelle du deck (filtrée selon les préférences de la session) const deckTotal = (remaining + drawnCount) || (session.allowedCardIds?.length ?? TOTAL_CARDS); const lastCardBy = session.players.find((p) => p.id === session.lastCardDrawnBy); const myCards: number[] = session.playerCards?.[playerId] ?? []; const myReceivedDebt: number = session.playerDebts?.[playerId] ?? 0; const myReceivedCards: number[] = session.playerReceivedCards?.[playerId] ?? []; // Vrai si le joueur actif a déjà pioché sa carte ce tour const hasDrawnThisTurn = myTurn && session.lastCardDrawnBy === playerId; // Vrai si le joueur dont c'est le tour a pioché (utile pour les autres) // FIX: Vérifier aussi que lastCard n'est pas null (sinon affichage buggé) const currentPlayerHasDrawn = session.lastCard !== null && session.lastCardDrawnBy === session.turnOrder[session.currentTurnIndex]; // Calcul des totaux pour le classement. // session.playerDebts[pid] contient DÉJÀ les deltas de perquisitions (via addDebt serveur Supabase). // Ne pas recalculer les perquisitions ici pour éviter le doublon. // playerTotals et minTotal sont déjà calculés avant le return conditionnel (voir ci-dessus). const eliminated = session.eliminatedPlayers ?? []; // Vainqueur : dernier actif si jeu fini, ou joueur avec la dette la plus faible const activePlayers = playerTotals.filter(t => !eliminated.includes(t.pid)); // ─ T3 : identifier si la carte courante est un investisseur et qui est le receveur ─ const lastCardIsT3 = session.lastCard !== null && currentPlayerHasDrawn && getCardConfigMp(session.lastCard).cardType === 3; const t3ReceiverId = lastCardIsT3 && session.lastCardDrawnBy ? getNextActivePlayerId(session, session.lastCardDrawnBy) : null; // Je ne suis ni l'envoyeur ni le receveur → spectateur T3 const isT3Spectator = lastCardIsT3 && session.lastCardDrawnBy !== playerId && t3ReceiverId !== playerId; const winner = isFinished && activePlayers.length === 1 ? session.players.find((p) => p.id === activePlayers[0]?.pid) : null; // Match nul : partie terminée avec plusieurs joueurs encore en jeu (deck épuisé) const isDraw = isFinished && activePlayers.length > 1; // Pause élimination : autres joueurs en attente const pendingAck = session.pendingEliminationAck ?? []; const gamePausedFor = !amEliminated && pendingAck.length > 0 ? session.players.find(p => p.id === pendingAck[0]) : null; // Dette totale du joueur en attente d'élimination (pour la notif des autres) const gamePausedForTotal = gamePausedFor ? computePlayerTotalMp(session.playerCards?.[gamePausedFor.id] ?? []) + (session.playerDebts?.[gamePausedFor.id] ?? 0) : 0; // Total pour l'overlay d'élimination du joueur local const myTotal = computePlayerTotalMp(myCards) + myReceivedDebt; return (
{/* ── Halos de police — coins ── */} {/* ── Page lecteur de musique ── */} {showMusicPlayer && ( setShowMusicPlayer(false)} /> )} {/* ── Notification de tour ── */} {showNotif && !isFinished && ( | undefined) ?? {}} myAvatarDisplay={(() => { const myProfile = mpPlayerProfiles?.[playerName]; if (myProfile) return getAvatarDisplay(myProfile.avatarType as "emoji" | "custom", myProfile.avatarId); // Résoudre l'emoji invité directement ici (source de vérité = guestEmojis du serveur) const myGuestEmoji = playerId ? (guestEmojis as Record | undefined)?.[playerId] : null; const myLocalEmoji = playerId ? (localStorage.getItem(`mp_guestEmoji_${playerId}`) || sessionStorage.getItem("mp_guestEmoji") || "") : ""; const myResolved = myGuestEmoji || myLocalEmoji || myEmojiRef.current || ""; if (myResolved) return { type: "emoji" as const, content: myResolved }; return null; })()} currentAvatarDisplay={(() => { const cp = currentPlayer; if (!cp) return null; const cpProfile = mpPlayerProfiles?.[cp.name]; if (cpProfile) return getAvatarDisplay(cpProfile.avatarType as "emoji" | "custom", cpProfile.avatarId); // Résoudre l'emoji invité du joueur actif directement ici const cpGuestEmoji = (guestEmojis as Record | undefined)?.[cp.id]; if (cpGuestEmoji) return { type: "emoji" as const, content: cpGuestEmoji }; return null; })()} onDismiss={async () => { if (notifTimeout.current) clearTimeout(notifTimeout.current); showNotifRef.current = false; setShowNotif(false); // NOTE : Le déclenchement des perquisitions est géré UNIQUEMENT dans handleDraw. // Ce chemin (onDismiss "JE COMMENCE") ne déclenche plus de perquisition // car handleDraw est appelé juste après la fermeture de la notification. }} /> )} {/* ── Overlay élimination — pour le joueur éliminé ── */} {showMyEliminationOverlay && ( 0 ? myCards[myCards.length - 1] : null} onAcknowledge={handleAcknowledge} isAcknowledging={isAcknowledging} skinId={mySkinId} /> )} {/* ── Overlay GAGNANT plein écran ── */} {isFinished && winner !== null && pendingAck.length === 0 && !showPodium && ( t.pid === winner!.id)?.total ?? 0} mode="multi" onMenu={() => setShowConfirmLeave(true)} avatarDisplay={(() => { const wp = mpPlayerProfiles?.[winner!.name]; return wp ? getAvatarDisplay(wp.avatarType as "emoji" | "custom", wp.avatarId) : undefined; })()} onShowPodium={() => setShowPodium(true)} /> )} {/* ── Podium classement final ── */} {isFinished && showPodium && (() => { // Construire la liste classée : survivants (par dette croissante) puis éliminés (par ordre d'élimination inversé) const survivorsSorted = playerTotals .filter(t => !eliminated.includes(t.pid)) .sort((a, b) => a.total - b.total); const eliminatedOrdered = (session.eliminatedPlayers ?? []).slice().reverse() .map(pid => playerTotals.find(t => t.pid === pid)) .filter(Boolean) as typeof playerTotals; const allRanked = [...survivorsSorted, ...eliminatedOrdered]; const podiumPlayers: PodiumPlayer[] = allRanked.map((t, i) => { const p = session.players.find((pl) => pl.id === t.pid); const prof = mpPlayerProfiles?.[p?.name ?? ""]; // Résoudre l'avatar : profil connecté > emoji invité serveur > localStorage let avatar: PodiumPlayer["avatar"] = undefined; if (prof) { avatar = getAvatarDisplay(prof.avatarType as "emoji" | "custom", prof.avatarId); } else { const guestEmojiServer = (guestEmojis as Record | undefined)?.[t.pid]; const guestEmojiLocal = localStorage.getItem(`mp_guestEmoji_${t.pid}`) || ""; const resolvedEmoji = guestEmojiServer || guestEmojiLocal || ""; if (resolvedEmoji) avatar = { type: "emoji", content: resolvedEmoji }; } return { pid: t.pid, name: p?.name ?? t.pid, total: t.total, isEliminated: eliminated.includes(t.pid), isMe: t.pid === playerId, avatar, rank: i + 1, }; }); return ( setShowPodium(false)} onMenu={() => { setShowPodium(false); setShowConfirmLeave(true); }} /> ); })()} {/* ── Overlay MATCH NUL plein écran (deck épuisé, plusieurs joueurs en jeu) ── */} {isDraw && pendingAck.length === 0 && ( {/* Confettis décoratifs */} {[...Array(18)].map((_, i) => ( ))} {/* Badge égalité animé */} {/* Titre */}
MATCH NUL ! Le deck est épuisé — personne ne gagne !
{/* Classement des survivants */}
SURVIVANTS {activePlayers .sort((a, b) => a.total - b.total) .map((t, i) => { const p = session.players.find(pl => pl.id === t.pid); const isMe = t.pid === playerId; return (
#{i + 1} {p?.name ?? t.pid}{isMe ? " (toi)" : ""}
{formatPrice(t.total)} ); })}
{/* Boutons */}
{isHost && ( setShowConfirmReset(true)} className="flex-1 py-3.5 bg-yellow-400 border-[4px] border-black rounded-2xl text-black" style={{ fontFamily: "'Bangers', cursive", fontSize: "1.2rem", letterSpacing: "0.06em", boxShadow: "4px 4px 0px #000" }} > REJOUER )} setShowConfirmLeave(true)} className="flex-1 py-3.5 bg-white/10 border-[3px] border-white/20 rounded-2xl text-white/70" style={{ fontFamily: "'Bangers', cursive", fontSize: "1.2rem", letterSpacing: "0.06em", boxShadow: "3px 3px 0px rgba(0,0,0,0.5)" }} > MENU
)} {/* ── Overlay pause — pour les autres joueurs ── */} {gamePausedFor && ( )} {/* ── Notif centrale : joueur parti / expulsé ── */} {playerLeftNotif && (
{/* Bande titre */}
{playerLeftNotif.wasKicked ? : } {playerLeftNotif.wasKicked ? "JOUEUR EXPULSÉ" : "JOUEUR PARTI"} {/* Bouton fermer */} { if (playerLeftTimeout.current) clearTimeout(playerLeftTimeout.current); setPlayerLeftNotif(null); }} className="w-6 h-6 bg-white/10 border border-white/15 rounded-full flex items-center justify-center flex-shrink-0 ml-auto" >
{/* Corps */}
{playerLeftNotif.playerName} {playerLeftNotif.wasKicked ? "a été expulsé de la partie" : "a quitté la partie"}
)} {/* ── Modal d'expulsion (host) ── */} {showKickModal && session && ( {/* Titre */}
EXPULSER UN JOUEUR setShowKickModal(false)} className="w-7 h-7 bg-white/10 border-[2px] border-white/15 rounded-full flex items-center justify-center" >
{/* Liste des joueurs */}
{session.players .filter(p => p.id !== playerId) // Exclure l'host .map(p => { const isElim = (session.eliminatedPlayers ?? []).includes(p.id); return ( handleKick(p.id)} disabled={isKicking} className="w-full flex items-center gap-3 px-3 py-2.5 rounded-2xl border-[2px] border-black text-left" style={{ background: isElim ? "rgba(255,255,255,0.04)" : "rgba(239,68,68,0.08)", borderColor: isElim ? "rgba(255,255,255,0.1)" : "rgba(239,68,68,0.3)", boxShadow: "3px 3px 0px rgba(0,0,0,0.5)", opacity: isKicking ? 0.6 : 1, }} >
{isElim ? : }
{p.name} {isElim && ( Éliminé )}
); }) }
{/* Footer */}

Le joueur expulse sera immediatement retire de la partie.

)} {/* Drawer historique des transactions */} {showTransactionDrawer && ( <> {/* Overlay */} setShowTransactionDrawer(false)} className="fixed inset-0 bg-black/50 z-50" /> {/* Drawer */} {/* Header du drawer */}
HISTORIQUE
setShowTransactionDrawer(false)} className="w-8 h-8 bg-red-600 border-[2px] border-black rounded-lg flex items-center justify-center" style={{ boxShadow: "2px 2px 0px #000" }} >
{/* Contenu du drawer — pattern identique à MyTicketsPanel pour scroll iOS */}
{session && (session as any).playerCards && Object.keys((session as any).playerCards).length > 0 ? (
{/* Historique par tour */} {mpGlobalHistoryTours.map((tour) => (
{/* En-tête du tour */}
{tour.num}
Tour {tour.num} {tour.txs.length} carte{tour.txs.length > 1 ? "s" : ""}
{/* Transactions du tour */}
{tour.txs.map((tx: any, i: number) => { const txProfile = mpPlayerProfiles?.[tx.name] ?? null; const txAvatar = txProfile ? getAvatarDisplay(txProfile.avatarType as "emoji" | "custom", txProfile.avatarId) : null; const txPlayerObj = session.players.find((p: any) => p.name === tx.name); const txGuestEmoji = !txAvatar && txPlayerObj ? (guestEmojis as Record | undefined)?.[txPlayerObj.id] : null; return (
{/* Ligne 1 : avatar + nom + montant */}
{txAvatar?.type === "emoji" ? ( {txAvatar.content} ) : txAvatar?.type === "image" ? ( {tx.name} ) : txGuestEmoji ? ( {txGuestEmoji} ) : ( {tx.name.charAt(0).toUpperCase()} )}
{tx.name} 0 ? "text-red-400" : tx.amt < 0 ? "text-green-400" : "text-white/30"}`}> {tx.amt > 0 ? `+${formatPrice(tx.amt)}` : tx.amt < 0 ? formatPrice(tx.amt) : "—"}
{/* Ligne 2 : catégorie + indicateur T3 */}
{tx.cat?.label ?? "?"} {tx.isT3Sender && → envoyé} {tx.isT3Receiver && ← reçu}
); })}
))} {/* Séparation entre tours et perquisitions */} {mpGlobalHistoryRaids && mpGlobalHistoryTours.length > 0 && (
PERQUISITIONS
)} {/* Historique des perquisitions */} {mpGlobalHistoryRaids && (
{mpGlobalHistoryRaids.map((result: any) => { const rPlayer = session?.players.find((p: any) => p.id === result.playerId); const name = rPlayer?.name ?? "?"; const pProfile = mpPlayerProfiles?.[name] ?? null; const pAvatar = pProfile ? getAvatarDisplay(pProfile.avatarType as "emoji" | "custom", pProfile.avatarId) : null; // Fallback emoji invité pour les perquisitions const pGuestEmoji = !pAvatar && rPlayer ? (guestEmojis as Record | undefined)?.[rPlayer.id] : null; return (
{/* Ligne 1 : avatar + nom + montant */}
{pAvatar?.type === "emoji" ? ( {pAvatar.content} ) : pAvatar?.type === "image" ? ( {name} ) : pGuestEmoji ? ( {pGuestEmoji} ) : ( {name.charAt(0).toUpperCase()} )}
{name} {result.success ? `-${formatPrice(result.amount)}` : `+${formatPrice(result.amount)}`}
{/* Ligne 2 : résultat */}
{result.success ? "✓" : "✕"} {result.success ? "Perquisition réussie" : "Perquisition échouée"}
); })}
)}
) : (
Aucune transaction
)}
)} {/* ── Header ── */}
{/* Bouton accueil */} setShowConfirmLeave(true)} className="w-10 h-10 bg-yellow-400 border-[3px] border-black rounded-xl flex items-center justify-center flex-shrink-0" style={{ boxShadow: "3px 3px 0px #000" }} > {/* Boutons host uniquement */} {isHost && ( <> {session && session.players.filter(p => p.id !== playerId).length > 0 && ( setShowKickModal(true)} className="w-10 h-10 bg-red-600 border-[3px] border-black rounded-xl flex items-center justify-center flex-shrink-0" style={{ boxShadow: "3px 3px 0px #000" }} title="Expulser un joueur" > )} setShowConfirmReset(true)} className="w-10 h-10 bg-[#1565C0] border-[3px] border-black rounded-xl flex items-center justify-center flex-shrink-0" style={{ boxShadow: "3px 3px 0px #000" }} > )} {/* Bouton Musique */} setShowMusicPlayer(true)} className="w-10 h-10 border-[3px] border-black rounded-xl flex items-center justify-center flex-shrink-0" style={{ background: "linear-gradient(135deg, #7c3aed, #4f46e5)", boxShadow: "3px 3px 0px #000", }} > {/* Trois boutons (historique, carte précédemment joué, mes tickets) */}
{/* Bouton historique bleu */} setShowTransactionDrawer(true)} className="w-10 h-10 bg-[#1565C0] border-[3px] border-black rounded-xl flex items-center justify-center" style={{ boxShadow: "3px 3px 0px #000" }} title="Historique" > {/* Bouton carte précédemment joué orange */} bubbleCard !== null && setShowPrevCard(true)} disabled={bubbleCard === null} className="w-10 h-10 border-[3px] border-black rounded-xl flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed" style={{ background: bubbleCard !== null ? "#f97316" : "#9ca3af", boxShadow: "3px 3px 0px #000" }} title="Carte précédemment joué" > {/* Bouton mes tickets vert */} setShowMyTickets(true)} className="w-10 h-10 bg-[#22c55e] border-[3px] border-black rounded-xl flex items-center justify-center relative" style={{ boxShadow: "3px 3px 0px #000" }} title="Mes tickets" > {myCards.length > 0 && (
{myCards.length}
)}
{/* ── Barre avec dette | bouton joueurs | cartes piochées ── */}
{/* Affichage de la dette du joueur à gauche - format horizontal */}
{formatPrice(myTotal)}
{/* Bouton joueurs au centre avec animations scintillantes */}
setShowPlayerDropdown(v => !v)} className="flex items-center justify-center gap-2 px-3 sm:px-4 py-2 sm:py-2.5 rounded-xl sm:rounded-2xl border-[2.5px] text-center text-sm sm:text-base" style={{ borderColor: myTurn ? "rgba(59,130,246,0.9)" : amEliminated ? "rgba(239,68,68,0.35)" : "rgba(255,255,255,0.15)", background: myTurn ? "rgba(59,130,246,0.18)" : amEliminated ? "rgba(239,68,68,0.08)" : "rgba(255,255,255,0.06)", boxShadow: myTurn ? "3px 3px 0px rgba(0,0,0,0.5), 0 0 20px rgba(59,130,246,0.6), 0 0 40px rgba(59,130,246,0.25)" : "3px 3px 0px rgba(0,0,0,0.5)", }} > {amEliminated ? : myTurn ? : } {currentPlayer?.name ?? "..."} {myTurn && (toi)} {/* Dropdown liste joueurs */} {showPlayerDropdown && (
Ordre de jeu
{session.turnOrder.map((pid, idx) => { const player = session.players.find(p => p.id === pid); if (!player) return null; const isElim = eliminated.includes(pid); const isActive = idx === session.currentTurnIndex && !isFinished; const isMe = pid === playerId; const pTotal = playerTotals.find(t => t.pid === pid)?.total ?? 0; const isLeader = !isElim && pTotal === minTotal && drawnCount > 0 && activePlayers.length > 1; const pColor = isMe ? MY_COLOR : PLAYER_COLOR_PALETTE[idx % PLAYER_COLOR_PALETTE.length]; return (
{isElim ? : isLeader ? :
}
{(() => { const pProfile = mpPlayerProfiles?.[player.name]; const pAvatar = pProfile ? getAvatarDisplay(pProfile.avatarType as "emoji" | "custom", pProfile.avatarId) : null; // Emoji invité : serveur d'abord, fallback local si c'est le joueur courant const playerObj = session.players.find(p => p.name === player.name); const serverGuestEmoji = !pAvatar && playerObj ? (guestEmojis as Record | undefined)?.[playerObj.id] : null; const playerGuestEmoji = serverGuestEmoji || (!pAvatar && pid === playerId ? guestEmoji || null : null); const ringColor = isMe ? "rgba(96,165,250,0.9)" : pColor.dot; return (
{isActive && !isElim && ( )} {pAvatar?.type === "emoji" ? ( {pAvatar.content} ) : pAvatar?.type === "image" ? ( ) : playerGuestEmoji ? ( {playerGuestEmoji} ) : ( {(player.name || "?")[0].toUpperCase()} )}
); })()}
{player.name} {isMe && !isActive && (toi)} {mpPlayerProfiles?.[player.name]?.equippedBadgeId && !isElim && (
)}
{isElim ? (
ÉLIM. {formatPrice(pTotal)}
) : (
{formatPrice(pTotal)} {(session.playerCards?.[pid]?.length ?? 0) > 0 && ( {session.playerCards?.[pid]?.length ?? 0} carte{(session.playerCards?.[pid]?.length ?? 0) > 1 ? "s" : ""} )}
)}
); })}
)}
{/* Cartes piochées centrées */}
{drawnCount} /{deckTotal}
{/* ── Micro-barre de progression du deck ── */} {deckTotal > 0 && (
= 0.85 ? "linear-gradient(90deg, #f59e0b, #ef4444)" : "linear-gradient(90deg, #1565C0, #22c55e)", width: `${(drawnCount / deckTotal) * 100}%`, }} animate={{ width: `${(drawnCount / deckTotal) * 100}%` }} transition={{ duration: 0.5, ease: "easeOut" }} />
)} {/* ── Notification spectateur : transfert T3 — bulle centrale non-bloquante ── */} {showT3SpectatorNotif && (
{/* Bouton X fermer */} setShowT3SpectatorNotif(null)} className="absolute top-2.5 right-2.5 w-8 h-8 rounded-full border-[2px] border-black flex items-center justify-center z-10" style={{ background: "rgba(255,255,255,0.14)", boxShadow: "2px 2px 0px #000" }} > {/* Bande décorative haut */}
TRANSFERT DE TICKET
{/* Contenu */}
{/* Icône animée */} {/* Noms */}
{showT3SpectatorNotif.senderName} envoie un ticket à {showT3SpectatorNotif.receiverName}
{/* Hint auto-close */} Se ferme à la fin du tour
)} {/* ── Bannière élimination personnelle ── */} {amEliminated && ( )} {/* ── Sub-header : joueur actif + dropdown ── */}
{/* Overlay fermeture dropdowns */} {(showPlayerDropdown || showHistoryPanel) && (
{ setShowPlayerDropdown(false); setShowHistoryPanel(false); }} /> )} {/* Bouton Historique — drawer latéral */}
{/* ── Zone carte + bouton piocher ── */}
{/* Wrapper qui aligne la carte et les boutons sur la même largeur */}
{/* Carte */}
{isFinished && !winner && pendingAck.length === 0 ? ( /* Deck épuisé sans gagnant clair (cas rare) */
TOUTES LES CARTES PIOCHÉES !

{isHost ? "Utilise le bouton mélanger pour rembattre." : "Le host peut rembattre le deck."}

) : session.lastCard !== null && showCard && currentPlayerHasDrawn ? ( {showCardFront && !cardHiddenByViewer && !isT3Spectator ?
:
} {/* Bouton oeil — masquage local pour les non-actifs (masqué pour T3 spectateurs) */} {showCardFront && !myTurn && !isT3Spectator && ( setCardHiddenByViewer(v => !v)} className="absolute top-2 right-2 w-9 h-9 rounded-xl border-[2px] border-black flex items-center justify-center z-20" style={{ background: cardHiddenByViewer ? "rgba(255,255,255,0.9)" : "rgba(0,0,0,0.6)", boxShadow: "2px 2px 0px #000", }} title={cardHiddenByViewer ? "Voir la carte" : "Masquer la carte"} > {cardHiddenByViewer ? : } )} ) : ( )}
{/* Bouton piocher */} {!isFinished && (
{/* Bouton piocher / envoyer T3 / terminer mon tour */}
{myTurn && !amEliminated && ( )} 0) || waitingForAllPlayers } className="w-full py-2.5 sm:py-3.5 border-[4px] sm:border-[5px] border-black rounded-xl sm:rounded-2xl relative overflow-hidden disabled:cursor-not-allowed transition-colors" style={{ ...FONT_BANGERS, letterSpacing: "0.05em", fontSize: "0.8rem", background: amEliminated ? "#7f1d1d" : pendingT3 ? "#EC4899" : (hasDrawnThisTurn && !showTaxNotif) ? "#22c55e" : (hasDrawnThisTurn && showTaxNotif) ? "rgba(255,255,255,0.06)" : myTurn ? "#FFD700" : "rgba(255,255,255,0.06)", color: amEliminated ? "#fca5a5" : pendingT3 ? "#fff" : (hasDrawnThisTurn && !showTaxNotif) ? "#fff" : (hasDrawnThisTurn && showTaxNotif) ? "rgba(255,255,255,0.28)" : myTurn ? "#000" : "rgba(255,255,255,0.22)", boxShadow: pendingT3 ? "7px 7px 0px #000, 0 0 20px rgba(236,72,153,0.3)" : myTurn && !amEliminated && !(hasDrawnThisTurn && showTaxNotif && !pendingT3) ? "7px 7px 0px #000" : "3px 3px 0px rgba(0,0,0,0.3)", }} > {myTurn && !amEliminated && !pendingT3 && !(hasDrawnThisTurn && showTaxNotif) && ( )} {pendingT3 && !isSendingT3 && ( )} {amEliminated ? ( <> ÉLIMINÉ ) : pendingT3 ? ( <> {isSendingT3 ? "ENVOI EN COURS..." : `ENVOYER LE TICKET`} {!isSendingT3 && } ) : hasDrawnThisTurn && showTaxNotif ? ( Ferme la notification d'abord ) : hasDrawnThisTurn ? ( <> {isEndingTurn ? "EN COURS..." : "TERMINER MON TOUR"} ) : myTurn && pendingAck.length > 0 && !hasDrawnThisTurn ? ( En pause — élimination en cours… ) : myTurn ? ( <>{isDrawing ? "PIOCHE..." : "RECEVOIR UN TICKET"} ) : ( Attends, {currentPlayer?.name} est en train de jouer )}
)}
{/* /wrapper */} {/* Erreur */} {error && (
{error}
)} {/* ── Panneau latéral desktop — classement + historique ── */}
{/* Ma dette */}
Ma dette totale {formatPrice(myTotal)} {amEliminated && ( Éliminé — limite dépassée )}
{/* Classement en temps réel */}
CLASSEMENT
{playerTotals .sort((a, b) => { const aElim = eliminated.includes(a.pid); const bElim = eliminated.includes(b.pid); if (aElim && !bElim) return 1; if (!aElim && bElim) return -1; return a.total - b.total; }) .map((pt, rank) => { const player = session.players.find(p => p.id === pt.pid); const isMe = pt.pid === playerId; const isActive = pt.pid === currentPlayer?.id && !isFinished; const isElim = eliminated.includes(pt.pid); const pIdx = session.turnOrder.indexOf(pt.pid); const pColor = isMe ? MY_COLOR : PLAYER_COLOR_PALETTE[pIdx % PLAYER_COLOR_PALETTE.length]; const pProf = mpPlayerProfiles?.[player?.name ?? ""]; const pAvatar = pProf ? getAvatarDisplay(pProf.avatarType as "emoji" | "custom", pProf.avatarId) : null; return (
{/* Rang */} #{rank + 1} {/* Avatar du joueur */}
{pAvatar?.type === "emoji" ? ( {pAvatar.content} ) : pAvatar?.type === "image" ? ( ) : ( {(player?.name || "?")[0].toUpperCase()} )}
{/* Icône statut */}
{isElim ? : isActive ? : pt.pid === session.hostId ? :
}
{/* Nom */} {isMe ? "Toi" : (player?.name ?? pt.pid)} {isActive && !isElim && ( ▶ )} {/* Dette */} {formatPrice(pt.total)}
); })}
{/* Historique des dernières cartes */}
SUIVI DES TRANSACTIONS
{session.drawn.length === 0 && dbMiniGameHistory.length === 0 ? (
Aucun événement
) : (
{(() => { const cardOwnerMap = new Map(); for (const [pid, cards] of Object.entries(session.playerCards ?? {})) { for (const c of (cards as number[])) cardOwnerMap.set(c, pid); } const cardReceiverMap = new Map(); for (const [pid, received] of Object.entries(session.playerReceivedCards ?? {})) { for (const c of (received as number[])) { const receiver = session.players.find(p => p.id === pid); if (receiver) cardReceiverMap.set(c, receiver.name); } } // Convertir dbMiniGameHistory (playerId) en format affichable (playerName) const normalizedRaids = dbMiniGameHistory.map((game, mgIdx) => { const triggerer = session.players.find((p: { id: string; name: string }) => p.id === game.triggeredBy); return { triggeredByName: triggerer?.name ?? game.triggeredBy, results: game.results.map((r) => { const rPlayer = session.players.find((p: { id: string; name: string }) => p.id === r.playerId); return { playerName: rPlayer?.name ?? r.playerId, success: r.success, amount: r.amount, playerId: r.playerId }; }), timestamp: game.triggeredAt ? new Date(game.triggeredAt).getTime() : mgIdx * 1000, drawnIndex: undefined as number | undefined, }; }); // Construire une liste chronologique mixte : cartes + perquisitions type CardEntry = { type: 'card'; cardNum: number; index: number }; type RaidEntry = { type: 'raid'; mg: typeof normalizedRaids[0]; mgIdx: number }; type HistEntry = CardEntry | RaidEntry; const chronoEntries: HistEntry[] = []; session.drawn.forEach((cardNum: number, i: number) => { chronoEntries.push({ type: 'card', cardNum, index: i }); }); // Ajouter les perquisitions en fin (ordre chronologique DB) normalizedRaids.forEach((mg, mgIdx) => { chronoEntries.push({ type: 'raid', mg, mgIdx }); }); return ( <> {chronoEntries.map((entry, rowIdx) => { if (entry.type === 'card') { const { cardNum, index: i } = entry; const ownerId = cardOwnerMap.get(cardNum); const owner = session.players.find((p: { id: string; name: string }) => p.id === ownerId); const cfg = getCardConfigMp(cardNum); const net = drawerNetAmount(cfg); const nextAmt = nextPlayerAmount(cfg); const receiverName = cardReceiverMap.get(cardNum) ?? ""; const isElim = (session.eliminatedPlayers ?? []).includes(ownerId ?? ""); const isMe = ownerId === playerId; const rowColor = cfg.cardType === 1 ? { dot: "#DC2626", text: "text-red-300", bg: "rgba(220,38,38,0.07)" } : cfg.cardType === 2 ? { dot: "#16A34A", text: "text-green-300", bg: "rgba(22,163,74,0.07)" } : { dot: "#7C3AED", text: "text-purple-300", bg: "rgba(124,58,237,0.07)" }; const catInfo = CATEGORY_INFO[cfg.category]; return (
{catInfo?.label ?? "Inconnu"}
{/* Mini-avatar : photo, emoji profil ou emoji invité ou lettre */} {(() => { const ownerProfile = owner ? mpPlayerProfiles?.[owner.name] : null; const ownerAvatar = ownerProfile ? getAvatarDisplay(ownerProfile.avatarType as "emoji" | "custom", ownerProfile.avatarId) : null; const ownerGuestEmoji = !ownerAvatar && owner ? (guestEmojis as Record | undefined)?.[owner.id] : null; if (ownerAvatar?.type === "image") { return ( ); } const displayEmoji = ownerAvatar?.type === "emoji" ? ownerAvatar.content : ownerGuestEmoji; return ( {displayEmoji ?? (owner?.name ?? "?")[0].toUpperCase()} ); })()} {isMe ? "Toi" : (owner?.name ?? "?")} {isElim && }
{cfg.cardType === 3 && receiverName && (
→ {receiverName} +{formatPrice(nextAmt)}
)}
{net >= 0 ? "+" : ""}{formatPrice(net)}
); } else { // Entrée de type perquisition const { mg, mgIdx } = entry; return (
Perquisition — {mg.triggeredByName}
{mg.results.map((r: any, ri: number) => { const rPlayer = session.players.find((p: { id: string; name: string }) => p.id === (r.playerId ?? "") || p.name === r.playerName); const isMe = rPlayer?.id === playerId || r.playerId === playerId; const rProfile = rPlayer ? mpPlayerProfiles?.[rPlayer.name] : null; const rAvatar = rProfile ? getAvatarDisplay(rProfile.avatarType as "emoji" | "custom", rProfile.avatarId) : null; const rGuestEmoji = !rAvatar && rPlayer ? (guestEmojis as Record | undefined)?.[rPlayer.id] : null; const rDisplayEmoji = rAvatar?.type === "emoji" ? rAvatar.content : rGuestEmoji; return (
{rAvatar?.type === "image" ? ( ) : ( {rDisplayEmoji ?? (r.playerName ?? "?")[0].toUpperCase()} )} {isMe ? "Toi" : r.playerName} : {r.success ? `-${formatPrice(r.amount)}` : `+${formatPrice(r.amount)}`} {r.success ? " ✓" : " ✗"}
); })}
); } })} ); })()}
)}
{/* ── Aperçu carte précédente ── */} {showPrevCard && bubbleCard && ( setShowPrevCard(false)} > e.stopPropagation()} className="flex flex-col items-center gap-0" > {/* Bulle BD style — "Pioché par {joueur}" — attachée au-dessus de la carte */}
Pioché par{" "} {bubbleCard.playerName} {/* Pointe de la bulle vers le bas (vers la carte) */}
{/* Carte */}
setShowPrevCard(false)} className="mt-4 w-12 h-12 bg-red-500 border-[3px] border-black rounded-full flex items-center justify-center" style={{ boxShadow: "3px 3px 0px #000" }} > )} {/* ── Panneau "Mes tickets" ── */} {showMyTickets && ( setShowMyTickets(false)} session={session} myPlayerId={playerId} miniGameHistory={miniGameHistory} skinId={mySkinId} /> )} {/* ── Modal confirmation mélange ── */} {showConfirmReset && ( setShowConfirmReset(false)} loading={isResetting} deckTotal={session.allowedCardIds?.length ?? deckTotal} /> )} {/* ── Notification taxe T3 (piocheur) ── */} {showTaxNotif && ( {/* Header */}
Investissement remboursé !
{/* Corps */}
{/* Réduction */}
Montant remboursé sur ta dette -{formatPrice(showTaxNotif.amount)}

En tant qu'investisseur,
le montant total est remboursé sur ta dette — le joueur suivant assume la dépense.

setShowTaxNotif(null)} className="w-full py-3.5 bg-[#22c55e] border-[4px] border-black rounded-2xl text-black flex items-center justify-center gap-2 relative overflow-hidden" style={{ ...FONT_BANGERS, fontSize: "1.1rem", letterSpacing: "0.08em", boxShadow: "5px 5px 0px #000" }} > SUPER, J'AI COMPRIS !
)} {/* ── Notification ticket reçu T3 (joueur suivant) ── */} {showReceivedTicketNotif && ( {/* Header dramatique */}
Taxe d'investissement reçu !
{/* Corps */}
{/* Expéditeur */}
De la part de{" "} {showReceivedTicketNotif.fromName}
{/* Montant */}
Montant ajouté à ta dette +{formatPrice(showReceivedTicketNotif.amount)}
{/* Bouton confirmation */}
{ setShowReceivedTicketNotif(null); // Si ce joueur est dans pendingEliminationAck (il vient d'être éliminé par la carte T3), // confirmer l'élimination pour débloquer l'envoyeur immédiatement const pendingAckNow = session?.pendingEliminationAck ?? []; if (pendingAckNow.includes(playerId)) { try { const { session: s } = await acknowledgeElimination(code, playerId); setSession(s); setShowMyEliminationOverlay(false); prevPendingAck.current = s.pendingEliminationAck ?? []; } catch (e) { console.error("Erreur acknowledgeElimination depuis CONFIRMER LA RÉCEPTION:", e); } } }} className="w-full py-4 bg-pink-500 border-[4px] border-black rounded-2xl text-white flex items-center justify-center gap-2 relative overflow-hidden" style={{ ...FONT_BANGERS, fontSize: "1.05rem", letterSpacing: "0.07em", boxShadow: "6px 6px 0px #000" }} > CONFIRMER LA RÉCEPTION
)} {/* ── Modal confirmation quitter ── */} {showConfirmLeave && ( setShowConfirmLeave(false)} > e.stopPropagation()} >
QUITTER LA PARTIE ?

Tu ne pourras plus revenir dans la partie en cours.

setShowConfirmLeave(false)} className="flex-1 py-3.5 bg-white/10 border-[3px] border-white/20 rounded-2xl text-white/70" style={{ ...FONT_BANGERS, fontSize: "1.2rem", letterSpacing: "0.06em", boxShadow: "3px 3px 0px rgba(0,0,0,0.5)" }} > ANNULER CONFIRMER
)} {/* ─ Résultats de perquisition ─ */} {miniGameResultsData && ( {/* Header */}
RÉSULTATS PERQUISITION
{/* Corps */}
{miniGameResultsData.map((r) => { const p = session.players.find(pl => pl.id === r.playerId); const isMe = r.playerId === playerId; return (
{isMe ? "Toi" : (p?.name ?? r.playerId)}
{r.success ? `-${formatPrice(r.amount)}` : `+${formatPrice(r.amount)}`}
); })} {!myTurn && (

Cette fenêtre se ferme automatiquement...

)} {/* Bouton PIOCHER MA CARTE pour le piocheur — pioche obligatoire après perquisition */} {myTurn && !amEliminated && ( { if (isDrawing) return; // Fermer l'overlay immédiatement setMiniGameResultsData(null); // Réinitialiser miniGameSkippedDraw pour que handleDraw fonctionne setMiniGameSkippedDraw(false); miniGameSkippedDrawRef.current = false; // Piocher la carte normalement setIsDrawing(true); showNotifRef.current = false; setShowNotif(false); setShowCardFront(false); try { let s = (await drawCard(code, playerId)).session; setSession(s); prevTurnIdx.current = s.currentTurnIndex; prevLastCard.current = s.lastCard; setShowCard(false); setTimeout(() => { setShowCard(true); setTimeout(() => setShowCardFront(true), 320); }, 50); // Carte Type 3 : préparer l'envoi manuel if (s.lastCard !== null && s.turnOrder.length > 1 && s.state === "playing") { const cfg = getCardConfigMp(s.lastCard); const nextAmt = nextPlayerAmount(cfg); if (nextAmt > 0) { const nextPlayerId = getNextActivePlayerId(s, playerId); if (nextPlayerId) { const nextPlayer = s.players.find((p) => p.id === nextPlayerId); setPendingT3({ nextPlayerId, nextAmt, taxAmt: cfg.taxe ?? 0, totalRefund: nextAmt, nextPlayerName: nextPlayer?.name ?? "joueur suivant", }); } } } } catch (e: any) { setError(e.message ?? "Erreur lors du tirage"); } finally { setIsDrawing(false); } }} className="w-full py-3 rounded-2xl border-[4px] border-black flex items-center justify-center gap-2" style={{ ...FONT_BANGERS, background: isDrawing ? "#6b7280" : "#FFD700", color: "#000", fontSize: "1.1rem", letterSpacing: "0.06em", boxShadow: "4px 4px 0px #000" }} disabled={isDrawing} > {isDrawing ? "PIOCHE..." : "PIOCHER MA CARTE"} )}
)} {/* ─ Perquisition : Étape 1 — Alerte piocheur ("le groupe va devoir se sauver") ─ */} {miniGameAlertPhase === "trigger-alert" && pendingMiniGameMode !== null && ( PERQUISITION ! Le groupe va devoir se sauver d'une perquisition à cause de toi ! )} {/* ─ Perquisition : Étape 2 — Message commun ("Prêt à t'enfuir/te cacher ?") ─ */} {miniGameAlertPhase === "common-alert" && pendingMiniGameMode !== null && ( {pendingMiniGameMode === "run" ? : } {pendingMiniGameMode === "run" ? "Prêt à t'enfuir ?" : "Prêt à te cacher ?"} Une perquisition a été déclenchée ! )} {/* ─ Perquisition (multijoueur) ─ */} {/* Tous les joueurs jouent le mini-jeu individuellement */} {miniGameMode !== null && miniGameEventId !== null && !amEliminated && ( { // Soumettre le résultat individuel submitMiniGameResult.mutateAsync({ sessionCode: code, eventId: miniGameEventId, playerId, success, amount, }).catch(() => {}); // Appliquer la pénalité/récompense via addDebt // La dette est déjà appliquée dans fetchMiniGameStatus pour tous les joueurs // Pas besoin de l'appliquer à nouveau ici setMiniGameMode(null); // TOUS les joueurs attendent les résultats finaux (pas seulement le déclencheur) // Cela permet à chacun de voir les résultats des autres et de mettre à jour son historique if (miniGameTotalPlayers > 1) { setWaitingForAllPlayers(true); } else { // Solo ou seul joueur actif : mettre à jour l'historique immédiatement if (session) { const turnLabel = `Tour ${session.drawn.length}`; setMiniGameHistory(prev => [...prev, { success, amount, turnLabel }]); } } }} /> )} {/* Overlay d'attente pour le piocheur : attend que tous aient terminé */} {waitingForAllPlayers && !amEliminated && ( PERQUISITION EN COURS En attente que tous les joueurs terminent... )} {/* Overlay spectateur : perquisition en cours (info seulement) */} {amEliminated && waitingForAllPlayers && ( PERQUISITION EN COURS Les joueurs en jeu effectuent une perquisition... )} {/* ─ Modal sélection destinataire T3 (investisseur) ─ */} {showT3TargetModal && pendingT3 && session && (() => { const eliminated = session.eliminatedPlayers ?? []; // Liste des joueurs actifs sauf le piocheur lui-même const targets = session.turnOrder .filter((pid: string) => pid !== playerId && !eliminated.includes(pid)) .map((pid: string) => { const player = session.players.find((p: any) => p.id === pid); const total = computePlayerTotalMp(session.playerCards?.[pid] ?? []) + (session.playerDebts?.[pid] ?? 0); const prof = mpPlayerProfiles?.[player?.name ?? ""]; const avatar = prof ? getAvatarDisplay(prof.avatarType as "emoji" | "custom", prof.avatarId) : null; const guestEmojiForPid = (guestEmojis as Record | undefined)?.[pid]; return { pid, name: player?.name ?? "?", total, avatar, guestEmoji: guestEmojiForPid }; }); return ( {/* Header */}
Choisir le destinataire { setShowT3TargetModal(false); setT3ConfirmTarget(null); }} className="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center" >
{t3ConfirmTarget === null ? ( <> {/* Sous-titre */}

À qui veux-tu envoyer ce ticket investisseur ?

+{formatPrice(pendingT3.nextAmt)} ajouté à la dette du joueur choisi

{/* Liste des joueurs */}
{targets.map((target) => { const isLeader = target.total === minTotal; return ( setT3ConfirmTarget(target.pid)} className="w-full flex items-center gap-3 px-4 py-3 rounded-2xl border-[3px] border-black text-left relative overflow-hidden" style={{ background: "linear-gradient(135deg, rgba(109,40,217,0.25) 0%, rgba(91,33,182,0.15) 100%)", boxShadow: "4px 4px 0px #000", borderColor: isLeader ? "#fbbf24" : "#7C3AED", }} > {/* Avatar */}
{target.avatar?.type === "image" ? ( ) : target.avatar?.type === "emoji" ? ( {target.avatar.content} ) : target.guestEmoji ? ( {target.guestEmoji} ) : ( )}
{/* Nom + dette */}
{target.name} {isLeader && ★ En tête}
Dette actuelle : {formatPrice(target.total)}
{/* Flèche */} ); })}
) : (() => { const confirmTarget = targets.find(t => t.pid === t3ConfirmTarget); if (!confirmTarget) return null; return ( <> {/* Écran de confirmation */}
{/* Avatar du joueur sélectionné */}
{confirmTarget.avatar?.type === "image" ? ( ) : confirmTarget.avatar?.type === "emoji" ? ( {confirmTarget.avatar.content} ) : confirmTarget.guestEmoji ? ( {confirmTarget.guestEmoji} ) : ( )}
{/* Texte de confirmation */}

Confirmer l'envoi à

{confirmTarget.name}

Dette actuelle : {formatPrice(confirmTarget.total)}

+{formatPrice(pendingT3.nextAmt)} sera ajouté à sa dette

{/* Boutons */}
setT3ConfirmTarget(null)} className="flex-1 py-3 rounded-2xl border-[3px] border-black" style={{ background: "rgba(255,255,255,0.08)", boxShadow: "4px 4px 0px #000", ...FONT_FREDOKA, color: "#c4b5fd", fontSize: "1rem", }} > Retour { handleConfirmT3Target(t3ConfirmTarget); setT3ConfirmTarget(null); }} className="flex-1 py-3 rounded-2xl border-[3px] border-black" style={{ background: "linear-gradient(135deg, #7c3aed, #5b21b6)", boxShadow: "4px 4px 0px #000", ...FONT_BANGERS, color: "#fff", fontSize: "1.1rem", letterSpacing: "0.06em", }} > Confirmer
); })()} ); })()}
); }