Resumen técnico

unDEAenunaCaja es un simulador de Desfibrilador Externo Automático (DEA) y Semiautomático (DESA) para capacitación en reanimación. Una persona instructora conduce la simulación con botones; la aplicación reproduce las indicaciones de voz del equipo, muestra el texto en pantalla y marca los 2 minutos de RCP entre análisis de ritmo.

Flujos de simulación

Cada pantalla tiene una indicación de voz, un texto y hasta dos botones.
El identificador de cada pantalla es la clave que se usa en index.js.

Pantallas comunes

Modo automático

El equipo analiza el ritmo y, si corresponde, entrega la descarga por sí solo. Quien instruye solo indica el ritmo y confirma que los participantes siguen las indicaciones.

Modo semiautomático

Igual que el automático, pero con un paso más: cuando el ritmo es desfibrilable, el equipo pide indicar la descarga, y recién después se pasa a la RCP.

Metrónomo y temporizador

En las pantallas metronomo y metronomoAutomatico se reproduce metronomo.mp3, que dura 2 minutos y marca el ritmo de las compresiones. Mientras suena aparece la barra de progreso y el tiempo restante (MM:SS).

La cuenta regresiva sale del propio audio: restante = duración − tiempo actual. Si el navegador todavía no conoce la duración, usa 120 segundos. El color de la barra cambia según el tiempo que queda:

Cuando el audio termina (evento audio.onended) se oculta el temporizador y la aplicación pasa sola a la pantalla de análisis de ritmo del modo en curso.

Arquitectura

El diseño separa los datos (qué dice y a dónde va cada pantalla) del motor (cómo se reproduce y se dibuja). Agregar o cambiar pantallas es editar un objeto, sin tocar la lógica; la excepción son los dos metrónomos, que están escritos en el motor (ver Extensión).

Ciclo de vida de la página

1. Carga: se muestra el botón Iniciar. Todavía no suena nada porque los navegadores exigen un gesto del usuario antes de reproducir audio.
2. Se registra el service worker (service-worker.js) y se instala la caché.
3. Iniciar ejecuta empezar(): oculta ese botón, muestra #opciones y #btnReiniciar, y entra en el estado inicio.
4. Cada botón de respuesta llama a cambiarEstado(siguiente). Las únicas transiciones sin botón son las de fin de metrónomo, que dispara el evento ended del audio.

Qué hace cambiarEstado(clave)

1. Guarda estadoActual = clave y obtiene historia[clave]. Si la clave no existe, el nodo es undefined y la función lanza un error: la aplicación deja de responder.
2. Reproduce nodo.audio desde el segundo 0.
3. Vacía #opciones y escribe nodo.texto con textContent (cadena vacía si el nodo no tiene texto).
4. Si la clave es metronomo o metronomoAutomatico: muestra el temporizador y define audio.onended para volver al análisis de ritmo de su modo. En cualquier otro estado oculta el temporizador y pone audio.onended = null.
5. Crea un <button> por cada opción, con su clase CSS, y le asigna onclick = () => cambiarEstado(op.siguiente).

Referencia del código (index.js)

Los números de línea corresponden a la revisión 3e1b788. El script se carga como archivo clásico (sin módulos) para que los atributos onclick del HTML encuentren las funciones en el ámbito global.

Funciones

Variables globales

undeaenunacaja/
├── index.html                Página única (43 líneas)
├── documentacion.html        Documentación (100 líneas)
├── index.js                  Datos (historia), motor, temporizador, registro del service worker
├── styles-documentacion.css  Estilos de la documentación
├── styles.css                Estilos del simulador
├── reset.css                 Reset y ancho máximo de 1024 px
├── service-worker.js         Precaché, estrategia cache-first, actualización
├── manifest.json             Datos de instalación de la PWA
├── icons/                    icono-192.png, icono-512.png
├── src/                      13 audios .mp3, logos y bandera (src/images/)
├── LICENSE                   GPL v3
└── README.md

• No hay carpeta de compilación ni package.json: el repositorio es lo que se publica.
• Para publicar basta un servidor de archivos estáticos con HTTPS (por ejemplo GitHub Pages). Los service workers solo funcionan en HTTPS.

Modelo de datos y extensión

Cada estado es una entrada del objeto historia. La clave es el identificador del estado.

nombreDelEstado: {
  audio: "./src/archivo.mp3",
  texto: "Texto que se muestra",
  opciones: [
    { texto: "Sí", siguiente: "otroEstado", clase: "btn-verde" },
    { texto: "No", siguiente: "nombreDelEstado", clase: "btn-rojo" }
  ]
}

Agregar o modificar una pantalla

1. Grabar el audio en MP3 y guardarlo en src/.
2. Agregar el estado en historia y apuntarle un botón desde otro estado.
3. Agregar la ruta del audio a urlsToCache en service-worker.js.
4. Subir CACHE_NAME (por ejemplo a dea-simulador-v2) para que los dispositivos descarguen la versión nueva.
5. Validar el grafo con el script de la sección Verificación.

Agregar un modo nuevo

Hoy exige tres cambios: los estados del modo, un botón eninicioOpciones y un caso en cambiarEstado para el metrónomo. Para no tocar el motor, se podría agregar un campo alTerminar a cada estado de metrónomo, con la clave del estado que sigue.

metronomo: {
  audio: "./src/metronomo.mp3",
  texto: "Espere los 2 minutos para analizar el ritmo nuevamente",
  opciones: [],
  temporizador: true,
  alTerminar: "analisisRitmo"
}

// En cambiarEstado: reemplaza las dos ramas por nombre
if (nodo.temporizador) {
  iniciarTemporizador();
  audio.onended = () => {
    ocultarTemporizador();
    cambiarEstado(nodo.alTerminar);
  };
} else {
  ocultarTemporizador();
  audio.onended = null;
}

PWA y funcionamiento sin conexión

manifest.json

service-worker.js

Estilos, diseño y accesibilidad

Interfaz oscura de un solo fondo, con botones grandes. Los valores están escritos de forma literal en los CSS (no hay variables). No se declara tipografía: se usa la del sistema, así la aplicación carga sin recursos externos.

Paleta

Colores del temporizador (asignados desde JavaScript): #00c853 verde, #ffd600 amarillo, #d50000 rojo.

Componentes

Disposición y adaptación

• html y body con ancho 100 %, máximo 1024px y centrados; body es una columna flex. main centra su contenido.
• No hay media queries: la adaptación depende de unidades relativas y de max-width: 100% en las imágenes.

Glosario