feat: app completa recordaLexia (fases 1-5)
App web familiar de rutinas visuales para niños con TDAH: muestra cada día el material del cole y las rutinas de tarde, con gamificación por monedas y tienda de recompensas. Multi-niño y bilingüe ES/CA. Uso doméstico/homelab. Backend (Spring Boot 3.5 / Java 21 / Gradle): - Dominio por capas, PostgreSQL + Liquibase, datos semilla. - API REST con DTOs: /today, toggle con monedas y bonos de bloque/día, monedero, tienda/canje, ajustes y CRUD del panel de padres. - Seguridad ligera por PIN (BCrypt + sesion en memoria), sin Keycloak. - Tests JUnit: generacion del dia, monedas/bonos con reversion, canje, seguridad. Frontend (Angular 19, standalone + signals): - Perfiles, Home (Tablero y Foco), Tienda y panel de padres (5 pestañas). - Tipografia OpenDyslexic conmutable (accesibilidad), i18n ES/CA, TTS y sonido. - Tokens de diseño fieles al handoff (paleta, animaciones, monedas voladoras). Empaquetado: - Docker multi-stage + docker-compose (PostgreSQL + backend + Nginx). - Decisiones de arquitectura documentadas en docs/adr.
This commit is contained in:
31
docs/adr/0001-spring-boot-3x.md
Normal file
31
docs/adr/0001-spring-boot-3x.md
Normal file
@@ -0,0 +1,31 @@
|
||||
# ADR 0001 — Fijar Spring Boot 3.5.x (no Spring Boot 4)
|
||||
|
||||
- **Estado:** aceptada
|
||||
- **Fecha:** 2026-06-21
|
||||
- **Fase:** 1 (esqueleto)
|
||||
|
||||
## Contexto
|
||||
|
||||
Al generar el backend con Spring Initializr, la versión por defecto ofrecida es
|
||||
**Spring Boot 4.1.0** (arrastra Spring Framework 7 y un layout de *starters*
|
||||
modular nuevo: `spring-boot-starter-webmvc`, starters de test por módulo).
|
||||
|
||||
El contrato del proyecto (CLAUDE.md y prompt director) fija explícitamente
|
||||
**Spring Boot 3.x / Java 21**.
|
||||
|
||||
## Decisión
|
||||
|
||||
Se fija el backend a **Spring Boot 3.5.15** (última 3.x disponible en Initializr),
|
||||
con `spring-boot-starter-web`, `liquibase-core` y `spring-boot-starter-test`.
|
||||
|
||||
## Motivación
|
||||
|
||||
- Cumplir el stack contratado sin introducir un salto de versión mayor no aprobado.
|
||||
- Boot 4 / Spring 7 es muy reciente; el ecosistema y los ejemplos del equipo
|
||||
siguen sobre 3.x.
|
||||
|
||||
## Consecuencias
|
||||
|
||||
- Cuando se quiera adoptar Boot 4 deberá hacerse mediante un ADR propio que
|
||||
contemple la migración de starters y `jakarta`.
|
||||
- El wrapper de Gradle queda fijado por Initializr; no se requiere Gradle en host.
|
||||
39
docs/adr/0002-tipografia-opendyslexic.md
Normal file
39
docs/adr/0002-tipografia-opendyslexic.md
Normal file
@@ -0,0 +1,39 @@
|
||||
# ADR 0002 — OpenDyslexic como tipografía por defecto (conmutable)
|
||||
|
||||
- **Estado:** aceptada
|
||||
- **Fecha:** 2026-06-21
|
||||
- **Fase:** 1 (esqueleto / preparación de tipografías)
|
||||
|
||||
## Contexto
|
||||
|
||||
El handoff de diseño fija como tokens tipográficos **Fredoka** (títulos/labels) y
|
||||
**Nunito** (texto). Para una app dirigida a peques con TDAH (y con vocación de
|
||||
lectura accesible) se solicita usar **OpenDyslexic**, fuente diseñada para mejorar
|
||||
la legibilidad. Esto entra en tensión con los tokens fijos del handoff, por lo que
|
||||
se decide cómo conviven.
|
||||
|
||||
## Decisión
|
||||
|
||||
1. **OpenDyslexic es la tipografía por defecto y se aplica a TODO el texto**
|
||||
(títulos, etiquetas y cuerpo).
|
||||
2. **Es una preferencia conmutable por niño, activada de serie.** Al desactivarla,
|
||||
la UI cae a las tipografías de marca del handoff (Fredoka/Nunito).
|
||||
3. **Las tres familias se empaquetan en local** vía `@fontsource` (sin CDN): la
|
||||
app funciona en un kiosko sin internet garantizado.
|
||||
|
||||
## Implementación
|
||||
|
||||
- Fichero único de tokens `frontend/src/styles/_theme.scss`: define
|
||||
`--font-display` y `--font-body`, que por defecto apuntan a OpenDyslexic.
|
||||
- Interruptor: atributo `data-dyslexia-font` en `<html>`. Con valor `off`, los
|
||||
tokens caen a las familias de marca. Se inicializa a `on` en `index.html`.
|
||||
- `FontPreferenceService` aplica/persiste la preferencia (hoy en `localStorage`).
|
||||
|
||||
## Consecuencias
|
||||
|
||||
- La UI nunca referencia una familia concreta, solo `var(--font-display/-body)`:
|
||||
el cambio de tipografía no toca componentes.
|
||||
- **Pendiente Fase 5:** la preferencia se conectará a los ajustes por niño del
|
||||
backend, sustituyendo el almacenamiento en `localStorage`.
|
||||
- Se cargan solo los subsets `latin` y `latin-ext` (suficientes para ES/CA) para
|
||||
no inflar el bundle.
|
||||
51
docs/adr/0003-dominio-y-seguridad-fase2.md
Normal file
51
docs/adr/0003-dominio-y-seguridad-fase2.md
Normal file
@@ -0,0 +1,51 @@
|
||||
# ADR 0003 — Decisiones de dominio y seguridad (Fase 2 backend)
|
||||
|
||||
- **Estado:** aceptada
|
||||
- **Fecha:** 2026-06-21
|
||||
- **Fase:** 2 (dominio + API + seguridad)
|
||||
|
||||
## Contexto
|
||||
|
||||
El contrato de backend deja varias decisiones "a tu criterio". Se documentan aquí
|
||||
las tomadas al implementar el dominio, la lógica de negocio y la seguridad.
|
||||
|
||||
## Decisiones
|
||||
|
||||
1. **i18n por columnas embebidas** `label_es` / `label_ca` (no tabla de
|
||||
traducciones). Encaja con el shape de los DTOs y simplifica las consultas.
|
||||
|
||||
2. **Capas, sin hexagonal completa.** Entidad JPA como modelo de dominio (con
|
||||
comportamiento donde aporta: monedero en `Child`, marcado en `DailyTask`), DTOs
|
||||
tipo `record` en el borde. **Nunca se exponen entidades**.
|
||||
|
||||
3. **Mañana vs. tarde.** La mañana se modela con `Activity` (catálogo) +
|
||||
`WeeklyTemplateEntry` (asignación por día). La tarde con `AfternoonRoutine`
|
||||
directa por día. Se evita una FK polimórfica.
|
||||
|
||||
4. **Eventos = banner, no tareas.** Los `SpecialEvent` (examen/deberes) se muestran
|
||||
en el banner informativo del día (`specialEvents[]`), NO se materializan como
|
||||
`DailyTask` marcables (coherente con el prototipo). El enum `TaskOrigin.EVENT`
|
||||
queda disponible por si se decide lo contrario más adelante.
|
||||
|
||||
5. **Bonos reconciliables.** El bono de bloque y el de día se modelan como
|
||||
transacciones de monedas con el mismo motivo: +importe al otorgar, -importe al
|
||||
revertir. "Suma neta > 0" indica bono activo. Hace el marcar/desmarcar robusto
|
||||
ante cualquier secuencia.
|
||||
|
||||
6. **Seguridad ligera.** PIN de padres con hash BCrypt; al validarlo se abre una
|
||||
sesión en memoria identificada por un valor opaco (cabecera `X-Parent-Session`).
|
||||
`/api/parents/**` exige rol PARENT; el resto (kiosko del niño) es abierto. Todo
|
||||
encapsulado en el paquete `security` para poder sustituirlo por Keycloak.
|
||||
|
||||
7. **Semilla por `DataSeeder`** (ApplicationRunner, solo si la BD está vacía), no
|
||||
por Liquibase. Más mantenible y tipado. Desactivable con
|
||||
`recordalexia.seed.enabled=false` (lo usan los tests).
|
||||
|
||||
8. **Tests sobre H2** (modo PostgreSQL) con Liquibase. Se valorará Testcontainers
|
||||
en una iteración posterior para fidelidad total con PostgreSQL.
|
||||
|
||||
## Consecuencias
|
||||
|
||||
- Los textos visibles siempre viajan en ES y CA; el frontend elige idioma.
|
||||
- Cambiar a Keycloak no afecta a controladores ni servicios de negocio.
|
||||
- La zona horaria del negocio (Europe/Madrid) se centraliza en un `Clock` inyectable.
|
||||
114
docs/prompt-claude-code-backend-rutinas-tdah.md
Normal file
114
docs/prompt-claude-code-backend-rutinas-tdah.md
Normal file
@@ -0,0 +1,114 @@
|
||||
# Backend de recordaLexia (app de rutinas para niños con TDAH) — Spring Boot 3 / Java 21
|
||||
|
||||
## Objetivo
|
||||
Implementa el backend de una app web familiar (uso doméstico, homelab) que presenta
|
||||
a niños con TDAH sus tareas del día: material para el cole por la mañana y rutinas de
|
||||
la tarde, con gamificación por monedas y tienda de recompensas. Los padres configuran
|
||||
horario, eventos y premios. Es MULTI-NIÑO y BILINGÜE (español / catalán).
|
||||
|
||||
Trabajas en LOCAL. No despliegues en nube ni asumas infraestructura corporativa.
|
||||
|
||||
## Stack (NADA corporativo: ni Keycloak, ni Gravitee, ni Camunda, ni K8s, ni Jenkins)
|
||||
- Java 21, Spring Boot 3.x, Gradle 8.
|
||||
- PostgreSQL (Liquibase para el esquema).
|
||||
- Spring Web (REST), Spring Data JPA, Spring Security (auth ligera, ver abajo).
|
||||
- Arquitectura limpia por capas (controller / service / repository / domain). No hace
|
||||
falta hexagonal completa, pero mantén el dominio aislado de JPA donde sea razonable.
|
||||
- Docker multi-stage + docker-compose (postgres + backend; deja hueco para el frontend
|
||||
Angular tras Nginx).
|
||||
- Comenta el código en español, sobre todo la lógica de negocio.
|
||||
|
||||
## i18n (requisito derivado del diseño)
|
||||
La UI es ES/CA. Todos los textos visibles para el niño (materiales, actividades,
|
||||
rutinas, premios, tipos de evento) deben almacenarse con sus dos variantes:
|
||||
campos `labelEs` y `labelCa` (o una tabla de traducciones, a tu criterio). La API
|
||||
devuelve ambas y el frontend elige según el idioma activo.
|
||||
|
||||
## Modelo de dominio
|
||||
- Child: id, name, mascot (emoji), accentColor, age, coins (saldo),
|
||||
departureTime (hora de salida de la mañana, para el temporizador),
|
||||
y ajustes: viewMode (BOARD | FOCUS), soundEnabled, ttsEnabled, language (ES | CA).
|
||||
- ParentUser: credenciales del panel de padres (PIN configurable, no hardcodeado).
|
||||
- Activity (actividad del cole, p. ej. "Gimnasia"): id, labelEs, labelCa, icon (emoji),
|
||||
color.
|
||||
- MaterialItem: id, labelEs, labelCa, icon (emoji), color, categoría. Relación N:M con
|
||||
Activity (Gimnasia -> equipación, zapatillas, toalla, agua).
|
||||
- WeeklyTemplateEntry: plantilla recurrente. childId, dayOfWeek (LUN–VIE),
|
||||
slot (MORNING | AFTERNOON), referencia a Activity (mañana) o a una rutina de tarde,
|
||||
order (para reordenar), coinsReward. Define "lo normal" de cada día.
|
||||
- AfternoonRoutine: rutina de tarde recurrente. childId, dayOfWeek, labelEs, labelCa,
|
||||
icon, color, order. (Reordenables en el panel de padres.)
|
||||
- SpecialEvent: childId, date, type (EXAM | HOMEWORK), titleEs, titleCa, icon, color.
|
||||
- DailyTask: INSTANCIA de un día. childId, date, slot, labelEs, labelCa, icon, color,
|
||||
status (PENDING | DONE), coinsReward, completedAt, origen (plantilla o evento).
|
||||
- CoinTransaction: childId, date, amount (positivo al ganar, negativo al canjear), motivo.
|
||||
- Reward: premio canjeable. labelEs, labelCa, icon, color, cost (monedas), active.
|
||||
- RewardRedemption: childId, rewardId, date, cost.
|
||||
|
||||
## Lógica de negocio clave
|
||||
- Generación del día: al pedir el día de hoy (o vía scheduler matutino), si no existen
|
||||
DailyTask para childId+fecha, se generan desde (a) WeeklyTemplateEntry y rutinas del
|
||||
dayOfWeek y (b) SpecialEvent de esa fecha. Idempotente.
|
||||
- Marcar DailyTask como DONE: cambiar estado, registrar completedAt, sumar coinsReward,
|
||||
crear CoinTransaction. Si se desmarca, revertir de forma coherente.
|
||||
- Bono por completar bloque (mañana/tarde) y por completar el día entero: aplica
|
||||
coinsPerBlock / coinsPerDay configurables (ver gamificación).
|
||||
- Tienda: al canjear, validar saldo suficiente, descontar, crear CoinTransaction
|
||||
(negativa) y RewardRedemption. Si no llega, devolver error claro ("te faltan N").
|
||||
- Progreso del día por slot y global, por niño.
|
||||
- Zona horaria fija (Europe/Madrid) para decidir qué es "hoy".
|
||||
- Conservar histórico de DailyTask y canjes (no borrar al pasar el día).
|
||||
|
||||
## Gamificación (configurable)
|
||||
Parámetros por niño (o globales con override por niño): coinsPerTask (def. 5),
|
||||
coinsPerBlock (def. 10), coinsPerDay (def. 20). Expónlos para que el panel de padres
|
||||
los edite.
|
||||
|
||||
## API REST (orientativa, ajústala con criterio)
|
||||
- GET /api/children -> perfiles (con mascot, color, edad, coins).
|
||||
- GET /api/children/{id}/today -> { morning[], afternoon[], specialEvents[],
|
||||
progress, wallet, timer } (timer derivado de departureTime).
|
||||
- POST /api/tasks/{taskId}/toggle -> marca/desmarca y ajusta monedas.
|
||||
- GET /api/children/{id}/wallet -> saldo + historial.
|
||||
- GET /api/children/{id}/rewards -> tienda visible para ese niño.
|
||||
- POST /api/rewards/{rewardId}/redeem -> canje (valida saldo, descuenta).
|
||||
- PUT /api/children/{id}/settings -> viewMode, sound, tts, language, departureTime.
|
||||
- Panel de padres (requiere auth):
|
||||
- CRUD de Child.
|
||||
- CRUD de Activity y MaterialItem (con icon, color, labelEs/labelCa, asociaciones).
|
||||
- CRUD de WeeklyTemplateEntry (horario por niño).
|
||||
- CRUD de AfternoonRoutine (con order).
|
||||
- CRUD de SpecialEvent.
|
||||
- CRUD de Reward.
|
||||
- PUT de parámetros de gamificación.
|
||||
|
||||
## Seguridad (ligera, doméstica)
|
||||
- Modo kiosko (niño): lectura + marcar tareas + canjear, sin login molesto
|
||||
(token de dispositivo o sesión persistente del kiosko).
|
||||
- Panel de padres: protegido por PIN configurable. Roles CHILD y PARENT.
|
||||
- Sin Keycloak/OAuth2 en esta fase; déjalo encapsulado por si se externaliza luego.
|
||||
|
||||
## Datos semilla (reproducir el prototipo de Claude Design)
|
||||
- Niños: Nora 🦊 (#F2A65A, 7, 42 monedas), Leo 🐢 (#5BC0BE, 9, 28),
|
||||
Mía 🦉 (#A78BD0, 6, 55).
|
||||
- Material de cole (ES/CA): estuche/estoig ✏️, libro de mates/llibre de mates 📘,
|
||||
flauta 🎵, ropa de gimnasia/roba d'EF 👕, zapatillas/sabatilles 👟, almuerzo/esmorzar 🍎.
|
||||
- Rutinas de tarde: deshacer la mochila/buidar la motxilla 🎒, merendar/berenar 🥪,
|
||||
hacer los deberes/fer els deures 📝, practicar piano 🎹, recoger la mesa/parar taula 🍽️.
|
||||
- Actividades: Gimnasia 🤸 (equipación, zapatillas, toalla, agua), Música 🎵
|
||||
(flauta, libreta), Matemáticas 📘 (libro, regla, estuche), Lengua 📖 (lectura, cuaderno).
|
||||
- Premios (ES/CA): 30 min tablet/tauleta 🎮 (20), peli en familia/pel·lícula 🍿 (50),
|
||||
tarde en el parque/tarda al parc 🛝 (40), elijo la cena/trio el sopar 🍕 (30),
|
||||
30 min más despierto/més despert 🌙 (60), sorpresa dino 🦖 (80).
|
||||
- Una semana de plantilla de ejemplo y un par de eventos (Examen de Lengua 📋,
|
||||
Ficha de mates 📎) para poder probar /today al arrancar.
|
||||
- PIN de padres por defecto 1234 (configurable).
|
||||
|
||||
## Entregables
|
||||
- Proyecto Gradle compilable, estructura por capas.
|
||||
- Entidades JPA + Liquibase + datos semilla anteriores.
|
||||
- Controladores REST con DTOs (no exponer entidades), con labelEs/labelCa.
|
||||
- Tests unitarios de generación del día, marcado/monedas (incl. bonos de bloque/día)
|
||||
y canje de premios (JUnit 5 + Mockito; integración con MockMvc en endpoints clave).
|
||||
- Dockerfile multi-stage + docker-compose.yml (postgres + backend).
|
||||
- README breve: arranque local y notas para el homelab.
|
||||
129
docs/prompt-claude-code-recordalexia-director.md
Normal file
129
docs/prompt-claude-code-recordalexia-director.md
Normal file
@@ -0,0 +1,129 @@
|
||||
# recordaLexia — Construcción con Claude Code (prompt director, afinado al handoff)
|
||||
|
||||
## Qué eres y qué vas a construir
|
||||
Actúa como arquitecto/desarrollador full-stack. Construye **recordaLexia**, una app
|
||||
web familiar para que niños con TDAH vean cada día, en una tablet en modo kiosko
|
||||
(horizontal), qué material llevar al cole y qué rutinas hacer por la tarde, con
|
||||
gamificación por monedas y tienda de recompensas. Es multi-niño y bilingüe ES/CA.
|
||||
|
||||
Trabajas en LOCAL (Claude Code Desktop). Nada de nube ni infraestructura corporativa.
|
||||
|
||||
## Punto de partida: handoff de Claude Design (FUENTE DE VERDAD VISUAL)
|
||||
El diseño está en `app-de-rutinas-visuales-para-tdah/project/Rutinas TDAH.dc.html`
|
||||
(+ `support.js`). Es un prototipo en HTML con su propio runtime (DCLogic). NO lo
|
||||
incrustes: reconstruye sus pantallas y componentes en Angular 19 respetando con
|
||||
fidelidad los tokens, tamaños, estados y microinteracciones que se describen abajo.
|
||||
|
||||
## Sistema de diseño (extraído del handoff — úsalo como design tokens)
|
||||
- Tipografía: **Fredoka** (títulos, etiquetas, números; pesos 400–700) y
|
||||
**Nunito** (texto; 400–900). Etiquetas de tareas en MAYÚSCULAS.
|
||||
- **Iconografía = emojis** (decisión deliberada del diseño). Mantenerla: cada
|
||||
material/actividad/premio lleva su emoji. No introduzcas una librería de iconos.
|
||||
- Colores de acento por categoría: `#F2A65A` (naranja), `#5B8DEF` (azul),
|
||||
`#A78BD0` (morado), `#7FBF6B` (verde), `#5BC0BE` (teal), `#F4C95D` (amarillo),
|
||||
`#EC8FA4` (rosa).
|
||||
- Texto: principal `#2A3142`; secundarios `#5A6B82`, `#7A879B`, `#8C99AB`, `#9FB0BD`.
|
||||
- Superficies: blanco `#fff`, gris suave `#F4F7F9`/`#EEF2F6`; bordes `#E6ECF0`,
|
||||
`#D3DCE3`, `#DCE3EA`. Fondo de pantalla: `#EFF4F6` con gradientes radiales suaves
|
||||
(`#FBF4E9`, `#E2F0EC`) y dos "blobs" orgánicos difuminados.
|
||||
- Monedas: pill con fondo `#FFF6E0`, texto `#C7912B`, emoji 🪙.
|
||||
- Tarjeta de tarea: borde 3px, radio 26px, min-height 92px. En estado COMPLETADO
|
||||
el fondo pasa a un tinte del color (color + alpha `24`), el borde toma el color,
|
||||
anima `pop` y aparece un check circular de 60px (`checkPop`).
|
||||
- Tiles de icono: 66px, radio 20px, fondo en tinte del color. Hero (modo Foco): 200px.
|
||||
- Áreas táctiles grandes: check 60px, botones de navegación 64px, teclas PIN 84px.
|
||||
- Animaciones definidas: `pop`, `checkPop`, `floatY/floatYb`, `walletBump`,
|
||||
`confFall` (confeti), `shake` (error), `celebPop`, `ringGlow` (timer), `slideUp`.
|
||||
|
||||
## Stack objetivo (doméstico/homelab — NADA corporativo)
|
||||
- Frontend: **Angular 19** standalone components + signals, TypeScript estricto.
|
||||
i18n ES/CA (p. ej. @angular/localize o ngx-translate, a tu criterio).
|
||||
- Backend: **Spring Boot 3.x / Java 21 / Gradle 8 + PostgreSQL** (Liquibase).
|
||||
- Empaquetado: **Docker** multi-stage + **docker-compose** (postgres + backend +
|
||||
Nginx sirviendo el frontend).
|
||||
- Auth ligera: kiosko sin fricción para el niño + PIN para el panel de padres.
|
||||
- PROHIBIDO en esta fase: Keycloak, Gravitee, Camunda, Kubernetes, Jenkins.
|
||||
- Comenta el código en español, sobre todo la lógica de negocio.
|
||||
|
||||
## Pantallas a implementar (fieles al prototipo)
|
||||
1. **Perfiles** (`profiles`): título "¿QUIÉN ENTRA HOY?", tarjetas grandes por niño
|
||||
con mascota (emoji), nombre, monedas y selector de edad (− / +). Botón discreto
|
||||
"⚙️ Padres" que lleva al PIN.
|
||||
2. **Home** (`home`), con DOS modos conmutables:
|
||||
- **A · Tablero**: cabecera (saludo "Hola, {nombre} 👋" + día/fecha grande +
|
||||
timer "SALIMOS EN {min} min" con anillo glow + monedero 🪙 + botón tienda 🎁);
|
||||
barra de progreso global "{hechas}/{total} listo ✨"; banner de eventos
|
||||
(examen 📋 / deberes 📎) con TTS; dos columnas: COLE 🎒 y TARDE 🌙, cada tarea
|
||||
como tarjeta (icono, etiqueta, botón 🔊 TTS, check). Estado vacío: 🏖️ "HOY NO
|
||||
HAY COLE".
|
||||
- **B · Foco**: una sola tarea a pantalla (hero tile 200px), botones ‹ ›, puntos
|
||||
de progreso, botón grande "¡HECHO!" + 🔊, y pie "Quedan X · Después: Y".
|
||||
- Al completar TODAS las tareas: overlay de **celebración** con confeti, 🦊🎉,
|
||||
"¡TODO LISTO!", "+{monedasDia}" y botón "¡GENIAL! 👍".
|
||||
3. **Tienda** (`store`): cabecera con monedero, grid de 3 columnas de premios
|
||||
(icono, nombre, coste 🪙, botón CANJEAR o "Te faltan N"); toast de confirmación.
|
||||
4. **PIN** (`pin`): teclado numérico 3×4, 4 dígitos, feedback de error (shake).
|
||||
5. **Padres** (`parents`): barra superior con pestañas y botón "🔓 Salir". Pestañas:
|
||||
- **📅 Horario**: rejilla de 5 días (L–V); por día, las actividades del cole.
|
||||
- **🎒 Materiales**: actividades (Gimnasia, Música, Matemáticas, Lengua…) y su
|
||||
material como chips; alta de actividad/material.
|
||||
- **📋 Eventos**: lista de exámenes/deberes con fecha; alta.
|
||||
- **🌙 Rutinas**: selector de día + lista de rutinas de tarde reordenables.
|
||||
- **🪙 Recompensas**: steppers de monedas (por tarea / por bloque / por día) y
|
||||
toggles (sonido, TTS); gestión del catálogo de la tienda.
|
||||
|
||||
## Decisiones a respetar
|
||||
- Conserva el **modo Foco (B)**: es clave para TDAH. Hazlo seleccionable como
|
||||
preferencia del niño (no como control de demo).
|
||||
- **Elimina el "dock" inferior de prototipo** (los botones de demo A/B, idioma,
|
||||
reiniciar, empty). Sustituye sus funciones por ajustes reales: el modo A/B y el
|
||||
idioma son preferencias; "reiniciar" no existe en producción (el día se regenera).
|
||||
- Mantén **TTS** (Web Speech API, voz es-ES / ca-ES) y el **sonido** de recompensa
|
||||
(puedes mantener el tono sintetizado con WebAudio o un sample corto).
|
||||
- Mantén las **monedas voladoras** de la tarjeta al monedero y el `walletBump`.
|
||||
- **Bilingüe ES/CA** en toda la UI; el idioma es una preferencia conmutable.
|
||||
|
||||
## Mapa de componentes Angular sugerido
|
||||
`ProfileSelectComponent`, `HomeComponent` (con `BoardViewComponent` y
|
||||
`FocusViewComponent`), `TaskCardComponent`, `MorningTimerComponent`,
|
||||
`WalletComponent`, `ProgressBarComponent`, `EventBannerComponent`,
|
||||
`CelebrationOverlayComponent`, `StoreComponent` + `RewardCardComponent`,
|
||||
`PinPadComponent`, `ParentsComponent` con sus 5 paneles de pestaña.
|
||||
Servicios: `ApiService` (HTTP tipado), `TtsService`, `SoundService`,
|
||||
`I18nService`, `KioskService` (fullscreen/landscape).
|
||||
|
||||
## Implicaciones para el dominio/backend
|
||||
Sigue `docs/prompt-claude-code-backend-rutinas-tdah.md`, que ya incorpora estos
|
||||
requisitos derivados del diseño: i18n (label_es/label_ca) en materiales,
|
||||
actividades y premios; `icon` (emoji) y `color` por entidad; hora de salida por
|
||||
niño; ajustes por niño (modo tablero/foco, sonido, TTS, edad, mascota); y `order`
|
||||
en las rutinas de tarde. Mantén alineados los DTOs del backend con los modelos del
|
||||
frontend, en especial `GET /api/children/{id}/today`.
|
||||
|
||||
## Datos semilla (reproducir los del prototipo)
|
||||
- Niños: Nora 🦊 (`#F2A65A`, 7 años, 42 monedas), Leo 🐢 (`#5BC0BE`, 9, 28),
|
||||
Mía 🦉 (`#A78BD0`, 6, 55).
|
||||
- Cole: estuche ✏️, libro de mates 📘, flauta 🎵, ropa de gimnasia 👕,
|
||||
zapatillas 👟, almuerzo 🍎.
|
||||
- Tarde: deshacer la mochila 🎒, merendar 🥪, hacer los deberes 📝,
|
||||
practicar piano 🎹, recoger la mesa 🍽️.
|
||||
- Actividades: Gimnasia 🤸 (equipación/zapatillas/toalla/agua), Música 🎵
|
||||
(flauta/libreta), Matemáticas 📘 (libro/regla/estuche), Lengua 📖 (lectura/cuaderno).
|
||||
- Premios: 30 min tablet 🎮 (20), peli en familia 🍿 (50), tarde en el parque 🛝
|
||||
(40), elijo la cena 🍕 (30), 30 min más despierto 🌙 (60), sorpresa dino 🦖 (80).
|
||||
- Gamificación por defecto: 5 monedas/tarea, 10/bloque, 20/día completo.
|
||||
- PIN demo de padres: 1234 (hazlo configurable).
|
||||
|
||||
## Orden de trabajo (por fases, valida cada una)
|
||||
1. Esqueleto del monorepo + docker-compose + README.
|
||||
2. Backend: dominio + Liquibase + datos semilla + endpoints `/today`, toggle,
|
||||
wallet, tienda, CRUD de padres. Tests.
|
||||
3. Frontend: tokens/estilos globales (Fredoka/Nunito, paleta, animaciones).
|
||||
4. Frontend: Perfiles + Home (Tablero y Foco) cableados contra la API.
|
||||
5. Frontend: Tienda + Panel de padres (5 pestañas) + i18n ES/CA.
|
||||
6. Dockerfiles + arranque end-to-end (`docker-compose up`) y prueba del flujo:
|
||||
configurar día → ver HOY → marcar → ganar monedas → celebración → canjear.
|
||||
|
||||
## Entregables
|
||||
Monorepo compilable y levantable con `docker-compose up`, con README de arranque
|
||||
local y notas para desplegarlo después en el homelab.
|
||||
100
docs/prompt-claude-design-rutinas-tdah.md
Normal file
100
docs/prompt-claude-design-rutinas-tdah.md
Normal file
@@ -0,0 +1,100 @@
|
||||
# App de rutinas visuales para niños con TDAH — Diseño de interfaz
|
||||
|
||||
## Contexto
|
||||
Diseña la interfaz de una aplicación web pensada para una TABLET en horizontal,
|
||||
montada en modo kiosko junto a la puerta de casa. La usan cada día niños con
|
||||
TDAH (trastorno por déficit de atención e hiperactividad). El objetivo es que,
|
||||
de un vistazo, cada niño sepa qué tiene que meter en la mochila para el cole y
|
||||
qué rutinas hacer por la tarde, marcándolo él mismo a medida que lo completa.
|
||||
|
||||
Hay un segundo usuario, los padres, que configuran qué material toca cada día,
|
||||
añaden exámenes/deberes, gestionan la tienda de recompensas y ajustan la
|
||||
gamificación, desde un panel protegido.
|
||||
|
||||
La aplicación es MULTI-NIÑO: varios perfiles de hijo, cada uno con su horario,
|
||||
sus tareas, su monedero y su progreso independientes.
|
||||
|
||||
## Principios de diseño (prioridad absoluta: atención y baja carga cognitiva)
|
||||
- UNA pantalla, UN foco. Mostrar SOLO el día de hoy. Nada de scroll infinito,
|
||||
menús anidados ni información que compita por la atención.
|
||||
- Estructura "Ahora / Después": primero lo del cole (mañana), luego lo de la tarde.
|
||||
- Muy gráfico: iconos/pictogramas grandes, texto mínimo y en mayúsculas legibles.
|
||||
Cada material y tarea con su icono reconocible (toalla, zapatillas, flauta...).
|
||||
- Feedback inmediato y POSITIVO al marcar una tarea: animación clara, la tarea
|
||||
se "completa" visualmente y una moneda vuela al monedero. Opcional: sonido suave.
|
||||
- Progreso siempre visible: barra o contador tipo "3 de 5 listo".
|
||||
- Celebración al completar todo el bloque (confeti / personaje feliz). Nunca
|
||||
mensajes negativos, regaños ni rojos de "error". El tono es siempre de logro.
|
||||
- Predecible y consistente: mismos colores, iconos y posiciones cada día.
|
||||
- Sin distracciones: sin notificaciones, sin anuncios, sin animaciones de fondo.
|
||||
- Color FUNCIONAL: cada asignatura/categoría tiene un color, pero fondo calmado
|
||||
(no saturar). Nada debe depender solo del color (icono + texto + color juntos).
|
||||
- Pensado para "time blindness": opción de temporizador visual de la rutina de
|
||||
mañana ("salimos en 20 min") como cuenta atrás gráfica, no numérica fría.
|
||||
|
||||
## Pantallas a diseñar
|
||||
|
||||
### 1. Selección de perfil (multi-niño)
|
||||
- Pantalla de entrada con los avatares grandes de cada hijo para elegir quién
|
||||
va a usar la tablet. Simple, vistosa, de un solo toque.
|
||||
|
||||
### 2. Pantalla principal "HOY" (kiosko, la más importante)
|
||||
- Cabecera: nombre/avatar del niño activo, día de la semana y fecha en grande,
|
||||
y su monedero (número de monedas con icono).
|
||||
- Si hay examen o deberes para hoy: AVISO destacado y muy visible en la parte
|
||||
superior, con icono propio (examen / entregar deberes).
|
||||
- Bloque "PARA EL COLE HOY": lista de materiales como tarjetas grandes con icono
|
||||
+ nombre + checkbox enorme (área táctil mínima 60x60). Al tocar → marcado.
|
||||
- Bloque "ESTA TARDE": rutinas (deshacer la mochila, recoger la mesa, practicar
|
||||
piano...) con el mismo formato de tarjeta.
|
||||
- Barra de progreso global del día.
|
||||
- Estado final "¡TODO LISTO!" muy celebratorio cuando completa todo.
|
||||
- Estado vacío amable si un día no hay nada ("Hoy no hay cole / nada pendiente").
|
||||
- Acceso visible a la tienda de recompensas desde el monedero.
|
||||
|
||||
### 3. Tienda de recompensas (incluida en la v1)
|
||||
- El niño canjea sus monedas por premios que definen los padres (tiempo de
|
||||
juego, una salida, una chuche...). Tarjetas grandes con imagen/icono del
|
||||
premio, nombre y coste en monedas.
|
||||
- Distinguir claramente premios alcanzables (puede canjear ya) de los que aún
|
||||
no llega (le faltan X monedas), siempre en tono motivador, nunca de bloqueo.
|
||||
- Confirmación de canje celebratoria y actualización del monedero.
|
||||
|
||||
### 4. Panel de PADRES (protegido por PIN)
|
||||
Acceso discreto desde una esquina; pide PIN. Dentro:
|
||||
- Gestión de perfiles de hijo (alta, avatar, nombre).
|
||||
- Editor de horario semanal por hijo: rejilla lunes–viernes donde asignar a cada
|
||||
día las actividades del cole y el material que conlleva cada una.
|
||||
- Gestor de materiales y actividades: crear "Gimnasia" → asociarle toalla,
|
||||
equipación, zapatillas; cada material con su icono.
|
||||
- Gestor de eventos puntuales: añadir examen o deberes con fecha y descripción.
|
||||
- Gestor de rutinas de tarde (recurrentes por día de la semana).
|
||||
- Gestor de la tienda: crear premios canjeables, su icono y su coste en monedas.
|
||||
- Ajustes de gamificación: monedas que se ganan por tarea / por completar bloque.
|
||||
|
||||
## Sistema visual
|
||||
- Tipografía sans grande, redondeada y muy legible; jerarquía clara.
|
||||
- Botones y áreas táctiles generosos (mín. 48–60px), pensados para dedos de niño.
|
||||
- Tarjetas con esquinas redondeadas, sombras suaves, mucho espacio en blanco.
|
||||
- Paleta: base clara y calmada + acentos vivos pero controlados para categorías.
|
||||
- Iconografía coherente en todo el sistema (mismo estilo de pictograma).
|
||||
- Cada perfil de hijo puede tener un color de acento propio para reforzar
|
||||
identidad y evitar confusiones entre hermanos.
|
||||
|
||||
## Microinteracciones
|
||||
- Marcar tarea: la tarjeta hace un "check" satisfactorio y la moneda vuela al
|
||||
monedero, que se actualiza con una pequeña animación.
|
||||
- Completar bloque/día: confeti breve y mensaje de ánimo.
|
||||
- Canjear premio: animación de recompensa y descuento visible de monedas.
|
||||
|
||||
## Accesibilidad
|
||||
- Alto contraste, texto + icono + color (nunca solo color).
|
||||
- Opción de lectura en voz alta de cada tarea (TTS) para apoyo a la lectura.
|
||||
|
||||
## Entregables
|
||||
- Pantalla de selección de perfil.
|
||||
- Pantalla principal "HOY" (kiosko) en alta fidelidad, horizontal.
|
||||
- Tienda de recompensas.
|
||||
- Panel de padres (perfiles + horario semanal + gestores + tienda).
|
||||
- Estados: pendiente, completado, día completado, vacío, aviso de examen.
|
||||
- Define design tokens (colores, tipografía, espaciado, radios) reutilizables.
|
||||
Reference in New Issue
Block a user