How matiasmoraga337-bit/subiranuevorepo works
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: index.js Express API · App.vue Game shell · dialogue.js Dialogue routes · gameStore.js Local game state
Components 20
Vue client
Offline-first game interface and local progression.
- Vue bootstrap
Game/src/main.js - Game shell · Coordinates scene, narrative, decisions, stats, and end states.
Game/src/App.vue - Local game state · Owns day progression, resources, consequences, and survival checks.
Game/src/stores/gameStore.js - Bundled events
Game/src/data/events.js - Narrative game UI · Story text, decisions, stat bars, scene art, and pixel background.
- Day 5/10/15 minigames · Catch rain, escape, and find cans return outcomes to the main flow.
- REST client
Game/src/api/index.js - Online game state · Manages authenticated session and remotely persisted progress.
Game/src/stores/serverStore.js
Express backend
Online authentication, saved games, and generated events.
- Express API
backend/src/index.js - Authentication routes
backend/src/routes/auth.js - Saved-game routes
backend/src/routes/games.js - Dialogue routes
backend/src/routes/dialogue.js - JWT middleware
backend/src/middleware/auth.js - Mongoose models · User, game, and generated dialogue records.
- Gemini adapter · Keeps Google Gemini behind the dialogue boundary.
backend/src/services/gemini.js
External services
Only required for online gameplay.
- MongoDB · Online users, saves, and generated dialogue.
- Google Gemini API
Deployment
Container orchestration and delivery pipeline.
- Local Compose
compose.yml - Production Compose · Runs Dockerized frontend against hosted backend and Atlas.
docker-compose.prod.yml - CI/CD workflow
.github/workflows/main.yml
Connections 24
- 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