Initial clean state

.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+.pnpm-store
+.git

.env.example

@@ -0,0 +1,2 @@
+WEB_ORIGIN=http://localhost:3000 # Default: http://localhost:3000, for allow all origins use '*'
+SOCKET_URL=http://localhost:3001 # Default: http://localhost:3001

.github/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="100%" height="100%" viewBox="5.989999771118164 -63.970001220703125 88.26000213623047 65.80000305175781"><g fill="#ff9900"><path d="M65.97 -41.84C65.97 -45.17 65.2 -48.32 63.68 -51.28C62.15 -54.25 59.98 -56.62 57.15 -58.4C55.98 -59.12 54.67 -59.7 53.2 -60.14C51.73 -60.59 50.2 -60.93 48.62 -61.18C47.04 -61.43 45.48 -61.59 43.92 -61.64C42.37 -61.7 40.93 -61.72 39.6 -61.72C34.38 -61.72 29.18 -61.56 24 -61.23C18.81 -60.89 13.61 -60.59 8.4 -60.31C8.07 -51.33 7.82 -42.34 7.65 -33.36C7.6 -28.31 7.4 -23.25 7.07 -18.18C6.74 -13.1 6.38 -8.01 5.99 -2.91C7.54 -2.75 9.08 -2.63 10.61 -2.58C12.13 -2.52 13.7 -2.5 15.31 -2.5C18.47 -2.5 21.63 -2.58 24.79 -2.75L24.37 -21.63C26.15 -21.74 27.94 -21.88 29.74 -22.04C31.54 -22.21 33.36 -22.35 35.19 -22.46C36.8 -18.3 38.04 -14.34 38.93 -10.56C39.82 -6.79 40.48 -2.66 40.93 1.83L65.22 1.25C61.11 -8.35 56.32 -17.72 50.83 -26.87C55.37 -27.09 59.04 -28.51 61.81 -31.11C64.58 -33.72 65.97 -37.3 65.97 -41.84ZM46.67 -43.17C46.67 -42.9 46.65 -42.43 46.63 -41.76C46.6 -41.09 46.57 -40.42 46.54 -39.72C46.52 -39.03 46.45 -38.36 46.34 -37.73C46.22 -37.09 46.09 -36.66 45.92 -36.44C45.53 -35.94 44.85 -35.53 43.88 -35.23C42.91 -34.92 41.86 -34.69 40.72 -34.52C39.58 -34.36 38.47 -34.25 37.39 -34.19C36.31 -34.13 35.49 -34.11 34.94 -34.11C33.66 -34.11 32.36 -34.16 31.03 -34.27C29.7 -34.38 28.42 -34.58 27.2 -34.86L24.96 -50.99C27.06 -51.33 29.18 -51.6 31.32 -51.83C33.46 -52.05 35.63 -52.16 37.85 -52.16C38.13 -52.16 38.61 -52.14 39.31 -52.12C40 -52.09 40.72 -52.03 41.47 -51.95C42.22 -51.87 42.92 -51.77 43.59 -51.66C44.26 -51.55 44.73 -51.38 45 -51.16C45.39 -50.83 45.7 -50.31 45.92 -49.62C46.14 -48.93 46.31 -48.18 46.42 -47.38C46.53 -46.57 46.6 -45.78 46.63 -45C46.65 -44.23 46.67 -43.62 46.67 -43.17Z M94.25 -63.97L74.87 -62.39C75.09 -58.56 75.28 -54.75 75.45 -50.95C75.62 -47.15 75.89 -43.37 76.28 -39.6L78.36 -18.63L87.51 -19.47C88.34 -23.63 89.19 -27.73 90.05 -31.78C90.91 -35.83 91.76 -39.93 92.59 -44.09C92.86 -45.53 93.1 -47.1 93.29 -48.79C93.49 -50.48 93.64 -52.21 93.75 -53.99C93.86 -55.76 93.96 -57.51 94.04 -59.23C94.13 -60.95 94.2 -62.53 94.25 -63.97ZM92.75 -6.65C92.75 -6.88 92.74 -7.08 92.71 -7.28C92.69 -7.47 92.62 -7.68 92.5 -7.9C91.89 -9.34 90.97 -10.43 89.72 -11.15C88.47 -11.87 87.07 -12.23 85.52 -12.23C84.57 -12.23 83.56 -12.08 82.48 -11.77C81.4 -11.47 80.4 -11.02 79.49 -10.44C78.57 -9.86 77.79 -9.14 77.16 -8.28C76.52 -7.42 76.2 -6.46 76.2 -5.41C76.2 -4.41 76.44 -3.52 76.91 -2.75C77.38 -1.97 77.99 -1.32 78.74 -0.79C79.49 -0.26 80.32 0.15 81.23 0.46C82.15 0.76 83.02 0.92 83.85 0.92C84.74 0.92 85.71 0.71 86.76 0.29C87.82 -0.12 88.79 -0.69 89.68 -1.41C90.56 -2.14 91.3 -2.95 91.88 -3.87C92.46 -4.78 92.75 -5.71 92.75 -6.65Z"></path></g></svg>

.github/workflows/docker-release.yml

@@ -0,0 +1,69 @@
+name: Docker Release
+on:
+  release:
+    types: [published]
+
+env:
+  DOCKER_PLATFORMS: |
+    linux/amd64
+    linux/arm64
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Extract version and tags
+        run: |
+          if [[ "$GITHUB_REF_TYPE" == "tag" ]]; then
+            VERSION=${GITHUB_REF_NAME#v}
+            echo "VERSION=$VERSION" >> $GITHUB_ENV
+            
+            # Extract major.minor (ex: 1.2.3 -> 1.2)
+            MAJOR_MINOR=$(echo $VERSION | cut -d. -f1,2)
+            echo "MAJOR_MINOR=$MAJOR_MINOR" >> $GITHUB_ENV
+          else
+            echo "VERSION=latest" >> $GITHUB_ENV
+            echo "MAJOR_MINOR=latest" >> $GITHUB_ENV
+          fi
+
+      - name: Extract repository name (lowercase)
+        run: echo "REPO_NAME=$(basename ${{ github.repository }} | tr '[:upper:]' '[:lower:]')" >> $GITHUB_ENV
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+        with:
+          platforms: ${{ env.DOCKER_PLATFORMS }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          version: latest
+          install: true
+          platforms: ${{ env.DOCKER_PLATFORMS }}
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and push
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          platforms: ${{ env.DOCKER_PLATFORMS }}
+          push: true
+          tags: |
+            ${{ secrets.DOCKERHUB_USERNAME }}/${{ env.REPO_NAME }}:${{ env.VERSION }}
+            ${{ secrets.DOCKERHUB_USERNAME }}/${{ env.REPO_NAME }}:${{ env.MAJOR_MINOR }}
+            ${{ secrets.DOCKERHUB_USERNAME }}/${{ env.REPO_NAME }}:latest
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+          build-args: |
+            BUILDKIT_INLINE_CACHE=1

.gitignore

@@ -0,0 +1,4 @@
+/node_modules
+.env
+.secrets
+release.json

.vscode/extensions.json

@@ -0,0 +1,13 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "usernamehw.errorlens",
+    "YoavBls.pretty-ts-errors",
+    "bradlc.vscode-tailwindcss",
+    "meganrogge.template-string-converter",
+    "vincaslt.highlight-matching-tag",
+    "formulahendry.auto-rename-tag",
+    "naumovs.color-highlight"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,19 @@
+{
+  "editor.tabSize": 2,
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": "explicit",
+    "source.fixAll.eslint": "explicit"
+  },
+  "files.associations": {
+    "*.css": "tailwindcss",
+    "*.scss": "tailwindcss"
+  },
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ]
+}

Dockerfile

@@ -0,0 +1,73 @@
+FROM node:22-alpine AS base
+
+# Enable and prepare pnpm via Corepack
+RUN corepack enable && corepack prepare pnpm@latest --activate
+
+# ----- DEPENDENCIES -----
+FROM base AS deps
+WORKDIR /app
+
+# Copy pnpm configuration files
+COPY pnpm-lock.yaml pnpm-workspace.yaml package.json ./
+COPY packages/web/package.json ./packages/web/
+COPY packages/socket/package.json ./packages/socket/
+
+# Install only production dependencies
+RUN pnpm install --frozen-lockfile --prod
+
+# ----- BUILDER -----
+FROM base AS builder
+WORKDIR /app
+
+# Copy all monorepo files
+COPY . .
+
+# Install all dependencies (including dev) for build
+RUN pnpm install --frozen-lockfile
+
+# Build Next.js app with standalone output for smaller runtime image
+WORKDIR /app/packages/web
+
+ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN pnpm build
+
+# Build socket server if needed (TypeScript or similar)
+WORKDIR /app/packages/socket
+RUN if [ -f "tsconfig.json" ]; then pnpm build; fi
+
+# ----- RUNNER -----
+FROM node:22-alpine AS runner
+WORKDIR /app
+
+# Create a non-root user for better security
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nodejs
+
+
+# Enable pnpm in the runtime image
+RUN corepack enable && corepack prepare pnpm@latest --activate
+
+# Copy configuration files
+COPY pnpm-workspace.yaml package.json ./
+
+# Copy the Next.js standalone build
+COPY --from=builder /app/packages/web/.next/standalone ./
+COPY --from=builder /app/packages/web/.next/static ./packages/web/.next/static
+COPY --from=builder /app/packages/web/public ./packages/web/public
+
+# Copy the socket server build
+COPY --from=builder /app/packages/socket/dist ./packages/socket/dist
+
+# Copy the game default config
+COPY --from=builder /app/config ./config
+
+# Expose the web and socket ports
+EXPOSE 3000 5505
+
+# Environment variables
+ENV NODE_ENV=production
+ENV CONFIG_PATH=/app/config
+
+# Start both services (Next.js web app + Socket server)
+CMD ["sh", "-c", "node packages/web/server.js & node packages/socket/dist/index.cjs"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Ralex
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,190 @@
+<p align="center">
+  <img width="450" height="120" align="center" src="https://raw.githubusercontent.com/Ralex91/Rahoot/main/.github/logo.svg">
+  <br>
+  <div align="center">
+    <img alt="Visitor Badge" src="https://api.visitorbadge.io/api/visitors?path=https://github.com/Ralex91/Rahoot/edit/main/README.md&countColor=%2337d67a">
+    <img src="https://img.shields.io/docker/pulls/ralex91/rahoot?style=for-the-badge&color=37d67a" alt="Docker Pulls">
+  </div>
+</p>
+
+## 🧩 What is this project?
+
+Rahoot is a straightforward and open-source clone of the Kahoot! platform, allowing users to host it on their own server for smaller events.
+
+> ⚠️ This project is still under development, please report any bugs or suggestions in the [issues](https://github.com/Ralex91/Rahoot/issues)
+
+<p align="center">
+  <img width="30%" src="https://raw.githubusercontent.com/Ralex91/Rahoot/main/.github/preview1.jpg" alt="Login">
+  <img width="30%" src="https://raw.githubusercontent.com/Ralex91/Rahoot/main/.github/preview2.jpg" alt="Manager Dashboard">
+  <img width="30%" src="https://raw.githubusercontent.com/Ralex91/Rahoot/main/.github/preview3.jpg" alt="Question Screen">
+</p>
+
+## ⚙️ Prerequisites
+
+Choose one of the following deployment methods:
+
+### Without Docker
+
+- Node.js : version 20 or higher
+- PNPM : Learn more about [here](https://pnpm.io/)
+
+### With Docker
+
+- Docker and Docker Compose
+
+## 📖 Getting Started
+
+Choose your deployment method:
+
+### 🐳 Using Docker (Recommended)
+
+Using Docker Compose (recommended):
+You can find the docker compose configuration in the repository:
+[docker-compose.yml](/compose.yml)
+
+```bash
+docker compose up -d
+```
+
+Or using Docker directly:
+
+```bash
+docker run -d \
+  -p 3000:3000 \
+  -p 3001:3001 \
+  -v ./config:/app/config \
+  -e REDIS_URL=redis://user:pass@redis:6379 \
+  -e MEDIA_MAX_UPLOAD_MB=200 \
+  -e WEB_ORIGIN=http://localhost:3000 \
+  -e SOCKET_URL=http://localhost:3001 \
+  ralex91/rahoot:latest
+```
+
+**Configuration & Media Volume:**
+- `-v ./config:/app/config` mounts a local `config` folder to persist settings, quizzes, and uploaded media (`config/quizz`, `config/media`). This keeps your data across redeploys and lets you back it up easily.
+- The folder is auto-created on first run with an example quiz.
+
+The application will be available at:
+
+- Web Interface: http://localhost:3000
+- WebSocket Server: ws://localhost:3001
+
+### 🛠️ Without Docker
+
+1. Clone the repository:
+
+```bash
+git clone https://github.com/Ralex91/Rahoot.git
+cd ./Rahoot
+```
+
+2. Install dependencies:
+
+```bash
+pnpm install
+```
+
+3. Change the environment variables in the `.env` file
+
+4. Build and start the application:
+
+```bash
+# Development mode
+pnpm run dev
+
+# Production mode
+pnpm run build
+pnpm start
+```
+
+## ⚙️ Configuration
+
+The configuration is split into two main parts:
+
+### 1. Game Configuration (`config/game.json`)
+
+Main game settings:
+
+```json
+{
+  "managerPassword": "PASSWORD",
+  "music": true
+}
+```
+
+Options:
+
+- `managerPassword`: The master password for accessing the manager interface
+- `music`: Enable/disable game music
+
+### 2. Quiz Configuration (`config/quizz/*.json`)
+
+Create your quiz files in the `config/quizz/` directory. You can have multiple quiz files and select which one to use when starting a game.
+
+Example quiz configuration (`config/quizz/example.json`):
+
+```json
+{
+  "subject": "Example Quiz",
+  "questions": [
+    {
+      "question": "What is the correct answer?",
+      "answers": ["No", "Yes", "No", "No"],
+      "image": "https://images.unsplash.com/....",
+      "media": { "type": "audio", "url": "https://example.com/song.mp3" },
+      "solution": 1,
+      "cooldown": 5,
+      "time": 15
+    }
+  ]
+}
+```
+
+Quiz Options:
+
+- `subject`: Title/topic of the quiz
+- `questions`: Array of question objects containing:
+  - `question`: The question text
+  - `answers`: Array of possible answers (2-4 options)
+  - `image`: Optional URL for question image (legacy; use `media` for new content)
+- `media`: Optional media attachment `{ "type": "image" | "audio" | "video", "url": "<link>" }`. Examples:
+    - `{"type":"audio","url":"https://.../clip.mp3"}`
+    - `{"type":"video","url":"https://.../clip.mp4"}`
+  - `solution`: Index of correct answer (0-based)
+  - `cooldown`: Time in seconds before showing the question
+  - `time`: Time in seconds allowed to answer
+
+Tip: You can now create and edit quizzes directly from the Manager UI (login at `/manager` and click “Manage”).
+
+### Manager Features
+- Upload image/audio/video directly in the quiz editor (stored under `config/media`).
+- Manual “Set timing from media” to align cooldown/answer time with clip length.
+- Media library view: see all uploads, where they’re used, and delete unused files.
+- Delete quizzes from the editor.
+- Pause/Resume/Skip question intro and answer timers; End Game button to reset everyone.
+- Player list in manager view showing connected/disconnected players.
+- Click-to-zoom images during questions.
+- Player reconnect resilience: Redis snapshotting keeps game state; clients auto-rejoin using stored `clientId`/last game; username/points are hydrated locally after refresh without a manual reload.
+
+### Resilience & Persistence
+- Redis snapshotting (set `REDIS_URL`, e.g., `redis://:password@redis:6379`) keeps game state so managers/players can reconnect without losing progress.
+- Client auto-reconnects using stored `clientId` and last `gameId`; state resumes after refresh/tab close if the game still exists.
+- `MEDIA_MAX_UPLOAD_MB` env controls upload size limit (default 50MB; set higher for video).
+
+## 🎮 How to Play
+
+1. Access the manager interface at http://localhost:3000/manager
+2. Enter the manager password (defined in quiz config)
+3. Share the game URL (http://localhost:3000) and room code with participants
+4. Wait for players to join
+5. Click the start button to begin the game
+
+## 📝 Contributing
+
+1. Fork the repository
+2. Create a new branch (e.g., `feat/my-feature`)
+3. Make your changes
+4. Create a pull request
+5. Wait for review and merge
+
+For bug reports or feature requests, please [create an issue](https://github.com/Ralex91/Rahoot/issues).

compose.yml

@@ -0,0 +1,13 @@
+version: "3.8"
+
+services:
+  rahoot:
+    image: ralex91/rahoot:latest
+    ports:
+      - "3000:3000"
+      - "3001:3001"
+    volumes:
+      - ./config:/app/config # Path to your game config
+    environment:
+      - WEB_ORIGIN=http://localhost:3000
+      - SOCKET_URL=http://localhost:3001

config/game.json

@@ -0,0 +1,3 @@
+{
+  "managerPassword": "PASSWORD"
+}

config/quizz/example.json

@@ -0,0 +1,37 @@
+{
+  "subject": "Example Quizz",
+  "questions": [
+    {
+      "question": "Which soundtrack is this?",
+      "answers": [
+        "Nature sounds",
+        "Piano solo",
+        "Electronic beat",
+        "Chill guitar"
+      ],
+      "media": {
+        "type": "audio",
+        "url": "https://file-examples.com/storage/fee95f49ad692e9489b0fab/2017/11/file_example_WAV_1MG.wav"
+      },
+      "solution": 1,
+      "cooldown": 5,
+      "time": 25
+    },
+    {
+      "question": "Which landmark appears in this clip?",
+      "answers": [
+        "Eiffel Tower",
+        "Sydney Opera House",
+        "Statue of Liberty",
+        "Golden Gate Bridge"
+      ],
+      "media": {
+        "type": "youtube",
+        "url": "https://www.youtube.com/watch?v=jNQXAC9IVRw"
+      },
+      "solution": 3,
+      "cooldown": 5,
+      "time": 60
+    }
+  ]
+}

package.json

@@ -0,0 +1,16 @@
+{
+  "name": "rahoot",
+  "scripts": {
+    "dev": "dotenv -e .env -- pnpm -r --parallel dev",
+    "dev:web": "dotenv -e .env -- pnpm --filter web dev",
+    "dev:socket": "dotenv -e .env -- pnpm --filter socket dev",
+    "build": "pnpm -r run build",
+    "start": "pnpm -r --parallel run start",
+    "clean": "pnpm -r exec rm -rf dist node_modules",
+    "lint": "pnpm -r run lint"
+  },
+  "devDependencies": {
+    "dotenv-cli": "^10.0.0",
+    "typescript": "^5.9.3"
+  }
+}

packages/common/.gitignore

@@ -0,0 +1 @@
+node_modules

packages/common/eslint.config.mjs

@@ -0,0 +1,208 @@
+import js from "@eslint/js"
+import { defineConfig } from "eslint/config"
+import globals from "globals"
+import tseslint from "typescript-eslint"
+
+export default defineConfig([
+  {
+    ignores: ["**/node_modules/**"],
+  },
+  {
+    files: ["**/*.ts"],
+    languageOptions: {
+      ...js.configs.recommended.languageOptions,
+      parser: tseslint.parser,
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+      globals: {
+        ...globals.node,
+      },
+    },
+    plugins: {
+      "@typescript-eslint": tseslint.plugin,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...tseslint.configs.recommendedTypeChecked[0].rules,
+
+      "array-callback-return": [
+        "error",
+        { allowImplicit: false, checkForEach: true, allowVoid: true },
+      ],
+      "no-await-in-loop": "error",
+      "no-constant-binary-expression": "error",
+      "no-constructor-return": "error",
+      "no-duplicate-imports": ["error", { includeExports: true }],
+      "no-new-native-nonconstructor": "error",
+      "no-promise-executor-return": ["error", { allowVoid: true }],
+      "no-self-compare": "error",
+      "no-template-curly-in-string": "error",
+      "no-unmodified-loop-condition": "error",
+      "no-unreachable-loop": "error",
+      "no-unused-private-class-members": "error",
+      "arrow-body-style": ["error", "as-needed"],
+      camelcase: [
+        "error",
+        {
+          properties: "always",
+          ignoreDestructuring: true,
+          ignoreImports: true,
+          ignoreGlobals: true,
+        },
+      ],
+      "capitalized-comments": [
+        "error",
+        "always",
+        { ignoreConsecutiveComments: true },
+      ],
+      "class-methods-use-this": ["error", { enforceForClassFields: true }],
+      complexity: ["warn", 40],
+      "consistent-return": "error",
+      curly: ["error", "all"],
+      "default-param-last": "error",
+      "dot-notation": "error",
+      eqeqeq: ["error", "always"],
+      "func-name-matching": "error",
+      "func-names": "error",
+      "func-style": ["error", "declaration", { allowArrowFunctions: true }],
+      "grouped-accessor-pairs": ["error", "getBeforeSet"],
+      "guard-for-in": "error",
+      "init-declarations": ["error", "always"],
+      "logical-assignment-operators": [
+        "error",
+        "always",
+        { enforceForIfStatements: true },
+      ],
+      "max-classes-per-file": ["error", { ignoreExpressions: true }],
+      "max-depth": ["error", 3],
+      "max-lines": [
+        "error",
+        { max: 500, skipBlankLines: true, skipComments: true },
+      ],
+      "max-nested-callbacks": ["error", 3],
+      "max-params": ["error", 4],
+      "multiline-comment-style": ["error", "separate-lines"],
+      "no-alert": "error",
+      "no-bitwise": "error",
+      "no-caller": "error",
+      "no-else-return": "error",
+      "no-empty-function": "error",
+      "no-empty-static-block": "error",
+      "no-eq-null": "error",
+      "no-eval": "error",
+      "no-extend-native": "error",
+      "no-extra-label": "error",
+      "no-implicit-coercion": "error",
+      "no-implicit-globals": "error",
+      "no-implied-eval": "error",
+      "no-inline-comments": "error",
+      "no-invalid-this": "error",
+      "no-iterator": "error",
+      "no-labels": "error",
+      "no-lone-blocks": "error",
+      "no-lonely-if": "error",
+      "no-loop-func": "error",
+      "no-multi-assign": "error",
+      "no-multi-str": "error",
+      "no-nested-ternary": "error",
+      "no-new": "error",
+      "no-new-func": "error",
+      "no-new-wrappers": "error",
+      "no-object-constructor": "error",
+      "no-octal-escape": "error",
+      "no-param-reassign": "error",
+      "no-plusplus": "error",
+      "no-proto": "error",
+      "no-return-assign": ["error", "always"],
+      "no-script-url": "error",
+      "no-sequences": "error",
+      "no-throw-literal": "error",
+      "no-undef-init": "error",
+      "no-unneeded-ternary": ["error", { defaultAssignment: false }],
+      "no-unused-expressions": ["error", { enforceForJSX: true }],
+      "no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
+      "no-useless-call": "error",
+      "no-useless-computed-key": ["error", { enforceForClassMembers: true }],
+      "no-useless-concat": "error",
+      "no-useless-constructor": "error",
+      "no-useless-rename": "error",
+      "no-useless-return": "error",
+      "no-var": "error",
+      "no-warning-comments": ["error", { terms: ["todo"] }],
+      "object-shorthand": ["error", "always"],
+      "one-var": ["error", "never"],
+      "operator-assignment": ["error", "always"],
+      "prefer-arrow-callback": "error",
+      "prefer-const": [
+        "error",
+        { destructuring: "any", ignoreReadBeforeAssign: false },
+      ],
+      "prefer-destructuring": "error",
+      "prefer-exponentiation-operator": "error",
+      "prefer-numeric-literals": "error",
+      "prefer-object-has-own": "error",
+      "prefer-object-spread": "error",
+      "prefer-promise-reject-errors": "error",
+      "prefer-regex-literals": ["error", { disallowRedundantWrapping: true }],
+      "prefer-rest-params": "error",
+      "prefer-spread": "error",
+      "prefer-template": "error",
+      radix: "error",
+      "require-await": "error",
+      "require-unicode-regexp": "error",
+      "symbol-description": "error",
+      yoda: "error",
+      "line-comment-position": ["error", { position: "above" }],
+      indent: "off",
+      "newline-before-return": "error",
+      "no-undef": "error",
+      "padded-blocks": ["error", "never"],
+      "padding-line-between-statements": [
+        "error",
+        {
+          blankLine: "always",
+          prev: "*",
+          next: [
+            "break",
+            "case",
+            "cjs-export",
+            "class",
+            "continue",
+            "do",
+            "if",
+            "switch",
+            "try",
+            "while",
+            "return",
+          ],
+        },
+        {
+          blankLine: "always",
+          prev: [
+            "break",
+            "case",
+            "cjs-export",
+            "class",
+            "continue",
+            "do",
+            "if",
+            "switch",
+            "try",
+            "while",
+            "return",
+          ],
+          next: "*",
+        },
+      ],
+      quotes: [
+        "error",
+        "double",
+        { avoidEscape: true, allowTemplateLiterals: true },
+      ],
+      "space-before-blocks": "error",
+      semi: ["error", "never"],
+    },
+  },
+])

packages/common/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@rahoot/common",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "socket.io": "^4.8.1",
+    "zod": "^3.25.76"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.38.0",
+    "@types/node": "^20.19.23",
+    "eslint": "^9.38.0",
+    "globals": "^16.4.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.46.2"
+  }
+}

packages/common/src/types/game/index.ts

@@ -0,0 +1,38 @@
+export type Player = {
+  id: string
+  clientId: string
+  connected: boolean
+  username: string
+  points: number
+}
+
+export type Answer = {
+  playerId: string
+  answerId: number
+  points: number
+}
+
+export type Quizz = {
+  subject: string
+  questions: {
+    question: string
+    image?: string
+    media?: QuestionMedia
+    answers: string[]
+    solution: number
+    cooldown: number
+    time: number
+  }[]
+}
+
+export type QuestionMedia =
+  | { type: "image"; url: string; fileName?: string }
+  | { type: "audio"; url: string; fileName?: string }
+  | { type: "video"; url: string; fileName?: string }
+
+export type QuizzWithId = Quizz & { id: string }
+
+export type GameUpdateQuestion = {
+  current: number
+  total: number
+}

packages/common/src/types/game/socket.ts

@@ -0,0 +1,99 @@
+import { Server as ServerIO, Socket as SocketIO } from "socket.io"
+import { GameUpdateQuestion, Player, Quizz, QuizzWithId } from "."
+import { Status, StatusDataMap } from "./status"
+
+export type Server = ServerIO<ClientToServerEvents, ServerToClientEvents>
+export type Socket = SocketIO<ClientToServerEvents, ServerToClientEvents>
+
+export type Message<K extends keyof StatusDataMap = keyof StatusDataMap> = {
+  gameId?: string
+  status: K
+  data: StatusDataMap[K]
+}
+
+export type MessageWithoutStatus<T = any> = {
+  gameId?: string
+  data: T
+}
+
+export type MessageGameId = {
+  gameId?: string
+}
+
+export interface ServerToClientEvents {
+  connect: () => void
+
+  // Game events
+  "game:status": (_data: { name: Status; data: StatusDataMap[Status] }) => void
+  "game:successRoom": (_data: string) => void
+  "game:successJoin": (_gameId: string) => void
+  "game:totalPlayers": (_count: number) => void
+  "game:errorMessage": (_message: string) => void
+  "game:startCooldown": () => void
+  "game:cooldown": (_count: number) => void
+  "game:cooldownPause": (_paused: boolean) => void
+  "game:reset": (_message: string) => void
+  "game:updateQuestion": (_data: { current: number; total: number }) => void
+  "game:playerAnswer": (_count: number) => void
+
+  // Player events
+  "player:successReconnect": (_data: {
+    gameId: string
+    status: { name: Status; data: StatusDataMap[Status] }
+    player: { username: string; points: number }
+    currentQuestion: GameUpdateQuestion
+  }) => void
+  "player:updateLeaderboard": (_data: { leaderboard: Player[] }) => void
+
+  // Manager events
+  "manager:successReconnect": (_data: {
+    gameId: string
+    status: { name: Status; data: StatusDataMap[Status] }
+    players: Player[]
+    currentQuestion: GameUpdateQuestion
+  }) => void
+  "manager:quizzList": (_quizzList: QuizzWithId[]) => void
+  "manager:gameCreated": (_data: { gameId: string; inviteCode: string }) => void
+  "manager:statusUpdate": (_data: {
+    status: Status
+    data: StatusDataMap[Status]
+  }) => void
+  "manager:newPlayer": (_player: Player) => void
+  "manager:removePlayer": (_playerId: string) => void
+  "manager:players": (_players: Player[]) => void
+  "manager:errorMessage": (_message: string) => void
+  "manager:playerKicked": (_playerId: string) => void
+  "manager:quizzLoaded": (_quizz: QuizzWithId) => void
+  "manager:quizzSaved": (_quizz: QuizzWithId) => void
+  "manager:quizzDeleted": (_id: string) => void
+}
+
+export interface ClientToServerEvents {
+  // Manager actions
+  "game:create": (_quizzId: string) => void
+  "manager:auth": (_password: string) => void
+  "manager:reconnect": (_message: { gameId: string }) => void
+  "manager:kickPlayer": (_message: { gameId: string; playerId: string }) => void
+  "manager:startGame": (_message: MessageGameId) => void
+  "manager:abortQuiz": (_message: MessageGameId) => void
+  "manager:pauseCooldown": (_message: MessageGameId) => void
+  "manager:resumeCooldown": (_message: MessageGameId) => void
+  "manager:endGame": (_message: MessageGameId) => void
+  "manager:skipQuestionIntro": (_message: MessageGameId) => void
+  "manager:nextQuestion": (_message: MessageGameId) => void
+  "manager:deleteQuizz": (_message: { id: string }) => void
+  "manager:showLeaderboard": (_message: MessageGameId) => void
+  "manager:getQuizz": (_quizzId: string) => void
+  "manager:saveQuizz": (_payload: { id: string | null; quizz: Quizz }) => void
+
+  // Player actions
+  "player:join": (_inviteCode: string) => void
+  "player:login": (_message: MessageWithoutStatus<{ username: string }>) => void
+  "player:reconnect": (_message: { gameId: string }) => void
+  "player:selectedAnswer": (
+    _message: MessageWithoutStatus<{ answerKey: number }>
+  ) => void
+
+  // Common
+  disconnect: () => void
+}

packages/common/src/types/game/status.ts

@@ -0,0 +1,62 @@
+import { Player, QuestionMedia } from "."
+
+export const STATUS = {
+  SHOW_ROOM: "SHOW_ROOM",
+  SHOW_START: "SHOW_START",
+  SHOW_PREPARED: "SHOW_PREPARED",
+  SHOW_QUESTION: "SHOW_QUESTION",
+  SELECT_ANSWER: "SELECT_ANSWER",
+  SHOW_RESULT: "SHOW_RESULT",
+  SHOW_RESPONSES: "SHOW_RESPONSES",
+  SHOW_LEADERBOARD: "SHOW_LEADERBOARD",
+  FINISHED: "FINISHED",
+  WAIT: "WAIT",
+} as const
+
+export type Status = (typeof STATUS)[keyof typeof STATUS]
+
+export type CommonStatusDataMap = {
+  SHOW_START: { time: number; subject: string }
+  SHOW_PREPARED: { totalAnswers: number; questionNumber: number }
+  SHOW_QUESTION: {
+    question: string
+    image?: string
+    media?: QuestionMedia
+    cooldown: number
+  }
+  SELECT_ANSWER: {
+    question: string
+    answers: string[]
+    image?: string
+    media?: QuestionMedia
+    time: number
+    totalPlayer: number
+  }
+  SHOW_RESULT: {
+    correct: boolean
+    message: string
+    points: number
+    myPoints: number
+    rank: number
+    aheadOfMe: string | null
+  }
+  WAIT: { text: string }
+  FINISHED: { subject: string; top: Player[] }
+}
+
+type ManagerExtraStatus = {
+  SHOW_ROOM: { text: string; inviteCode?: string }
+  SHOW_RESPONSES: {
+    question: string
+    responses: Record<number, number>
+    correct: number
+    answers: string[]
+    image?: string
+    media?: QuestionMedia
+  }
+  SHOW_LEADERBOARD: { oldLeaderboard: Player[]; leaderboard: Player[] }
+}
+
+export type PlayerStatusDataMap = CommonStatusDataMap
+export type ManagerStatusDataMap = CommonStatusDataMap & ManagerExtraStatus
+export type StatusDataMap = PlayerStatusDataMap & ManagerStatusDataMap

packages/common/src/validators/auth.ts

@@ -0,0 +1,8 @@
+import z from "zod"
+
+export const usernameValidator = z
+  .string()
+  .min(4, "Username cannot be less than 4 characters")
+  .max(20, "Username cannot exceed 20 characters")
+
+export const inviteCodeValidator = z.string().length(6, "Invalid invite code")

packages/common/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  }
+}

packages/socket/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

packages/socket/esbuild.config.js

@@ -0,0 +1,19 @@
+import esbuild from "esbuild"
+import path from "path"
+
+export const config = {
+  entryPoints: ["src/index.ts"],
+  bundle: true,
+  minify: true,
+  platform: "node",
+  outfile: "dist/index.cjs",
+  sourcemap: true,
+  define: {
+    "process.env.NODE_ENV": '"production"',
+  },
+  alias: {
+    "@": path.resolve("./src"),
+  },
+}
+
+esbuild.build(config)

packages/socket/eslint.config.mjs

@@ -0,0 +1,208 @@
+import js from "@eslint/js"
+import { defineConfig } from "eslint/config"
+import globals from "globals"
+import tseslint from "typescript-eslint"
+
+export default defineConfig([
+  {
+    ignores: ["**/node_modules/**", "**/dist/**"],
+  },
+  {
+    files: ["**/*.ts"],
+    languageOptions: {
+      ...js.configs.recommended.languageOptions,
+      parser: tseslint.parser,
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+      globals: {
+        ...globals.node,
+      },
+    },
+    plugins: {
+      "@typescript-eslint": tseslint.plugin,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...tseslint.configs.recommendedTypeChecked[0].rules,
+
+      "array-callback-return": [
+        "error",
+        { allowImplicit: false, checkForEach: true, allowVoid: true },
+      ],
+      "no-await-in-loop": "error",
+      "no-constant-binary-expression": "error",
+      "no-constructor-return": "error",
+      "no-duplicate-imports": ["error", { includeExports: true }],
+      "no-new-native-nonconstructor": "error",
+      "no-promise-executor-return": ["error", { allowVoid: true }],
+      "no-self-compare": "error",
+      "no-template-curly-in-string": "error",
+      "no-unmodified-loop-condition": "error",
+      "no-unreachable-loop": "error",
+      "no-unused-private-class-members": "error",
+      "arrow-body-style": ["error", "as-needed"],
+      camelcase: [
+        "error",
+        {
+          properties: "always",
+          ignoreDestructuring: true,
+          ignoreImports: true,
+          ignoreGlobals: true,
+        },
+      ],
+      "capitalized-comments": [
+        "error",
+        "always",
+        { ignoreConsecutiveComments: true },
+      ],
+      "class-methods-use-this": ["error", { enforceForClassFields: true }],
+      complexity: ["warn", 40],
+      "consistent-return": "error",
+      curly: ["error", "all"],
+      "default-param-last": "error",
+      "dot-notation": "error",
+      eqeqeq: ["error", "always"],
+      "func-name-matching": "error",
+      "func-names": "error",
+      "func-style": ["error", "declaration", { allowArrowFunctions: true }],
+      "grouped-accessor-pairs": ["error", "getBeforeSet"],
+      "guard-for-in": "error",
+      "init-declarations": ["error", "always"],
+      "logical-assignment-operators": [
+        "error",
+        "always",
+        { enforceForIfStatements: true },
+      ],
+      "max-classes-per-file": ["error", { ignoreExpressions: true }],
+      "max-depth": ["error", 3],
+      "max-lines": [
+        "error",
+        { max: 500, skipBlankLines: true, skipComments: true },
+      ],
+      "max-nested-callbacks": ["error", 3],
+      "max-params": ["error", 4],
+      "multiline-comment-style": ["error", "separate-lines"],
+      "no-alert": "error",
+      "no-bitwise": "error",
+      "no-caller": "error",
+      "no-else-return": "error",
+      "no-empty-function": "error",
+      "no-empty-static-block": "error",
+      "no-eq-null": "error",
+      "no-eval": "error",
+      "no-extend-native": "error",
+      "no-extra-label": "error",
+      "no-implicit-coercion": "error",
+      "no-implicit-globals": "error",
+      "no-implied-eval": "error",
+      "no-inline-comments": "error",
+      "no-invalid-this": "error",
+      "no-iterator": "error",
+      "no-labels": "error",
+      "no-lone-blocks": "error",
+      "no-lonely-if": "error",
+      "no-loop-func": "error",
+      "no-multi-assign": "error",
+      "no-multi-str": "error",
+      "no-nested-ternary": "error",
+      "no-new": "error",
+      "no-new-func": "error",
+      "no-new-wrappers": "error",
+      "no-object-constructor": "error",
+      "no-octal-escape": "error",
+      "no-param-reassign": "error",
+      "no-plusplus": "error",
+      "no-proto": "error",
+      "no-return-assign": ["error", "always"],
+      "no-script-url": "error",
+      "no-sequences": "error",
+      "no-throw-literal": "error",
+      "no-undef-init": "error",
+      "no-unneeded-ternary": ["error", { defaultAssignment: false }],
+      "no-unused-expressions": ["error", { enforceForJSX: true }],
+      "no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
+      "no-useless-call": "error",
+      "no-useless-computed-key": ["error", { enforceForClassMembers: true }],
+      "no-useless-concat": "error",
+      "no-useless-constructor": "error",
+      "no-useless-rename": "error",
+      "no-useless-return": "error",
+      "no-var": "error",
+      "no-warning-comments": ["error", { terms: ["todo"] }],
+      "object-shorthand": ["error", "always"],
+      "one-var": ["error", "never"],
+      "operator-assignment": ["error", "always"],
+      "prefer-arrow-callback": "error",
+      "prefer-const": [
+        "error",
+        { destructuring: "any", ignoreReadBeforeAssign: false },
+      ],
+      "prefer-destructuring": "error",
+      "prefer-exponentiation-operator": "error",
+      "prefer-numeric-literals": "error",
+      "prefer-object-has-own": "error",
+      "prefer-object-spread": "error",
+      "prefer-promise-reject-errors": "error",
+      "prefer-regex-literals": ["error", { disallowRedundantWrapping: true }],
+      "prefer-rest-params": "error",
+      "prefer-spread": "error",
+      "prefer-template": "error",
+      radix: "error",
+      "require-await": "error",
+      "require-unicode-regexp": "error",
+      "symbol-description": "error",
+      yoda: "error",
+      "line-comment-position": ["error", { position: "above" }],
+      indent: "off",
+      "newline-before-return": "error",
+      "no-undef": "error",
+      "padded-blocks": ["error", "never"],
+      "padding-line-between-statements": [
+        "error",
+        {
+          blankLine: "always",
+          prev: "*",
+          next: [
+            "break",
+            "case",
+            "cjs-export",
+            "class",
+            "continue",
+            "do",
+            "if",
+            "switch",
+            "try",
+            "while",
+            "return",
+          ],
+        },
+        {
+          blankLine: "always",
+          prev: [
+            "break",
+            "case",
+            "cjs-export",
+            "class",
+            "continue",
+            "do",
+            "if",
+            "switch",
+            "try",
+            "while",
+            "return",
+          ],
+          next: "*",
+        },
+      ],
+      quotes: [
+        "error",
+        "double",
+        { avoidEscape: true, allowTemplateLiterals: true },
+      ],
+      "space-before-blocks": "error",
+      semi: ["error", "never"],
+    },
+  },
+])

packages/socket/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@rahoot/socket",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "tsx watch src/index.ts",
+    "build": "node esbuild.config.js",
+    "start": "node dist/index.cjs",
+    "lint": "eslint"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@rahoot/common": "workspace:*",
+    "@t3-oss/env-core": "^0.13.8",
+    "dayjs": "^1.11.18",
+    "redis": "^4.6.13",
+    "socket.io": "^4.8.1",
+    "uuid": "^13.0.0",
+    "zod": "^4.1.12"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.38.0",
+    "@types/node": "^24.9.1",
+    "esbuild": "^0.25.11",
+    "eslint": "^9.38.0",
+    "globals": "^16.4.0",
+    "tsx": "^4.20.6",
+    "typescript-eslint": "^8.46.2"
+  }
+}

