From 2729d34429792e0d6240fbc09dd0a9276aa227c0 Mon Sep 17 00:00:00 2001 From: uo289267 Date: Wed, 3 Apr 2024 22:41:57 +0200 Subject: [PATCH] Added changes on view shown after playing the game --- .../HistoricalData/HistoricalView.js | 18 +++---------- .../components/HistoricalData/RecordList.js | 20 ++++++++++++++ webapp/src/components/fragments/NavBar.js | 1 - .../questionView/CreationHistoricalRecord.js | 24 ----------------- .../components/questionView/QuestionView.js | 20 +++++++++----- webapp/src/custom.css | 27 +++++++++++++++++-- 6 files changed, 62 insertions(+), 48 deletions(-) create mode 100644 webapp/src/components/HistoricalData/RecordList.js diff --git a/webapp/src/components/HistoricalData/HistoricalView.js b/webapp/src/components/HistoricalData/HistoricalView.js index cd57787f..19366492 100644 --- a/webapp/src/components/HistoricalData/HistoricalView.js +++ b/webapp/src/components/HistoricalData/HistoricalView.js @@ -1,6 +1,8 @@ import React, {useEffect, useState } from 'react'; import {useTranslation} from "react-i18next"; import HistoryRecordRetriever from './HistoryRecordRetriever'; +import RecordList from './RecordList'; + const retriever = new HistoryRecordRetriever(); @@ -38,21 +40,9 @@ function HistoricalGameElement({record,t}){ return (
- +
); diff --git a/webapp/src/components/HistoricalData/RecordList.js b/webapp/src/components/HistoricalData/RecordList.js new file mode 100644 index 00000000..fe100a0a --- /dev/null +++ b/webapp/src/components/HistoricalData/RecordList.js @@ -0,0 +1,20 @@ +export default function RecordList({record}){ + return ( + <> + {record.questions.map((question, index) => ( +
  • +

    {question.question}

    + +
    • + ))} + + ); +} \ No newline at end of file diff --git a/webapp/src/components/fragments/NavBar.js b/webapp/src/components/fragments/NavBar.js index 5b9b5308..4437ef9f 100644 --- a/webapp/src/components/fragments/NavBar.js +++ b/webapp/src/components/fragments/NavBar.js @@ -1,5 +1,4 @@ import React, { useState } from 'react'; -import Typography from "@mui/material/Typography"; import { Link } from 'react-router-dom'; import MenuItem from '@mui/material/MenuItem'; import Menu from '@mui/material/Menu'; diff --git a/webapp/src/components/questionView/CreationHistoricalRecord.js b/webapp/src/components/questionView/CreationHistoricalRecord.js index d89f1209..e7c6903e 100644 --- a/webapp/src/components/questionView/CreationHistoricalRecord.js +++ b/webapp/src/components/questionView/CreationHistoricalRecord.js @@ -34,27 +34,3 @@ class CreationHistoricalRecord{ } export default CreationHistoricalRecord; -/* -// Ejemplo de uso: -const userId = "userIdentifier"; -const record = new CreationHistoricalRecord(userId); - -record.addQuestion( - "¿Cuál es el río más largo del mundo?", - ["Nilo", "Amazonas", "Yangtsé", "Misisipi"], - "Amazonas", - "Amazonas" -); - -record.addQuestion( - "¿Cuál es el elemento más abundante en la corteza terrestre?", - ["Hierro", "Oxígeno", "Silicio", "Aluminio"], - "Oxígeno", - "Oxígeno" -); - -record.setPoints(2500); -record.setDate("02/02/24"); - -const recordRecord = record.getRecord(); -console.log(recordRecord);*/ \ No newline at end of file diff --git a/webapp/src/components/questionView/QuestionView.js b/webapp/src/components/questionView/QuestionView.js index 43354f9a..17dce797 100644 --- a/webapp/src/components/questionView/QuestionView.js +++ b/webapp/src/components/questionView/QuestionView.js @@ -6,8 +6,7 @@ import React from "react"; import Countdown from 'react-countdown'; import {useTranslation} from "react-i18next"; import $ from 'jquery'; -import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; -import HistoricalView from '../HistoricalData/HistoricalView'; +import RecordList from '../HistoricalData/RecordList'; import ButtonHistoricalData from "../HistoricalData/ButtonHistoricalData"; const creationHistoricalRecord = new CreationHistoricalRecord(); @@ -44,9 +43,10 @@ function QuestionView(){ else{ $(this).css({ 'background-color': colorCorrectAnswer, - 'text-decoration': 'underline' // Underline the text of the button for correct answers + 'text-decoration': 'underline'// Underline the text of the button for correct answers }); } + $(this).css('pointer-events', 'none'); }); } @@ -55,7 +55,8 @@ function QuestionView(){ $('.answerButton').each(function() { $(this).css({ 'background-color': colorOriginal, - 'text-decoration': 'none' // Remove underline + 'text-decoration': 'none', // Remove underline + 'pointer-events': 'auto' }); }); } @@ -115,6 +116,7 @@ function QuestionComponent({questions, numQuestion, handleClick, t, points}){ <> {numQuestion < questions.length ? (
    +

    {questions[numQuestion].getQuestion()}

    @@ -126,15 +128,19 @@ function QuestionComponent({questions, numQuestion, handleClick, t, points}){ ))}
    -

    {t("questionView.question_counter")} {numQuestion+1}

    -
    +
    +

    {t("questionView.question_counter")} {numQuestion+1}

    +

    {points} {t("questionView.point")}

    +
    +
    + ) : ( <> {creationHistoricalRecord.setDate(Date.now())} {creationHistoricalRecord.setPoints(points)} - {console.log(creationHistoricalRecord.getRecord())}

    {t("questionView.finished_game")}

    {points} {t("questionView.point")}

    + )} diff --git a/webapp/src/custom.css b/webapp/src/custom.css index 6bc0fa79..94426fb0 100644 --- a/webapp/src/custom.css +++ b/webapp/src/custom.css @@ -1103,6 +1103,12 @@ svg { gap: 1em; width: fit-content; width: 500px; /* Establecer un ancho fijo */ + align-items: center; /* Centrar horizontalmente */ + justify-content: center; /* Centrar verticalmente */ + position: fixed; /* Posición fija para centrar en la ventana */ + left: 50%; + top: 50%; + transform: translate(-50%, -50%); /* Mover el elemento hacia atrás en la mitad de su tamaño */ } .answerPanel { @@ -1115,6 +1121,7 @@ svg { .topPanel { min-width: 0; + width: 100%; } .answerButton { @@ -1129,13 +1136,19 @@ svg { color: black; font-weight: 700; margin: 0.5em; - width: 100%; max-width: 200px; } .questionContainer p, span{ font-size: 20px; } + +.bottomPanel{ + display: flex; + justify-content: space-between; + +} + /*------------------------------Historical--------------------------------------------*/ /* Estilos para los botones */ .historicalButton { @@ -1148,7 +1161,7 @@ svg { border-radius: 0.3em; font-weight: bold; cursor: pointer; - margin-bottom: 0.2em; /* Agrega espacio entre los botones */ + margin: 1em; } /* Estilos para los divs dentro de centered-div */ @@ -1169,6 +1182,16 @@ svg { align-self: center; margin:auto; } +.divMenu { + display: flex; + flex-direction: column; /* Colocar los elementos en una columna */ + align-items: center; /* Centrar horizontalmente */ + justify-content: center; /* Centrar verticalmente */ + position: fixed; /* Posición fija para centrar en la ventana */ + left: 50%; + top: 50%; + transform: translate(-50%, -50%); /* Mover el elemento hacia atrás en la mitad de su tamaño */ +} .linkButton { display: flex;