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

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

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

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

View file

@ -5,8 +5,8 @@ import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
title: "✨ Tapage ✨",
description: "Created by Lucien",
};
export default function RootLayout({
@ -15,7 +15,7 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
<html lang="en">
<html lang="fr">
<body className={inter.className}>{children}</body>
</html>
);

View file

@ -16,6 +16,7 @@ export default function Home() {
const webcamRef = useRef()
const modal = useRef()
const inputName = useRef()
const inputProfilePicRef = useRef()
function setUsername() {
setName(inputName.current.value)
@ -65,7 +66,7 @@ export default function Home() {
}, [])
return (
<main data-theme="light" className="flex min-h-screen flex-col items-center space-y-16 p-24">
<main data-theme="cupcake" className="flex min-h-screen flex-col items-center space-y-16 p-24">
<dialog ref={modal} className="modal">
<div className="modal-box flex flex-col space-y-4">
<div className="avatar flex flex-col items-center space-y-4">
@ -79,10 +80,11 @@ export default function Home() {
</>
}
{ !showWebcam &&
<>
<div className="flex flex-row space-x-4">
<button className="btn btn-primary" onClick={() => {setShowWebcam(true)}}>Use Webcam</button>
<input type="file" onChange={(e) => {getBase64OfImage(e.target.files[0], (data) => setAndStoreAvatar(data))}} className="file-input w-full max-w-xs"/>
</>
<button className="btn btn-primary" onClick={() => inputProfilePicRef.current.click() }>Select image</button>
<input ref={inputProfilePicRef} type="file" onChange={(e) => {getBase64OfImage(e.target.files[0], (data) => setAndStoreAvatar(data))}} className="hidden"/>
</div>
}
</div>
<label className="form-control w-full">
@ -102,7 +104,7 @@ export default function Home() {
</div>
</div>
</dialog>
<h1 className="text-3xl">Bazaar</h1>
<h1 className="text-6xl font-bold"> Tapage </h1>
<div className="flex flex-col space-y-4 items-center">
<div className="avatar">
<div className="w-24 rounded">

View file

@ -0,0 +1,47 @@
import { useState } from 'react'
import { IconSquareX } from '@tabler/icons-react'
export default function EditCustomQuestions({dataRef, questionList = [], setQuestions}){
let questionTemp = questionList
console.log(questionTemp)
const [forceUpdate, setForceUpdate] = useState(0)
function addQuestion(){
questionTemp.push({text: "", type:"text"})
setForceUpdate(oldFu => oldFu + 1)
}
function removeQuestion(index){
questionTemp.splice(index, 1)
setForceUpdate(oldFu => oldFu + 1)
}
return <>
<dialog ref={dataRef} className="modal">
<div className="modal-box flex flex-col space-y-8">
<h3 className="font-bold text-lg">Edit custom questions!</h3>
<div className="flex flex-col space-y-4">
{ questionTemp.map((question, index) => {
return(
<div className="flex flex-row space-x-4">
<input type="text" key={index} className="input input-bordered w-full max-w-xs" placeholder="Question" defaultValue={question.text} onChange={(e) => {questionTemp[index].text = e.target.value}}/>
<select onChange={(e) => {questionTemp[index].type = e.target.value}} className="select select-bordered w-24 max-w-xs">
<option>Text</option>
<option>Photo</option>
</select>
<IconSquareX onClick={() => removeQuestion(index)} className="w-12 h-12"/>
</div>
)
})}
</div>
<button className="btn btn-primary" onClick={addQuestion}>Add question</button>
<div className="modal-action">
<form method="dialog">
{/* if there is a button in form, it will close the modal */}
<button className="btn" onClick={() => setQuestions(questionTemp)}>Save</button>
</form>
</div>
</div>
</dialog>
</>
}

9
components/modeCard.tsx Normal file
View file

@ -0,0 +1,9 @@
export default function ModeCard({ mode, selected, onChange }){
const Icon = mode.icon
return <>
<div onClick={onChange} className={`w-24 h-24 rounded-md flex p-4 flex-col items-center ${selected ? "bg-primary" : "bg-zinc-300"}`}>
<Icon className="w-12 h-12" />
<p>{mode.name}</p>
</div>
</>
}