¡Piensa Rápido!

Juego web multijugador en tiempo real inspirado en el "game feel" de Taco Gato Cabra Queso Pizza, adaptado a navegador con salas por código, turnos, claim sobre la pila, cartas especiales con gestos, animaciones y sonidos. Diseñado con una arquitectura de servidor autoritativo para evitar desincronizaciones. El juego permite crear salas con códigos de 5 caracteres, un lobby completo con host, ready/unready, start game y transferencia de host al desconectar. El servidor autoritativo valida turnos, flips, claims, penalizaciones y gestos, mientras que los clientes solo ven conteos de cartas de otros jugadores (no su mano). Sistema de palabras circular: taco → gato → capibara → churro → donut.

Quería construir un proyecto divertido y "jugable" que demostrara habilidades más allá de páginas estáticas: sincronización en tiempo real con varios jugadores, evitar "desync" (clientes con estados distintos), traducir un juego físico a web sin perder la esencia (reflejos, errores involuntarios, tensión), diseñar una UI con game feel: animaciones, micro-feedback y sonido, y hacerlo desplegable en servicios gratuitos (Vercel + Render), lidiando con spin-down y latencia inicial.

Construí un monorepo con un servidor Socket.IO que mantiene el estado de cada sala en memoria y actúa como fuente de verdad (arquitectura autoritativa). El cliente Next.js se encarga de la UI interactiva, animaciones y gestos, pero nunca decide el estado final: solo envía inputs (flip/claim/gestos) y renderiza el ROOM_STATE emitido por el servidor. Para mejorar la experiencia real: implementé claims tocando la pila (sin botón) para imitar el juego físico y permitir errores involuntarios, añadí cartas especiales que requieren gestos (click frenzy, burbujas, círculo) y validación robusta, optimicé la carga de assets con WebP, next/image y precarga de imágenes críticas para que el primer turno sea fluido, y en producción, añadí UI de "preparando servidor" para mitigar el spin-down de Render.

• Multijugador online en tiempo real con salas por código (5 caracteres)
• Lobby completo: host, ready/unready, start game, transferencia de host al desconectar
• Servidor autoritativo (anti-desync): el servidor valida turnos, flips, claims, penalizaciones y gestos
• Modelo de estado seguro: clientes solo ven counts de cartas de otros jugadores (no su mano)
• Sistema de palabras circular: taco → gato → capibara → churro → donut
• Claim sobre la pila (sin botón): falso claim = penalización inmediata, si no todos claimean pierden los que no claimearon, si todos claimean pierde el último (más lento)
• Cartas especiales con gestos: Click frenzy, Bubbles (posiciones deterministas), Circle (validación geométrica de círculo)
• Animaciones y microinteracciones: cartas volando al centro, pila con crecimiento visual + bounce, shake + "Oops" y feedback "¡Bien!", timeline de palabras con resaltado y pulso
• Sonidos y música: SFX por evento (turn win/lose, oops, especiales), pitch dinámico en lanzamientos según tamaño de pila, música opcional desactivada por defecto
• Optimizaciones móviles: pilas estáticas, animaciones simplificadas, efectos desactivados, GPU acceleration, límite de cartas voladoras
• Deploy: Vercel (web) + Render (server), con CORS y warm-up /health