> For the complete documentation index, see [llms.txt](https://cmsc137.gitbook.io/echoed-shadows/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cmsc137.gitbook.io/echoed-shadows/basics/images-and-media.md).

# Technical Documentation

The technical foundation of **Echoed Shadows** is designed to leverage modern tools and technologies to deliver a polished, engaging, and scalable game experience. Here's a detailed overview of the tech stack, including its role in game development.

***

### **Frontend**

The frontend is responsible for rendering graphics, managing player interactions, and handling the user interface. The following tools were used:

* **Vite + React**
  * **Vite** ensures fast builds during development and optimized performance in production.
  * **React** provides a modular component-based framework to manage the game's UI elements such as menus, buttons, lobbies, and overlays.
* **Phaser**
  * A powerful 2D game engine used for rendering the haunted house, creating animations, and managing game mechanics like:
    * Player movement.
    * Lighting and limited visibility effects.
    * Object interaction (e.g., hiding in closets, activating secret passages).
* **Electron**
  * Ensures that the game runs as a standalone desktop application across platforms like Windows, macOS, and Linux.
  * Provides a seamless bridge between the game logic and the desktop environment.

***

### **Backend**

The backend manages real-time gameplay, synchronization, and multiplayer functionality:

* **Node.js**
  * Serves as the backbone for the game's server-side operations.
  * Manages game state, player data, and logic for in-game events.
* **Socket.IO**
  * Enables real-time communication between players and the server.
  * Facilitates instant updates for actions such as hiding, movement, and haunting events.
  * Ensures game state consistency across clients.

***

### **Networking**

Networking enables the multiplayer functionality of **Echoed Shadows**, allowing players to connect and compete in 1v1 matches.

* **Lobby System**
  * Players can create or join lobbies to organize matches.
  * Lobbies allow players to set game parameters and start sessions once all participants are ready.
* **Host Options**
  * **Self-Hosting**: Players can host a game on their local device, allowing others to connect over a local network or via direct IP.
  * **Remote Hosting**: Players can join matches hosted by others online.
* **Room-based Sessions**
  * Matches are isolated into separate rooms, ensuring that each game operates independently.
  * This approach supports multiple concurrent games and enhances overall performance.
* **Real-Time Synchronization**
  * All game events (e.g., player movements, hiding interactions, and timer synchronization) are updated in real time to ensure a smooth multiplayer experience.

***

### **Assets**

Creating assets that perfectly fit the game's dark, atmospheric tone was essential to the visual identity of **Echoed Shadows**:

* **Aseprite**
  * Used to design pixel art assets such as character sprites, haunted house objects, and environmental elements.
  * Its animation tools were utilized for smooth transitions and interactive feedback.
* **IbisPaint**
  * Leveraged for conceptualizing designs and refining textures.
  * Provided additional detail and polish to assets, complementing the pixel art style with a refined aesthetic.