diff --git a/webapp/src/components/GameConfigurator/GameConfigurator.js b/webapp/src/components/GameConfigurator/GameConfigurator.js index 558b85f6..1c592294 100644 --- a/webapp/src/components/GameConfigurator/GameConfigurator.js +++ b/webapp/src/components/GameConfigurator/GameConfigurator.js @@ -3,6 +3,7 @@ import React, { useState } from 'react'; import {useTranslation} from "react-i18next"; import { Link } from "react-router-dom"; import QuestionView from '../questionView/QuestionView' +import BackButtonToGameMenu from '../fragments/BackButtonToGameMenu'; function GameConfigurator(){ const [tipoPregunta, setTipoPregunta] = useState('POPULATION'); @@ -15,11 +16,12 @@ function GameConfigurator(){ } return ( clickedForNewGame ? : -
+
+

{t("gameConfigurator.game_config")}

- +

{t("gameConfigurator.custo_game")}

- setTipoPregunta(e.target.value)}> @@ -29,7 +31,7 @@ function GameConfigurator(){ {/* Spinner para seleccionar el número de preguntas */} - setNumeroPreguntas(e.target.value)} @@ -38,24 +40,27 @@ function GameConfigurator(){



+
+

+

{t("gameConfigurator.competi_game")}

{t("gameConfigurator.rules_competi")}

{/* Botones para jugar un juego personalizado o competitivo */} +
); } function ButtonCustomized({t,handleClick}) { - return ( - + ); } function ButtonCompetitive({t}){ - //llamar setTipoPregunta COMPETITIVE + return (

{t("gameConfigurator.play_competi")}

diff --git a/webapp/src/custom.css b/webapp/src/custom.css index 39d91582..3c30da2f 100644 --- a/webapp/src/custom.css +++ b/webapp/src/custom.css @@ -1231,7 +1231,8 @@ svg { font-size: 1em; color: black; font-weight: 700; - margin: 1em; + margin-top: 3em; + margin-bottom: 3em; text-decoration: none; } @@ -1299,3 +1300,50 @@ svg { h2{ text-align: center; } +/*--------------------------------------------------Configurator---------------------------------*/ +/* Estilo para el elemento select */ +.select-style { + width: 200px; + height: 35px; + border: 1px solid #ccc; + border-radius: 5px; + background-color: #f8f8f8; + padding: 5px; + font-size: 16px; + color: #333; +} + +.select-style:focus { + border-color: #6e9ecf; + outline: none; +} + +/* Estilo para el spinner */ +.spinner-style { + width: 40px; + height: 30px; + border: 1px solid #ccc; + background-color: #f8f8f8; + border-radius: 5px; + font-size: medium; +} +.GameConfiguratorDiv> * { + margin-top: 10px; + margin-bottom: 10px; +} +.GameConfiguratorDiv { + left: 50%; + top: 50%; +} +.hr-style { + border: 0; + border-top: 1px solid #8e888885; /* Color gris */ + margin: 20px 0; /* Espacio antes y después de la línea */ +} + +.GameConfiguratorDiv h2 { + text-align: left; /* Alinea el texto a la izquierda */ + margin-top:20px; + margin-bottom:20px; +} + diff --git a/webapp/src/translations/en/global.json b/webapp/src/translations/en/global.json index 2a2963dd..28c2a341 100644 --- a/webapp/src/translations/en/global.json +++ b/webapp/src/translations/en/global.json @@ -81,7 +81,9 @@ "option_population":"Population", "option_capital":"Capital", "option_language":"Language", - "option_size":"Size" + "option_size":"Size", + "custo_game":"Create custom game", + "competi_game":"Play Competitive" } } diff --git a/webapp/src/translations/es/global.json b/webapp/src/translations/es/global.json index 2f855737..32f9e22a 100644 --- a/webapp/src/translations/es/global.json +++ b/webapp/src/translations/es/global.json @@ -76,15 +76,17 @@ }, "gameConfigurator":{ "game_config":"Configuración del Juego", - "type_quest":"Tipo de Pregunta", - "num_quest":"Numero de Preguntas", + "type_quest":"Tipo de Pregunta : ", + "num_quest":"Número de Preguntas : ", "play_custom":"Jugar personalizado", "rules_competi":"Jugar con todo tipo de preguntas siendo estas 5", "play_competi":"Jugar Competitivo", "option_population":"Población", "option_capital":"Capital", "option_language":"Lenguaje", - "option_size":"Extensión" + "option_size":"Extensión", + "custo_game":"Crea una partida personalizada", + "competi_game":"Juega en modo Competitivo" } }