diff --git a/webapp/src/components/game/multiplayer/QuestionsMultiPlayer.tsx b/webapp/src/components/game/multiplayer/QuestionsMultiPlayer.tsx deleted file mode 100644 index bab9c88..0000000 --- a/webapp/src/components/game/multiplayer/QuestionsMultiPlayer.tsx +++ /dev/null @@ -1,153 +0,0 @@ -import { FC, useCallback, useEffect, useMemo, useState } from 'react' -import { SocketProps } from './GameMultiPlayer'; -import { Question4Answers } from '../singleplayer/GameSinglePlayer'; -import axios from 'axios'; -import '../questions-game.scss'; -import { useTranslation } from 'react-i18next'; - -interface QuestionsMultiPlayerProps { - socket: SocketProps; - handleCurrentStage: (n: number) => void - questions: Question4Answers[] - partyCode: string -} - - -const QuestionsMultiPlayer: FC = ({socket, questions, partyCode}) => { - - const answersShuffled = useMemo(() => { - return questions.map((question) => { - const answers = [question.correctAnswer, question.incorrectAnswer1, question.incorrectAnswer2, question.incorrectAnswer3]; - for (let i = answers.length - 1; i > 0; i--) { - const j = Math.floor(Math.random() * (i + 1)); - [answers[i], answers[j]] = [answers[j], answers[i]]; - } - return answers; - }); - }, [questions]); - - const uuid = localStorage.getItem("userUUID"); - //const apiEndpoint = 'http://conoceryvencer.xyz:8000' - const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000'; - - const [currentQuestion, setCurrentQuestion] = useState(0); - const [correctAnswers, setCorrectAnswers] = useState(0); - const [selectedAnswer, setSelectedAnswer] = useState(null); - const [seconds, setSeconds] = useState(10); - const { t } = useTranslation(); - - const [isWaiting, setIsWaiting] = useState(false); - - const endGame = useCallback(async () => { - const totalPoints = calculatePoints(correctAnswers, questions.length); - const requestData = { - "players": [{ - "uuid": uuid, - "nCorrectAnswers": correctAnswers, - "nWrongAnswers": questions.length - correctAnswers, - "totalScore": totalPoints, - "isWinner": false - }] - }; - - const previousScore = parseInt(localStorage.getItem("score")); - localStorage.setItem("score", (previousScore + totalPoints).toString()); - - await axios.post(`${apiEndpoint}/updateStats`, requestData); - socket.emit('playerFinished', partyCode, totalPoints); - - }, [correctAnswers, questions.length, uuid, apiEndpoint, socket, partyCode]); - - useEffect(() => { - const intervalId = setInterval(async () => { - if((currentQuestion+1) < questions.length){ - if (seconds > 0) { - setSeconds(prevSeconds => prevSeconds - 1); - } else { - setCurrentQuestion(currentQuestion + 1); - setSelectedAnswer(null); - clearInterval(intervalId); - setSeconds(10); - if(currentQuestion+2 === questions.length){ - await endGame() - } - } - } - }, 1000); - - return () => clearInterval(intervalId); - }, [seconds, currentQuestion, questions, endGame]); - - - const handleAnswerClick = async (answer: string, isCorrect:boolean) => { - setSeconds(10); - if(!isWaiting){ - setIsWaiting(true); - setSelectedAnswer(answer); - - setTimeout(() => { - if (isCorrect) { - setCorrectAnswers(correctAnswers + 1); - } - setCurrentQuestion(currentQuestion + 1); - setSelectedAnswer(null); - }, 1000); - setIsWaiting(false); - } - - if(currentQuestion+2 === questions.length){ - await endGame(); - } - }; - - const calculatePoints = (correctAnswers: number, totalQuestions: number) => { - const incorrectQuestions = totalQuestions - correctAnswers; - const points = correctAnswers * 100 - incorrectQuestions * 25; - return points; - } - - const getAnswers = () => { - const answers = answersShuffled[currentQuestion]; - if (answers.length > 4) { - console.log(answers) - const removeCount = answers.length - 4; - answers.splice(0, removeCount); - } - return answersShuffled[currentQuestion]; - }; - - return ( -
- {(currentQuestion+1) < questions.length && ( - <> -
-

Question {currentQuestion + 1} / {questions.length}

-

{questions[currentQuestion].question}

-

{seconds}

-
-
- {getAnswers().map((answer) => { - const isCorrect = questions[currentQuestion].correctAnswer === answer; - const buttonColor = (selectedAnswer === answer && !isWaiting) ? (isCorrect ? '#66ff66' : '#ff6666') : '#89c3ff'; - return ( - - )} - )} -
- - )} - {currentQuestion+1 === questions.length && ( - <> -

{t('questions_multiplayer_you_answered')}{correctAnswers}{t('questions_multiplayer_out_of')}{questions.length}{t('questions_multiplayer_questions_correctly')}

-

{t('questions_multiplayer_you_earned')}{calculatePoints(correctAnswers, questions.length)}{t('questions_multiplayer_points')}

-

{t('questions_multiplayer_waiting_players')}

- - )} -
- ) -} - -export default QuestionsMultiPlayer \ No newline at end of file diff --git a/webapp/src/pages/groups/index.tsx b/webapp/src/pages/groups/index.tsx index 163d8c1..7d861e2 100644 --- a/webapp/src/pages/groups/index.tsx +++ b/webapp/src/pages/groups/index.tsx @@ -6,7 +6,7 @@ import NoGroup from 'src/components/group/NoGroup'; import { GroupTable } from 'src/components/group/GroupTable'; //const apiEndpoint = 'http://conoceryvencer.xyz:8000' -const apiEndpoint = process.env.REACT_APPAPI_ENDPOINT || 'http://localhost:8000'; +const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000'; let groupUUID: string = ""; export const GroupsPage: React.FC<{}> = () => {