packages/socket/src/env.ts

@@ -0,0 +1,16 @@
+import { createEnv } from "@t3-oss/env-core"
+import { z } from "zod/v4"
+
+const env = createEnv({
+  server: {
+    WEB_ORIGIN: z.string().optional().default("http://localhost:3000"),
+    SOCKER_PORT: z.string().optional().default("3001"),
+  },
+
+  runtimeEnv: {
+    WEB_ORIGIN: process.env.WEB_ORIGIN,
+    SOCKER_PORT: process.env.SOCKER_PORT,
+  },
+})
+
+export default env

packages/socket/src/index.ts

@@ -0,0 +1,298 @@
+import { Server } from "@rahoot/common/types/game/socket"
+import { inviteCodeValidator } from "@rahoot/common/validators/auth"
+import env from "@rahoot/socket/env"
+import Config from "@rahoot/socket/services/config"
+import Game from "@rahoot/socket/services/game"
+import Registry from "@rahoot/socket/services/registry"
+import { loadSnapshot } from "@rahoot/socket/services/persistence"
+import { withGame } from "@rahoot/socket/utils/game"
+import { Server as ServerIO } from "socket.io"
+
+const corsOrigins =
+  process.env.NODE_ENV !== "production"
+    ? "*"
+    : env.WEB_ORIGIN === "*"
+      ? "*"
+      : [env.WEB_ORIGIN, "http://localhost:3000", "http://127.0.0.1:3000"]
+
+const io: Server = new ServerIO({
+  cors: {
+    origin: corsOrigins,
+    methods: ["GET", "POST"],
+    credentials: false,
+  },
+})
+Config.init()
+
+const registry = Registry.getInstance()
+const port = 3001
+
+console.log(`Socket server running on port ${port}`)
+io.listen(Number(port))
+
+io.on("connection", (socket) => {
+  console.log(
+    `A user connected: socketId: ${socket.id}, clientId: ${socket.handshake.auth.clientId}`
+  )
+
+  const ensureGame = async (gameId: string) => {
+    let game = registry.getGameById(gameId)
+    if (game) return game
+
+    try {
+      const snapshot = await loadSnapshot(gameId)
+      if (snapshot) {
+        const restored = await Game.fromSnapshot(io, snapshot)
+        registry.addGame(restored)
+        return restored
+      }
+    } catch (error) {
+      console.error("Failed to restore game", error)
+    }
+
+    return null
+  }
+
+  socket.on("player:reconnect", ({ gameId }) => {
+    const game = registry.getPlayerGame(gameId, socket.handshake.auth.clientId)
+
+    if (game) {
+      game.reconnect(socket)
+
+      return
+    }
+
+    ensureGame(gameId).then((restored) => {
+      if (restored) {
+        restored.reconnect(socket)
+
+        return
+      }
+
+      socket.emit("game:reset", "Game not found")
+    })
+  })
+
+  socket.on("manager:reconnect", ({ gameId }) => {
+    const game = registry.getManagerGame(
+      gameId,
+      socket.handshake.auth.clientId
+    )
+
+    if (game) {
+      game.reconnect(socket)
+
+      return
+    }
+
+    ensureGame(gameId).then((restored) => {
+      if (restored) {
+        restored.reconnect(socket)
+
+        return
+      }
+
+      socket.emit("game:reset", "Game expired")
+    })
+  })
+
+  socket.on("manager:auth", (password) => {
+    try {
+      const config = Config.game()
+
+      if (password !== config.managerPassword) {
+        socket.emit("manager:errorMessage", "Invalid password")
+
+        return
+      }
+
+      socket.emit("manager:quizzList", Config.quizz())
+    } catch (error) {
+      console.error("Failed to read game config:", error)
+      socket.emit("manager:errorMessage", "Failed to read game config")
+    }
+  })
+
+  socket.on("manager:getQuizz", (quizzId) => {
+    const quizz = Config.getQuizz(quizzId)
+
+    if (!quizz) {
+      socket.emit("manager:errorMessage", "Quizz not found")
+
+      return
+    }
+
+    socket.emit("manager:quizzLoaded", quizz)
+  })
+
+  socket.on("manager:saveQuizz", ({ id, quizz }) => {
+    if (!quizz?.subject || !Array.isArray(quizz?.questions)) {
+      socket.emit("manager:errorMessage", "Invalid quizz payload")
+
+      return
+    }
+
+    try {
+      const saved = Config.saveQuizz(id || null, quizz)
+
+      if (!saved) {
+        socket.emit("manager:errorMessage", "Failed to save quizz")
+
+        return
+      }
+
+      socket.emit("manager:quizzSaved", saved)
+      socket.emit("manager:quizzList", Config.quizz())
+    } catch (error) {
+      console.error("Failed to save quizz", error)
+      socket.emit("manager:errorMessage", "Failed to save quizz")
+    }
+  })
+
+  socket.on("manager:deleteQuizz", ({ id }) => {
+    if (!id) {
+      socket.emit("manager:errorMessage", "Invalid quizz id")
+      return
+    }
+
+    try {
+      const deleted = Config.deleteQuizz(id)
+      if (!deleted) {
+        socket.emit("manager:errorMessage", "Quizz not found")
+        return
+      }
+
+      socket.emit("manager:quizzDeleted", id)
+      socket.emit("manager:quizzList", Config.quizz())
+    } catch (error) {
+      console.error("Failed to delete quizz", error)
+      socket.emit("manager:errorMessage", "Failed to delete quizz")
+    }
+  })
+
+  socket.on("game:create", (quizzId) => {
+    const quizzList = Config.quizz()
+    const quizz = quizzList.find((q) => q.id === quizzId)
+
+    if (!quizz) {
+      socket.emit("game:errorMessage", "Quizz not found")
+
+      return
+    }
+
+    const game = new Game(io, socket, quizz)
+    registry.addGame(game)
+  })
+
+  socket.on("player:join", (inviteCode) => {
+    const result = inviteCodeValidator.safeParse(inviteCode)
+
+    if (result.error) {
+      socket.emit("game:errorMessage", result.error.issues[0].message)
+
+      return
+    }
+
+    const game = registry.getGameByInviteCode(inviteCode)
+
+    if (!game) {
+      socket.emit("game:errorMessage", "Game not found")
+
+      return
+    }
+
+    socket.emit("game:successRoom", game.gameId)
+  })
+
+  socket.on("player:login", ({ gameId, data }) =>
+    withGame(gameId, socket, (game) => game.join(socket, data.username))
+  )
+
+  socket.on("manager:kickPlayer", ({ gameId, playerId }) =>
+    withGame(gameId, socket, (game) => game.kickPlayer(socket, playerId))
+  )
+
+  socket.on("manager:startGame", ({ gameId }) =>
+    withGame(gameId, socket, (game) => game.start(socket))
+  )
+
+  socket.on("player:selectedAnswer", ({ gameId, data }) =>
+    withGame(gameId, socket, (game) =>
+      game.selectAnswer(socket, data.answerKey)
+    )
+  )
+
+  socket.on("manager:abortQuiz", ({ gameId }) =>
+    withGame(gameId, socket, (game) => game.abortRound(socket))
+  )
+
+  socket.on("manager:pauseCooldown", ({ gameId }) =>
+    withGame(gameId, socket, (game) => game.pauseCooldown(socket))
+  )
+
+  socket.on("manager:resumeCooldown", ({ gameId }) =>
+    withGame(gameId, socket, (game) => game.resumeCooldown(socket))
+  )
+
+  socket.on("manager:endGame", ({ gameId }) =>
+    withGame(gameId, socket, (game) => game.endGame(socket, registry))
+  )
+
+  socket.on("manager:nextQuestion", ({ gameId }) =>
+    withGame(gameId, socket, (game) => game.nextRound(socket))
+  )
+
+  socket.on("manager:skipQuestionIntro", ({ gameId }) =>
+    withGame(gameId, socket, (game) => game.skipQuestionIntro(socket))
+  )
+
+  socket.on("manager:showLeaderboard", ({ gameId }) =>
+    withGame(gameId, socket, (game) => game.showLeaderboard())
+  )
+
+  socket.on("disconnect", () => {
+    console.log(`A user disconnected : ${socket.id}`)
+
+    const managerGame = registry.getGameByManagerSocketId(socket.id)
+
+    if (managerGame) {
+      managerGame.manager.connected = false
+      registry.markGameAsEmpty(managerGame)
+
+      if (!managerGame.started) {
+        console.log("Reset game (manager disconnected)")
+        managerGame.abortCooldown()
+        io.to(managerGame.gameId).emit("game:reset", "Manager disconnected")
+        registry.removeGame(managerGame.gameId)
+
+        return
+      }
+    }
+
+    const game = registry.getGameByPlayerSocketId(socket.id)
+
+    if (!game) {
+      return
+    }
+
+    const player = game.players.find((p) => p.id === socket.id)
+
+    if (!player) {
+      return
+    }
+
+    player.connected = false
+    io.to(game.gameId).emit("game:totalPlayers", game.players.length)
+    io.to(game.manager.id).emit("manager:players", game.players)
+  })
+})
+
+process.on("SIGINT", () => {
+  Registry.getInstance().cleanup()
+  process.exit(0)
+})
+
+process.on("SIGTERM", () => {
+  Registry.getInstance().cleanup()
+  process.exit(0)
+})

packages/socket/src/services/config.ts

