# matiasmoraga337-bit/subiranuevorepo architecture

> Architecture diagram of the GitHub repository matiasmoraga337-bit/subiranuevorepo, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/matiasmoraga337-bit/subiranuevorepo
- Repository: https://github.com/matiasmoraga337-bit/subiranuevorepo

## Overview

#### Purpose and entry points
“15 Días” is a 15-day post-apocalyptic survival game. The Vue client supports offline play with bundled events and online play with authentication, saved games, and AI-generated dialogue. Frontend bootstraps at `Game/src/main.js` into `Game/src/App.vue`; Express bootstraps at `backend/src/index.js`.

#### Client composition and presentation
`Game/src/App.vue` orchestrates the current scene, story, decisions, resource display, and end-state UI. Reusable display/interaction components separate the game screen into narrative and controls:
- `Game/src/components/StoryText.vue`
- `Game/src/components/DecisionButtons.vue`
- `Game/src/components/StatBar.vue`
- `Game/src/components/SceneArt.vue`

Retro styling and pixel-art presentation are client-side concerns, principally under `Game/src/assets/styles/retro.css` and `Game/src/components/PixelBackground.vue`.

#### Core game-state engine
Pinia centralizes gameplay state and progression in `Game/src/stores/gameStore.js`: day advancement, resource consumption and caps, decision consequences, win/loss conditions, and minigame transitions. Local-mode narrative content is loaded from `Game/src/data/events.js`. The essential flow is: load event for current day → player chooses an option → apply resource effects and daily consumption → detect failure/survival → advance to next event or minigame.

#### Minigame stage boundary
Days 5, 10, and 15 switch from the normal decision loop into dedicated interactive components:
- `Game/src/components/minigames/CatchRainGame.vue`
- `Game/src/components/minigames/EscapeGame.vue`
- `Game/src/components/minigames/FindcansGame.vue`

These are isolated UI/gameplay modes that return outcomes to the parent/store flow, rather than becoming separate backend game types.

#### Online client boundary
`Game/src/api/index.js` is the REST boundary from Vue to Express. `Game/src/stores/serverStore.js` manages server-backed session/game behavior distinct from local state. Online mode requires login, persists progress remotely, and can request additional generated events; offline mode remains functional without any backend or database dependency.

#### Backend API, persistence, and AI
Express exposes domain routes from `backend/src/index.js`:
- Authentication: `backend/src/routes/auth.js`
- Saved-game operations: `backend/src/routes/games.js`
- Dialogue/event generation: `backend/src/routes/dialogue.js`

JWT enforcement is centralized in `backend/src/middleware/auth.js`. Mongoose models define persistence boundaries for users, games, and generated dialogue in `backend/src/models/User.js`, `backend/src/models/Game.js`, and `backend/src/models/Dialogue.js`. MongoDB connection setup resides in `backend/src/config/db.js`. Gemini integration is isolated in `backend/src/services/gemini.js`, keeping the Google Gemini API behind the dialogue route/service boundary.

#### Runtime and deployment
The system runs on Node.js 20+, with Vue 3/Vite in `Game/` and Express 5 in `backend/`; MongoDB is required only for online mode. Docker definitions exist at `Game/Dockerfile` and `backend/Dockerfile`, with local multi-service orchestration in `compose.yml`. Production composition uses `docker-compose.prod.yml`, targeting a Dockerized frontend plus externally hosted Render backend and MongoDB Atlas. CI/CD is defined by `.github/workflows/main.yml`.

