Workbench

**ROLE**

Act as a Senior Game Engineer and Frontend Architect. Your task is to develop a production-ready, responsive web survival mini-game that incorporates a clean separation between the game engine and UI. Please do not use my original HTML; instead, re-implement it from scratch with significant improvements.

---

**CONTEXT (Replication & Improvement)**

1. **Game Overview**: Create a top-down grid survival game featuring a limited viewport over a larger map.
2. **Game Mechanics**:
   - **Stats**: Include health, hunger, thirst, energy, and warmth represented with bars and critical states.
   - **Inventory**: Design an inventory with 15 slots that supports stacking by item type and quick selection keys (1–5).
   - **Crafting**: Implement recipes such as campfire, stone axe, shelter, and medicine.
   - **Weather Effects**: Include various weather conditions (clear, snow, rain) that logically affect player stats.
   - **Day/Night Cycle**: Integrate a consistent internal clock for day/night cycles without mixing with the system clock.
   - **Resource Spawns**: Define resource and obstacle spawns (forest/snow/rock/water) with items like trees, rocks, berries, herbs, and flint.
   - **Interactions**: Enable player actions such as moving, collecting, using, dropping items, and accessing crafting.

3. **Design Vision**: Prioritize a strong UI (80%) with minimal 3D elements (low-poly); utilize 2D for maps, implement occasional mini-games, ensure data coherence between UI and backend, and allow for cross-platform play.

---

**OBJECTIVES**

1. **Game Engine & UI**: Redesign the game engine (tick management, rules, RNG) and create a robust UI/HUD.
2. **Issue Resolution**: Correct inconsistencies in timing, balance, inventory, and weather, while optimizing performance.
3. **Persistence & APIs**: Implement real APIs and optional telemetry.
4. **Production Build**: Prepare a production-ready build complete with testing and documentation.

---

**TECH & ARCHITECTURE**

