Added changes on view shown after playing the game

Arquisoft · Apr 3, 2024 · 2729d34 · 2729d34
1 parent 675def7
commit 2729d34
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 48 deletions.
diff --git 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 (
     <div className='centered-div'>
-      <button className="historicalButton" onClick={handleClick}>{t("historicalView.game")} : {record.date.toLocaleDateString()} - {record.points} {t("historicalView.points")} </button>
+      <button className="historicalButton" onClick={handleClick}>{t("historicalView.game")} : <em>{record.date.toLocaleDateString()} </em> - {record.points} {t("historicalView.points")} </button>
       <ul style={{ display: toggle ? 'block' : 'none' }}>
-      {record.questions.map((question, index) => (<li key={index}>
-            <p>{question.question}</p>
-            <ul>
-              {question.answers.map((answer, answerIndex) => (
-                <li key={answerIndex}>
-                  {answer}
-                  {question.answerGiven === answer && " 👈 "}
-                  {question.correctAnswer === answer && " ✅ "}
-                </li>
-              ))}
-            </ul>
-          </li>
-        ))}
+        <RecordList record={record}/>
       </ul>
     </div>
   );

diff --git a/webapp/src/components/HistoricalData/RecordList.js b/webapp/src/components/HistoricalData/RecordList.js
@@ -0,0 +1,20 @@
+export default function RecordList({record}){
+    return (
+        <>
+        {record.questions.map((question, index) => (
+            <li key={index}>
+                  <p>{question.question}</p>
+                  <ul>
+                    {question.answers.map((answer, answerIndex) => (
+                      <li key={answerIndex}>
+                        {answer}
+                        {question.answerGiven === answer && " 👈 "}
+                        {question.correctAnswer === answer && " ✅ "}
+                      </li>
+                    ))}
+                  </ul>
+                </li>
+              ))}
+        </>
+    );
+}
diff --git 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
@@ -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);*/
diff --git 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 ? (
                 <div className='questionContainer'>
+
                     <div className='topPanel'>
                         <h2>{questions[numQuestion].getQuestion()}</h2>
                         <div className="countdown">
@@ -126,15 +128,19 @@ function QuestionComponent({questions, numQuestion, handleClick, t, points}){
                             <Answer key={index} text={item} onClick={handleClick.bind(this,item)} dataValue={questions[numQuestion].isCorrect(item)}/>
                         ))}
                     </div>
-                    <p>{t("questionView.question_counter")} {numQuestion+1}</p>
-                </div> 
+                    <div className='bottomPanel'>
+                        <p>{t("questionView.question_counter")} {numQuestion+1}</p>
+                        <p>{points} {t("questionView.point")}</p>
+                    </div>
+                 </div>
+
             ) : (
                 <>
                     {creationHistoricalRecord.setDate(Date.now())}
                     {creationHistoricalRecord.setPoints(points)}
-                    {console.log(creationHistoricalRecord.getRecord())}
                     <h2>{t("questionView.finished_game")} </h2>
                     <p>{points} {t("questionView.point")}</p>
+                    <ul>< RecordList record={creationHistoricalRecord.getRecord().game}/></ul>
                     <ButtonHistoricalData t={t} />
                 </>
             )}

diff --git 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;