setHovered(true)}
+ onMouseLeave={() => setHovered(false)}
+ >
+ 
+
+ );
+}
+
+export default CardComponent;
+
+
diff --git a/webapp/src/components/Chat.js b/webapp/src/components/Chat.js
new file mode 100644
index 00000000..6fa1e837
--- /dev/null
+++ b/webapp/src/components/Chat.js
@@ -0,0 +1,92 @@
+import React, { useState, useEffect, useRef } from 'react';
+import io from 'socket.io-client';
+import { Typography, TextField, Grid, Container, Button } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+
+const socketEndpoint = process.env.REACT_APP_MULTIPLAYER_ENDPOINT || 'http://localhost:5010';
+
+const ChatRoom = ({ roomCode, username }) => {
+ const { t } = useTranslation();
+
+ const isFirstRender = useRef(true);
+ const [messages, setMessages] = useState([]);
+ const [messageInput, setMessageInput] = useState('');
+ const [socket, setSocket] = useState(null);
+
+ useEffect(() => {
+ const newSocket = io(socketEndpoint);
+ setSocket(newSocket);
+
+ //join the room
+ newSocket.emit('join-room-chat', roomCode, username);
+
+ //make sure that only 1 time is executed
+ if(isFirstRender.current) {
+ isFirstRender.current = false;
+
+ newSocket.on('recieved-message', (message) => {
+ setMessages(prevMessages => [...prevMessages, message]);
+ });
+ }
+
+ }, [roomCode, username]);
+
+ const sendMessage = () => {
+ if (messageInput.trim() !== '') {
+ socket.emit('send-message', messageInput, roomCode, username);
+ setMessageInput('');
+ }
+ };
+
+ const handleKeyPress = (event) => {
+ if (event.key === 'Enter') {
+ sendMessage();
+ }
+ };
+
+ return (
+
+ {title}
+
+
+ {messages.map((message, index) => (
+
+
+
+ {message.username}:
+ {message.message}
+
+
+ ))}
+
-
- );
- }
-
- return <>;
-};
-
-export default ParticlesComponent;
\ No newline at end of file
diff --git a/webapp/src/data/__questions.json b/webapp/src/data/__questions.json
deleted file mode 100644
index 876324f0..00000000
--- a/webapp/src/data/__questions.json
+++ /dev/null
@@ -1,20 +0,0 @@
-[
- {
- "question": "¿Cuál es la capital de Francia?",
- "options": ["Berlín", "París", "Londres", "Madrid"],
- "correctAnswer": "París",
- "category": "Geografía"
- },
- {
- "question": "¿En qué año comenzó la Segunda Guerra Mundial?",
- "options": ["1935", "1938", "1939", "1942"],
- "correctAnswer": "1939",
- "category": "Historia"
- },
- {
- "question": "¿Cuál es el elemento más abundante en la corteza terrestre?",
- "options": ["Hierro", "Oxígeno", "Aluminio", "Silicio"],
- "correctAnswer": "Oxígeno",
- "category": "Ciencia"
- }
-]
\ No newline at end of file
diff --git a/webapp/src/data/gameInfo.json b/webapp/src/data/gameInfo.json
index d00df85f..27a8397e 100644
--- a/webapp/src/data/gameInfo.json
+++ b/webapp/src/data/gameInfo.json
@@ -2,27 +2,39 @@
{
"nombre": "WISE MEN STACK",
"descripcion":
- "The player chooses a topic from five available options and must answer a battery of questions related to it within 60 seconds. For each question, the host provides two options. If the contestant guesses correctly, they win €20; otherwise, they move on to the next question (as the correct answer would be the other option). If the time runs out before the question is fully asked and both possible answers are provided, the contestant may still answer it; however, if the statement hasn't been completed (or the options weren't provided), they cannot answer.",
- "foto": "../gameImg/foto0.png"
+ "The player chooses a topic from five available options and must answer a battery of questions related to it within 60 seconds. For each question, the host provides two options. If the contestant guesses correctly, they move on to the next question.",
+ "foto": "../instructions/foto0.png",
+ "card":"The player chooses a topic from five available options and must answer a battery of questions related to it within 60 seconds.",
+ "cardFoto": "../homePage/foto0.png"
},
{
"nombre": "WARM QUESTION",
"descripcion": "It consists of ten topics of varied themes. For each correct answer, €100 is earned, and €10 are lost if the contestant passes, does not respond, or answers incorrectly.",
- "foto": "../gameImg/foto1.jpg"
+ "foto": "../instructions/foto1.jpg",
+ "card":"It consists of ten topics of varied themes.",
+ "cardFoto": "../homePage/foto1.jpg"
},
{
"nombre": "DISCOVERING CITIES",
"descripcion": "In the 'Discovering Cities' game mode, the contestant will face a challenge where they will be repeatedly asked questions referring to different cities around the world. To successfully overcome the challenge, the contestant must answer as many questions as possible correctly throughout the test..",
- "foto": "../gameImg/foto2.png"
+ "foto": "../instructions/foto2.png",
+ "card":"The contestant will face a challenge where they will be repeatedly asked questions referring to different cities around the world.",
+ "cardFoto": "../homePage/foto2.png"
},
{
"nombre": "THE CHALLENGE",
"descripcion": "The 'Challenge' game mode is the quintessential game mode, as it allows you to customize the match to your liking. This game mode is tailored for those who wish to practice certain game formats before engaging in our various other game modes.",
- "foto": "../gameImg/foto3.jpg"
+ "foto": "../instructions/foto3.jpg",
+ "card":"The 'Challenge' game mode is the quintessential game mode, as it allows you to customize the match to your liking.",
+ "cardFoto": "../homePage/foto3.jpg"
+
},
{
- "nombre": "ONLINE MODE",
- "descripcion": "Create a room for other player to join and play 1vs1",
- "foto": "../gameImg/foto3.jpg"
+ "nombre": "MULTIPLAYER MODE",
+ "descripcion": "Create a room and share the room code with other players to play. It also has a room chat.",
+ "foto": "../instructions/online-photo.jpg",
+ "card":"Create a room and share the room code with other players to play. It also has a room chat.",
+ "cardFoto": "../homePage/online-photo.jpg"
+
}
]
\ No newline at end of file
diff --git a/webapp/src/data/icons.js b/webapp/src/data/icons.js
new file mode 100644
index 00000000..386ae2d9
--- /dev/null
+++ b/webapp/src/data/icons.js
@@ -0,0 +1,29 @@
+const getHugo = () => {
+ return "/hugoIcon.jpg";
+}
+
+const getAlberto = () => {
+ return "bertinIcon.jpg";
+ }
+
+const getWiffo = () => {
+return "wiffoIcon.jpg";
+}
+
+const getAndina = () => {
+return "and1naIcon.jpg";
+}
+
+const getSamu = () => {
+return "samuIcon.jpg";
+}
+
+const getBarrero = () => {
+return "barreroIcon.jpg";
+}
+
+const getMaite = () => {
+return "teresaIcon.jpg";
+}
+
+export { getHugo, getAlberto, getWiffo, getAndina, getSamu, getBarrero, getMaite };
\ No newline at end of file
diff --git a/webapp/src/index.css b/webapp/src/index.css
index 5bcaa367..d0d08a2c 100644
--- a/webapp/src/index.css
+++ b/webapp/src/index.css
@@ -1,5 +1,4 @@
body {
- background-image: url('../public/hurta2.jpg');
background-size: cover;
background-repeat: no-repeat;
margin: 0;
diff --git a/webapp/src/index.js b/webapp/src/index.js
index afcccc27..6172bbd1 100644
--- a/webapp/src/index.js
+++ b/webapp/src/index.js
@@ -5,6 +5,8 @@ import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from 'react-router-dom';
import { SessionProvider } from './SessionContext';
+import './localize/i18n';
+
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
+ { t("Game.correct") }: {correctlyAnsweredQuestions}
+ { t("Game.incorrect") }: {incorrectlyAnsweredQuestions}
+ { t("Game.money") }: {totalScore}
+ { t("Game.time") }: {totalTimePlayed}
+
+ {showConfetti &&
+
+ );
+ }}
+ {remainingTime}
+
- Correct Answers: {correctlyAnsweredQuestions}
- Incorrect Answers: {incorrectlyAnsweredQuestions}
- Total money: {totalScore}
- Game time: {totalTimePlayed} seconds
-
- {showConfetti &&
+
+ );
+ }}
+ {remainingTime}
+
-
- );
- }}
- {remainingTime}
- -
+
-
+
+
-
+ -
{currentItems.map((group) => (
@@ -112,22 +131,28 @@ const Groups = () => {
- 
Loading...
; // Shows a loading message while the information is being obtained
}
return (
-
- Correct Answers: {correctlyAnsweredQuestions}
- Incorrect Answers: {incorrectlyAnsweredQuestions}
- Total money: {totalScore}
- Game time: {totalTimePlayed} seconds
+
+
+
+ {t("Game.correct")}: {correctlyAnsweredQuestions}
+
+
+
+
+ {t("Game.incorrect")}: {incorrectlyAnsweredQuestions}
+
+
+
+
+ {t("Game.money")}: {totalScore}
+
+
+
+
+ {t("Game.time")}: {totalTimePlayed}
+
+
+
{winnerPlayer === "" ? (
- Waiting for winner info
+ { t("Multiplayer.Game.waiting") }
) : (
- Player winner of the game: {winnerPlayer} with {winnerCorrect} correct answers in {winnerTime}s
+ { t("Multiplayer.Game.winner_1") }: {winnerPlayer} { t("Multiplayer.Game.winner_2") } {winnerCorrect} { t("Multiplayer.Game.winner_3") } {winnerTime} { t("Multiplayer.Game.winner_4") }
)}
{showConfetti && -
{roomPlayers.map((player, index) => (
@@ -114,7 +128,7 @@ const MultiplayerRoom = () => {
))}
@@ -126,13 +140,13 @@ const MultiplayerRoom = () => {
) : (
<>
- Create room
+ { t("Multiplayer.Room.create") }
- Join room
+ { t("Multiplayer.Room.join") }
{
style={{ marginTop: '10px' }}
/>
{error && (
@@ -153,6 +167,11 @@ const MultiplayerRoom = () => {
)}
+ {roomCode && error === "" && (
+
+
+ )}
);
}
diff --git a/webapp/src/pages/NotFound.js b/webapp/src/pages/NotFound.js
new file mode 100644
index 00000000..c472c4ef
--- /dev/null
+++ b/webapp/src/pages/NotFound.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { Container, Typography, Button } from '@mui/material';
+import { Link as RouterLink } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+
+const NotFound = () => {
+ const { t } = useTranslation();
+
+ return (
+
+ {error}
+
+ )
+ }
+
+ return (
+
+ {userInfo.username}
+
+
+ {t("Profile.name")} {userInfo.name}
+ {t("Profile.surname")} {userInfo.surname}
+ {t("Profile.created_in")} {new Date(userInfo.createdAt).toLocaleDateString()}
+
+ 
+
+
+ {t("Profile.choose_your_avatar")}
+
+
+
+
+
+
+
+
+
+
+
+
+ setError('')} message={`Error: ${error}`} />)}
+
+ );
+}
+
+export default Profile;
\ No newline at end of file
diff --git a/webapp/src/pages/Ranking.js b/webapp/src/pages/Ranking.js
new file mode 100644
index 00000000..c4cba70d
--- /dev/null
+++ b/webapp/src/pages/Ranking.js
@@ -0,0 +1,94 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import {Container, Typography, useTheme, Button } from '@mui/material';
+import { DataGrid } from '@mui/x-data-grid';
+import { useTranslation } from 'react-i18next';
+
+const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
+
+const Ranking = () => {
+ const { t } = useTranslation();
+ const theme = useTheme();
+
+ const [rows, setRows] = useState([]);
+ const [rankingType, setRankingType] = useState('user');
+
+ const fetchUserRanking = async () => {
+ try {
+ const response = await axios.get(`${apiEndpoint}/user/ranking`);
+ setRows(response.data.rank);
+ } catch (error) {
+ console.error(error);
+ }
+ };
+
+ const fetchGroupsRanking = async () => {
+ try {
+ const response = await axios.get(`${apiEndpoint}/user/group/ranking`);
+ setRows(response.data.rank);
+ } catch (error) {
+ console.error(error);
+ }
+ };
+
+ useEffect(() => {
+ if (rankingType === 'user') {
+ fetchUserRanking();
+ } else {
+ fetchGroupsRanking();
+ }
+ }, [rankingType]);
+
+ const columns = [
+ { field: 'id', headerName: 'NAME', flex: 1, align: 'center', headerAlign: 'center'},
+ { field: 'totalMoney', headerName: 'TOTAL MONEY', flex: 1, align: 'center', headerAlign: 'center' },
+ { field: 'totalCorrectAnswers', headerName: 'CORRECT ANSWERS', flex: 1, align: 'center', headerAlign: 'center' },
+ { field: 'totalIncorrectAnswers',headerName: 'INCORRECT ANSWERS', flex: 1, align: 'center', headerAlign: 'center' },
+ { field: 'totalGamesPlayed', headerName: 'TOTAL GAMES', flex: 1, align: 'center', headerAlign: 'center' }
+ ];
+
+ return (
+
+
+
+
+ Ranking
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Ranking;
diff --git a/webapp/src/pages/AddUser.js b/webapp/src/pages/Register.js
similarity index 87%
rename from webapp/src/pages/AddUser.js
rename to webapp/src/pages/Register.js
index 808191eb..0fece93c 100644
--- a/webapp/src/pages/AddUser.js
+++ b/webapp/src/pages/Register.js
@@ -3,10 +3,13 @@ import axios from 'axios';
import { Container, Typography, TextField, Button, Snackbar, Box, Divider } from '@mui/material';
import { Link,useNavigate } from 'react-router-dom';
import { SessionContext } from '../SessionContext';
+import { useTranslation } from 'react-i18next';
const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
const AddUser = () => {
+ const { t } = useTranslation();
+
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [name, setName] = useState('');
@@ -20,7 +23,7 @@ const AddUser = () => {
const addUser = async () => {
try {
- await axios.post(`${apiEndpoint}/user/add`, {
+ await axios.post(`${apiEndpoint}/user`, {
username,
password,
name,
@@ -47,13 +50,13 @@ const AddUser = () => {
- Sign Up
+ { t("Register.title") }
setUsername(e.target.value)}
/>
@@ -61,7 +64,7 @@ const AddUser = () => {
name="password"
margin="normal"
fullWidth
- label="Password"
+ label={ t("Register.password") }
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
@@ -71,7 +74,7 @@ const AddUser = () => {
name="name"
margin="normal"
fullWidth
- label="Name"
+ label={ t("Register.name") }
value={name}
onChange={(e) => setName(e.target.value)}
/>
@@ -79,19 +82,19 @@ const AddUser = () => {
name="surname"
margin="normal"
fullWidth
- label="Surname"
+ label={ t("Register.surname") }
value={surname}
onChange={(e) => setSurname(e.target.value)}
/>
setError('')} message={`Error: ${error}`} />)}
- Already have an account? Login here.
+ { t("Register.login_link") }
diff --git a/webapp/src/pages/Statistics.js b/webapp/src/pages/Statistics.js
index 675e8083..5fe16e76 100644
--- a/webapp/src/pages/Statistics.js
+++ b/webapp/src/pages/Statistics.js
@@ -1,165 +1,317 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
import axios from 'axios';
-import { Container, Typography, Box, Table, TableBody, TableCell, TableContainer, TableRow, Button, useTheme } from '@mui/material';
-
+import { Container, Typography, Box, Table, TableBody, TableCell, TableContainer, TableRow, Button, useTheme, Grid } from '@mui/material';
+import { useParams } from 'react-router-dom';
import { SessionContext } from '../SessionContext';
-import { useContext } from 'react';
+import CheckIcon from '@mui/icons-material/Check';
+import ClearIcon from '@mui/icons-material/Clear';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useTranslation } from 'react-i18next';
const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
const Statistics = () => {
+ const { t } = useTranslation();
const theme = useTheme();
+ const [error, setError] = useState('');
const [userStatics, setUserStatics] = useState([]);
- const [selectedMode, setSelectedMode] = useState('The Challenge');
+ const [selectedMode, setSelectedMode] = useState('TheChallenge');
+ const [questionsRecord, setQuestionsRecord] = useState([]);
+ const [showQuestionsRecord, setShowQuestionsRecord] = useState(false);
+ const [currentPage, setCurrentPage] = useState(1);
+ const itemsPerPage = 1;
+ const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
const { username } = useContext(SessionContext);
+ const { user } = useParams();
useEffect(() => {
const fetchUserStatics = async () => {
try {
- const response = await axios.get(`${apiEndpoint}/user/statistics/${username}`);
+ const response = await axios.get(`${apiEndpoint}/user/statistics/${user}`, { params: { loggedUser: username } });
setUserStatics(response.data);
} catch (error) {
- console.error('Error fetching data:', error);
+ setError(error.response.data.error);
}
};
fetchUserStatics();
- }, [username]);
+ }, [username, user]);
+
+ useEffect(() => {
+ const fetchQuestionsRecord = async () => {
+ try {
+ const response = await axios.get(`${apiEndpoint}/user/questionsRecord/${username}/${selectedMode}`, {
+ username: username,
+ gameMode: selectedMode
+ });
+ setQuestionsRecord(response.data);
+ } catch (error) {
+ console.error('Error fetching questions record:', error);
+ }
+ };
+
+ fetchQuestionsRecord();
+ }, [username, selectedMode]);
+
+ const totalPages = Math.ceil(questionsRecord.length / itemsPerPage);
+
+ const handleNextPage = () => {
+ setCurrentPage((prevPage) => Math.min(prevPage + 1, totalPages));
+ };
+
+ const handlePrevPage = () => {
+ setCurrentPage((prevPage) => Math.max(prevPage - 1, 1));
+ };
const renderStatistics = () => {
const formatStats = (param) => {
- return (param === null || param === undefined)?'0':param;
+ return (param === null || param === undefined) ? '0' : param;
};
switch (selectedMode) {
- case 'The Challenge':
+ case 'TheChallenge':
return (
-
+
);
- case 'Wise Men Stack':
+ case 'WiseMenStack':
return (
-
+
);
- case 'Warm Question':
+ case 'WarmQuestion':
return (
-
+
);
- case 'Discovering Cities':
+ case 'DiscoveringCities':
return (
-
+
);
+ case 'OnlineMode':
+ return (
+
+
+
+
+ );
default:
return null;
}
};
+ const formatCreatedAt = (createdAt) => {
+ const date = new Date(createdAt);
+ return date.toLocaleString('en-US', { timeZone: 'Europe/Madrid', year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false });
+ };
+
+ const renderQuestions = () => {
+ if (showQuestionsRecord) {
+ const indexOfLastItem = currentPage * itemsPerPage;
+ const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+ const currentItems = questionsRecord.slice(indexOfFirstItem, indexOfLastItem);
+
+ return (
+
-
- STATISTICS
+
+ { t("Statistics.title") }
-
-
+ {error? (
+
+ {error}
+
+ ):(
+
+
+ )}
);
};
diff --git a/webapp/src/pages/TheChallengeGame.js b/webapp/src/pages/TheChallengeGame.js
new file mode 100644
index 00000000..fb4ee84c
--- /dev/null
+++ b/webapp/src/pages/TheChallengeGame.js
@@ -0,0 +1,437 @@
+import * as React from 'react';
+import axios from 'axios';
+
+import { Container, Button, CssBaseline, Grid, Typography, CircularProgress, useTheme, MenuItem, Select } from '@mui/material';
+import CheckIcon from '@mui/icons-material/Check';
+import ClearIcon from '@mui/icons-material/Clear';
+import { useNavigate } from 'react-router-dom';
+import { SessionContext } from '../SessionContext';
+import { useContext } from 'react';
+import Confetti from 'react-confetti';
+import { CountdownCircleTimer } from "react-countdown-circle-timer";
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import { useTranslation } from 'react-i18next';
+import i18n from '../localize/i18n';
+
+
+const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
+
+
+const Game = () => {
+ const navigate = useNavigate();
+ const SUCCESS_SOUND_ROUTE = "/sounds/success_sound.mp3";
+ const FAILURE_SOUND_ROUTE = "/sounds/wrong_sound.mp3";
+
+ //sesion information
+ const {username} = useContext(SessionContext);
+ const theme = useTheme();
+
+ const { t } = useTranslation();
+
+ // Game configuration state
+ const [numRounds, setNumRounds] = React.useState(3);
+ const [timerConfig, setTimerConfig] = React.useState(15);
+ const [configModalOpen, setConfigModalOpen] = React.useState(true);
+ const [category, setCategory] = React.useState("Geography");
+
+ // state initialization
+ const [round, setRound] = React.useState(1);
+ const [questionData, setQuestionData] = React.useState(null);
+ const [buttonStates, setButtonStates] = React.useState([]);
+ const [answered, setAnswered] = React.useState(false);
+ const [shouldRedirect, setShouldRedirect] = React.useState(false);
+ const [totalScore, setTotalScore] = React.useState(0);
+ const [correctlyAnsweredQuestions, setCorrectlyAnsweredQuestions] = React.useState(0);
+ const [incorrectlyAnsweredQuestions, setIncorrectlyAnsweredQuestions] = React.useState(0);
+ const [totalTimePlayed, setTotalTimePlayed] = React.useState(0);
+ const [timerRunning, setTimerRunning] = React.useState(true); // indicate if the timer is working
+ const [showConfetti, setShowConfetti] = React.useState(false); //indicates if the confetti must appear
+ const [questionCountdownKey, setQuestionCountdownKey] = React.useState(15); //key to update question timer
+ const [questionCountdownRunning, setQuestionCountdownRunning] = React.useState(false); //property to start and stop question timer
+ const [userResponses, setUserResponses] = React.useState([]);
+ const [language, setCurrentLanguage] = React.useState(i18n.language);
+
+ const [questionHistorial, setQuestionHistorial] = React.useState(Array(numRounds).fill(null));
+
+ React.useEffect(() => {
+ let timer;
+ if (timerRunning) {
+ timer = setInterval(() => {
+ setTotalTimePlayed((prevTotalTime) => prevTotalTime + 1);
+ }, 1000);
+ }
+
+ return () => clearInterval(timer);
+ }, [timerRunning]);
+
+ // hook to initiating new rounds if the current number of rounds is less than or equal to 3
+ React.useEffect(() => {
+ if (round <= numRounds) {
+ startNewRound();
+ setQuestionCountdownRunning(true);
+ setQuestionCountdownKey(questionCountdownKey => questionCountdownKey + 1); //code to reset countdown timer
+ } else {
+ setTimerRunning(false);
+ setShouldRedirect(true);
+ setQuestionCountdownRunning(false);
+ updateStatistics();
+ updateQuestionsRecord();
+ }
+ // eslint-disable-next-line
+ }, [round, numRounds]);
+
+ // stablish if the confetti must show or not
+ React.useEffect(() => {
+ if (correctlyAnsweredQuestions > incorrectlyAnsweredQuestions) {
+ setShowConfetti(true);
+ } else {
+ setShowConfetti(false);
+ }
+ }, [correctlyAnsweredQuestions, incorrectlyAnsweredQuestions]);
+
+
+ const startGame = () => {
+ setConfigModalOpen(false);
+ startNewRound();
+ };
+
+ // gets a random question from the database and initializes button states to null
+ const startNewRound = async () => {
+ setAnswered(false);
+ // It works deploying using git repo from machine with: axios.get(`http://20.80.235.188:8000/questions`)
+ setCurrentLanguage(i18n.language);
+ axios.get(`${apiEndpoint}/questions/${language}/${category}`)
+ .then(quest => {
+ // every new round it gets a new question from db
+ setQuestionData(quest.data[0]);
+ setButtonStates(new Array(quest.data[0].options.length).fill(null));
+ }).catch(error => {
+ console.error(error);
+ });
+
+ };
+
+ const updateStatistics = async() => {
+ try {
+ await axios.post(`${apiEndpoint}/statistics`, {
+ username:username,
+ the_callenge_earned_money:totalScore,
+ the_callenge_correctly_answered_questions:correctlyAnsweredQuestions,
+ the_callenge_incorrectly_answered_questions:incorrectlyAnsweredQuestions,
+ the_callenge_total_time_played:totalTimePlayed,
+ the_callenge_games_played:1,
+ wise_men_stack_earned_money: 0,
+ wise_men_stack_correctly_answered_questions: 0,
+ wise_men_stack_incorrectly_answered_questions: 0,
+ wise_men_stack_games_played: 0,
+ warm_question_earned_money: 0,
+ warm_question_correctly_answered_questions: 0,
+ warm_question_incorrectly_answered_questions: 0,
+ warm_question_passed_questions: 0,
+ warm_question_games_played: 0,
+ discovering_cities_earned_money: 0,
+ discovering_cities_correctly_answered_questions: 0,
+ discovering_cities_incorrectly_answered_questions: 0,
+ discovering_cities_games_played: 0,
+ online_earned_money: 0,
+ online_correctly_answered_questions: 0,
+ online_incorrectly_answered_questions: 0,
+ online_total_time_played: 0,
+ online_games_played: 0,
+ });
+ } catch (error) {
+ console.error("Error:", error);
+ };
+ }
+
+ const updateQuestionsRecord = async() => {
+ try {
+ await axios.post(`${apiEndpoint}/user/questionsRecord`, {
+ questions: userResponses,
+ username: username,
+ gameMode: "TheChallenge"
+ });
+ } catch (error) {
+ console.error("Error:", error);
+ };
+ }
+
+ // this function is called when a user selects a response.
+ const selectResponse = async (index, response) => {
+ setAnswered(true);
+ const newButtonStates = [...buttonStates];
+
+ setQuestionCountdownRunning(false);
+
+ //check answer
+ if (response === questionData.correctAnswer) {
+ const userResponse = {
+ question: questionData.question,
+ response: response,
+ options: questionData.options,
+ correctAnswer: questionData.correctAnswer
+ };
+ setUserResponses(prevResponses => [...prevResponses, userResponse]);
+
+ newButtonStates[index] = "success"
+ const sucessSound = new Audio(SUCCESS_SOUND_ROUTE);
+ sucessSound.volume = 0.40;
+ sucessSound.play();
+ setCorrectlyAnsweredQuestions(correctlyAnsweredQuestions + 1);
+ setTotalScore(totalScore + 20);
+
+ const newQuestionHistorial = [...questionHistorial];
+ newQuestionHistorial[round-1] = true;
+ setQuestionHistorial(newQuestionHistorial);
+ } else {
+ const userResponse = {
+ question: questionData.question,
+ response: response,
+ options: questionData.options,
+ correctAnswer: questionData.correctAnswer
+ };
+ setUserResponses(prevResponses => [...prevResponses, userResponse]);
+ newButtonStates[index] = "failure";
+ const failureSound = new Audio(FAILURE_SOUND_ROUTE);
+ failureSound.volume = 0.40;
+ failureSound.play();
+ for (let i = 0; i < questionData.options.length; i++) {
+ if (questionData.options[i] === questionData.correctAnswer) {
+ newButtonStates[i] = "success";
+ }
+ }
+ setIncorrectlyAnsweredQuestions(incorrectlyAnsweredQuestions + 1);
+
+ const newQuestionHistorial = [...questionHistorial];
+ newQuestionHistorial[round-1] = false;
+ setQuestionHistorial(newQuestionHistorial);
+ }
+
+ setButtonStates(newButtonStates);
+
+ setTimeout(async() => {
+ setRound(round + 1);
+ setButtonStates([]);
+ setCurrentLanguage(i18n.language);
+ }, 4000);
+ };
+
+ const questionHistorialBar = () => {
+ return questionHistorial.map((isCorrect, index) => (
+
+ {index + 1}
+
+ ));
+ };
+
+ // Render the configuration window before starting the game
+ if (configModalOpen) {
+
+ return(
+
+ Game Configuration
+
+
+ );
+ }
+
+
+ // circular loading
+ if (!questionData) {
+ return (
+
+
+ );
+ }
+
+ // redirect to / if game over
+if (shouldRedirect) {
+ // Redirect after 3 seconds
+ setTimeout(() => {
+ navigate('/homepage');
+ }, 4000);
+
+
+ return (
+
+ incorrectlyAnsweredQuestions ? 'green' : 'red',
+ fontSize: '4rem', // Tamaño de fuente
+ marginTop: '20px', // Espaciado superior
+ marginBottom: '50px', // Espaciado inferior
+ }}
+ >
+ {correctlyAnsweredQuestions > incorrectlyAnsweredQuestions ? "Great Job!" : "Game Over"}
+
+
+ );
+}
+ return (
+
+
+
+ {questionHistorialBar()}
+
+
+
+
+ {round} / {numRounds}
+
+
+ {questionData.question}
+ selectResponse(0, "FAILED")} //when time ends always fail question
+ >
+ {({ remainingTime }) => {
+ return (
+
+
+
+
+ {questionData.options.map((option, index) => (
+
+
+
+ ))}
+
+
+ );
+};
+
+export default Game;
diff --git a/webapp/src/pages/WarmQuestionGame.js b/webapp/src/pages/WarmQuestionGame.js
new file mode 100644
index 00000000..9da0cb2f
--- /dev/null
+++ b/webapp/src/pages/WarmQuestionGame.js
@@ -0,0 +1,446 @@
+import * as React from 'react';
+import axios from 'axios';
+
+import { Container, Button, CssBaseline, Grid, Typography, CircularProgress } from '@mui/material';
+import { PlayArrow, Pause } from '@mui/icons-material';
+import CheckIcon from '@mui/icons-material/Check';
+import ClearIcon from '@mui/icons-material/Clear';
+import { useNavigate } from 'react-router-dom';
+import { SessionContext } from '../SessionContext';
+import { useContext } from 'react';
+import Confetti from 'react-confetti';
+import { CountdownCircleTimer } from "react-countdown-circle-timer";
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import i18n from '../localize/i18n';
+
+const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
+
+
+const Game = () => {
+ const navigate = useNavigate();
+ const MAX_ROUNDS = 10;
+ const SUCCESS_SOUND_ROUTE = "/sounds/success_sound.mp3";
+ const FAILURE_SOUND_ROUTE = "/sounds/wrong_sound.mp3";
+
+ //sesion information
+ const {username} = useContext(SessionContext);
+
+ // state initialization
+ const [round, setRound] = React.useState(1);
+ const [questionData, setQuestionData] = React.useState(null);
+ const [buttonStates, setButtonStates] = React.useState([]);
+ const [answered, setAnswered] = React.useState(false);
+ const [shouldRedirect, setShouldRedirect] = React.useState(false);
+ const [totalScore, setTotalScore] = React.useState(0);
+ const [correctlyAnsweredQuestions, setCorrectlyAnsweredQuestions] = React.useState(0);
+ const [incorrectlyAnsweredQuestions, setIncorrectlyAnsweredQuestions] = React.useState(0);
+ const [passedQuestions, setPassedQuestions] = React.useState(0);
+ const [totalTimePlayed, setTotalTimePlayed] = React.useState(0);
+ const [timerRunning, setTimerRunning] = React.useState(true); // indicate if the timer is working
+ const [showConfetti, setShowConfetti] = React.useState(false); //indicates if the confetti must appear
+ const [questionCountdownKey, setQuestionCountdownKey] = React.useState(15); //key to update question timer
+ const [questionCountdownRunning, setQuestionCountdownRunning] = React.useState(false); //property to start and stop question timer
+ const [userResponses, setUserResponses] = React.useState([]);
+ const [language, setCurrentLanguage] = React.useState(i18n.language);
+
+ const [questionHistorial, setQuestionHistorial] = React.useState(Array(MAX_ROUNDS).fill(null));
+
+
+ React.useEffect(() => {
+ let timer;
+ if (timerRunning) {
+ timer = setInterval(() => {
+ setTotalTimePlayed((prevTotalTime) => prevTotalTime + 1);
+ }, 1000);
+ }
+
+ return () => clearInterval(timer);
+ }, [timerRunning]);
+
+ // hook to initiating new rounds if the current number of rounds is less than or equal to 3
+ React.useEffect(() => {
+ if (round <= MAX_ROUNDS) {
+ startNewRound();
+ setQuestionCountdownRunning(true);
+ setQuestionCountdownKey(questionCountdownKey => questionCountdownKey + 1); //code to reset countdown timer
+ } else {
+ setTimerRunning(false);
+ setShouldRedirect(true);
+ setQuestionCountdownRunning(false);
+ updateStatistics();
+ updateQuestionsRecord();
+ }
+ // eslint-disable-next-line
+ }, [round]);
+
+ // stablish if the confetti must show or not
+ React.useEffect(() => {
+ if (correctlyAnsweredQuestions > incorrectlyAnsweredQuestions) {
+ setShowConfetti(true);
+ } else {
+ setShowConfetti(false);
+ }
+ }, [correctlyAnsweredQuestions, incorrectlyAnsweredQuestions]);
+
+
+ // gets a random question from the database and initializes button states to null
+ const startNewRound = async () => {
+ setAnswered(false);
+ // It works deploying using git repo from machine with: axios.get(`http://20.80.235.188:8000/questions`)
+ // Updates current language
+ setCurrentLanguage(i18n.language);
+ axios.get(`${apiEndpoint}/questions/${language}`)
+ .then(quest => {
+ // every new round it gets a new question from db
+ setQuestionData(quest.data);
+ setButtonStates(new Array(quest.data.options.length).fill(null));
+ }).catch(error => {
+ console.error(error);
+ });
+
+ };
+
+ const updateStatistics = async() => {
+ try {
+ await axios.post(`${apiEndpoint}/statistics`, {
+ username:username,
+ the_callenge_earned_money:0,
+ the_callenge_correctly_answered_questions:0,
+ the_callenge_incorrectly_answered_questions:0,
+ the_callenge_total_time_played:0,
+ the_callenge_games_played:0,
+ wise_men_stack_earned_money: 0,
+ wise_men_stack_correctly_answered_questions: 0,
+ wise_men_stack_incorrectly_answered_questions: 0,
+ wise_men_stack_games_played: 0,
+ warm_question_earned_money: totalScore,
+ warm_question_correctly_answered_questions: correctlyAnsweredQuestions,
+ warm_question_incorrectly_answered_questions: incorrectlyAnsweredQuestions,
+ warm_question_passed_questions: passedQuestions,
+ warm_question_games_played: 1,
+ discovering_cities_earned_money: 0,
+ discovering_cities_correctly_answered_questions: 0,
+ discovering_cities_incorrectly_answered_questions: 0,
+ discovering_cities_games_played: 0,
+ online_earned_money: 0,
+ online_correctly_answered_questions: 0,
+ online_incorrectly_answered_questions: 0,
+ online_total_time_played: 0,
+ online_games_played: 0,
+ });
+ } catch (error) {
+ console.error("Error:", error);
+ };
+ }
+
+ const updateQuestionsRecord = async() => {
+ try {
+ await axios.post(`${apiEndpoint}/user/questionsRecord`, {
+ questions: userResponses,
+ username: username,
+ gameMode: "WarmQuestion"
+ });
+ } catch (error) {
+ console.error("Error:", error);
+ };
+ }
+
+ // this function is called when a user selects a response.
+ const selectResponse = async (index, response) => {
+ setAnswered(true);
+ const newButtonStates = [...buttonStates];
+
+ setQuestionCountdownRunning(false);
+
+ if (response == null){
+ const userResponse = {
+ question: questionData.question,
+ response: "",
+ options: questionData.options,
+ correctAnswer: questionData.correctAnswer
+ };
+ setUserResponses(prevResponses => [...prevResponses, userResponse]);
+
+ const failureSound = new Audio(FAILURE_SOUND_ROUTE);
+ failureSound.volume = 0.40;
+ failureSound.play();
+ for (let i = 0; i < questionData.options.length; i++) {
+ if (questionData.options[i] === questionData.correctAnswer) {
+ newButtonStates[i] = "success";
+ }
+ }
+ setPassedQuestions(passedQuestions + 1);
+ setTotalScore(totalScore - 10);
+
+ const newQuestionHistorial = [...questionHistorial];
+ newQuestionHistorial[round-1] = false;
+ setQuestionHistorial(newQuestionHistorial);
+ }
+
+ //check answer
+ else if (response === questionData.correctAnswer) {
+ const userResponse = {
+ question: questionData.question,
+ response: response,
+ options: questionData.options,
+ correctAnswer: questionData.correctAnswer
+ };
+ setUserResponses(prevResponses => [...prevResponses, userResponse]);
+
+ newButtonStates[index] = "success"
+ const sucessSound = new Audio(SUCCESS_SOUND_ROUTE);
+ sucessSound.volume = 0.40;
+ sucessSound.play();
+ setCorrectlyAnsweredQuestions(correctlyAnsweredQuestions + 1);
+ setTotalScore(totalScore + 20);
+
+ const newQuestionHistorial = [...questionHistorial];
+ newQuestionHistorial[round-1] = true;
+ setQuestionHistorial(newQuestionHistorial);
+ } else {
+ const userResponse = {
+ question: questionData.question,
+ response: response,
+ options: questionData.options,
+ correctAnswer: questionData.correctAnswer
+ };
+ setUserResponses(prevResponses => [...prevResponses, userResponse]);
+ newButtonStates[index] = "failure";
+ const failureSound = new Audio(FAILURE_SOUND_ROUTE);
+ failureSound.volume = 0.40;
+ failureSound.play();
+ for (let i = 0; i < questionData.options.length; i++) {
+ if (questionData.options[i] === questionData.correctAnswer) {
+ newButtonStates[i] = "success";
+ }
+ }
+ setIncorrectlyAnsweredQuestions(incorrectlyAnsweredQuestions + 1);
+
+ const newQuestionHistorial = [...questionHistorial];
+ newQuestionHistorial[round-1] = false;
+ setQuestionHistorial(newQuestionHistorial);
+ }
+
+ setButtonStates(newButtonStates);
+
+ setTimeout(async() => {
+ setRound(round + 1);
+ setButtonStates([]);
+ setCurrentLanguage(i18n.language);
+ }, 4000);
+ };
+
+ const questionHistorialBar = () => {
+ return questionHistorial.map((isCorrect, index) => (
+
+ {index + 1}
+
+ ));
+ };
+
+ const togglePause = () => {
+ setTimerRunning(!timerRunning);
+ setQuestionCountdownRunning(!timerRunning);
+ if (timerRunning) {
+ // Si el juego estaba en marcha y se pausa, deshabilitar los botones
+ setButtonStates(new Array(questionData.options.length).fill(true));
+ } else {
+ // Si el juego estaba pausado y se reanuda, habilitar los botones
+ setButtonStates(new Array(questionData.options.length).fill(null));
+ }
+ }
+
+
+ // circular loading
+ if (!questionData) {
+ return (
+
+
+ );
+ }
+
+ // redirect to / if game over
+if (shouldRedirect) {
+ // Redirect after 3 seconds
+ setTimeout(() => {
+ navigate('/homepage');
+ }, 4000);
+
+
+ return (
+
+ incorrectlyAnsweredQuestions ? 'green' : 'red',
+ fontSize: '4rem', // Tamaño de fuente
+ marginTop: '20px', // Espaciado superior
+ marginBottom: '50px', // Espaciado inferior
+ }}
+ >
+ {correctlyAnsweredQuestions > incorrectlyAnsweredQuestions ? "Great Job!" : "Game Over"}
+
+
+ );
+}
+ return (
+
+
+ Game time: {totalTimePlayed} s
+
+
+
+
+
+
+
+ {questionHistorialBar()}
+
+
+
+
+ {round} / {MAX_ROUNDS}
+
+
+ {questionData.question}
+ selectResponse(0, "FAILED")} //when time ends always fail question
+ >
+ {({ remainingTime }) => {
+ return (
+
+
+
+
+ {questionData.options.map((option, index) => (
+
+
+
+ ))}
+
+
+ {!answered && (
+
+ )}
+
+
+
+ );
+};
+
+export default Game;
\ No newline at end of file
diff --git a/webapp/src/pages/WiseMenStackGame.js b/webapp/src/pages/WiseMenStackGame.js
new file mode 100644
index 00000000..2a98b9de
--- /dev/null
+++ b/webapp/src/pages/WiseMenStackGame.js
@@ -0,0 +1,424 @@
+import * as React from 'react';
+import axios from 'axios';
+import { Container, Button, CssBaseline, Grid, Typography, CircularProgress, Card, CardContent, Select, MenuItem, useTheme } from '@mui/material';
+import CheckIcon from '@mui/icons-material/Check';
+import ClearIcon from '@mui/icons-material/Clear';
+import { useNavigate } from 'react-router-dom';
+import { SessionContext } from '../SessionContext';
+import { useContext } from 'react';
+import Confetti from 'react-confetti';
+import { CountdownCircleTimer } from "react-countdown-circle-timer";
+import { useTranslation } from 'react-i18next';
+import i18n from '../localize/i18n';
+
+const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
+
+
+const WiseMenStackGame = () => {
+ const navigate = useNavigate();
+ const SUCCESS_SOUND_ROUTE = "/sounds/success_sound.mp3";
+ const FAILURE_SOUND_ROUTE = "/sounds/wrong_sound.mp3";
+
+ //sesion information
+ const {username} = useContext(SessionContext);
+ const theme = useTheme();
+
+
+ // Traductions
+ const { t } = useTranslation();
+
+ // state initialization
+ const [round, setRound] = React.useState(1);
+ const [questionData, setQuestionData] = React.useState(null);
+ const [buttonStates, setButtonStates] = React.useState([]);
+ const [answered, setAnswered] = React.useState(false);
+ const [shouldRedirect, setShouldRedirect] = React.useState(false);
+ const [totalScore, setTotalScore] = React.useState(0);
+ const [correctlyAnsweredQuestions, setCorrectlyAnsweredQuestions] = React.useState(0);
+ const [incorrectlyAnsweredQuestions, setIncorrectlyAnsweredQuestions] = React.useState(0);
+ const [totalTimePlayed, setTotalTimePlayed] = React.useState(0);
+ const [timerRunning, setTimerRunning] = React.useState(true); // indicate if the timer is working
+ const [showConfetti, setShowConfetti] = React.useState(false); //indicates if the confetti must appear
+ const [questionCountdownKey, ] = React.useState(60); //key to update question timer
+ const [questionCountdownRunning, setQuestionCountdownRunning] = React.useState(false); //property to start and stop question timer
+ const [userResponses, setUserResponses] = React.useState([]);
+ const [language, setCurrentLanguage] = React.useState(i18n.language);
+
+ const [category, setCategory] = React.useState('Geography');
+ const [possibleAnswers, setPossibleAnswers] = React.useState([]);
+ const [isConfigured, setConfiguration] = React.useState(false);
+
+ const [questionHistorial, setQuestionHistorial] = React.useState(Array(round).fill(null));
+
+ React.useEffect(() => {
+ let timer;
+ if (timerRunning) {
+ timer = setInterval(() => {
+ setTotalTimePlayed((prevTotalTime) => prevTotalTime + 1);
+ }, 1000);
+ }
+
+ return () => clearInterval(timer);
+ }, [timerRunning]);
+
+ // hook to initiating new rounds if the current number of rounds is less than or equal to 3
+ React.useEffect(() => {
+ if (totalTimePlayed <= questionCountdownKey) {
+ startNewRound();
+ setQuestionCountdownRunning(true);
+ } else {
+ setTimerRunning(false);
+ setShouldRedirect(true);
+ setQuestionCountdownRunning(false);
+ updateStatistics();
+ updateQuestionsRecord();
+ }
+ // eslint-disable-next-line
+ }, [round]);
+
+ // stablish if the confetti must show or not
+ React.useEffect(() => {
+ if (correctlyAnsweredQuestions > incorrectlyAnsweredQuestions) {
+ setShowConfetti(true);
+ } else {
+ setShowConfetti(false);
+ }
+ }, [correctlyAnsweredQuestions, incorrectlyAnsweredQuestions]);
+
+
+ // gets a random question from the database and initializes button states to null
+ const startNewRound = async () => {
+ setAnswered(false);
+ // It works deploying using git repo from machine with: axios.get(`http://20.80.235.188:8000/questions`)7
+
+ // Updates current language
+ setCurrentLanguage(i18n.language);
+ axios.get(`${apiEndpoint}/questions/${language}/${category}`)
+ .then(quest => {
+ // every new round it gets a new question from db
+ setQuestionData(quest.data[0]);
+ setButtonStates(new Array(2).fill(null));
+ getPossibleOptions(quest.data[0]);
+
+ }).catch(error => {
+ console.error("Could not get questions", error);
+ });
+
+ };
+
+ // It puts 2 possible answers into an array making sure that the correct answer is not repeated
+ const getPossibleOptions = async (question) => {
+ var options = [];
+ options.push(question.correctAnswer);
+ let randomNumber ;
+ do {
+ randomNumber = Math.floor(Math.random() * question.options.length);
+ } while (question.options[randomNumber] === question.correctAnswer);
+ options.push(question.options[randomNumber]);
+ options = shuffleArray(options);
+ setPossibleAnswers(options);
+ }
+
+ // Shuffles array
+ function shuffleArray(array) {
+ const random = Math.random();
+ const randomFactor = random < 0.5 ? -1 : 1;
+ return array.sort(() => randomFactor);
+ }
+
+
+ const updateStatistics = async() => {
+ try {
+ await axios.post(`${apiEndpoint}/statistics`, {
+ username:username,
+ wise_men_stack_earned_money:totalScore,
+ wise_men_stack_correctly_answered_questions:correctlyAnsweredQuestions,
+ wise_men_stack_incorrectly_answered_questions:incorrectlyAnsweredQuestions,
+ wise_men_stack_games_played:1
+ });
+ } catch (error) {
+ console.error("Error:", error);
+ };
+ }
+
+ const updateQuestionsRecord = async() => {
+ try {
+ await axios.post(`${apiEndpoint}/user/questionsRecord`, {
+ questions: userResponses,
+ username: username,
+ gameMode: "WiseMenStack"
+ });
+ } catch (error) {
+ console.error("Error:", error);
+ };
+ }
+
+ // this function is called when a user selects a response.
+ const selectResponse = async (index, response) => {
+ setAnswered(true);
+ const newButtonStates = [...buttonStates];
+
+ //setQuestionCountdownRunning(false);
+
+ //check answer
+ if (response === questionData.correctAnswer) {
+ const userResponse = {
+ question: questionData.question,
+ response: response,
+ options: questionData.options,
+ correctAnswer: questionData.correctAnswer
+ };
+ setUserResponses(prevResponses => [...prevResponses, userResponse]);
+
+ newButtonStates[index] = "success"
+ const sucessSound = new Audio(SUCCESS_SOUND_ROUTE);
+ sucessSound.volume = 0.40;
+ sucessSound.play();
+ setCorrectlyAnsweredQuestions(correctlyAnsweredQuestions + 1);
+ setTotalScore(totalScore + 20);
+
+ const newQuestionHistorial = [...questionHistorial];
+ newQuestionHistorial[round-1] = true;
+ setQuestionHistorial(newQuestionHistorial);
+ } else {
+ const userResponse = {
+ question: questionData.question,
+ response: response,
+ options: questionData.options,
+ correctAnswer: questionData.correctAnswer
+ };
+ setUserResponses(prevResponses => [...prevResponses, userResponse]);
+ newButtonStates[index] = "failure";
+ const failureSound = new Audio(FAILURE_SOUND_ROUTE);
+ failureSound.volume = 0.40;
+ failureSound.play();
+ for (let i = 0; i < questionData.options.length; i++) {
+ if (questionData.options[i] === questionData.correctAnswer) {
+ newButtonStates[i] = "success";
+ }
+ }
+ setIncorrectlyAnsweredQuestions(incorrectlyAnsweredQuestions + 1);
+
+ const newQuestionHistorial = [...questionHistorial];
+ newQuestionHistorial[round-1] = false;
+ setQuestionHistorial(newQuestionHistorial);
+ }
+
+ setButtonStates(newButtonStates);
+
+ setTimeout(async() => {
+ setRound(round + 1);
+ setButtonStates([]);
+ setCurrentLanguage(i18n.language);
+ }, 2000);
+ };
+
+ const questionHistorialBar = () => {
+ return questionHistorial.map((isCorrect, index) => (
+
+ {index + 1}
+
+ ));
+ };
+
+
+ // circular loading
+ if (!questionData) {
+ return (
+
+
+ );
+ }
+
+if(!isConfigured) {
+ return (
+
+ Wise Men Stack
+ {t("Wise_Men.instructions")}
+
+ {/* Dropdown for selecting category */}
+
+ );
+}
+
+ // redirect to / if game over
+if (shouldRedirect) {
+ // Redirect after 3 seconds
+ setTimeout(() => {
+ navigate('/homepage');
+ }, 4000);
+
+
+ return (
+
+ incorrectlyAnsweredQuestions ? 'green' : 'red',
+ fontSize: '4rem', // Tamaño de fuente
+ marginTop: '20px', // Espaciado superior
+ marginBottom: '50px', // Espaciado inferior
+ }}
+ >
+ {correctlyAnsweredQuestions > incorrectlyAnsweredQuestions ? t("Game.win_msg") : t("Game.lose_msg") }
+
+
+ );
+}
+ return (
+
+
+
+ {questionHistorialBar()}
+
+
+
+
+ {t("Game.round")} {round}
+
+
+ {questionData.question}
+ selectResponse(0, "FAILED")} //when time ends always fail question
+ >
+ {({ remainingTime }) => {
+ return (
+
+
+
+
+ {possibleAnswers.map((option, index) => (
+
+
+
+ ))}
+
+
+ );
+};
+
+export default WiseMenStackGame;
+
+ );
+};
+
+export default NotFound;
diff --git a/webapp/src/pages/Profile.js b/webapp/src/pages/Profile.js
new file mode 100644
index 00000000..c123f2e2
--- /dev/null
+++ b/webapp/src/pages/Profile.js
@@ -0,0 +1,117 @@
+import React, { useEffect, useState, useCallback, useContext } from 'react';
+import axios from 'axios';
+import { Button, Container, Typography, Divider, Snackbar } from '@mui/material';
+import { SessionContext } from '../SessionContext';
+import { getHugo, getAlberto, getWiffo, getAndina, getSamu, getBarrero, getMaite } from '../data/icons';
+import { useTranslation } from 'react-i18next';
+
+const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
+
+const Profile = () => {
+ const { t } = useTranslation();
+
+ const [userInfo, setUserInfo] = useState(null);
+ const [error, setError] = useState('');
+ const [openSnackbar, setOpenSnackbar] = useState(false);
+ const [snackbarMessage, setSnackbarMessage] = useState('');
+ const [selectedAvatar, setSelectedAvatar] = useState(null);
+ const [currentSelectedAvatar, setCurrentSelectedAvatar] = useState('defalt_user.jpg');
+
+ const { username } = useContext(SessionContext);
+
+ const fetchUserInfo = useCallback(async () => {
+ try {
+ const response = await axios.get(`${apiEndpoint}/user/profile`, { params: { username: username } });
+ setUserInfo(response.data);
+ } catch (error) {
+ setError('Error fetching user information');
+ }
+ }, [username]);
+
+ const handleAvatarSelect = (name) => {
+ setCurrentSelectedAvatar(name);
+ setSelectedAvatar(name);
+ };
+
+ const handleAvatarChange = async () => {
+ try {
+ await axios.post(`${apiEndpoint}/user/profile/${username}`, { imageUrl: currentSelectedAvatar });
+ setSnackbarMessage('Avatar changed successfully');
+ setOpenSnackbar(true);
+ fetchUserInfo();
+ } catch (error) {
+ setError('Error updating user information');
+ }
+ }
+
+ useEffect(() => {
+ fetchUserInfo();
+ }, [fetchUserInfo]);
+
+ const handleCloseSnackbar = () => {
+ setOpenSnackbar(false);
+ };
+
+ if (error || !userInfo) {
+ return (
+
+
+ {t("NotFound.title")}
+
+
+
+ {currentItems.map((record, index) => (
+
+ );
+ }
+ };
+
return (
+
+ Game {formatCreatedAt(record.createdAt)}
+
+
+
+ {record.questions.map((question, questionIndex) => (
+
+
+
+ {question.correctAnswer === question.response ?
+ {question.options.map((option, optionIndex) => (
+
+ {option === question.correctAnswer?
+ ))}
+
+
+ ))}
+
+
+ ))}
+ {currentItems.length > 0 && (
+
+
+
+ )}
+ Page {currentPage} of {totalPages === 0 ? 1 : totalPages}
+ +
-
-
-
-
-
- {renderStatistics()}
-
+
+
+
+
+
+
+ {renderStatistics()}
+
+ {renderQuestions()}
+
+
+
+ {numRounds}
+
+
+
+
+
+
+ {timerConfig}
+
+
+
+ {/* Dropdown for selecting category */}
+
+
+
+
+
+
+
+ Correct Answers: {correctlyAnsweredQuestions}
+ Incorrect Answers: {incorrectlyAnsweredQuestions}
+ Total money: {totalScore}
+ Game time: {totalTimePlayed} seconds
+
+ {showConfetti &&
+
+ );
+ }}
+ {remainingTime}
+
+ Correct Answers: {correctlyAnsweredQuestions}
+ Incorrect Answers: {incorrectlyAnsweredQuestions}
+ Skipped Questions: {passedQuestions}
+ Total money: {totalScore}
+ Game time: {totalTimePlayed} seconds
+
+ {showConfetti &&
+
+ );
+ }}
+ {remainingTime}
+
+
+
+
+
+
+
+ { t("Game.correct") }: {correctlyAnsweredQuestions}
+ { t("Game.incorrect") }: {incorrectlyAnsweredQuestions}
+ { t("Game.money") }: {totalScore}
+ { t("Game.time") }: {totalTimePlayed}
+
+ {showConfetti &&
+
+ );
+ }}
+ {remainingTime}
+