From 759076b7381f4db377699ccd0a4b0e8cda8870ea Mon Sep 17 00:00:00 2001
From: uo289267 <uo289267@uniovi.es>
Date: Mon, 15 Apr 2024 21:26:18 +0200
Subject: [PATCH] Added style to game configurator

---
 .../GameConfigurator/GameConfigurator.js      | 19 ++++---
 webapp/src/custom.css                         | 50 ++++++++++++++++++-
 webapp/src/translations/en/global.json        |  4 +-
 webapp/src/translations/es/global.json        |  8 +--
 4 files changed, 69 insertions(+), 12 deletions(-)

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 ? <QuestionView type={tipoPregunta} amount={numeroPreguntas} /> :
-      <div>
+      <div className='GameConfiguratorDiv'>
+        <BackButtonToGameMenu t={t} />
         <h1>{t("gameConfigurator.game_config")}</h1>
-        
+        <h2>{t("gameConfigurator.custo_game")}</h2>
         <label>{t("gameConfigurator.type_quest")}</label>
-        <select value={tipoPregunta} onChange={(e) => setTipoPregunta(e.target.value)}>
+        <select className="select-style" value={tipoPregunta} onChange={(e) => setTipoPregunta(e.target.value)}>
           <option value="POPULATION">{t("gameConfigurator.option_population")}</option>
           <option value="CAPITAL">{t("gameConfigurator.option_capital")}</option>
           <option value="LANGUAGE">{t("gameConfigurator.option_language")}</option>
@@ -29,7 +31,7 @@ function GameConfigurator(){
   
         <label>{t("gameConfigurator.num_quest")}</label>
         {/* Spinner para seleccionar el número de preguntas */}
-        <input 
+        <input  className='spinner-style'
           type="number" 
           value={numeroPreguntas} 
           onChange={(e) => setNumeroPreguntas(e.target.value)} 
@@ -38,24 +40,27 @@ function GameConfigurator(){
         <br></br>
         <ButtonCustomized t={t} handleClick={handleClick}/>
         <br></br>
+        <hr class="hr-style"></hr>
+        <br></br>
+        <h2>{t("gameConfigurator.competi_game")}</h2>
         <p>{t("gameConfigurator.rules_competi")}</p>
         {/* Botones para jugar un juego personalizado o competitivo */}
         <ButtonCompetitive t={t} />
+        
       </div>
     );
 }
 
 
 function ButtonCustomized({t,handleClick}) {
-  
   return (
-    <button onClick={handleClick}>{t("gameConfigurator.play_custom")}</button>
+    <button className="linkButton" onClick={handleClick}>{t("gameConfigurator.play_custom")}</button>
   );
 }
 
 
 function ButtonCompetitive({t}){
-     //llamar setTipoPregunta COMPETITIVE
+
      return (
       <Link className="linkButton" to="/questions">
         <h3>{t("gameConfigurator.play_competi")}</h3>
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"
     }
     
   }