Fix bug with no random + prevent user from starting game + ENV vars

app/[id]/forceUpdate.tsx

@@ -1,7 +0,0 @@
-'use client'
-import { useState } from 'react'
-
-export default function UseForceUpdate() {
-  const [value, setValue] = useState(0); // integer state
-  return () => setValue(value => value + 1); // update state to force render
-}

app/[id]/page.tsx

@@ -1,6 +1,7 @@
 'use client'
 import { useState, useEffect, useRef } from 'react'
 import { Socket, io } from "socket.io-client"
+import getSocketUrl from './socket'
 import { getRandomQuestion, playModes } from "./questions"
 import { IconCrown, IconPhotoUp, IconCamera } from "@tabler/icons-react"
 import { defaultAvatarImage } from '../avatarImage'
@@ -19,6 +20,7 @@ interface roomProps {
 export default function GameRoom({ params }: roomProps) {
   const [isConnected, setIsConnected] = useState<boolean>(false)
   const [forceUpdate, setForceUpdate] = useState<number>(0)
+  const [socketURL, setSocketURL] = useState<string>("")
 
   const [role, setRole] = useState<string|null>("")
   const [name, setName] = useState<string|null>("")
@@ -45,6 +47,8 @@ export default function GameRoom({ params }: roomProps) {
   const duration = 15
   const questionLimit = 10
 
+  getSocketUrl().then((url) => {setSocketURL(url)})
+  
   const { id } = params
   const roomNameDisplay = id.substring(0,3) + " " + id.substring(3,6)
 
@@ -60,11 +64,15 @@ export default function GameRoom({ params }: roomProps) {
         setCustomQuestions(localCustomQuestions == null ? [] : localCustomQuestions)
 
         // Listen for incoming setMessages
-        socketRef.current = io("ws://localhost:3000");
+    }, []);
+
+  useEffect(() => {
+    if(socketURL != ""){
+        socketRef.current = io(socketURL);
 
         socketRef.current!.on("connect", () => {
           setIsConnected(true)
-          socketRef.current!.emit('room_connect', {id: id, name: localName, avatar: localAvatar, browserId: localBrowserId})
+          socketRef.current!.emit('room_connect', {id: id, name: name, avatar: avatar, browserId: browserId})
         });
 
         socketRef.current!.on("new_player", (params) => {
@@ -112,7 +120,9 @@ export default function GameRoom({ params }: roomProps) {
         return () => {
             socketRef.current!.disconnect();
         };
-    }, []);
+    }
+  }, [socketURL])
+  
 
   function forceUpdateFunc(){
     setForceUpdate(fu => fu + 1)
@@ -130,8 +140,10 @@ export default function GameRoom({ params }: roomProps) {
           })
           forceUpdateFunc()
         };
-        socketRef.current!.on("player_choice", eventListener)
-        return () => {socketRef.current!.off("player_choice", eventListener)}
+        if(socketRef.current != undefined){
+          socketRef.current!.on("player_choice", eventListener)
+          return () => {socketRef.current!.off("player_choice", eventListener)}
+        }
   }, [possibleChoice])
 
   useEffect(() => {
@@ -214,6 +226,7 @@ export default function GameRoom({ params }: roomProps) {
   function setAndSaveCustomQuestions(data: any){
     setCustomQuestions(data)
     localStorage.setItem("customQuestions", JSON.stringify(data))
+    forceUpdateFunc()
   }
 
   return (
@@ -244,7 +257,10 @@ export default function GameRoom({ params }: roomProps) {
                 { playModes[selectedMode].name == "Custom" &&
                   <>
                     <EditCustomQuestions dataRef={editCustomQuestionsRef} questionList={customQuestions} setQuestions={(data: any) => setAndSaveCustomQuestions(data)} />
-                    <button className="btn btn-primary" onClick={() => editCustomQuestionsRef.current!.showModal()}>Edit questions...</button>
+                    <div className="flex flex-col items-center w-full space-y-4">
+                      <p>You have {customQuestions!.length} custom questions</p>
+                      <button className="btn btn-primary w-full" onClick={() => editCustomQuestionsRef.current!.showModal()}>Edit questions...</button>
+                    </div>
                   </>
                 }
                 </>
@@ -274,7 +290,7 @@ export default function GameRoom({ params }: roomProps) {
                     })}
                   </div>
                   { role == "owner" && 
-                    <button className="btn btn-primary" onClick={startGame}>Start game</button>
+                    <button className="btn btn-primary" onClick={startGame} disabled={players!.length <= 1 || (customQuestions!.length == 0 && playModes[selectedMode].name == "Custom")}>Start game</button>
                   }
                 </div>
               }
@@ -325,7 +341,7 @@ export default function GameRoom({ params }: roomProps) {
                 </div>
               )})}
           </div>
-            { (questionDisplayed.type == "photo" && possibleChoice.sort((a,b) => b.nbrVotes - a.nbrVotes)[0].browserId == browserId) && 
+            { (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">
@@ -345,7 +361,7 @@ export default function GameRoom({ params }: roomProps) {
               }
               </>
             }
-            { (questionDisplayed.type == "photo" && possibleChoice.sort((a,b) => b.nbrVotes - a.nbrVotes)[0].browserId != browserId) && 
+            { (questionDisplayed!.type == "photo" && possibleChoice.sort((a,b) => b.nbrVotes - a.nbrVotes)[0].browserId != browserId) && 
               <>
               { questionReply.photo == undefined &&
                 <div>

app/[id]/socket.ts

@@ -0,0 +1,11 @@
+'use server'
+
+export default async function getSocketUrl() {
+  const ssl = process.env.USE_SSL == undefined ? false : process.env.USE_SSL
+  const url = process.env.URL == undefined ? "localhost:3000" : process.env.URL
+  
+  const protocol = ssl ? "wss://" : "ws://"
+
+  console.log(protocol + url)
+  return protocol + url
+}