SpyroTheDragonPMDM4

Aplicación Android inspirada en el universo de Spyro the Dragon. Permite explorar **Personajes **, Mundos y Coleccionables, consultar su detalle, y disfrutar de una UI moderna hecha con Jetpack Compose con soporte Light/Dark.

---

Introducción

Este proyecto consiste en la mejora y evolución de una app base de Spyro the Dragon.
El objetivo es ofrecer una experiencia más completa mediante:

• Navegación por pestañas con transiciones suaves.
• Pantallas de detalle adaptadas a orientación portrait/landscape.
• Una guía interactiva (tour) que explica la interfaz con spotlight.
• Multimedia (sonidos y voz opcional) para enriquecer la guía.
• Easter Eggs (animación con Canvas y vídeo a pantalla completa) para añadir sorpresa.

---

Características principales

Navegación y contenido

• Tabs (Bottom Bar en vertical / Navigation Rail en horizontal):
  • Personajes
  • Mundos
  • Coleccionables
• Pantalla de detalle por elemento:
  • Imagen principal (“hero”)
  • Nombre, descripción y texto ampliado
  • Diseño responsive según orientación

Guía de inicio interactiva (Onboarding / Tour)

• Guía compuesta por varios pasos que se muestran como overlay:
  • Pasos full-screen (bienvenida y cierre)
  • Pasos con spotlight que resaltan elementos reales de la UI
• Controles:
  • Siguiente / Atrás / Omitir
• Bloqueo de interacción:
  • Mientras la guía está activa, se evita navegar fuera del flujo (solo se puede interactuar con el contenido de la guía y el área permitida del spotlight).
• Mostrado automático solo la primera vez (persistencia del estado), con opción de lanzarla manualmente desde el botón “Play” de la TopAppBar.
• Audio opcional:
  • TTS (voz) para leer título + contenido del paso
  • SFX (efectos) al abrir/avanzar/retroceder/finalizar

About / Acerca de

• Diálogo About accesible desde el icono de información en la TopAppBar.

Easter Eggs

1. Mundos (vídeo)
   • Se activa con triple tap sobre el mismo mundo.
   • Reproduce un vídeo a pantalla completa (Media3/ExoPlayer).
   • Incluye botón de mute y botón de cerrar.
2. Personajes (Ripto)
   • Se activa con pulsación prolongada sobre Ripto.
   • Muestra una escena animada con Canvas (efectos mágicos) y audio opcional.

Temas y UI

• Material 3
• Light/Dark
• Componentes reutilizables y estilo consistente (cards, overlays, scrims, tipografías).

---

Tecnologías utilizadas

• Kotlin
• Jetpack Compose
• Material 3
• Navigation Compose
• Coil 3 (Compose) para carga de imágenes (crossfade)
• AndroidX SplashScreen
• DataStore (Preferences) para persistencia (guía completada, voz, sfx)
• TextToSpeech (TTS) para lectura de los pasos de la guía
• SoundPool + MediaPlayer para efectos de sonido
• Media3 / ExoPlayer para reproducción de vídeo

---

Instrucciones de uso

Requisitos

• Android Studio (versión estable reciente recomendada)
• SDK Android instalado y emulador/dispositivo configurado

Ejecutar el proyecto

1. Clona el repositorio:

   git clone https://github.com/andresito87/SpyroTheDragonApp.git

2. Abre el proyecto en Android Studio.
3. Espera a que Gradle sincronice dependencias.
4. Ejecuta la app (Run ▶) en emulador o dispositivo.

---

Estructura del proyecto (resumen)

• dam.pmdm.spyrothedragon

  • MainActivity (Splash + Theme + SpyroApp)

• dam.pmdm.spyrothedragon.data

  • SpyroStaticData (listados estáticos)

• dam.pmdm.spyrothedragon.domain.models

  • SpyroItem, Character, World, Collectible

• dam.pmdm.spyrothedragon.ui

  • SpyroApp (composición principal: navegación, diálogos, guía)

• dam.pmdm.spyrothedragon.ui.navigation

  • SpyroDestination, SpyroNavHost, tabs/rail y helpers de navegación

• dam.pmdm.spyrothedragon.ui.screens

  • CharactersScreen, WorldsScreen, CollectiblesScreen, DetailsScreen

• dam.pmdm.spyrothedragon.ui.components

  • SpyroCard, SpyroBackground, AboutDialog, etc.

• dam.pmdm.spyrothedragon.ui.guide

  • Tour interactivo (controller, prefs, overlay/spotlight, audio, targets)

• dam.pmdm.spyrothedragon.ui.eastereggs

  • Diálogos de easter eggs (Ripto / vídeo Mundos)

• dam.pmdm.spyrothedragon.ui.theme

  • Colores, tipografías y SpyroTheme

---

Conclusiones del desarrollador

El desarrollo se ha centrado en mejorar la experiencia de usuario y en consolidar buenas prácticas con Compose:

• Diseño responsive (portrait/landscape) y navegación clara.
• Implementación de un tour real con spotlight, persistencia y control de interacción.
• Integración de multimedia (SFX, TTS y vídeo) de manera controlada y opcional.
• Arquitectura modular con componentes reutilizables y responsabilidades separadas.
• Aprendizaje práctico de estado en Compose, recomposición, rememberSaveable, animaciones y efectos (LaunchedEffect).

---

Capturas de pantalla

Personajes	Mundos	Coleccionables
Inicio de la guía	Guía: Paso 4	Guía: Paso 5
Guía: Paso 8	Pantalla Acerca de	Easter Egg - Reproducción
Easter Egg - Animación	Personajes - Modo Claro	Detalles - Modo Claro

---

	Barra Navegación Lateral - Landscape
	Detalles - Landscape
	Paso 3 de la Guía - Landscape