Sobre el proyecto
Ludo-Base es una experiencia de juego de Ludo descentralizada construida sobre Base, empaquetada como una aplicación de Next.js 16 diseñada para estar lista para Farcaster. Combina una interfaz de dashboard de glassmorphism con conectividad de billetera onchain y un flujo de salas multijugador.
Lo que hace
- Lobby del juego: un flujo de configuración con encabezados de sección estilo píldora, selección horizontal de modo de juego, tipos de partida (1v1, 2v2, 4P), un área de apuesta de tarifa de entrada con entrada numérica grande, controles de paso y chips de selección rápida, además de botones de llamada a la acción QUICK MATCH y WITH FRIENDS.
- Jugabilidad: app/components/Board.tsx implementa el tablero de Ludo central, y app/components/SnakesBoard.tsx proporciona una variante de serpientes y escaleras.
- Multijugador: PeerJS junto con hooks/TeamUpContext.tsx gestiona el estado de anfitrión/unión de sala para jugar con amigos.
- Persistencia: lib/matchRecorder.ts contiene ayudantes de persistencia de resultados de partidas, respaldados por Supabase.
- Billetera y onchain: Wagmi más Coinbase OnchainKit proporcionan la integración de la billetera para la red Base.
Stack tecnológico
Next.js 16 (App Router), React 19, TypeScript 5, Tailwind CSS 4, Framer Motion, Wagmi + Coinbase OnchainKit, Supabase y PeerJS.
Dirección de UI
La dirección visual documentada es una superficie de vidrio terminal oscuro con acentos cian (#00E5FF) para estados de enfoque y activos, fondos degradados de carbón/grafito (#0B0F14 a #141A22) con ruido de textura sutil y texto de soporte monoespaciado. El README también registra convenciones para rutas de archivos absolutas relativas al repositorio, nombres de archivos de componentes React en PascalCase y textos de interfaz cortos y orientados a la acción, mantenidos consistentes entre móvil y escritorio.
Ejecución local
Se requieren Node.js 20+ y npm. Instale las dependencias con npm install, luego inicie el servidor de desarrollo con npm run dev; la aplicación se ejecuta en http://localhost:3000. Una compilación de producción utiliza npm run build seguido de npm start, y el linting está disponible a través de npm run lint. Se debe crear un archivo .env.local con valores para el contexto de despliegue elegido, cubriendo billetera/red, Supabase e integraciones de Farcaster/Neynar.
Estado y advertencias
El README indica su estado actual a marzo de 2026, con entradas recientes en el registro de cambios centradas en el diseño del lobby y la paridad del padding, el estilo del control de apuestas, los estados del tipo de partida y ajustes de tema/pie de página. Algunos paneles aún utilizan datos provisionales o simulados mientras se expande el cableado del backend, y los flujos de TeamUp y persistencia de partidas aún requieren un endurecimiento continuo para reconexiones y casos límite. Se incluyen un documento de diseño de juego y una guía de activos visuales en el repositorio.
Comments
0 Rating appears after 10 ratings
Sign in to join the discussion.