Tapage/app/[id]/page.tsx

375 lines
14 KiB
TypeScript

'use client'
import { useState, useEffect, useRef } from 'react'
import { io } from "socket.io-client"
import { getRandomQuestion, playModes } from "./questions"
import { IconCrown, IconPhotoUp, IconCamera } from "@tabler/icons-react"
import { defaultAvatarImage } from '../avatarImage'
import { resizeBase64Image, getBase64OfImage } from '../utils'
import ModeCard from '@/components/modeCard'
import EditCustomQuestions from '@/components/editCustomQuestions'
import Webcam from 'react-webcam'
interface roomProps {
params: {
id: string;
};
}
export default function GameRoom({ params }: roomProps) {
const [isConnected, setIsConnected] = useState(false)
const [forceUpdate, setForceUpdate] = useState(0)
const [role, setRole] = useState("")
const [name, setName] = useState("")
const [avatar, setAvatar] = useState(defaultAvatarImage)
const [browserId, setBrowserId] = useState("")
const [gameStarted, setGameStarted] = useState(false)
const [gameEnded, setGameEnded] = useState(false)
const [questionReply, setQuestionReply] = useState({})
const [questionDisplayed, setQuestionDisplayed] = useState({})
const [possibleChoice, setPossibleChoice] = useState([])
const [totalVotes, setTotalVotes] = useState(0)
const [choice, setChoice] = useState("")
const [countdown, setCountdown] = useState(0)
const [players, setPlayers] = useState([])
const [questionNbr, setQuestionNbr] = useState(0)
const [questionAlreadyDone, setQuestionAlreadyDone] = useState([])
const [selectedMode, setSelectedMode] = useState(0)
const [customQuestions, setCustomQuestions] = useState([])
const socketRef = useRef()
const inputPhotoRef = useRef()
const editCustomQuestionsRef = useRef()
const duration = 15
const questionLimit = 10
const { id } = params
const roomNameDisplay = id.substring(0,3) + " " + id.substring(3,6)
useEffect(() => {
const localName = localStorage.getItem('name')
setName(localName)
const localAvatar = localStorage.getItem('avatar')
setAvatar(localAvatar)
const localBrowserId = localStorage.getItem("browserId")
setBrowserId(localBrowserId)
const localCustomQuestions = JSON.parse(localStorage.getItem("customQuestions"))
console.log(localCustomQuestions)
setCustomQuestions(localCustomQuestions == null ? [] : localCustomQuestions)
// Listen for incoming setMessages
socketRef.current = io("ws://localhost:3000");
socketRef.current.on("connect", () => {
setIsConnected(true)
socketRef.current.emit('room_connect', {id: id, name: localName, avatar: localAvatar, browserId: localBrowserId})
});
socketRef.current.on("new_player", (params) => {
setPlayers(oldPlayers => [...oldPlayers, params])
})
socketRef.current.on("start_game", (params) => {
setQuestionNbr(params.questionNbr)
setGameStarted(true)
setQuestionDisplayed(params.question)
setPossibleChoice(params.possibleChoice)
setCountdown(params.duration)
})
socketRef.current.on("next_question", (params) => {
setQuestionNbr(oldQ => oldQ + 1)
setChoice("")
setQuestionDisplayed(params.question)
setPossibleChoice(params.possibleChoice)
setCountdown(params.duration)
setTotalVotes(0)
})
socketRef.current.on("question_reply", (params) => {
console.log(params)
setQuestionReply(params)
})
socketRef.current.on("reset_game", (params) => {
setGameStarted(false)
setCountdown(0)
setPossibleChoice([])
setQuestionDisplayed("")
setChoice("")
setQuestionNbr(0)
setTotalVotes(0)
})
socketRef.current.on("room_joined", (params) => {
setPlayers(params.room_users)
setRole(params.role)
})
// Clean up the socket connection on unmount
return () => {
socketRef.current.disconnect();
};
}, []);
function forceUpdateFunc(){
setForceUpdate(fu => fu + 1)
}
useEffect(() => {
const eventListener = (params) => {
setTotalVotes(oldTotal => oldTotal += 1)
console.log(params)
let temp_possibleChoice = possibleChoice
temp_possibleChoice.forEach((playerChoice) => {
if(playerChoice.name == params.choice) {
playerChoice.nbrVotes += 1
}
})
forceUpdateFunc()
};
socketRef.current.on("player_choice", eventListener)
return () => socketRef.current.off("player_choice", eventListener)
}, [possibleChoice])
useEffect(() => {
countdown > 0 && setTimeout(() => setCountdown(countdown - 1), 1000);
}, [countdown]);
function getPossibleChoice() {
let choice1 = Math.floor(Math.random() * players.length)
console.log(players.length)
let choice2 = Math.floor(Math.random() * players.length)
console.log(choice2)
while(choice2 == choice1){
choice2 = Math.floor(Math.random() * players.length)
}
let playerChoice1 = players[choice1]
playerChoice1.nbrVotes = 0
let playerChoice2 = players[choice2]
playerChoice2.nbrVotes = 0
return [playerChoice1, playerChoice2]
}
function startGame() {
let possibleChoice = getPossibleChoice()
let questionObj = getRandomQuestion(playModes[selectedMode], [], customQuestions)
let question = questionObj.question
setQuestionAlreadyDone(questionObj.alreadyDone)
socketRef.current.emit("start_game", {roomId: id, question: question, possibleChoice: possibleChoice, duration: duration})
setCountdown(duration)
setPossibleChoice(possibleChoice)
setQuestionDisplayed(question)
setGameStarted(true)
setQuestionNbr(oldQ => oldQ + 1)
}
function nextQuestion() {
let possibleChoice = getPossibleChoice()
let questionObj = getRandomQuestion(playModes[selectedMode],questionAlreadyDone, customQuestions)
let question = questionObj.question
setQuestionAlreadyDone(questionObj.alreadyDone)
socketRef.current.emit("next_question", {roomId: id, question: question, possibleChoice: possibleChoice, duration: duration})
setCountdown(duration)
setPossibleChoice(possibleChoice)
setQuestionDisplayed(question)
setChoice("")
setQuestionNbr(oldQ => oldQ + 1)
setTotalVotes(0)
}
function resetGame() {
socketRef.current.emit("reset_game", {roomId: id})
setGameStarted(false)
setCountdown(0)
setPossibleChoice([])
setQuestionDisplayed("")
setChoice("")
setQuestionNbr(0)
setTotalVotes(0)
}
function setAndSendChoice(playerName) {
setChoice(playerName)
setTotalVotes(oldTotal => oldTotal += 1)
let temp_possibleChoice = possibleChoice
temp_possibleChoice.forEach((playerChoice) => {
if(playerChoice.name == playerName) {
playerChoice.nbrVotes += 1
}
})
setPossibleChoice(temp_possibleChoice)
socketRef.current.emit("player_choice", {roomId: id, choice: playerName, player: name})
}
function setAndSendPhoto(){
getBase64OfImage(inputPhotoRef.current.files[0], (data) => resizeBase64Image(data).then((data) =>{
setQuestionReply({photo: data})
socketRef.current.emit("question_reply", { roomId: id, data:{photo: data}})
}))
}
function setAndSaveCustomQuestions(data){
setCustomQuestions(data)
localStorage.setItem("customQuestions", JSON.stringify(data))
}
return (
<main data-theme="cupcake" className="flex min-h-screen flex-col items-center space-y-16 p-4">
{ !gameStarted &&
<>
<div className="flex flex-col">
<h1 className="text-6xl">{roomNameDisplay}</h1>
</div>
<div className="flex flex-col space-y-12">
{ !isConnected &&
<p>Connecting to room...</p>
}
{ isConnected &&
<>
{ role == "owner" &&
<>
<div className="flex flex-col space-y-4">
<h2 className="text-2xl font-bold">Choose game mode</h2>
<div className="grid grid-cols-3 place-items-center">
{ playModes.map((mode, index) => {
return(
<ModeCard key={index} mode={mode} onChange={() => setSelectedMode(index)} selected={selectedMode === index} />
)
})}
</div>
</div>
{ playModes[selectedMode].name == "Custom" &&
<>
<EditCustomQuestions dataRef={editCustomQuestionsRef} questionList={customQuestions} setQuestions={(data) => setAndSaveCustomQuestions(data)} />
<button className="btn btn-primary" onClick={() => editCustomQuestionsRef.current.showModal()}>Edit questions...</button>
</>
}
</>
}
<div className="flex flex-col space-y-4">
<h2 className="text-2xl font-bold">Players</h2>
{ players.length == 0 &&
<p>Waiting for players to join...</p>
}
{ players.length > 0 &&
<div className="flex flex-col space-y-16">
<div className="grid grid-cols-3 gap-4 place-items-center">
{ players.map((player) => {
return (
<>
<div className="flex flex-col items-center">
<div className="avatar indicator">
{player.role == "owner" && <IconCrown className="indicator-item" />}
<div className="w-16 rounded">
<img src={player.avatar} />
</div>
</div>
<p className="flex flex-row">{player.name}</p>
</div>
</>
)
})}
</div>
{ role == "owner" &&
<button className="btn btn-primary" onClick={startGame}>Start game</button>
}
</div>
}
</div>
</>
}
</div>
</>
}
{ gameStarted &&
<>
<div className="flex flex-col space-y-4 items-center">
<h1 className="text-3xl">{questionDisplayed.text}</h1>
<span className="indicator-item badge indicator-bottom indicator-center opacity-30">{questionNbr}/{questionLimit}</span>
</div>
{ countdown > 0 &&
<>
<span className="countdown">
<span style={{"--value":countdown.toString()}}></span>
</span>
<div className="flex flex-row space-x-4">
{ choice == "" &&
<>
{ possibleChoice.map((playerChoice) => (
<button className="btn btn-primary" disabled={choice != ""} onClick={() => {setAndSendChoice(playerChoice.name)}}>{playerChoice.name}</button>
))}
</>
}
{ choice != "" &&
<span>Waiting <span className="loading loading-dots loading-xs"></span></span>
}
</div>
</>
}
{ countdown == 0 &&
<>
<div className="flex flex-row space-x-4">
{ possibleChoice.map((playerChoice) => {
console.log(totalVotes)
console.log(playerChoice.nbrVotes / totalVotes)
let percent = Math.floor((playerChoice.nbrVotes / totalVotes) * 100)
return (
<div className="flex items-center space-y-4 flex-col">
<div className="radial-progress text-primary" style={{ "--value": percent }} role="progressbar">
{percent}%
</div>
<h1>{playerChoice.name}</h1>
</div>
)})}
</div>
{ (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">
<span className="text-xl">À toi d'envoyer une photo !</span>
<input type="file" ref={inputPhotoRef} onChange={setAndSendPhoto} className="hidden" />
<div className="flex flex-row space-x-4">
<button className="btn btn-primary" onClick={() => inputPhotoRef.current.click()}><IconPhotoUp /></button>
</div>
</div>
}
{ questionReply.photo != undefined &&
<div>
<img src={questionReply.photo} />
<span className="text-zinc-500">Photo received from {possibleChoice.sort((a,b) => b.nbrVotes - a.nbrVotes)[0].name}...</span>
</div>
}
</>
}
{ (questionDisplayed.type == "photo" && possibleChoice.sort((a,b) => b.nbrVotes - a.nbrVotes)[0].browserId != browserId) &&
<>
{ questionReply.photo == undefined &&
<div>
<span className="text-zinc-500">Waiting for {possibleChoice.sort((a,b) => b.nbrVotes - a.nbrVotes)[0].name}...</span>
</div>
}
{ questionReply.photo != undefined &&
<div>
<img src={questionReply.photo} />
<span className="text-zinc-500">Photo received from {possibleChoice.sort((a,b) => b.nbrVotes - a.nbrVotes)[0].name}...</span>
</div>
}
</>
}
{ (role == "owner" && questionNbr < questionLimit) &&
<button className="btn btn-primary" onClick={nextQuestion}>Next question</button>
}
{ (role == "owner" && questionNbr == questionLimit) &&
<button className="btn btn-primary" onClick={resetGame}>Replay</button>
}
</>
}
</>
}
</main>
);
}