Pass the ESLINT and Typescript build

This commit is contained in:
Lucien Astié 2024-08-10 13:22:32 +02:00
parent cea7a5bc9d
commit 32c3debad4
8 changed files with 115 additions and 98 deletions

View file

@ -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&apos;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>

View file

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

View file

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

View file

@ -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 () {

View file

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

View file

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

View file

@ -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
View file

@ -0,0 +1,6 @@
export interface PlayerChoice {
name: string,
id: string,
browserId: string,
nbrVotes: number,
}