From 4338b11939e216ab1fc237f4cd137c85dbb1b7f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucien=20Asti=C3=A9?= <lucien@MacBook-Air-de-Lucien.local>
Date: Sat, 10 Aug 2024 13:49:42 +0200
Subject: [PATCH] Add production mode to docker

---
 Dockerfile                 |  1 +
 app/[id]/page.tsx          |  7 +++----
 app/page.tsx               | 17 +++++++----------
 components/webcamPhoto.tsx | 16 ++++++++++++++++
 4 files changed, 27 insertions(+), 14 deletions(-)
 create mode 100644 components/webcamPhoto.tsx

diff --git a/Dockerfile b/Dockerfile
index 1bc1415..6981ff4 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -5,5 +5,6 @@ WORKDIR /app
 COPY package*.json ./
 RUN npm install
 COPY . .
+RUN npm run build
 CMD ["node", "server.mjs"]
 EXPOSE 3000
diff --git a/app/[id]/page.tsx b/app/[id]/page.tsx
index 12f3a59..773d831 100644
--- a/app/[id]/page.tsx
+++ b/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>
 
diff --git a/app/page.tsx b/app/page.tsx
index 971c2fb..e383603 100644
--- a/app/page.tsx
+++ b/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() {
-    const imageSrc = webcamRef.current!.getScreenshot()
-    setAndStoreAvatar(imageSrc)
+  function takePictureAvatar(image: string) {
+    setAndStoreAvatar(image)
     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} />
-                <button className="btn btn-primary" onClick={takePictureAvatar}><IconCamera /></button>
+                <WebcamPhoto onPhoto={takePictureAvatar}/>
               </>
             }
             { !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">
diff --git a/components/webcamPhoto.tsx b/components/webcamPhoto.tsx
new file mode 100644
index 0000000..33139bf
--- /dev/null
+++ b/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>
+  </>
+}