# Empire Ascendant Prototipo React CDN de un videojuego mundo abierto empresarial: gestión de imperio, mapa estratégico, vida 3D conceptual, bolsa, misiones morales y finales dinámicos. ## Masterplan - Crear una demo jugable tipo “GTA de empresarios” donde el jugador expande una compañía, mejora activos, acepta contratos y ve evolucionar dinero, reputación, estrés, ética e influencia. - Usuarios objetivo: jugadores de estrategia empresarial, simuladores de vida de lujo y narrativas con decisiones morales. - Valor principal: convertir el concepto amplio de mundo abierto en un loop web inmediato: invertir → completar misiones → avanzar semanas → recalcular final probable. - Mantener el prototipo sin build step ni backend: despliegue estático, React por CDN, rutas hash y persistencia local. - Preparar la base para sistemas futuros: inversiones comprables, eventos aleatorios, relaciones, empleados y modo 3D interactivo real. ## Tech Stack & Architecture - **Entrada estática:** `index.html` carga Tailwind CDN, `styles/main.css` y `src/main.js`. - **React:** `react@19.2.0` y `react-dom@19.2.0` desde `esm.sh`. - **JSX sin compilación:** no hay Vite, Babel ni TypeScript. Se usa `htm@3.1.1` en `src/jsx.js`. - Importar siempre `html` desde `../jsx.js` o `./jsx.js`. - Escribir JSX como templates: `html\`<${Component} prop=${value} />\``. - Los cierres de componentes usan `` en estructuras anidadas como en `src/App.js`. - **Routing:** `react-router-dom@7.9.5` con `HashRouter` en `src/App.js`. - Las rutas funcionan como `#/mapa`, `#/misiones`, etc.; esto evita configuración de servidor. - **Estado global:** `zustand@5.0.8` + `persist` en `src/store/useEmpireStore.js`. - Persistencia en `localStorage` con key `empire-ascendant-storage`. - Al refrescar no vuelve al estado inicial. Para probar datos limpios, borrar esa key de localStorage. - **Estilos:** Tailwind por CDN + tokens HSL y utilidades propias en `styles/main.css`. - **Iconos:** `lucide-react@0.468.0` solo en `src/components/Layout.js`. - **Providers:** `src/mainProviders.js` envuelve la app con un `

`; actualmente no añade contexto. Flujo de conexión: 1. `index.html` monta `

