Skip to content

Commit

Permalink
Visual improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@marco-qg
marco-qg committed May 2, 2024
1 parent 8c8419e commit 9585369
Show file tree
Hide file tree
Showing 4 changed files with 84 additions and 55 deletions.
41 changes: 36 additions & 5 deletions webapp/src/components/game/GameConfiguration.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -52,7 +53,6 @@
-ms-appearance: none;
-o-appearance: none;
appearance: none;
top: 13.33333px;
right: 0;
bottom: 0;
left: 0;
Expand Down Expand Up @@ -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;
}
93 changes: 46 additions & 47 deletions webapp/src/components/game/GameConfiguration.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,46 +10,46 @@ 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;


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;
Expand All @@ -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() {
Expand Down Expand Up @@ -89,7 +89,7 @@ const GameConfiguration = () => {
options: possibleAnswers,
correctAnswer: pregunta.respuesta_correcta
})
}
}
} catch (error) {
console.error(error);
}
Expand All @@ -102,54 +102,53 @@ const GameConfiguration = () => {
<Container id="config" component="main" maxWidth="xl" sx={{ marginTop: 4 }}>

<h2>Configuración de la partida</h2>

<div className="configureTopic">

<h3>Selecciona las temáticas</h3>
<h3>Selecciona las temáticas</h3>

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


<div className="configureNumberOfQuestions">

<h3>Selecciona el número de preguntas</h3>

<div>
<label htmlFor="numPreguntas">Número de preguntas:</label>
<Spinner min={1} value={10} max={50} id="questionsSpinner"/>
<Spinner min={1} value={10} max={50} id="questionsSpinner" />
</div>

</div>

<div className="configureNumberOfAnswers">

<h3>Selecciona el número de respuestas(mínimo 2)</h3>

<div>
<label htmlFor="numRes">Número de respuestas:</label>
<Spinner min={2} value={2} max={10} id="answersSpinner"/>
<label htmlFor="numRes">Número de respuestas(mínimo 2):</label>
<Spinner min={2} value={2} max={10} id="answersSpinner" />
</div>



</div>

<Button id="initGame" onClick={initiateGame} text="Comenzar Juego"/>
<Button id="initGame" onClick={initiateGame} text="Comenzar Juego" />

</Container>
<Footer />
</>
Expand Down
4 changes: 1 addition & 3 deletions webapp/src/components/game/GameConfiguration.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,6 @@ describe("Game Configuration", () => {
expect(linkElement).toBeInTheDocument();
linkElement = screen.getByText(/Selecciona las temáticas/i);
expect(linkElement).toBeInTheDocument();
linkElement = screen.getByText(/Selecciona el número de preguntas/i);
expect(linkElement).toBeInTheDocument();
linkElement = screen.getByText(/Comenzar Juego/i);
expect(linkElement).toBeInTheDocument();

Expand Down Expand Up @@ -75,7 +73,7 @@ describe("Game Configuration", () => {
//comprobamos que los elementos están correctamente
let div = document.getElementsByClassName('configureTopic')[0];
let divChild = div.childNodes;
expect(divChild).toHaveLength(3);
expect(divChild).toHaveLength(2);
//Probamos a marcar la primera temática
let topic1 = document.getElementById('t0');
expect(topic1).toHaveAttribute('type', 'checkbox');
Expand Down
1 change: 1 addition & 0 deletions webapp/src/storeQuestion/css/questions.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,7 @@ body {
}

#storeQuestion h2{
margin-top: 4.5em;
width: 100%;
text-align: center;
}
Expand Down

0 comments on commit 9585369

Please sign in to comment.