@@ -0,0 +1,236 @@
+import { QuizzWithId } from "@rahoot/common/types/game"
+import fs from "fs"
+import { resolve } from "path"
+
+const slugify = (value: string) =>
+  value
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 50)
+
+const inContainerPath = process.env.CONFIG_PATH
+
+const getPath = (path: string = "") =>
+  inContainerPath
+    ? resolve(inContainerPath, path)
+    : resolve(process.cwd(), "../../config", path)
+
+export const getConfigPath = (path: string = "") => getPath(path)
+
+class Config {
+  static ensureBaseFolders() {
+    const isConfigFolderExists = fs.existsSync(getPath())
+
+    if (!isConfigFolderExists) {
+      fs.mkdirSync(getPath())
+    }
+
+    const isQuizzExists = fs.existsSync(getPath("quizz"))
+
+    if (!isQuizzExists) {
+      fs.mkdirSync(getPath("quizz"))
+    }
+
+    const isMediaExists = fs.existsSync(getPath("media"))
+
+    if (!isMediaExists) {
+      fs.mkdirSync(getPath("media"))
+    }
+  }
+
+  static init() {
+    this.ensureBaseFolders()
+
+    const isGameConfigExists = fs.existsSync(getPath("game.json"))
+
+    if (!isGameConfigExists) {
+      fs.writeFileSync(
+        getPath("game.json"),
+        JSON.stringify(
+          {
+            managerPassword: "PASSWORD",
+            music: true,
+          },
+          null,
+          2
+        )
+      )
+    }
+
+    const isQuizzExists = fs.readdirSync(getPath("quizz")).length > 0
+
+    if (!isQuizzExists) {
+      fs.mkdirSync(getPath("quizz"), { recursive: true })
+
+      fs.writeFileSync(
+        getPath("quizz/example.json"),
+        JSON.stringify(
+          {
+            subject: "Example Quizz",
+            questions: [
+              {
+                question: "What is good answer ?",
+                answers: ["No", "Good answer", "No", "No"],
+                solution: 1,
+                cooldown: 5,
+                time: 15,
+              },
+              {
+                question: "What is good answer with image ?",
+                answers: ["No", "No", "No", "Good answer"],
+                image: "https://placehold.co/600x400.png",
+                solution: 3,
+                cooldown: 5,
+                time: 20,
+              },
+              {
+                question: "What is good answer with two answers ?",
+                answers: ["Good answer", "No"],
+                image: "https://placehold.co/600x400.png",
+                solution: 0,
+                cooldown: 5,
+                time: 20,
+              },
+              {
+                question: "Which soundtrack is this?",
+                answers: [
+                  "Nature sounds",
+                  "Piano solo",
+                  "Electronic beat",
+                  "Chill guitar",
+                ],
+                media: {
+                  type: "audio",
+                  url: "https://upload.wikimedia.org/wikipedia/commons/transcoded/4/4c/Beethoven_Moonlight_1st_movement.ogg/Beethoven_Moonlight_1st_movement.ogg.mp3",
+                },
+                solution: 1,
+                cooldown: 5,
+                time: 25,
+              },
+              {
+                question: "Which landmark appears in this clip?",
+                answers: [
+                  "Eiffel Tower",
+                  "Sydney Opera House",
+                  "Statue of Liberty",
+                  "Golden Gate Bridge",
+                ],
+                media: {
+                  type: "video",
+                  url: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4",
+                },
+                solution: 2,
+                cooldown: 5,
+                time: 40,
+              },
+            ],
+          },
+          null,
+          2
+        )
+      )
+    }
+  }
+
+  static game() {
+    const isExists = fs.existsSync(getPath("game.json"))
+
+    if (!isExists) {
+      throw new Error("Game config not found")
+    }
+
+    try {
+      const config = fs.readFileSync(getPath("game.json"), "utf-8")
+
+      return JSON.parse(config)
+    } catch (error) {
+      console.error("Failed to read game config:", error)
+    }
+
+    return {}
+  }
+
+  static quizz() {
+    this.ensureBaseFolders()
+
+    const files = fs
+      .readdirSync(getPath("quizz"))
+      .filter((file) => file.endsWith(".json"))
+
+    const quizz: QuizzWithId[] = files.map((file) => {
+      const data = fs.readFileSync(getPath(`quizz/${file}`), "utf-8")
+      const config = JSON.parse(data)
+
+      const id = file.replace(".json", "")
+
+      return {
+        id,
+        ...config,
+      }
+    })
+
+    return quizz || []
+  }
+
+  static getQuizz(id: string) {
+    this.ensureBaseFolders()
+
+    const filePath = getPath(`quizz/${id}.json`)
+
+    if (!fs.existsSync(filePath)) {
+      return null
+    }
+
+    const data = fs.readFileSync(filePath, "utf-8")
+
+    return { id, ...JSON.parse(data) } as QuizzWithId
+  }
+
+  static saveQuizz(
+    id: string | null,
+    quizz: QuizzWithId | Omit<QuizzWithId, "id">
+  ) {
+    this.ensureBaseFolders()
+
+    const slug = id
+      ? slugify(id)
+      : slugify((quizz as any).subject || "quizz")
+    const finalId = slug.length > 0 ? slug : `quizz-${Date.now()}`
+    const filePath = getPath(`quizz/${finalId}.json`)
+
+    fs.writeFileSync(
+      filePath,
+      JSON.stringify(
+        {
+          subject: quizz.subject,
+          questions: quizz.questions,
+        },
+        null,
+        2
+      )
+    )
+
+    return this.getQuizz(finalId)
+  }
+
+  static deleteQuizz(id: string) {
+    this.ensureBaseFolders()
+    const filePath = getPath(`quizz/${id}.json`)
+
+    if (!fs.existsSync(filePath)) {
+      return false
+    }
+
+    fs.unlinkSync(filePath)
+    return true
+  }
+
+  static getMediaPath(fileName: string = "") {
+    this.ensureBaseFolders()
+
+    return getPath(fileName ? `media/${fileName}` : "media")
+  }
+}
+
+export default Config

packages/socket/src/services/game.ts

@@ -0,0 +1,721 @@
+import { Answer, Player, Quizz } from "@rahoot/common/types/game"
+import { Server, Socket } from "@rahoot/common/types/game/socket"
+import { Status, STATUS, StatusDataMap } from "@rahoot/common/types/game/status"
+import Registry from "@rahoot/socket/services/registry"
+import { saveSnapshot, loadSnapshot, deleteSnapshot, GameSnapshot } from "@rahoot/socket/services/persistence"
+import { createInviteCode, timeToPoint } from "@rahoot/socket/utils/game"
+import sleep from "@rahoot/socket/utils/sleep"
+import { v4 as uuid } from "uuid"
+
+const registry = Registry.getInstance()
+
+class Game {
+  io: Server
+
+  gameId: string
+  manager: {
+    id: string
+    clientId: string
+    connected: boolean
+  }
+  inviteCode: string
+  started: boolean
+
+  lastBroadcastStatus: { name: Status; data: StatusDataMap[Status] } | null =
+    null
+  managerStatus: { name: Status; data: StatusDataMap[Status] } | null = null
+  playerStatus: Map<string, { name: Status; data: StatusDataMap[Status] }> =
+    new Map()
+
+  leaderboard: Player[]
+  tempOldLeaderboard: Player[] | null
+
+  quizz: Quizz
+  players: Player[]
+
+  round: {
+    currentQuestion: number
+    playersAnswers: Answer[]
+    startTime: number
+  }
+
+  cooldown: {
+    active: boolean
+    paused: boolean
+    remaining: number
+    timer: NodeJS.Timeout | null
+    resolve: (() => void) | null
+  }
+
+  constructor(io: Server, socket: Socket, quizz: Quizz) {
+    if (!io) {
+      throw new Error("Socket server not initialized")
+    }
+
+    this.io = io
+    this.gameId = uuid()
+    this.manager = {
+      id: "",
+      clientId: socket.handshake.auth.clientId,
+      connected: true,
+    }
+    this.inviteCode = ""
+    this.started = false
+
+    this.lastBroadcastStatus = null
+    this.managerStatus = null
+    this.playerStatus = new Map()
+
+    this.leaderboard = []
+    this.tempOldLeaderboard = null
+
+    this.players = []
+
+    this.round = {
+      playersAnswers: [],
+      currentQuestion: 0,
+      startTime: 0,
+    }
+
+    this.cooldown = {
+      active: false,
+      paused: false,
+      remaining: 0,
+      timer: null,
+      resolve: null,
+    }
+
+    const roomInvite = createInviteCode()
+    this.inviteCode = roomInvite
+    this.manager.id = socket.id
+
+    this.quizz = quizz
+
+    socket.join(this.gameId)
+    socket.emit("manager:gameCreated", {
+      gameId: this.gameId,
+      inviteCode: roomInvite,
+    })
+
+    console.log(
+      `New game created: ${roomInvite} subject: ${this.quizz.subject}`
+    )
+    this.persist()
+  }
+
+  static async fromSnapshot(io: Server, snapshot: GameSnapshot) {
+    const game = Object.create(Game.prototype) as Game
+    game.io = io
+    game.gameId = snapshot.gameId
+    game.manager = {
+      id: "",
+      clientId: snapshot.manager?.clientId || "",
+      connected: false,
+    }
+    game.inviteCode = snapshot.inviteCode
+    game.started = snapshot.started
+    game.lastBroadcastStatus = snapshot.lastBroadcastStatus || null
+    game.managerStatus = snapshot.managerStatus || null
+    game.playerStatus = new Map()
+    game.leaderboard = snapshot.leaderboard || []
+    game.tempOldLeaderboard = snapshot.tempOldLeaderboard || null
+    game.quizz = snapshot.quizz
+    game.players = (snapshot.players || []).map((p: Player) => ({
+      ...p,
+      id: "",
+      connected: false,
+    }))
+    game.round = snapshot.round || {
+      playersAnswers: [],
+      currentQuestion: 0,
+      startTime: 0,
+    }
+    game.cooldown = {
+      active: snapshot.cooldown?.active || false,
+      paused: snapshot.cooldown?.paused || false,
+      remaining: snapshot.cooldown?.remaining || 0,
+      timer: null,
+      resolve: null,
+    }
+
+    if (game.cooldown.active && game.cooldown.remaining > 0 && !game.cooldown.paused) {
+      game.startCooldown(game.cooldown.remaining)
+    }
+
+    return game
+  }
+
+  broadcastStatus<T extends Status>(status: T, data: StatusDataMap[T]) {
+    const statusData = { name: status, data }
+    this.lastBroadcastStatus = statusData
+    this.io.to(this.gameId).emit("game:status", statusData)
+    this.persist()
+  }
+
+  sendStatus<T extends Status>(
+    target: string,
+    status: T,
+    data: StatusDataMap[T]
+  ) {
+    const statusData = { name: status, data }
+
+    if (this.manager.id === target) {
+      this.managerStatus = statusData
+    } else {
+      this.playerStatus.set(target, statusData)
+    }
+
+    this.io.to(target).emit("game:status", statusData)
+    this.persist()
+  }
+
+  toSnapshot(): GameSnapshot {
+    return {
+      gameId: this.gameId,
+      inviteCode: this.inviteCode,
+      started: this.started,
+      manager: {
+        clientId: this.manager.clientId,
+      },
+      lastBroadcastStatus: this.lastBroadcastStatus,
+      managerStatus: this.managerStatus,
+      leaderboard: this.leaderboard,
+      tempOldLeaderboard: this.tempOldLeaderboard,
+      quizz: this.quizz,
+      players: this.players.map((p) => ({
+        ...p,
+        id: undefined,
+        connected: false,
+      })),
+      round: this.round,
+      cooldown: {
+        active: this.cooldown.active,
+        paused: this.cooldown.paused,
+        remaining: this.cooldown.remaining,
+      },
+    }
+  }
+
+  async persist() {
+    try {
+      await saveSnapshot(this.gameId, this.toSnapshot())
+    } catch (error) {
+      console.error("Failed to persist game snapshot", error)
+    }
+  }
+
+  async clearPersisted() {
+    try {
+      await deleteSnapshot(this.gameId)
+    } catch (error) {
+      console.error("Failed to delete game snapshot", error)
+    }
+  }
+
+  join(socket: Socket, username: string) {
+    const existing = this.players.find(
+      (p) => p.clientId === socket.handshake.auth.clientId
+    )
+
+    if (existing) {
+      // Reconnect existing player (even before game start)
+      existing.id = socket.id
+      existing.connected = true
+      if (username) existing.username = username
+      socket.join(this.gameId)
+      this.io.to(this.manager.id).emit("manager:players", this.players)
+      socket.emit("game:successJoin", this.gameId)
+      return
+    }
+
+    socket.join(this.gameId)
+
+    const playerData = {
+      id: socket.id,
+      clientId: socket.handshake.auth.clientId,
+      connected: true,
+      username,
+      points: 0,
+    }
+
+    this.players.push(playerData)
+
+    this.io.to(this.manager.id).emit("manager:newPlayer", playerData)
+    this.io.to(this.manager.id).emit("manager:players", this.players)
+    this.io.to(this.gameId).emit("game:totalPlayers", this.players.length)
+
+    socket.emit("game:successJoin", this.gameId)
+  }
+
+  kickPlayer(socket: Socket, playerId: string) {
+    if (this.manager.id !== socket.id) {
+      return
+    }
+
+    const player = this.players.find((p) => p.id === playerId)
+
+    if (!player) {
+      return
+    }
+
+    this.players = this.players.filter((p) => p.id !== playerId)
+    this.playerStatus.delete(playerId)
+
+    this.io.in(playerId).socketsLeave(this.gameId)
+    this.io
+      .to(player.id)
+      .emit("game:reset", "You have been kicked by the manager")
+    this.io.to(this.manager.id).emit("manager:playerKicked", player.id)
+    this.io.to(this.manager.id).emit("manager:players", this.players)
+
+    this.io.to(this.gameId).emit("game:totalPlayers", this.players.length)
+  }
+
+  reconnect(socket: Socket) {
+    const { clientId } = socket.handshake.auth
+    const isManager = this.manager.clientId === clientId
+
+    if (isManager) {
+      this.reconnectManager(socket)
+    } else {
+      this.reconnectPlayer(socket)
+    }
+    this.io.to(this.manager.id).emit("manager:players", this.players)
+  }
+
+  private reconnectManager(socket: Socket) {
+    if (this.manager.connected) {
+      socket.emit("game:reset", "Manager already connected")
+
+      return
+    }
+
+    socket.join(this.gameId)
+    this.manager.id = socket.id
+    this.manager.connected = true
+
+    const status = this.managerStatus ||
+      this.lastBroadcastStatus || {
+        name: STATUS.WAIT,
+        data: { text: "Waiting for players" },
+      }
+
+    socket.emit("manager:successReconnect", {
+      gameId: this.gameId,
+      currentQuestion: {
+        current: this.round.currentQuestion + 1,
+        total: this.quizz.questions.length,
+      },
+      status,
+      players: this.players,
+    })
+    socket.emit("game:totalPlayers", this.players.length)
+
+    registry.reactivateGame(this.gameId)
+    console.log(`Manager reconnected to game ${this.inviteCode}`)
+  }
+
+  private reconnectPlayer(socket: Socket) {
+    const { clientId } = socket.handshake.auth
+    const player = this.players.find((p) => p.clientId === clientId)
+
+    if (!player) {
+      return
+    }
+
+    if (player.connected) {
+      socket.emit("game:reset", "Player already connected")
+
+      return
+    }
+
+    socket.join(this.gameId)
+
+    const oldSocketId = player.id
+    player.id = socket.id
+    player.connected = true
+
+    const status = this.playerStatus.get(oldSocketId) ||
+      this.lastBroadcastStatus || {
+        name: STATUS.WAIT,
+        data: { text: "Waiting for players" },
+      }
+
+    if (this.playerStatus.has(oldSocketId)) {
+      const oldStatus = this.playerStatus.get(oldSocketId)!
+      this.playerStatus.delete(oldSocketId)
+      this.playerStatus.set(socket.id, oldStatus)
+    }
+    this.io.to(this.manager.id).emit("manager:players", this.players)
+
+    socket.emit("player:successReconnect", {
+      gameId: this.gameId,
+      currentQuestion: {
+        current: this.round.currentQuestion + 1,
+        total: this.quizz.questions.length,
+      },
+      status,
+      player: {
+        username: player.username,
+        points: player.points,
+      },
+    })
+    socket.emit("game:totalPlayers", this.players.length)
+    console.log(
+      `Player ${player.username} reconnected to game ${this.inviteCode}`
+    )
+  }
+
+  startCooldown(seconds: number): Promise<void> {
+    if (this.cooldown.active) {
+      return Promise.resolve()
+    }
+
+    this.cooldown.active = true
+    this.cooldown.paused = false
+    this.cooldown.remaining = seconds
+
+    return new Promise<void>((resolve) => {
+      this.cooldown.resolve = resolve
+
+      const tick = () => {
+        if (!this.cooldown.active) {
+          this.finishCooldown()
+          return
+        }
+
+        if (this.cooldown.paused) {
+          return
+        }
+
+        this.cooldown.remaining -= 1
+
+        if (this.cooldown.remaining <= 0) {
+          this.finishCooldown()
+          return
+        }
+
+        this.io.to(this.gameId).emit("game:cooldown", this.cooldown.remaining)
+        this.persist()
+      }
+
+      // initial emit
+      this.io.to(this.gameId).emit("game:cooldown", this.cooldown.remaining)
+      this.persist()
+
+      this.cooldown.timer = setInterval(tick, 1000)
+    })
+  }
+
+  abortCooldown() {
+    if (!this.cooldown.active) {
+      return
+    }
+
+    this.cooldown.active = false
+    this.cooldown.paused = false
+    this.io.to(this.gameId).emit("game:cooldownPause", false)
+    this.persist()
+    this.finishCooldown()
+  }
+
+  finishCooldown() {
+    if (this.cooldown.timer) {
+      clearInterval(this.cooldown.timer)
+    }
+    this.cooldown.timer = null
+    this.cooldown.active = false
+    this.cooldown.paused = false
+    this.cooldown.remaining = 0
+    if (this.cooldown.resolve) {
+      this.cooldown.resolve()
+    }
+    this.cooldown.resolve = null
+  }
+
+  pauseCooldown(socket: Socket) {
+    if (this.manager.id !== socket.id || !this.cooldown.active || this.cooldown.paused) {
+      return
+    }
+
+    this.cooldown.paused = true
+    this.io.to(this.gameId).emit("game:cooldownPause", true)
+    this.persist()
+  }
+
+  resumeCooldown(socket: Socket) {
+    if (this.manager.id !== socket.id || !this.cooldown.active || !this.cooldown.paused) {
+      return
+    }
+
+    this.cooldown.paused = false
+    this.io.to(this.gameId).emit("game:cooldownPause", false)
+    this.persist()
+  }
+
+  skipQuestionIntro(socket: Socket) {
+    if (this.manager.id !== socket.id) {
+      return
+    }
+
+    if (!this.started) {
+      return
+    }
+
+    this.abortCooldown()
+  }
+
+  async start(socket: Socket) {
+    if (this.manager.id !== socket.id) {
+      return
+    }
+
+    if (this.started) {
+      return
+    }
+
+    this.started = true
+
+    this.broadcastStatus(STATUS.SHOW_START, {
+      time: 3,
+      subject: this.quizz.subject,
+    })
+
+    await sleep(3)
+
+    this.io.to(this.gameId).emit("game:startCooldown")
+    await this.startCooldown(3)
+
+    this.newRound()
+    this.persist()
+  }
+
+  async newRound() {
+    const question = this.quizz.questions[this.round.currentQuestion]
+
+    if (!this.started) {
+      return
+    }
+
+    this.playerStatus.clear()
+
+    this.io.to(this.gameId).emit("game:updateQuestion", {
+      current: this.round.currentQuestion + 1,
+      total: this.quizz.questions.length,
+    })
+
+    this.managerStatus = null
+    this.broadcastStatus(STATUS.SHOW_PREPARED, {
+      totalAnswers: question.answers.length,
+      questionNumber: this.round.currentQuestion + 1,
+    })
+
+    await sleep(2)
+
+    if (!this.started) {
+      return
+    }
+
+    this.broadcastStatus(STATUS.SHOW_QUESTION, {
+      question: question.question,
+      image: question.image,
+      media: question.media,
+      cooldown: question.cooldown,
+    })
+
+    await this.startCooldown(question.cooldown)
+
+    if (!this.started) {
+      return
+    }
+
+    this.round.startTime = Date.now()
+
+    this.broadcastStatus(STATUS.SELECT_ANSWER, {
+      question: question.question,
+      answers: question.answers,
+      image: question.image,
+      media: question.media,
+      time: question.time,
+      totalPlayer: this.players.length,
+    })
+
+    await this.startCooldown(question.time)
+
+    if (!this.started) {
+      return
+    }
+
+    this.showResults(question)
+    this.persist()
+  }
+
+  showResults(question: any) {
+    const oldLeaderboard =
+      this.leaderboard.length === 0
+        ? this.players.map((p) => ({ ...p }))
+        : this.leaderboard.map((p) => ({ ...p }))
+
+    const totalType = this.round.playersAnswers.reduce(
+      (acc: Record<number, number>, { answerId }) => {
+        acc[answerId] = (acc[answerId] || 0) + 1
+
+        return acc
+      },
+      {}
+    )
+
+    const sortedPlayers = this.players
+      .map((player) => {
+        const playerAnswer = this.round.playersAnswers.find(
+          (a) => a.playerId === player.id
+        )
+
+        const isCorrect = playerAnswer
+          ? playerAnswer.answerId === question.solution
+          : false
+
+        const points =
+          playerAnswer && isCorrect ? Math.round(playerAnswer.points) : 0
+
+        player.points += points
+
+        return { ...player, lastCorrect: isCorrect, lastPoints: points }
+      })
+      .sort((a, b) => b.points - a.points)
+
+    this.players = sortedPlayers
+
+    sortedPlayers.forEach((player, index) => {
+      const rank = index + 1
+      const aheadPlayer = sortedPlayers[index - 1]
+
+      this.sendStatus(player.id, STATUS.SHOW_RESULT, {
+        correct: player.lastCorrect,
+        message: player.lastCorrect ? "Nice!" : "Too bad",
+        points: player.lastPoints,
+        myPoints: player.points,
+        rank,
+        aheadOfMe: aheadPlayer ? aheadPlayer.username : null,
+      })
+    })
+
+    this.sendStatus(this.manager.id, STATUS.SHOW_RESPONSES, {
+      question: question.question,
+      responses: totalType,
+      correct: question.solution,
+      answers: question.answers,
+      image: question.image,
+   media: question.media,
+    })
+
+    this.leaderboard = sortedPlayers
+    this.tempOldLeaderboard = oldLeaderboard
+
+    this.round.playersAnswers = []
+    this.persist()
+  }
+  selectAnswer(socket: Socket, answerId: number) {
+    const player = this.players.find((player) => player.id === socket.id)
+    const question = this.quizz.questions[this.round.currentQuestion]
+
+    if (!player) {
+      return
+    }
+
+    if (this.round.playersAnswers.find((p) => p.playerId === socket.id)) {
+      return
+    }
+
+    this.round.playersAnswers.push({
+      playerId: player.id,
+      answerId,
+      points: timeToPoint(this.round.startTime, question.time),
+    })
+
+    this.sendStatus(socket.id, STATUS.WAIT, {
+      text: "Waiting for the players to answer",
+    })
+
+    socket
+      .to(this.gameId)
+      .emit("game:playerAnswer", this.round.playersAnswers.length)
+
+    this.io.to(this.gameId).emit("game:totalPlayers", this.players.length)
+
+    if (this.round.playersAnswers.length === this.players.length) {
+      this.abortCooldown()
+    }
+    this.persist()
+  }
+
+  nextRound(socket: Socket) {
+    if (!this.started) {
+      return
+    }
+
+    if (socket.id !== this.manager.id) {
+      return
+    }
+
+    if (!this.quizz.questions[this.round.currentQuestion + 1]) {
+      return
+    }
+
+    this.round.currentQuestion += 1
+    this.newRound()
+  }
+
+  abortRound(socket: Socket) {
+    if (!this.started) {
+      return
+    }
+
+    if (socket.id !== this.manager.id) {
+      return
+    }
+
+    this.abortCooldown()
+  }
+
+  showLeaderboard() {
+    const isLastRound =
+      this.round.currentQuestion + 1 === this.quizz.questions.length
+
+    if (isLastRound) {
+      this.started = false
+
+      this.broadcastStatus(STATUS.FINISHED, {
+        subject: this.quizz.subject,
+        top: this.leaderboard.slice(0, 3),
+      })
+      this.clearPersisted()
+
+      return
+    }
+
+    const oldLeaderboard = this.tempOldLeaderboard
+      ? this.tempOldLeaderboard
+      : this.leaderboard
+
+    this.sendStatus(this.manager.id, STATUS.SHOW_LEADERBOARD, {
+      oldLeaderboard: oldLeaderboard.slice(0, 5),
+      leaderboard: this.leaderboard.slice(0, 5),
+    })
+
+    this.tempOldLeaderboard = null
+    this.persist()
+  }
+
+  endGame(socket: Socket, registry: typeof Registry.prototype) {
+    if (socket.id !== this.manager.id) {
+      return
+    }
+    this.started = false
+    this.abortCooldown()
+    this.io.to(this.gameId).emit("game:reset", "Game ended by manager")
+    registry.removeGame(this.gameId)
+  }
+}
+
+export default Game

packages/socket/src/services/persistence.ts

@@ -0,0 +1,36 @@
+import { createClient } from "redis"
+
+const redisUrl = process.env.REDIS_URL || "redis://localhost:6379"
+
+const redis =
+  createClient({ url: redisUrl })
+    .on("error", (err) => console.error("Redis Client Error", err))
+
+export type GameSnapshot = Record<string, any>
+
+export const connectRedis = async () => {
+  if (!redis.isOpen) {
+    await redis.connect()
+  }
+}
+
+export const saveSnapshot = async (gameId: string, snapshot: GameSnapshot) => {
+  if (!gameId) return
+  await connectRedis()
+  await redis.set(`game:${gameId}`, JSON.stringify(snapshot), {
+    EX: 60 * 60 * 6, // 6 hours
+  })
+}
+
+export const loadSnapshot = async (gameId: string): Promise<GameSnapshot | null> => {
+  if (!gameId) return null
+  await connectRedis()
+  const raw = await redis.get(`game:${gameId}`)
+  return raw ? (JSON.parse(raw) as GameSnapshot) : null
+}
+
+export const deleteSnapshot = async (gameId: string) => {
+  if (!gameId) return
+  await connectRedis()
+  await redis.del(`game:${gameId}`)
+}

packages/socket/src/services/registry.ts

@@ -0,0 +1,165 @@
+import Game from "@rahoot/socket/services/game"
+import dayjs from "dayjs"
+
+interface EmptyGame {
+  since: number
+  game: Game
+}
+
+class Registry {
+  private static instance: Registry | null = null
+  private games: Game[] = []
+  private emptyGames: EmptyGame[] = []
+  private cleanupInterval: ReturnType<typeof setTimeout> | null = null
+  private readonly EMPTY_GAME_TIMEOUT_MINUTES = 5
+  private readonly CLEANUP_INTERVAL_MS = 60_000
+
+  private constructor() {
+    this.startCleanupTask()
+  }
+
+  static getInstance(): Registry {
+    Registry.instance ||= new Registry()
+
+    return Registry.instance
+  }
+
+  addGame(game: Game): void {
+    this.games.push(game)
+    console.log(`Game ${game.gameId} added. Total games: ${this.games.length}`)
+  }
+
+  getGameById(gameId: string): Game | undefined {
+    return this.games.find((g) => g.gameId === gameId)
+  }
+
+  getGameByInviteCode(inviteCode: string): Game | undefined {
+    return this.games.find((g) => g.inviteCode === inviteCode)
+  }
+
+  getPlayerGame(gameId: string, clientId: string): Game | undefined {
+    return this.games.find(
+      (g) =>
+        g.gameId === gameId && g.players.some((p) => p.clientId === clientId)
+    )
+  }
+
+  getManagerGame(gmageId: string, clientId: string): Game | undefined {
+    return this.games.find(
+      (g) => g.gameId === gmageId && g.manager.clientId === clientId
+    )
+  }
+
+  getGameByManagerSocketId(socketId: string): Game | undefined {
+    return this.games.find((g) => g.manager.id === socketId)
+  }
+
+  getGameByPlayerSocketId(socketId: string): Game | undefined {
+    return this.games.find((g) => g.players.some((p) => p.id === socketId))
+  }
+
+  markGameAsEmpty(game: Game): void {
+    const alreadyEmpty = this.emptyGames.find(
+      (g) => g.game.gameId === game.gameId
+    )
+
+    if (!alreadyEmpty) {
+      this.emptyGames.push({
+        since: dayjs().unix(),
+        game,
+      })
+      console.log(
+        `Game ${game.gameId} marked as empty. Total empty games: ${this.emptyGames.length}`
+      )
+    }
+  }
+
+  reactivateGame(gameId: string): void {
+    const initialLength = this.emptyGames.length
+    this.emptyGames = this.emptyGames.filter((g) => g.game.gameId !== gameId)
+
+    if (this.emptyGames.length < initialLength) {
+      console.log(
+        `Game ${gameId} reactivated. Remaining empty games: ${this.emptyGames.length}`
+      )
+    }
+  }
+
+  removeGame(gameId: string): boolean {
+    const game = this.games.find((g) => g.gameId === gameId)
+    void game?.clearPersisted?.()
+
+    const initialLength = this.games.length
+    this.games = this.games.filter((g) => g.gameId !== gameId)
+    this.emptyGames = this.emptyGames.filter((g) => g.game.gameId !== gameId)
+
+    const removed = this.games.length < initialLength
+
+    if (removed) {
+      console.log(`Game ${gameId} removed. Total games: ${this.games.length}`)
+    }
+
+    return removed
+  }
+
+  getAllGames(): Game[] {
+    return [...this.games]
+  }
+
+  getGameCount(): number {
+    return this.games.length
+  }
+
+  getEmptyGameCount(): number {
+    return this.emptyGames.length
+  }
+
+  private cleanupEmptyGames(): void {
+    const now = dayjs()
+    const stillEmpty = this.emptyGames.filter(
+      (g) =>
+        now.diff(dayjs.unix(g.since), "minute") <
+        this.EMPTY_GAME_TIMEOUT_MINUTES
+    )
+
+    if (stillEmpty.length === this.emptyGames.length) {
+      return
+    }
+
+    const removed = this.emptyGames.filter((g) => !stillEmpty.includes(g))
+    const removedGameIds = removed.map((r) => r.game.gameId)
+    removed.forEach((entry) => void entry.game.clearPersisted?.())
+
+    this.games = this.games.filter((g) => !removedGameIds.includes(g.gameId))
+    this.emptyGames = stillEmpty
+
+    console.log(
+      `Removed ${removed.length} empty game(s). Remaining games: ${this.games.length}`
+    )
+  }
+
+  private startCleanupTask(): void {
+    this.cleanupInterval = setInterval(() => {
+      this.cleanupEmptyGames()
+    }, this.CLEANUP_INTERVAL_MS)
+
+    console.log("Game cleanup task started")
+  }
+
+  stopCleanupTask(): void {
+    if (this.cleanupInterval) {
+      clearInterval(this.cleanupInterval)
+      this.cleanupInterval = null
+      console.log("Game cleanup task stopped")
+    }
+  }
+
+  cleanup(): void {
+    this.stopCleanupTask()
+    this.games = []
+    this.emptyGames = []
+    console.log("Registry cleaned up")
+  }
+}
+
+export default Registry

packages/socket/src/utils/game.ts

@@ -0,0 +1,51 @@
+import { Socket } from "@rahoot/common/types/game/socket"
+import Game from "@rahoot/socket/services/game"
+import Registry from "@rahoot/socket/services/registry"
+
+export const withGame = (
+  gameId: string | undefined,
+  socket: Socket,
+  callback: (_game: Game) => void
+): void => {
+  if (!gameId) {
+    socket.emit("game:errorMessage", "Game not found")
+
+    return
+  }
+
+  const registry = Registry.getInstance()
+  const game = registry.getGameById(gameId)
+
+  if (!game) {
+    socket.emit("game:errorMessage", "Game not found")
+
+    return
+  }
+
+  callback(game)
+}
+
+export const createInviteCode = (length = 6) => {
+  let result = ""
+  const characters = "0123456789"
+  const charactersLength = characters.length
+
+  for (let i = 0; i < length; i += 1) {
+    const randomIndex = Math.floor(Math.random() * charactersLength)
+    result += characters.charAt(randomIndex)
+  }
+
+  return result
+}
+
+export const timeToPoint = (startTime: number, secondes: number): number => {
+  let points = 1000
+
+  const actualTime = Date.now()
+  const tempsPasseEnSecondes = (actualTime - startTime) / 1000
+
+  points -= (1000 / secondes) * tempsPasseEnSecondes
+  points = Math.max(0, points)
+
+  return points
+}

packages/socket/src/utils/sleep.ts

@@ -0,0 +1,4 @@
+export const sleep = (sec: number) =>
+  new Promise((r) => void setTimeout(r, sec * 1000))
+
+export default sleep

packages/socket/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "types": ["node"],
+    "moduleResolution": "bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  }
+}

packages/web/.gitignore

@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+dist
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

packages/web/.prettierrc.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": false,
+  "printWidth": 80,
+  "trailingComma": "all",
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

packages/web/eslint.config.mjs

@@ -0,0 +1,231 @@
+import js from "@eslint/js"
+import nextPlugin from "@next/eslint-plugin-next"
+import reactPlugin from "eslint-plugin-react"
+import reactHooksPlugin from "eslint-plugin-react-hooks"
+import { defineConfig } from "eslint/config"
+import globals from "globals"
+import tseslint from "typescript-eslint"
+
+export default defineConfig([
+  {
+    ignores: ["**/node_modules/**", "**/.next/**"],
+  },
+  {
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ...js.configs.recommended.languageOptions,
+      parser: tseslint.parser,
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+        ecmaFeatures: { jsx: true },
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+    plugins: {
+      "@typescript-eslint": tseslint.plugin,
+      react: reactPlugin,
+      "react-hooks": reactHooksPlugin,
+      "@next/next": nextPlugin,
+    },
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...tseslint.configs.recommendedTypeChecked[0].rules,
+      ...reactPlugin.configs.recommended.rules,
+
+      "array-callback-return": [
+        "error",
+        { allowImplicit: false, checkForEach: true, allowVoid: true },
+      ],
+      "no-await-in-loop": "error",
+      "no-constant-binary-expression": "error",
+      "no-constructor-return": "error",
+      "no-duplicate-imports": ["error", { includeExports: true }],
+      "no-new-native-nonconstructor": "error",
+      "no-promise-executor-return": ["error", { allowVoid: true }],
+      "no-self-compare": "error",
+      "no-template-curly-in-string": "error",
+      "no-unmodified-loop-condition": "error",
+      "no-unreachable-loop": "error",
+      "no-unused-private-class-members": "error",
+      "arrow-body-style": ["error", "as-needed"],
+      camelcase: [
+        "error",
+        {
+          properties: "always",
+          ignoreDestructuring: true,
+          ignoreImports: true,
+          ignoreGlobals: true,
+        },
+      ],
+      "capitalized-comments": [
+        "error",
+        "always",
+        { ignoreConsecutiveComments: true },
+      ],
+      "class-methods-use-this": ["error", { enforceForClassFields: true }],
+      complexity: ["warn", 40],
+      "consistent-return": "error",
+      curly: ["error", "all"],
+      "default-param-last": "error",
+      "dot-notation": "error",
+      eqeqeq: ["error", "always"],
+      "func-name-matching": "error",
+      "func-names": "error",
+      "func-style": ["error", "declaration", { allowArrowFunctions: true }],
+      "grouped-accessor-pairs": ["error", "getBeforeSet"],
+      "guard-for-in": "error",
+      "init-declarations": ["error", "always"],
+      "logical-assignment-operators": [
+        "error",
+        "always",
+        { enforceForIfStatements: true },
+      ],
+      "max-classes-per-file": ["error", { ignoreExpressions: true }],
+      "max-depth": ["error", 3],
+      "max-lines": [
+        "error",
+        { max: 500, skipBlankLines: true, skipComments: true },
+      ],
+      "max-nested-callbacks": ["error", 3],
+      "max-params": ["error", 4],
+      "multiline-comment-style": ["error", "separate-lines"],
+      "no-alert": "error",
+      "no-bitwise": "error",
+      "no-caller": "error",
+      "no-else-return": "error",
+      "no-empty-function": "error",
+      "no-empty-static-block": "error",
+      "no-eq-null": "error",
+      "no-eval": "error",
+      "no-extend-native": "error",
+      "no-extra-label": "error",
+      "no-implicit-coercion": "error",
+      "no-implicit-globals": "error",
+      "no-implied-eval": "error",
+      "no-inline-comments": "error",
+      "no-invalid-this": "error",
+      "no-iterator": "error",
+      "no-labels": "error",
+      "no-lone-blocks": "error",
+      "no-lonely-if": "error",
+      "no-loop-func": "error",
+      "no-multi-assign": "error",
+      "no-multi-str": "error",
+      "no-nested-ternary": "error",
+      "no-new": "error",
+      "no-new-func": "error",
+      "no-new-wrappers": "error",
+      "no-object-constructor": "error",
+      "no-octal-escape": "error",
+      "no-param-reassign": "error",
+      "no-plusplus": "error",
+      "no-proto": "error",
+      "no-return-assign": ["error", "always"],
+      "no-script-url": "error",
+      "no-sequences": "error",
+      "no-throw-literal": "error",
+      "no-undef-init": "error",
+      "no-unneeded-ternary": ["error", { defaultAssignment: false }],
+      "no-unused-expressions": ["error", { enforceForJSX: true }],
+      "no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
+      "no-useless-call": "error",
+      "no-useless-computed-key": ["error", { enforceForClassMembers: true }],
+      "no-useless-concat": "error",
+      "no-useless-constructor": "error",
+      "no-useless-rename": "error",
+      "no-useless-return": "error",
+      "no-var": "error",
+      "no-warning-comments": ["error", { terms: ["todo"] }],
+      "object-shorthand": ["error", "always"],
+      "one-var": ["error", "never"],
+      "operator-assignment": ["error", "always"],
+      "prefer-arrow-callback": "error",
+      "prefer-const": [
+        "error",
+        { destructuring: "any", ignoreReadBeforeAssign: false },
+      ],
+      "prefer-destructuring": "error",
+      "prefer-exponentiation-operator": "error",
+      "prefer-numeric-literals": "error",
+      "prefer-object-has-own": "error",
+      "prefer-object-spread": "error",
+      "prefer-promise-reject-errors": "error",
+      "prefer-regex-literals": ["error", { disallowRedundantWrapping: true }],
+      "prefer-rest-params": "error",
+      "prefer-spread": "error",
+      "prefer-template": "error",
+      radix: "error",
+      "require-await": "error",
+      "require-unicode-regexp": "error",
+      "symbol-description": "error",
+      yoda: "error",
+      "line-comment-position": ["error", { position: "above" }],
+      indent: "off",
+      "newline-before-return": "error",
+      "no-undef": "error",
+      "padded-blocks": ["error", "never"],
+      "padding-line-between-statements": [
+        "error",
+        {
+          blankLine: "always",
+          prev: "*",
+          next: [
+            "break",
+            "case",
+            "cjs-export",
+            "class",
+            "continue",
+            "do",
+            "if",
+            "switch",
+            "try",
+            "while",
+            "return",
+          ],
+        },
+        {
+          blankLine: "always",
+          prev: [
+            "break",
+            "case",
+            "cjs-export",
+            "class",
+            "continue",
+            "do",
+            "if",
+            "switch",
+            "try",
+            "while",
+            "return",
+          ],
+          next: "*",
+        },
+      ],
+      quotes: [
+        "error",
+        "double",
+        { avoidEscape: true, allowTemplateLiterals: true },
+      ],
+      "space-before-blocks": "error",
+      semi: ["error", "never"],
+
+      // React + Hooks + Next.js
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "off",
+      "react/no-unescaped-entities": ["error", { forbid: [">", "}"] }],
+      "react/react-in-jsx-scope": "off",
+      "react/prop-types": "off",
+      "react/jsx-uses-vars": "error",
+      "react/jsx-uses-react": "off",
+    },
+  },
+])

packages/web/next.config.mjs

@@ -0,0 +1,10 @@
+const nextConfig = {
+  output: "standalone",
+  productionBrowserSourceMaps: false,
+  transpilePackages: ["packages/*", "@t3-oss/env-nextjs"],
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+}
+
+export default nextConfig

packages/web/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@rahoot/web",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@rahoot/common": "workspace:*",
+    "@rahoot/socket": "workspace:*",
+    "@t3-oss/env-nextjs": "^0.13.8",
+    "clsx": "^2.1.1",
+    "ky": "^1.13.0",
+    "motion": "^12.23.24",
+    "next": "15.5.4",
+    "react": "19.1.0",
+    "react-confetti": "^6.4.0",
+    "react-dom": "19.1.0",
+    "react-hot-toast": "^2.6.0",
+    "socket.io-client": "^4.8.1",
+    "use-sound": "^5.0.0",
+    "uuid": "^13.0.0",
+    "yup": "^1.7.1",
+    "zod": "^4.1.12",
+    "zustand": "^5.0.8"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3.3.1",
+    "@tailwindcss/postcss": "^4.1.16",
+    "@types/node": "^20.19.23",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "eslint": "^9.38.0",
+    "eslint-config-next": "15.5.4",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^6.1.1",
+    "globals": "^16.4.0",
+    "prettier": "^3.6.2",
+    "prettier-plugin-tailwindcss": "^0.6.14",
+    "tailwindcss": "^4.1.16",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.46.2"
+  }
+}

packages/web/postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;

packages/web/public/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="100%" height="100%" viewBox="5.989999771118164 -63.970001220703125 88.26000213623047 65.80000305175781"><g fill="#ff9900"><path d="M65.97 -41.84C65.97 -45.17 65.2 -48.32 63.68 -51.28C62.15 -54.25 59.98 -56.62 57.15 -58.4C55.98 -59.12 54.67 -59.7 53.2 -60.14C51.73 -60.59 50.2 -60.93 48.62 -61.18C47.04 -61.43 45.48 -61.59 43.92 -61.64C42.37 -61.7 40.93 -61.72 39.6 -61.72C34.38 -61.72 29.18 -61.56 24 -61.23C18.81 -60.89 13.61 -60.59 8.4 -60.31C8.07 -51.33 7.82 -42.34 7.65 -33.36C7.6 -28.31 7.4 -23.25 7.07 -18.18C6.74 -13.1 6.38 -8.01 5.99 -2.91C7.54 -2.75 9.08 -2.63 10.61 -2.58C12.13 -2.52 13.7 -2.5 15.31 -2.5C18.47 -2.5 21.63 -2.58 24.79 -2.75L24.37 -21.63C26.15 -21.74 27.94 -21.88 29.74 -22.04C31.54 -22.21 33.36 -22.35 35.19 -22.46C36.8 -18.3 38.04 -14.34 38.93 -10.56C39.82 -6.79 40.48 -2.66 40.93 1.83L65.22 1.25C61.11 -8.35 56.32 -17.72 50.83 -26.87C55.37 -27.09 59.04 -28.51 61.81 -31.11C64.58 -33.72 65.97 -37.3 65.97 -41.84ZM46.67 -43.17C46.67 -42.9 46.65 -42.43 46.63 -41.76C46.6 -41.09 46.57 -40.42 46.54 -39.72C46.52 -39.03 46.45 -38.36 46.34 -37.73C46.22 -37.09 46.09 -36.66 45.92 -36.44C45.53 -35.94 44.85 -35.53 43.88 -35.23C42.91 -34.92 41.86 -34.69 40.72 -34.52C39.58 -34.36 38.47 -34.25 37.39 -34.19C36.31 -34.13 35.49 -34.11 34.94 -34.11C33.66 -34.11 32.36 -34.16 31.03 -34.27C29.7 -34.38 28.42 -34.58 27.2 -34.86L24.96 -50.99C27.06 -51.33 29.18 -51.6 31.32 -51.83C33.46 -52.05 35.63 -52.16 37.85 -52.16C38.13 -52.16 38.61 -52.14 39.31 -52.12C40 -52.09 40.72 -52.03 41.47 -51.95C42.22 -51.87 42.92 -51.77 43.59 -51.66C44.26 -51.55 44.73 -51.38 45 -51.16C45.39 -50.83 45.7 -50.31 45.92 -49.62C46.14 -48.93 46.31 -48.18 46.42 -47.38C46.53 -46.57 46.6 -45.78 46.63 -45C46.65 -44.23 46.67 -43.62 46.67 -43.17Z M94.25 -63.97L74.87 -62.39C75.09 -58.56 75.28 -54.75 75.45 -50.95C75.62 -47.15 75.89 -43.37 76.28 -39.6L78.36 -18.63L87.51 -19.47C88.34 -23.63 89.19 -27.73 90.05 -31.78C90.91 -35.83 91.76 -39.93 92.59 -44.09C92.86 -45.53 93.1 -47.1 93.29 -48.79C93.49 -50.48 93.64 -52.21 93.75 -53.99C93.86 -55.76 93.96 -57.51 94.04 -59.23C94.13 -60.95 94.2 -62.53 94.25 -63.97ZM92.75 -6.65C92.75 -6.88 92.74 -7.08 92.71 -7.28C92.69 -7.47 92.62 -7.68 92.5 -7.9C91.89 -9.34 90.97 -10.43 89.72 -11.15C88.47 -11.87 87.07 -12.23 85.52 -12.23C84.57 -12.23 83.56 -12.08 82.48 -11.77C81.4 -11.47 80.4 -11.02 79.49 -10.44C78.57 -9.86 77.79 -9.14 77.16 -8.28C76.52 -7.42 76.2 -6.46 76.2 -5.41C76.2 -4.41 76.44 -3.52 76.91 -2.75C77.38 -1.97 77.99 -1.32 78.74 -0.79C79.49 -0.26 80.32 0.15 81.23 0.46C82.15 0.76 83.02 0.92 83.85 0.92C84.74 0.92 85.71 0.71 86.76 0.29C87.82 -0.12 88.79 -0.69 89.68 -1.41C90.56 -2.14 91.3 -2.95 91.88 -3.87C92.46 -4.78 92.75 -5.71 92.75 -6.65Z"></path></g></svg>

packages/web/src/app/(auth)/layout.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import logo from "@rahoot/web/assets/logo.svg"
+import Loader from "@rahoot/web/components/Loader"
+import { useSocket } from "@rahoot/web/contexts/socketProvider"
+import Image from "next/image"
+import { PropsWithChildren, useEffect } from "react"
+
+const AuthLayout = ({ children }: PropsWithChildren) => {
+  const { isConnected, connect } = useSocket()
+  useEffect(() => {
+    if (!isConnected) {
+      connect()
+    }
+  }, [connect, isConnected])
+
+  if (!isConnected) {
+    return (
+      <section className="relative flex min-h-screen flex-col items-center justify-center">
+        <div className="pointer-events-none absolute h-full w-full overflow-hidden">
+          <div className="bg-primary/15 absolute -top-[15vmin] -left-[15vmin] min-h-[75vmin] min-w-[75vmin] rounded-full"></div>
+          <div className="bg-primary/15 absolute -right-[15vmin] -bottom-[15vmin] min-h-[75vmin] min-w-[75vmin] rotate-45"></div>
+        </div>
+
+        <Image src={logo} className="mb-6 h-32" alt="logo" />
+        <Loader className="h-23" />
+        <h2 className="mt-2 text-center text-2xl font-bold text-white drop-shadow-lg md:text-3xl">
+          Loading...
+        </h2>
+      </section>
+    )
+  }
+
+  return (
+    <section className="relative flex min-h-screen flex-col items-center justify-center">
+      <div className="pointer-events-none absolute h-full w-full overflow-hidden">
+        <div className="bg-primary/15 absolute -top-[15vmin] -left-[15vmin] min-h-[75vmin] min-w-[75vmin] rounded-full"></div>
+        <div className="bg-primary/15 absolute -right-[15vmin] -bottom-[15vmin] min-h-[75vmin] min-w-[75vmin] rotate-45"></div>
+      </div>
+
+      <Image src={logo} className="mb-6 h-32" alt="logo" />
+      {children}
+    </section>
+  )
+}
+
+export default AuthLayout

packages/web/src/app/(auth)/manager/page.tsx

@@ -0,0 +1,82 @@
+"use client"
+
+import { QuizzWithId } from "@rahoot/common/types/game"
+import { STATUS } from "@rahoot/common/types/game/status"
+import ManagerPassword from "@rahoot/web/components/game/create/ManagerPassword"
+import QuizEditor from "@rahoot/web/components/game/create/QuizEditor"
+import MediaLibrary from "@rahoot/web/components/game/create/MediaLibrary"
+import SelectQuizz from "@rahoot/web/components/game/create/SelectQuizz"
+import { useEvent, useSocket } from "@rahoot/web/contexts/socketProvider"
+import { useManagerStore } from "@rahoot/web/stores/manager"
+import { useRouter } from "next/navigation"
+import { useState } from "react"
+
+const Manager = () => {
+  const { setGameId, setStatus } = useManagerStore()
+  const router = useRouter()
+  const { socket } = useSocket()
+
+  const [isAuth, setIsAuth] = useState(false)
+  const [quizzList, setQuizzList] = useState<QuizzWithId[]>([])
+  const [showEditor, setShowEditor] = useState(false)
+  const [showMedia, setShowMedia] = useState(false)
+
+  useEvent("manager:quizzList", (quizzList) => {
+    setIsAuth(true)
+    setQuizzList(quizzList)
+  })
+
+  useEvent("manager:gameCreated", ({ gameId, inviteCode }) => {
+    setGameId(gameId)
+    setStatus(STATUS.SHOW_ROOM, { text: "Waiting for the players", inviteCode })
+    router.push(`/game/manager/${gameId}`)
+  })
+
+  const handleAuth = (password: string) => {
+    socket?.emit("manager:auth", password)
+  }
+  const handleCreate = (quizzId: string) => {
+    socket?.emit("game:create", quizzId)
+  }
+
+  if (!isAuth) {
+    return <ManagerPassword onSubmit={handleAuth} />
+  }
+
+  if (showEditor) {
+    return (
+      <QuizEditor
+        quizzList={quizzList}
+        onBack={() => setShowEditor(false)}
+        onListUpdate={setQuizzList}
+      />
+    )
+  }
+
+  if (showMedia) {
+    return (
+      <div className="flex w-full flex-col gap-4">
+        <div className="flex gap-2">
+          <button
+            onClick={() => setShowMedia(false)}
+            className="rounded-md bg-gray-700 px-3 py-2 text-white"
+          >
+            Back
+          </button>
+        </div>
+        <MediaLibrary />
+      </div>
+    )
+  }
+
+  return (
+    <SelectQuizz
+      quizzList={quizzList}
+      onSelect={handleCreate}
+      onManage={() => setShowEditor(true)}
+      onMedia={() => setShowMedia(true)}
+    />
+  )
+}
+
+export default Manager

packages/web/src/app/(auth)/page.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import Room from "@rahoot/web/components/game/join/Room"
+import Username from "@rahoot/web/components/game/join/Username"
+import { useEvent, useSocket } from "@rahoot/web/contexts/socketProvider"
+import { usePlayerStore } from "@rahoot/web/stores/player"
+import { useEffect } from "react"
+import { useRouter } from "next/navigation"
+import toast from "react-hot-toast"
+
+const Home = () => {
+  const { isConnected, connect, socket } = useSocket()
+  const { player } = usePlayerStore()
+  const router = useRouter()
+
+  useEffect(() => {
+    if (!isConnected) {
+      connect()
+    }
+  }, [connect, isConnected])
+
+  useEffect(() => {
+    if (!isConnected) return
+    try {
+      const storedGameId = localStorage.getItem("last_game_id")
+      if (storedGameId) {
+        socket?.emit("player:reconnect", { gameId: storedGameId })
+        router.replace(`/game/${storedGameId}`)
+      }
+    } catch {
+      // ignore
+    }
+  }, [isConnected, socket, router])
+
+  useEvent("game:errorMessage", (message) => {
+    toast.error(message)
+  })
+
+  if (player) {
+    return <Username />
+  }
+
+  return <Room />
+}
+
+export default Home

