From e4e9284f11cf5ca26dc2c7a779e17e39fc412610 Mon Sep 17 00:00:00 2001
From: FabienBounoir <bounoirfabien@gmail.com>
Date: Wed, 30 Oct 2024 19:34:04 +0100
Subject: [PATCH 01/18] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20init=20external=20?=
 =?UTF-8?q?backend=20with=20socket=20io?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.example                         |    1 +
 backend/index.js                     |   84 +++
 backend/package-lock.json            | 1019 ++++++++++++++++++++++++++
 backend/package.json                 |   17 +
 src/lib/rooms.ts => backend/rooms.js |   14 +-
 ws.js => backend/server.js           |  232 +++---
 package-lock.json                    |   88 ++-
 package.json                         |    2 +
 src/lib/webSocketConnection.js       |    5 +
 src/routes/+layout.svelte            |    2 +
 src/routes/create/+page.svelte       |   45 +-
 src/routes/join/+page.svelte         |   25 +-
 src/routes/manager/[id]/+page.svelte |  101 +--
 src/routes/rooms/[id]/+page.svelte   |  144 ++--
 vite.config.ts                       |   57 +-
 15 files changed, 1505 insertions(+), 331 deletions(-)
 create mode 100644 backend/index.js
 create mode 100644 backend/package-lock.json
 create mode 100644 backend/package.json
 rename src/lib/rooms.ts => backend/rooms.js (68%)
 rename ws.js => backend/server.js (58%)
 create mode 100644 src/lib/webSocketConnection.js

diff --git a/.env.example b/.env.example
index e69de29..de7b3b0 100644
--- a/.env.example
+++ b/.env.example
@@ -0,0 +1 @@
+VITE_BACKEND_URL="http://localhost:5876"
\ No newline at end of file
diff --git a/backend/index.js b/backend/index.js
new file mode 100644
index 0000000..f70d01f
--- /dev/null
+++ b/backend/index.js
@@ -0,0 +1,84 @@
+const express = require('express');
+const http = require('http');
+const { createRoomId, rooms } = require('./rooms');
+const { createSocketIOServer } = require('./server');
+const cors = require('cors')
+
+// Créez une instance Express pour les routes API
+const app = express();
+
+// Middleware pour interpréter le JSON dans les requêtes
+app.use(express.json());
+
+app.use(cors())
+
+app.get("/api/room", (req, res) => {
+    console.log("req.query;", req.query)
+    const { roomId } = req.query;
+
+    if (rooms.get(roomId)) {
+        return res.json({ roomId });
+    }
+
+    return res.status(400).json({ error: "Room doesn't exist." });
+})
+
+// Route API pour créer une nouvelle salle
+app.post('/api/room', (req, res) => {
+    const { type, team } = req.body;
+
+    if (!["TSHIRT", "FIBONACCI", "POWEROF2", "SEQUENTIAL", "TSHIRT_HALF"].includes(type)) {
+        return res.status(400).json({ error: "Invalid room type" });
+    }
+
+    const roomId = createRoomId();
+    const formattedTeam = (team || 'NFS').trim().charAt(0).toUpperCase() + (team || 'NFS').slice(1).toLowerCase();
+
+    // Initialisation des données de la salle
+    const roomData = {
+        team: formattedTeam,
+        cards: [],
+        state: 'waiting',
+        userStory: ''
+    };
+
+    // Associer les cartes en fonction du type de salle
+    switch (type) {
+        case "TSHIRT":
+            roomData.cards = ['XS', 'S', 'M', 'L', 'XL', 'XXL'];
+            break;
+        case "FIBONACCI":
+            roomData.cards = ["1", "2", "3", "5", "8", "13", "21"];
+            break;
+        case "POWEROF2":
+            roomData.cards = ["1", "2", "4", "8", "16", "32"];
+            break;
+        case "SEQUENTIAL":
+            roomData.cards = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
+            break;
+        case "TSHIRT_HALF":
+            roomData.cards = ['XS', 'S', 'M', 'M/L', 'L', 'XL'];
+            break;
+        default:
+            return res.status(400).json({ error: "Unknown room type" });
+    }
+
+    // Ajouter la nouvelle salle à la liste des salles
+    rooms.set(roomId, { initialisation: true, data: roomData });
+    console.log("NEW ROOM CREATED", rooms);
+
+    // Répondre avec l'ID de la salle
+    res.json({ roomId });
+});
+
+// Création du serveur HTTP et intégration d'Express
+const server = http.createServer(app);
+
+// Créez le serveur Socket.IO en l'associant au serveur HTTP
+createSocketIOServer(server, rooms);
+
+// Démarrez le serveur
+const PORT = 5876;
+server.listen(PORT, () => {
+    console.log(`Server listening on port ${PORT}`);
+});
diff --git a/backend/package-lock.json b/backend/package-lock.json
new file mode 100644
index 0000000..d71cd10
--- /dev/null
+++ b/backend/package-lock.json
@@ -0,0 +1,1019 @@
+{
+  "name": "backend",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "backend",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "cors": "^2.8.5",
+        "express": "^4.21.1",
+        "socket.io": "^4.8.1",
+        "uuid": "^11.0.2"
+      }
+    },
+    "node_modules/@socket.io/component-emitter": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
+      "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/cookie": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
+      "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==",
+      "license": "MIT"
+    },
+    "node_modules/@types/cors": {
+      "version": "2.8.17",
+      "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.17.tgz",
+      "integrity": "sha512-8CGDvrBj1zgo2qE+oS3pOCyYNqCPryMWY2bGfwA0dcfopWGgxs+78df0Rs3rc9THP4JkOhLsAa+15VdpAqkcUA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "22.8.4",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.8.4.tgz",
+      "integrity": "sha512-SpNNxkftTJOPk0oN+y2bIqurEXHTA2AOZ3EJDDKeJ5VzkvvORSvmQXGQarcOzWV1ac7DCaPBEdMDxBsM+d8jWw==",
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.19.8"
+      }
+    },
+    "node_modules/accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
+      "license": "MIT"
+    },
+    "node_modules/base64id": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz",
+      "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==",
+      "license": "MIT",
+      "engines": {
+        "node": "^4.5.0 || >= 5.9"
+      }
+    },
+    "node_modules/body-parser": {
+      "version": "1.20.3",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
+      "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "3.1.2",
+        "content-type": "~1.0.5",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "on-finished": "2.4.1",
+        "qs": "6.13.0",
+        "raw-body": "2.5.2",
+        "type-is": "~1.6.18",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/body-parser/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/body-parser/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "license": "MIT"
+    },
+    "node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
+      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/content-disposition": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "5.2.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/content-type": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
+      "license": "MIT"
+    },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/destroy": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+      "license": "MIT"
+    },
+    "node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/engine.io": {
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.6.2.tgz",
+      "integrity": "sha512-gmNvsYi9C8iErnZdVcJnvCpSKbWTt1E8+JZo8b+daLninywUWi5NQ5STSHZ9rFjFO7imNcvb8Pc5pe/wMR5xEw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/cookie": "^0.4.1",
+        "@types/cors": "^2.8.12",
+        "@types/node": ">=10.0.0",
+        "accepts": "~1.3.4",
+        "base64id": "2.0.0",
+        "cookie": "~0.7.2",
+        "cors": "~2.8.5",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.2.1",
+        "ws": "~8.17.1"
+      },
+      "engines": {
+        "node": ">=10.2.0"
+      }
+    },
+    "node_modules/engine.io-parser": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
+      "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
+      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "license": "MIT",
+      "dependencies": {
+        "get-intrinsic": "^1.2.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "license": "MIT"
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express": {
+      "version": "4.21.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz",
+      "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==",
+      "license": "MIT",
+      "dependencies": {
+        "accepts": "~1.3.8",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.20.3",
+        "content-disposition": "0.5.4",
+        "content-type": "~1.0.4",
+        "cookie": "0.7.1",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "1.3.1",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "merge-descriptors": "1.0.3",
+        "methods": "~1.1.2",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.10",
+        "proxy-addr": "~2.0.7",
+        "qs": "6.13.0",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.2.1",
+        "send": "0.19.0",
+        "serve-static": "1.16.2",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/express/node_modules/cookie": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz",
+      "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/express/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "license": "MIT"
+    },
+    "node_modules/finalhandler": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
+      "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "2.6.9",
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "statuses": "2.0.1",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/finalhandler/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/finalhandler/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "license": "MIT"
+    },
+    "node_modules/forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "license": "MIT",
+      "dependencies": {
+        "get-intrinsic": "^1.1.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
+      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/http-errors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "depd": "2.0.0",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "toidentifier": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
+    "node_modules/ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/merge-descriptors": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
+      "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "license": "MIT",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
+      "integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "license": "MIT",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/path-to-regexp": {
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
+      "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==",
+      "license": "MIT"
+    },
+    "node_modules/proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "license": "MIT",
+      "dependencies": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
+      "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.0.6"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/raw-body": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
+      "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "3.1.2",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
+    "node_modules/send": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
+      "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "mime": "1.6.0",
+        "ms": "2.1.3",
+        "on-finished": "2.4.1",
+        "range-parser": "~1.2.1",
+        "statuses": "2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/send/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/send/node_modules/debug/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "license": "MIT"
+    },
+    "node_modules/send/node_modules/encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/serve-static": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
+      "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
+      "license": "MIT",
+      "dependencies": {
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.19.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+      "license": "ISC"
+    },
+    "node_modules/side-channel": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
+      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4",
+        "object-inspect": "^1.13.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/socket.io": {
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.8.1.tgz",
+      "integrity": "sha512-oZ7iUCxph8WYRHHcjBEc9unw3adt5CmSNlppj/5Q4k2RIrhl8Z5yY2Xr4j9zj0+wzVZ0bxmYoGSzKJnRl6A4yg==",
+      "license": "MIT",
+      "dependencies": {
+        "accepts": "~1.3.4",
+        "base64id": "~2.0.0",
+        "cors": "~2.8.5",
+        "debug": "~4.3.2",
+        "engine.io": "~6.6.0",
+        "socket.io-adapter": "~2.5.2",
+        "socket.io-parser": "~4.2.4"
+      },
+      "engines": {
+        "node": ">=10.2.0"
+      }
+    },
+    "node_modules/socket.io-adapter": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.5.5.tgz",
+      "integrity": "sha512-eLDQas5dzPgOWCk9GuuJC2lBqItuhKI4uxGgo9aIV7MYbk2h9Q6uULEh8WBzThoI7l+qU9Ast9fVUmkqPP9wYg==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "~4.3.4",
+        "ws": "~8.17.1"
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
+      "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/statuses": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "license": "MIT",
+      "dependencies": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.19.8",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
+      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+      "license": "MIT"
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/uuid": {
+      "version": "11.0.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.0.2.tgz",
+      "integrity": "sha512-14FfcOJmqdjbBPdDjFQyk/SdT4NySW4eM0zcG+HqbHP5jzuH56xO3J1DGhgs/cEMCfwYi3HQI1gnTO62iaG+tQ==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/esm/bin/uuid"
+      }
+    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/ws": {
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    }
+  }
+}
diff --git a/backend/package.json b/backend/package.json
new file mode 100644
index 0000000..57b99ca
--- /dev/null
+++ b/backend/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "backend",
+  "version": "1.0.0",
+  "description": "Websocket for poker planning",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "cors": "^2.8.5",
+    "express": "^4.21.1",
+    "socket.io": "^4.8.1",
+    "uuid": "^11.0.2"
+  }
+}
diff --git a/src/lib/rooms.ts b/backend/rooms.js
similarity index 68%
rename from src/lib/rooms.ts
rename to backend/rooms.js
index e1ae981..b7e3c17 100644
--- a/src/lib/rooms.ts
+++ b/backend/rooms.js
@@ -1,8 +1,6 @@
-import { writable } from "svelte/store";
+const rooms = new Map()
 
