diff --git a/readme.md b/readme.md index a32eab00cd1b6342b8ed2babc6411da26ede372d..ebf0b594d0024cc969b5730caf2856263856d1c7 100644 --- a/readme.md +++ b/readme.md @@ -2,214 +2,202 @@ ## ๐ŸŽฎ Overview -This project connects a **browser-based Geometry Dashโ€“style game** with an **Arduino board**. -The player controls the jumping character using: +This project is a comprehensive IoT gaming system connecting a **React-based Geometry Dashโ€“style game** with an **Arduino board** and a **real-time monitoring dashboard**. -* A **physical button** connected to the Arduino -* Or the **space bar** on the keyboard -* (Optional) Touch input on mobile +The system is fully containerized using Docker and orchestrated via Docker Compose. -The Arduino communicates with a **Node.js backend**, which relays player actions to the **browser game** using WebSockets. The game sends back **score** and **death statistics**, which the backend forwards to the Arduino. The Arduino displays these values on a **7-segment display**. +**Key Interactions:** -The whole system is fully bidirectional: + * **Player Input:** Controls the character via an **Arduino Button**, Keyboard, or Touch. + * **Game Control:** Adjust game speed in real-time using an **Arduino Physical Rotator**. + * **Feedback:** Score and Death counts are sent back to the Arduino **7-Segment Display**. + * **Monitoring:** A dedicated Monitor Server broadcasts game events to a **React Dashboard** for real-time analytics. + * **Persistence:** Game data is buffered and synced to a **PostgreSQL database**. -``` -Arduino (Button) โ†’ Node Backend โ†’ Game Browser (Jump Input) -Game Browser (Score/Deaths) โ†’ Node Backend โ†’ Arduino (Seven Segment Display) -``` - ---- +----- # ๐Ÿงฑ **Project Architecture** +The system is split into four main containerized services + a database. + ``` -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” WebSocket โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ Browser Game (JS) โ”‚ <--------------> โ”‚ Node.js Backend โ”‚ -โ”‚ - Canvas runner โ”‚ โ”‚ - Express static serverโ”‚ -โ”‚ - Jump logic โ”‚ โ”‚ - WebSocket server โ”‚ -โ”‚ - Obstacle system โ”‚ โ”‚ - SerialPort interface โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ - โ”‚ Serial USB - โ–ผ - โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” - โ”‚ Arduino โ”‚ - โ”‚ - Button input โ”‚ - โ”‚ - Seven segment display output โ”‚ - โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ + โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” + โ”‚ PostgreSQL โ”‚ + โ”‚ (Persistence) โ”‚ + โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ–ฒโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ + โ”‚ (Buffer 10s) + โ”‚ +โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ–ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” +โ”‚ Game Client โ”‚ <----> โ”‚ Game Server โ”‚ -----> โ”‚ Monitor Server โ”‚ +โ”‚ (React + Vite) โ”‚ WS โ”‚ (Node + Serial) โ”‚ WS โ”‚ (Node) โ”‚ +โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ + โ”‚ โ”‚ + โ”‚ Serial / USB โ”‚ WS + โ–ผ โ–ผ + โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” + โ”‚ Arduino โ”‚ โ”‚ Monitor Client โ”‚ + โ”‚ - Button (Jump) โ”‚ โ”‚ (React + Vite) โ”‚ + โ”‚ - Rotator (Game Speed) โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ + โ”‚ - 7-Segment (Score Display) โ”‚ + โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ ``` ---- + +----- # ๐Ÿ› ๏ธ **Technologies Used** -### **Frontend** +### **Frontend (Game & Monitor)** -* HTML5 Canvas -* CSS responsive layout (mobile-friendly) -* Vanilla JavaScript game engine -* WebSocket client -* Keyboard & touch controls + * **React** with **Vite** + * TypeScript + * HTML5 Canvas (Game Logic) + * CSS Responsive Layout + * WebSocket Client -### **Backend** +### **Backend (Game & Monitor Servers)** -* Node.js + Express -* WebSocket (ws) -* SerialPort (for Arduino communication) + * **Node.js** + Express + * **WebSocket** (ws) for real-time communication + * **SerialPort** (Hardware Interface) + * **PostgreSQL** (Data Persistence) + * **Docker** & **Docker Compose** (Containerization) ### **Hardware** -* Arduino -* Push button (for jump input) -* Seven-segment display (via SevSeg library) + * Arduino Board + * Push Button (Jump Input) + * **Physical Rotator/Potentiometer** (Speed Control) + * Seven-Segment Display (SevSeg Library) ---- +----- -# ๐Ÿ”Œ **Setup Instructions** +# ๐Ÿ”Œ **Setup & Installation** -## 1๏ธโƒฃ Install Dependencies +The entire stack is Dockerized. You do not need to install Node or Postgres locally to run the full system. -### **Node backend** +## 1๏ธโƒฃ Hardware Setup -```bash -npm install express ws serialport -``` +1. Connect the **Button**, **Rotator**, and **7-Segment Display** to your Arduino. +2. Upload the sketch found in `arduino/controller/controller.ino`. +3. Ensure the Arduino is connected via USB to the machine running the containers. + +## 2๏ธโƒฃ Docker Start (Recommended) + +We use **Docker Compose** to bring up services in the correct order: -### **Arduino** +1. **PostgreSQL Database** +2. **Game Server** (Connects to DB & Arduino) +3. **Monitor Server** (Connects to Game Server) +4. **Clients** (Game & Monitor Frontends) -Install the **SevSeg** library: +Run the following command in the root directory: -**Arduino IDE โ†’ Sketch โ†’ Include Library โ†’ Manage Libraries โ†’ Search โ€œSevSegโ€** +```bash +docker-compose up --build +``` ---- +*Note: You may need to map the specific USB port in `docker-compose.yml` depending on your OS (e.g., `/dev/ttyUSB0` or `COM3`).* + +----- # ๐Ÿ“ **Project Structure** ``` -/project -โ”‚ -โ”œโ”€โ”€ public/ -โ”‚ โ”œโ”€โ”€ index.html -โ”‚ โ”œโ”€โ”€ style.css -โ”‚ โ””โ”€โ”€ game.js -โ”‚ -โ”œโ”€โ”€ server.js # Node.js backend -โ”œโ”€โ”€ arduino.js (optional - for simulation) -โ””โ”€โ”€ README.md + . + โ”œโ”€โ”€ arduino + โ”‚ โ””โ”€โ”€ controller + โ”‚ โ””โ”€โ”€ controller.ino # Arduino Sketch (Button, Rotator, SevSeg) + โ”œโ”€โ”€ docker-compose.yml # Orchestration for DB, Servers, Clients + โ”œโ”€โ”€ game + โ”‚ โ”œโ”€โ”€ client # React + Vite Game Frontend + โ”‚ โ”‚ โ”œโ”€โ”€ Dockerfile + โ”‚ โ”‚ โ””โ”€โ”€ src/ # Game Logic & Canvas + โ”‚ โ””โ”€โ”€ server # Node.js Game Backend + โ”‚ โ”œโ”€โ”€ db/ # Postgres Connection & Schemas + โ”‚ โ”œโ”€โ”€ Dockerfile + โ”‚ โ””โ”€โ”€ server.js # Handles Serial, WS, and DB buffering + โ”œโ”€โ”€ monitor + โ”‚ โ”œโ”€โ”€ client # React + Vite Dashboard Frontend + โ”‚ โ”‚ โ”œโ”€โ”€ Dockerfile + โ”‚ โ”‚ โ””โ”€โ”€ src/ # Charts & Stats Components + โ”‚ โ””โ”€โ”€ server # Node.js Monitor Backend + โ”‚ โ”œโ”€โ”€ Dockerfile + โ”‚ โ””โ”€โ”€ monitor-arduino.js # Broadcasts events to dashboards + โ””โ”€โ”€ readme.md ``` ---- +----- -# ๐Ÿ–ฅ๏ธ **Frontend Game Features** +# ๐Ÿ–ฅ๏ธ **Frontend Features** -* Geometry Dashโ€“style gameplay -* Ground + obstacles moving rightโ†’left -* Player jumps with: - * Arduino button (via WebSocket) - * Spacebar on keyboard - * Touch on mobile -* Scoring system: - * +1 for every obstacle cleared -* Death detection and game over UI -* Restart button -* Fully responsive + centered canvas +### **Game Client (React)** ---- + * Geometry Dashโ€“style gameplay via Canvas. + * **Input Methods:** Arduino Button, Keyboard (Space), Mobile Touch. + * **Speed Control:** Listens for speed updates triggered by the **Arduino Rotator**. -# ๐ŸŒ **WebSocket Protocol** +### **Monitor Client (React)** -### **Browser โ†’ Backend (Game Events)** + * Real-time dashboard visualization. + * Displays live Score, Death counts, and Sensor data. + * Receives broadcasted data from the Monitor Server. -#### Score update: +----- -```json -{ - "type": "score", - "score": 12 -} -``` +# ๐Ÿ’พ **Data Persistence & Protocol** -#### Death event: +### **Database Strategy** -```json -{ - "type": "death", - "deaths": 3 -} -``` +To prevent database throttling during high-frequency game events, the Game Server implements an **In-Memory Buffer**: -### **Backend โ†’ Browser (Jump Input)** +1. Game events (Score, Death, Jump) are stored temporarily in RAM. +2. **Every 10 seconds**, the buffer is flushed and bulk-inserted into **PostgreSQL**. +3. **Storage Format:** Records include the Event Data, **Sensor ID**, and **Timestamp**. -Sent when Arduino button is pressed: +### **WebSocket Protocol** -```json -{ - "action": "jump" -} -``` +#### **Arduino โ†’ Game Server** ---- + * `JUMP` โ†’ Trigger player jump. + * `SPEED:` โ†’ Update game speed based on rotator position. -# ๐Ÿ” **Backend Responsibilities** +#### **Game Server โ†’ Monitor Server** -* Serve the frontend game files -* Maintain WebSocket connections -* Receive serial events from Arduino (`"JUMP"`) -* Forward `"jump"` action to browser clients -* Receive score/death stats from browser -* Format and send them to Arduino via serial: +Forwards all game events to the monitor network. - * `S` for score - * `D` for deaths +#### **Backend โ†’ Arduino** -Example: + * `S` โ†’ Update Score on 7-Segment. + * `D` โ†’ Update Deaths on 7-Segment. -``` -S15\n โ†’ show score 15 on seven segment -D3\n โ†’ show deaths 3 on seven segment -``` +----- ---- +# ๐Ÿ”ง **Arduino Logic** -# ๐Ÿ”ง **Arduino Responsibilities** +The Arduino sketch handles three main tasks: -* Detect button press โ†’ send `"JUMP\n"` via Serial -* Receive messages from backend: +1. **Input (Button):** Detects press and sends `JUMP` via Serial. +2. **Input (Rotator):** Reads analog value from potentiometer, maps it to a speed factor, and sends `SPEED:` via Serial. +3. **Output (Display):** Parses incoming serial data (`S##`, `D##`) to update the 7-segment display. - * `S##` โ†’ update score display - * `D##` โ†’ update death count -* Use SevSeg to draw numbers on seven-segment display +----- -Pseudo-protocol: +# ๐Ÿงช **Testing & Simulation** -``` -PC to Arduino: - S42 โ†’ set score to 42 - D7 โ†’ set death count to 7 +If you do not have the hardware attached, you can still run the stack. The Docker containers will attempt to connect to Serial, but the web interface will function independently (controlled via Keyboard). -Arduino to PC: - JUMP โ†’ player pressed the button -``` +To test the **Monitor Dashboard**: ---- +1. Open the Game Client (`http://localhost:port`). +2. Open the Monitor Client (`http://localhost:port`). +3. Play the game; stats will update in real-time on the Monitor. -# ๐Ÿงช **Testing Without Arduino (Virtual Serial Ports)** -You can create paired virtual serial ports (e.g., using `socat` on Linux/macOS or com0com on Windows). -Then run the simulator: -```bash -node arduino.js -``` -Press Enter to simulate a button press โ†’ game character jumps. ---- -# ๐Ÿ“ฑ **Responsive UI Features** -* Canvas centered via flexbox -* Scales with `aspect-ratio` -* Score & Game Over UI positioned relative to game container -* Mobile-friendly touch support