Add custom questions + change theme + remove webcam from photo question
This commit is contained in:
Lucien Astié
parent
28e1a0c4f8
commit
cea7a5bc9d
6 changed files with 225 additions and 139 deletions
|
|
@ -1,11 +1,12 @@
|
|||
'use client'
|
||||
import { useState, useEffect, useRef } from 'react'
|
||||
import { io } from "socket.io-client"
|
||||
import { getRandomQuestion } from "./questions"
|
||||
import { useForceUpdate } from "./forceUpdate"
|
||||
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 {
|
||||
|
|
@ -14,7 +15,7 @@ interface roomProps {
|
|||
};
|
||||
}
|
||||
|
||||
export default function Home({ params }: roomProps) {
|
||||
export default function GameRoom({ params }: roomProps) {
|
||||
const [isConnected, setIsConnected] = useState(false)
|
||||
const [forceUpdate, setForceUpdate] = useState(0)
|
||||
|
||||
|
|
@ -34,11 +35,12 @@ export default function Home({ params }: roomProps) {
|
|||
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 photoModalRef = useRef()
|
||||
const webcamRef = useRef()
|
||||
const editCustomQuestionsRef = useRef()
|
||||
const duration = 15
|
||||
const questionLimit = 10
|
||||
|
||||
|
|
@ -52,6 +54,9 @@ export default function Home({ params }: roomProps) {
|
|||
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");
|
||||
|
|
@ -149,7 +154,7 @@ export default function Home({ params }: roomProps) {
|
|||
|
||||
function startGame() {
|
||||
let possibleChoice = getPossibleChoice()
|
||||
let questionObj = getRandomQuestion()
|
||||
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})
|
||||
|
|
@ -162,7 +167,7 @@ export default function Home({ params }: roomProps) {
|
|||
|
||||
function nextQuestion() {
|
||||
let possibleChoice = getPossibleChoice()
|
||||
let questionObj = getRandomQuestion(questionAlreadyDone)
|
||||
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})
|
||||
|
|
@ -198,71 +203,82 @@ export default function Home({ params }: roomProps) {
|
|||
socketRef.current.emit("player_choice", {roomId: id, choice: playerName, player: name})
|
||||
}
|
||||
|
||||
function setAndSendPhoto(mode){
|
||||
console.log(mode)
|
||||
if(mode == "webcam"){
|
||||
const imageSrc = webcamRef.current.getScreenshot()
|
||||
resizeBase64Image(imageSrc).then((data) => {
|
||||
setQuestionReply({photo: data})
|
||||
socketRef.current.emit("question_reply", { roomId: id, data:{photo: data}})
|
||||
})
|
||||
}
|
||||
if(mode == "file"){
|
||||
getBase64OfImage(inputPhotoRef.current.files[0], (data) => resizeBase64Image(data).then((data) =>{
|
||||
setQuestionReply({photo: data})
|
||||
socketRef.current.emit("question_reply", { roomId: id, data:{photo: data}})
|
||||
}))
|
||||
}
|
||||
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 className="flex min-h-screen flex-col items-center space-y-16 p-4">
|
||||
<dialog className="modal" ref={photoModalRef}>
|
||||
<div className="modal-box w-full h-full">
|
||||
<Webcam ref={webcamRef} />
|
||||
<div className="modal-action">
|
||||
<form method="dialog">
|
||||
{/* if there is a button, it will close the modal */}
|
||||
<button className="btn" onClick={() => setAndSendPhoto("webcam")}>Close</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
<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-3xl">{roomNameDisplay}</h1>
|
||||
<h1 className="text-6xl">{roomNameDisplay}</h1>
|
||||
</div>
|
||||
<div className="flex flex-col space-y-4">
|
||||
<div className="flex flex-col space-y-12">
|
||||
{ !isConnected &&
|
||||
<p>Connecting to room...</p>
|
||||
}
|
||||
{ (isConnected && players.length == 0) &&
|
||||
<p>Waiting for players to join...</p>
|
||||
}
|
||||
{ (isConnected && players.length > 0) &&
|
||||
<div className="flex flex-col space-y-16">
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{ 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>
|
||||
</>
|
||||
)
|
||||
})}
|
||||
{ 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>
|
||||
{ role == "owner" &&
|
||||
<button className="btn btn-primary" onClick={startGame}>Start game</button>
|
||||
{ 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>
|
||||
</>
|
||||
|
|
@ -313,10 +329,9 @@ export default function Home({ params }: roomProps) {
|
|||
{ 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("file")} className="hidden" />
|
||||
<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>
|
||||
<button className="btn btn-primary" onClick={() => photoModalRef.current.showModal()}><IconCamera /></button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue