From 1f3b6ec70adad94f088d9ad82daf802a479cb084 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucien=20Asti=C3=A9?= Date: Mon, 12 Aug 2024 11:47:59 +0200 Subject: [PATCH] Fix bug with no random + prevent user from starting game + ENV vars --- app/[id]/forceUpdate.tsx | 7 ------- app/[id]/page.tsx | 34 +++++++++++++++++++++++++--------- app/[id]/socket.ts | 11 +++++++++++ app/page.tsx | 14 +++++++++++++- app/random/page.tsx | 9 --------- server.mjs | 21 +++++++++++++++++---- 6 files changed, 66 insertions(+), 30 deletions(-) delete mode 100644 app/[id]/forceUpdate.tsx create mode 100644 app/[id]/socket.ts delete mode 100644 app/random/page.tsx diff --git a/app/[id]/forceUpdate.tsx b/app/[id]/forceUpdate.tsx deleted file mode 100644 index 96ef6d9..0000000 --- a/app/[id]/forceUpdate.tsx +++ /dev/null @@ -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 -} diff --git a/app/[id]/page.tsx b/app/[id]/page.tsx index 17ddbff..801943b 100644 --- a/app/[id]/page.tsx +++ b/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(false) const [forceUpdate, setForceUpdate] = useState(0) + const [socketURL, setSocketURL] = useState("") const [role, setRole] = useState("") const [name, setName] = useState("") @@ -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" && <> setAndSaveCustomQuestions(data)} /> - +
+

You have {customQuestions!.length} custom questions

+ +
} @@ -274,7 +290,7 @@ export default function GameRoom({ params }: roomProps) { })} { role == "owner" && - + } } @@ -325,7 +341,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 &&
@@ -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 &&
diff --git a/app/[id]/socket.ts b/app/[id]/socket.ts new file mode 100644 index 0000000..605083b --- /dev/null +++ b/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 +} diff --git a/app/page.tsx b/app/page.tsx index e383603..d6d8511 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -5,6 +5,7 @@ import { useState, useEffect, useRef } from 'react' import { IconPencilMinus, IconDice6 } from "@tabler/icons-react" import { defaultAvatarImage } from './avatarImage' import { getUsername } from './usernameGenerate' +import { redirect, useRouter } from 'next/navigation' import { resizeBase64Image, getBase64OfImage } from './utils' import WebcamPhoto from '@/components/webcamPhoto' @@ -17,6 +18,7 @@ export default function Home() { const modal = useRef() const inputName = useRef() const inputProfilePicRef = useRef() + const { push } = useRouter() function setUsername() { setName(inputName.current!.value) @@ -43,6 +45,16 @@ export default function Home() { setShowWebcam(false) } + function moveToRandomRoom(){ + let roomNumber = "" + for(let i = 0; i < 6; i++) { + roomNumber += Math.floor(Math.random() * 9.99) + } + console.log("Hello") + push('/' + roomNumber.toString()) + //redirect('/' + roomNumber.toString()) + } + useEffect(() => { let localName = localStorage.getItem("name") let localAvatar = localStorage.getItem("avatar") @@ -119,7 +131,7 @@ export default function Home() {
- Create a room +
diff --git a/app/random/page.tsx b/app/random/page.tsx deleted file mode 100644 index 12cf426..0000000 --- a/app/random/page.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { redirect } from 'next/navigation' - -export default function Home() { - let roomNumber = "" - for(let i = 0; i < 6; i++) { - roomNumber += Math.floor(Math.random() * 9.99) - } - redirect('/' + roomNumber.toString()) -} diff --git a/server.mjs b/server.mjs index 58b61c4..59b8518 100644 --- a/server.mjs +++ b/server.mjs @@ -52,18 +52,30 @@ app.prepare().then(() => { console.log("User connected " + socket.id) socket.on('room_connect', (params) => { + + // IF ROOM DOESN'T EXISTS if(!Object.keys(active_rooms).includes(params.id)){ console.log("First person joined " + params.id + " ! " + params.name + " is owner.") - active_rooms[params.id] = { users: [{id: socket.id, name: params.name, avatar: params.avatar, browserId: params.browserId, connected: true, role: "owner", vote: ""}]} + active_rooms[params.id] = { gameStarted: false, users: [{id: socket.id, name: params.name, avatar: params.avatar, browserId: params.browserId, connected: true, role: "owner", vote: ""}]} socket.emit("room_joined", {"room_users": active_rooms[params.id].users, role: "owner"}) - } else { + } + + // IF ROOM EXISTS + else { let userIndexByBrowserId = findUserByBrowserId(params.id, params.browserId) + + // IF USER ALREADY CONNECTED if(userIndexByBrowserId != null) { active_rooms[params.id].users[userIndexByBrowserId].connected = true active_rooms[params.id].users[userIndexByBrowserId].id = socket.id socket.emit("room_joined", {"room_users": active_rooms[params.id].users, role: active_rooms[params.id].users[userIndexByBrowserId].role}) - socket.emit("start_game",{possibleChoice: active_rooms[params.id].possibleChoice, question: active_rooms[params.id].question, questionNbr: active_rooms[params.id].questionNbr, duration: 15}) - } else { + if(active_rooms[params.id].gameStarted){ + socket.emit("start_game",{possibleChoice: active_rooms[params.id].possibleChoice, question: active_rooms[params.id].question, questionNbr: active_rooms[params.id].questionNbr, duration: 15}) + } + } + + // IF USER DIDN'T CONNECT ONCE + else { socket.to(params.id).emit("new_player",{"id": socket.id, "name": params.name, avatar: params.avatar, browserId: params.browserId, connected: true, role: "player"}) active_rooms[params.id].users.push({id: socket.id, name: params.name, avatar: params.avatar, browserId: params.browserId, connected: true, role: "player", vote: ""}) socket.emit("room_joined", {"room_users": active_rooms[params.id].users, role: "player"}) @@ -78,6 +90,7 @@ app.prepare().then(() => { active_rooms[params.roomId].questionNbr = 1 active_rooms[params.roomId].possibleChoice = params.possibleChoice active_rooms[params.roomId].duration = params.duration + active_rooms[params.roomId].gameStarted = true socket.to(params.roomId).emit("start_game",{possibleChoice: params.possibleChoice, question: params.question, questionNbr: 1, duration: params.duration}) })