From 32c3debad4b7e058c3b01d41e2ee8e2afbb3d096 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucien=20Asti=C3=A9?= Date: Sat, 10 Aug 2024 13:22:32 +0200 Subject: [PATCH] Pass the ESLINT and Typescript build --- app/[id]/page.tsx | 122 +++++++++++++++-------------- app/[id]/questions.ts | 2 +- app/page.tsx | 47 +++++------ app/utils.ts | 6 +- components/editCustomQuestions.tsx | 20 ++--- components/modeCard.tsx | 2 +- next.config.mjs | 8 +- utils/types.ts | 6 ++ 8 files changed, 115 insertions(+), 98 deletions(-) create mode 100644 utils/types.ts diff --git a/app/[id]/page.tsx b/app/[id]/page.tsx index bafc567..12f3a59 100644 --- a/app/[id]/page.tsx +++ b/app/[id]/page.tsx @@ -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(false) + const [forceUpdate, setForceUpdate] = useState(0) - const [role, setRole] = useState("") - const [name, setName] = useState("") - const [avatar, setAvatar] = useState(defaultAvatarImage) - const [browserId, setBrowserId] = useState("") + const [role, setRole] = useState("") + const [name, setName] = useState("") + const [avatar, setAvatar] = useState(defaultAvatarImage) + const [browserId, setBrowserId] = useState("") - 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(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 socketRef = useRef() - const inputPhotoRef = useRef() - const editCustomQuestionsRef = useRef() + const socketRef = useRef() // eslint-disable-line + const inputPhotoRef = useRef() + const editCustomQuestionsRef = useRef() 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) { { playModes[selectedMode].name == "Custom" && <> - setAndSaveCustomQuestions(data)} /> - + setAndSaveCustomQuestions(data)} /> + } @@ -263,7 +265,7 @@ export default function GameRoom({ params }: roomProps) {
{player.role == "owner" && }
- +

{player.name}

@@ -286,19 +288,19 @@ export default function GameRoom({ params }: roomProps) { { gameStarted && <>
-

{questionDisplayed.text}

+

{questionDisplayed!.text}

{questionNbr}/{questionLimit}
{ countdown > 0 && <> - +
{ choice == "" && <> - { possibleChoice.map((playerChoice) => ( - + { possibleChoice.map((playerChoice, index) => ( + ))} } @@ -311,13 +313,13 @@ export default function GameRoom({ params }: roomProps) { { countdown == 0 && <>
- { possibleChoice.map((playerChoice) => { + { possibleChoice.map((playerChoice, index) => { console.log(totalVotes) console.log(playerChoice.nbrVotes / totalVotes) let percent = Math.floor((playerChoice.nbrVotes / totalVotes) * 100) return ( -
-
+
+
{percent}%

{playerChoice.name}

@@ -328,16 +330,16 @@ export default function GameRoom({ params }: roomProps) { <> { questionReply.photo == undefined &&
- À toi d'envoyer une photo ! + À toi d'envoyer une photo !
- +
} { questionReply.photo != undefined &&
- + Photo received from {possibleChoice.sort((a,b) => b.nbrVotes - a.nbrVotes)[0].name}...
@@ -353,7 +355,7 @@ export default function GameRoom({ params }: roomProps) { } { questionReply.photo != undefined &&
- + Photo received from {possibleChoice.sort((a,b) => b.nbrVotes - a.nbrVotes)[0].name}...
diff --git a/app/[id]/questions.ts b/app/[id]/questions.ts index 5793313..5ec043b 100644 --- a/app/[id]/questions.ts +++ b/app/[id]/questions.ts @@ -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 diff --git a/app/page.tsx b/app/page.tsx index 6823a1a..971c2fb 100644 --- a/app/page.tsx +++ b/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("") + 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() 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) => { - localStorage.setItem("avatar", data) - setAvatar(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() {
- +
{ showWebcam && <> @@ -82,8 +85,8 @@ export default function Home() { { !showWebcam &&
- - {getBase64OfImage(e.target.files[0], (data) => setAndStoreAvatar(data))}} className="hidden"/> + + {getBase64OfImage(e.target.files![0], (data: any) => setAndStoreAvatar(data))}} className="hidden"/>
}
@@ -93,7 +96,7 @@ export default function Home() {
- +
@@ -108,12 +111,12 @@ export default function Home() {
- +
{name} -
diff --git a/app/utils.ts b/app/utils.ts index 50098ca..d93650d 100644 --- a/app/utils.ts +++ b/app/utils.ts @@ -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 () { diff --git a/components/editCustomQuestions.tsx b/components/editCustomQuestions.tsx index 49ba763..22fb1e3 100644 --- a/components/editCustomQuestions.tsx +++ b/components/editCustomQuestions.tsx @@ -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,15 +21,15 @@ export default function EditCustomQuestions({dataRef, questionList = [], setQues

Edit custom questions!

- { questionTemp.map((question, index) => { + { questionTemp.map((question: any, index: number) => { return( -
- {questionTemp[index].text = e.target.value}}/> - - removeQuestion(index)} className="w-12 h-12"/> +
+ {questionTemp[index].text = e.target.value}}/> + + removeQuestion(index)} className="w-12 h-12"/>
) })} diff --git a/components/modeCard.tsx b/components/modeCard.tsx index b78e72e..2ede693 100644 --- a/components/modeCard.tsx +++ b/components/modeCard.tsx @@ -1,4 +1,4 @@ -export default function ModeCard({ mode, selected, onChange }){ +export default function ModeCard({ mode, selected, onChange }: any){ const Icon = mode.icon return <>
diff --git a/next.config.mjs b/next.config.mjs index 4678774..1dbc856 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -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; diff --git a/utils/types.ts b/utils/types.ts new file mode 100644 index 0000000..8568c8e --- /dev/null +++ b/utils/types.ts @@ -0,0 +1,6 @@ +export interface PlayerChoice { + name: string, + id: string, + browserId: string, + nbrVotes: number, +}