🧩 React App – Slide Viewer & RPSLS Multiplayer Game

This repository contains two independent React exercises bundled inside the same app.

---

🚀 Quick Start

yarn
# Start project
yarn dev
# Run tests
yarn test

---

Navigation

• Exercise 1 (Slide Viewer): http://localhost:5173/
• Exercise 2 (RPSLS Game): http://localhost:5173/exercice-2

---

EXERCISE 1 – Slide Viewer with Question Input

Description

A responsive slide viewer where each slide can have a custom question attached. It features intuitive navigation, a sidebar with thumbnails, and persistent storage via localStorage.

Features

• View slides imported from assets
• Add and edit a custom question per slide
• Navigation with Previous / Next buttons
• Thumbnail sidebar for quick access
• LocalStorage persistence
• Styled with TailwindCSS + Lucide icons

Logic Overview

Slide Loading

Slides are imported statically and stored in an array:

const slides = [slide1, slide2, slide3];

Each slide is rendered with an input box to enter a question, which is saved automatically per slide index.

---

EXERCISE 2 – Rock Paper Scissors Lizard Spock (Multiplayer)

Description

A real-time multiplayer game where two users are automatically matched in a room to play RPSLS using WebSocket communication.

---

Architecture Overview

• Frontend: React + Context API + TailwindCSS
• Backend: Node.js + Express + Socket.io
• Realtime: Socket-based rooms, 1v1 matchmaking
• Persistence: Score is handled in memory per session

---

Matchmaking Logic

Server-side Logic

1. When a user connects and emits join:
   • If no one is waiting, they become the waitingPlayer.
   • If someone is waiting, a room is created for both users.
2. Room is uniquely named using their socket IDs.
3. room-ready is emitted to both players.
4. waitingPlayer is cleared until a new user connects.

Player 1 ➜ waiting
Player 2 ➜ paired → room created
Player 3 ➜ waiting
Player 4 ➜ paired → second room created

---

Game Flow

1. Client connects and emits join.
2. When room-ready is received, both players can choose a move.
3. Each emits player-choice when ready.
4. When both have submitted:
   • The server uses RPSLS rules to determine a winner.
   • Scores are updated.
   • show-result is emitted to update both players.
5. new-round resets choices and emits room-ready again.

---

Socket Events

Frontend ➡️ Backend

• join
• player-choice
• new-round

Backend ➡️ Frontend

• room-ready
• show-result
• (Optional: room-closed on disconnect)

---

Disconnection Handling

• If a waitingPlayer disconnects → reset
• If a player in a room disconnects → delete room (optional)
• You can promote the remaining player to waitingPlayer (optional)

---