- **Framework**: Utilize Next.js (App Router) and React.
- **State Management**: Choose between Zustand or Redux Toolkit; provide justification for your choice.
- **Map Rendering**: Implement a 2D Canvas (or WebGL if beneficial) for grid rendering; avoid excessive DOM manipulation.
- **UI Framework**: Use Tailwind CSS and shadcn/ui, with framer-motion for micro-interactions.
- **3D Elements**: Include React-Three-Fiber only for specific low-poly views/elements.
- **Persistence**: Use LocalStorage for autosave and a REST API (mock real) with routes under /api/*.
- **Type Safety**: Apply strict TypeScript; ensure code quality with ESLint and Prettier.
- **Testing Framework**: Use Vitest/Jest paired with React Testing Library for critical logic and UI tests.

---

**GAME DESIGN (Hard Requirements)**

1. **Map Configuration**: Allow configurable map size (e.g., 50×50), with logical cells of 40px and a viewport of ~20×15 cells.
2. **Procedural Generation**: Implement procedural map generation with seed (RNG reproducible) and non-destructive biome smoothing.
3. **Terrain**: Define snow, forest, rock, and water terrains with specific traversal rules (e.g., players cannot cross water without an item).
4. **Weather Dynamics**: Create a configurable probability for weather effects that incrementally impact stats, not abrupt changes:
   - **Snow**: Gradually reduces warmth based on exposure; proximity to a campfire mitigates loss.
   - **Rain**: Allows collection of "dirty water" while slightly penalizing warmth.
   - **Day/Night Cycle**: Maintain coherent timelines for temperature and visibility, with a single timeline for HUD and logs.
5. **Stat Management**: Implement balanced stat degradation per tick; ensure mutually exclusive causes of death are reported accurately.
6. **Inventory System**: Design an inventory with 15 slots, supporting stacking by type and weight capacity; map hotbar keys (1–5) to the first 5 stacks.
7. **Crafting System**: Implement declarative recipes in JSON format, ensuring realism (e.g., shelter should not require herbs).
8. **Interaction Mechanics**: Design clear and consistent item interaction mechanics (e.g., pressing “E” to collect items).
9. **Mini-games**: Create scalable mini-games (initially one, e.g., tree cutting with a timing bar, hunting with skill shots) that are decoupled from core gameplay.

---

**BACKEND (Minimum Viable but Real)**

- **API Structure**: Develop Next.js API routes with the following endpoints:
  - `POST /api/save`: Save game state snapshot.
  - `GET /api/load`: Load game state.
  - `POST /api/telemetry`: Send events like death cause, crafting, and aggregate tick stats.
  - `GET /api/seed/:id`: Retrieve reproducible maps.
- **Validation & Rate Limiting**: Use Zod for validation and implement simple rate limiting; no authentication required at this stage (prepare for future integration).
- **Serializable State Model**: Include player, map, inventory, climate, clock, recipes, and flags in the state model.

---

**UX/UI REQUIREMENTS**

1. **Responsive Design**: Ensure the game is playable on both desktop and mobile devices; implement touch controls (virtual joystick + action/craft buttons).
2. **Accessibility**: Focus on accessibility practices including focus management, ARIA attributes, scalable typography, and high contrast themes.
3. **HUD Features**: Design HUD with animated critical state bars; ensure logs display timestamps from the internal clock.
4. **Tooltips and Help**: Integrate helpful tooltips and ensure controls are visible and easily rebindable.
5. **Theme Options**: Provide aesthetic themes (cyan/tech, subtle glass/neumorphic); use SVG icons for critical elements instead of emojis.

---

**PERFORMANCE**

1. **Game Loop**: Utilize `requestAnimationFrame` with a fixed timestep for logic; apply delta adjustments for animations.
2. **Culling and Repainting**: Optimize performance by repainting only visible cells; implement object pooling for particle effects.
3. **DOM Management**: Avoid excessive use of `innerHTML` per frame and reduce costly layout operations.

---

**BALANCE & DATA**

1. **Configurable Parameters**: Expose game balance parameters in `/config/*.json` or `game.config.ts`, including stat decay rates, weather probabilities, loot tables, crafting recipes, and cold damage.
2. **Difficulty Modes**: Introduce “easy” and “hard” modes with adjustable configurations.

---

**ACCEPTANCE CRITERIA**

1. **Initial Game State**: The game should start on Day 1 at 12:00 with a constant seed; players should be able to move, collect, use items, craft, save/load, and die with correctly reported causes.
2. **Weather Impact**: Weather should gradually affect player stats; campfires should effectively mitigate cold within a logical radius.
3. **Inventory Functionality**: The inventory should support stacking, the hotbar should function correctly, and dropped items should respawn in the world.
4. **Mobile Playability**: Ensure the game is playable on mobile devices with stable FPS at 60 in standard viewport.

---

**OUTPUT FORMAT (Deliverables)**

1. **Repository Structure**: Provide a detailed repo tree.
2. **Complete Code**: Include the complete codebase for:
   - Game Engine (pure logic)
   - Rendering (canvas)
   - UI (React)
   - API (Next.js)
   - Configuration
   - Type Definitions
3. **README**: Include setup instructions, script details, architecture overview, and design decisions.
4. **Key Tests**: Provide tests for critical components (engine, inventory, crafting, death cause).
5. **QA Checklist**: Include a checklist for quality assurance and a balance sheet that is editable.
6. **Recipe & Loot JSON**: Deliver a JSON file for crafting recipes and another for biomes/loot.

---

**STYLE & QUALITY**

1. **Code Quality**: Ensure strict TypeScript usage, with brief and useful comments; implement pure functions where applicable and utilize Dependency Injection for RNG/seed management.
2. **No Chain-of-Thought**: Avoid lengthy reasoning in the output; include a brief justification (≤120 words) summarizing key design decisions.

---

**STARTING DATA (Examples to Convert, Not Literal)**

1. **Stats**: health, hunger, thirst, energy, warmth (range: 0–100).
2. **Terrains**: snow, forest, rock, water.
3. **Items**: wood, stone, berries, herbs, mushroom, flint, dirty_water, boiled_water.
4. **Base Recipes**:
   - `campfire = wood×3 + stone×2` (restores warmth).
   - `stone_axe = wood×2 + stone×1 + flint×1`.
   - `shelter = wood×6 + stone×2` (provides rest and mitigates night cold).
   - `boiled_water = dirty_water×1 + campfire` (increases thirst without penalty).

---

**TASK**

Produce the complete project aligning with all the specified requirements. Do not copy my HTML; instead, redesign and optimize all components. Deliver the code, configurations, tests, README, and a brief final justification.