Guardianes de Parques Nacionales

01

Contexto

Videojuego web 2D educativo. El jugador recorre un parque como guardián, acepta misiones, observa especies y llena una bitácora.

Responsabilidades

• Contribuciones al frontend con Next.js, React y TypeScript, incluido el motor de juego en Canvas 2D
• Contribuciones al backend en FastAPI: estado del jugador, misiones y procesamiento de eventos de partida
• Integración entre la interfaz, la API y Supabase (cuentas, sesiones y modo invitado)
• Pruebas del backend con pytest y documentación, incluidos los manuales de usuario

02

Problema

Acercar los parques nacionales con un objetivo de aprendizaje y no de competencia: observar sin molestar, respetar los senderos y elegir bien.

03

Solución

Un juego en el navegador con un motor propio en Canvas 2D, el contenido educativo separado del código y un backend que guarda el progreso y procesa los eventos de la partida.

Implementado

• Mapa de Costa Rica con los seis parques
• Escena de parque en Canvas 2D con cámara, colisiones y orden por profundidad
• Personaje jugable en ocho direcciones y personajes con diálogos según las condiciones de la partida
• Cuentas con Supabase y modo invitado con identidad local
• Logros e insignias por parque
• API de misiones: estados, inicio y completado
• Inventario, bitácora y progreso con índice de conservación
• Procesamiento de eventos de partida
• Analítica del comportamiento y los intereses del jugador
• Validación de sesiones de Supabase con clave pública
• Resumen de cierre de parque y reanudación de la partida

04

Arquitectura

La interfaz, en Next.js, React y TypeScript, usa un motor propio en Canvas 2D independiente de React (cámara, colisiones y orden por profundidad). El backend, en FastAPI, sirve el estado del jugador y procesa eventos sobre Supabase (PostgreSQL), con un almacén JSON local para trabajar sin conexión y para las pruebas.

05

Tecnologías

• TypeScript
• React
• Next.js
• Python
• FastAPI
• Pydantic
• Supabase
• pytest

06

Decisiones técnicas

• El contenido educativo vive en JSON con esquemas, separado del motor, para ampliarlo sin tocar código.
• Un cerrojo por jugador evita que dos peticiones simultáneas dupliquen recompensas.
• Los tokens se validan con la clave pública de Supabase: el backend no necesita secretos compartidos para autenticar.
• Las pruebas usan un almacén local y nunca escriben en la base de datos real.

07

Resultados verificables

• 437 pruebas del backend pasan; 36 pruebas contra Supabase real se omiten sin credenciales (8 de octubre de 2026).
• Santa Rosa es el parque completo del alcance vigente; Rincón de la Vieja tiene escena.

Límites conocidos

• La transmisión en directo (WebRTC) está asignada a otro integrante y sigue pendiente.
• El audio está desactivado a propósito.

08

Capturas y evidencias

Interfaz en escritorio y móvil

Abrir a tamaño completo ((se abre en una pestaña nueva))

Abrir a tamaño completo ((se abre en una pestaña nueva))

Galería de pantallas

• Abrir a tamaño completo ((se abre en una pestaña nueva))

• Abrir a tamaño completo ((se abre en una pestaña nueva))

• Abrir a tamaño completo ((se abre en una pestaña nueva))

• Abrir a tamaño completo ((se abre en una pestaña nueva))

• Abrir a tamaño completo ((se abre en una pestaña nueva))

Capturas reales del juego en modo invitado, en un entorno local con una copia temporal de los datos. El arte pertenece al proyecto académico en equipo.

Cerrar

Documentación y pruebas

• Manuales de usuario y técnico de la entrega final, README con el estado de cada funcionalidad, guía de contribución y pruebas del frontend y del backend.