Add avatar image + generateur de pseudo

app/[id]/page.tsx

@@ -4,6 +4,7 @@ import { io } from "socket.io-client"
 import { getRandomQuestion } from "./questions"
 import { useForceUpdate } from "./forceUpdate"
 import { IconCrown } from "@tabler/icons-react"
+import { defaultAvatarImage } from '../avatarImage'
 
 interface roomProps {
   params: {
@@ -17,6 +18,7 @@ export default function Home({ params }: roomProps) {
 
   const [role, setRole] = useState("")
   const [name, setName] = useState("")
+  const [avatar, setAvatar] = useState(defaultAvatarImage)
 
   const [gameStarted, setGameStarted] = useState(false)
   const [gameEnded, setGameEnded] = useState(false)
@@ -37,14 +39,16 @@ export default function Home({ params }: roomProps) {
   const roomNameDisplay = id.substring(0,3) + " " + id.substring(3,6)
 
   useEffect(() => {
-        const username = localStorage.getItem('name')
-        setName(username)
+        const localName = localStorage.getItem('name')
+        setName(localName)
+        const localAvatar = localStorage.getItem('avatar')
+        setAvatar(localAvatar)
         // Listen for incoming setMessages
         socketRef.current = io("ws://localhost:3000");
 
         socketRef.current.on("connect", () => {
           setIsConnected(true)
-          socketRef.current.emit('room_connect', {"id": id, "name": username})
+          socketRef.current.emit('room_connect', {id: id, name: localName, avatar: localAvatar})
         });
 
         socketRef.current.on("new_player", (params) => {
@@ -195,19 +199,21 @@ export default function Home({ params }: roomProps) {
             }
             { (isConnected && players.length > 0) &&
               <div className="flex flex-col space-y-16">
-                <div>
+                <div className="grid grid-cols-3 gap-4">
                   { players.map((player) => {
-                    console.log(player)
-                    if(player.role == "player") {
-                      return (
-                        <p>{player.name}</p>
-                      )
-                    }
-                    if(player.role == "owner") {
-                      return (
-                        <p className="flex flex-row">{player.name}<IconCrown /></p>
-                      )
-                    }
+                    return (
+                      <>
+                        <div className="flex flex-col items-center">
+                          <div className="avatar indicator">
+                            {player.role == "owner" && <IconCrown className="indicator-item" />}
+                            <div className="w-16 rounded">
+                              <img src={player.avatar} />
+                            </div>
+                          </div>
+                          <p className="flex flex-row">{player.name}</p>
+                        </div>
+                      </>
+                    )
                   })}
                 </div>
                 { role == "owner" &&