Pass the ESLINT and Typescript build
This commit is contained in:
parent
cea7a5bc9d
commit
32c3debad4
8 changed files with 115 additions and 98 deletions
|
@ -1,6 +1,7 @@
|
||||||
'use client'
|
'use client'
|
||||||
import { useState, useEffect, useRef } from 'react'
|
import { useState, useEffect, useRef } from 'react'
|
||||||
import { io } from "socket.io-client"
|
import Image from 'next/image'
|
||||||
|
import { Socket, io } from "socket.io-client"
|
||||||
import { getRandomQuestion, playModes } from "./questions"
|
import { getRandomQuestion, playModes } from "./questions"
|
||||||
import { IconCrown, IconPhotoUp, IconCamera } from "@tabler/icons-react"
|
import { IconCrown, IconPhotoUp, IconCamera } from "@tabler/icons-react"
|
||||||
import { defaultAvatarImage } from '../avatarImage'
|
import { defaultAvatarImage } from '../avatarImage'
|
||||||
|
@ -8,6 +9,7 @@ import { resizeBase64Image, getBase64OfImage } from '../utils'
|
||||||
import ModeCard from '@/components/modeCard'
|
import ModeCard from '@/components/modeCard'
|
||||||
import EditCustomQuestions from '@/components/editCustomQuestions'
|
import EditCustomQuestions from '@/components/editCustomQuestions'
|
||||||
import Webcam from 'react-webcam'
|
import Webcam from 'react-webcam'
|
||||||
|
import { PlayerChoice } from '@/utils/types'
|
||||||
|
|
||||||
interface roomProps {
|
interface roomProps {
|
||||||
params: {
|
params: {
|
||||||
|
@ -16,31 +18,31 @@ interface roomProps {
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function GameRoom({ params }: roomProps) {
|
export default function GameRoom({ params }: roomProps) {
|
||||||
const [isConnected, setIsConnected] = useState(false)
|
const [isConnected, setIsConnected] = useState<boolean>(false)
|
||||||
const [forceUpdate, setForceUpdate] = useState(0)
|
const [forceUpdate, setForceUpdate] = useState<number>(0)
|
||||||
|
|
||||||
const [role, setRole] = useState("")
|
const [role, setRole] = useState<string|null>("")
|
||||||
const [name, setName] = useState("")
|
const [name, setName] = useState<string|null>("")
|
||||||
const [avatar, setAvatar] = useState(defaultAvatarImage)
|
const [avatar, setAvatar] = useState<string|null>(defaultAvatarImage)
|
||||||
const [browserId, setBrowserId] = useState("")
|
const [browserId, setBrowserId] = useState<string|null>("")
|
||||||
|
|
||||||
const [gameStarted, setGameStarted] = useState(false)
|
const [gameStarted, setGameStarted] = useState<boolean|null>(false)
|
||||||
const [gameEnded, setGameEnded] = useState(false)
|
const [gameEnded, setGameEnded] = useState<boolean|null>(false)
|
||||||
const [questionReply, setQuestionReply] = useState({})
|
const [questionReply, setQuestionReply] = useState<any>({})
|
||||||
const [questionDisplayed, setQuestionDisplayed] = useState({})
|
const [questionDisplayed, setQuestionDisplayed] = useState<any|null>({})
|
||||||
const [possibleChoice, setPossibleChoice] = useState([])
|
const [possibleChoice, setPossibleChoice] = useState<PlayerChoice[]>([])
|
||||||
const [totalVotes, setTotalVotes] = useState(0)
|
const [totalVotes, setTotalVotes] = useState<number>(0)
|
||||||
const [choice, setChoice] = useState("")
|
const [choice, setChoice] = useState<string|null>("")
|
||||||
const [countdown, setCountdown] = useState(0)
|
const [countdown, setCountdown] = useState<number>(0)
|
||||||
const [players, setPlayers] = useState([])
|
const [players, setPlayers] = useState<any[]>([])
|
||||||
const [questionNbr, setQuestionNbr] = useState(0)
|
const [questionNbr, setQuestionNbr] = useState<number>(0)
|
||||||
const [questionAlreadyDone, setQuestionAlreadyDone] = useState([])
|
const [questionAlreadyDone, setQuestionAlreadyDone] = useState<any[]>([])
|
||||||
const [selectedMode, setSelectedMode] = useState(0)
|
const [selectedMode, setSelectedMode] = useState<number>(0)
|
||||||
const [customQuestions, setCustomQuestions] = useState([])
|
const [customQuestions, setCustomQuestions] = useState<any[]|null>([])
|
||||||
|
|
||||||
const socketRef = useRef()
|
const socketRef = useRef<Socket>() // eslint-disable-line
|
||||||
const inputPhotoRef = useRef()
|
const inputPhotoRef = useRef<any>()
|
||||||
const editCustomQuestionsRef = useRef()
|
const editCustomQuestionsRef = useRef<any>()
|
||||||
const duration = 15
|
const duration = 15
|
||||||
const questionLimit = 10
|
const questionLimit = 10
|
||||||
|
|
||||||
|
@ -54,23 +56,23 @@ export default function GameRoom({ params }: roomProps) {
|
||||||
setAvatar(localAvatar)
|
setAvatar(localAvatar)
|
||||||
const localBrowserId = localStorage.getItem("browserId")
|
const localBrowserId = localStorage.getItem("browserId")
|
||||||
setBrowserId(localBrowserId)
|
setBrowserId(localBrowserId)
|
||||||
const localCustomQuestions = JSON.parse(localStorage.getItem("customQuestions"))
|
const localCustomQuestionsString = localStorage.getItem("customQuestions")
|
||||||
console.log(localCustomQuestions)
|
const localCustomQuestions = JSON.parse(localCustomQuestionsString != null ? localCustomQuestionsString : "")
|
||||||
setCustomQuestions(localCustomQuestions == null ? [] : localCustomQuestions)
|
setCustomQuestions(localCustomQuestions == null ? [] : localCustomQuestions)
|
||||||
|
|
||||||
// Listen for incoming setMessages
|
// Listen for incoming setMessages
|
||||||
socketRef.current = io("ws://localhost:3000");
|
socketRef.current = io("ws://localhost:3000");
|
||||||
|
|
||||||
socketRef.current.on("connect", () => {
|
socketRef.current!.on("connect", () => {
|
||||||
setIsConnected(true)
|
setIsConnected(true)
|
||||||
socketRef.current.emit('room_connect', {id: id, name: localName, avatar: localAvatar, browserId: localBrowserId})
|
socketRef.current!.emit('room_connect', {id: id, name: localName, avatar: localAvatar, browserId: localBrowserId})
|
||||||
});
|
});
|
||||||
|
|
||||||
socketRef.current.on("new_player", (params) => {
|
socketRef.current!.on("new_player", (params) => {
|
||||||
setPlayers(oldPlayers => [...oldPlayers, params])
|
setPlayers(oldPlayers => [...oldPlayers, params])
|
||||||
})
|
})
|
||||||
|
|
||||||
socketRef.current.on("start_game", (params) => {
|
socketRef.current!.on("start_game", (params) => {
|
||||||
setQuestionNbr(params.questionNbr)
|
setQuestionNbr(params.questionNbr)
|
||||||
setGameStarted(true)
|
setGameStarted(true)
|
||||||
setQuestionDisplayed(params.question)
|
setQuestionDisplayed(params.question)
|
||||||
|
@ -78,7 +80,7 @@ export default function GameRoom({ params }: roomProps) {
|
||||||
setCountdown(params.duration)
|
setCountdown(params.duration)
|
||||||
})
|
})
|
||||||
|
|
||||||
socketRef.current.on("next_question", (params) => {
|
socketRef.current!.on("next_question", (params) => {
|
||||||
setQuestionNbr(oldQ => oldQ + 1)
|
setQuestionNbr(oldQ => oldQ + 1)
|
||||||
setChoice("")
|
setChoice("")
|
||||||
setQuestionDisplayed(params.question)
|
setQuestionDisplayed(params.question)
|
||||||
|
@ -87,12 +89,12 @@ export default function GameRoom({ params }: roomProps) {
|
||||||
setTotalVotes(0)
|
setTotalVotes(0)
|
||||||
})
|
})
|
||||||
|
|
||||||
socketRef.current.on("question_reply", (params) => {
|
socketRef.current!.on("question_reply", (params) => {
|
||||||
console.log(params)
|
console.log(params)
|
||||||
setQuestionReply(params)
|
setQuestionReply(params)
|
||||||
})
|
})
|
||||||
|
|
||||||
socketRef.current.on("reset_game", (params) => {
|
socketRef.current!.on("reset_game", (params) => {
|
||||||
setGameStarted(false)
|
setGameStarted(false)
|
||||||
setCountdown(0)
|
setCountdown(0)
|
||||||
setPossibleChoice([])
|
setPossibleChoice([])
|
||||||
|
@ -102,14 +104,14 @@ export default function GameRoom({ params }: roomProps) {
|
||||||
setTotalVotes(0)
|
setTotalVotes(0)
|
||||||
})
|
})
|
||||||
|
|
||||||
socketRef.current.on("room_joined", (params) => {
|
socketRef.current!.on("room_joined", (params) => {
|
||||||
setPlayers(params.room_users)
|
setPlayers(params.room_users)
|
||||||
setRole(params.role)
|
setRole(params.role)
|
||||||
})
|
})
|
||||||
|
|
||||||
// Clean up the socket connection on unmount
|
// Clean up the socket connection on unmount
|
||||||
return () => {
|
return () => {
|
||||||
socketRef.current.disconnect();
|
socketRef.current!.disconnect();
|
||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
@ -118,19 +120,19 @@ export default function GameRoom({ params }: roomProps) {
|
||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const eventListener = (params) => {
|
const eventListener = (params: any) => {
|
||||||
setTotalVotes(oldTotal => oldTotal += 1)
|
setTotalVotes(oldTotal => oldTotal += 1)
|
||||||
console.log(params)
|
console.log(params)
|
||||||
let temp_possibleChoice = possibleChoice
|
let temp_possibleChoice = possibleChoice
|
||||||
temp_possibleChoice.forEach((playerChoice) => {
|
temp_possibleChoice!.forEach((playerChoice) => {
|
||||||
if(playerChoice.name == params.choice) {
|
if(playerChoice.name == params.choice) {
|
||||||
playerChoice.nbrVotes += 1
|
playerChoice.nbrVotes += 1
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
forceUpdateFunc()
|
forceUpdateFunc()
|
||||||
};
|
};
|
||||||
socketRef.current.on("player_choice", eventListener)
|
socketRef.current!.on("player_choice", eventListener)
|
||||||
return () => socketRef.current.off("player_choice", eventListener)
|
return () => {socketRef.current!.off("player_choice", eventListener)}
|
||||||
}, [possibleChoice])
|
}, [possibleChoice])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -157,7 +159,7 @@ export default function GameRoom({ params }: roomProps) {
|
||||||
let questionObj = getRandomQuestion(playModes[selectedMode], [], customQuestions)
|
let questionObj = getRandomQuestion(playModes[selectedMode], [], customQuestions)
|
||||||
let question = questionObj.question
|
let question = questionObj.question
|
||||||
setQuestionAlreadyDone(questionObj.alreadyDone)
|
setQuestionAlreadyDone(questionObj.alreadyDone)
|
||||||
socketRef.current.emit("start_game", {roomId: id, question: question, possibleChoice: possibleChoice, duration: duration})
|
socketRef.current!.emit("start_game", {roomId: id, question: question, possibleChoice: possibleChoice, duration: duration})
|
||||||
setCountdown(duration)
|
setCountdown(duration)
|
||||||
setPossibleChoice(possibleChoice)
|
setPossibleChoice(possibleChoice)
|
||||||
setQuestionDisplayed(question)
|
setQuestionDisplayed(question)
|
||||||
|
@ -170,7 +172,7 @@ export default function GameRoom({ params }: roomProps) {
|
||||||
let questionObj = getRandomQuestion(playModes[selectedMode],questionAlreadyDone, customQuestions)
|
let questionObj = getRandomQuestion(playModes[selectedMode],questionAlreadyDone, customQuestions)
|
||||||
let question = questionObj.question
|
let question = questionObj.question
|
||||||
setQuestionAlreadyDone(questionObj.alreadyDone)
|
setQuestionAlreadyDone(questionObj.alreadyDone)
|
||||||
socketRef.current.emit("next_question", {roomId: id, question: question, possibleChoice: possibleChoice, duration: duration})
|
socketRef.current!.emit("next_question", {roomId: id, question: question, possibleChoice: possibleChoice, duration: duration})
|
||||||
setCountdown(duration)
|
setCountdown(duration)
|
||||||
setPossibleChoice(possibleChoice)
|
setPossibleChoice(possibleChoice)
|
||||||
setQuestionDisplayed(question)
|
setQuestionDisplayed(question)
|
||||||
|
@ -180,7 +182,7 @@ export default function GameRoom({ params }: roomProps) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function resetGame() {
|
function resetGame() {
|
||||||
socketRef.current.emit("reset_game", {roomId: id})
|
socketRef.current!.emit("reset_game", {roomId: id})
|
||||||
setGameStarted(false)
|
setGameStarted(false)
|
||||||
setCountdown(0)
|
setCountdown(0)
|
||||||
setPossibleChoice([])
|
setPossibleChoice([])
|
||||||
|
@ -190,7 +192,7 @@ export default function GameRoom({ params }: roomProps) {
|
||||||
setTotalVotes(0)
|
setTotalVotes(0)
|
||||||
}
|
}
|
||||||
|
|
||||||
function setAndSendChoice(playerName) {
|
function setAndSendChoice(playerName: any) {
|
||||||
setChoice(playerName)
|
setChoice(playerName)
|
||||||
setTotalVotes(oldTotal => oldTotal += 1)
|
setTotalVotes(oldTotal => oldTotal += 1)
|
||||||
let temp_possibleChoice = possibleChoice
|
let temp_possibleChoice = possibleChoice
|
||||||
|
@ -200,17 +202,17 @@ export default function GameRoom({ params }: roomProps) {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
setPossibleChoice(temp_possibleChoice)
|
setPossibleChoice(temp_possibleChoice)
|
||||||
socketRef.current.emit("player_choice", {roomId: id, choice: playerName, player: name})
|
socketRef.current!.emit("player_choice", {roomId: id, choice: playerName, player: name})
|
||||||
}
|
}
|
||||||
|
|
||||||
function setAndSendPhoto(){
|
function setAndSendPhoto(){
|
||||||
getBase64OfImage(inputPhotoRef.current.files[0], (data) => resizeBase64Image(data).then((data) =>{
|
getBase64OfImage(inputPhotoRef.current!.files[0], (data: any) => resizeBase64Image(data).then((data: any) =>{
|
||||||
setQuestionReply({photo: data})
|
setQuestionReply({photo: data})
|
||||||
socketRef.current.emit("question_reply", { roomId: id, data:{photo: data}})
|
socketRef.current!.emit("question_reply", { roomId: id, data:{photo: data}})
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
|
|
||||||
function setAndSaveCustomQuestions(data){
|
function setAndSaveCustomQuestions(data: any){
|
||||||
setCustomQuestions(data)
|
setCustomQuestions(data)
|
||||||
localStorage.setItem("customQuestions", JSON.stringify(data))
|
localStorage.setItem("customQuestions", JSON.stringify(data))
|
||||||
}
|
}
|
||||||
|
@ -242,8 +244,8 @@ export default function GameRoom({ params }: roomProps) {
|
||||||
</div>
|
</div>
|
||||||
{ playModes[selectedMode].name == "Custom" &&
|
{ playModes[selectedMode].name == "Custom" &&
|
||||||
<>
|
<>
|
||||||
<EditCustomQuestions dataRef={editCustomQuestionsRef} questionList={customQuestions} setQuestions={(data) => setAndSaveCustomQuestions(data)} />
|
<EditCustomQuestions dataRef={editCustomQuestionsRef} questionList={customQuestions} setQuestions={(data: any) => setAndSaveCustomQuestions(data)} />
|
||||||
<button className="btn btn-primary" onClick={() => editCustomQuestionsRef.current.showModal()}>Edit questions...</button>
|
<button className="btn btn-primary" onClick={() => editCustomQuestionsRef.current!.showModal()}>Edit questions...</button>
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
</>
|
</>
|
||||||
|
@ -263,7 +265,7 @@ export default function GameRoom({ params }: roomProps) {
|
||||||
<div className="avatar indicator">
|
<div className="avatar indicator">
|
||||||
{player.role == "owner" && <IconCrown className="indicator-item" />}
|
{player.role == "owner" && <IconCrown className="indicator-item" />}
|
||||||
<div className="w-16 rounded">
|
<div className="w-16 rounded">
|
||||||
<img src={player.avatar} />
|
<Image alt="" src={player.avatar} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p className="flex flex-row">{player.name}</p>
|
<p className="flex flex-row">{player.name}</p>
|
||||||
|
@ -286,19 +288,19 @@ export default function GameRoom({ params }: roomProps) {
|
||||||
{ gameStarted &&
|
{ gameStarted &&
|
||||||
<>
|
<>
|
||||||
<div className="flex flex-col space-y-4 items-center">
|
<div className="flex flex-col space-y-4 items-center">
|
||||||
<h1 className="text-3xl">{questionDisplayed.text}</h1>
|
<h1 className="text-3xl">{questionDisplayed!.text}</h1>
|
||||||
<span className="indicator-item badge indicator-bottom indicator-center opacity-30">{questionNbr}/{questionLimit}</span>
|
<span className="indicator-item badge indicator-bottom indicator-center opacity-30">{questionNbr}/{questionLimit}</span>
|
||||||
</div>
|
</div>
|
||||||
{ countdown > 0 &&
|
{ countdown > 0 &&
|
||||||
<>
|
<>
|
||||||
<span className="countdown">
|
<span className="countdown">
|
||||||
<span style={{"--value":countdown.toString()}}></span>
|
<span style={{"--value":countdown.toString()} as React.CSSProperties }></span>
|
||||||
</span>
|
</span>
|
||||||
<div className="flex flex-row space-x-4">
|
<div className="flex flex-row space-x-4">
|
||||||
{ choice == "" &&
|
{ choice == "" &&
|
||||||
<>
|
<>
|
||||||
{ possibleChoice.map((playerChoice) => (
|
{ possibleChoice.map((playerChoice, index) => (
|
||||||
<button className="btn btn-primary" disabled={choice != ""} onClick={() => {setAndSendChoice(playerChoice.name)}}>{playerChoice.name}</button>
|
<button key={index} className="btn btn-primary" disabled={choice != ""} onClick={() => {setAndSendChoice(playerChoice.name)}}>{playerChoice.name}</button>
|
||||||
))}
|
))}
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
|
@ -311,13 +313,13 @@ export default function GameRoom({ params }: roomProps) {
|
||||||
{ countdown == 0 &&
|
{ countdown == 0 &&
|
||||||
<>
|
<>
|
||||||
<div className="flex flex-row space-x-4">
|
<div className="flex flex-row space-x-4">
|
||||||
{ possibleChoice.map((playerChoice) => {
|
{ possibleChoice.map((playerChoice, index) => {
|
||||||
console.log(totalVotes)
|
console.log(totalVotes)
|
||||||
console.log(playerChoice.nbrVotes / totalVotes)
|
console.log(playerChoice.nbrVotes / totalVotes)
|
||||||
let percent = Math.floor((playerChoice.nbrVotes / totalVotes) * 100)
|
let percent = Math.floor((playerChoice.nbrVotes / totalVotes) * 100)
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center space-y-4 flex-col">
|
<div key={index} className="flex items-center space-y-4 flex-col">
|
||||||
<div className="radial-progress text-primary" style={{ "--value": percent }} role="progressbar">
|
<div className="radial-progress text-primary" style={{ "--value": percent } as React.CSSProperties} role="progressbar">
|
||||||
{percent}%
|
{percent}%
|
||||||
</div>
|
</div>
|
||||||
<h1>{playerChoice.name}</h1>
|
<h1>{playerChoice.name}</h1>
|
||||||
|
@ -328,16 +330,16 @@ export default function GameRoom({ params }: roomProps) {
|
||||||
<>
|
<>
|
||||||
{ questionReply.photo == undefined &&
|
{ questionReply.photo == undefined &&
|
||||||
<div className="flex flex-col items-center space-y-4">
|
<div className="flex flex-col items-center space-y-4">
|
||||||
<span className="text-xl">À toi d'envoyer une photo !</span>
|
<span className="text-xl">À toi d'envoyer une photo !</span>
|
||||||
<input type="file" ref={inputPhotoRef} onChange={setAndSendPhoto} className="hidden" />
|
<input type="file" ref={inputPhotoRef} onChange={setAndSendPhoto} className="hidden" />
|
||||||
<div className="flex flex-row space-x-4">
|
<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={() => inputPhotoRef.current!.click()}><IconPhotoUp /></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
{ questionReply.photo != undefined &&
|
{ questionReply.photo != undefined &&
|
||||||
<div>
|
<div>
|
||||||
<img src={questionReply.photo} />
|
<Image alt="" src={questionReply.photo} />
|
||||||
<span className="text-zinc-500">Photo received from {possibleChoice.sort((a,b) => b.nbrVotes - a.nbrVotes)[0].name}...</span>
|
<span className="text-zinc-500">Photo received from {possibleChoice.sort((a,b) => b.nbrVotes - a.nbrVotes)[0].name}...</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -353,7 +355,7 @@ export default function GameRoom({ params }: roomProps) {
|
||||||
}
|
}
|
||||||
{ questionReply.photo != undefined &&
|
{ questionReply.photo != undefined &&
|
||||||
<div>
|
<div>
|
||||||
<img src={questionReply.photo} />
|
<Image alt="" src={questionReply.photo} />
|
||||||
<span className="text-zinc-500">Photo received from {possibleChoice.sort((a,b) => b.nbrVotes - a.nbrVotes)[0].name}...</span>
|
<span className="text-zinc-500">Photo received from {possibleChoice.sort((a,b) => b.nbrVotes - a.nbrVotes)[0].name}...</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -107,7 +107,7 @@ export const playModes = [
|
||||||
{ name: "Custom", icon: IconPencil, questions: []},
|
{ name: "Custom", icon: IconPencil, questions: []},
|
||||||
]
|
]
|
||||||
|
|
||||||
export function getRandomQuestion(mode, alreadyDone = [], customQuestions){
|
export function getRandomQuestion(mode: any, alreadyDone: any = [], customQuestions: any){
|
||||||
let questionList = mode.questions
|
let questionList = mode.questions
|
||||||
if(mode.name == "Custom") {
|
if(mode.name == "Custom") {
|
||||||
questionList = customQuestions
|
questionList = customQuestions
|
||||||
|
|
43
app/page.tsx
43
app/page.tsx
|
@ -4,29 +4,32 @@ import { navigate } from './action'
|
||||||
import { useState, useEffect, useRef } from 'react'
|
import { useState, useEffect, useRef } from 'react'
|
||||||
import { IconPencilMinus, IconCamera, IconDice6 } from "@tabler/icons-react"
|
import { IconPencilMinus, IconCamera, IconDice6 } from "@tabler/icons-react"
|
||||||
import { defaultAvatarImage } from './avatarImage'
|
import { defaultAvatarImage } from './avatarImage'
|
||||||
|
import Image from 'next/image'
|
||||||
import { getUsername } from './usernameGenerate'
|
import { getUsername } from './usernameGenerate'
|
||||||
import { resizeBase64Image, getBase64OfImage } from './utils'
|
import { resizeBase64Image, getBase64OfImage } from './utils'
|
||||||
import Webcam from 'react-webcam'
|
import Webcam from 'react-webcam'
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
const [name, setName] = useState("")
|
const [name, setName] = useState<string|undefined>("")
|
||||||
const [avatar, setAvatar] = useState(defaultAvatarImage)
|
const [avatar, setAvatar] = useState<string|undefined>(defaultAvatarImage)
|
||||||
const [browserId, setBrowserId] = useState("")
|
const [browserId, setBrowserId] = useState<string|null>("")
|
||||||
const [showWebcam, setShowWebcam] = useState(false)
|
const [showWebcam, setShowWebcam] = useState<boolean|null>(false)
|
||||||
const webcamRef = useRef()
|
const webcamRef = useRef<any>()
|
||||||
const modal = useRef()
|
const modal = useRef<any>()
|
||||||
const inputName = useRef()
|
const inputName = useRef<any>()
|
||||||
const inputProfilePicRef = useRef()
|
const inputProfilePicRef = useRef<any>()
|
||||||
|
|
||||||
function setUsername() {
|
function setUsername() {
|
||||||
setName(inputName.current.value)
|
setName(inputName.current!.value)
|
||||||
localStorage.setItem("name", inputName.current.value)
|
localStorage.setItem("name", inputName.current!.value)
|
||||||
}
|
}
|
||||||
|
|
||||||
function setAndStoreAvatar(data){
|
function setAndStoreAvatar(data: any){
|
||||||
resizeBase64Image(data).then((data) => {
|
resizeBase64Image(data).then((data: unknown) => {
|
||||||
|
if(typeof data === "string"){
|
||||||
localStorage.setItem("avatar", data)
|
localStorage.setItem("avatar", data)
|
||||||
setAvatar(data)
|
setAvatar(data)
|
||||||
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -37,7 +40,7 @@ export default function Home() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function takePictureAvatar() {
|
function takePictureAvatar() {
|
||||||
const imageSrc = webcamRef.current.getScreenshot()
|
const imageSrc = webcamRef.current!.getScreenshot()
|
||||||
setAndStoreAvatar(imageSrc)
|
setAndStoreAvatar(imageSrc)
|
||||||
setShowWebcam(false)
|
setShowWebcam(false)
|
||||||
}
|
}
|
||||||
|
@ -49,7 +52,7 @@ export default function Home() {
|
||||||
if(localName != null){
|
if(localName != null){
|
||||||
setName(localName)
|
setName(localName)
|
||||||
} else {
|
} else {
|
||||||
modal.current.showModal()
|
modal.current!.showModal()
|
||||||
}
|
}
|
||||||
|
|
||||||
if(localAvatar != null) {
|
if(localAvatar != null) {
|
||||||
|
@ -71,7 +74,7 @@ export default function Home() {
|
||||||
<div className="modal-box flex flex-col space-y-4">
|
<div className="modal-box flex flex-col space-y-4">
|
||||||
<div className="avatar flex flex-col items-center space-y-4">
|
<div className="avatar flex flex-col items-center space-y-4">
|
||||||
<div className="w-24 rounded">
|
<div className="w-24 rounded">
|
||||||
<img src={avatar} />
|
<Image alt="" src={avatar!} />
|
||||||
</div>
|
</div>
|
||||||
{ showWebcam &&
|
{ showWebcam &&
|
||||||
<>
|
<>
|
||||||
|
@ -82,8 +85,8 @@ export default function Home() {
|
||||||
{ !showWebcam &&
|
{ !showWebcam &&
|
||||||
<div className="flex flex-row space-x-4">
|
<div className="flex flex-row space-x-4">
|
||||||
<button className="btn btn-primary" onClick={() => {setShowWebcam(true)}}>Use Webcam</button>
|
<button className="btn btn-primary" onClick={() => {setShowWebcam(true)}}>Use Webcam</button>
|
||||||
<button className="btn btn-primary" onClick={() => inputProfilePicRef.current.click() }>Select image</button>
|
<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"/>
|
<input ref={inputProfilePicRef} type="file" onChange={(e) => {getBase64OfImage(e.target.files![0], (data: any) => setAndStoreAvatar(data))}} className="hidden"/>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
@ -93,7 +96,7 @@ export default function Home() {
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-row w-full space-x-4">
|
<div className="flex flex-row w-full space-x-4">
|
||||||
<input type="text" ref={inputName} defaultValue={name} placeholder="Name" className="input input-bordered w-full" />
|
<input type="text" ref={inputName} defaultValue={name} placeholder="Name" className="input input-bordered w-full" />
|
||||||
<button onClick={() => {inputName.current.value = getUsername()}} ><IconDice6 /></button>
|
<button onClick={() => {inputName.current!.value = getUsername()}} ><IconDice6 /></button>
|
||||||
</div>
|
</div>
|
||||||
</label>
|
</label>
|
||||||
<div className="modal-action">
|
<div className="modal-action">
|
||||||
|
@ -108,12 +111,12 @@ export default function Home() {
|
||||||
<div className="flex flex-col space-y-4 items-center">
|
<div className="flex flex-col space-y-4 items-center">
|
||||||
<div className="avatar">
|
<div className="avatar">
|
||||||
<div className="w-24 rounded">
|
<div className="w-24 rounded">
|
||||||
<img src={avatar} />
|
<Image alt="" src={avatar!} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-row space-x-4">
|
<div className="flex flex-row space-x-4">
|
||||||
<span className="text-xl">{name}</span>
|
<span className="text-xl">{name}</span>
|
||||||
<button onClick={() => { modal.current.showModal()}}>
|
<button onClick={() => { modal.current!.showModal()}}>
|
||||||
<IconPencilMinus />
|
<IconPencilMinus />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
export function resizeBase64Image(base64Image) {
|
export function resizeBase64Image(base64Image: string) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
const maxSizeInKB = 500;
|
const maxSizeInKB = 500;
|
||||||
const maxSizeInBytes = maxSizeInKB * 1024;
|
const maxSizeInBytes = maxSizeInKB * 1024;
|
||||||
|
@ -14,7 +14,7 @@ export function resizeBase64Image(base64Image) {
|
||||||
const newHeight = Math.sqrt(maxSizeInBytes / aspectRatio);
|
const newHeight = Math.sqrt(maxSizeInBytes / aspectRatio);
|
||||||
canvas.width = newWidth;
|
canvas.width = newWidth;
|
||||||
canvas.height = newHeight;
|
canvas.height = newHeight;
|
||||||
ctx.drawImage(img, 0, 0, newWidth, newHeight);
|
ctx!.drawImage(img, 0, 0, newWidth, newHeight);
|
||||||
let quality = 0.8;
|
let quality = 0.8;
|
||||||
let dataURL = canvas.toDataURL('image/jpeg', quality);
|
let dataURL = canvas.toDataURL('image/jpeg', quality);
|
||||||
resolve(dataURL);
|
resolve(dataURL);
|
||||||
|
@ -22,7 +22,7 @@ export function resizeBase64Image(base64Image) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getBase64OfImage(file, cb) {
|
export function getBase64OfImage(file: any, cb: any) {
|
||||||
let reader = new FileReader();
|
let reader = new FileReader();
|
||||||
reader.readAsDataURL(file);
|
reader.readAsDataURL(file);
|
||||||
reader.onload = function () {
|
reader.onload = function () {
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
import { IconSquareX } from '@tabler/icons-react'
|
import { IconSquareX } from '@tabler/icons-react'
|
||||||
|
|
||||||
export default function EditCustomQuestions({dataRef, questionList = [], setQuestions}){
|
export default function EditCustomQuestions({dataRef, questionList = [], setQuestions}: any){
|
||||||
let questionTemp = questionList
|
let questionTemp = questionList
|
||||||
console.log(questionTemp)
|
console.log(questionTemp)
|
||||||
const [forceUpdate, setForceUpdate] = useState(0)
|
const [forceUpdate, setForceUpdate] = useState(0)
|
||||||
|
@ -11,7 +11,7 @@ export default function EditCustomQuestions({dataRef, questionList = [], setQues
|
||||||
setForceUpdate(oldFu => oldFu + 1)
|
setForceUpdate(oldFu => oldFu + 1)
|
||||||
}
|
}
|
||||||
|
|
||||||
function removeQuestion(index){
|
function removeQuestion(index: number){
|
||||||
questionTemp.splice(index, 1)
|
questionTemp.splice(index, 1)
|
||||||
setForceUpdate(oldFu => oldFu + 1)
|
setForceUpdate(oldFu => oldFu + 1)
|
||||||
}
|
}
|
||||||
|
@ -21,10 +21,10 @@ export default function EditCustomQuestions({dataRef, questionList = [], setQues
|
||||||
<div className="modal-box flex flex-col space-y-8">
|
<div className="modal-box flex flex-col space-y-8">
|
||||||
<h3 className="font-bold text-lg">Edit custom questions!</h3>
|
<h3 className="font-bold text-lg">Edit custom questions!</h3>
|
||||||
<div className="flex flex-col space-y-4">
|
<div className="flex flex-col space-y-4">
|
||||||
{ questionTemp.map((question, index) => {
|
{ questionTemp.map((question: any, index: number) => {
|
||||||
return(
|
return(
|
||||||
<div className="flex flex-row space-x-4">
|
<div className="flex flex-row space-x-4" key={index}>
|
||||||
<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}}/>
|
<input type="text" 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">
|
<select onChange={(e) => {questionTemp[index].type = e.target.value}} className="select select-bordered w-24 max-w-xs">
|
||||||
<option>Text</option>
|
<option>Text</option>
|
||||||
<option>Photo</option>
|
<option>Photo</option>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
export default function ModeCard({ mode, selected, onChange }){
|
export default function ModeCard({ mode, selected, onChange }: any){
|
||||||
const Icon = mode.icon
|
const Icon = mode.icon
|
||||||
return <>
|
return <>
|
||||||
<div onClick={onChange} className={`w-24 h-24 rounded-md flex p-4 flex-col items-center ${selected ? "bg-primary" : "bg-zinc-300"}`}>
|
<div onClick={onChange} className={`w-24 h-24 rounded-md flex p-4 flex-col items-center ${selected ? "bg-primary" : "bg-zinc-300"}`}>
|
||||||
|
|
|
@ -1,4 +1,10 @@
|
||||||
/** @type {import('next').NextConfig} */
|
/** @type {import('next').NextConfig} */
|
||||||
const nextConfig = {};
|
const nextConfig = {
|
||||||
|
//eslint: {
|
||||||
|
// // Warning: This allows production builds to successfully complete even if
|
||||||
|
// // your project has ESLint errors.
|
||||||
|
// ignoreDuringBuilds: true,
|
||||||
|
//},
|
||||||
|
};
|
||||||
|
|
||||||
export default nextConfig;
|
export default nextConfig;
|
||||||
|
|
6
utils/types.ts
Normal file
6
utils/types.ts
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
export interface PlayerChoice {
|
||||||
|
name: string,
|
||||||
|
id: string,
|
||||||
|
browserId: string,
|
||||||
|
nbrVotes: number,
|
||||||
|
}
|
Loading…
Reference in a new issue