`. 2. `src/main.js` renderiza ``. 3. `src/App.js` define rutas bajo `Layout`. 4. `src/components/Layout.js` pinta header, navegación, dinero actual y panel de “Final probable”. 5. Las páginas consultan `useEmpireStore`. 6. Las acciones de juego (`upgradeAsset`, `completeMission`, `advanceWeek`) viven en `src/store/useEmpireStore.js`. No hay backend, API externa propia, autenticación ni llamadas HTTP de gameplay. Las únicas dependencias externas son CDNs (`tailwindcss.com`, `esm.sh`). ## File Structure ```txt index.html # Entrada estática; carga Tailwind CDN, CSS global y src/main.js. styles/main.css # Tema luxury/dark: variables HSL, glassmorphism, fondos, hover, focus y scrollbars. src/jsx.js # htm.bind(React.createElement); obligatorio para componentes sin build. src/main.js # createRoot sobre #root; monta Providers + App. src/mainProviders.js # Wrapper mínimo; punto futuro para contextos globales. src/App.js # HashRouter y rutas: /, /mapa, /vida-3d, /mercado, /misiones, *. src/components/Layout.js # Shell persistente: header, nav responsive, cash y final probable. src/components/MetricCard.js # Tarjeta reutilizable para métricas del dashboard. src/pages/Dashboard.js # Centro de mando: loop principal, métricas, avance semanal, estado y log. src/pages/MapPage.js # Mapa estratégico; lista activos y permite mejorarlos con cash suficiente. src/pages/FreeMode.js # Modo vida 3D conceptual; actividades estáticas no conectadas al store. src/pages/Market.js # Bolsa y competidores; lectura estática de stocks/competitors. src/pages/Missions.js # Contratos morales; ejecutan completeMission y alteran stats. src/pages/NotFound.js # Fallback narrativo para rutas inexistentes. src/store/useEmpireStore.js # Datos iniciales persistidos, modelos implícitos y reglas de gameplay. CLAUDE.md # Documento de contexto del proyecto para agentes de IA. ``` ## Key Features ### Centro de mando (`src/pages/Dashboard.js`) - Muestra la semana actual, arquetipo de empresa, liquidez, ingresos semanales, reputación, estrés, relaciones, ética e influencia. - Botón **“Jugar: avanzar semana”** llama a `advanceWeek`. - Enlaces directos a `#/mapa` y `#/misiones`. - Calcula ingresos semanales sumando `assets[].income`. - Muestra bitácora `log`, limitada a 8 eventos desde el store. - Importante: `Dashboard` no recalcula ingresos persistidos; solo deriva el total desde `assets` renderizados. ### Mapa estratégico (`src/pages/MapPage.js`) - Renderiza `assets` como terrenos/edificios con icono, nivel, tipo, zona, ingreso y coste de mejora. - Botón **“Mejorar terreno”** llama a `upgradeAsset(asset.id)`. - El botón se deshabilita si `company.cash < asset.cost`. - Regla actual de mejora en `useEmpireStore.js`: - Resta `asset.cost` al cash. - Sube reputación `+2`, máximo 100. - Sube estrés `+3`, máximo 100. - Incrementa nivel `+1`. - Multiplica ingreso por `1.28`. - Multiplica coste por `1.36`. - Añade entrada al log. Modelo de asset: ```js { id, type, name, level, income, cost, icon, zone, mood } ``` Activos iniciales: - `mansion` Villa Horizonte - `hq` Torre Aureum HQ - `factory` Planta NeoSteel - `club` Club Élite Azul - `agency` Magnet Agency - `academy` Campus Founder XI ### Misiones morales (`src/pages/Missions.js`) - Muestra tres misiones iniciales: - Transparente: contrato con Solaris Motors. - Agresiva: compra de startup rival. - Corrupta: filtración contra Helix Capital. - El botón **“Ejecutar misión”** llama a `completeMission(mission.id)`. - Las misiones no se eliminan ni se marcan como completadas; pueden repetirse indefinidamente. - Regla actual: - Suma `mission.reward` al cash. - Aumenta influencia `+6`. - Ajusta reputación: - Corrupta `-10` - Agresiva `-2` - Transparente `+7` - Ajusta ética: - Corrupta `-16` - Agresiva `-6` - Transparente `+8` - Ajusta estrés: - Corrupta `+14` - No corrupta `+8` - Valores de reputación y ética se clamped a `0..100`; estrés a máximo `100`. Modelo de misión: ```js { id, title, reward, risk, moral, text } ``` ### Avance semanal y finales (`src/store/useEmpireStore.js`) `advanceWeek`: - Calcula `weeklyIncome` con suma de todos los `assets[].income`. - Incrementa `company.week`. - Añade ingresos al cash. - Reduce estrés `-5`, mínimo 0. - Recalcula `company.ending`. Regla actual de final probable: ```js if (ethics >= 70 && reputation >= 72) "Magnate respetado" else if (ethics <= 30) "Empresario corrupto" else if (influence >= 70) "Tiburón agresivo" else "En construcción" ``` Gotcha: el final solo cambia al llamar `advanceWeek`, no inmediatamente al completar una misión. ### Bolsa y competidores (`src/pages/Market.js`) - Vista de solo lectura. - `stocks` contiene símbolo, nombre, precio y cambio porcentual. - `competitors` contiene nombre, poder, estilo y relación. - Actualmente no hay compra/venta ni simulación de precio. Modelos: ```js stock = { id, symbol, name, price, change } competitor = { id, name, power, style, relation } ``` ### Modo vida 3D conceptual (`src/pages/FreeMode.js`) - Página estática que comunica la fantasía de mundo abierto. - Actividades: conducir, fiesta VIP, partido, gimnasio, mansión y restaurante skyline. - No modifica stats ni persiste acciones. ### Layout y navegación (`src/components/Layout.js`) - Navegación principal: - `/` Imperio - `/mapa` Mapa - `/vida-3d` Vida 3D - `/mercado` Bolsa - `/misiones` Misiones - Usa `useLocation()` para aplicar estado activo manualmente. - Muestra `company.cash` en header en formato EUR. - En desktop muestra panel lateral con `company.ending`. ## Design Guidelines - Estética: lujo moderno nocturno, corporativo y futurista. - Paleta definida en `styles/main.css`: - Fondo: azul/negro oscuro `--background: 222 45% 6%`. - Texto: casi blanco `--foreground`. - Primario: dorado `--primary: 43 96% 58%`. - Secundario: azul eléctrico `--secondary: 196 100% 55%`. - Peligro/corrupción: rojo `--destructive`. - Tipografía: stack del sistema con Inter preferido si está disponible. - Componentes visuales: - `.glass` para tarjetas y paneles principales. - `.card-hover` para elevación y borde dorado al hover. - `.luxury-grid` para hero del dashboard. - `.neon-text` para títulos destacados. - `.map-tile` añade overlay dorado en hover. - `.focus-ring` para accesibilidad en botones/enlaces. - Responsive: - Layout móvil: navegación en grid superior dentro del aside. - Desktop `lg`: dos columnas `230px + contenido`, aside sticky. - Métricas y cards usan grids Tailwind (`sm`, `lg`, `xl`). ## App Flow 1. El jugador entra en `#/` y ve el centro de mando de **Aureum Dynamics**. 2. Puede: - Avanzar semana para cobrar ingresos. - Ir al mapa para mejorar activos. - Ir a misiones para aceptar contratos morales. - Consultar bolsa y competidores. - Explorar el modo vida 3D conceptual. 3. El loop principal es: - Mejorar activos si hay liquidez. - Completar misiones para ganar cash rápido con coste moral/estrés. - Avanzar semana para cobrar y actualizar final probable. 4. Edge cases actuales: - Si no hay cash suficiente, `MapPage` deshabilita mejoras; `upgradeAsset` también valida en store. - Si una misión o asset no existe, la acción devuelve el estado sin cambios. - El estado persistido puede dejar datos desactualizados tras cambiar `initialCompany`, `assets` o `missions`; borrar localStorage para ver nuevos valores iniciales. - Las misiones repetibles permiten farmear dinero y stats; esto es comportamiento actual, no bug accidental. - `Market` y `FreeMode` son conceptuales; no esperar efectos de gameplay. ## Conventions - Idioma de UI y documentación funcional: español. - Componentes: - Export nombrado: `export function Dashboard()`. - Importar `html` siempre desde `src/jsx.js`. - No usar JSX nativo (``) porque no hay compilador. - Estado: - Añadir datos y acciones de gameplay en `src/store/useEmpireStore.js`. - Mantener acciones puras dentro de `set((state) => ...)`. - Clampear métricas porcentuales a `0..100`. - Añadir logs al inicio y recortar con `.slice(0, 8)`. - Estilos: - Priorizar clases Tailwind inline con tokens CSS existentes. - Usar variables `hsl(var(--...))`, no colores hardcodeados, salvo gradientes específicos ya existentes. - Reutilizar `.glass`, `.card-hover`, `.focus-ring` y radios `var(--radius-md/lg)`. - Rutas: - Añadir páginas en `src/pages/NuevaPage.js`. - Importarlas en `src/App.js`. - Registrar ruta dentro del `\`}>`. - Si debe aparecer en navegación, añadir entrada en `nav` de `src/components/Layout.js` con un icono de `lucide-react`. - Nuevas features: - Si impactan dinero/stats/finales, implementar la acción en `useEmpireStore.js`. - Si solo son narrativas o visuales, pueden vivir como arrays locales en la página, como `FreeMode.js`. - Recordar que los cambios de datos iniciales pueden no verse por persistencia local. ## Platform (GenMB) This app is built and hosted on GenMB. **Runtime:** Browser sandbox (iframe) or Cloud Run. No Node.js server — all code runs client-side unless `backend/` exists. **Dependencies:** CDN-only (esm.sh, cdn.tailwindcss.com, unpkg). Use ES module imports with full CDN URLs. No `npm install` at runtime. **Entry point:** `index.html` must include all CDN script tags. Tailwind via CDN with inline config. **Built-in services (relative API paths only, never hardcode domains):** - `/api/ai/completion` — AI proxy | `/api/data/{appId}/*` — PostgreSQL (DataConnect SDK) - `/api/storage/{appId}/*` — File uploads (GCS) | `/api/auth/google/*` — Google OAuth - `/api/contact/submit` — Contact form | SDKs: `window.genmb.db`, `.storage`, `.auth` **File structure:** `index.html` (entry), `src/` (source), `styles/` (CSS), `backend/` (optional FastAPI), `CLAUDE.md` (this file). **Cannot:** Install npm packages at runtime, access filesystem, make direct server-side calls from frontend, modify infra.