globuzma/Tapage
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity

Add custom questions + change theme + remove webcam from photo question

Browse source
This commit is contained in:
Lucien Astié 2024-08-10 10:26:00 +02:00
parent 28e1a0c4f8
commit cea7a5bc9d
6 changed files with 225 additions and 139 deletions
Download patch file Download diff file Expand all files Collapse all files

137
app/[id]/page.tsx
View file

@ -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>
}

153
app/[id]/questions.ts
View file

@ -1,107 +1,120 @@
export const questions = [
//"Qui organiserait le mieux des vacances ?",
//"Qui serait plus susceptible de vivre à Paris",
//"Qui est le/la plus gourmand·e ?",
//"Qui a vote le plus à droite ?",
//"Qui cuisine le mieux ?",
//"Qui pourrait passer son temps à dormir ?",
//"Qui est la plus petite tasse ?",
//"Qui est le/la plus sportif·ve ?",
//"Qui a le meilleur sens de l'humour ?",
//"Qui est le/la plus ponctuel·le ?",
//"Qui est le/la plus aventureux·se ?",
//"Qui cuisine le mieux ?",
//"Qui a le plus de connaissances en musique ?",
//"Qui est le/la plus artistique ?",
//"Qui est le/la plus sociable ?",
//"Qui est le/la plus compétitif·ve ?",
//"Qui est le/la plus susceptible de devenir célèbre ?",
//"Qui est le/la plus généreux·se ?",
//"Qui a le plus de chances de voyager dans l'espace ?",
//"Qui a les meilleures compétences en survie ?",
//"Qui a le plus d'animaux de compagnie ?",
//"Qui est le/la plus organisé·e ?",
//"Qui est le/la plus romantique ?",
//"Qui est le/la plus économe ?",
//"Qui a le plus de style vestimentaire ?",
//"Qui est le/la plus fêtard·e ?",
//"Qui a le plus de talents cachés ?",
//"Qui est le/la plus technophile ?",
//"Qui est le/la plus écolo ?",
//"Qui est le/la plus doué·e pour les langues étrangères ?",
//"Qui a le plus de chances de gagner un marathon ?",
//"Qui est le/la plus passionné·e de lecture ?",
//"Qui est le/la plus doué·e pour le bricolage ?",
//"Qui est le/la plus susceptible de réussir en affaires ?",
//"Qui a le plus de connaissances en cinéma ?",
//"Qui est le/la plus spirituel·le ?",
//"Qui est le/la plus susceptible de vivre à l'étranger ?",
//"Qui est le/la plus drôle ?",
//"Qui est le/la plus susceptible de participer à une émission de télé-réalité ?",
//"Qui a le plus de patience ?",
//"Qui est le/la plus passionné·e de jeux vidéo ?",
//"Qui est le/la plus susceptible de devenir un·e chef·fe renommé·e ?",
//"Qui est le/la plus doué·e pour les jeux de société ?",
//"Qui a le plus de connaissances historiques ?",
//"Qui est le/la plus passionné·e de jardinage ?",
//"Qui a les meilleurs talents d'acteur·rice ?",
import { IconCrown, IconWind, IconPencil } from "@tabler/icons-react"
const questionsClassic = [
{ text: "Qui organiserait le mieux des vacances ?", type: "text"},
{ text: "Qui serait plus susceptible de vivre à Paris", type: "text"},
{ text: "Qui est le/la plus gourmand·e ?", type: "text"},
{ text: "Qui a vote le plus à droite ?", type: "text"},
{ text: "Qui cuisine le mieux ?", type: "text"},
{ text: "Qui pourrait passer son temps à dormir ?", type: "text"},
{ text: "Qui est la plus petite tasse ?", type: "text"},
{ text: "Qui est le/la plus sportif·ve ?", type: "text"},
{ text: "Qui a le meilleur sens de l'humour ?", type: "text"},
{ text: "Qui est le/la plus ponctuel·le ?", type: "text"},
{ text: "Qui est le/la plus aventureux·se ?", type: "text"},
{ text: "Qui cuisine le mieux ?", type: "text"},
{ text: "Qui a le plus de connaissances en musique ?", type: "text"},
{ text: "Qui est le/la plus artistique ?", type: "text"},
{ text: "Qui est le/la plus sociable ?", type: "text"},
{ text: "Qui est le/la plus compétitif·ve ?", type: "text"},
{ text: "Qui est le/la plus susceptible de devenir célèbre ?", type: "text"},
{ text: "Qui est le/la plus généreux·se ?", type: "text"},
{ text: "Qui a le plus de chances de voyager dans l'espace ?", type: "text"},
{ text: "Qui a les meilleures compétences en survie ?", type: "text"},
{ text: "Qui a le plus d'animaux de compagnie ?", type: "text"},
{ text: "Qui est le/la plus organisé·e ?", type: "text"},
{ text: "Qui est le/la plus romantique ?", type: "text"},
{ text: "Qui est le/la plus économe ?", type: "text"},
{ text: "Qui a le plus de style vestimentaire ?", type: "text"},
{ text: "Qui est le/la plus fêtard·e ?", type: "text"},
{ text: "Qui a le plus de talents cachés ?", type: "text"},
{ text: "Qui est le/la plus technophile ?", type: "text"},
{ text: "Qui est le/la plus écolo ?", type: "text"},
{ text: "Qui est le/la plus doué·e pour les langues étrangères ?", type: "text"},
{ text: "Qui a le plus de chances de gagner un marathon ?", type: "text"},
{ text: "Qui est le/la plus passionné·e de lecture ?", type: "text"},
{ text: "Qui est le/la plus doué·e pour le bricolage ?", type: "text"},
{ text: "Qui est le/la plus susceptible de réussir en affaires ?", type: "text"},
{ text: "Qui a le plus de connaissances en cinéma ?", type: "text"},
{ text: "Qui est le/la plus spirituel·le ?", type: "text"},
{ text: "Qui est le/la plus susceptible de vivre à l'étranger ?", type: "text"},
{ text: "Qui est le/la plus drôle ?", type: "text"},
{ text: "Qui est le/la plus susceptible de participer à une émission de télé-réalité ?", type: "text"},
{ text: "Qui a le plus de patience ?", type: "text"},
{ text: "Qui est le/la plus passionné·e de jeux vidéo ?", type: "text"},
{ text: "Qui est le/la plus susceptible de devenir un·e chef·fe renommé·e ?", type: "text"},
{ text: "Qui est le/la plus doué·e pour les jeux de société ?", type: "text"},
{ text: "Qui a le plus de connaissances historiques ?", type: "text"},
{ text: "Qui est le/la plus passionné·e de jardinage ?", type: "text"},
{ text: "Qui a les meilleurs talents d'acteur·rice ?", type: "text"},
]
const questionsLeVent = [
{ text: "Qui va sauter dans la piscine ?", type: "text"},
{ text: "Qui date le plus âgé ?", type: "text"},
{ text: "Qui est le plus flexible avec démonstration ?", type: "text"},
{ text: "Qui est le/la plus flexible avec démonstration ?", type: "text"},
{ text: "Qui va faire un striptease ?", type:"text"},
{ text: "Qui sera la pire parent ?", type:"text"},
{ text: "Qui est le plus alcoolique ?", type:"text"},
{ text: "Qui sera la/le pire parent ?", type:"text"},
{ text: "Qui est le/la plus alcoolique ?", type:"text"},
{ text: "Qui serait capable de chier dans la seine ?", type:"text"},
{ text: "Qui va montrer son dernier message envoyé ?", type:"text"},
{ text: "Qui va montrer son dernier message envoyé ?", type:"photo"},
{ text: "Qui va faire une roulette de photos ?", type:"text"},
{ text: "Qui a déjà bouffé les deux boules d'un mec ?", type:"text"},
{ text: "Qui va nous décrire son crush ?", type: "text"},
{ text: "Qui est le plus addict ?", type: "text"},
{ text: "Qui est le plus croquant ?", type: "text"},
{ text: "Qui est la/le plus addict ?", type: "text"},
{ text: "Qui est le/la plus croquant·e ?", type: "text"},
{ text: "Qui s'auto-suce le plus ?", type: "text"},
{ text: "Qui va prendre une fessée avec la tongue de l'archi Vergnaud ?", type: "text"},
{ text: "Qui est le plus à droite ?", type: "text"},
{ text: "Qui est le/la plus à droite ?", type: "text"},
{ text: "Qui conduit le mieux ?", type: "text"},
{ text: "Qui gagne au bras de fer ? (Preuve)", type: "text"},
{ text: "Qui va faire une roulade ?", type: "text"},
{ text: "Qui a le plus une tête de con•ne ?", type: "text"},
{ text: "Qui est le meilleur menteur ?", type: "text"},
{ text: "Qui est le/la meilleur·e menteur·euse ?", type: "text"},
{ text: "Qui rikou ?", type: "text"},
{ text: "Qui va boire un shot d'huile ?", type: "text"},
{ text: "Qui va manger une cuillère a soupe de mayonnaise ?", type: "text"},
{ text: "Qui va choisir ce que l'autre va manger ?", type: "text"},
{ text: "Qui va nous organiser les prochaines vacances ?", type: "text"},
{ text: "Qui a la plus belle fesse ?", type: "text"},
{ text: "Qui est le plus intrusif ?", type: "text"},
{ text: "Qui a le plus haut bodycount ?", type: "text"},
{ text: "Qui va imiter Nicolas Pham ?", type: "text"},
{ text: "Qui va dire vinaigrette sans Vi ?", type: "text"},
{ text: "Qui va faire son âge divisé par deux en pompes ?", type: "text"},
{ text: "Qui va faire l'intro pour le dernier tiktok ?", type: "text"},
{ text: "Qui va faire une photo sexy avec son voisin de droite ?", type: "photo"},
{ text: "Qui va faire une photo sexy avec son/sa voisin·e de droite ?", type: "photo"},
{ text: "Qui va brouter de l'herbe ?", type: "text"},
{ text: "Qui va boire un Ricard piscine ?", type: "text"},
{ text: "Qui est susceptible de se marier ?", type: "text"},
{ text: "À qui donneriez vous vos enfants ?", type: "text"},
{ text: "Qui serait le meilleur DDP ?", type: "text"},
{ text: "Qui serait le/la meilleur·e DDP ?", type: "text"},
{ text: "À qui tu te confierais le plus ?", type: "text"},
{ text: "Qui est le plus béru ?", type: "text"},
{ text: "Qui est le plus kinky ?", type: "text"},
{ text: "Qui est le/la plus béru·e ?", type: "text"},
{ text: "Qui est le/la plus kinky ?", type: "text"},
{ text: "Qui va nous chanter le menu ?", type: "text"},
{ text: "Qui lance un monôme tout nu ?", type: "text"},
{ text: "Qui est le plus rapide ?", type: "text"},
{ text: "Qui est le plus susceptible d'être célèbre ?", type: "text"},
{ text: "Qui est le plus romantique ?", type: "text"},
{ text: "Qui est le/la plus rapide ?", type: "text"},
{ text: "Qui est le/la plus susceptible d'être célèbre ?", type: "text"},
{ text: "Qui est le/la plus romantique ?", type: "text"},
{ text: "Qui va raconter la chose la plus folle de sa vie ?", type: "text"},
{ text: "Qui se masturbe le plus ?", type: "text"},
{ text: "Qui est le plus gros fan de star wars ?", type: "text"},
{ text: "Qui est le/la plus gros·se fan de star wars ?", type: "text"},
{ text: "Qui a pleuré en dernier ?", type: "text"},
]
export function getRandomQuestion(alreadyDone = []){
let questionIndex = Math.floor(Math.random() * questions.length)
while(alreadyDone.includes(questionIndex)){
questionIndex = Math.floor(Math.random() * questions.length)
export const playModes = [
{ name: "Classic", icon: IconCrown, questions: questionsClassic },
{ name: "Le vent", icon: IconWind, questions: questionsLeVent},
{ name: "Custom", icon: IconPencil, questions: []},
]
export function getRandomQuestion(mode, alreadyDone = [], customQuestions){
let questionList = mode.questions
if(mode.name == "Custom") {
questionList = customQuestions
}
return {alreadyDone: [...alreadyDone, questionIndex], question: questions[questionIndex]}
let questionIndex = Math.floor(Math.random() * questionList.length)
while(alreadyDone.includes(questionIndex)){
questionIndex = Math.floor(Math.random() * questionList.length)
}
return {alreadyDone: [...alreadyDone, questionIndex], question: questionList[questionIndex]}
}