packages/web/src/app/api/media/[file]/route.ts

@@ -0,0 +1,30 @@
+import { deleteMediaFile } from "@rahoot/web/server/media"
+import { NextRequest, NextResponse } from "next/server"
+
+export const runtime = "nodejs"
+export const dynamic = "force-dynamic"
+
+export async function DELETE(
+  _request: NextRequest,
+  context: { params: Promise<{ file: string }> },
+) {
+  try {
+    const params = await context.params
+    const fileParam = params.file
+
+    if (!fileParam) {
+      return NextResponse.json({ error: "Missing file parameter" }, { status: 400 })
+    }
+
+    const decoded = decodeURIComponent(fileParam)
+    await deleteMediaFile(decoded)
+
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    console.error("Failed to delete media", error)
+    const message = error instanceof Error ? error.message : "Failed to delete file"
+
+    const status = message.includes("not found") ? 404 : 400
+    return NextResponse.json({ error: message }, { status })
+  }
+}

packages/web/src/app/api/media/route.ts

@@ -0,0 +1,39 @@
+import { listStoredMedia, storeMediaFile } from "@rahoot/web/server/media"
+import { NextResponse } from "next/server"
+
+export const runtime = "nodejs"
+export const dynamic = "force-dynamic"
+
+export async function GET() {
+  try {
+    const media = await listStoredMedia()
+
+    return NextResponse.json({ media })
+  } catch (error) {
+    console.error("Failed to list media", error)
+    return NextResponse.json(
+      { error: "Unable to list uploaded media" },
+      { status: 500 },
+    )
+  }
+}
+
+export async function POST(request: Request) {
+  const formData = await request.formData()
+  const file = formData.get("file")
+
+  if (!(file instanceof File)) {
+    return NextResponse.json({ error: "No file received" }, { status: 400 })
+  }
+
+  try {
+    const media = await storeMediaFile(file)
+
+    return NextResponse.json({ media })
+  } catch (error) {
+    console.error("Failed to store media", error)
+    const message = error instanceof Error ? error.message : "Failed to upload file"
+
+    return NextResponse.json({ error: message }, { status: 400 })
+  }
+}

packages/web/src/app/game/[gameId]/page.tsx

@@ -0,0 +1,126 @@
+"use client"
+
+import { STATUS } from "@rahoot/common/types/game/status"
+import GameWrapper from "@rahoot/web/components/game/GameWrapper"
+import Answers from "@rahoot/web/components/game/states/Answers"
+import Prepared from "@rahoot/web/components/game/states/Prepared"
+import Question from "@rahoot/web/components/game/states/Question"
+import Result from "@rahoot/web/components/game/states/Result"
+import Start from "@rahoot/web/components/game/states/Start"
+import Wait from "@rahoot/web/components/game/states/Wait"
+import { useEvent, useSocket } from "@rahoot/web/contexts/socketProvider"
+import { usePlayerStore } from "@rahoot/web/stores/player"
+import { useQuestionStore } from "@rahoot/web/stores/question"
+import { GAME_STATE_COMPONENTS } from "@rahoot/web/utils/constants"
+import { useParams, useRouter } from "next/navigation"
+import { useEffect } from "react"
+import toast from "react-hot-toast"
+
+const Game = () => {
+  const router = useRouter()
+  const { socket } = useSocket()
+  const { gameId: gameIdParam }: { gameId?: string } = useParams()
+  const { status, player, setPlayer, setGameId, setStatus, reset } =
+    usePlayerStore()
+  const { setQuestionStates } = useQuestionStore()
+
+  useEvent("connect", () => {
+    if (gameIdParam) {
+      socket?.emit("player:reconnect", { gameId: gameIdParam })
+    }
+  })
+
+  useEvent(
+    "player:successReconnect",
+    ({ gameId, status, player, currentQuestion }) => {
+      setGameId(gameId)
+      setStatus(status.name, status.data)
+      setPlayer(player)
+      setQuestionStates(currentQuestion)
+      try {
+        localStorage.setItem("last_game_id", gameId)
+        if (player?.username) {
+          localStorage.setItem("last_username", player.username)
+        }
+      } catch {}
+    },
+  )
+
+  useEvent("game:status", ({ name, data }) => {
+    if (name in GAME_STATE_COMPONENTS) {
+      setStatus(name, data)
+    }
+  })
+
+  useEvent("game:reset", (message) => {
+    router.replace("/")
+    reset()
+    setQuestionStates(null)
+    try {
+      localStorage.removeItem("last_game_id")
+      localStorage.removeItem("last_username")
+      localStorage.removeItem("last_points")
+    } catch {}
+    toast.error(message)
+  })
+
+  // Hydrate username/points for footer immediately after refresh
+  useEffect(() => {
+    if (player?.username) return
+    try {
+      const name = localStorage.getItem("last_username")
+      const ptsRaw = localStorage.getItem("last_points")
+      const pts = ptsRaw ? Number(ptsRaw) : undefined
+      if (name || typeof pts === "number") {
+        setPlayer({
+          username: name || undefined,
+          points: pts,
+        })
+      }
+    } catch {
+      // ignore
+    }
+  }, [player?.username, setPlayer])
+
+  if (!gameIdParam) {
+    return null
+  }
+
+  let component = null
+
+  switch (status?.name) {
+    case STATUS.WAIT:
+      component = <Wait data={status.data} />
+
+      break
+
+    case STATUS.SHOW_START:
+      component = <Start data={status.data} />
+
+      break
+
+    case STATUS.SHOW_PREPARED:
+      component = <Prepared data={status.data} />
+
+      break
+
+    case STATUS.SHOW_QUESTION:
+      component = <Question data={status.data} />
+
+      break
+
+    case STATUS.SHOW_RESULT:
+      component = <Result data={status.data} />
+
+      break
+
+    case STATUS.SELECT_ANSWER:
+      component = <Answers data={status.data} />
+
+      break
+  }
+
+  return <GameWrapper statusName={status?.name}>{component}</GameWrapper>
+}
+
+export default Game

packages/web/src/app/game/layout.tsx

@@ -0,0 +1,17 @@
+"use client"
+
+import { useSocket } from "@rahoot/web/contexts/socketProvider"
+import { PropsWithChildren, useEffect } from "react"
+
+const GameLayout = ({ children }: PropsWithChildren) => {
+  const { isConnected, connect } = useSocket()
+  useEffect(() => {
+    if (!isConnected) {
+      connect()
+    }
+  }, [connect, isConnected])
+
+  return children
+}
+
+export default GameLayout

packages/web/src/app/game/manager/[gameId]/page.tsx

@@ -0,0 +1,185 @@
+"use client"
+
+import { STATUS } from "@rahoot/common/types/game/status"
+import GameWrapper from "@rahoot/web/components/game/GameWrapper"
+import Answers from "@rahoot/web/components/game/states/Answers"
+import Leaderboard from "@rahoot/web/components/game/states/Leaderboard"
+import Podium from "@rahoot/web/components/game/states/Podium"
+import Prepared from "@rahoot/web/components/game/states/Prepared"
+import Question from "@rahoot/web/components/game/states/Question"
+import Responses from "@rahoot/web/components/game/states/Responses"
+import Room from "@rahoot/web/components/game/states/Room"
+import Start from "@rahoot/web/components/game/states/Start"
+import { useEvent, useSocket } from "@rahoot/web/contexts/socketProvider"
+import { useManagerStore } from "@rahoot/web/stores/manager"
+import { useQuestionStore } from "@rahoot/web/stores/question"
+import { GAME_STATE_COMPONENTS_MANAGER } from "@rahoot/web/utils/constants"
+import { useParams, useRouter } from "next/navigation"
+import toast from "react-hot-toast"
+import { useState } from "react"
+
+const ManagerGame = () => {
+  const router = useRouter()
+  const { gameId: gameIdParam }: { gameId?: string } = useParams()
+  const { socket } = useSocket()
+  const { gameId, status, setGameId, setStatus, setPlayers, reset } =
+    useManagerStore()
+  const { setQuestionStates } = useQuestionStore()
+  const [cooldownPaused, setCooldownPaused] = useState(false)
+  const { players } = useManagerStore()
+
+  useEvent("game:status", ({ name, data }) => {
+    if (name in GAME_STATE_COMPONENTS_MANAGER) {
+      setStatus(name, data)
+    }
+  })
+
+  useEvent("connect", () => {
+    if (gameIdParam) {
+      socket?.emit("manager:reconnect", { gameId: gameIdParam })
+    }
+  })
+
+  useEvent(
+    "manager:successReconnect",
+    ({ gameId, status, players, currentQuestion }) => {
+      setGameId(gameId)
+      setStatus(status.name, status.data)
+      setPlayers(players)
+      setQuestionStates(currentQuestion)
+    },
+  )
+
+  useEvent("game:reset", (message) => {
+    router.replace("/manager")
+    reset()
+    setQuestionStates(null)
+    toast.error(message)
+  })
+
+  useEvent("manager:newPlayer", (player) => {
+    setPlayers((prev) => [...prev.filter((p) => p.id !== player.id), player])
+  })
+
+  useEvent("manager:removePlayer", (playerId) => {
+    setPlayers((prev) => prev.filter((p) => p.id !== playerId))
+  })
+
+  useEvent("manager:players", (players) => {
+    setPlayers(players)
+  })
+
+  useEvent("game:cooldownPause", (isPaused) => {
+    setCooldownPaused(isPaused)
+  })
+
+  const handleSkip = () => {
+    if (!gameId) {
+      return
+    }
+
+    switch (status?.name) {
+      case STATUS.SHOW_ROOM:
+        socket?.emit("manager:startGame", { gameId })
+
+        break
+
+      case STATUS.SHOW_QUESTION:
+        socket?.emit("manager:skipQuestionIntro", { gameId })
+
+        break
+
+      case STATUS.SELECT_ANSWER:
+        socket?.emit("manager:abortQuiz", { gameId })
+
+        break
+
+      case STATUS.SHOW_RESPONSES:
+        socket?.emit("manager:showLeaderboard", { gameId })
+
+        break
+
+      case STATUS.SHOW_LEADERBOARD:
+        socket?.emit("manager:nextQuestion", { gameId })
+
+        break
+    }
+  }
+
+  const handlePauseToggle = () => {
+    if (!gameId) return
+    if (cooldownPaused) {
+      socket?.emit("manager:resumeCooldown", { gameId })
+    } else {
+      socket?.emit("manager:pauseCooldown", { gameId })
+    }
+  }
+
+  const handleEndGame = () => {
+    if (!gameId) return
+    socket?.emit("manager:endGame", { gameId })
+  }
+
+  let component = null
+
+  switch (status?.name) {
+    case STATUS.SHOW_ROOM:
+      component = <Room data={status.data} />
+
+      break
+
+    case STATUS.SHOW_START:
+      component = <Start data={status.data} />
+
+      break
+
+    case STATUS.SHOW_PREPARED:
+      component = <Prepared data={status.data} />
+
+      break
+
+    case STATUS.SHOW_QUESTION:
+      component = <Question data={status.data} />
+
+      break
+
+    case STATUS.SELECT_ANSWER:
+      component = <Answers data={status.data} />
+
+      break
+
+    case STATUS.SHOW_RESPONSES:
+      component = <Responses data={status.data} />
+
+      break
+
+    case STATUS.SHOW_LEADERBOARD:
+      component = <Leaderboard data={status.data} />
+
+      break
+
+    case STATUS.FINISHED:
+      component = <Podium data={status.data} />
+
+      break
+  }
+
+  return (
+    <GameWrapper
+      statusName={status?.name}
+      onNext={handleSkip}
+      onPause={handlePauseToggle}
+      paused={cooldownPaused}
+      showPause={
+        status?.name === STATUS.SHOW_QUESTION || status?.name === STATUS.SELECT_ANSWER
+      }
+      onEnd={handleEndGame}
+      players={players}
+      manager
+    >
+      {component}
+    </GameWrapper>
+  )
+}
+
+export default ManagerGame

packages/web/src/app/globals.css

