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