Main entry points: [`backend/src/index.js`](https://github.com/matiasmoraga337-bit/subiranuevorepo/blob/main/backend/src/index.js) (Express API), [`Game/src/App.vue`](https://github.com/matiasmoraga337-bit/subiranuevorepo/blob/main/Game/src/App.vue) (Game shell), [`backend/src/routes/dialogue.js`](https://github.com/matiasmoraga337-bit/subiranuevorepo/blob/main/backend/src/routes/dialogue.js) (Dialogue routes), [`Game/src/stores/gameStore.js`](https://github.com/matiasmoraga337-bit/subiranuevorepo/blob/main/Game/src/stores/gameStore.js) (Local game state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Vue client"]
  node_vue_bootstrap["Vue bootstrap<br/>Vue entry<br/>[main.js]"]
  node_app["Game shell<br/>Vue orchestrator<br/>[App.vue]"]
  node_game_store["Local game state<br/>Pinia store<br/>[gameStore.js]"]
  node_events["Bundled events<br/>local narrative data<br/>[events.js]"]
  node_game_ui["Narrative game UI<br/>Vue components"]
  node_minigames["Day 5/10/15 minigames<br/>Vue gameplay modes"]
  node_rest_api["REST client<br/>API boundary<br/>[index.js]"]
  node_server_store["Online game state<br/>Pinia store<br/>[serverStore.js]"]
end

subgraph group_backend["Express backend"]
  node_express["Express API<br/>Node entry<br/>[index.js]"]
  node_auth_route["Authentication routes<br/>Express routes<br/>[auth.js]"]
  node_games_route["Saved-game routes<br/>Express routes<br/>[games.js]"]
  node_dialogue_route["Dialogue routes<br/>Express routes<br/>[dialogue.js]"]
  node_jwt_auth["JWT middleware<br/>auth middleware<br/>[auth.js]"]
  node_models["Mongoose models<br/>persistence models"]
  node_gemini_service["Gemini adapter<br/>AI service<br/>[gemini.js]"]
end

subgraph group_data["External services"]
  node_mongodb[("MongoDB<br/>database")]
  node_gemini{{"Google Gemini API<br/>AI API"}}
end

subgraph group_delivery["Deployment"]
  node_local_compose["Local Compose<br/>container orchestration<br/>[compose.yml]"]
  node_production_compose["Production Compose<br/>deployment composition"]
  node_cicd["CI/CD workflow<br/>GitHub Actions<br/>[main.yml]"]
end

node_vue_bootstrap -->|"mounts"| node_app
node_app -->|"renders"| node_game_ui
node_app -->|"drives local play"| node_game_store
node_game_store -->|"loads daily event"| node_events
node_game_store -->|"switches on days 5, 10, 15"| node_minigames
node_minigames -->|"returns outcome"| node_game_store
node_app -.->|"uses in online mode"| node_server_store
node_server_store -->|"requests online operations"| node_rest_api
node_rest_api -->|"REST"| node_express
node_express -->|"routes"| node_auth_route
node_express -->|"routes"| node_games_route
node_express -->|"routes"| node_dialogue_route
node_games_route -->|"protects"| node_jwt_auth
node_dialogue_route -->|"protects"| node_jwt_auth
node_auth_route -->|"reads and writes"| node_models
node_games_route -->|"persists saves"| node_models
node_dialogue_route -->|"stores generated dialogue"| node_models
node_models -->|"Mongoose"| node_mongodb
node_dialogue_route -->|"generates event dialogue"| node_gemini_service
node_gemini_service -->|"API calls"| node_gemini
node_local_compose -.->|"runs frontend"| node_vue_bootstrap
node_local_compose -.->|"runs backend"| node_express
node_production_compose -.->|"deploys frontend"| node_vue_bootstrap
node_cicd -.->|"delivers"| node_production_compose

click node_vue_bootstrap "https://github.com/matiasmoraga337-bit/subiranuevorepo/blob/main/Game/src/main.js"
click node_app "https://github.com/matiasmoraga337-bit/subiranuevorepo/blob/main/Game/src/App.vue"
click node_game_store "https://github.com/matiasmoraga337-bit/subiranuevorepo/blob/main/Game/src/stores/gameStore.js"
click node_events "https://github.com/matiasmoraga337-bit/subiranuevorepo/blob/main/Game/src/data/events.js"
click node_rest_api "https://github.com/matiasmoraga337-bit/subiranuevorepo/blob/main/Game/src/api/index.js"
click node_server_store "https://github.com/matiasmoraga337-bit/subiranuevorepo/blob/main/Game/src/stores/serverStore.js"
click node_express "https://github.com/matiasmoraga337-bit/subiranuevorepo/blob/main/backend/src/index.js"
click node_auth_route "https://github.com/matiasmoraga337-bit/subiranuevorepo/blob/main/backend/src/routes/auth.js"
click node_games_route "https://github.com/matiasmoraga337-bit/subiranuevorepo/blob/main/backend/src/routes/games.js"
click node_dialogue_route "https://github.com/matiasmoraga337-bit/subiranuevorepo/blob/main/backend/src/routes/dialogue.js"
click node_jwt_auth "https://github.com/matiasmoraga337-bit/subiranuevorepo/blob/main/backend/src/middleware/auth.js"
click node_gemini_service "https://github.com/matiasmoraga337-bit/subiranuevorepo/blob/main/backend/src/services/gemini.js"
click node_local_compose "https://github.com/matiasmoraga337-bit/subiranuevorepo/blob/main/compose.yml"
click node_production_compose "https://github.com/matiasmoraga337-bit/subiranuevorepo/blob/main/docker-compose.prod.yml"
click node_cicd "https://github.com/matiasmoraga337-bit/subiranuevorepo/blob/main/.github/workflows/main.yml"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_vue_bootstrap,node_app,node_game_store,node_events,node_game_ui,node_minigames,node_rest_api,node_server_store toneBlue
class node_express,node_auth_route,node_games_route,node_dialogue_route,node_jwt_auth,node_models,node_gemini_service toneAmber
class node_mongodb,node_gemini toneMint
class node_local_compose,node_production_compose,node_cicd toneRose
```

## Components

### Vue client

Offline-first game interface and local progression.

- [Vue bootstrap](https://github.com/matiasmoraga337-bit/subiranuevorepo/blob/main/Game/src/main.js): Vue entry · `Game/src/main.js`
- [Game shell](https://github.com/matiasmoraga337-bit/subiranuevorepo/blob/main/Game/src/App.vue): Vue orchestrator · Coordinates scene, narrative, decisions, stats, and end states. · `Game/src/App.vue`
- [Local game state](https://github.com/matiasmoraga337-bit/subiranuevorepo/blob/main/Game/src/stores/gameStore.js): Pinia store · Owns day progression, resources, consequences, and survival checks. · `Game/src/stores/gameStore.js`
- [Bundled events](https://github.com/matiasmoraga337-bit/subiranuevorepo/blob/main/Game/src/data/events.js): local narrative data · `Game/src/data/events.js`
- **Narrative game UI**: Vue components · Story text, decisions, stat bars, scene art, and pixel background.
- **Day 5/10/15 minigames**: Vue gameplay modes · Catch rain, escape, and find cans return outcomes to the main flow.
- [REST client](https://github.com/matiasmoraga337-bit/subiranuevorepo/blob/main/Game/src/api/index.js): API boundary · `Game/src/api/index.js`
- [Online game state](https://github.com/matiasmoraga337-bit/subiranuevorepo/blob/main/Game/src/stores/serverStore.js): Pinia store · Manages authenticated session and remotely persisted progress. · `Game/src/stores/serverStore.js`

### Express backend

Online authentication, saved games, and generated events.

- [Express API](https://github.com/matiasmoraga337-bit/subiranuevorepo/blob/main/backend/src/index.js): Node entry · `backend/src/index.js`
- [Authentication routes](https://github.com/matiasmoraga337-bit/subiranuevorepo/blob/main/backend/src/routes/auth.js): Express routes · `backend/src/routes/auth.js`
- [Saved-game routes](https://github.com/matiasmoraga337-bit/subiranuevorepo/blob/main/backend/src/routes/games.js): Express routes · `backend/src/routes/games.js`
- [Dialogue routes](https://github.com/matiasmoraga337-bit/subiranuevorepo/blob/main/backend/src/routes/dialogue.js): Express routes · `backend/src/routes/dialogue.js`
- [JWT middleware](https://github.com/matiasmoraga337-bit/subiranuevorepo/blob/main/backend/src/middleware/auth.js): auth middleware · `backend/src/middleware/auth.js`
- **Mongoose models**: persistence models · User, game, and generated dialogue records.
- [Gemini adapter](https://github.com/matiasmoraga337-bit/subiranuevorepo/blob/main/backend/src/services/gemini.js): AI service · Keeps Google Gemini behind the dialogue boundary. · `backend/src/services/gemini.js`

### External services

Only required for online gameplay.

- **MongoDB**: database · Online users, saves, and generated dialogue.
- **Google Gemini API**: AI API

### Deployment

Container orchestration and delivery pipeline.

- [Local Compose](https://github.com/matiasmoraga337-bit/subiranuevorepo/blob/main/compose.yml): container orchestration · `compose.yml`
- [Production Compose](https://github.com/matiasmoraga337-bit/subiranuevorepo/blob/main/docker-compose.prod.yml): deployment composition · Runs Dockerized frontend against hosted backend and Atlas. · `docker-compose.prod.yml`
- [CI/CD workflow](https://github.com/matiasmoraga337-bit/subiranuevorepo/blob/main/.github/workflows/main.yml): GitHub Actions · `.github/workflows/main.yml`

## Connections

- Vue bootstrap → Game shell: mounts
- Game shell → Narrative game UI: renders
- Game shell → Local game state: drives local play
- Local game state → Bundled events: loads daily event
- Local game state → Day 5/10/15 minigames: switches on days 5, 10, 15
- Day 5/10/15 minigames → Local game state: returns outcome
- Game shell → Online game state: uses in online mode
- Online game state → REST client: requests online operations
- REST client → Express API: REST
- Express API → Authentication routes: routes
- Express API → Saved-game routes: routes
- Express API → Dialogue routes: routes
- Saved-game routes → JWT middleware: protects
- Dialogue routes → JWT middleware: protects
- Authentication routes → Mongoose models: reads and writes
- Saved-game routes → Mongoose models: persists saves
- Dialogue routes → Mongoose models: stores generated dialogue
- Mongoose models → MongoDB: Mongoose
- Dialogue routes → Gemini adapter: generates event dialogue
- Gemini adapter → Google Gemini API: API calls
- Local Compose → Vue bootstrap: runs frontend
- Local Compose → Express API: runs backend
- Production Compose → Vue bootstrap: deploys frontend
- CI/CD workflow → Production Compose: delivers