Add production mode to docker

Dockerfile

@@ -5,5 +5,6 @@ WORKDIR /app
 COPY package*.json ./
 RUN npm install
 COPY . .
+RUN npm run build
 CMD ["node", "server.mjs"]
 EXPOSE 3000

app/[id]/page.tsx

@@ -1,6 +1,5 @@
 'use client'
 import { useState, useEffect, useRef } from 'react'
-import Image from 'next/image'
 import { Socket, io } from "socket.io-client"
 import { getRandomQuestion, playModes } from "./questions"
 import { IconCrown, IconPhotoUp, IconCamera } from "@tabler/icons-react"
@@ -265,7 +264,7 @@ export default function GameRoom({ params }: roomProps) {
                             <div className="avatar indicator">
                               {player.role == "owner" && <IconCrown className="indicator-item" />}
                               <div className="w-16 rounded">
-                                <Image alt="" src={player.avatar} />
+                                <img src={player.avatar} />
                               </div>
                             </div>
                             <p className="flex flex-row">{player.name}</p>
@@ -339,7 +338,7 @@ export default function GameRoom({ params }: roomProps) {
               }
               { questionReply.photo != undefined &&
                 <div>
-                  <Image alt="" src={questionReply.photo} />
+                  <img src={questionReply.photo} />
                   <span className="text-zinc-500">Photo received from {possibleChoice.sort((a,b) => b.nbrVotes - a.nbrVotes)[0].name}...</span>
                 </div>
 
@@ -355,7 +354,7 @@ export default function GameRoom({ params }: roomProps) {
               }
               { questionReply.photo != undefined &&
                 <div>
-                  <Image alt="" src={questionReply.photo} />
+                  <img src={questionReply.photo} />
                   <span className="text-zinc-500">Photo received from {possibleChoice.sort((a,b) => b.nbrVotes - a.nbrVotes)[0].name}...</span>
                 </div>
 

app/page.tsx

@@ -2,12 +2,11 @@
 
 import { navigate } from './action'
 import { useState, useEffect, useRef } from 'react'
-import { IconPencilMinus, IconCamera, IconDice6 } from "@tabler/icons-react"
+import { IconPencilMinus, IconDice6 } from "@tabler/icons-react"
 import { defaultAvatarImage } from './avatarImage'
-import Image from 'next/image'
 import { getUsername } from './usernameGenerate'
 import { resizeBase64Image, getBase64OfImage } from './utils'
-import Webcam from 'react-webcam'
+import WebcamPhoto from '@/components/webcamPhoto' 
 
 export default function Home() {
   const [name, setName] = useState<string|undefined>("") 
@@ -39,9 +38,8 @@ export default function Home() {
     );
   }
 
-  function takePictureAvatar() {
+  function takePictureAvatar(image: string) {
-    const imageSrc = webcamRef.current!.getScreenshot()
+    setAndStoreAvatar(image)
-    setAndStoreAvatar(imageSrc)
     setShowWebcam(false)
   }
 
@@ -74,12 +72,11 @@ export default function Home() {
         <div className="modal-box flex flex-col space-y-4">
           <div className="avatar flex flex-col items-center space-y-4">
             <div className="w-24 rounded">
-              <Image alt="" src={avatar!} />
+              <img src={avatar!} />
             </div>
             { showWebcam &&
               <>
-                <Webcam ref={webcamRef} />
+                <WebcamPhoto onPhoto={takePictureAvatar}/>
-                <button className="btn btn-primary" onClick={takePictureAvatar}><IconCamera /></button>
               </>
             }
             { !showWebcam &&
@@ -111,7 +108,7 @@ export default function Home() {
       <div className="flex flex-col space-y-4 items-center">
         <div className="avatar">
           <div className="w-24 rounded">
-            <Image alt="" src={avatar!} />
+            <img src={avatar} />
           </div>
         </div>
         <div className="flex flex-row space-x-4">

components/webcamPhoto.tsx

@@ -0,0 +1,16 @@
+import Webcam from 'react-webcam'
+import { useRef } from 'react'
+import { IconCamera } from '@tabler/icons-react'
+
+export default function WebcamPhoto({ onPhoto }:any){
+  const webcamRef = useRef<any>()
+  function takePicture(){
+    const image = webcamRef.current!.getScreenshot()
+    onPhoto(image)
+  }
+
+  return <>
+    <Webcam videoConstraints={{ facingMode: "user" }} ref={webcamRef} />
+    <button className="btn btn-primary" onClick={takePicture}><IconCamera /></button>
+  </>
+}