Add possibility to send picture through the app for certains questions

app/[id]/page.tsx

@@ -3,8 +3,10 @@ import { useState, useEffect, useRef } from 'react'
 import { io } from "socket.io-client"
 import { getRandomQuestion } from "./questions"
 import { useForceUpdate } from "./forceUpdate"
-import { IconCrown } from "@tabler/icons-react"
+import { IconCrown, IconPhotoUp, IconCamera } from "@tabler/icons-react"
 import { defaultAvatarImage } from '../avatarImage'
+import { resizeBase64Image, getBase64OfImage } from '../utils'
+import Webcam from 'react-webcam'
 
 interface roomProps {
   params: {
@@ -23,7 +25,8 @@ export default function Home({ params }: roomProps) {
 
   const [gameStarted, setGameStarted] = useState(false)
   const [gameEnded, setGameEnded] = useState(false)
-  const [questionDisplayed, setQuestionDisplayed] = useState("")
+  const [questionReply, setQuestionReply] = useState({})
+  const [questionDisplayed, setQuestionDisplayed] = useState({})
   const [possibleChoice, setPossibleChoice] = useState([])
   const [totalVotes, setTotalVotes] = useState(0)
   const [choice, setChoice] = useState("")
@@ -33,6 +36,9 @@ export default function Home({ params }: roomProps) {
   const [questionAlreadyDone, setQuestionAlreadyDone] = useState([])
 
   const socketRef = useRef()
+  const inputPhotoRef = useRef()
+  const photoModalRef = useRef()
+  const webcamRef = useRef()
   const duration = 15
   const questionLimit = 10
 
@@ -76,6 +82,11 @@ export default function Home({ params }: roomProps) {
           setTotalVotes(0)
         })
 
+        socketRef.current.on("question_reply", (params) => {
+          console.log(params)
+          setQuestionReply(params)
+        })
+
         socketRef.current.on("reset_game", (params) => {
           setGameStarted(false)
           setCountdown(0)
@@ -187,8 +198,36 @@ export default function Home({ params }: roomProps) {
     socketRef.current.emit("player_choice", {roomId: id, choice: playerName, player: name})
   }
 
+  function setAndSendPhoto(mode){
+    console.log(mode)
+    if(mode == "webcam"){
+      const imageSrc = webcamRef.current.getScreenshot()
+      resizeBase64Image(imageSrc).then((data) => {
+        setQuestionReply({photo: data})
+        socketRef.current.emit("question_reply", { roomId: id, data:{photo: data}})
+      })
+    }
+    if(mode == "file"){
+      getBase64OfImage(inputPhotoRef.current.files[0], (data) => resizeBase64Image(data).then((data) =>{
+        setQuestionReply({photo: data})
+        socketRef.current.emit("question_reply", { roomId: id, data:{photo: data}})
+      }))
+    }
+  }
+
   return (
     <main className="flex min-h-screen flex-col items-center space-y-16 p-4">
+      <dialog className="modal" ref={photoModalRef}>
+        <div className="modal-box w-full h-full">
+          <Webcam ref={webcamRef} />
+          <div className="modal-action">
+            <form method="dialog">
+              {/* if there is a button, it will close the modal */}
+              <button className="btn" onClick={() => setAndSendPhoto("webcam")}>Close</button>
+            </form>
+          </div>
+        </div>
+      </dialog>
       { !gameStarted && 
         <>
           <div className="flex flex-col">
@@ -231,7 +270,7 @@ export default function Home({ params }: roomProps) {
       { gameStarted &&
         <>
         <div className="flex flex-col space-y-4 items-center">
-          <h1 className="text-3xl">{questionDisplayed}</h1>
+          <h1 className="text-3xl">{questionDisplayed.text}</h1>
           <span className="indicator-item badge indicator-bottom indicator-center opacity-30">{questionNbr}/{questionLimit}</span>
         </div>
         { countdown > 0 &&
@@ -269,6 +308,43 @@ export default function Home({ params }: roomProps) {
                 </div>
               )})}
           </div>
+            { (questionDisplayed.type == "photo" && possibleChoice.sort((a,b) => b.nbrVotes - a.nbrVotes)[0].browserId == browserId) && 
+              <>
+              { questionReply.photo == undefined &&
+                <div className="flex flex-col items-center space-y-4">
+                  <span className="text-xl">À toi d'envoyer une photo !</span>
+                  <input type="file" ref={inputPhotoRef} onChange={() => setAndSendPhoto("file")} className="hidden" />
+                  <div className="flex flex-row space-x-4">
+                    <button className="btn btn-primary" onClick={() => inputPhotoRef.current.click()}><IconPhotoUp /></button>
+                    <button className="btn btn-primary" onClick={() => photoModalRef.current.showModal()}><IconCamera /></button>
+                  </div>
+                </div>
+              }
+              { questionReply.photo != undefined &&
+                <div>
+                  <img src={questionReply.photo} />
+                  <span className="text-zinc-500">Photo received from {possibleChoice.sort((a,b) => b.nbrVotes - a.nbrVotes)[0].name}...</span>
+                </div>
+
+              }
+              </>
+            }
+            { (questionDisplayed.type == "photo" && possibleChoice.sort((a,b) => b.nbrVotes - a.nbrVotes)[0].browserId != browserId) && 
+              <>
+              { questionReply.photo == undefined &&
+                <div>
+                  <span className="text-zinc-500">Waiting for {possibleChoice.sort((a,b) => b.nbrVotes - a.nbrVotes)[0].name}...</span>
+                </div>
+              }
+              { questionReply.photo != undefined &&
+                <div>
+                  <img src={questionReply.photo} />
+                  <span className="text-zinc-500">Photo received from {possibleChoice.sort((a,b) => b.nbrVotes - a.nbrVotes)[0].name}...</span>
+                </div>
+
+              }
+              </>
+            }
             { (role == "owner" && questionNbr < questionLimit) &&
               <button className="btn btn-primary" onClick={nextQuestion}>Next question</button>
             }