@@ -0,0 +1,199 @@
+@import "tailwindcss";
+
+@theme {
+  --color-primary: #ff9900;
+  --color-secondary: #1a140b;
+}
+
+button:not(:disabled),
+[role="button"]:not(:disabled) {
+  cursor: pointer;
+}
+
+.btn-shadow {
+  box-shadow: rgba(0, 0, 0, 0.25) 0px -4px inset;
+}
+
+.btn-shadow span {
+  display: block;
+  transform: translateY(-2px);
+}
+
+.btn-shadow:hover {
+  box-shadow: rgba(0, 0, 0, 0.25) 0px -2px inset;
+}
+
+.btn-shadow:hover span {
+  transform: translateY(0);
+}
+
+.btn-shadow:active {
+  transform: translateY(1px);
+  box-shadow: none;
+}
+
+.text-outline {
+  -webkit-text-stroke: 2px rgba(0, 0, 0, 0.25);
+}
+
+.shadow-inset {
+  box-shadow: rgba(0, 0, 0, 0.25) 0px -4px inset;
+}
+
+.spotlight {
+  position: absolute;
+  height: 200%;
+  width: 200%;
+  z-index: 100;
+  background-image: radial-gradient(
+    circle,
+    transparent 180px,
+    rgba(0, 0, 0, 0.6) 200px
+  );
+  opacity: 0;
+  left: -50%;
+  top: -50%;
+  transition: all 0.5s;
+  animation: spotlightAnim 2.5s ease-in;
+}
+
+@keyframes spotlightAnim {
+  0% {
+    left: -20%;
+    top: -20%;
+  }
+  30% {
+    opacity: 100;
+    top: -80%;
+    left: -80%;
+  }
+  60% {
+    top: -50%;
+    left: -20%;
+  }
+  80% {
+    top: -50%;
+    left: -50%;
+  }
+  98% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.anim-show {
+  animation: show 0.5s ease-out;
+}
+
+.anim-timer {
+  animation: timer 1s ease-out infinite;
+}
+
+.anim-quizz {
+  animation: quizz 0.8s linear;
+  transform: perspective(1200px) rotateY(-15deg) rotateX(15deg)
+    translateZ(100px);
+  box-shadow: 10px 10px 0 rgba(20, 24, 29, 1);
+}
+
+.anim-quizz .button {
+  box-shadow: rgba(0, 0, 0, 0.25) -4px -4px inset;
+  animation: quizzButton 0.8s ease-out;
+}
+
+.anim-balanced {
+  animation: balanced 0.8s linear infinite;
+}
+
+@keyframes balanced {
+  0% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(-10deg) translateY(-10px);
+  }
+  50% {
+    transform: rotate(0deg) translateY(0px);
+  }
+  75% {
+    transform: rotate(10deg) translateY(-10px);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+@keyframes show {
+  0% {
+    transform: scale(0);
+  }
+  30% {
+    transform: scale(0.9);
+  }
+  60% {
+    transform: scale(0.8);
+  }
+  80% {
+    transform: scale(1);
+  }
+}
+
+@keyframes progressBar {
+  from {
+    width: 0%;
+  }
+  to {
+    width: 100%;
+  }
+}
+
+@keyframes timer {
+  0% {
+    transform: scale(1);
+  }
+  30% {
+    transform: scale(1.4) rotate(-6deg);
+  }
+  60% {
+    transform: scale(0.8) rotate(6deg);
+  }
+  80% {
+    transform: scale(1);
+  }
+}
+
+@keyframes quizz {
+  0% {
+    transform: scale(0) perspective(1200px) rotateY(-60deg) rotateX(60deg)
+      translateZ(100px);
+  }
+  60% {
+    transform: scale(1) perspective(1200px) rotateY(-15deg) rotateX(15deg)
+      translateZ(100px);
+  }
+  80% {
+    transform: scale(0.8) perspective(1200px) rotateY(-15deg) rotateX(15deg)
+      translateZ(100px);
+  }
+  100% {
+    transform: scale(1) perspective(1200px) rotateY(-15deg) rotateX(15deg)
+      translateZ(100px);
+  }
+}
+
+@keyframes quizzButton {
+  0% {
+    transform: scale(0);
+  }
+  60% {
+    transform: scale(1);
+  }
+  80% {
+    transform: scale(0.8);
+  }
+  100% {
+    transform: scale(1);
+  }
+}

packages/web/src/app/layout.tsx

@@ -0,0 +1,29 @@
+import Toaster from "@rahoot/web/components/Toaster"
+import { SocketProvider } from "@rahoot/web/contexts/socketProvider"
+import type { Metadata } from "next"
+import { Montserrat } from "next/font/google"
+import { PropsWithChildren } from "react"
+import "./globals.css"
+
+const montserrat = Montserrat({
+  variable: "--font-montserrat",
+  subsets: ["latin"],
+})
+
+export const metadata: Metadata = {
+  title: "Rahoot !",
+  icons: "/icon.svg",
+}
+
+const RootLayout = ({ children }: PropsWithChildren) => (
+  <html lang="en" suppressHydrationWarning={true} data-lt-installed="true">
+    <body className={`${montserrat.variable} bg-secondary antialiased`}>
+      <SocketProvider>
+        <main className="text-base-[8px] flex flex-col">{children}</main>
+        <Toaster />
+      </SocketProvider>
+    </body>
+  </html>
+)
+
+export default RootLayout

packages/web/src/app/media/[file]/route.ts

@@ -0,0 +1,86 @@
+import Config from "@rahoot/socket/services/config"
+import { mimeForStoredFile } from "@rahoot/web/server/media"
+import fs from "fs"
+import { promises as fsp } from "fs"
+import { Readable } from "node:stream"
+import path from "path"
+import { NextRequest, NextResponse } from "next/server"
+
+export const runtime = "nodejs"
+export const dynamic = "force-dynamic"
+
+export async function GET(
+  _request: NextRequest,
+  context: { params: Promise<{ file: string }> },
+) {
+  const params = await context.params
+  const safeName = path.basename(params.file)
+
+  if (safeName !== params.file) {
+    return NextResponse.json({ error: "Invalid file name" }, { status: 400 })
+  }
+
+  const filePath = Config.getMediaPath(safeName)
+
+  if (!fs.existsSync(filePath)) {
+    return NextResponse.json({ error: "File not found" }, { status: 404 })
+  }
+
+  try {
+    const stat = await fsp.stat(filePath)
+    const fileSize = stat.size
+    const mime = mimeForStoredFile(safeName)
+    const range = _request.headers.get("range")
+
+    // Basic range support improves Safari/iOS playback
+    if (range) {
+      const bytesPrefix = "bytes="
+      if (!range.startsWith(bytesPrefix)) {
+        return new NextResponse(null, { status: 416 })
+      }
+
+      const [rawStart, rawEnd] = range.replace(bytesPrefix, "").split("-")
+      const start = Number(rawStart)
+      const end = rawEnd ? Number(rawEnd) : fileSize - 1
+
+      if (
+        Number.isNaN(start) ||
+        Number.isNaN(end) ||
+        start < 0 ||
+        end >= fileSize ||
+        start > end
+      ) {
+        return new NextResponse(null, { status: 416 })
+      }
+
+      const chunkSize = end - start + 1
+      const stream = fs.createReadStream(filePath, { start, end })
+
+      return new NextResponse(Readable.toWeb(stream) as any, {
+        status: 206,
+        headers: {
+          "Content-Range": `bytes ${start}-${end}/${fileSize}`,
+          "Accept-Ranges": "bytes",
+          "Content-Length": chunkSize.toString(),
+          "Content-Type": mime,
+          "Cache-Control": "public, max-age=31536000, immutable",
+        },
+      })
+    }
+
+    const stream = fs.createReadStream(filePath)
+
+    return new NextResponse(Readable.toWeb(stream) as any, {
+      status: 200,
+      headers: {
+        "Content-Type": mime,
+        "Content-Length": fileSize.toString(),
+        "Accept-Ranges": "bytes",
+        "Cache-Control": "public, max-age=31536000, immutable",
+      },
+    })
+  } catch (error) {
+    console.error("Failed to read media file", error)
+    return NextResponse.json({ error: "Unable to read file" }, { status: 500 })
+  }
+}

packages/web/src/app/socket/route.ts

@@ -0,0 +1,10 @@
+import env from "@rahoot/web/env"
+import { NextResponse } from "next/server"
+
+export function GET() {
+  return NextResponse.json({
+    url: env.SOCKET_URL,
+  })
+}
+
+export const dynamic = "force-dynamic"

packages/web/src/assets/loader.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin:auto;display:block;" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+    <circle cx="50" cy="50" r="34" stroke="#fff4e4" stroke-width="13" stroke-linecap="square" fill="none">
+    <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;180 50 50;720 50 50" keyTimes="0;0.5;1"></animateTransform>
+    <animate attributeName="stroke-dasharray" repeatCount="indefinite" dur="1s" values="21.362830044410593 192.26547039969535;106.81415022205297 106.81415022205297;21.362830044410593 192.26547039969535" keyTimes="0;0.5;1"></animate>
+    </circle>
+</svg>

packages/web/src/components/AnswerButton.tsx

@@ -0,0 +1,27 @@
+import clsx from "clsx"
+import { ButtonHTMLAttributes, ElementType, PropsWithChildren } from "react"
+
+type Props = PropsWithChildren &
+  ButtonHTMLAttributes<HTMLButtonElement> & {
+    icon: ElementType
+  }
+
+const AnswerButton = ({
+  className,
+  icon: Icon,
+  children,
+  ...otherProps
+}: Props) => (
+  <button
+    className={clsx(
+      "shadow-inset flex items-center gap-3 rounded px-4 py-6 text-left",
+      className,
+    )}
+    {...otherProps}
+  >
+    <Icon className="h-6 w-6" />
+    <span className="drop-shadow-md">{children}</span>
+  </button>
+)
+
+export default AnswerButton

packages/web/src/components/Button.tsx

@@ -0,0 +1,18 @@
+import clsx from "clsx"
+import { ButtonHTMLAttributes, PropsWithChildren } from "react"
+
+type Props = ButtonHTMLAttributes<HTMLButtonElement> & PropsWithChildren
+
+const Button = ({ children, className, ...otherProps }: Props) => (
+  <button
+    className={clsx(
+      "btn-shadow bg-primary rounded-md p-2 text-lg font-semibold text-white",
+      className,
+    )}
+    {...otherProps}
+  >
+    <span>{children}</span>
+  </button>
+)
+
+export default Button

packages/web/src/components/Form.tsx

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from "react"
+
+const Form = ({ children }: PropsWithChildren) => (
+  <div className="z-10 flex w-full max-w-80 flex-col gap-4 rounded-md bg-white p-4 shadow-sm">
+    {children}
+  </div>
+)
+
+export default Form

packages/web/src/components/Input.tsx

@@ -0,0 +1,17 @@
+import clsx from "clsx"
+import React from "react"
+
+type Props = React.InputHTMLAttributes<HTMLInputElement>
+
+const Input = ({ className, type = "text", ...otherProps }: Props) => (
+  <input
+    type={type}
+    className={clsx(
+      "rounded-sm p-2 text-lg font-semibold outline-2 outline-gray-300",
+      className,
+    )}
+    {...otherProps}
+  />
+)
+
+export default Input

packages/web/src/components/Loader.tsx

@@ -0,0 +1,12 @@
+import loader from "@rahoot/web/assets/loader.svg"
+import Image from "next/image"
+
+type Props = {
+  className?: string
+}
+
+const Loader = ({ className }: Props) => (
+  <Image className={className} alt="loader" src={loader} />
+)
+
+export default Loader

packages/web/src/components/Toaster.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import { ToastBar, Toaster as ToasterRaw } from "react-hot-toast"
+
+const Toaster = () => (
+  <ToasterRaw>
+    {(t) => (
+      <ToastBar
+        toast={t}
+        style={{
+          ...t.style,
+          boxShadow: "rgba(0, 0, 0, 0.25) 0px -4px inset",
+          fontWeight: 700,
+        }}
+      >
+        {({ icon, message }) => (
+          <>
+            {icon}
+            {message}
+          </>
+        )}
+      </ToastBar>
+    )}
+  </ToasterRaw>
+)
+
+export default Toaster

packages/web/src/components/game/GameWrapper.tsx

@@ -0,0 +1,151 @@
+"use client"
+
+import { Status } from "@rahoot/common/types/game/status"
+import background from "@rahoot/web/assets/background.webp"
+import Button from "@rahoot/web/components/Button"
+import Loader from "@rahoot/web/components/Loader"
+import { useEvent, useSocket } from "@rahoot/web/contexts/socketProvider"
+import { usePlayerStore } from "@rahoot/web/stores/player"
+import { useQuestionStore } from "@rahoot/web/stores/question"
+import { MANAGER_SKIP_BTN } from "@rahoot/web/utils/constants"
+import clsx from "clsx"
+import Image from "next/image"
+import { PropsWithChildren, useEffect, useState } from "react"
+
+type Props = PropsWithChildren & {
+  statusName: Status | undefined
+  onNext?: () => void
+  onPause?: () => void
+  paused?: boolean
+  showPause?: boolean
+  onEnd?: () => void
+  players?: { id: string; username: string; connected: boolean }[]
+  manager?: boolean
+}
+
+const GameWrapper = ({
+  children,
+  statusName,
+  onNext,
+  onPause,
+  paused,
+  showPause,
+  onEnd,
+  players,
+  manager,
+}: Props) => {
+  const { isConnected } = useSocket()
+  const { player } = usePlayerStore()
+  const { questionStates, setQuestionStates } = useQuestionStore()
+  const [isDisabled, setIsDisabled] = useState(false)
+  const next = statusName ? MANAGER_SKIP_BTN[statusName] : null
+
+  useEvent("game:updateQuestion", ({ current, total }) => {
+    setQuestionStates({
+      current,
+      total,
+    })
+  })
+
+  useEffect(() => {
+    setIsDisabled(false)
+  }, [statusName])
+
+  const handleNext = () => {
+    setIsDisabled(true)
+    onNext?.()
+  }
+
+  return (
+    <section className="relative flex min-h-screen w-full flex-col justify-between">
+      <div className="fixed top-0 left-0 -z-10 h-full w-full bg-orange-600 opacity-70">
+        <Image
+          className="pointer-events-none h-full w-full object-cover opacity-60"
+          src={background}
+          alt="background"
+        />
+      </div>
+
+      {!isConnected && !statusName ? (
+        <div className="flex h-full w-full flex-1 flex-col items-center justify-center">
+          <Loader />
+          <h1 className="text-4xl font-bold text-white">Connecting...</h1>
+        </div>
+      ) : (
+        <>
+          <div className="flex w-full justify-between p-4">
+            {questionStates && (
+              <div className="shadow-inset flex items-center rounded-md bg-white p-2 px-4 text-lg font-bold text-black">
+                {`${questionStates.current} / ${questionStates.total}`}
+              </div>
+            )}
+
+            {manager && next && (
+              <Button
+                className={clsx("self-end bg-white px-4 text-black!", {
+                  "pointer-events-none": isDisabled,
+                })}
+                onClick={handleNext}
+              >
+                {next}
+              </Button>
+            )}
+
+            {manager && showPause && (
+              <Button
+                className={clsx("self-end bg-white px-4 text-black!", {
+                  "pointer-events-none": isDisabled,
+                })}
+                onClick={onPause}
+              >
+                {paused ? "Resume" : "Pause"}
+              </Button>
+            )}
+
+            {manager && onEnd && (
+              <Button className="self-end bg-red-600 px-4" onClick={onEnd}>
+                End game
+              </Button>
+            )}
+          </div>
+
+          {manager && players && players.length > 0 && (
+            <div className="mx-4 mb-2 rounded-md bg-white/90 p-3 text-sm shadow">
+              <div className="mb-1 text-xs font-semibold uppercase text-gray-600">
+                Players ({players.length})
+              </div>
+              <div className="flex flex-wrap gap-2">
+                {players.map((p) => (
+                  <span
+                    key={p.id}
+                    className={clsx(
+                      "rounded border px-2 py-1 font-semibold",
+                      p.connected
+                        ? "border-green-500 text-green-700"
+                        : "border-gray-300 text-gray-500",
+                    )}
+                  >
+                    {p.username || p.id} {p.connected ? "" : "(disc.)"}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {children}
+
+          {!manager && (
+            <div className="z-50 flex items-center justify-between bg-white px-4 py-2 text-lg font-bold text-white">
+              <p className="text-gray-800">{player?.username}</p>
+              <div className="rounded-sm bg-gray-800 px-3 py-1 text-lg">
+                {player?.points}
+              </div>
+            </div>
+          )}
+        </>
+      )}
+    </section>
+  )
+}
+
+export default GameWrapper

packages/web/src/components/game/QuestionMedia.tsx

@@ -0,0 +1,87 @@
+"use client"
+
+import type { QuestionMedia as QuestionMediaType } from "@rahoot/common/types/game"
+import clsx from "clsx"
+import { useState } from "react"
+
+type Props = {
+  media?: QuestionMediaType
+  alt: string
+  onPlayChange?: (_playing: boolean) => void
+}
+
+const QuestionMedia = ({ media, alt, onPlayChange }: Props) => {
+  const [zoomed, setZoomed] = useState(false)
+
+  if (!media) {
+    return null
+  }
+
+  const containerClass = "mx-auto flex w-full max-w-5xl justify-center"
+
+  switch (media.type) {
+    case "image":
+      return (
+        <>
+          <div className={containerClass}>
+          <img
+            alt={alt}
+            src={media.url}
+              className="m-4 h-full max-h-[400px] min-h-[200px] w-auto max-w-full cursor-zoom-in rounded-md object-contain shadow-lg"
+              onClick={() => setZoomed(true)}
+          />
+        </div>
+          {zoomed && (
+            <div
+              className="fixed inset-0 z-50 flex items-center justify-center bg-black/70"
+              onClick={() => setZoomed(false)}
+            >
+              <img
+                src={media.url}
+                alt={alt}
+                className="max-h-[90vh] max-w-[90vw] rounded-md shadow-2xl"
+              />
+            </div>
+          )}
+        </>
+      )
+
+    case "audio":
+      return (
+        <div className={clsx(containerClass, "px-4")}>
+          <audio
+            controls
+            crossOrigin="anonymous"
+            src={media.url}
+            className="mt-4 w-full rounded-md bg-black/40 p-2 shadow-lg"
+            preload="none"
+            onPlay={() => onPlayChange?.(true)}
+            onPause={() => onPlayChange?.(false)}
+            onEnded={() => onPlayChange?.(false)}
+          />
+        </div>
+      )
+
+    case "video":
+      return (
+        <div className={containerClass}>
+          <video
+            controls
+            crossOrigin="anonymous"
+            playsInline
+            src={media.url}
+            className="m-4 w-full max-w-5xl rounded-md shadow-lg"
+            preload="metadata"
+            onPlay={() => onPlayChange?.(true)}
+            onPause={() => onPlayChange?.(false)}
+            onEnded={() => onPlayChange?.(false)}
+          />
+        </div>
+      )
+
+    default:
+      return null
+  }
+}
+
+export default QuestionMedia

packages/web/src/components/game/create/ManagerPassword.tsx

@@ -0,0 +1,42 @@
+import Button from "@rahoot/web/components/Button"
+import Form from "@rahoot/web/components/Form"
+import Input from "@rahoot/web/components/Input"
+import { useEvent } from "@rahoot/web/contexts/socketProvider"
+import { KeyboardEvent, useState } from "react"
+import toast from "react-hot-toast"
+
+type Props = {
+  onSubmit: (_password: string) => void
+}
+
+const ManagerPassword = ({ onSubmit }: Props) => {
+  const [password, setPassword] = useState("")
+
+  const handleSubmit = () => {
+    onSubmit(password)
+  }
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === "Enter") {
+      handleSubmit()
+    }
+  }
+
+  useEvent("manager:errorMessage", (message) => {
+    toast.error(message)
+  })
+
+  return (
+    <Form>
+      <Input
+        type="password"
+        onChange={(e) => setPassword(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder="Manager password"
+      />
+      <Button onClick={handleSubmit}>Submit</Button>
+    </Form>
+  )
+}
+
+export default ManagerPassword

packages/web/src/components/game/create/MediaLibrary.tsx

@@ -0,0 +1,147 @@
+"use client"
+
+import Button from "@rahoot/web/components/Button"
+import { useEffect, useState } from "react"
+
+type MediaItem = {
+  fileName: string
+  url: string
+  size: number
+  mime: string
+  type: string
+  usedBy: {
+    quizzId: string
+    subject: string
+    questionIndex: number
+    question: string
+  }[]
+}
+
+const formatBytes = (bytes: number) => {
+  if (!bytes) return "0 B"
+  const units = ["B", "KB", "MB", "GB"]
+  const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1)
+  const value = bytes / 1024 ** i
+  return `${value.toFixed(value >= 10 || value % 1 === 0 ? 0 : 1)} ${units[i]}`
+}
+
+const MediaLibrary = () => {
+  const [items, setItems] = useState<MediaItem[]>([])
+  const [loading, setLoading] = useState(false)
+  const [deleting, setDeleting] = useState<Record<string, boolean>>({})
+
+  const load = async () => {
+    setLoading(true)
+    try {
+      const res = await fetch("/api/media", { cache: "no-store" })
+      const data = await res.json()
+      if (!res.ok) throw new Error(data.error || "Failed to load media")
+      setItems(data.media || [])
+    } catch (error) {
+      console.error(error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    load()
+  }, [])
+
+  const handleDelete = async (fileName: string) => {
+    setDeleting((prev) => ({ ...prev, [fileName]: true }))
+    try {
+      const res = await fetch(`/api/media/${encodeURIComponent(fileName)}`, {
+        method: "DELETE",
+      })
+      const data = await res.json()
+      if (!res.ok) throw new Error(data.error || "Failed to delete file")
+      load()
+    } catch (error) {
+      console.error(error)
+      alert(error instanceof Error ? error.message : "Failed to delete")
+    } finally {
+      setDeleting((prev) => ({ ...prev, [fileName]: false }))
+    }
+  }
+
+  return (
+    <div className="space-y-3 rounded-md border border-gray-200 bg-white p-4 shadow-sm">
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-xl font-semibold text-gray-800">Media library</h2>
+          <p className="text-sm text-gray-500">
+            Uploaded files with their usage. Delete is enabled only when unused.
+          </p>
+        </div>
+        <Button className="bg-gray-700" onClick={load} disabled={loading}>
+          {loading ? "Refreshing..." : "Refresh"}
+        </Button>
+      </div>
+
+      <div className="overflow-x-auto">
+        <table className="min-w-full text-left text-sm">
+          <thead>
+            <tr className="border-b border-gray-200 text-xs uppercase text-gray-500">
+              <th className="p-2">File</th>
+              <th className="p-2">Type</th>
+              <th className="p-2">Size</th>
+              <th className="p-2">Used by</th>
+              <th className="p-2">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {items.map((item) => (
+              <tr key={item.fileName} className="border-b border-gray-100">
+                <td className="p-2 font-semibold text-gray-800">
+                  <a
+                    href={item.url}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="text-blue-600 underline"
+                  >
+                    {item.fileName}
+                  </a>
+                </td>
+                <td className="p-2">{item.type}</td>
+                <td className="p-2 text-gray-600">{formatBytes(item.size)}</td>
+                <td className="p-2">
+                  {item.usedBy.length === 0 ? (
+                    <span className="text-green-700">Unused</span>
+                  ) : (
+                    <div className="space-y-1">
+                      {item.usedBy.map((u, idx) => (
+                        <div key={idx} className="text-gray-700">
+                          <span className="font-semibold">{u.subject || u.quizzId}</span>
+                          {` – Q${u.questionIndex + 1}: ${u.question}`}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </td>
+                <td className="p-2">
+                  <Button
+                    className="bg-red-500 px-3 py-1 text-sm"
+                    onClick={() => handleDelete(item.fileName)}
+                    disabled={item.usedBy.length > 0 || deleting[item.fileName]}
+                  >
+                    {deleting[item.fileName] ? "Deleting..." : "Delete"}
+                  </Button>
+                </td>
+              </tr>
+            ))}
+            {items.length === 0 && !loading && (
+              <tr>
+                <td className="p-3 text-sm text-gray-500" colSpan={5}>
+                  No media uploaded yet.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
+
+export default MediaLibrary

packages/web/src/components/game/create/QuizEditor.tsx

@@ -0,0 +1,791 @@
+"use client"
+
+import type { QuestionMedia, QuizzWithId } from "@rahoot/common/types/game"
+import Button from "@rahoot/web/components/Button"
+import Input from "@rahoot/web/components/Input"
+import { useEvent, useSocket } from "@rahoot/web/contexts/socketProvider"
+import clsx from "clsx"
+import { useCallback, useEffect, useMemo, useState } from "react"
+import toast from "react-hot-toast"
+
+type Props = {
+  quizzList: QuizzWithId[]
+  onBack: () => void
+  onListUpdate: (_quizz: QuizzWithId[]) => void
+}
+
+type EditableQuestion = QuizzWithId["questions"][number]
+
+type MediaLibraryItem = {
+  fileName: string
+  url: string
+  size: number
+  mime: string
+  type: QuestionMedia["type"]
+  usedBy: {
+    quizzId: string
+    subject: string
+    questionIndex: number
+    question: string
+  }[]
+}
+
+const blankQuestion = (): EditableQuestion => ({
+  question: "",
+  answers: ["", ""],
+  solution: 0,
+  cooldown: 5,
+  time: 20,
+})
+
+const mediaTypes: QuestionMedia["type"][] = ["image", "audio", "video"]
+
+const acceptByType: Record<QuestionMedia["type"], string> = {
+  image: "image/*",
+  audio: "audio/*",
+  video: "video/*",
+}
+
+const formatBytes = (bytes: number) => {
+  if (!bytes) return "0 B"
+  const units = ["B", "KB", "MB", "GB"]
+  const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1)
+  const value = bytes / 1024 ** i
+
+  return `${value.toFixed(value >= 10 || value % 1 === 0 ? 0 : 1)} ${units[i]}`
+}
+
+const QuizEditor = ({ quizzList, onBack, onListUpdate }: Props) => {
+  const { socket } = useSocket()
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [draft, setDraft] = useState<QuizzWithId | null>(null)
+  const [saving, setSaving] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [mediaLibrary, setMediaLibrary] = useState<MediaLibraryItem[]>([])
+  const [uploading, setUploading] = useState<Record<number, boolean>>({})
+  const [deleting, setDeleting] = useState<Record<number, boolean>>({})
+  const [refreshingLibrary, setRefreshingLibrary] = useState(false)
+  const [probing, setProbing] = useState<Record<number, boolean>>({})
+
+  useEvent("manager:quizzLoaded", (quizz) => {
+    setDraft(quizz)
+    setLoading(false)
+  })
+
+  useEvent("manager:quizzSaved", (quizz) => {
+    toast.success("Quiz saved")
+    setDraft(quizz)
+    setSelectedId(quizz.id)
+    setSaving(false)
+    refreshMediaLibrary()
+  })
+
+  useEvent("manager:quizzDeleted", (id) => {
+    toast.success("Quiz deleted")
+    if (selectedId === id) {
+      setSelectedId(null)
+      setDraft(null)
+    }
+    refreshMediaLibrary()
+  })
+
+  useEvent("manager:quizzList", (list) => {
+    onListUpdate(list)
+  })
+
+  useEvent("manager:errorMessage", (message) => {
+    toast.error(message)
+    setSaving(false)
+    setLoading(false)
+  })
+
+  const refreshMediaLibrary = useCallback(async () => {
+    setRefreshingLibrary(true)
+    try {
+      const res = await fetch("/api/media", { cache: "no-store" })
+      const data = await res.json()
+
+      if (!res.ok) {
+        throw new Error(data.error || "Failed to load media library")
+      }
+
+      setMediaLibrary(data.media || [])
+    } catch (error) {
+      console.error("Failed to fetch media library", error)
+      toast.error(
+        error instanceof Error ? error.message : "Failed to load media library",
+      )
+    } finally {
+      setRefreshingLibrary(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    refreshMediaLibrary()
+  }, [refreshMediaLibrary])
+
+  const handleLoad = (id: string) => {
+    setSelectedId(id)
+    setLoading(true)
+    socket?.emit("manager:getQuizz", id)
+  }
+
+  const handleNew = () => {
+    setSelectedId(null)
+    setDraft({
+      id: "",
+      subject: "",
+      questions: [blankQuestion()],
+    })
+  }
+
+  const handleDeleteQuizz = () => {
+    if (!selectedId) return
+    if (!window.confirm("Delete this quiz?")) return
+    setSaving(true)
+    socket?.emit("manager:deleteQuizz", { id: selectedId })
+  }
+
+  const updateQuestion = (
+    index: number,
+    patch: Partial<EditableQuestion>,
+  ) => {
+    if (!draft) return
+    const nextQuestions = [...draft.questions]
+    nextQuestions[index] = { ...nextQuestions[index], ...patch }
+    setDraft({ ...draft, questions: nextQuestions })
+  }
+
+  const updateAnswer = (qIndex: number, aIndex: number, value: string) => {
+    if (!draft) return
+    const nextQuestions = [...draft.questions]
+    const nextAnswers = [...nextQuestions[qIndex].answers]
+    nextAnswers[aIndex] = value
+    nextQuestions[qIndex] = { ...nextQuestions[qIndex], answers: nextAnswers }
+    setDraft({ ...draft, questions: nextQuestions })
+  }
+
+  const addAnswer = (qIndex: number) => {
+    if (!draft) return
+    const nextQuestions = [...draft.questions]
+    if (nextQuestions[qIndex].answers.length >= 4) {
+      return
+    }
+    nextQuestions[qIndex] = {
+      ...nextQuestions[qIndex],
+      answers: [...nextQuestions[qIndex].answers, ""],
+    }
+    setDraft({ ...draft, questions: nextQuestions })
+  }
+
+  const removeAnswer = (qIndex: number, aIndex: number) => {
+    if (!draft) return
+    const nextQuestions = [...draft.questions]
+    const currentAnswers = [...nextQuestions[qIndex].answers]
+    if (currentAnswers.length <= 2) {
+      return
+    }
+    currentAnswers.splice(aIndex, 1)
+    let nextSolution = nextQuestions[qIndex].solution
+    if (nextSolution >= currentAnswers.length) {
+      nextSolution = currentAnswers.length - 1
+    }
+    nextQuestions[qIndex] = {
+      ...nextQuestions[qIndex],
+      answers: currentAnswers,
+      solution: nextSolution,
+    }
+    setDraft({ ...draft, questions: nextQuestions })
+  }
+
+  const addQuestion = () => {
+    if (!draft) return
+    setDraft({ ...draft, questions: [...draft.questions, blankQuestion()] })
+  }
+
+  const removeQuestion = (index: number) => {
+    if (!draft || draft.questions.length <= 1) return
+    const nextQuestions = draft.questions.filter((_, i) => i !== index)
+    setDraft({ ...draft, questions: nextQuestions })
+  }
+
+  const setQuestionMedia = (qIndex: number, media?: QuestionMedia) => {
+    if (!draft) return
+    updateQuestion(qIndex, {
+      media,
+      image: media?.type === "image" ? media.url : undefined,
+    })
+  }
+
+  const getMediaFileName = (media?: QuestionMedia | null) => {
+    if (!media) return null
+    if (media.fileName) return media.fileName
+    if (media.url?.startsWith("/media/")) {
+      return decodeURIComponent(media.url.split("/").pop() || "")
+    }
+    return null
+  }
+
+  const getLibraryEntry = (media?: QuestionMedia | null) => {
+    const fileName = getMediaFileName(media)
+    if (!fileName) return null
+
+    return mediaLibrary.find((item) => item.fileName === fileName) || null
+  }
+
+  const handleMediaType = (qIndex: number, type: QuestionMedia["type"] | "") => {
+    if (!draft) return
+    const question = draft.questions[qIndex]
+
+    if (type === "") {
+      setQuestionMedia(qIndex, undefined)
+      return
+    }
+
+    const nextMedia =
+      question.media?.type === type
+        ? { ...question.media, type }
+        : { type, url: "" }
+
+    setQuestionMedia(qIndex, nextMedia)
+  }
+
+  const handleMediaUrlChange = (qIndex: number, url: string) => {
+    if (!draft) return
+    const question = draft.questions[qIndex]
+
+    if (!question.media?.type) {
+      toast.error("Select a media type before setting a URL")
+      return
+    }
+
+    if (!url) {
+      setQuestionMedia(qIndex, undefined)
+      return
+    }
+
+    const nextMedia: QuestionMedia = {
+      type: question.media.type,
+      url,
+    }
+
+    if (question.media.fileName && url.includes(question.media.fileName)) {
+      nextMedia.fileName = question.media.fileName
+    }
+
+    setQuestionMedia(qIndex, nextMedia)
+  }
+
+  const clearQuestionMedia = (qIndex: number) => {
+    setQuestionMedia(qIndex, undefined)
+  }
+
+  const probeMediaDuration = async (url: string, type: QuestionMedia["type"]) => {
+    if (!url || (type !== "audio" && type !== "video")) {
+      return null
+    }
+
+    try {
+      const el = document.createElement(type)
+      el.crossOrigin = "anonymous"
+      el.preload = "metadata"
+      el.src = url
+      el.load()
+
+      await new Promise<void>((resolve, reject) => {
+        const cleanup = () => {
+          el.onloadedmetadata = null
+          el.onloadeddata = null
+          el.oncanplaythrough = null
+          el.onerror = null
+        }
+        const done = () => {
+          cleanup()
+          resolve()
+        }
+        el.onloadedmetadata = done
+        el.onloadeddata = done
+        el.oncanplaythrough = done
+        el.onerror = () => {
+          cleanup()
+          reject(new Error("Failed to load media metadata"))
+        }
+        // safety timeout
+        setTimeout(() => {
+          cleanup()
+          reject(new Error("Timed out loading media metadata"))
+        }, 5000)
+      })
+
+      const duration = el.duration
+      return Number.isFinite(duration) && duration > 0 ? duration : null
+    } catch (error) {
+      console.warn("Failed to probe media duration", error)
+      return null
+    }
+  }
+
+  const adjustTimingWithMedia = async (
+    qIndex: number,
+    media: QuestionMedia | undefined,
+  ) => {
+    if (!draft || !media?.url || !media.type || media.type === "image") {
+      return
+    }
+
+    setProbing((prev) => ({ ...prev, [qIndex]: true }))
+
+    try {
+      const duration = await probeMediaDuration(media.url, media.type)
+      if (!duration || !draft) {
+        return
+      }
+
+      const rounded = Math.ceil(duration)
+      const buffer = 3
+      const minCooldown = rounded
+      const minAnswer = rounded + buffer
+      const question = draft.questions[qIndex]
+
+      const nextCooldown = Math.max(question.cooldown, minCooldown)
+      const nextTime = Math.max(question.time, minAnswer)
+
+      if (nextCooldown !== question.cooldown || nextTime !== question.time) {
+        updateQuestion(qIndex, {
+          cooldown: nextCooldown,
+          time: nextTime,
+        })
+        toast.success(
+          `Adjusted timing to media length (~${rounded}s, answers ${nextTime}s)`,
+          { id: `timing-${qIndex}` },
+        )
+      }
+    } finally {
+      setProbing((prev) => ({ ...prev, [qIndex]: false }))
+    }
+  }
+
+  const handleMediaUpload = async (qIndex: number, file: File) => {
+    if (!draft) return
+    const question = draft.questions[qIndex]
+
+    if (!question.media?.type) {
+      toast.error("Select a media type before uploading")
+      return
+    }
+
+    setUploading((prev) => ({ ...prev, [qIndex]: true }))
+
+    try {
+      const formData = new FormData()
+      formData.append("file", file)
+
+      const res = await fetch("/api/media", {
+        method: "POST",
+        body: formData,
+      })
+      const data = await res.json()
+
+      if (!res.ok) {
+        throw new Error(data.error || "Failed to upload media")
+      }
+
+      const uploaded = data.media as MediaLibraryItem
+      const type = uploaded.type
+
+      setQuestionMedia(qIndex, {
+        type,
+        url: uploaded.url,
+        fileName: uploaded.fileName,
+      })
+      toast.success("Media uploaded")
+      refreshMediaLibrary()
+    } catch (error) {
+      console.error("Upload failed", error)
+      toast.error(error instanceof Error ? error.message : "Upload failed")
+    } finally {
+      setUploading((prev) => ({ ...prev, [qIndex]: false }))
+    }
+  }
+
+  const handleDeleteMediaFile = async (qIndex: number) => {
+    if (!draft) return
+    const question = draft.questions[qIndex]
+    const fileName = getMediaFileName(question.media)
+
+    if (!fileName) {
+      toast.error("No stored file to delete")
+      return
+    }
+
+    setDeleting((prev) => ({ ...prev, [qIndex]: true }))
+
+    try {
+      const res = await fetch(`/api/media/${encodeURIComponent(fileName)}`, {
+        method: "DELETE",
+      })
+      const data = await res.json()
+
+      if (!res.ok) {
+        throw new Error(data.error || "Failed to delete file")
+      }
+
+      toast.success("File deleted")
+      clearQuestionMedia(qIndex)
+      refreshMediaLibrary()
+    } catch (error) {
+      console.error("Failed to delete file", error)
+      toast.error(error instanceof Error ? error.message : "Failed to delete file")
+    } finally {
+      setDeleting((prev) => ({ ...prev, [qIndex]: false }))
+    }
+  }
+
+  const handleSave = () => {
+    if (!draft) return
+    setSaving(true)
+    socket?.emit("manager:saveQuizz", {
+      id: draft.id || null,
+      quizz: {
+        subject: draft.subject,
+        questions: draft.questions,
+      },
+    })
+  }
+
+  const selectedLabel = useMemo(() => {
+    if (!selectedId) return "New quiz"
+    const found = quizzList.find((q) => q.id === selectedId)
+    return found ? `Editing: ${found.subject}` : `Editing: ${selectedId}`
+  }, [quizzList, selectedId])
+
+  return (
+    <div className="flex w-full max-w-6xl flex-col gap-4 rounded-md bg-white p-4 shadow-sm">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Button onClick={onBack} className="bg-gray-700">
+              Back
+            </Button>
+            <Button onClick={handleNew} className="bg-blue-600">
+              New quiz
+            </Button>
+            {selectedId && (
+              <Button className="bg-red-600" onClick={handleDeleteQuizz} disabled={saving}>
+                Delete quiz
+              </Button>
+            )}
+          </div>
+
+        <Button onClick={handleSave} disabled={saving || loading}>
+          {saving ? "Saving..." : "Save quiz"}
+        </Button>
+      </div>
+
+      <div className="flex flex-col gap-3 rounded-md border border-gray-200 p-3">
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="text-sm font-semibold text-gray-600">
+            Existing quizzes:
+          </span>
+          {quizzList.map((quizz) => (
+            <button
+              key={quizz.id}
+              onClick={() => handleLoad(quizz.id)}
+              className={clsx(
+                "rounded-sm border px-3 py-1 text-sm font-semibold",
+                selectedId === quizz.id
+                  ? "border-primary text-primary"
+                  : "border-gray-300",
+              )}
+            >
+              {quizz.subject}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {!draft && (
+        <div className="rounded-md border border-dashed border-gray-300 p-6 text-center text-gray-600">
+          {loading ? "Loading quiz..." : "Select a quiz to edit or create a new one."}
+        </div>
+      )}
+
+      {draft && (
+        <div className="space-y-4">
+          <div className="rounded-md border border-gray-200 p-4">
+            <div className="mb-2 text-sm font-semibold text-gray-700">
+              {selectedLabel}
+            </div>
+            <label className="flex flex-col gap-1">
+              <span className="text-sm font-semibold text-gray-600">Subject</span>
+              <Input
+                value={draft.subject}
+                onChange={(e) => setDraft({ ...draft, subject: e.target.value })}
+                placeholder="Quiz title"
+              />
+            </label>
+          </div>
+
+          {draft.questions.map((question, qIndex) => {
+            const libraryEntry = getLibraryEntry(question.media)
+            const mediaFileName = getMediaFileName(question.media)
+            const isUploading = uploading[qIndex]
+            const isDeleting = deleting[qIndex]
+
+            return (
+              <div
+                key={qIndex}
+                className="rounded-md border border-gray-200 p-4 shadow-sm"
+              >
+                <div className="mb-3 flex items-center justify-between">
+                  <div className="text-lg font-semibold text-gray-800">
+                    Question {qIndex + 1}
+                  </div>
+                  <div className="flex gap-2">
+                    <Button
+                      className="bg-red-500"
+                      onClick={() => removeQuestion(qIndex)}
+                      disabled={draft.questions.length <= 1}
+                    >
+                      Remove
+                    </Button>
+                  </div>
+                </div>
+
+                <div className="grid gap-3 md:grid-cols-2">
+                  <label className="flex flex-col gap-1">
+                    <span className="text-sm font-semibold text-gray-600">Prompt</span>
+                    <Input
+                      value={question.question}
+                      onChange={(e) =>
+                        updateQuestion(qIndex, { question: e.target.value })
+                      }
+                      placeholder="Enter the question"
+                    />
+                  </label>
+
+                  <div className="grid grid-cols-2 gap-3">
+                    <label className="flex flex-col gap-1">
+                      <span className="text-sm font-semibold text-gray-600">
+                        Cooldown (s)
+                      </span>
+                      <Input
+                        type="number"
+                        value={question.cooldown}
+                        onChange={(e) =>
+                          updateQuestion(qIndex, {
+                            cooldown: Number(e.target.value || 0),
+                          })
+                        }
+                        min={0}
+                      />
+                    </label>
+                    <label className="flex flex-col gap-1">
+                      <span className="text-sm font-semibold text-gray-600">
+                        Answer time (s)
+                      </span>
+                      <Input
+                        type="number"
+                        value={question.time}
+                        onChange={(e) =>
+                          updateQuestion(qIndex, { time: Number(e.target.value || 0) })
+                        }
+                        min={5}
+                      />
+                    </label>
+                  </div>
+                </div>
+
+                <div className="mt-3 grid gap-3 md:grid-cols-2">
+                  <label className="flex flex-col gap-1">
+                    <span className="text-sm font-semibold text-gray-600">
+                      Media type
+                    </span>
+                    <select
+                      className="rounded-sm border border-gray-300 p-2 font-semibold"
+                      value={question.media?.type || ""}
+                      onChange={(e) =>
+                        handleMediaType(qIndex, e.target.value as QuestionMedia["type"] | "")
+                      }
+                    >
+                      <option value="">None</option>
+                      {mediaTypes.map((type) => (
+                        <option key={type} value={type}>
+                          {type}
+                        </option>
+                      ))}
+                    </select>
+                  </label>
+
+                <div className="flex flex-col gap-2 rounded-md border border-gray-200 p-3">
+                  <div className="flex items-center justify-between text-sm font-semibold text-gray-600">
+                    <span>Media upload</span>
+                    <span className="text-xs text-gray-500">
+                      {isUploading
+                        ? "Uploading..."
+                        : probing[qIndex]
+                          ? "Probing..."
+                        : refreshingLibrary
+                          ? "Refreshing..."
+                          : mediaFileName
+                            ? "Stored"
+                            : "Not saved"}
+                  </span>
+                    </div>
+                    <input
+                      type="file"
+                      accept={
+                        question.media?.type ? acceptByType[question.media.type] : undefined
+                      }
+                      disabled={!question.media?.type || isUploading}
+                      className="rounded-sm border border-dashed border-gray-300 p-2 text-sm"
+                      onChange={(e) => {
+                        const file = e.target.files?.[0]
+                        if (file) {
+                          handleMediaUpload(qIndex, file)
+                          e.target.value = ""
+                        }
+                      }}
+                    />
+                    <p className="text-xs text-gray-500">
+                      Files are stored locally and served from /media. Pick a type first.
+                    </p>
+
+                    {question.media && (
+                      <div className="rounded-md border border-gray-200 bg-gray-50 p-2">
+                        <div className="flex items-center justify-between text-sm font-semibold text-gray-700">
+                          <span>
+                            {mediaFileName || question.media.url || "No file yet"}
+                          </span>
+                          {libraryEntry && (
+                            <span className="text-xs text-gray-500">
+                              {formatBytes(libraryEntry.size)}
+                            </span>
+                          )}
+                        </div>
+                        <div className="text-xs text-gray-500">
+                          {libraryEntry
+                            ? `Used in ${libraryEntry.usedBy.length} question${
+                                libraryEntry.usedBy.length === 1 ? "" : "s"
+                              }`
+                            : question.media.url
+                              ? "External media URL"
+                              : "Upload a file or paste a URL"}
+                        </div>
+                      </div>
+                    )}
+
+                  <label className="flex flex-col gap-1">
+                    <span className="text-xs font-semibold text-gray-600">
+                      Or paste an external URL
+                    </span>
+                    <Input
+                        value={question.media?.url || question.image || ""}
+                        onChange={(e) => handleMediaUrlChange(qIndex, e.target.value)}
+                        placeholder="https://..."
+                        disabled={!question.media?.type}
+                      />
+                    <span className="text-xs text-gray-500">
+                      Tip: set answer time longer than the clip duration.
+                    </span>
+                  </label>
+
+                  {question.media?.type !== "image" && question.media?.url && (
+                    <div className="flex flex-wrap items-center gap-2">
+                      <Button
+                        className="bg-gray-800"
+                        onClick={() => adjustTimingWithMedia(qIndex, question.media)}
+                        disabled={probing[qIndex]}
+                      >
+                        {probing[qIndex] ? "Probing..." : "Set timing from media"}
+                      </Button>
+                      <span className="text-xs text-gray-500">
+                        Probes audio/video duration and bumps cooldown/answer time if needed.
+                      </span>
+                    </div>
+                  )}
+
+                  <div className="flex flex-wrap gap-2">
+                    <Button
+                      className="bg-gray-700"
+                      onClick={() => clearQuestionMedia(qIndex)}
+                      disabled={!question.media}
+                      >
+                        Clear from question
+                      </Button>
+                      <Button
+                        className="bg-red-500"
+                        onClick={() => handleDeleteMediaFile(qIndex)}
+                        disabled={!mediaFileName || isDeleting}
+                      >
+                        {isDeleting ? "Deleting..." : "Delete file"}
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="mt-4 space-y-3">
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm font-semibold text-gray-700">Answers</span>
+                    <Button
+                      className="bg-blue-600"
+                      onClick={() => addAnswer(qIndex)}
+                      disabled={question.answers.length >= 4}
+                    >
+                      Add answer
+                    </Button>
+                  </div>
+
+                  <div className="grid gap-2 md:grid-cols-2">
+                    {question.answers.map((answer, aIndex) => (
+                      <div
+                        key={aIndex}
+                        className={clsx(
+                          "flex items-center gap-2 rounded-md border p-2",
+                          question.solution === aIndex
+                            ? "border-green-500"
+                            : "border-gray-200",
+                        )}
+                      >
+                        <input
+                          type="radio"
+                          name={`solution-${qIndex}`}
+                          checked={question.solution === aIndex}
+                          onChange={() =>
+                            updateQuestion(qIndex, { solution: aIndex })
+                          }
+                        />
+                        <Input
+                          className="flex-1"
+                          value={answer}
+                          onChange={(e) =>
+                            updateAnswer(qIndex, aIndex, e.target.value)
+                          }
+                          placeholder={`Answer ${aIndex + 1}`}
+                        />
+                        <button
+                          className="rounded-sm px-2 py-1 text-sm font-semibold text-red-500"
+                          onClick={() => removeAnswer(qIndex, aIndex)}
+                          disabled={question.answers.length <= 2}
+                        >
+                          Remove
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            )
+          })}
+
+          <div className="flex justify-center">
+            <Button className="bg-blue-600" onClick={addQuestion}>
+              Add question
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default QuizEditor

packages/web/src/components/game/create/SelectQuizz.tsx

@@ -0,0 +1,86 @@
+import { QuizzWithId } from "@rahoot/common/types/game"
+import Button from "@rahoot/web/components/Button"
+import clsx from "clsx"
+import { useState } from "react"
+import toast from "react-hot-toast"
+
+type Props = {
+  quizzList: QuizzWithId[]
+  onSelect: (_id: string) => void
+  onManage?: () => void
+  onMedia?: () => void
+}
+
+const SelectQuizz = ({ quizzList, onSelect, onManage, onMedia }: Props) => {
+  const [selected, setSelected] = useState<string | null>(null)
+
+  const handleSelect = (id: string) => () => {
+    if (selected === id) {
+      setSelected(null)
+    } else {
+      setSelected(id)
+    }
+  }
+
+  const handleSubmit = () => {
+    if (!selected) {
+      toast.error("Please select a quizz")
+
+      return
+    }
+
+    onSelect(selected)
+  }
+
+  return (
+    <div className="z-10 flex w-full max-w-md flex-col gap-4 rounded-md bg-white p-4 shadow-sm">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold">Select a quizz</h1>
+        <div className="flex items-center gap-2">
+          {onMedia && (
+            <button
+              className="text-sm font-semibold text-gray-700 underline"
+              onClick={onMedia}
+            >
+              Media
+            </button>
+          )}
+          {onManage && (
+            <button
+              className="text-sm font-semibold text-primary underline"
+              onClick={onManage}
+            >
+              Manage
+            </button>
+          )}
+        </div>
+      </div>
+      <div className="flex flex-col items-center justify-center">
+        <div className="w-full space-y-2">
+          {quizzList.map((quizz) => (
+            <button
+              key={quizz.id}
+              className={clsx(
+                "flex w-full items-center justify-between rounded-md p-3 outline outline-gray-300",
+              )}
+              onClick={handleSelect(quizz.id)}
+            >
+              {quizz.subject}
+
+              <div
+                className={clsx(
+                  "h-5 w-5 rounded outline outline-offset-3 outline-gray-300",
+                  selected === quizz.id &&
+                    "bg-primary border-primary/80 shadow-inset",
+                )}
+              ></div>
+            </button>
+          ))}
+        </div>
+      </div>
+      <Button onClick={handleSubmit}>Submit</Button>
+    </div>
+  )
+}
+
+export default SelectQuizz

packages/web/src/components/game/join/Room.tsx

@@ -0,0 +1,39 @@
+import Button from "@rahoot/web/components/Button"
+import Form from "@rahoot/web/components/Form"
+import Input from "@rahoot/web/components/Input"
+import { useEvent, useSocket } from "@rahoot/web/contexts/socketProvider"
+import { usePlayerStore } from "@rahoot/web/stores/player"
+import { KeyboardEvent, useState } from "react"
+
+const Room = () => {
+  const { socket } = useSocket()
+  const { join } = usePlayerStore()
+  const [invitation, setInvitation] = useState("")
+
+  const handleJoin = () => {
+    socket?.emit("player:join", invitation)
+  }
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === "Enter") {
+      handleJoin()
+    }
+  }
+
+  useEvent("game:successRoom", (gameId) => {
+    join(gameId)
+  })
+
+  return (
+    <Form>
+      <Input
+        onChange={(e) => setInvitation(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder="PIN Code here"
+      />
+      <Button onClick={handleJoin}>Submit</Button>
+    </Form>
+  )
+}
+
+export default Room

packages/web/src/components/game/join/Username.tsx

@@ -0,0 +1,56 @@
+"use client"
+
+import { STATUS } from "@rahoot/common/types/game/status"
+import Button from "@rahoot/web/components/Button"
+import Form from "@rahoot/web/components/Form"
+import Input from "@rahoot/web/components/Input"
+import { useEvent, useSocket } from "@rahoot/web/contexts/socketProvider"
+import { usePlayerStore } from "@rahoot/web/stores/player"
+
+import { useRouter } from "next/navigation"
+import { KeyboardEvent, useState } from "react"
+
+const Username = () => {
+  const { socket } = useSocket()
+  const { gameId, login, setStatus } = usePlayerStore()
+  const router = useRouter()
+  const [username, setUsername] = useState("")
+
+  const handleLogin = () => {
+    if (!gameId) {
+      return
+    }
+
+    socket?.emit("player:login", { gameId, data: { username } })
+  }
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === "Enter") {
+      handleLogin()
+    }
+  }
+
+  useEvent("game:successJoin", (gameId) => {
+    setStatus(STATUS.WAIT, { text: "Waiting for the players" })
+    login(username)
+    try {
+      localStorage.setItem("last_game_id", gameId)
+      localStorage.setItem("last_username", username)
+    } catch {}
+
+    router.replace(`/game/${gameId}`)
+  })
+
+  return (
+    <Form>
+      <Input
+        onChange={(e) => setUsername(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder="Username here"
+      />
+      <Button onClick={handleLogin}>Submit</Button>
+    </Form>
+  )
+}
+
+export default Username

packages/web/src/components/game/states/Answers.tsx

@@ -0,0 +1,141 @@
+"use client"
+
+import { CommonStatusDataMap } from "@rahoot/common/types/game/status"
+import AnswerButton from "@rahoot/web/components/AnswerButton"
+import QuestionMedia from "@rahoot/web/components/game/QuestionMedia"
+import { useEvent, useSocket } from "@rahoot/web/contexts/socketProvider"
+import { usePlayerStore } from "@rahoot/web/stores/player"
+import {
+  ANSWERS_COLORS,
+  ANSWERS_ICONS,
+  SFX_ANSWERS_MUSIC,
+  SFX_ANSWERS_SOUND,
+} from "@rahoot/web/utils/constants"
+import clsx from "clsx"
+import { useParams } from "next/navigation"
+import { useEffect, useState } from "react"
+import useSound from "use-sound"
+
+type Props = {
+  data: CommonStatusDataMap["SELECT_ANSWER"]
+}
+
+const Answers = ({
+  data: { question, answers, image, media, time, totalPlayer },
+}: Props) => {
+  const { gameId }: { gameId?: string } = useParams()
+  const { socket } = useSocket()
+  const { player } = usePlayerStore()
+
+  const [cooldown, setCooldown] = useState(time)
+  const [paused, setPaused] = useState(false)
+  const [totalAnswer, setTotalAnswer] = useState(0)
+  const [isMediaPlaying, setIsMediaPlaying] = useState(false)
+
+  const [sfxPop] = useSound(SFX_ANSWERS_SOUND, {
+    volume: 0.1,
+  })
+
+  const [playMusic, { stop: stopMusic, sound: answersMusic }] = useSound(
+    SFX_ANSWERS_MUSIC,
+    {
+      volume: 0.2,
+      interrupt: true,
+      loop: true,
+    },
+  )
+
+  const handleAnswer = (answerKey: number) => () => {
+    if (!player) {
+      return
+    }
+
+    socket?.emit("player:selectedAnswer", {
+      gameId,
+      data: {
+        answerKey,
+      },
+    })
+    sfxPop()
+  }
+
+  useEffect(() => {
+    playMusic()
+
+    return () => {
+      stopMusic()
+    }
+  }, [playMusic])
+
+  useEffect(() => {
+    if (!answersMusic) {
+      return
+    }
+
+    answersMusic.volume(isMediaPlaying ? 0.05 : 0.2)
+  }, [answersMusic, isMediaPlaying])
+
+  useEvent("game:cooldown", (sec) => {
+    setCooldown(sec)
+  })
+
+  useEvent("game:cooldownPause", (isPaused) => {
+    setPaused(isPaused)
+  })
+
+  useEvent("game:playerAnswer", (count) => {
+    setTotalAnswer(count)
+    sfxPop()
+  })
+
+  return (
+    <div className="flex h-full flex-1 flex-col justify-between">
+      <div className="mx-auto inline-flex h-full w-full max-w-7xl flex-1 flex-col items-center justify-center gap-5">
+        <h2 className="text-center text-2xl font-bold text-white drop-shadow-lg md:text-4xl lg:text-5xl">
+          {question}
+        </h2>
+
+        <QuestionMedia
+          media={media || (image ? { type: "image", url: image } : undefined)}
+          alt={question}
+          onPlayChange={(playing) => setIsMediaPlaying(playing)}
+        />
+      </div>
+
+      <div>
+        <div className="mx-auto mb-4 flex w-full max-w-7xl justify-between gap-1 px-2 text-lg font-bold text-white md:text-xl">
+          <div className="flex flex-col items-center rounded-full bg-black/40 px-4 text-lg font-bold">
+            <span className="translate-y-1 text-sm">Time</span>
+            <span>{cooldown}</span>
+            {paused && (
+              <span className="text-xs font-semibold uppercase text-amber-200">
+                Paused
+              </span>
+            )}
+          </div>
+          <div className="flex flex-col items-center rounded-full bg-black/40 px-4 text-lg font-bold">
+            <span className="translate-y-1 text-sm">Answers</span>
+            <span>
+              {totalAnswer}/{totalPlayer}
+            </span>
+          </div>
+        </div>
+
+        <div className="mx-auto mb-4 grid w-full max-w-7xl grid-cols-2 gap-1 rounded-full px-2 text-lg font-bold text-white md:text-xl">
+          {answers.map((answer, key) => (
+            <AnswerButton
+              key={key}
+              className={clsx(ANSWERS_COLORS[key])}
+              icon={ANSWERS_ICONS[key]}
+              onClick={handleAnswer(key)}
+            >
+              {answer}
+            </AnswerButton>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Answers

packages/web/src/components/game/states/Leaderboard.tsx

@@ -0,0 +1,92 @@
+import { ManagerStatusDataMap } from "@rahoot/common/types/game/status"
+import { AnimatePresence, motion, useSpring, useTransform } from "motion/react"
+import { useEffect, useState } from "react"
+
+type Props = {
+  data: ManagerStatusDataMap["SHOW_LEADERBOARD"]
+}
+
+const AnimatedPoints = ({ from, to }: { from: number; to: number }) => {
+  const spring = useSpring(from, { stiffness: 1000, damping: 30 })
+  const display = useTransform(spring, (value) => Math.round(value))
+  const [displayValue, setDisplayValue] = useState(from)
+
+  useEffect(() => {
+    spring.set(to)
+    const unsubscribe = display.on("change", (latest) => {
+      setDisplayValue(latest)
+    })
+
+    return unsubscribe
+  }, [to, spring, display])
+
+  return <span className="drop-shadow-md">{displayValue}</span>
+}
+
+const Leaderboard = ({ data: { oldLeaderboard, leaderboard } }: Props) => {
+  const [displayedLeaderboard, setDisplayedLeaderboard] =
+    useState(oldLeaderboard)
+  const [isAnimating, setIsAnimating] = useState(false)
+
+  useEffect(() => {
+    setDisplayedLeaderboard(oldLeaderboard)
+    setIsAnimating(false)
+
+    const timer = setTimeout(() => {
+      setIsAnimating(true)
+      setDisplayedLeaderboard(leaderboard)
+    }, 1600)
+
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [oldLeaderboard, leaderboard])
+
+  return (
+    <section className="relative mx-auto flex w-full max-w-4xl flex-1 flex-col items-center justify-center px-2">
+      <h2 className="mb-6 text-5xl font-bold text-white drop-shadow-md">
+        Leaderboard
+      </h2>
+      <div className="flex w-full flex-col gap-2">
+        <AnimatePresence mode="popLayout">
+          {displayedLeaderboard.map(({ id, username, points }) => (
+            <motion.div
+              key={id}
+              layout
+              initial={{ opacity: 0, y: 50 }}
+              animate={{
+                opacity: 1,
+                y: 0,
+              }}
+              exit={{
+                opacity: 0,
+                y: 50,
+                transition: { duration: 0.2 },
+              }}
+              transition={{
+                layout: {
+                  type: "spring",
+                  stiffness: 350,
+                  damping: 25,
+                },
+              }}
+              className="bg-primary flex w-full justify-between rounded-md p-3 text-2xl font-bold text-white"
+            >
+              <span className="drop-shadow-md">{username}</span>
+              {isAnimating ? (
+                <AnimatedPoints
+                  from={oldLeaderboard.find((u) => u.id === id)?.points || 0}
+                  to={leaderboard.find((u) => u.id === id)?.points || 0}
+                />
+              ) : (
+                <span className="drop-shadow-md">{points}</span>
+              )}
+            </motion.div>
+          ))}
+        </AnimatePresence>
+      </div>
+    </section>
+  )
+}
+
+export default Leaderboard

packages/web/src/components/game/states/Podium.tsx

@@ -0,0 +1,204 @@
+"use client"
+
+import { ManagerStatusDataMap } from "@rahoot/common/types/game/status"
+import useScreenSize from "@rahoot/web/hooks/useScreenSize"
+import {
+  SFX_PODIUM_FIRST,
+  SFX_PODIUM_SECOND,
+  SFX_PODIUM_THREE,
+  SFX_SNEAR_ROOL,
+} from "@rahoot/web/utils/constants"
+import clsx from "clsx"
+import { useEffect, useState } from "react"
+import ReactConfetti from "react-confetti"
+import useSound from "use-sound"
+
+type Props = {
+  data: ManagerStatusDataMap["FINISHED"]
+}
+
+const Podium = ({ data: { subject, top } }: Props) => {
+  const [apparition, setApparition] = useState(0)
+
+  const { width, height } = useScreenSize()
+
+  const [sfxtThree] = useSound(SFX_PODIUM_THREE, {
+    volume: 0.2,
+  })
+
+  const [sfxSecond] = useSound(SFX_PODIUM_SECOND, {
+    volume: 0.2,
+  })
+
+  const [sfxRool, { stop: sfxRoolStop }] = useSound(SFX_SNEAR_ROOL, {
+    volume: 0.2,
+  })
+
+  const [sfxFirst] = useSound(SFX_PODIUM_FIRST, {
+    volume: 0.2,
+  })
+
+  useEffect(() => {
+    switch (apparition) {
+      case 4:
+        sfxRoolStop()
+        sfxFirst()
+
+        break
+
+      case 3:
+        sfxRool()
+
+        break
+
+      case 2:
+        sfxSecond()
+
+        break
+
+      case 1:
+        sfxtThree()
+
+        break
+    }
+  }, [apparition, sfxFirst, sfxSecond, sfxtThree, sfxRool, sfxRoolStop])
+
+  useEffect(() => {
+    if (top.length < 3) {
+      setApparition(4)
+
+      return
+    }
+
+    const interval = setInterval(() => {
+      if (apparition > 4) {
+        clearInterval(interval)
+
+        return
+      }
+
+      setApparition((value) => value + 1)
+    }, 2000)
+
+    // eslint-disable-next-line consistent-return
+    return () => clearInterval(interval)
+  }, [apparition, top.length])
+
+  return (
+    <>
+      {apparition >= 4 && (
+        <ReactConfetti
+          width={width}
+          height={height}
+          className="h-full w-full"
+        />
+      )}
+
+      {apparition >= 3 && top.length >= 3 && (
+        <div className="pointer-events-none absolute min-h-screen w-full overflow-hidden">
+          <div className="spotlight"></div>
+        </div>
+      )}
+      <section className="relative mx-auto flex w-full max-w-7xl flex-1 flex-col items-center justify-between">
+        <h2 className="anim-show text-center text-3xl font-bold text-white drop-shadow-lg md:text-4xl lg:text-5xl">
+          {subject}
+        </h2>
+
+        <div
+          style={{ gridTemplateColumns: `repeat(${top.length}, 1fr)` }}
+          className={`grid w-full max-w-[800px] flex-1 items-end justify-center justify-self-end overflow-x-visible overflow-y-hidden`}
+        >
+          {top[1] && (
+            <div
+              className={clsx(
+                "z-20 flex h-[50%] w-full translate-y-full flex-col items-center justify-center gap-3 opacity-0 transition-all",
+                { "translate-y-0! opacity-100": apparition >= 2 },
+              )}
+            >
+              <p
+                className={clsx(
+                  "overflow-visible text-center text-2xl font-bold whitespace-nowrap text-white drop-shadow-lg md:text-4xl",
+                  {
+                    "anim-balanced": apparition >= 4,
+                  },
+                )}
+              >
+                {top[1].username}
+              </p>
+              <div className="bg-primary flex h-full w-full flex-col items-center gap-4 rounded-t-md pt-6 text-center shadow-2xl">
+                <p className="flex aspect-square h-14 items-center justify-center rounded-full border-4 border-zinc-400 bg-zinc-500 text-3xl font-bold text-white drop-shadow-lg">
+                  <span className="drop-shadow-md">2</span>
+                </p>
+                <p className="text-2xl font-bold text-white drop-shadow-lg">
+                  {top[1].points}
+                </p>
+              </div>
+            </div>
+          )}
+
+          <div
+            className={clsx(
+              "z-30 flex h-[60%] w-full translate-y-full flex-col items-center gap-3 opacity-0 transition-all",
+              {
+                "translate-y-0! opacity-100": apparition >= 3,
+              },
+              {
+                "md:min-w-64": top.length < 2,
+              },
+            )}
+          >
+            <p
+              className={clsx(
+                "overflow-visible text-center text-2xl font-bold whitespace-nowrap text-white opacity-0 drop-shadow-lg md:text-4xl",
+                { "anim-balanced opacity-100": apparition >= 4 },
+              )}
+            >
+              {top[0].username}
+            </p>
+            <div className="bg-primary flex h-full w-full flex-col items-center gap-4 rounded-t-md pt-6 text-center shadow-2xl">
+              <p className="flex aspect-square h-14 items-center justify-center rounded-full border-4 border-amber-400 bg-amber-300 text-3xl font-bold text-white drop-shadow-lg">
+                <span className="drop-shadow-md">1</span>
+              </p>
+              <p className="text-2xl font-bold text-white drop-shadow-lg">
+                {top[0].points}
+              </p>
+            </div>
+          </div>
+
+          {top[2] && (
+            <div
+              className={clsx(
+                "z-10 flex h-[40%] w-full translate-y-full flex-col items-center gap-3 opacity-0 transition-all",
+                {
+                  "translate-y-0! opacity-100": apparition >= 1,
+                },
+              )}
+            >
+              <p
+                className={clsx(
+                  "overflow-visible text-center text-2xl font-bold whitespace-nowrap text-white drop-shadow-lg md:text-4xl",
+                  {
+                    "anim-balanced": apparition >= 4,
+                  },
+                )}
+              >
+                {top[2].username}
+              </p>
+              <div className="bg-primary flex h-full w-full flex-col items-center gap-4 rounded-t-md pt-6 text-center shadow-2xl">
+                <p className="flex aspect-square h-14 items-center justify-center rounded-full border-4 border-amber-800 bg-amber-700 text-3xl font-bold text-white drop-shadow-lg">
+                  <span className="drop-shadow-md">3</span>
+                </p>
+
+                <p className="text-2xl font-bold text-white drop-shadow-lg">
+                  {top[2].points}
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+      </section>
+    </>
+  )
+}
+
+export default Podium

packages/web/src/components/game/states/Prepared.tsx

@@ -0,0 +1,31 @@
+import { CommonStatusDataMap } from "@rahoot/common/types/game/status"
+import { ANSWERS_COLORS, ANSWERS_ICONS } from "@rahoot/web/utils/constants"
+import clsx from "clsx"
+import { createElement } from "react"
+
+type Props = {
+  data: CommonStatusDataMap["SHOW_PREPARED"]
+}
+
+const Prepared = ({ data: { totalAnswers, questionNumber } }: Props) => (
+  <section className="anim-show relative mx-auto flex w-full max-w-7xl flex-1 flex-col items-center justify-center">
+    <h2 className="anim-show mb-20 text-center text-3xl font-bold text-white drop-shadow-lg md:text-4xl lg:text-5xl">
+      Question #{questionNumber}
+    </h2>
+    <div className="anim-quizz grid aspect-square w-60 grid-cols-2 gap-4 rounded-2xl bg-gray-700 p-5 md:w-60">
+      {[...Array(totalAnswers)].map((_, key) => (
+        <div
+          key={key}
+          className={clsx(
+            "button shadow-inset flex aspect-square h-full w-full items-center justify-center rounded-2xl",
+            ANSWERS_COLORS[key],
+          )}
+        >
+          {createElement(ANSWERS_ICONS[key], { className: "h-10 md:h-14" })}
+        </div>
+      ))}
+    </div>
+  </section>
+)
+
+export default Prepared

packages/web/src/components/game/states/Question.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import { CommonStatusDataMap } from "@rahoot/common/types/game/status"
+import QuestionMedia from "@rahoot/web/components/game/QuestionMedia"
+import { useEvent } from "@rahoot/web/contexts/socketProvider"
+import { SFX_SHOW_SOUND } from "@rahoot/web/utils/constants"
+import { useEffect, useState } from "react"
+import useSound from "use-sound"
+
+type Props = {
+  data: CommonStatusDataMap["SHOW_QUESTION"]
+}
+
+const Question = ({ data: { question, image, media, cooldown } }: Props) => {
+  const [sfxShow] = useSound(SFX_SHOW_SOUND, { volume: 0.5 })
+  const [seconds, setSeconds] = useState(cooldown)
+  const [paused, setPaused] = useState(false)
+
+  useEffect(() => {
+    sfxShow()
+  }, [sfxShow])
+
+  useEvent("game:cooldown", (sec) => {
+    setSeconds(sec)
+  })
+
+  useEvent("game:cooldownPause", (isPaused) => {
+    setPaused(isPaused)
+  })
+
+  const percent = Math.max(0, Math.min(100, (seconds / cooldown) * 100))
+
+  return (
+    <section className="relative mx-auto flex h-full w-full max-w-7xl flex-1 flex-col items-center px-4">
+      <div className="flex flex-1 flex-col items-center justify-center gap-5">
+        <h2 className="anim-show text-center text-3xl font-bold text-white drop-shadow-lg md:text-4xl lg:text-5xl">
+          {question}
+        </h2>
+
+        <QuestionMedia
+          media={media || (image ? { type: "image", url: image } : undefined)}
+          alt={question}
+        />
+      </div>
+      <div className="mb-20 h-4 w-full max-w-4xl self-start overflow-hidden rounded-full bg-white/30">
+        <div
+          className="h-full bg-primary transition-[width]"
+          style={{ width: `${percent}%` }}
+        />
+      </div>
+      {paused && (
+        <div className="absolute bottom-6 right-6 rounded-md bg-black/60 px-3 py-1 text-sm font-semibold text-white">
+          Paused
+        </div>
+      )}
+    </section>
+  )
+}
+
+export default Question

packages/web/src/components/game/states/Responses.tsx

@@ -0,0 +1,123 @@
+"use client"
+
+import { ManagerStatusDataMap } from "@rahoot/common/types/game/status"
+import AnswerButton from "@rahoot/web/components/AnswerButton"
+import QuestionMedia from "@rahoot/web/components/game/QuestionMedia"
+import {
+  ANSWERS_COLORS,
+  ANSWERS_ICONS,
+  SFX_ANSWERS_MUSIC,
+  SFX_RESULTS_SOUND,
+} from "@rahoot/web/utils/constants"
+import { calculatePercentages } from "@rahoot/web/utils/score"
+import clsx from "clsx"
+import { useEffect, useState } from "react"
+import useSound from "use-sound"
+
+type Props = {
+  data: ManagerStatusDataMap["SHOW_RESPONSES"]
+}
+
+const Responses = ({
+  data: { question, answers, responses, correct, image, media },
+}: Props) => {
+  const [percentages, setPercentages] = useState<Record<string, string>>({})
+  const [isMusicPlaying, setIsMusicPlaying] = useState(false)
+  const [isMediaPlaying, setIsMediaPlaying] = useState(false)
+
+  const [sfxResults] = useSound(SFX_RESULTS_SOUND, {
+    volume: 0.2,
+  })
+
+  const [playMusic, { stop: stopMusic, sound: answersMusic }] = useSound(
+    SFX_ANSWERS_MUSIC,
+    {
+      volume: 0.2,
+      onplay: () => {
+        setIsMusicPlaying(true)
+      },
+      onend: () => {
+        setIsMusicPlaying(false)
+      },
+    },
+  )
+
+  useEffect(() => {
+    stopMusic()
+    sfxResults()
+
+    setPercentages(calculatePercentages(responses))
+  }, [responses, playMusic, stopMusic, sfxResults])
+
+  useEffect(() => {
+    if (!isMusicPlaying) {
+      playMusic()
+    }
+  }, [isMusicPlaying, playMusic])
+
+  useEffect(() => {
+    if (!answersMusic) {
+      return
+    }
+
+    answersMusic.volume(isMediaPlaying ? 0.05 : 0.2)
+  }, [answersMusic, isMediaPlaying])
+
+  useEffect(() => {
+    stopMusic()
+  }, [playMusic, stopMusic])
+
+  return (
+    <div className="flex h-full flex-1 flex-col justify-between">
+      <div className="mx-auto inline-flex h-full w-full max-w-7xl flex-1 flex-col items-center justify-center gap-5">
+        <h2 className="text-center text-2xl font-bold text-white drop-shadow-lg md:text-4xl lg:text-5xl">
+          {question}
+        </h2>
+
+        <QuestionMedia
+          media={media || (image ? { type: "image", url: image } : undefined)}
+          alt={question}
+          onPlayChange={(playing) => setIsMediaPlaying(playing)}
+        />
+
+        <div
+          className={`mt-8 grid h-40 w-full max-w-3xl gap-4 px-2`}
+          style={{ gridTemplateColumns: `repeat(${answers.length}, 1fr)` }}
+        >
+          {answers.map((_, key) => (
+            <div
+              key={key}
+              className={clsx(
+                "flex flex-col justify-end self-end overflow-hidden rounded-md",
+                ANSWERS_COLORS[key],
+              )}
+              style={{ height: percentages[key] }}
+            >
+              <span className="w-full bg-black/10 text-center text-lg font-bold text-white drop-shadow-md">
+                {responses[key] || 0}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div>
+        <div className="mx-auto mb-4 grid w-full max-w-7xl grid-cols-2 gap-1 rounded-full px-2 text-lg font-bold text-white md:text-xl">
+          {answers.map((answer, key) => (
+            <AnswerButton
+              key={key}
+              className={clsx(ANSWERS_COLORS[key], {
+                "opacity-65": responses && correct !== key,
+              })}
+              icon={ANSWERS_ICONS[key]}
+            >
+              {answer}
+            </AnswerButton>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Responses

packages/web/src/components/game/states/Result.tsx

@@ -0,0 +1,52 @@
+"use client"
+
+import { CommonStatusDataMap } from "@rahoot/common/types/game/status"
+import CricleCheck from "@rahoot/web/components/icons/CricleCheck"
+import CricleXmark from "@rahoot/web/components/icons/CricleXmark"
+import { usePlayerStore } from "@rahoot/web/stores/player"
+import { SFX_RESULTS_SOUND } from "@rahoot/web/utils/constants"
+import { useEffect } from "react"
+import useSound from "use-sound"
+
+type Props = {
+  data: CommonStatusDataMap["SHOW_RESULT"]
+}
+
+const Result = ({
+  data: { correct, message, points, myPoints, rank, aheadOfMe },
+}: Props) => {
+  const player = usePlayerStore()
+
+  const [sfxResults] = useSound(SFX_RESULTS_SOUND, {
+    volume: 0.2,
+  })
+
+  useEffect(() => {
+    player.updatePoints(myPoints)
+
+    sfxResults()
+  }, [sfxResults])
+
+  return (
+    <section className="anim-show relative mx-auto flex w-full max-w-7xl flex-1 flex-col items-center justify-center">
+      {correct ? (
+        <CricleCheck className="aspect-square max-h-60 w-full" />
+      ) : (
+        <CricleXmark className="aspect-square max-h-60 w-full" />
+      )}
+      <h2 className="mt-1 text-4xl font-bold text-white drop-shadow-lg">
+        {message}
+      </h2>
+      <p className="mt-1 text-xl font-bold text-white drop-shadow-lg">
+        {`You are top ${rank}${aheadOfMe ? `, behind ${aheadOfMe}` : ""}`}
+      </p>
+      {correct && (
+        <span className="mt-2 rounded bg-black/40 px-4 py-2 text-2xl font-bold text-white drop-shadow-lg">
+          +{points}
+        </span>
+      )}
+    </section>
+  )
+}
+
+export default Result

packages/web/src/components/game/states/Room.tsx

@@ -0,0 +1,80 @@
+"use client"
+
+import { Player } from "@rahoot/common/types/game"
+import { ManagerStatusDataMap } from "@rahoot/common/types/game/status"
+import { useEvent, useSocket } from "@rahoot/web/contexts/socketProvider"
+import { useManagerStore } from "@rahoot/web/stores/manager"
+import { useState } from "react"
+
+type Props = {
+  data: ManagerStatusDataMap["SHOW_ROOM"]
+}
+
+const Room = ({ data: { text, inviteCode } }: Props) => {
+  const { gameId } = useManagerStore()
+  const { socket } = useSocket()
+  const { players } = useManagerStore()
+  const [playerList, setPlayerList] = useState<Player[]>(players)
+  const [totalPlayers, setTotalPlayers] = useState(0)
+
+  useEvent("manager:newPlayer", (player) => {
+    setPlayerList([...playerList, player])
+  })
+
+  useEvent("manager:removePlayer", (playerId) => {
+    setPlayerList(playerList.filter((p) => p.id !== playerId))
+  })
+
+  useEvent("manager:playerKicked", (playerId) => {
+    setPlayerList(playerList.filter((p) => p.id !== playerId))
+  })
+
+  useEvent("game:totalPlayers", (total) => {
+    setTotalPlayers(total)
+  })
+
+  const handleKick = (playerId: string) => () => {
+    if (!gameId) {
+      return
+    }
+
+    socket?.emit("manager:kickPlayer", {
+      gameId,
+      playerId,
+    })
+  }
+
+  return (
+    <section className="relative mx-auto flex w-full max-w-7xl flex-1 flex-col items-center justify-center px-2">
+      <div className="mb-10 rotate-3 rounded-md bg-white px-6 py-4 text-6xl font-extrabold">
+        {inviteCode}
+      </div>
+
+      <h2 className="mb-4 text-4xl font-bold text-white drop-shadow-lg">
+        {text}
+      </h2>
+
+      <div className="mb-6 flex items-center justify-center rounded-full bg-black/40 px-6 py-3">
+        <span className="text-2xl font-bold text-white drop-shadow-md">
+          Players Joined: {totalPlayers}
+        </span>
+      </div>
+
+      <div className="flex flex-wrap gap-3">
+        {playerList.map((player) => (
+          <div
+            key={player.id}
+            className="shadow-inset bg-primary rounded-md px-4 py-3 font-bold text-white"
+            onClick={handleKick(player.id)}
+          >
+            <span className="cursor-pointer text-xl drop-shadow-md hover:line-through">
+              {player.username}
+            </span>
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}
+
+export default Room

packages/web/src/components/game/states/Start.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import { CommonStatusDataMap } from "@rahoot/common/types/game/status"
+import { useEvent } from "@rahoot/web/contexts/socketProvider"
+import { SFX_BOUMP_SOUND } from "@rahoot/web/utils/constants"
+import clsx from "clsx"
+import { useState } from "react"
+import useSound from "use-sound"
+
+type Props = {
+  data: CommonStatusDataMap["SHOW_START"]
+}
+
+const Start = ({ data: { time, subject } }: Props) => {
+  const [showTitle, setShowTitle] = useState(true)
+  const [cooldown, setCooldown] = useState(time)
+
+  const [sfxBoump] = useSound(SFX_BOUMP_SOUND, {
+    volume: 0.2,
+  })
+
+  useEvent("game:startCooldown", () => {
+    sfxBoump()
+    setShowTitle(false)
+  })
+
+  useEvent("game:cooldown", (sec) => {
+    sfxBoump()
+    setCooldown(sec)
+  })
+
+  return (
+    <section className="relative mx-auto flex w-full max-w-7xl flex-1 flex-col items-center justify-center">
+      {showTitle ? (
+        <h2 className="anim-show text-center text-3xl font-bold text-white drop-shadow-lg md:text-4xl lg:text-5xl">
+          {subject}
+        </h2>
+      ) : (
+        <>
+          <div
+            className={clsx(
+              `anim-show bg-primary aspect-square h-32 transition-all md:h-60`,
+            )}
+            style={{
+              transform: `rotate(${45 * (time - cooldown)}deg)`,
+            }}
+          ></div>
+          <span className="absolute text-6xl font-bold text-white drop-shadow-md md:text-8xl">
+            {cooldown}
+          </span>
+        </>
+      )}
+    </section>
+  )
+}
+
+export default Start

packages/web/src/components/game/states/Wait.tsx

@@ -0,0 +1,17 @@
+import { PlayerStatusDataMap } from "@rahoot/common/types/game/status"
+import Loader from "@rahoot/web/components/Loader"
+
+type Props = {
+  data: PlayerStatusDataMap["WAIT"]
+}
+
+const Wait = ({ data: { text } }: Props) => (
+  <section className="relative mx-auto flex w-full max-w-7xl flex-1 flex-col items-center justify-center">
+    <Loader />
+    <h2 className="mt-5 text-center text-3xl font-bold text-white drop-shadow-lg md:text-4xl lg:text-5xl">
+      {text}
+    </h2>
+  </section>
+)
+
+export default Wait

packages/web/src/components/icons/Circle.tsx

@@ -0,0 +1,24 @@
+type Props = {
+  className?: string
+  fill?: string
+}
+
+const Circle = ({ className, fill = "#FFF" }: Props) => (
+  <svg
+    className={className}
+    viewBox="0 0 512 512"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g id="icon" fill={fill} transform="translate(42.666667, 42.666667)">
+        <path
+          d="M213.333333,3.55271368e-14 C331.15408,3.55271368e-14 426.666667,95.5125867 426.666667,213.333333 C426.666667,331.15408 331.15408,426.666667 213.333333,426.666667 C95.5125867,426.666667 3.55271368e-14,331.15408 3.55271368e-14,213.333333 C3.55271368e-14,95.5125867 95.5125867,3.55271368e-14 213.333333,3.55271368e-14 Z"
+          id="Combined-Shape"
+        ></path>
+      </g>
+    </g>
+  </svg>
+)
+
+export default Circle

packages/web/src/components/icons/CricleCheck.tsx

@@ -0,0 +1,41 @@
+type Props = {
+  className?: string
+}
+
+const CricleCheck = ({ className }: Props) => (
+  <svg
+    fill="#22c55e"
+    width="800px"
+    height="800px"
+    viewBox="0 0 56.00 56.00"
+    xmlns="http://www.w3.org/2000/svg"
+    stroke="#22c55e"
+    strokeWidth="0.00056"
+    className={className}
+  >
+    <g strokeWidth="0" transform="translate(11.2,11.2), scale(0.6)">
+      <rect
+        x="0"
+        y="0"
+        width="56.00"
+        height="56.00"
+        rx="28"
+        fill="#ffffff"
+        strokeWidth="0"
+      />
+    </g>
+
+    <g
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      stroke="#CCCCCC"
+      strokeWidth="0.6719999999999999"
+    />
+
+    <g>
+      <path d="M 27.9999 51.9063 C 41.0546 51.9063 51.9063 41.0781 51.9063 28 C 51.9063 14.9453 41.0312 4.0937 27.9765 4.0937 C 14.8983 4.0937 4.0937 14.9453 4.0937 28 C 4.0937 41.0781 14.9218 51.9063 27.9999 51.9063 Z M 24.7655 40.0234 C 23.9687 40.0234 23.3593 39.6719 22.6796 38.8750 L 15.9296 30.5312 C 15.5780 30.0859 15.3671 29.5234 15.3671 29.0078 C 15.3671 27.9063 16.2343 27.0625 17.2655 27.0625 C 17.9452 27.0625 18.5077 27.3203 19.0702 28.0469 L 24.6718 35.2890 L 35.5702 17.8281 C 36.0155 17.1016 36.6249 16.75 37.2343 16.75 C 38.2655 16.75 39.2733 17.4297 39.2733 18.5547 C 39.2733 19.0703 38.9687 19.6328 38.6640 20.1016 L 26.7577 38.8750 C 26.2421 39.6484 25.5858 40.0234 24.7655 40.0234 Z" />
+    </g>
+  </svg>
+)
+
+export default CricleCheck

packages/web/src/components/icons/CricleXmark.tsx

@@ -0,0 +1,35 @@
+type Props = {
+  className?: string
+}
+
+const CricleXmark = ({ className }: Props) => (
+  <svg
+    fill="#ef4444"
+    width="800px"
+    height="800px"
+    viewBox="0 0 56.00 56.00"
+    xmlns="http://www.w3.org/2000/svg"
+    stroke="#ef4444"
+    className={className}
+  >
+    <g strokeWidth="0" transform="translate(12.4,12.4), scale(0.6)">
+      <rect
+        x="0"
+        y="0"
+        width="56.00"
+        height="56.00"
+        rx="28"
+        fill="#ffffff"
+        strokeWidth="0"
+      />
+    </g>
+
+    <g strokeLinecap="round" strokeLinejoin="round" />
+
+    <g>
+      <path d="M 27.9999 51.9063 C 41.0546 51.9063 51.9063 41.0781 51.9063 28 C 51.9063 14.9453 41.0312 4.0937 27.9765 4.0937 C 14.8983 4.0937 4.0937 14.9453 4.0937 28 C 4.0937 41.0781 14.9218 51.9063 27.9999 51.9063 Z M 19.5858 38.4063 C 18.4843 38.4063 17.5936 37.5156 17.5936 36.4141 C 17.5936 35.8750 17.8280 35.4063 18.2030 35.0547 L 25.1874 28.0234 L 18.2030 20.9922 C 17.8280 20.6641 17.5936 20.1719 17.5936 19.6328 C 17.5936 18.5547 18.4843 17.6875 19.5858 17.6875 C 20.1249 17.6875 20.5936 17.8984 20.9452 18.2734 L 27.9765 25.2812 L 35.0546 18.25 C 35.4530 17.8281 35.8749 17.6406 36.3905 17.6406 C 37.4921 17.6406 38.3827 18.5312 38.3827 19.6094 C 38.3827 20.1484 38.1952 20.5937 37.7968 20.9688 L 30.7655 28.0234 L 37.7733 35.0078 C 38.1249 35.3828 38.3593 35.8516 38.3593 36.4141 C 38.3593 37.5156 37.4687 38.4063 36.3671 38.4063 C 35.8046 38.4063 35.3358 38.1719 34.9843 37.8203 L 27.9765 30.7890 L 20.9921 37.8203 C 20.6405 38.1953 20.1249 38.4063 19.5858 38.4063 Z" />
+    </g>
+  </svg>
+)
+
+export default CricleXmark

packages/web/src/components/icons/Pentagon.tsx

@@ -0,0 +1,46 @@
+type Props = {
+  className?: string
+  fill?: string
+  stroke?: string
+}
+
+const Pentagon = ({ className, fill, stroke }: Props) => (
+  <svg
+    className={className}
+    fill={fill}
+    height="800px"
+    width="800px"
+    version="1.1"
+    id="Layer_1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="-40.96 -40.96 593.93 593.93"
+    transform="rotate(180)"
+    stroke={fill}
+    strokeWidth="0.005120100000000001"
+  >
+    <g strokeWidth="0" />
+
+    <g
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      stroke={stroke}
+      strokeWidth="71.6814"
+    >
+      <g>
+        <g>
+          <path d="M507.804,200.28L262.471,12.866c-3.84-2.923-9.131-2.923-12.949,0L4.188,200.28c-3.605,2.773-5.077,7.531-3.648,11.84 l93.717,281.92c1.451,4.373,5.525,7.296,10.133,7.296h303.253c4.587,0,8.683-2.944,10.133-7.296l93.717-281.92 C512.882,207.789,511.41,203.053,507.804,200.28z" />{" "}
+        </g>
+      </g>
+    </g>
+
+    <g>
+      <g>
+        <g>
+          <path d="M507.804,200.28L262.471,12.866c-3.84-2.923-9.131-2.923-12.949,0L4.188,200.28c-3.605,2.773-5.077,7.531-3.648,11.84 l93.717,281.92c1.451,4.373,5.525,7.296,10.133,7.296h303.253c4.587,0,8.683-2.944,10.133-7.296l93.717-281.92 C512.882,207.789,511.41,203.053,507.804,200.28z" />{" "}
+        </g>
+      </g>
+    </g>
+  </svg>
+)
+
+export default Pentagon

packages/web/src/components/icons/Rhombus.tsx

@@ -0,0 +1,24 @@
+type Props = {
+  className?: string
+  fill?: string
+}
+
+const Rhombus = ({ className, fill = "#FFF" }: Props) => (
+  <svg
+    className={className}
+    fill={fill}
+    viewBox="-56.32 -56.32 624.64 624.64"
+    xmlns="http://www.w3.org/2000/svg"
+    transform="rotate(45)"
+  >
+    <g strokeWidth="0" />
+
+    <g strokeLinecap="round" strokeLinejoin="round" />
+
+    <g>
+      <rect x="48" y="48" width="416" height="416" />
+    </g>
+  </svg>
+)
+
+export default Rhombus

packages/web/src/components/icons/Square.tsx

@@ -0,0 +1,17 @@
+type Props = {
+  className?: string
+  fill?: string
+}
+
+const Square = ({ className, fill = "#FFF" }: Props) => (
+  <svg
+    className={className}
+    fill={fill}
+    viewBox="0 0 512 512"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect x="48" y="48" width="416" height="416" />
+  </svg>
+)
+
+export default Square