From f2824a1d1ea1c405a8b3e71eebe50623819dc55b Mon Sep 17 00:00:00 2001 From: saurabh satapathy Date: Sat, 13 May 2023 11:06:53 +0530 Subject: [PATCH] fixed room not found --- frontend/components/multiGame.js | 509 +++++++++++++++++-------------- 1 file changed, 272 insertions(+), 237 deletions(-) diff --git a/frontend/components/multiGame.js b/frontend/components/multiGame.js index f40df0c..cb8b415 100644 --- a/frontend/components/multiGame.js +++ b/frontend/components/multiGame.js @@ -1,275 +1,310 @@ import React, { useState, useEffect } from "react"; import io from "socket.io-client"; import { useRouter } from "next/router"; -import ShareButton from './shareButton' -import { ToastContainer, toast } from 'react-toastify'; -import 'react-toastify/dist/ReactToastify.css'; +import ShareButton from "./shareButton"; +import { ToastContainer, toast } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; import ErrorPage from "next/error"; import Image from "next/image"; -let socket = io('https://rockout-backend.onrender.com/') +let socket = io("https://rockout-backend.onrender.com/"); +import Head from "next/head"; const multiGame = () => { - const router = useRouter() + const router = useRouter(); - const [playerChoice, setPlayerChoice] = useState(null) - const [opponentChoice, setOpponentChoice] = useState(null) - const [playerScore, setPlayerScore] = useState(0) - const [opponentScore, setOpponentScore] = useState(0) - const [currentRound, setCurrentRound] = useState(1) - const [winner, setWinner] = useState(null) - const [numPlayersReady, setNumPlayersReady] = useState(0); - const [disabled, setDisabled] = useState(false) - const [totalRounds, setTotalRounds] = useState(5) - const [playerName, setPlayerName] = useState(null) - const [opponentName, setOpponentName] = useState("Waiting...") - const [isBothPlayers, setIsBothPlayers] = useState(false) - const { rounds, name, action, slug } = router.query + const [playerChoice, setPlayerChoice] = useState(null); + const [opponentChoice, setOpponentChoice] = useState(null); + const [playerScore, setPlayerScore] = useState(0); + const [opponentScore, setOpponentScore] = useState(0); + const [currentRound, setCurrentRound] = useState(1); + const [winner, setWinner] = useState(null); + const [numPlayersReady, setNumPlayersReady] = useState(0); + const [disabled, setDisabled] = useState(false); + const [totalRounds, setTotalRounds] = useState(5); + const [playerName, setPlayerName] = useState(null); + const [opponentName, setOpponentName] = useState("Waiting..."); + const [isBothPlayers, setIsBothPlayers] = useState(false); + const { rounds, name, action, slug } = router.query; - useEffect(() => { - // Check if rounds are completed - if (currentRound > totalRounds) { - let finalResultDiv = document.getElementById('finalResultDiv') - let finalResulText = document.getElementById('finalResultText') - let container = document.getElementById('container') + useEffect(() => { + // Check if rounds are completed + if (currentRound > totalRounds) { + let finalResultDiv = document.getElementById("finalResultDiv"); + let finalResulText = document.getElementById("finalResultText"); + let container = document.getElementById("container"); - if (playerScore > opponentScore) { - container.style.display = 'none' - finalResultDiv.style.display = 'flex' - finalResulText.innerText = `${playerName} Won!` - finalResulText.style.color = 'green' - setDisabled(true) - return; - } - if (opponentScore > playerScore) { - container.style.display = 'none' - finalResultDiv.style.display = 'flex' - finalResulText.innerText = `${opponentName} Won!` - finalResulText.style.color = 'red' - setDisabled(true) - return; - } - } - }, [currentRound]) + if (playerScore > opponentScore) { + container.style.display = "none"; + finalResultDiv.style.display = "flex"; + finalResulText.innerText = `${playerName} Won!`; + finalResulText.style.color = "green"; + setDisabled(true); + return; + } + if (opponentScore > playerScore) { + container.style.display = "none"; + finalResultDiv.style.display = "flex"; + finalResulText.innerText = `${opponentName} Won!`; + finalResulText.style.color = "red"; + setDisabled(true); + return; + } + } + }, [currentRound]); - useEffect(() => { + useEffect(() => { + if (playerChoice && opponentChoice) { + // Determine winner based on user and opponent choice + const determineWinner = () => { if (playerChoice && opponentChoice) { - - // Determine winner based on user and opponent choice - const determineWinner = () => { - if (playerChoice && opponentChoice) { - if (playerChoice === opponentChoice) { - setWinner('Tie'); - } else if ( - (playerChoice === 'rock' && opponentChoice === 'scissors') || - (playerChoice === 'paper' && opponentChoice === 'rock') || - (playerChoice === 'scissors' && opponentChoice === 'paper') - ) { - setWinner(`${playerName} wins!`); - setPlayerScore((prevScore) => prevScore + 1); - setCurrentRound((prevRound) => prevRound + 1); - } else { - setWinner(`${opponentName} wins!`); - setOpponentScore((prevScore) => prevScore + 1); - setCurrentRound((prevRound) => prevRound + 1); - } - } - }; - - determineWinner(); + if (playerChoice === opponentChoice) { + setWinner("Tie"); + } else if ( + (playerChoice === "rock" && opponentChoice === "scissors") || + (playerChoice === "paper" && opponentChoice === "rock") || + (playerChoice === "scissors" && opponentChoice === "paper") + ) { + setWinner(`${playerName} wins!`); + setPlayerScore((prevScore) => prevScore + 1); + setCurrentRound((prevRound) => prevRound + 1); + } else { + setWinner(`${opponentName} wins!`); + setOpponentScore((prevScore) => prevScore + 1); + setCurrentRound((prevRound) => prevRound + 1); + } } - }, [playerChoice, opponentChoice]) + }; - // Check if socket is connected to server - socket.on('connect', () => { - console.log('connected') - console.log(socket.id) - }) + determineWinner(); + } + }, [playerChoice, opponentChoice]); - // Listen for update-choices event - socket.on('update-choices', (choice1, choice2, id) => { - console.log(choice1) - console.log(choice2) - if (id !== socket.id) { - setOpponentChoice(choice2); - } else { - setOpponentChoice(choice1) - } - }); + // Check if socket is connected to server + socket.on("connect", () => { + console.log("connected"); + console.log(socket.id); + }); - // Listen for start-game event - socket.on('start-game', (playerName, ownerName, rounds, id) => { - let loadingBar = document.getElementById('loadingBar'); - let outerMostDiv = document.getElementById('outerMostDiv'); + // Listen for update-choices event + socket.on("update-choices", (choice1, choice2, id) => { + console.log(choice1); + console.log(choice2); + if (id !== socket.id) { + setOpponentChoice(choice2); + } else { + setOpponentChoice(choice1); + } + }); - loadingBar.classList.add('hidden') - outerMostDiv.classList.remove('hidden') + // Listen for start-game event + socket.on("start-game", (playerName, ownerName, rounds, id) => { + let loadingBar = document.getElementById("loadingBar"); + let outerMostDiv = document.getElementById("outerMostDiv"); - if (id !== socket.id) { - setOpponentName(playerName) - } - if (id == socket.id) { - setOpponentName(ownerName) - setTotalRounds(rounds) - } - setIsBothPlayers(true); - console.log('Startgame has been fired') - console.log(playerName + ' ' + id) - }) + loadingBar.classList.add("hidden"); + outerMostDiv.classList.remove("hidden"); - // listen for room-not-found event - socket.on('room-not-found', () => { - let loadingBar = document.getElementById('loadingBar') - let errorPage = document.getElementById('errorPage') + if (id !== socket.id) { + setOpponentName(playerName); + } + if (id == socket.id) { + setOpponentName(ownerName); + setTotalRounds(rounds); + } + setIsBothPlayers(true); + console.log("Startgame has been fired"); + console.log(playerName + " " + id); + }); - loadingBar.classList.add('hidden') - errorPage.classList.remove('hidden') - }) + // listen for room-not-found event + socket.on("room-not-found", () => { + let loadingBar = document.getElementById("loadingBar"); + let errorPage = document.getElementById("errorPage"); - // listen for room-found event - socket.on('room-found', () => { - let loadingBar = document.getElementById('loadingBar'); - let outerMostDiv = document.getElementById('outerMostDiv'); + loadingBar.classList.add("hidden"); + errorPage.classList.remove("hidden"); + }); - loadingBar.classList.add('hidden') - outerMostDiv.classList.remove('hidden') - }) + // listen for room-found event + socket.on("room-found", () => { + let loadingBar = document.getElementById("loadingBar"); + let outerMostDiv = document.getElementById("outerMostDiv"); - const interval = setInterval(() => { - // Check if socket is initialized - if (socket) { - clearInterval(interval); + loadingBar.classList.add("hidden"); + outerMostDiv.classList.remove("hidden"); + }); - if (action == 'create') { - if (name && rounds) { - setPlayerName(name) - setTotalRounds(rounds) - socket.emit('room-has-created', slug, name, rounds, socket.id) - } - } - else { - socket.emit('player-has-joined', slug, name, socket.id) - setPlayerName(name) - } - } - }, 500); + const interval = setInterval(() => { + // Check if socket is initialized + if (socket) { + clearInterval(interval); - // Reset the game after declaring round winner - useEffect(() => { - if (winner) { - setTimeout(() => { - setPlayerChoice(null); - setOpponentChoice(null); - setWinner(null); - setNumPlayersReady(0); - setDisabled(false); - }, 3000); + if (action == "create") { + if (name && rounds) { + setPlayerName(name); + setTotalRounds(rounds); + socket.emit("room-has-created", slug, name, rounds, socket.id); } - }, [winner]); + } else { + socket.emit("player-has-joined", slug, name, socket.id); + setPlayerName(name); + } + } + }, 500); - // Handle player choice - const handleplayerChoice = (choice) => { - if (!isBothPlayers) { - toast.error("Wait for another player to join", { - position: "top-right", - autoClose: 5000, - hideProgressBar: false, - closeOnClick: true, - pauseOnHover: true, - draggable: true, - progress: undefined, - theme: "dark", - }); + // Reset the game after declaring round winner + useEffect(() => { + if (winner) { + setTimeout(() => { + setPlayerChoice(null); + setOpponentChoice(null); + setWinner(null); + setNumPlayersReady(0); + setDisabled(false); + }, 3000); + } + }, [winner]); - return; - } + // Handle player choice + const handleplayerChoice = (choice) => { + if (!isBothPlayers) { + toast.error("Wait for another player to join", { + position: "top-right", + autoClose: 5000, + hideProgressBar: false, + closeOnClick: true, + pauseOnHover: true, + draggable: true, + progress: undefined, + theme: "dark", + }); - if (currentRound > totalRounds) { - setDisabled(true) - return; - } + return; + } - console.log('called') - setPlayerChoice(choice); - socket.emit("player-choice", choice, socket.id, slug); - setNumPlayersReady(numPlayersReady + 1); - setDisabled(true) - socket.emit('message') - }; + if (currentRound > totalRounds) { + setDisabled(true); + return; + } + console.log("called"); + setPlayerChoice(choice); + socket.emit("player-choice", choice, socket.id, slug); + setNumPlayersReady(numPlayersReady + 1); + setDisabled(true); + socket.emit("message"); + }; - return ( - <> -
- -
+ return ( + <> +
+ +
-
- -
+
+ +
-
-
- - -
-
-
-

Round {currentRound}

-
-
-
-

{playerName}

-
-

{playerScore}

-
-
-
-

{opponentName}

-
-

{opponentScore}

-
-
-
-
-
-

Initial

-
-
+
+ + Room: {slug} + +
+ + +
+
+
+

+ Round {currentRound} +

+
+
+
+

+ {playerName} +

+
+

+ {playerScore} +

+
- -
-

Rock Paper Scissors

-
- - - -
-
-

You chose: {playerChoice}

-

Opponent chose: {opponentChoice}

-

{winner}

-
+
+

+ {opponentName} +

+
+

+ {opponentScore} +

+
+
+
+
+

+ Initial +

- - ) -} +
+
+ +
+

+ Rock Paper Scissors +

+
+ + + +
+
+

You chose: {playerChoice}

+

+ Opponent chose: {opponentChoice} +

+

{winner}

+
+
+
+ + ); +}; -export default multiGame +export default multiGame;