-export const rooms = new Map()
-
-export const createRoomId = () => {
+const createRoomId = () => {
     let newId;
     do {
         const part1 = Math.floor(Math.random() * 1000).toString().padStart(3, '0');
@@ -13,6 +11,12 @@ export const createRoomId = () => {
     return newId;
 };
 
-export const roomExist = (roomId) => {
+const roomExist = (roomId) => {
     return rooms.has(roomId)
 }
+
+module.exports = {
+    rooms,
+    roomExist,
+    createRoomId
+}
\ No newline at end of file
diff --git a/ws.js b/backend/server.js
similarity index 58%
rename from ws.js
rename to backend/server.js
index 9c92d44..a59a809 100644
--- a/ws.js
+++ b/backend/server.js
@@ -1,23 +1,20 @@
-import { WebSocket, WebSocketServer } from 'ws';
-import { v4 as uuidv4 } from 'uuid';
-import { createRoomId } from './src/lib/rooms';
+const { Server } = require('socket.io');
+const { v4: uuidv4 } = require('uuid');
+const { createRoomId } = require('./rooms');
 
 /**
- * @type {WebSocketServer}
+ * @type {Server}
  */
-let wss;
+let io;
 
-export const createWSSGlobalInstance = (rooms) => {
-    if (wss) return wss;
+const createSocketIOServer = (server, rooms) => {
+    if (io) return io;
 
-    /**
-     * @param {string} id
-     */
     function getRooms(roomId) {
-        let room = rooms.get(roomId)
+        let room = rooms.get(roomId);
 
         if (!room) {
-            return null
+            return null;
         }
 
         if (room?.initialisation) {
@@ -32,16 +29,14 @@ export const createWSSGlobalInstance = (rooms) => {
                     object.players.forEach((player) => {
                         if (manager) {
                             if (player.manager) {
-                                player.socket.send(JSON.stringify({ type, data }));
+                                player.socket.emit(type, data);
                             }
-                        }
-                        else {
-                            player.socket.send(JSON.stringify({ type, data }));
+                        } else {
+                            player.socket.emit(type, data);
                         }
                     });
                 },
                 emitPlayers() {
-                    /** @type {any[]} */
                     const players = [];
                     object.players.forEach((player, id) => {
                         if (!player.manager) {
@@ -50,71 +45,64 @@ export const createWSSGlobalInstance = (rooms) => {
                     });
 
                     object.players.forEach((player) => {
-                        // if (player.manager) {
-                        player.socket.send(JSON.stringify({ type: "players", data: players }));
-                        // }
+                        player.socket.emit("players", players);
                     });
                 },
                 emitUpdateGame(state) {
-                    let element = { ...object.data }
-
+                    let element = { ...object.data };
 
                     if (state == "result") {
-                        let results = new Map()
-                        let itemsName = []
+                        let results = new Map();
+                        let itemsName = [];
                         object.players.forEach((player, id) => {
                             if (!player.manager && player.selectedCard) {
-                                let item = results.get(player?.selectedCard?.toUpperCase?.())
+                                let item = results.get(player?.selectedCard?.toUpperCase?.());
 
                                 if (!item) {
-                                    itemsName.push(player?.selectedCard?.toUpperCase?.())
-                                    item = []
+                                    itemsName.push(player?.selectedCard?.toUpperCase?.());
+                                    item = [];
                                 }
 
-                                item.push(player.name)
-
-                                results.set(player?.selectedCard?.toUpperCase?.(), item)
+                                item.push(player.name);
+                                results.set(player?.selectedCard?.toUpperCase?.(), item);
                             }
                         });
 
                         if (itemsName.length > 0) {
                             try {
                                 if (itemsName.length > 1) {
-                                    const item = itemsName[Math.floor(Math.random() * itemsName.length)]
-                                    const itemUsers = results.get(item)
-                                    const userSelected = itemUsers[Math.floor(Math.random() * itemUsers.length)]
+                                    const item = itemsName[Math.floor(Math.random() * itemsName.length)];
+                                    const itemUsers = results.get(item);
+                                    const userSelected = itemUsers[Math.floor(Math.random() * itemUsers.length)];
 
                                     object.data.defender = element.defender = {
                                         name: userSelected,
-                                        item
-                                    }
+                                        item,
+                                    };
                                 }
 
-                                let resultArray = Array.from(results).sort((a, b) => b[1].length - a[1].length)
-
-                                object.data.result = element.result = resultArray
-                            }
-                            catch (e) {
-                                console.error("ERROR WHEN PROCESS RESULT", e)
+                                let resultArray = Array.from(results).sort((a, b) => b[1].length - a[1].length);
+                                object.data.result = element.result = resultArray;
+                            } catch (e) {
+                                console.error("ERROR WHEN PROCESS RESULT", e);
                             }
                         }
-                    }
-                    else {
-                        object.data.result = object.data.defender = null
+                    } else {
+                        object.data.result = object.data.defender = null;
                     }
 
                     object.emit('game-update', element);
                 },
                 resetChoose() {
                     object.players.forEach((player) => {
-                        object.players.set(player.socket.userId, { ...player, selectedCard: null })
-                    })
-                    this.emitPlayers()
-                }
+                        object.players.set(player.socket.userId, { ...player, selectedCard: null });
+                    });
+                    this.emitPlayers();
+                },
             };
 
             if (object.data) {
-                object.data = { ...object.data, ...room.data }
+                object.data = { ...object.data, ...room.data };
             }
 
             rooms.set(roomId, (room = object));
@@ -128,55 +116,48 @@ export const createWSSGlobalInstance = (rooms) => {
         return trimmedName.charAt(0).toUpperCase() + trimmedName.slice(1).toLowerCase();
     }
 
+    io = new Server(server, { cors: { origin: "*" } });
 
-    wss = new WebSocketServer({ noServer: true });
-    wss.on(
-        'connection',
-        (
-			/** @type {WebSocket} */ ws,
-			/** @type {string} */ roomId,
-			/** @type {string} */ name,
-            /** @type {boolean} */ manager,
-        ) => {
-            const room = getRooms(roomId)
-            console.log("> Room", room)
+    io.on('connection', (socket) => {
+        socket.on('join', ({ roomId, name, manager }) => {
+            const room = getRooms(roomId);
+
+            console.log(roomId, name, manager)
 
             if (!room) {
-                console.warn("Want to join room doesn't exist")
-                return ws.close(1000, "Room doesn't exist");
+                console.warn("Room doesn't exist");
+                return socket.emit("error", { reason: "Room doesn't exist" });
             }
 
             if (!name) {
-                console.warn("User without name")
-                return ws.close(1000, "Can't join without name");
+                console.warn("User without name");
+                return socket.disconnect(true);
             }
 
             const userId = uuidv4();
             console.log('New connection with ID:', userId);
 
-            //check if room as timeout setup
             if (room.timeout) {
                 clearTimeout(room.timeout);
                 delete room.timeout;
                 console.log("Timeout removed for room", roomId, "because user", userId, "reconnected.");
             }
 
-            ws.userId = userId;
-            //send to user actual state of game
-            ws.send(JSON.stringify({ type: "game-update", data: room.data }));
+            socket.userId = userId;
+            socket.emit("game-update", room.data);
 
             const player = {
-                socket: ws,
+                socket,
                 name: formatName(name),
                 selectedCard: null,
-                manager
+                manager,
             };
 
             room.players.set(userId, player);
             room.emitPlayers();
 
-            ws.on('close', () => {
-                console.log(`User ${userId} disconnected`)
+            socket.on("leave-room", () => {
+                console.log(`User leave room ${userId}`);
                 room.players.delete(userId);
 
                 if (room.players.size) {
@@ -185,115 +166,114 @@ export const createWSSGlobalInstance = (rooms) => {
                     room.timeout = setTimeout(() => {
                         if (!room.players.size) {
                             rooms.delete(roomId);
-                            console.log(`Room ${roomId} supprimée après inactivité.`);
+                            console.log(`Room ${roomId} deleted after inactivity.`);
                         }
                     }, 3600000);
                 }
-            });
+            })
 
+            socket.on('disconnect', () => {
+                console.log(`User ${userId} disconnected`);
+                room.players.delete(userId);
 
-            ws.on('message', async (raw) => {
-                const { type, data } = JSON.parse(raw.toString());
+                if (room.players.size) {
+                    room.emitPlayers();
+                } else {
+                    room.timeout = setTimeout(() => {
+                        if (!room.players.size) {
+                            rooms.delete(roomId);
+                            console.log(`Room ${roomId} deleted after inactivity.`);
+                        }
+                    }, 3600000);
+                }
+            });
 
+            socket.on('message', ({ type, data }) => {
                 switch (type) {
-                    //Game event
                     case 'vote': {
                         const player = room.players.get(userId);
-                        if (!room?.data?.cards?.includes?.(data.card)) {
-                            return
-                        }
-
-                        player.selectedCard = data.card
-                        room.players.set(userId, player)
-                        room.emitPlayers()
-                        ws.send(JSON.stringify({ type: "success", success: true }));
+                        if (!room?.data?.cards?.includes?.(data.card)) return;
 
-                    }
+                        player.selectedCard = data.card;
+                        room.players.set(userId, player);
+                        room.emitPlayers();
+                        socket.emit("success", { success: true });
                         break;
+                    }
                     case 'state': {
-                        room.data.state = data.state
+                        room.data.state = data.state;
                         if (data.userStory) {
-                            room.data.userStory = data.userStory
+                            room.data.userStory = data.userStory;
                         }
 
-                        if (data.state == "playing") {
-                            room.resetChoose()
+                        if (data.state === "playing") {
+                            room.resetChoose();
                         }
 
-                        room.emitUpdateGame(data.state)
-                    }
+                        room.emitUpdateGame(data.state);
                         break;
+                    }
                     case 'ping':
-                        ws.send(JSON.stringify({ type: "pong", success: true }));
+                        socket.emit("pong", { success: true });
                         break;
-
-                    //Fun Event
                     case 'hexcode':
-                        room.data.hexcode = data.hexcode
-                        room.emit("hexcode", { hexcode: data.hexcode }, false)
+                        room.data.hexcode = data.hexcode;
+                        room.emit("hexcode", { hexcode: data.hexcode }, false);
                         break;
-
-                    default: {
-                        console.log(`EVENT ${type} doesn't exist`)
-                    }
+                    default:
+                        console.log(`EVENT ${type} doesn't exist`);
                 }
             });
-        }
-    );
-
-    wss.on(
-        'create',
-        (
-			/** @type {WebSocket} */ ws,
-            /** @type {string} */ type,
-            /** @type {string} */ team,
-        ) => {
-            if (type && !["TSHIRT", "FIBONACCI", "POWEROF2", "SEQUENTIAL", "TSHIRT_HALF"].includes(type)) {
-                console.warn(`Error: want to create room with type: ${type}`)
-                return ws.close(1000, "Type doesn't exist");
+        });
+
+        socket.on('create', ({ type, team }) => {
+            if (!["TSHIRT", "FIBONACCI", "POWEROF2", "SEQUENTIAL", "TSHIRT_HALF"].includes(type)) {
+                console.warn(`Invalid room type: ${type}`);
+                return socket.disconnect(true);
             }
 
-            const roomId = createRoomId()
+            const roomId = createRoomId();
             rooms.set(roomId, { reserved: true });
 
             let object = {
                 team: formatName(team || 'NFS'),
                 cards: [],
                 state: 'waiting',
-                userStory: ''
-            }
+                userStory: '',
+            };
 
             switch (type) {
                 case "TSHIRT":
                     object.cards = ['XS', 'S', 'M', 'L', 'XL', 'XXL'];
                     break;
-
                 case "FIBONACCI":
                     object.cards = ["1", "2", "3", "5", "8", "13", "21"];
                     break;
-
                 case "POWEROF2":
                     object.cards = ["1", "2", "4", "8", "16", "32"];
                     break;
-
                 case "SEQUENTIAL":
                     object.cards = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
                     break;
-
                 case "TSHIRT_HALF":
                     object.cards = ['XS', 'S', 'M', 'M/L', 'L', 'XL'];
                     break;
-
                 default:
                     console.warn(`Unknown type: ${type}`);
                     break;
             }
 
             rooms.set(roomId, { initialisation: true, data: object });
-            console.log("NEW ROOM CREATE", rooms)
+            console.log("NEW ROOM CREATED", rooms);
 
-            ws.send(JSON.stringify({ type: "created", data: { roomId } }));
-        })
+            socket.emit("created", { roomId });
+        });
+    });
 
-    return wss;
+    return io;
 };
+
+
+module.exports = {
+    createSocketIOServer
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 640573b..5adef0c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
 			"dependencies": {
 				"chroma-js": "^3.1.2",
 				"preprocess": "^3.2.0",
+				"socket.io-client": "^4.8.1",
 				"svelte-confetti": "^2.1.2",
 				"svelte-sonner": "^0.3.28",
 				"uuid": "^10.0.0",
@@ -1227,6 +1228,12 @@
 				"win32"
 			]
 		},
+		"node_modules/@socket.io/component-emitter": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
+			"integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
+			"license": "MIT"
+		},
 		"node_modules/@sveltejs/adapter-auto": {
 			"version": "3.3.0",
 			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-3.3.0.tgz",
@@ -1811,7 +1818,6 @@
 			"version": "4.3.7",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
 			"integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"ms": "^2.1.3"
@@ -1862,6 +1868,49 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/engine.io-client": {
+			"version": "6.6.2",
+			"resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.2.tgz",
+			"integrity": "sha512-TAr+NKeoVTjEVW8P3iHguO1LO6RlUz9O5Y8o7EY0fU+gY1NYqas7NN3slpFtbXEsLMHk0h90fJMfKjRkQ0qUIw==",
+			"license": "MIT",
+			"dependencies": {
+				"@socket.io/component-emitter": "~3.1.0",
+				"debug": "~4.3.1",
+				"engine.io-parser": "~5.2.1",
+				"ws": "~8.17.1",
+				"xmlhttprequest-ssl": "~2.1.1"
+			}
+		},
+		"node_modules/engine.io-client/node_modules/ws": {
+			"version": "8.17.1",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+			"integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=10.0.0"
+			},
+			"peerDependencies": {
+				"bufferutil": "^4.0.1",
+				"utf-8-validate": ">=5.0.2"
+			},
+			"peerDependenciesMeta": {
+				"bufferutil": {
+					"optional": true
+				},
+				"utf-8-validate": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/engine.io-parser": {
+			"version": "5.2.3",
+			"resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
+			"integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=10.0.0"
+			}
+		},
 		"node_modules/esbuild": {
 			"version": "0.21.5",
 			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
@@ -2662,7 +2711,6 @@
 			"version": "2.1.3",
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
 			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/nanoid": {
@@ -3184,6 +3232,34 @@
 				"node": ">=18"
 			}
 		},
+		"node_modules/socket.io-client": {
+			"version": "4.8.1",
+			"resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.1.tgz",
+			"integrity": "sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@socket.io/component-emitter": "~3.1.0",
+				"debug": "~4.3.2",
+				"engine.io-client": "~6.6.1",
+				"socket.io-parser": "~4.2.4"
+			},
+			"engines": {
+				"node": ">=10.0.0"
+			}
+		},
+		"node_modules/socket.io-parser": {
+			"version": "4.2.4",
+			"resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
+			"integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
+			"license": "MIT",
+			"dependencies": {
+				"@socket.io/component-emitter": "~3.1.0",
+				"debug": "~4.3.1"
+			},
+			"engines": {
+				"node": ">=10.0.0"
+			}
+		},
 		"node_modules/source-map-js": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -3623,6 +3699,14 @@
 				}
 			}
 		},
