feat: shuffle mission reveal cards randomly on each client

client/src/components/MissionReveal.tsx

@@ -1,5 +1,5 @@
 import { motion } from 'framer-motion';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import Image from 'next/image';
 
 interface MissionRevealProps {
@@ -8,6 +8,16 @@ interface MissionRevealProps {
 }
 
 export default function MissionReveal({ votes, onFinished }: MissionRevealProps) {
+    // Barajar votos de forma aleatoria en cada cliente (orden diferente para cada jugador)
+    const shuffledVotes = useMemo(() => {
+        const shuffled = [...votes];
+        for (let i = shuffled.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+        }
+        return shuffled;
+    }, [votes]);
+
     // Timer de seguridad: 5 segundos y avanza
     useEffect(() => {
         const timer = setTimeout(() => {
@@ -28,7 +38,7 @@ export default function MissionReveal({ votes, onFinished }: MissionRevealProps)
             </h2>
 
             <div className="flex gap-4 justify-center mb-12 flex-wrap max-w-[90vw]">
-                {votes.map((vote, idx) => (
+                {shuffledVotes.map((vote, idx) => (
                     <motion.div
                         key={idx}
                         className="w-32 h-48 rounded-xl flex items-center justify-center shadow-2xl relative overflow-hidden"
@@ -55,7 +65,7 @@ export default function MissionReveal({ votes, onFinished }: MissionRevealProps)
                 className="text-white text-xl font-mono mt-8 text-center"
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
-                transition={{ delay: votes.length * 0.3 + 0.5 }}
+                transition={{ delay: shuffledVotes.length * 0.3 + 0.5 }}
             >
                 <span className="animate-pulse">Analizando resultado estratégico...</span>
             </motion.div>