From 95853698834093f2dbf3b056f49866703d7fefa0 Mon Sep 17 00:00:00 2001 From: Marco Quintana Date: Thu, 2 May 2024 03:17:04 +0200 Subject: [PATCH] Visual improvements --- .../src/components/game/GameConfiguration.css | 41 +++++++- .../src/components/game/GameConfiguration.js | 93 +++++++++---------- .../components/game/GameConfiguration.test.js | 4 +- webapp/src/storeQuestion/css/questions.css | 1 + 4 files changed, 84 insertions(+), 55 deletions(-) diff --git a/webapp/src/components/game/GameConfiguration.css b/webapp/src/components/game/GameConfiguration.css index 6489e15a..5343bb4c 100644 --- a/webapp/src/components/game/GameConfiguration.css +++ b/webapp/src/components/game/GameConfiguration.css @@ -28,12 +28,13 @@ } .allTopics { - display: grid; - grid-template-columns: auto auto; + display: flex; + flex-wrap: wrap; + flex-direction: row; + gap: 3em; } .allTopics > div{ - width: 100%; display: flex; align-items: center; justify-content: center; @@ -52,7 +53,6 @@ -ms-appearance: none; -o-appearance: none; appearance: none; - top: 13.33333px; right: 0; bottom: 0; left: 0; @@ -103,6 +103,37 @@ width: 2rem; } - #config .border{ + #config{ + --label-r: 128; + --label-g: 128; + --label-b: 128; + --label-h: 0; + --label-s: 0; + --label-l: 50; + + --perceived-lightness: calc( ((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255 ); + --lightness-switch: max(0, min(calc((1/(var(--lightness-threshold) - var(--perceived-lightness)))), 1)); + --lightness-threshold: 0.6; + --background-alpha: 0.18; + --border-alpha: 0.3; + --lighten-by: calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch)); + /* color: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%)); */ + background: rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha)); + border-color: hsla(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%), var(--border-alpha)); + border-radius: 1em; + padding: 1%; margin-bottom: 10rem; + } + + #config h2{ + text-align: center; + } + + #config .configureNumberOfQuestions, #config .configureNumberOfAnswers{ + margin: 1em 0 0 0; + } + + #config .configureNumberOfQuestions label, #config .configureNumberOfAnswers label{ + font-size: 1.17em; + font-weight: 700; } \ No newline at end of file diff --git a/webapp/src/components/game/GameConfiguration.js b/webapp/src/components/game/GameConfiguration.js index 4d262416..a4a45b31 100644 --- a/webapp/src/components/game/GameConfiguration.js +++ b/webapp/src/components/game/GameConfiguration.js @@ -10,7 +10,7 @@ import './GameConfiguration.css'; import Spinner from '../spinner/Spinner'; import { generateGameId } from '../Util'; -const apiEndpoint = process.env.REACT_APP_API_ENDPOINT|| 'http://localhost:8000'; +const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000'; let gameId; @@ -18,38 +18,38 @@ let gameId; const GameConfiguration = () => { let questions = [] const navigation = useNavigate(); - let tematicas = ['Paises', 'Capitales']; - let state = useLocation().state; + let tematicas = ['Paises', 'Capitales']; + let state = useLocation().state; - console.log(state) + console.log(state) - if( state !== null) - tematicas = state.topics; - console.log(tematicas) + if (state !== null) + tematicas = state.topics; + console.log(tematicas) - // Almacen de temáticas - const [tematicasSeleccionadas, setTematicasSeleccionadas] = useState([]); - - let numPreguntas = 10; + // Almacen de temáticas + const [tematicasSeleccionadas, setTematicasSeleccionadas] = useState([]); - let numRes = 2 + let numPreguntas = 10; - const handleTematicaChange = (event) => { - const tematicaSeleccionada = event.target.value; + let numRes = 2 - if (tematicasSeleccionadas.includes(tematicaSeleccionada)) { - // Si está seleccionada -> la eliminamos - setTematicasSeleccionadas( - tematicasSeleccionadas.filter(tema => tema !== tematicaSeleccionada)); - } else { - setTematicasSeleccionadas([...tematicasSeleccionadas, tematicaSeleccionada]); - } - }; + const handleTematicaChange = (event) => { + const tematicaSeleccionada = event.target.value; + + if (tematicasSeleccionadas.includes(tematicaSeleccionada)) { + // Si está seleccionada -> la eliminamos + setTematicasSeleccionadas( + tematicasSeleccionadas.filter(tema => tema !== tematicaSeleccionada)); + } else { + setTematicasSeleccionadas([...tematicasSeleccionadas, tematicaSeleccionada]); + } + }; const initiateGame = async () => { //Sacar número de preguntas y respuestas - const numQuestions = parseInt(document.getElementById("questionsSpinner").innerText); + const numQuestions = parseInt(document.getElementById("questionsSpinner").innerText); const numRespuestas = parseInt(document.getElementById("answersSpinner").innerText); numPreguntas = numQuestions; @@ -58,10 +58,10 @@ const GameConfiguration = () => { console.log(numPreguntas); console.log(numRes); - gameId = await generateGameId(); + gameId = await generateGameId(); await getQuestions(); //isApiCalledRef = true//ASK - is this necessary? - navigation("/firstGame", {state: {questions, gameId}}) + navigation("/firstGame", { state: { questions, gameId } }) } function formatearTopics() { @@ -89,7 +89,7 @@ const GameConfiguration = () => { options: possibleAnswers, correctAnswer: pregunta.respuesta_correcta }) - } + } } catch (error) { console.error(error); } @@ -102,54 +102,53 @@ const GameConfiguration = () => {

Configuración de la partida

- +
-

Selecciona las temáticas

+

Selecciona las temáticas

- {tematicas.map((option, index) => ( -
+
+ {tematicas.map((option, index) => ( +
- + type="checkbox" + id={`t${index}`} + value={option} + className='option-input' + // checked={tematicasSeleccionadas.includes({option})} + onChange={handleTematicaChange} + /> +
) )} +
-

Selecciona el número de preguntas

- +
-

Selecciona el número de respuestas(mínimo 2)

-
- - + +
- +
-