From 18fe66d47d8ed272388d97d2de111f5d4e8e8859 Mon Sep 17 00:00:00 2001
From: uo264915 <uo264915@uniovi.es>
Date: Thu, 7 Mar 2024 23:33:37 +0100
Subject: [PATCH] Contador de preguntas correctas, cambios de CSS

---
 webapp/package-lock.json       | 12 ++++-----
 webapp/src/components/Game.css | 19 +++++++++++++
 webapp/src/components/Game.js  | 49 +++++++++++++++++++++++++++-------
 3 files changed, 65 insertions(+), 15 deletions(-)
 create mode 100644 webapp/src/components/Game.css

diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index 0c1135ae..7b2f7861 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -12419,9 +12419,9 @@
       }
     },
     "node_modules/ip": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz",
-      "integrity": "sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.1.tgz",
+      "integrity": "sha512-lJUL9imLTNi1ZfXT+DU6rBBdbiKGBuay9B6xGSPVjUeQwaH1RIGqef8RZkUtHioLmSNpPR5M4HVKJGm1j8FWVQ==",
       "dev": true
     },
     "node_modules/ipaddr.js": {
@@ -19830,9 +19830,9 @@
       }
     },
     "node_modules/pac-resolver/node_modules/ip": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.8.tgz",
-      "integrity": "sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg==",
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.9.tgz",
+      "integrity": "sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==",
       "dev": true
     },
     "node_modules/param-case": {
diff --git a/webapp/src/components/Game.css b/webapp/src/components/Game.css
new file mode 100644
index 00000000..1e4d4c29
--- /dev/null
+++ b/webapp/src/components/Game.css
@@ -0,0 +1,19 @@
+button[title="sigPreg"] {
+    margin: 1em;
+    margin-left: 2em;
+    background-color: rgba(31, 60, 134, 0.764);
+}
+
+button[title="contador"]:disabled{
+    margin: 1em;
+    background-color: rgba(31, 60, 134, 0.764);
+    color: white;
+}
+
+button[title="btnsPreg"]{
+    margin: 0.5em;
+    padding-top: 0.2em;
+    padding-bottom: 0.2em;
+    background-color: rgba(41, 120, 152, 0.764);
+}
+
diff --git a/webapp/src/components/Game.js b/webapp/src/components/Game.js
index b8525999..f009fd10 100644
--- a/webapp/src/components/Game.js
+++ b/webapp/src/components/Game.js
@@ -2,6 +2,10 @@
 import React, { useState } from 'react';
 import axios from 'axios';
 import { Container, Typography, Button, Paper } from '@mui/material';
+import './Game.css';
+
+const colorPreguntas= 'rgba(51, 139, 173, 0.764)';
+const colorOnMousePreguntas= 'rgba(28, 84, 106, 0.764)';
 
 const Game = () => {
   const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
@@ -9,6 +13,7 @@ const Game = () => {
   const [country, setCountry] = useState('');
   const [capitalCorrect, setCapitalCorrect] = useState('');
   const [capitalOptions, setcapitalOptions] = useState([]);
+  const [count, setCount] = useState(0);
   
   // This method will call the create question service
   const  handleShowQuestion = async () => {
@@ -19,6 +24,13 @@ const Game = () => {
       setCountry(response.data.responseCountry);
       setCapitalCorrect(response.data.responseCapitalCorrect);
       setcapitalOptions(response.data.responseCapitalOptions);
+      const buttons = document.querySelectorAll('button[title="btnsPreg"]');
+      buttons.forEach(button => {
+        button.name = "sinContestar";
+        button.disabled = false;
+        button.style.backgroundColor = colorPreguntas;
+        button.onmouse = colorOnMousePreguntas;
+      });
     }catch (error){
       console.error('Error:', error);
     }    
@@ -28,15 +40,31 @@ const Game = () => {
   const handleAnswerClick = (option, index) => {
     // Get what component is the button to change its color later
     //const button = document.getElementById(`button_${index}`);
-    if(option === capitalCorrect){
-      //button.style.backgroundColor = "green";
-      alert("CORRECTO");
+    if(option === capitalCorrect) {
+      const buttonId = `button_${index}`;
+      const correctButton = document.getElementById(buttonId);
+      if (correctButton) {
+        correctButton.style.backgroundColor = "rgba(79, 141, 18, 0.726)";
+        increment();
+      }
     }else{
-      //button.style.backgroundColor = "red";
-      alert("INCORRECTO");
+      const buttonId = `button_${index}`;
+      const incorrectButton = document.getElementById(buttonId);
+      incorrectButton.style.backgroundColor = "rgba(208, 22, 22, 0.952)";
     }
+
+    const buttons = document.querySelectorAll('button[title="btnsPreg"]');
+    buttons.forEach(button => {
+      button.disabled = true;
+      button.onmouse = null;
+    });
+
   }
 
+  const increment = () => {
+    setCount(count + 1);
+  };
+
   return (
     <Container maxWidth="md" style={{ marginTop: '2rem' }}>
       <Paper elevation={3} style={{ padding: '2rem', textAlign: 'center' }}>
@@ -46,16 +74,19 @@ const Game = () => {
         <Typography variant="body1" paragraph>
           Pregunta: ¿Cuál es la capital de {country}?
         </Typography>
-        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: '20px' }}>
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', alignItems: 'center', marginTop: '2em' }}>
         {capitalOptions.map((option, index) => (
-          <Button id={`button_${index}`} key={index} variant="contained" color="primary" onClick={() => handleAnswerClick(option,index)} >
+          <Button  id={`button_${index}`} title="btnsPreg" key={index} variant="contained" color="primary" onClick={() => handleAnswerClick(option,index)} >
             {option}
           </Button>
         ))}
       </div>
       </Paper>
-      <Button variant="contained" color="primary" onClick={handleShowQuestion}>
-        Genera pregunta
+      <Button title="contador" onmouse="null" variant="contained" color="primary" disabled="true" >
+        Correctas: {count}
+      </Button>
+      <Button title="sigPreg" variant="contained" color="primary" onClick={handleShowQuestion}>
+        Siguiente pregunta
       </Button>
     </Container>
   );