Add persistence of connection

app/[id]/page.tsx

@@ -19,6 +19,7 @@ export default function Home({ params }: roomProps) {
   const [role, setRole] = useState("")
   const [name, setName] = useState("")
   const [avatar, setAvatar] = useState(defaultAvatarImage)
+  const [browserId, setBrowserId] = useState("")
 
   const [gameStarted, setGameStarted] = useState(false)
   const [gameEnded, setGameEnded] = useState(false)
@@ -43,12 +44,15 @@ export default function Home({ params }: roomProps) {
         setName(localName)
         const localAvatar = localStorage.getItem('avatar')
         setAvatar(localAvatar)
+        const localBrowserId = localStorage.getItem("browserId")
+        setBrowserId(localBrowserId)
+
         // Listen for incoming setMessages
         socketRef.current = io("ws://localhost:3000");
 
         socketRef.current.on("connect", () => {
           setIsConnected(true)
-          socketRef.current.emit('room_connect', {id: id, name: localName, avatar: localAvatar})
+          socketRef.current.emit('room_connect', {id: id, name: localName, avatar: localAvatar, browserId: localBrowserId})
         });
 
         socketRef.current.on("new_player", (params) => {
@@ -56,7 +60,7 @@ export default function Home({ params }: roomProps) {
         })
 
         socketRef.current.on("start_game", (params) => {
-          setQuestionNbr(oldQ => oldQ + 1)
+          setQuestionNbr(params.questionNbr)
           setGameStarted(true)
           setQuestionDisplayed(params.question)
           setPossibleChoice(params.possibleChoice)

app/page.tsx

@@ -10,6 +10,7 @@ import Webcam from 'react-webcam'
 export default function Home() {
   const [name, setName] = useState("") 
   const [avatar, setAvatar] = useState(defaultAvatarImage)
+  const [browserId, setBrowserId] = useState("")
   const [showWebcam, setShowWebcam] = useState(false)
   const webcamRef = useRef()
   const modal = useRef()
@@ -27,6 +28,12 @@ export default function Home() {
     })
   }
 
+  function uuidv4() {
+    return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c =>
+      (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)
+    );
+  }
+
   function takePictureAvatar() {
     const imageSrc = webcamRef.current.getScreenshot()
     setAndStoreAvatar(imageSrc)
@@ -71,6 +78,7 @@ export default function Home() {
   useEffect(() => {
     let localName = localStorage.getItem("name")
     let localAvatar = localStorage.getItem("avatar")
+    let localBrowserId = localStorage.getItem("browserId")
     if(localName != null){
       setName(localName)
     } else {
@@ -80,6 +88,14 @@ export default function Home() {
     if(localAvatar != null) {
       setAvatar(localAvatar)
     }
+
+    if(localBrowserId != null) {
+      setBrowserId(localBrowserId)
+    } else {
+      let uuid = uuidv4()
+      setBrowserId(uuid)
+      localStorage.setItem("browserId", uuid)
+    }
   }, [])
 
   return (

app/usernameGenerate.ts

@@ -7,6 +7,23 @@ const prenom = [
   "Patrick",
   "Agathe",
   "Erneste",
+  "Gertrude",
+  "Eustache",
+  "Cunégonde",
+  "Barnabé",
+  "Arsène",
+  "Clotilde",
+  "Adélaïde",
+  "Rosalie",
+  "Firmin",
+  "Hortense",
+  "Gustave",
+  "Odile",
+  "Gontran",
+  "Léopoldine",
+  "Achille",
+  "Eugène",
+  "Gédéon",
 ]
 
 const nom = [
@@ -16,6 +33,25 @@ const nom = [
   "Zigounette",
   "Pissenlit",
   "Détritus",
+  "Moufette",
+  "Panade",
+  "Boulet",
+  "Moustache",
+  "Tapage",
+  "Bidule",
+  "Patate",
+  "Clafoutis",
+  "Crouton",
+  "Bibelot",
+  "Pinceau",
+  "Chiffon",
+  "Trompette",
+  "Chipolata",
+  "Boussole",
+  "Touillette",
+  "Fanfreluche",
+  "Grenouille",
+  "Pamplemousse"
 ]
 
 export function getUsername(){