🎯 Wavelenght Game

A real-time online multiplayer game inspired by Wavelength - a communication and guessing game for 2 players.

🎮 Game Overview

Players: 2 players online
Duration: 5-20 rounds (configurable)
Objective: One player (Guide) sees target zones and verbally guides the other player (Shooter) to place a needle accurately

🎲 How to Play

Setup

1. One player creates a room (with optional custom code and round count)
2. Share the room code with your friend
3. Friend joins using the room code
4. Game starts automatically!

Gameplay Flow

Each round has two roles that alternate:

🎯 Guide (sees the target)

• Views colored target zones on the semicircle
• Verbally guides the Shooter where to place the needle
• Cannot place the needle themselves

🔫 Shooter (places the needle)

• Does not see the target zones
• Listens to Guide's verbal instructions
• Clicks on the semicircle to place the needle
• Can adjust position before confirming
• Clicks "Confirmer le placement" to lock in

Scoring System

Points are awarded based on accuracy from the target center:

• 🟢 5 points: Perfect! (within ±2.5° / 5° total zone)
• 🟡 3 points: Great! (within ±7.5° / 15° total zone)
• 🟠 1 point: Good! (within ±12.5° / 25° total zone)
• ❌ 0 points: Miss (beyond ±12.5°)

After each round, scores are shown briefly, then the next round auto-starts with roles reversed.

✨ Features

🌐 Online Multiplayer

• Real-time gameplay using WebSocket (Socket.io)
• Room-based matchmaking with custom codes
• Automatic reconnection handling
• Player disconnect notifications

🎨 Polished UI/UX

• Beautiful gradient backgrounds and animations
• Responsive design (works on desktop and mobile)
• Smooth transitions between game states
• Visual feedback for all actions
• No layout shifts during gameplay

⚙️ Customization

• Choose 5, 10, 15, or 20 rounds
• Create custom room codes
• Adjustable needle placement before confirmation

🎪 Game Flow Automation

• Auto-starting rounds (no need to click "Start Round")
• Auto-advancing after scoring (3-second delay)
• Score popup with auto-dismiss
• Smooth state transitions

📁 Project Structure

half-circle/
├── index.html          # Main game interface
├── style.css           # Complete styling and animations
├── script.js           # Client-side game logic
├── server.js           # Node.js server with Socket.io
├── package.json        # Node dependencies
├── package-lock.json   # Dependency lock file
└── README.md           # This file

🚀 Installation & Running

Prerequisites

• Node.js (v14 or higher)
• npm (comes with Node.js)

Setup

1. Clone or download this repository

2. Install dependencies

   npm install

3. Start the server

   npm start
   # or
   node server.js

4. Open the game

   • Server runs on: http://localhost:3000
   • Open this URL in 2 browser windows/tabs
   • Or share with a friend on your local network using your IP

🛠️ Technical Stack

Frontend

• HTML5 - Semantic structure
• CSS3 - Modern styling with flexbox, gradients, animations
• Vanilla JavaScript - No framework dependencies
• SVG - Vector graphics for game elements
• Socket.io Client - Real-time communication

Backend

• Node.js - JavaScript runtime
• Express.js - Web server framework
• Socket.io - WebSocket library for real-time gameplay

Game Architecture

• Client-server model with authoritative server
• Room-based multiplayer with unique codes
• Event-driven communication for real-time updates
• State synchronization between all connected clients

🎯 Game Mechanics Details

Target Generation

• Random angles between 10° and 170° (avoiding edges)
• Three colored zones (5pt, 3pt, 1pt) drawn concentrically
• Zones are visual guides for the Guide player only

Needle Placement

• Click anywhere on the semicircle arc
• Needle rotates to clicked position instantly
• Multiple adjustments allowed before confirmation
• Server calculates score from angular distance

Turn System

• Players alternate roles each round
• Round counter shows current progress
• Auto-advance keeps game flowing
• End game screen shows final results

🎨 Visual Design

• Color Scheme: Purple/pink gradient backgrounds with gold accents
• Typography: Clear, readable fonts with proper hierarchy
• Animations: Smooth transitions, fade-ins, bounce effects
• Feedback: Visual indicators for all game states
• Responsive: Scales beautifully from mobile to desktop

🐛 Known Limitations

• Only supports 2 players per room
• Requires verbal communication (no text chat)
• Local network or same machine for best experience
• No persistent storage (rooms reset on server restart)

🤝 Contributing

This is a personal project, but feel free to fork and enhance it!

📝 License

MIT License - Feel free to use and modify

🎉 Credits

Inspired by the board game Wavelength by Alex Hague and Justin Vickers

---

Enjoy playing! 🎮 Have fun communicating and guessing with your friends!