+		"node_modules/xmlhttprequest-ssl": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz",
+			"integrity": "sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==",
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
 		"node_modules/xregexp": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/xregexp/-/xregexp-3.1.0.tgz",
diff --git a/package.json b/package.json
index 0139e60..260a245 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
 	"version": "0.0.1",
 	"type": "module",
 	"scripts": {
+		"startserv": "node server.js",
 		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
@@ -32,6 +33,7 @@
 	"dependencies": {
 		"chroma-js": "^3.1.2",
 		"preprocess": "^3.2.0",
+		"socket.io-client": "^4.8.1",
 		"svelte-confetti": "^2.1.2",
 		"svelte-sonner": "^0.3.28",
 		"uuid": "^10.0.0",
diff --git a/src/lib/webSocketConnection.js b/src/lib/webSocketConnection.js
new file mode 100644
index 0000000..89a3592
--- /dev/null
+++ b/src/lib/webSocketConnection.js
@@ -0,0 +1,5 @@
+import ioClient from 'socket.io-client';
+
+const socket = ioClient(import.meta.env.VITE_BACKEND_URL);
+
+export const io = socket;
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 35162a7..1883c6b 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,8 @@
 <script>
 	import { Toaster } from 'svelte-sonner';
 	import '../app.scss';
+
+	import { io } from '$lib/webSocketConnection.js';
 </script>
 
 <Toaster position="bottom-left" richColors />
diff --git a/src/routes/create/+page.svelte b/src/routes/create/+page.svelte
index 8a5e664..6383c9a 100644
--- a/src/routes/create/+page.svelte
+++ b/src/routes/create/+page.svelte
@@ -3,33 +3,32 @@
 	import { onDestroy, onMount } from 'svelte';
 	import { quintOut } from 'svelte/easing';
 	import { scale } from 'svelte/transition';
+	import { io } from '$lib/webSocketConnection.js';
 
 	let type = $state();
 	let team = $state('');
 	let submitting = $state(false);
 
-	let ws;
-
 	const create = async () => {
 		submitting = true;
 		try {
-			const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-			ws = new WebSocket(
-				`${protocol}//${window.location.host}/create-room?${new URLSearchParams({
+			const myHeaders = new Headers();
+			myHeaders.append('Content-Type', 'application/json');
+
+			const res = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/room`, {
+				method: 'POST',
+				headers: myHeaders,
+				body: JSON.stringify({
 					type,
 					team
-				})}`
-			);
-
-			ws.onmessage = (e) => {
-				const payload = JSON.parse(e.data);
-				console.log('Event Payload', payload);
-				switch (payload.type) {
-					case 'created':
-						goto(`/manager/${payload?.data.roomId}`);
-						break;
-				}
-			};
+				})
+			})
+				.then((response) => response.json())
+				.catch((error) => console.error(error));
+
+			if (res && res.roomId) {
+				goto(`/manager/${res.roomId}`);
+			}
 		} catch (error) {
 			console.log('Create Error', error);
 		}
@@ -50,16 +49,6 @@
 		team = window.localStorage.getItem('team') || '';
 	});
 
-	onDestroy(() => {
-		try {
-			if (ws) {
-				ws.close();
-			}
-		} catch (error) {
-			console.log('Destroy Error', error);
-		}
-	});
-
 	$effect(() => {
 		window.localStorage.setItem('type', type);
 	});
@@ -71,7 +60,7 @@
 
 <main in:scale={{ duration: 300, easing: quintOut }}>
 	<h1>Créer un nouveau poker planning <span class="animateJoker">🃏</span></h1>
-	<form onsubmit={create}>
+	<form on:submit|preventDefault={create}>
 		<input bind:value={team} placeholder="Nom De La Team" />
 		<select bind:value={type}>
 			{#each choices as choice}
diff --git a/src/routes/join/+page.svelte b/src/routes/join/+page.svelte
index db2988b..ada3537 100644
--- a/src/routes/join/+page.svelte
+++ b/src/routes/join/+page.svelte
@@ -2,18 +2,29 @@
 	import { goto } from '$app/navigation';
 	import { toast } from 'svelte-sonner';
 
-	let roomId = '';
+	let roomId = $state('');
 	let submitting = $state(false);
 
 	const join = async () => {
 		submitting = true;
-		try {
-			await goto(`/rooms/${roomId}`);
-		} catch (error) {
-			toast.warning("Ce poker planning n'existe pas.");
-		} finally {
-			submitting = false;
+
+		const myHeaders = new Headers();
+		myHeaders.append('Content-Type', 'application/json');
+
+		const res = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/room?roomId=${roomId}`, {
+			method: 'GET',
+			headers: myHeaders
+		})
+			.then((response) => response.json())
+			.catch((error) => console.error(error));
+
+		if (res && res.roomId) {
+			return goto(`/rooms/${res.roomId}`);
 		}
+
+		toast.error("La room n'existe pas...");
+
+		submitting = false;
 	};
 
 	function handleInput(event) {
diff --git a/src/routes/manager/[id]/+page.svelte b/src/routes/manager/[id]/+page.svelte
index 67d515a..f7834b8 100644
--- a/src/routes/manager/[id]/+page.svelte
+++ b/src/routes/manager/[id]/+page.svelte
@@ -4,6 +4,7 @@
 	import Code from '$lib/components/Code.svelte';
 	import TextArea from '$lib/components/Textarea.svelte';
 	import myshades from '$lib/myshades';
+	import { io } from '$lib/webSocketConnection';
 	import { onDestroy, onMount } from 'svelte';
 	import { toast } from 'svelte-sonner';
 	import { backOut } from 'svelte/easing';
@@ -38,88 +39,66 @@
 
 	const connect = () => {
 		const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-		ws = new WebSocket(
-			`${protocol}//${window.location.host}/websocket?${new URLSearchParams({
-				roomId,
-				username: 'ADMIN',
-				manager: true
-			})}`
-		);
-
-		ws.onclose = (e) => {
+		io.emit('join', { roomId, name: 'ADMIN', manager: true });
+		// 858-616
+
+		io.on('error', (e) => {
 			if (e.reason == "Room doesn't exist") {
 				toast.error("Ce poker planning n'existe pas !");
 				goto('/create');
 			}
-		};
+		});
 
-		ws.onmessage = (e) => {
-			const payload = JSON.parse(e.data);
-			console.log('Event Payload', payload);
+		io.on('players', (payload) => {
+			users = payload;
+		});
 
-			switch (payload.type) {
-				case 'players':
-					{
-						users = payload.data;
-					}
-					break;
-				case 'state':
-					{
-						pokerManager.state = payload.data.state;
-					}
-					break;
-				case 'game-update':
-					{
-						if (payload?.data?.hexcode && pokerManager?.hexcode != payload?.data?.hexcode) {
-							myshades({
-								primary: payload.data.hexcode
-							});
-						}
-						pokerManager = payload.data;
-					}
-					break;
-				case 'hexcode':
-					{
-						myshades({
-							primary: payload.data.hexcode
-						});
-					}
-					break;
-			}
-		};
+		io.on('state', (payload) => {
+			pokerManager.state = payload.state;
+		});
 
-		ws.onerror = (e) => {
-			console.error('WEBSOCKET ERROR', e);
-		};
+		io.on('game-update', (payload) => {
+			if (payload?.hexcode && pokerManager?.hexcode != payload?.hexcode) {
+				myshades({
+					primary: payload.hexcode
+				});
+			}
+			pokerManager = payload;
+		});
+
+		io.on('hexcode', (payload) => {
+			myshades({
+				primary: payload.hexcode
+			});
+		});
 	};
 
 	onMount(() => {
 		url = `${window.location.protocol}//${window.location.host}/rooms/${roomId}`;
 		connect();
-		interval = heartbeat();
 	});
 
 	onDestroy(() => {
-		if (interval) {
-			clearInterval(interval);
-		}
-
-		if (ws) {
-			ws.close();
+		if (io) {
+			io.emit('leave-room', { roomId });
 		}
 	});
 
 	const changeState = (state) => {
-		ws.send(JSON.stringify({ type: 'state', data: { state, userStory: pokerManager.userStory } }));
+		if (checkSocketConnected()) {
+			io.send({ type: 'state', data: { state, userStory: pokerManager.userStory } });
+		}
 	};
 
-	const heartbeat = () => {
-		return setInterval(() => {
-			if (ws && ws.readyState === WebSocket.OPEN) {
-				console.log('SEND PING', ws);
-				ws.send(JSON.stringify({ type: 'ping', data: { message: 'ping' } }));
-			}
-		}, 10000);
+	const checkSocketConnected = () => {
+		console.log('io.connected', io.connected);
+
+		if (!io.connected) {
+			toast.error('Websocket not connected...');
+			return false;
+		}
+
+		return true;
 	};
 </script>
 
diff --git a/src/routes/rooms/[id]/+page.svelte b/src/routes/rooms/[id]/+page.svelte
index e5517cd..b7293af 100644
--- a/src/routes/rooms/[id]/+page.svelte
+++ b/src/routes/rooms/[id]/+page.svelte
@@ -8,6 +8,7 @@
 	import { quintInOut, quintOut } from 'svelte/easing';
 	import { Confetti } from 'svelte-confetti';
 	import myshades from '$lib/myshades';
+	import { io } from '$lib/webSocketConnection';
 
 	let roomId = $page.params.id;
 
@@ -36,7 +37,7 @@
 			username = window.localStorage.getItem('username');
 		}
 
-		interval = heartbeat();
+		// interval = heartbeat();
 	});
 
 	onDestroy(() => {
@@ -44,8 +45,8 @@
 			clearInterval(interval);
 		}
 
-		if (ws) {
-			ws.close();
+		if (io) {
+			io.emit('leave-room', { roomId, name: username });
 		}
 	});
 
@@ -57,15 +58,6 @@
 		window.localStorage.setItem('username', username);
 	});
 
-	const heartbeat = () => {
-		return setInterval(() => {
-			if (ws && ws.readyState === WebSocket.OPEN) {
-				console.log('SEND PING', ws);
-				ws.send(JSON.stringify({ type: 'ping', data: { message: 'ping' } }));
-			}
-		}, 10000);
-	};
-
 	const connect = () => {
 		if (username.trim() == '') {
 			return toast.info("J'aimerai savoir comment tu t'appelles !");
@@ -74,72 +66,76 @@
 		try {
 			submitting = true;
 			const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-			ws = new WebSocket(
-				`${protocol}//${window.location.host}/websocket?${new URLSearchParams({
-					roomId,
-					username
-				})}`
-			);
-
-			ws.onmessage = (e) => {
-				const payload = JSON.parse(e.data);
-				console.log('Event Payload', payload);
-
-				switch (payload.type) {
-					case 'game-update':
-						resultsItem = null;
-						resultDefender = null;
-
-						if (payload.data.state == 'playing' && payload.data.state != pokerManager?.state) {
-							selectedLetter = null;
-							submittedLetter = null;
-						} else if (payload?.data?.state == 'result') {
-							if (payload?.data?.result) {
-								resultsItem = payload.data.result;
-							}
-
-							if (payload?.data?.defender) {
-								resultDefender = payload.data.defender;
-							}
-						}
-
-						if (pokerManager?.hexcode != payload?.data?.hexcode) {
-							myshades({
-								primary: payload.data.hexcode
-							});
-						}
-						pokerManager = payload.data;
-						break;
-					case 'success':
-						if (payload?.success) {
-							if (timeout) {
-								clearTimeout(timeout);
-								timeout = null;
-							}
-						}
-						break;
-					case 'players':
-						players = payload.data;
-						break;
-
-					case 'hexcode':
-						myshades({
-							primary: payload.data.hexcode
-						});
-						break;
+			// ws = new WebSocket(
+			// 	`${protocol}//${window.location.host}/websocket?${new URLSearchParams({
+			// 		roomId,
+			// 		username
+			// 	})}`
+			// );
+
+			io.emit('join', { roomId, name: username });
+
+			io.on('game-update', (payload) => {
+				console.log('payload', payload);
+				resultsItem = null;
+				resultDefender = null;
+
+				if (payload.state == 'playing' && payload.state != pokerManager?.state) {
+					selectedLetter = null;
+					submittedLetter = null;
+				} else if (payload?.state == 'result') {
+					if (payload?.result) {
+						resultsItem = payload.result;
+					}
+
+					if (payload?.defender) {
+						resultDefender = payload.defender;
+					}
+				}
+
+				if (pokerManager?.hexcode != payload?.hexcode) {
+					myshades({
+						primary: payload.hexcode
+					});
+				}
+				pokerManager = payload;
+			});
+
+			io.on('success', (payload) => {
+				console.log('payload sucess', payload);
+				if (payload?.success) {
+					if (timeout) {
+						clearTimeout(timeout);
+						timeout = null;
+					}
 				}
-			};
+			});
+
+			io.on('players', (payload) => {
+				players = payload;
+			});
+
+			io.on('hexcode', (payload) => {
+				myshades({
+					primary: payload.hexcode
+				});
+			});
+
+			io.on('error', (e) => {
+				console.error('WEBSOCKET ERROR', e);
 
-			ws.onclose = (e) => {
 				if (e.reason == "Room doesn't exist") {
 					toast.error("Ce poker planning n'existe pas.");
 					goto('/join');
 				}
-			};
-
-			ws.onerror = (e) => {
-				console.error('WEBSOCKET ERROR', e);
-			};
+			});
+
+			io.on('reconnect', (attempt) => {
+				console.info(`Reconnecté après ${attempt} tentatives.`);
+				toast.success('Reconnecté au serveur !');
+				// Réémission des informations d'identification
+				io.emit('join', { roomId, name: username });
+			});
 		} catch (e) {
 			console.error('Websocket error', e);
 		} finally {
@@ -154,7 +150,7 @@
 			selectedLetter = null;
 		}, 2000);
 
-		ws.send(JSON.stringify({ type: 'vote', data: { card: selectedLetter } }));
+		io.send({ type: 'vote', data: { card: selectedLetter } });
 		submittedLetter = selectedLetter;
 	};
 
@@ -174,7 +170,7 @@
 			return toast.error(`Le code hexa '${hexcode}' n'est pas valide`);
 		}
 
-		ws.send(JSON.stringify({ type: 'hexcode', data: { hexcode } }));
+		io.send({ type: 'hexcode', data: { hexcode } });
 	};
 
 	const isPositionFree = (top, left) => {
diff --git a/vite.config.ts b/vite.config.ts
index 699bdb8..1ef394a 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,37 +1,38 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
-import { createWSSGlobalInstance } from './ws.js';
-import { rooms } from './src/lib/rooms';
+// import { createWSSGlobalInstance } from './ws.js';
+// import { rooms } from './src/lib/rooms';
 
 export default defineConfig({
 	plugins: [sveltekit(),
-	{
-		name: 'Websocket-server',
-		configureServer(server) {
-			const wss = createWSSGlobalInstance(rooms);
-			server.httpServer?.on('upgrade', (req, socket, headers) => {
-				const [pathname, query] = req.url.split('?');
-				if (pathname === '/websocket' && wss) {
-					wss.handleUpgrade(req, socket, headers, (client, req) => {
-						const params = new URLSearchParams(query);
-						const roomId = params.get('roomId');
-						const username = params.get('username');
-						const manager = params.get('manager') || false
-						wss.emit('connection', client, roomId, username, manager);
-					});
-				}
+		// {
+		// 	name: 'Websocket-server',
+		// 	configureServer(server) {
+		// 		const wss = createWSSGlobalInstance(rooms);
+		// 		server.httpServer?.on('upgrade', (req, socket, headers) => {
+		// 			const [pathname, query] = req.url.split('?');
+		// 			if (pathname === '/websocket' && wss) {
+		// 				wss.handleUpgrade(req, socket, headers, (client, req) => {
+		// 					const params = new URLSearchParams(query);
+		// 					const roomId = params.get('roomId');
+		// 					const username = params.get('username');
+		// 					const manager = params.get('manager') || false
+		// 					wss.emit('connection', client, roomId, username, manager);
+		// 				});
+		// 			}
 
-				if (pathname === '/create-room' && wss) {
-					wss.handleUpgrade(req, socket, headers, (client, req) => {
-						const params = new URLSearchParams(query);
-						const type = params.get('type')
-						const team = params.get('team')
-						wss.emit('create', client, type, team);
-					});
-				}
-			});
-		}
-	}],
+		// 			if (pathname === '/create-room' && wss) {
+		// 				wss.handleUpgrade(req, socket, headers, (client, req) => {
+		// 					const params = new URLSearchParams(query);
+		// 					const type = params.get('type')
+		// 					const team = params.get('team')
+		// 					wss.emit('create', client, type, team);
+		// 				});
+		// 			}
+		// 		});
+		// 	}
+		// }
+	],
 	optimizeDeps: {
 		include: ['svelte-sonner']
 	},

From 8a194de67e27ce2dc8c768232a1cc2fdba1d4e67 Mon Sep 17 00:00:00 2001
From: FabienBounoir <bounoirfabien@gmail.com>
Date: Wed, 30 Oct 2024 19:38:26 +0100
Subject: [PATCH 02/18] =?UTF-8?q?fix:=20=F0=9F=90=9B=20api=20path?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/index.js               | 4 ++--
 src/routes/create/+page.svelte | 2 +-
 src/routes/join/+page.svelte   | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/backend/index.js b/backend/index.js
index f70d01f..0b0179b 100644
--- a/backend/index.js
+++ b/backend/index.js
@@ -12,7 +12,7 @@ app.use(express.json());
 
 app.use(cors())
 
-app.get("/api/room", (req, res) => {
+app.get("/room", (req, res) => {
     console.log("req.query;", req.query)
     const { roomId } = req.query;
 
@@ -24,7 +24,7 @@ app.get("/api/room", (req, res) => {
 })
 
 // Route API pour créer une nouvelle salle
-app.post('/api/room', (req, res) => {
+app.post('/room', (req, res) => {
     const { type, team } = req.body;
 
     if (!["TSHIRT", "FIBONACCI", "POWEROF2", "SEQUENTIAL", "TSHIRT_HALF"].includes(type)) {
diff --git a/src/routes/create/+page.svelte b/src/routes/create/+page.svelte
index 6383c9a..13b0bba 100644
--- a/src/routes/create/+page.svelte
+++ b/src/routes/create/+page.svelte
@@ -15,7 +15,7 @@
 			const myHeaders = new Headers();
 			myHeaders.append('Content-Type', 'application/json');
 
-			const res = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/room`, {
+			const res = await fetch(`${import.meta.env.VITE_BACKEND_URL}/room`, {
 				method: 'POST',
 				headers: myHeaders,
 				body: JSON.stringify({
diff --git a/src/routes/join/+page.svelte b/src/routes/join/+page.svelte
index ada3537..54bf20c 100644
--- a/src/routes/join/+page.svelte
+++ b/src/routes/join/+page.svelte
@@ -11,7 +11,7 @@
 		const myHeaders = new Headers();
 		myHeaders.append('Content-Type', 'application/json');
 
-		const res = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/room?roomId=${roomId}`, {
+		const res = await fetch(`${import.meta.env.VITE_BACKEND_URL}/room?roomId=${roomId}`, {
 			method: 'GET',
 			headers: myHeaders
 		})

From 9e04e081f7f474d80412e44236d8bca364488d19 Mon Sep 17 00:00:00 2001
From: FabienBounoir <bounoirfabien@gmail.com>
Date: Wed, 30 Oct 2024 23:27:26 +0100
Subject: [PATCH 03/18] =?UTF-8?q?fix:=20=F0=9F=90=9B=20cors=20origin?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/index.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/backend/index.js b/backend/index.js
index 0b0179b..e04d54a 100644
--- a/backend/index.js
+++ b/backend/index.js
@@ -12,6 +12,13 @@ app.use(express.json());
 
 app.use(cors())
 
+app.use((req, res, next) => {
+    res.setHeader('Access-Control-Allow-Origin', '*');
+    res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content, Accept, Content-Type, Authorization');
+    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');
+    next();
+});
+
 app.get("/room", (req, res) => {
     console.log("req.query;", req.query)
     const { roomId } = req.query;

From e8b1dc2b9c90c4608a350de0da27fa951646e85d Mon Sep 17 00:00:00 2001
From: FabienBounoir <bounoirfabien@gmail.com>
Date: Wed, 30 Oct 2024 23:34:42 +0100
Subject: [PATCH 04/18] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20change=20proce?=
 =?UTF-8?q?ss=20connection=20websocket?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/webSocketConnection.js       |  5 -----
 src/routes/+layout.svelte            |  2 --
 src/routes/create/+page.svelte       |  3 +--
 src/routes/manager/[id]/+page.svelte |  9 +++++----
 src/routes/rooms/[id]/+page.svelte   | 15 +++++----------
 5 files changed, 11 insertions(+), 23 deletions(-)
 delete mode 100644 src/lib/webSocketConnection.js

diff --git a/src/lib/webSocketConnection.js b/src/lib/webSocketConnection.js
deleted file mode 100644
index 89a3592..0000000
--- a/src/lib/webSocketConnection.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import ioClient from 'socket.io-client';
-
-const socket = ioClient(import.meta.env.VITE_BACKEND_URL);
-
-export const io = socket;
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 1883c6b..35162a7 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,8 +1,6 @@
 <script>
 	import { Toaster } from 'svelte-sonner';
 	import '../app.scss';
-
-	import { io } from '$lib/webSocketConnection.js';
 </script>
 
 <Toaster position="bottom-left" richColors />
diff --git a/src/routes/create/+page.svelte b/src/routes/create/+page.svelte
index 13b0bba..286bd0f 100644
--- a/src/routes/create/+page.svelte
+++ b/src/routes/create/+page.svelte
@@ -1,9 +1,8 @@
 <script>
 	import { goto } from '$app/navigation';
-	import { onDestroy, onMount } from 'svelte';
+	import { onMount } from 'svelte';
 	import { quintOut } from 'svelte/easing';
 	import { scale } from 'svelte/transition';
-	import { io } from '$lib/webSocketConnection.js';
 
 	let type = $state();
 	let team = $state('');
diff --git a/src/routes/manager/[id]/+page.svelte b/src/routes/manager/[id]/+page.svelte
index f7834b8..7c8e0ed 100644
--- a/src/routes/manager/[id]/+page.svelte
+++ b/src/routes/manager/[id]/+page.svelte
@@ -4,16 +4,17 @@
 	import Code from '$lib/components/Code.svelte';
 	import TextArea from '$lib/components/Textarea.svelte';
 	import myshades from '$lib/myshades';
-	import { io } from '$lib/webSocketConnection';
+	import type { Socket } from 'socket.io-client';
 	import { onDestroy, onMount } from 'svelte';
 	import { toast } from 'svelte-sonner';
 	import { backOut } from 'svelte/easing';
 	import { fly } from 'svelte/transition';
+	import ioClient from 'socket.io-client';
 
 	let roomId = $page.params.id;
 	let url = $state('');
 
-	let ws: WebSocket;
+	let io: Socket;
 	let interval: number | null;
 
 	let pokerManager = $state({
@@ -38,7 +39,7 @@
 	};
 
 	const connect = () => {
-		const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+		const io = ioClient(import.meta.env.VITE_BACKEND_URL);
 		io.emit('join', { roomId, name: 'ADMIN', manager: true });
 		// 858-616
 
@@ -80,7 +81,7 @@
 
 	onDestroy(() => {
 		if (io) {
-			io.emit('leave-room', { roomId });
+			io.disconnect();
 		}
 	});
 
diff --git a/src/routes/rooms/[id]/+page.svelte b/src/routes/rooms/[id]/+page.svelte
index b7293af..db51f04 100644
--- a/src/routes/rooms/[id]/+page.svelte
+++ b/src/routes/rooms/[id]/+page.svelte
@@ -8,14 +8,15 @@
 	import { quintInOut, quintOut } from 'svelte/easing';
 	import { Confetti } from 'svelte-confetti';
 	import myshades from '$lib/myshades';
-	import { io } from '$lib/webSocketConnection';
+	import type { Socket } from 'socket.io-client';
+	import ioClient from 'socket.io-client';
 
 	let roomId = $page.params.id;
 
 	let pokerManager = $state(null);
 	let hexcode = $state('');
 
-	let ws: WebSocket;
+	let io: Socket;
 
 	let timeout: number | null;
 	let interval: number | null;
@@ -46,7 +47,7 @@
 		}
 
 		if (io) {
-			io.emit('leave-room', { roomId, name: username });
+			io.disconnect();
 		}
 	});
 
@@ -65,13 +66,7 @@
 
 		try {
 			submitting = true;
-			const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-			// ws = new WebSocket(
-			// 	`${protocol}//${window.location.host}/websocket?${new URLSearchParams({
-			// 		roomId,
-			// 		username
-			// 	})}`
-			// );
+			const io = ioClient(import.meta.env.VITE_BACKEND_URL);
 
 			io.emit('join', { roomId, name: username });
 

From cfb14e9643c54e8afd270e06b5a48c1539cc35e0 Mon Sep 17 00:00:00 2001
From: FabienBounoir <bounoirfabien@gmail.com>
Date: Wed, 30 Oct 2024 23:53:10 +0100
Subject: [PATCH 05/18] =?UTF-8?q?test:=20=F0=9F=92=8D=20fixe=20cors?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/index.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/backend/index.js b/backend/index.js
index e04d54a..a690197 100644
--- a/backend/index.js
+++ b/backend/index.js
@@ -10,7 +10,10 @@ const app = express();
 // Middleware pour interpréter le JSON dans les requêtes
 app.use(express.json());
 
-app.use(cors())
+app.use(cors({
+    origin: "*",
+    methods: ["GET", "POST", "PATCH", "OPTIONS", "PUT"]
+}))
 
 app.use((req, res, next) => {
     res.setHeader('Access-Control-Allow-Origin', '*');

From 539896c660b8277ec7fdd30fcb19bad353753ee6 Mon Sep 17 00:00:00 2001
From: FabienBounoir <bounoirfabien@gmail.com>
Date: Thu, 31 Oct 2024 00:20:36 +0100
Subject: [PATCH 06/18] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20on=20event=20v?=
 =?UTF-8?q?ersion?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/Code.svelte       | 2 +-
 src/routes/+page.svelte              | 4 ++--
 src/routes/join/+page.svelte         | 6 +++---
 src/routes/manager/[id]/+page.svelte | 9 ++++-----
 src/routes/rooms/[id]/+page.svelte   | 8 ++++----
 5 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/Code.svelte b/src/lib/components/Code.svelte
index ed416a0..566776f 100644
--- a/src/lib/components/Code.svelte
+++ b/src/lib/components/Code.svelte
@@ -18,7 +18,7 @@
 </script>
 
 <p>Le code de votre salle :</p>
-<div class="code-container" onclick={displayCopyToClipboard}>
+<div class="code-container" on:click={displayCopyToClipboard}>
 	<h3>{displayText}</h3>
 </div>
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 67c32d5..23a997a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -6,7 +6,7 @@
 	<h1>Another Poker Planning</h1>
 	<div class="button-container">
 		<button
-			onclick={() => {
+			on:click={() => {
 				goto('/create');
 			}}
 		>
@@ -14,7 +14,7 @@
 		</button>
 
 		<button
-			onclick={() => {
+			on:click={() => {
 				goto('/join');
 			}}>Rejoindre</button
 		>
diff --git a/src/routes/join/+page.svelte b/src/routes/join/+page.svelte
index 54bf20c..f61d7cb 100644
--- a/src/routes/join/+page.svelte
+++ b/src/routes/join/+page.svelte
@@ -41,17 +41,17 @@
 		Hummm <span class="animateDetective">🕵️</span>,<br />Quel poker planning souhaites-tu rejoindre
 		?
 	</h1>
-	<form onsubmit={join}>
+	<form on:submit|preventDefault={join}>
 		<input
 			type="text"
 			bind:value={roomId}
-			oninput={handleInput}
+			on:input={handleInput}
 			placeholder="XXX-XXX"
 			disabled={submitting}
 		/>
 		<button type="submit" disabled={submitting}>Rejoindre</button>
 		<span
-			onclick={() => {
+			on:click={() => {
 				goto('/create');
 			}}>Pas de code ?</span
 		>
diff --git a/src/routes/manager/[id]/+page.svelte b/src/routes/manager/[id]/+page.svelte
index 7c8e0ed..994fe00 100644
--- a/src/routes/manager/[id]/+page.svelte
+++ b/src/routes/manager/[id]/+page.svelte
@@ -39,7 +39,8 @@
 	};
 
 	const connect = () => {
-		const io = ioClient(import.meta.env.VITE_BACKEND_URL);
+		io = ioClient(import.meta.env.VITE_BACKEND_URL);
+		io.connect();
 		io.emit('join', { roomId, name: 'ADMIN', manager: true });
 		// 858-616
 
@@ -92,8 +93,6 @@
 	};
 
 	const checkSocketConnected = () => {
-		console.log('io.connected', io.connected);
-
 		if (!io.connected) {
 			toast.error('Websocket not connected...');
 			return false;
@@ -128,12 +127,12 @@
 		<div class="buttons">
 			{#if pokerManager.state == 'playing'}
 				<button
-					onclick={() => {
+					on:click={() => {
 						changeState('result');
 					}}>Terminer Le Vote</button
 				>
 			{:else if pokerManager.state == 'result' || pokerManager.state == 'waiting'}
-				<button onclick={canStarVote}>Commencer Le Vote</button>
+				<button on:click={canStarVote}>Commencer Le Vote</button>
 			{/if}
 		</div>
 	</div>
diff --git a/src/routes/rooms/[id]/+page.svelte b/src/routes/rooms/[id]/+page.svelte
index db51f04..a4e23c4 100644
--- a/src/routes/rooms/[id]/+page.svelte
+++ b/src/routes/rooms/[id]/+page.svelte
@@ -66,7 +66,7 @@
 
 		try {
 			submitting = true;
-			const io = ioClient(import.meta.env.VITE_BACKEND_URL);
+			io = ioClient(import.meta.env.VITE_BACKEND_URL);
 
 			io.emit('join', { roomId, name: username });
 
@@ -198,14 +198,14 @@
 		<h1>
 			Bienvenue <span class="rotateAnimation">👋</span> <br />Comment tu t'appelles déjà ?<br />
 		</h1>
-		<form onsubmit={connect}>
+		<form on:submit|preventDefault={connect}>
 			<input type="text" bind:value={username} placeholder="Jean Bon" disabled={submitting} />
 			<button type="submit" disabled={submitting}>Valider</button>
 		</form>
 	</div>
 {:else}
 	<main>
-		<form onsubmit={sendHexa} style="display: none;">
+		<form on:submit|preventDefault={sendHexa} style="display: none;">
 			<input type="text" bind:value={hexcode} placeholder="#FF00EE" disabled={submitting} />
 		</form>
 
@@ -252,7 +252,7 @@
 			<button
 				class:hidden={selectedLetter === null}
 				disabled={submittedLetter != null && selectedLetter == submittedLetter}
-				onclick={() => {
+				on:click={() => {
 					sendVote();
 				}}
 			>

From b7e82b9c8d0ff450acbb0586e4a3a7e6f6da945e Mon Sep 17 00:00:00 2001
From: FabienBounoir <bounoirfabien@gmail.com>
Date: Thu, 31 Oct 2024 00:43:12 +0100
Subject: [PATCH 07/18] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Add=20external=20c?=
 =?UTF-8?q?omponent=20socketio?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/Card.svelte       | 2 +-
 src/lib/websocketConnection.js       | 5 +++++
 src/routes/manager/[id]/+page.svelte | 5 +----
 src/routes/rooms/[id]/+page.svelte   | 6 +-----
 4 files changed, 8 insertions(+), 10 deletions(-)
 create mode 100644 src/lib/websocketConnection.js

diff --git a/src/lib/components/Card.svelte b/src/lib/components/Card.svelte
index 9ef1d8c..b5163f8 100644
--- a/src/lib/components/Card.svelte
+++ b/src/lib/components/Card.svelte
@@ -7,7 +7,7 @@
 	class:gray={cardSelected && cardSelected != content}
 	class:selected={cardSelected === content}
 	class:submit={submittedLetter === content}
-	onclick={() => {
+	on:click={() => {
 		if (cardSelected === content) {
 			cardSelected = null;
 		} else {
diff --git a/src/lib/websocketConnection.js b/src/lib/websocketConnection.js
new file mode 100644
index 0000000..89a3592
--- /dev/null
+++ b/src/lib/websocketConnection.js
@@ -0,0 +1,5 @@
+import ioClient from 'socket.io-client';
+
+const socket = ioClient(import.meta.env.VITE_BACKEND_URL);
+
+export const io = socket;
\ No newline at end of file
diff --git a/src/routes/manager/[id]/+page.svelte b/src/routes/manager/[id]/+page.svelte
index 994fe00..721172a 100644
--- a/src/routes/manager/[id]/+page.svelte
+++ b/src/routes/manager/[id]/+page.svelte
@@ -9,12 +9,11 @@
 	import { toast } from 'svelte-sonner';
 	import { backOut } from 'svelte/easing';
 	import { fly } from 'svelte/transition';
-	import ioClient from 'socket.io-client';
+	import { io } from '$lib/websocketConnection';
 
 	let roomId = $page.params.id;
 	let url = $state('');
 
-	let io: Socket;
 	let interval: number | null;
 
 	let pokerManager = $state({
@@ -39,8 +38,6 @@
 	};
 
 	const connect = () => {
-		io = ioClient(import.meta.env.VITE_BACKEND_URL);
-		io.connect();
 		io.emit('join', { roomId, name: 'ADMIN', manager: true });
 		// 858-616
 
diff --git a/src/routes/rooms/[id]/+page.svelte b/src/routes/rooms/[id]/+page.svelte
index a4e23c4..f2fe0d7 100644
--- a/src/routes/rooms/[id]/+page.svelte
+++ b/src/routes/rooms/[id]/+page.svelte
@@ -8,16 +8,13 @@
 	import { quintInOut, quintOut } from 'svelte/easing';
 	import { Confetti } from 'svelte-confetti';
 	import myshades from '$lib/myshades';
-	import type { Socket } from 'socket.io-client';
-	import ioClient from 'socket.io-client';
+	import { io } from '$lib/websocketConnection';
 
 	let roomId = $page.params.id;
 
 	let pokerManager = $state(null);
 	let hexcode = $state('');
 
-	let io: Socket;
-
 	let timeout: number | null;
 	let interval: number | null;
 
@@ -66,7 +63,6 @@
 
 		try {
 			submitting = true;
-			io = ioClient(import.meta.env.VITE_BACKEND_URL);
 
 			io.emit('join', { roomId, name: username });
 

From 8f3c77425afce3fc8f1d20b2c1dd3a44224f1a13 Mon Sep 17 00:00:00 2001
From: FabienBounoir <bounoirfabien@gmail.com>
Date: Thu, 31 Oct 2024 00:56:38 +0100
Subject: [PATCH 08/18] =?UTF-8?q?test:=20=F0=9F=92=8D=20fixe=20cors=20orig?=
 =?UTF-8?q?in?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/index.js                     | 12 +-----------
 src/routes/+layout.svelte            |  2 ++
 src/routes/manager/[id]/+page.svelte |  2 +-
 src/routes/rooms/[id]/+page.svelte   |  4 +---
 4 files changed, 5 insertions(+), 15 deletions(-)

diff --git a/backend/index.js b/backend/index.js
index a690197..298e284 100644
--- a/backend/index.js
+++ b/backend/index.js
@@ -4,15 +4,13 @@ const { createRoomId, rooms } = require('./rooms');
 const { createSocketIOServer } = require('./server');
 const cors = require('cors')
 
-// Créez une instance Express pour les routes API
 const app = express();
 
-// Middleware pour interpréter le JSON dans les requêtes
 app.use(express.json());
 
 app.use(cors({
     origin: "*",
-    methods: ["GET", "POST", "PATCH", "OPTIONS", "PUT"]
+    methods: ["GET", "POST", "PATCH", "OPTIONS", "PUT", "OPTIONS"]
 }))
 
 app.use((req, res, next) => {
@@ -33,7 +31,6 @@ app.get("/room", (req, res) => {
     return res.status(400).json({ error: "Room doesn't exist." });
 })
 
-// Route API pour créer une nouvelle salle
 app.post('/room', (req, res) => {
     const { type, team } = req.body;
 
@@ -44,7 +41,6 @@ app.post('/room', (req, res) => {
     const roomId = createRoomId();
     const formattedTeam = (team || 'NFS').trim().charAt(0).toUpperCase() + (team || 'NFS').slice(1).toLowerCase();
 
-    // Initialisation des données de la salle
     const roomData = {
         team: formattedTeam,
         cards: [],
@@ -52,7 +48,6 @@ app.post('/room', (req, res) => {
         userStory: ''
     };
 
-    // Associer les cartes en fonction du type de salle
     switch (type) {
         case "TSHIRT":
             roomData.cards = ['XS', 'S', 'M', 'L', 'XL', 'XXL'];
@@ -73,21 +68,16 @@ app.post('/room', (req, res) => {
             return res.status(400).json({ error: "Unknown room type" });
     }
 
-    // Ajouter la nouvelle salle à la liste des salles
     rooms.set(roomId, { initialisation: true, data: roomData });
     console.log("NEW ROOM CREATED", rooms);
 
-    // Répondre avec l'ID de la salle
     res.json({ roomId });
 });
 
-// Création du serveur HTTP et intégration d'Express
 const server = http.createServer(app);
 
-// Créez le serveur Socket.IO en l'associant au serveur HTTP
 createSocketIOServer(server, rooms);
 
-// Démarrez le serveur
 const PORT = 5876;
 server.listen(PORT, () => {
     console.log(`Server listening on port ${PORT}`);
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 35162a7..1feb4dd 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,8 @@
 <script>
 	import { Toaster } from 'svelte-sonner';
 	import '../app.scss';
+	import { io } from '$lib/websocketConnection';
+	io.connect();
 </script>
 
 <Toaster position="bottom-left" richColors />
diff --git a/src/routes/manager/[id]/+page.svelte b/src/routes/manager/[id]/+page.svelte
index 721172a..491bc5e 100644
--- a/src/routes/manager/[id]/+page.svelte
+++ b/src/routes/manager/[id]/+page.svelte
@@ -79,7 +79,7 @@
 
 	onDestroy(() => {
 		if (io) {
-			io.disconnect();
+			io.emit('leave-room', { roomId });
 		}
 	});
 
diff --git a/src/routes/rooms/[id]/+page.svelte b/src/routes/rooms/[id]/+page.svelte
index f2fe0d7..210b02e 100644
--- a/src/routes/rooms/[id]/+page.svelte
+++ b/src/routes/rooms/[id]/+page.svelte
@@ -34,8 +34,6 @@
 		if (window.localStorage.getItem('username')) {
 			username = window.localStorage.getItem('username');
 		}
-
-		// interval = heartbeat();
 	});
 
 	onDestroy(() => {
@@ -44,7 +42,7 @@
 		}
 
 		if (io) {
-			io.disconnect();
+			io.emit('leave-room', { roomId });
 		}
 	});
 

From df1f9e3c451b0df2cc0b5668fd435be53beefddb Mon Sep 17 00:00:00 2001
From: FabienBounoir <bounoirfabien@gmail.com>
Date: Thu, 31 Oct 2024 01:32:46 +0100
Subject: [PATCH 09/18] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20update=20process?=
 =?UTF-8?q?=20connection=20socketIO?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/+layout.svelte            |  2 --
 src/routes/manager/[id]/+page.svelte | 21 ++++++++++++++++-----
 src/routes/rooms/[id]/+page.svelte   | 14 ++++++++++----
 3 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 1feb4dd..35162a7 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,8 +1,6 @@
 <script>
 	import { Toaster } from 'svelte-sonner';
 	import '../app.scss';
-	import { io } from '$lib/websocketConnection';
-	io.connect();
 </script>
 
 <Toaster position="bottom-left" richColors />
diff --git a/src/routes/manager/[id]/+page.svelte b/src/routes/manager/[id]/+page.svelte
index 491bc5e..c210920 100644
--- a/src/routes/manager/[id]/+page.svelte
+++ b/src/routes/manager/[id]/+page.svelte
@@ -9,12 +9,12 @@
 	import { toast } from 'svelte-sonner';
 	import { backOut } from 'svelte/easing';
 	import { fly } from 'svelte/transition';
-	import { io } from '$lib/websocketConnection';
+	import ioClient from 'socket.io-client';
 
 	let roomId = $page.params.id;
 	let url = $state('');
 
-	let interval: number | null;
+	let io: Socket;
 
 	let pokerManager = $state({
 		team: '',
@@ -38,8 +38,11 @@
 	};
 
 	const connect = () => {
-		io.emit('join', { roomId, name: 'ADMIN', manager: true });
-		// 858-616
+		io = ioClient(import.meta.env.VITE_BACKEND_URL);
+
+		io.on('connect', () => {
+			io.emit('join', { roomId, name: 'ADMIN', manager: true });
+		});
 
 		io.on('error', (e) => {
 			if (e.reason == "Room doesn't exist") {
@@ -70,6 +73,13 @@
 				primary: payload.hexcode
 			});
 		});
+
+		io.on('reconnect', (attempt) => {
+			console.info(`Reconnecté après ${attempt} tentatives.`);
+			toast.success('Reconnecté au serveur !');
+
+			io.emit('join', { roomId, name: 'ADMIN' });
+		});
 	};
 
 	onMount(() => {
@@ -79,7 +89,8 @@
 
 	onDestroy(() => {
 		if (io) {
-			io.emit('leave-room', { roomId });
+			io.disconnect();
+			// io.emit('leave-room', { roomId });
 		}
 	});
 
diff --git a/src/routes/rooms/[id]/+page.svelte b/src/routes/rooms/[id]/+page.svelte
index 210b02e..8a632c7 100644
--- a/src/routes/rooms/[id]/+page.svelte
+++ b/src/routes/rooms/[id]/+page.svelte
@@ -8,9 +8,11 @@
 	import { quintInOut, quintOut } from 'svelte/easing';
 	import { Confetti } from 'svelte-confetti';
 	import myshades from '$lib/myshades';
-	import { io } from '$lib/websocketConnection';
+	import type { Socket } from 'socket.io-client';
+	import ioClient from 'socket.io-client';
 
 	let roomId = $page.params.id;
+	let io: Socket;
 
 	let pokerManager = $state(null);
 	let hexcode = $state('');
@@ -42,7 +44,8 @@
 		}
 
 		if (io) {
-			io.emit('leave-room', { roomId });
+			io.disconnect();
+			// io.emit('leave-room', { roomId });
 		}
 	});
 
@@ -61,8 +64,11 @@
 
 		try {
 			submitting = true;
+			io = ioClient(import.meta.env.VITE_BACKEND_URL);
 
-			io.emit('join', { roomId, name: username });
+			io.on('connect', () => {
+				io.emit('join', { roomId, name: username });
+			});
 
 			io.on('game-update', (payload) => {
 				console.log('payload', payload);
@@ -122,7 +128,7 @@
 			io.on('reconnect', (attempt) => {
 				console.info(`Reconnecté après ${attempt} tentatives.`);
 				toast.success('Reconnecté au serveur !');
-				// Réémission des informations d'identification
+
 				io.emit('join', { roomId, name: username });
 			});
 		} catch (e) {

From 258af693419fcaceab822e8ec798915f4e4d47e4 Mon Sep 17 00:00:00 2001
From: FabienBounoir <bounoirfabien@gmail.com>
Date: Thu, 31 Oct 2024 01:40:47 +0100
Subject: [PATCH 10/18] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Remove=20send=20vo?=
 =?UTF-8?q?te=20to=20other=20user?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/server.js | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/backend/server.js b/backend/server.js
index a59a809..0a7dd1d 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -36,7 +36,7 @@ const createSocketIOServer = (server, rooms) => {
                         }
                     });
                 },
-                emitPlayers() {
+                emitPlayers(manager = false) {
                     const players = [];
                     object.players.forEach((player, id) => {
                         if (!player.manager) {
@@ -45,7 +45,14 @@ const createSocketIOServer = (server, rooms) => {
                     });
 
                     object.players.forEach((player) => {
-                        player.socket.emit("players", players);
+                        if (manager) {
+                            if (player.manager) {
+                                player.socket.emit("players", players);
+                            }
+                        }
+                        else {
+                            player.socket.emit("players", players);
+                        }
                     });
                 },
                 emitUpdateGame(state) {
@@ -154,14 +161,14 @@ const createSocketIOServer = (server, rooms) => {
             };
 
             room.players.set(userId, player);
-            room.emitPlayers();
+            room.emitPlayers(room.data.state != "waiting");
 
             socket.on("leave-room", () => {
                 console.log(`User leave room ${userId}`);
                 room.players.delete(userId);
 
                 if (room.players.size) {
-                    room.emitPlayers();
+                    room.emitPlayers(room.data.state != "waiting");
                 } else {
                     room.timeout = setTimeout(() => {
                         if (!room.players.size) {
@@ -177,7 +184,7 @@ const createSocketIOServer = (server, rooms) => {
                 room.players.delete(userId);
 
                 if (room.players.size) {
-                    room.emitPlayers();
+                    room.emitPlayers(room.data.state != "waiting");
                 } else {
                     room.timeout = setTimeout(() => {
                         if (!room.players.size) {
@@ -196,7 +203,7 @@ const createSocketIOServer = (server, rooms) => {
 
                         player.selectedCard = data.card;
                         room.players.set(userId, player);
-                        room.emitPlayers();
+                        room.emitPlayers(true);
                         socket.emit("success", { success: true });
                         break;
                     }

From c11248226ef7e130f48168a7c320f69005b3665c Mon Sep 17 00:00:00 2001
From: FabienBounoir <bounoirfabien@gmail.com>
Date: Thu, 31 Oct 2024 01:57:52 +0100
Subject: [PATCH 11/18] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Update=20socket=20?=
 =?UTF-8?q?id=20and=20remove=20unused=20code?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/server.js                    | 70 ++++------------------------
 src/routes/manager/[id]/+page.js     |  4 --
 src/routes/manager/[id]/+page.svelte |  1 -
 src/routes/rooms/[id]/+page.svelte   |  1 -
 4 files changed, 10 insertions(+), 66 deletions(-)
 delete mode 100644 src/routes/manager/[id]/+page.js

diff --git a/backend/server.js b/backend/server.js
index 0a7dd1d..be737e0 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -1,6 +1,5 @@
 const { Server } = require('socket.io');
 const { v4: uuidv4 } = require('uuid');
-const { createRoomId } = require('./rooms');
 
 /**
  * @type {Server}
@@ -102,7 +101,7 @@ const createSocketIOServer = (server, rooms) => {
                 },
                 resetChoose() {
                     object.players.forEach((player) => {
-                        object.players.set(player.socket.userId, { ...player, selectedCard: null });
+                        object.players.set(player.socket.id, { ...player, selectedCard: null });
                     });
                     this.emitPlayers();
                 },
@@ -141,16 +140,13 @@ const createSocketIOServer = (server, rooms) => {
                 return socket.disconnect(true);
             }
 
-            const userId = uuidv4();
-            console.log('New connection with ID:', userId);
+            console.log('New connection with ID:', socket.id);
 
             if (room.timeout) {
                 clearTimeout(room.timeout);
                 delete room.timeout;
-                console.log("Timeout removed for room", roomId, "because user", userId, "reconnected.");
+                console.log("Timeout removed for room", roomId, "because user", socket.id, "reconnected.");
             }
-
-            socket.userId = userId;
             socket.emit("game-update", room.data);
 
             const player = {
@@ -160,12 +156,12 @@ const createSocketIOServer = (server, rooms) => {
                 manager,
             };
 
-            room.players.set(userId, player);
+            room.players.set(socket.id, player);
             room.emitPlayers(room.data.state != "waiting");
 
             socket.on("leave-room", () => {
-                console.log(`User leave room ${userId}`);
-                room.players.delete(userId);
+                console.log(`User leave room ${socket.id}`);
+                room.players.delete(socket.id);
 
                 if (room.players.size) {
                     room.emitPlayers(room.data.state != "waiting");
@@ -180,8 +176,8 @@ const createSocketIOServer = (server, rooms) => {
             })
 
             socket.on('disconnect', () => {
-                console.log(`User ${userId} disconnected`);
-                room.players.delete(userId);
+                console.log(`User ${socket.id} disconnected`);
+                room.players.delete(socket.id);
 
                 if (room.players.size) {
                     room.emitPlayers(room.data.state != "waiting");
@@ -198,11 +194,11 @@ const createSocketIOServer = (server, rooms) => {
             socket.on('message', ({ type, data }) => {
                 switch (type) {
                     case 'vote': {
-                        const player = room.players.get(userId);
+                        const player = room.players.get(socket.id);
                         if (!room?.data?.cards?.includes?.(data.card)) return;
 
                         player.selectedCard = data.card;
-                        room.players.set(userId, player);
+                        room.players.set(socket.id, player);
                         room.emitPlayers(true);
                         socket.emit("success", { success: true });
                         break;
@@ -220,9 +216,6 @@ const createSocketIOServer = (server, rooms) => {
                         room.emitUpdateGame(data.state);
                         break;
                     }
-                    case 'ping':
-                        socket.emit("pong", { success: true });
-                        break;
                     case 'hexcode':
                         room.data.hexcode = data.hexcode;
                         room.emit("hexcode", { hexcode: data.hexcode }, false);
@@ -232,49 +225,6 @@ const createSocketIOServer = (server, rooms) => {
                 }
             });
         });
-
-        socket.on('create', ({ type, team }) => {
-            if (!["TSHIRT", "FIBONACCI", "POWEROF2", "SEQUENTIAL", "TSHIRT_HALF"].includes(type)) {
-                console.warn(`Invalid room type: ${type}`);
-                return socket.disconnect(true);
-            }
-
-            const roomId = createRoomId();
-            rooms.set(roomId, { reserved: true });
-
-            let object = {
-                team: formatName(team || 'NFS'),
-                cards: [],
-                state: 'waiting',
-                userStory: '',
-            };
-
-            switch (type) {
-                case "TSHIRT":
-                    object.cards = ['XS', 'S', 'M', 'L', 'XL', 'XXL'];
-                    break;
-                case "FIBONACCI":
-                    object.cards = ["1", "2", "3", "5", "8", "13", "21"];
-                    break;
-                case "POWEROF2":
-                    object.cards = ["1", "2", "4", "8", "16", "32"];
-                    break;
-                case "SEQUENTIAL":
-                    object.cards = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
-                    break;
-                case "TSHIRT_HALF":
-                    object.cards = ['XS', 'S', 'M', 'M/L', 'L', 'XL'];
-                    break;
-                default:
-                    console.warn(`Unknown type: ${type}`);
-                    break;
-            }
-
-            rooms.set(roomId, { initialisation: true, data: object });
-            console.log("NEW ROOM CREATED", rooms);
-
-            socket.emit("created", { roomId });
-        });
     });
 
     return io;
diff --git a/src/routes/manager/[id]/+page.js b/src/routes/manager/[id]/+page.js
deleted file mode 100644
index d9ca58e..0000000
--- a/src/routes/manager/[id]/+page.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { dev } from '$app/environment';
-
-export const csr = dev;
-export const prerender = false;
diff --git a/src/routes/manager/[id]/+page.svelte b/src/routes/manager/[id]/+page.svelte
index c210920..2dd9ebe 100644
--- a/src/routes/manager/[id]/+page.svelte
+++ b/src/routes/manager/[id]/+page.svelte
@@ -90,7 +90,6 @@
 	onDestroy(() => {
 		if (io) {
 			io.disconnect();
-			// io.emit('leave-room', { roomId });
 		}
 	});
 
diff --git a/src/routes/rooms/[id]/+page.svelte b/src/routes/rooms/[id]/+page.svelte
index 8a632c7..b1b96e9 100644
--- a/src/routes/rooms/[id]/+page.svelte
+++ b/src/routes/rooms/[id]/+page.svelte
@@ -45,7 +45,6 @@
 
 		if (io) {
 			io.disconnect();
-			// io.emit('leave-room', { roomId });
 		}
 	});
 

From 30a127949f363da73ed00b311a741345cd1bae17 Mon Sep 17 00:00:00 2001
From: FabienBounoir <bounoirfabien@gmail.com>
Date: Thu, 31 Oct 2024 02:09:36 +0100
Subject: [PATCH 12/18] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20optimised=20de?=
 =?UTF-8?q?connection=20websocket?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/server.js                    | 1 +
 src/routes/manager/[id]/+page.svelte | 1 +
 src/routes/rooms/[id]/+page.svelte   | 6 ++++++
 3 files changed, 8 insertions(+)

diff --git a/backend/server.js b/backend/server.js
index be737e0..259ea57 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -182,6 +182,7 @@ const createSocketIOServer = (server, rooms) => {
                 if (room.players.size) {
                     room.emitPlayers(room.data.state != "waiting");
                 } else {
+                    console.log("Setup Timeout 1 hour to delete inactive room")
                     room.timeout = setTimeout(() => {
                         if (!room.players.size) {
                             rooms.delete(roomId);
diff --git a/src/routes/manager/[id]/+page.svelte b/src/routes/manager/[id]/+page.svelte
index 2dd9ebe..2206828 100644
--- a/src/routes/manager/[id]/+page.svelte
+++ b/src/routes/manager/[id]/+page.svelte
@@ -89,6 +89,7 @@
 
 	onDestroy(() => {
 		if (io) {
+			io.removeAllListeners();
 			io.disconnect();
 		}
 	});
diff --git a/src/routes/rooms/[id]/+page.svelte b/src/routes/rooms/[id]/+page.svelte
index b1b96e9..dd24be9 100644
--- a/src/routes/rooms/[id]/+page.svelte
+++ b/src/routes/rooms/[id]/+page.svelte
@@ -44,6 +44,7 @@
 		}
 
 		if (io) {
+			io.removeAllListeners();
 			io.disconnect();
 		}
 	});
@@ -128,7 +129,12 @@
 				console.info(`Reconnecté après ${attempt} tentatives.`);
 				toast.success('Reconnecté au serveur !');
 
+				//rejoint room
 				io.emit('join', { roomId, name: username });
+
+				//Reset selected card
+				selectedLetter = null;
+				submittedLetter = '';
 			});
 		} catch (e) {
 			console.error('Websocket error', e);

From aac308b7382c92e5e8c3d6c7d5ea2ece34936354 Mon Sep 17 00:00:00 2001
From: FabienBounoir <bounoirfabien@gmail.com>
Date: Thu, 31 Oct 2024 08:28:39 +0100
Subject: [PATCH 13/18] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Add=20error=20page?=
 =?UTF-8?q?=20catch?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/+error.svelte | 80 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 src/routes/+error.svelte

diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
new file mode 100644
index 0000000..ff411df
--- /dev/null
+++ b/src/routes/+error.svelte
@@ -0,0 +1,80 @@
+<script>
+	import { page } from '$app/stores';
+	import { scale } from 'svelte/transition';
+</script>
+
+<main>
+	<h1>Oopsie... 🤓</h1>
+	{#if $page?.status !== undefined}
+		{#if $page.status === 404}
+			<p>cette page n'existe pas...</p>
+			<p>Navigue avec les boutons pour explorer d'autres contrées !</p>
+			<a href="/">Oh, un bouton, quel miracle !</a>
+		{:else if $page.status >= 500}
+			<p>
+				On dirait que notre serveur a pris une petite pause... Pas de panique, on s'en occupe ! ⚙️
+			</p>
+		{/if}
+	{:else}
+		<p>
+			{$page.error?.message}
+		</p>
+	{/if}
+	{#if import.meta.env.DEV}
+		<pre>{JSON.stringify($page.error?.stack, null, 2)}</pre>
+	{/if}
+</main>
+
+<style lang="scss">
+	main {
+		text-align: center;
+		padding: 15vw;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		font-size: 1.5em;
+		a {
+			margin-top: 4em;
+			color: var(--primary-500);
+			border-radius: 5px;
+			background-color: var(--primary-500);
+			color: var(--primary-950);
+			text-decoration: none;
+			font-weight: 600;
+
+			padding: 0.5rem 0.75rem;
+			border-radius: 0.5rem;
+
+			&:hover {
+				animation: scaleShake 1s infinite;
+
+				@keyframes scaleShake {
+					0% {
+						transform: scale(1) rotate(0deg);
+					}
+					25% {
+						transform: scale(1.05) rotate(5deg);
+					}
+					50% {
+						transform: scale(1) rotate(-5deg);
+					}
+					75% {
+						transform: scale(1.05) rotate(2deg);
+					}
+					100% {
+						transform: scale(1) rotate(0deg);
+					}
+				}
+			}
+		}
+
+		h1 {
+			font-size: 2em;
+			color: var(--primary-800);
+		}
+
+		p {
+			color: var(--primary-600);
+		}
+	}
+</style>

From f21d47265b09cb6288466278bb67633fca18d044 Mon Sep 17 00:00:00 2001
From: FabienBounoir <bounoirfabien@gmail.com>
Date: Thu, 31 Oct 2024 08:29:12 +0100
Subject: [PATCH 14/18] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20Update=20some?=
 =?UTF-8?q?=20Element,=20and=20optimised=20socket=20and=20anim?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app.scss                       | 10 +++++++++-
 src/lib/myshades/index.js          |  6 ------
 src/routes/create/+page.svelte     | 10 +++++-----
 src/routes/rooms/[id]/+page.svelte | 14 ++++++--------
 4 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/app.scss b/src/app.scss
index b4af9fd..c9451de 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -30,7 +30,15 @@
     transition: none cubic-bezier(0.1, 1.25, 0.25, 1) 600ms;
 }
 
-* {
+div,
+button,
+a,
+p,
+h1,
+h3,
+textarea,
+input,
+img {
     transition: background-color 3s, color 3s !important;
 }
 
diff --git a/src/lib/myshades/index.js b/src/lib/myshades/index.js
index dc06efa..9e24bc3 100644
--- a/src/lib/myshades/index.js
+++ b/src/lib/myshades/index.js
@@ -1,5 +1,3 @@
-// const { join } = require("path");
-// const { writeFile } = require("fs").promises;
 import generateTailwindColorFamily from "./generateTailwindColorFamily";
 import tailwindColors3 from "./tailwind3";
 
@@ -19,10 +17,6 @@ const myshades = async (args = {}) => {
         shades.forEach((shade) => {
             document.documentElement.style.setProperty(`--${key}-${shade.number}`, shade.hexcode);
         });
-
-        // shades.forEach((shade) => {
-        //     document.documentElement.style.setProperty(`--on-${key}-${shade.number}`, shade.luminance < 40 ? `var(--${key}-100)` : `var(--${key}-900)`);
-        // });
     }
 };
 
diff --git a/src/routes/create/+page.svelte b/src/routes/create/+page.svelte
index 286bd0f..6a6fddd 100644
--- a/src/routes/create/+page.svelte
+++ b/src/routes/create/+page.svelte
@@ -103,19 +103,19 @@
 
 			@keyframes scaleShake {
 				0% {
-					transform: scale(1) rotate(0deg); /* Taille normale, pas de rotation */
+					transform: scale(1) rotate(0deg);
 				}
 				25% {
-					transform: scale(1.2) rotate(15deg); /* Zoom avant et rotation vers la droite */
+					transform: scale(1.2) rotate(15deg);
 				}
 				50% {
-					transform: scale(1) rotate(-15deg); /* Retour à la taille normale, rotation vers la gauche */
+					transform: scale(1) rotate(-15deg);
 				}
 				75% {
-					transform: scale(1.2) rotate(10deg); /* Zoom avant et légère rotation vers la droite */
+					transform: scale(1.2) rotate(10deg);
 				}
 				100% {
-					transform: scale(1) rotate(0deg); /* Retour à la taille normale et à la position initiale */
+					transform: scale(1) rotate(0deg);
 				}
 			}
 		}
diff --git a/src/routes/rooms/[id]/+page.svelte b/src/routes/rooms/[id]/+page.svelte
index dd24be9..8ee5709 100644
--- a/src/routes/rooms/[id]/+page.svelte
+++ b/src/routes/rooms/[id]/+page.svelte
@@ -31,6 +31,7 @@
 	let players = $state(null);
 
 	let existingPositions = [];
+	let alreadyConnected = false;
 
 	onMount(() => {
 		if (window.localStorage.getItem('username')) {
@@ -68,6 +69,7 @@
 
 			io.on('connect', () => {
 				io.emit('join', { roomId, name: username });
+				alreadyConnected = true;
 			});
 
 			io.on('game-update', (payload) => {
@@ -131,10 +133,7 @@
 
 				//rejoint room
 				io.emit('join', { roomId, name: username });
-
-				//Reset selected card
-				selectedLetter = null;
-				submittedLetter = '';
+				sendVote();
 			});
 		} catch (e) {
 			console.error('Websocket error', e);
@@ -176,14 +175,14 @@
 	const isPositionFree = (top, left) => {
 		// Vérifie que la position ne chevauche pas un autre élément existant
 		return !existingPositions.some(
-			(pos) => Math.abs(pos.top - top) < 10 && Math.abs(pos.left - left) < 10 // Ajuster pour tolérance de chevauchement
+			(pos) => Math.abs(pos.top - top) < 15 && Math.abs(pos.left - left) < 15
 		);
 	};
 
 	const getRandomPosition = () => {
 		let top, left;
 		let tries = 0;
-		const maxTries = 10; // Nombre maximum de tentatives pour trouver une position libre
+		const maxTries = 30;
 
 		do {
 			top = Math.random() < 0.5 ? Math.random() * 20 + 20 : Math.random() * 20 + 60;
@@ -194,7 +193,7 @@
 		// Enregistre la position trouvée si elle est libre
 		if (tries < maxTries) existingPositions.push({ top, left });
 
-		return `--top: ${top}vh; --left: ${left}vw;`; // transform: scale(1); opacity: 1;
+		return `--top: ${top}vh; --left: ${left}vw;`;
 	};
 </script>
 
@@ -345,7 +344,6 @@
 
 		> h1 {
 			font-size: 1.2em;
-			// font-weight: 700;
 			color: var(--primary-800);
 		}
 

From 7aa10f5a711cbe425a6e27f36ee59dc0c22a6316 Mon Sep 17 00:00:00 2001
From: FabienBounoir <bounoirfabien@gmail.com>
Date: Thu, 31 Oct 2024 14:10:32 +0100
Subject: [PATCH 15/18] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Add=20beta=20logo?=
 =?UTF-8?q?=20and=20resend=20vote=20when=20reconnect?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/+layout.svelte            | 28 +++++++++++++++++++++++++++-
 src/routes/manager/[id]/+page.svelte |  2 +-
 src/routes/rooms/[id]/+page.svelte   | 15 +++++++++------
 3 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 35162a7..bfd0f9a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -3,5 +3,31 @@
 	import '../app.scss';
 </script>
 
-<Toaster position="bottom-left" richColors />
+<Toaster position="top-center" richColors />
+<span class="beta">BETA</span>
 <slot></slot>
+
+<style lang="scss">
+	.beta {
+		position: fixed;
+		top: 0;
+		right: 0;
+		margin: 1em 1.5em;
+		border-radius: 9999px;
+		background: linear-gradient(120deg, var(--primary-200), var(--primary-500), var(--primary-800));
+		background-size: 200% 200%;
+		animation: shimmer 5s infinite alternate;
+		padding: 0.3em 0.7em;
+		font-weight: 700;
+		color: var(--primary-950);
+	}
+
+	@keyframes shimmer {
+		0% {
+			background-position: 0% 50%;
+		}
+		100% {
+			background-position: 100% 50%;
+		}
+	}
+</style>
diff --git a/src/routes/manager/[id]/+page.svelte b/src/routes/manager/[id]/+page.svelte
index 2206828..a91cba9 100644
--- a/src/routes/manager/[id]/+page.svelte
+++ b/src/routes/manager/[id]/+page.svelte
@@ -148,7 +148,7 @@
 	<div class="information">
 		{#if users?.length < 1}
 			<div>
-				<p>Pas de participants pour la planification du poker.</p>
+				<p style="text-align: center;">Pas de participants pour la planification du poker.</p>
 			</div>
 		{:else}
 			<p style="text-align: end;">{users.length} player{users.length > 1 ? 's' : ''}</p>
diff --git a/src/routes/rooms/[id]/+page.svelte b/src/routes/rooms/[id]/+page.svelte
index 8ee5709..9b69ad2 100644
--- a/src/routes/rooms/[id]/+page.svelte
+++ b/src/routes/rooms/[id]/+page.svelte
@@ -69,7 +69,9 @@
 
 			io.on('connect', () => {
 				io.emit('join', { roomId, name: username });
-				alreadyConnected = true;
+				if (submittedLetter != null) {
+					sendVote(submittedLetter);
+				}
 			});
 
 			io.on('game-update', (payload) => {
@@ -131,9 +133,10 @@
 				console.info(`Reconnecté après ${attempt} tentatives.`);
 				toast.success('Reconnecté au serveur !');
 
-				//rejoint room
 				io.emit('join', { roomId, name: username });
-				sendVote();
+				if (submittedLetter != null) {
+					sendVote(submittedLetter);
+				}
 			});
 		} catch (e) {
 			console.error('Websocket error', e);
@@ -142,15 +145,15 @@
 		}
 	};
 
-	const sendVote = () => {
+	const sendVote = (forceValue = selectedLetter) => {
 		timeout = setTimeout(() => {
 			toast.error("Une erreur s'est produite lors de l'envoi de votre vote.");
 			submittedLetter = null;
 			selectedLetter = null;
 		}, 2000);
 
-		io.send({ type: 'vote', data: { card: selectedLetter } });
-		submittedLetter = selectedLetter;
+		io.send({ type: 'vote', data: { card: forceValue } });
+		submittedLetter = forceValue;
 	};
 
 	const includeUS_ID = (userStory) => {

From 80d9c679d070d32574657c29a9e6850f1f03e108 Mon Sep 17 00:00:00 2001
From: FabienBounoir <bounoirfabien@gmail.com>
Date: Thu, 31 Oct 2024 14:12:31 +0100
Subject: [PATCH 16/18] =?UTF-8?q?fix:=20=F0=9F=90=9B=20Error=20message?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/rooms/[id]/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/rooms/[id]/+page.svelte b/src/routes/rooms/[id]/+page.svelte
index 9b69ad2..bb3177b 100644
--- a/src/routes/rooms/[id]/+page.svelte
+++ b/src/routes/rooms/[id]/+page.svelte
@@ -23,7 +23,7 @@
 	let selectedLetter = $state(null);
 	let username = $state('');
 	let submitting = $state(false);
-	let submittedLetter = $state('');
+	let submittedLetter = $state(null);
 
 	let resultsItem = $state(null);
 	let resultDefender = $state(null);

From 1a704a2d8007821da75d4b66611e7103100d6e13 Mon Sep 17 00:00:00 2001
From: FabienBounoir <bounoirfabien@gmail.com>
Date: Thu, 31 Oct 2024 14:15:15 +0100
Subject: [PATCH 17/18] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20remove=20beta=20lo?=
 =?UTF-8?q?go=20on=20mobile=20phone?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/+layout.svelte | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index bfd0f9a..73c4479 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -30,4 +30,10 @@
 			background-position: 100% 50%;
 		}
 	}
+
+	@media screen and (max-width: 500px) {
+		.beta {
+			display: none;
+		}
+	}
 </style>

From 54938afbaae1437a1ae6a28de63cb72f578fa7e7 Mon Sep 17 00:00:00 2001
From: FabienBounoir <bounoirfabien@gmail.com>
Date: Fri, 1 Nov 2024 19:02:22 +0100
Subject: [PATCH 18/18] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Add=20confetti=20+?=
 =?UTF-8?q?=20qrcode?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/server.js                    |   6 ++
 package-lock.json                    |  10 ++
 package.json                         |   1 +
 src/lib/components/Code.svelte       | 121 +++++++++++++++++----
 src/routes/+layout.svelte            |   2 +-
 src/routes/manager/[id]/+page.svelte | 150 +++++++++++++++++++++------
 src/routes/rooms/[id]/+page.svelte   |  18 +---
 7 files changed, 244 insertions(+), 64 deletions(-)

diff --git a/backend/server.js b/backend/server.js
index 259ea57..6728be9 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -183,6 +183,12 @@ const createSocketIOServer = (server, rooms) => {
                     room.emitPlayers(room.data.state != "waiting");
                 } else {
                     console.log("Setup Timeout 1 hour to delete inactive room")
+
+                    if (['result'].inclroom?.data?.state) {
+                        room.data.state = 'waiting';
+                        room.data.userStory = ''
+                    }
+
                     room.timeout = setTimeout(() => {
                         if (!room.players.size) {
                             rooms.delete(roomId);
diff --git a/package-lock.json b/package-lock.json
index 5adef0c..5af183f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
 			"name": "poker-planning",
 			"version": "0.0.1",
 			"dependencies": {
+				"@fortawesome/fontawesome-free": "^6.6.0",
 				"chroma-js": "^3.1.2",
 				"preprocess": "^3.2.0",
 				"socket.io-client": "^4.8.1",
@@ -573,6 +574,15 @@
 				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
 			}
 		},
+		"node_modules/@fortawesome/fontawesome-free": {
+			"version": "6.6.0",
+			"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.6.0.tgz",
+			"integrity": "sha512-60G28ke/sXdtS9KZCpZSHHkCbdsOGEhIUGlwq6yhY74UpTiToIh8np7A8yphhM4BWsvNFtIvLpi4co+h9Mr9Ow==",
+			"license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/@humanfs/core": {
 			"version": "0.19.0",
 			"resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.0.tgz",
diff --git a/package.json b/package.json
index 260a245..a361b15 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
 		"vite": "^5.0.3"
 	},
 	"dependencies": {
+		"@fortawesome/fontawesome-free": "^6.6.0",
 		"chroma-js": "^3.1.2",
 		"preprocess": "^3.2.0",
 		"socket.io-client": "^4.8.1",
diff --git a/src/lib/components/Code.svelte b/src/lib/components/Code.svelte
index 566776f..d8f6b0b 100644
--- a/src/lib/components/Code.svelte
+++ b/src/lib/components/Code.svelte
@@ -1,7 +1,11 @@
 <script>
+	import '@fortawesome/fontawesome-free/css/all.min.css';
+	import { toast } from 'svelte-sonner';
+	import { fade, scale } from 'svelte/transition';
 	let { code, url = 'https://coucou.com' } = $props();
 
 	let displayText = $state(code);
+	let displayQrCode = $state(false);
 
 	const displayCopyToClipboard = async () => {
 		try {
@@ -15,38 +19,115 @@
 			console.error('Failed to copy!', error);
 		}
 	};
+
+	const getCssColor = (variable) => {
+		const root = document.documentElement;
+		const hexaCode = getComputedStyle(root).getPropertyValue(variable).trim();
+		return hexaCode.slice(1);
+	};
 </script>
 
 <p>Le code de votre salle :</p>
-<div class="code-container" on:click={displayCopyToClipboard}>
-	<h3>{displayText}</h3>
+<div class="code-element">
+	<div class="code-container" on:click={displayCopyToClipboard}>
+		<h3>{displayText}</h3>
+	</div>
+	<button
+		on:click={() => {
+			displayQrCode = true;
+		}}
+	>
+		<i class="fa-solid fa-qrcode"></i>
+		<!-- <i class="fa-solid fa-mobile-screen-button"></i> -->
+	</button>
 </div>
+{#if displayQrCode}
+	<div class="fullscreen" on:click={() => (displayQrCode = false)} transition:fade>
+		<img
+			in:scale
+			src={`https://api.qrserver.com/v1/create-qr-code/?size=700x700&bgcolor=${getCssColor('--primary-200')}&margin=50&color=${getCssColor('--primary-950')}&data=${encodeURIComponent(url)}`}
+		/>
+		<h3 in:scale>{displayText}</h3>
+	</div>
+{/if}
 
 <style lang="scss">
-	.code-container {
-		border: 1px solid #ddd;
-		width: max-content;
-		padding: 1em;
-		border-radius: 8px;
+	.fullscreen {
+		position: fixed;
+		width: 100vw;
+		height: 100dvh;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		gap: 2em;
+		backdrop-filter: blur(7px) brightness(80%);
+		top: 0;
+		left: 0;
+		z-index: 10;
+		cursor: pointer;
+
+		h3 {
+			font-size: 2em;
+			color: var(--primary-800);
+			font-weight: 900;
+			line-height: 14px;
+		}
 
-		&:hover {
+		img {
+			border-radius: 5px;
+			width: 30vh;
+			height: 30vh;
 			cursor: pointer;
+		}
+	}
 
-			h3 {
-				filter: blur(0);
+	.code-element {
+		position: initial;
+		display: flex;
+		flex-direction: row;
+		gap: 0.3em;
+		align-items: center;
+
+		button {
+			background-color: transparent;
+			border: 0px;
+			transition: scale 0.3s !important;
+			outline: none;
+			i {
+				font-size: 2em;
+				cursor: pointer;
+			}
+
+			&:active {
+				scale: 1.1;
 			}
 		}
 
-		h3 {
-			transition:
-				filter 0.3s,
-				color 3s !important;
-			filter: blur(7px);
-			font-size: 2em;
-			color: var(--primary-600);
-			font-size: 2rem;
-			font-weight: 900;
-			line-height: 14px;
+		.code-container {
+			border: 1px solid #ddd;
+			width: max-content;
+			padding: 1em;
+			border-radius: 8px;
+
+			&:hover {
+				cursor: pointer;
+
+				h3 {
+					filter: blur(0);
+				}
+			}
+
+			h3 {
+				transition:
+					filter 0.3s,
+					color 3s !important;
+				filter: blur(7px);
+				font-size: 2em;
+				color: var(--primary-600);
+				font-weight: 900;
+				line-height: 14px;
+			}
 		}
 	}
 </style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 73c4479..59ca87e 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -11,7 +11,7 @@
 	.beta {
 		position: fixed;
 		top: 0;
-		right: 0;
+		left: 0;
 		margin: 1em 1.5em;
 		border-radius: 9999px;
 		background: linear-gradient(120deg, var(--primary-200), var(--primary-500), var(--primary-800));
diff --git a/src/routes/manager/[id]/+page.svelte b/src/routes/manager/[id]/+page.svelte
index a91cba9..ea048aa 100644
--- a/src/routes/manager/[id]/+page.svelte
+++ b/src/routes/manager/[id]/+page.svelte
@@ -10,12 +10,16 @@
 	import { backOut } from 'svelte/easing';
 	import { fly } from 'svelte/transition';
 	import ioClient from 'socket.io-client';
+	import Confetti from 'svelte-confetti';
 
 	let roomId = $page.params.id;
 	let url = $state('');
 
 	let io: Socket;
 
+	let resultsItem = $state(null);
+	let resultDefender = $state(null);
+
 	let pokerManager = $state({
 		team: '',
 		cards: ['XS', 'S', 'M', 'L', 'XL', 'XXL'],
@@ -23,7 +27,7 @@
 		userStory: ''
 	});
 
-	let users = $state([]);
+	let users = $state(null);
 
 	const canStarVote = () => {
 		if (pokerManager.userStory == '') {
@@ -65,6 +69,22 @@
 					primary: payload.hexcode
 				});
 			}
+			resultsItem = null;
+			resultDefender = null;
+
+			if (payload?.state == 'result') {
+				if (payload?.result) {
+					resultsItem = payload.result;
+				}
+
+				if (payload?.defender) {
+					resultDefender = payload.defender;
+				}
+
+				console.log('resultsItem', resultsItem);
+				console.log('resultDefender', resultDefender);
+			}
+
 			pokerManager = payload;
 		});
 
@@ -73,13 +93,6 @@
 				primary: payload.hexcode
 			});
 		});
-
-		io.on('reconnect', (attempt) => {
-			console.info(`Reconnecté après ${attempt} tentatives.`);
-			toast.success('Reconnecté au serveur !');
-
-			io.emit('join', { roomId, name: 'ADMIN' });
-		});
 	};
 
 	onMount(() => {
@@ -112,6 +125,33 @@
 
 <svelte:head><title>Poker Planning: {pokerManager.team}</title></svelte:head>
 
+{#if resultsItem}
+	{#if resultsItem?.length == 1 && resultsItem?.[0]?.[1]?.length > 1}
+		<div
+			style="
+				position: fixed;
+				top: -50px;
+				left: 0;
+				height: 100vh;
+				width: 100vw;
+				display: flex;
+				justify-content: center;
+				overflow: hidden;
+				pointer-events: none;"
+		>
+			<Confetti
+				x={[-5, 5]}
+				y={[0, 0.1]}
+				delay={[500, 2000]}
+				infinite
+				duration={5000}
+				amount={200}
+				fallDistance="100vh"
+			/>
+		</div>
+	{/if}
+{/if}
+
 <main>
 	<div class="manager">
 		<div class="container">
@@ -146,29 +186,44 @@
 	</div>
 
 	<div class="information">
-		{#if users?.length < 1}
-			<div>
-				<p style="text-align: center;">Pas de participants pour la planification du poker.</p>
-			</div>
-		{:else}
-			<p style="text-align: end;">{users.length} player{users.length > 1 ? 's' : ''}</p>
-		{/if}
+		{#if users != null}
+			{#if users?.length < 1}
+				<div>
+					<p style="text-align: center;">Pas de participants pour la planification du poker.</p>
+				</div>
+			{:else}
+				<p style="text-align: end;">{users.length} player{users.length > 1 ? 's' : ''}</p>
+			{/if}
 
-		{#each users as user}
-			<div class="user">
-				<div class="profile">
-					<img src="https://api.dicebear.com/9.x/dylan/svg?seed={user.name}" />
-					<h2>{user.name}</h2>
+			{#each users as user}
+				<div
+					class="user"
+					class:defender={resultDefender?.name == user?.name &&
+						resultDefender?.item == user?.selectedCard}
+				>
+					<div class="profile">
+						<img src="https://api.dicebear.com/9.x/dylan/svg?seed={user.name}" />
+						<h2>{user.name}</h2>
+					</div>
+					{#if pokerManager.state === 'playing'}
+						<p class="skeleton" class:selectedLetter={user.selectedCard != null}></p>
+					{:else if pokerManager.state === 'result'}
+						<p>{user.selectedCard}</p>
+					{:else}
+						<h3 class="no-vote">-</h3>
+					{/if}
+				</div>
+			{/each}
+		{:else}
+			{#each Array(Math.floor(Math.random() * 5) + 3).fill(0) as _}
+				<div class="user">
+					<div class="profile">
+						<div class="img-skeleton"></div>
+						<span class="name-skeleton"></span>
+					</div>
 				</div>
-				{#if pokerManager.state === 'playing'}
-					<p class="skeleton" class:selectedLetter={user.selectedCard != null}></p>
-				{:else if pokerManager.state === 'result'}
-					<p>{user.selectedCard}</p>
-				{:else}
-					<h3 class="no-vote">-</h3>
-				{/if}
-			</div>
-		{/each}
+			{/each}
+		{/if}
 	</div>
 </main>
 
@@ -246,6 +301,11 @@
 				background-color: var(--primary-200);
 				font-weight: 600;
 				color: var(--primary-950);
+				box-sizing: border-box;
+
+				&.defender {
+					border: 3px solid var(--primary-800);
+				}
 
 				.profile {
 					display: flex;
@@ -258,6 +318,38 @@
 						width: 40px;
 						height: 40px;
 					}
+
+					.img-skeleton {
+						border: 2px solid var(--primary-700);
+						width: 40px;
+						height: 40px;
+						background-color: var(--primary-500);
+						border-radius: 100%;
+					}
+
+					.name-skeleton {
+						background-color: var(--primary-500);
+						width: 100px;
+						height: 20px;
+						border-radius: 5px;
+						background: linear-gradient(
+							120deg,
+							var(--primary-300),
+							var(--primary-500),
+							var(--primary-700)
+						);
+						background-size: 200% 200%;
+						animation: shimmer 1s infinite alternate;
+
+						@keyframes shimmer {
+							0% {
+								background-position: 0% 50%;
+							}
+							100% {
+								background-position: 100% 50%;
+							}
+						}
+					}
 				}
 
 				.no-vote {
diff --git a/src/routes/rooms/[id]/+page.svelte b/src/routes/rooms/[id]/+page.svelte
index bb3177b..ceb7478 100644
--- a/src/routes/rooms/[id]/+page.svelte
+++ b/src/routes/rooms/[id]/+page.svelte
@@ -75,7 +75,7 @@
 			});
 
 			io.on('game-update', (payload) => {
-				console.log('payload', payload);
+				console.log('Payload', payload);
 				resultsItem = null;
 				resultDefender = null;
 
@@ -101,7 +101,7 @@
 			});
 
 			io.on('success', (payload) => {
-				console.log('payload sucess', payload);
+				console.log('Payload success', payload);
 				if (payload?.success) {
 					if (timeout) {
 						clearTimeout(timeout);
@@ -128,16 +128,6 @@
 					goto('/join');
 				}
 			});
-
-			io.on('reconnect', (attempt) => {
-				console.info(`Reconnecté après ${attempt} tentatives.`);
-				toast.success('Reconnecté au serveur !');
-
-				io.emit('join', { roomId, name: username });
-				if (submittedLetter != null) {
-					sendVote(submittedLetter);
-				}
-			});
 		} catch (e) {
 			console.error('Websocket error', e);
 		} finally {
@@ -302,8 +292,8 @@
 									y={[0, 0.1]}
 									delay={[500, 2000]}
 									infinite
-									duration="5000"
-									amount="200"
+									duration={5000}
+									amount={200}
 									fallDistance="100vh"
 								/>
 							</div>