```react import React, { useState, useEffect, useCallback } from 'react'; // Conjunto de 24 Emojis (48 cartas en total para cuadrícula de 8x6) const EMOJIS = [ '🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐨', '🐯', '🦁', '🐮', '🐷', '🐸', '🐵', '🐔', '🐧', '🐦', '🦆', '🦉', '🦇', '🐺', '🐗', '🐴' ]; const App = () => { const [gameState, setGameState] = useState('registration'); // registration, playing, finished const [players, setPlayers] = useState([ { id: 1, name: '', score: 0 }, { id: 2, name: '', score: 0 }, { id: 3, name: '', score: 0 }, { id: 4, name: '', score: 0 }, { id: 5, name: '', score: 0 }, { id: 6, name: '', score: 0 }, ]); const [currentPlayerIndex, setCurrentPlayerIndex] = useState(0); const [cards, setCards] = useState([]); const [flippedCards, setFlippedCards] = useState([]); const [isLocked, setIsLocked] = useState(false); // Inicializar el juego const initializeGame = useCallback(() => { const shuffledCards = [...EMOJIS, ...EMOJIS] .sort(() => Math.random() - 0.5) .map((emoji, index) => ({ id: index, emoji, isFlipped: false, isMatched: false, })); setCards(shuffledCards); setFlippedCards([]); setCurrentPlayerIndex(0); setIsLocked(false); setPlayers(prev => prev.map(p => ({ ...p, score: 0 }))); setGameState('playing'); }, []); const handleNameChange = (index, value) => { const newPlayers = [...players]; newPlayers[index].name = value; setPlayers(newPlayers); }; const startRegistration = (e) => { e.preventDefault(); const validatedPlayers = players.map((p, i) => ({ ...p, name: p.name.trim() !== '' ? p.name : `Jugador ${i + 1}` })); setPlayers(validatedPlayers); initializeGame(); }; const handleCardClick = (index) => { if (isLocked) return; if (cards[index].isFlipped || cards[index].isMatched) return; const newCards = [...cards]; newCards[index].isFlipped = true; setCards(newCards); const newFlippedCards = [...flippedCards, index]; setFlippedCards(newFlippedCards); if (newFlippedCards.length === 2) { setIsLocked(true); const match = newCards[newFlippedCards[0]].emoji === newCards[newFlippedCards[1]].emoji; if (match) { setTimeout(() => { const matchedCards = [...newCards]; matchedCards[newFlippedCards[0]].isMatched = true; matchedCards[newFlippedCards[1]].isMatched = true; setCards(matchedCards); const newPlayers = [...players]; newPlayers[currentPlayerIndex].score += 1; setPlayers(newPlayers); setFlippedCards([]); setIsLocked(false); if (matchedCards.every(c => c.isMatched)) { setGameState('finished'); } }, 600); } else { setTimeout(() => { const resetCards = [...newCards]; resetCards[newFlippedCards[0]].isFlipped = false; resetCards[newFlippedCards[1]].isFlipped = false; setCards(resetCards); setCurrentPlayerIndex((prev) => (prev + 1) % players.length); setFlippedCards([]); setIsLocked(false); }, 1200); // Un poco más de tiempo para TV } } }; const getWinner = () => { let maxScore = -1; let winners = []; players.forEach(p => { if (p.score > maxScore) { maxScore = p.score; winners = [p]; } else if (p.score === maxScore) { winners.push(p); } }); return winners; }; // --- COMPONENTE: PANTALLA DE REGISTRO PARA TV --- if (gameState === 'registration') { return (

🎭 MEMORAMA EMOJI

Registra a los 6 jugadores para comenzar

); } // --- COMPONENTE: PANTALLA DE JUEGO PARA TV --- return (