CRONONAUTA — 6000 años de historia en tus manos

# CRONONAUTA 2.0 Implementation Plan > **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. **Goal:** Reconstruir CRONONAUTA como un atlas interactivo donde las civilizaciones fluyen como ríos del tiempo, con exploración libre (pan/zoom) y un modo Recorrido (tour), estética pergamino moderno, en HTML/CSS/JS vanilla con ES modules. **Architecture:** Un único estado de cámara `{x, y, scale}` (módulo `core/viewport`) transforma una capa SVG (ríos, líneas, eras) y una capa HTML superpuesta (etiquetas, marcadores). `core/coords` define el mapeo año↔píxel y el layout de carriles. `render/*` genera el DOM/SVG; `ui/*` maneja la interacción; `data/*` son módulos planos editables por colaboradores. El modo tour anima la cámara entre hitos con tweens rAF. **Tech Stack:** HTML5, CSS3 (custom properties), JavaScript ES modules nativos (sin bundler). Tests de lógica pura con el runner nativo `node --test` (cero dependencias). SVG para ríos, Canvas para minimapa. **Testing convention:** - **Lógica pura** (coords, rivers paths, viewport math, easing, tour camera) → tests con `node --test` en `tests/*.test.js`. Los módulos `core/`/`render/` que se testean no deben importar `document` en su top-level; las funciones puras reciben datos y devuelven strings/números. - **Visual / DOM / UI** → verificación en producción. Tras cada tarea visual, el dueño recarga `crononauta.neracosu.com` y confirma. Estos pasos se marcan con **VERIFICAR EN PRODUCCIÓN**. - Frecuencia de commit: un commit por tarea (al final), salvo que se indique. **Nota sobre el prototipo:** El HTML monolítico previo es la referencia funcional para tooltip, panel, búsqueda, leyenda y minimapa. Este plan incluye el código adaptado completo; no hace falta tener el prototipo a mano. --- ## Task 1: Andamiaje — estructura, tokens y shell HTML **Files:** - Create: `index.html` - Create: `assets/css/tokens.css` - Create: `assets/css/base.css` - Create: `assets/js/main.js` - [ ] **Step 1: Crear `assets/css/tokens.css`** (variables y fuentes) ```css :root { /* Paleta pergamino moderno */ --parchment: #f0e2c4; --parchment-2: #e8d5a8; --parchment-dark: #d4c4a0; --ink: #2a1f14; --ink-light: #5c4a3a; --ink-faint: #8b7d6b; --gold: #b8860b; --gold-light: #daa520; --red-accent: #8b1a1a; --border-ornate: #6b5b4b; --chrome-bg: rgba(26, 20, 16, 0.92); /* Tipografía */ --font-display: 'Playfair Display', Georgia, serif; --font-ui: 'Inter', system-ui, sans-serif; --font-label: 'EB Garamond', Georgia, serif; /* Motion */ --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --dur-cam: 900ms; } ``` - [ ] **Step 2: Crear `assets/css/base.css`** (reset, body, scrollbar) ```css * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { background: #1a1410; overflow: hidden; font-family: var(--font-ui); color: var(--ink); cursor: grab; } body.dragging { cursor: grabbing; } #app { position: absolute; inset: 0; overflow: hidden; } /* Capa que se mueve con la cámara (contiene SVG + overlay HTML) */ #world { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); } ::-webkit-scrollbar-thumb { background: rgba(184,134,11,0.35); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(184,134,11,0.55); } @media (prefers-reduced-motion: reduce) { :root { --dur-cam: 0ms; } } ``` - [ ] **Step 3: Crear `index.html`** (shell con capa world = SVG + overlay) ```html CRONONAUTA — 6000 años de historia en tus manos

``` - [ ] **Step 4: Crear `assets/js/data/version.js`** (única fuente de versión para la UI) ```js // Sube esto en cada deploy con cambio visible (ver CHANGELOG.md y CLAUDE.md raíz). export const VERSION = '0.1.0'; ``` - [ ] **Step 5: Añadir el badge de versión a `index.html`** (antes de ` ``` - [ ] **Step 2: Crear imagen OG** (captura del mapa o portada) en `assets/img/og.jpg` (1200×630). Si no hay aún, usar la imagen de referencia 1881 redimensionada: ```bash command -v convert >/dev/null && convert resources/Adams_Synchronological_Chart,_1881.jpg -resize 1200x630^ -gravity center -extent 1200x630 assets/img/og.jpg || echo "crear og.jpg manualmente" ``` - [ ] **Step 3: Revisión final de consola** — abrir en producción, confirmar 0 errores JS, todas las capas presentes, tour fluido, búsqueda/leyenda/minimapa/panel OK. - [ ] **Step 4: Ejecutar toda la suite de tests** Run: `node --test tests/` Expected: PASS (coords + viewport + rivers). - [ ] **Step 5: VERIFICAR EN PRODUCCIÓN** Recargar. Esperado: meta/OG presentes (probar con validador OG si se desea), todo el flujo funcional. Confirmar con el dueño. - [ ] **Step 6: Commit** ```bash git add index.html assets/img/og.jpg git commit -m "feat(seo): meta tags, OpenGraph, Twitter Card y JSON-LD + pulido final" ``` - [ ] **Step 7: Push final** ```bash git push origin main ``` --- ## Notas de cierre - El prototipo viejo no se borra; este plan crea archivos nuevos. Si existía un `index.html` previo del prototipo en el directorio, se sobrescribe en la Task 1 (confirmar con el dueño antes; el prototipo está respaldado en el historial/mensaje original). - Diferido a post-v1 (no en este plan): anchos proporcionales por poder, toggle de idioma, deep-zoom de sub-períodos, URLs compartibles, miniaturas inline en el mapa, integración Wikipedia/IA. - Colaboración: `CONTRIBUTING.md` ya documenta cómo aportar civilizaciones/eventos editando `assets/js/data/`.