Hot Potato

This is a simple React application that implements a hot potato game. The game is played with a group of players who pass a "hot potato" (a virtual object) around until a random timer stops the game. The player holding the hot potato when the timer stops loses the game.

---

Project Structure

• src/App.tsx: The main application logic, managing game state and rendering views.
• src/views/MainView.tsx: The landing page where users can create or join a game.
• src/views/GameView.tsx: The game interface showing players, potato status, and controls.
• src/socket.ts: The server-side WebSocket logic for managing game sessions.
• src/useSocket.ts: A custom React hook for managing WebSocket connections.

---

Get Started

1. Install dependencies:

   npm install

2. Start the development server:

   npm run dev

3. Open the application in your browser at http://localhost:5173.

---

Goal for today

• Fix the handler for joinGame events in src/socket.ts
• Add a Shameboard feature to the game, a reverse leaderboard that shows the players who lost the most games.

---

Improvement ideas

Here are some tasks you can work on to extend or improve the project:

• Add Usernames: Allow players to define a username when joining a game instead of using socket IDs.
• Health-Based Game Mode: Modify the game so that each player has a health status that decreases while holding the potato. The player whose health reaches zero loses.
• Timer Display: Add a visible countdown timer showing how much time is left before the potato "explodes."
• Improve UI/UX: Enhance the user interface with animations, better visuals, or sound effects for a more engaging experience.
• Game History: Add functionality to display a history of past games and their outcomes.