Develop webapp into develop

webapp/package.json

@@ -10,13 +10,17 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
+    "@tsparticles/engine": "^3.3.0",
+    "@tsparticles/react": "^3.0.0",
     "axios": "^1.6.5",
     "react": "^18.2.0",
     "react-confetti": "^6.1.0",
     "react-countdown-circle-timer": "^3.2.1",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.1",
     "react-scripts": "5.0.1",
+    "react-tsparticles": "^2.12.2",
+    "tsparticles": "^3.3.0",
     "web-vitals": "^3.5.1"
   },
   "scripts": {
@@ -46,6 +50,7 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "axios-mock-adapter": "^1.22.0",
     "expect-puppeteer": "^9.0.2",
     "jest": "^29.3.1",

webapp/src/components/ParticleBg.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import particles from "../data/particles.json";
+import { useEffect, useState } from "react";
+import Particles, { initParticlesEngine } from "@tsparticles/react";
+import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
+
+const ParticlesComponent = () => {
+  const [init, setInit] = useState(false);
+
+  // this should be run only once per application lifetime
+  useEffect(() => {
+    initParticlesEngine(async (engine) => {
+
+      await loadFull(engine);
+    }).then(() => {
+      setInit(true);
+    });
+  }, []);
+
+  const particlesLoaded = (container) => {
+    console.log(container);
+  };
+
+  if (init) {
+    return (
+      <Particles
+        id="tsparticles"
+        particlesLoaded={particlesLoaded}
+        options={particles}
+      />
+    );
+  }
+
+  return <></>;
+};
+export default ParticlesComponent;

webapp/src/components/Photo.js

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { useState, useEffect } from 'react';
+import {Typography, Box, Card, CardActionArea, CardContent } from '@mui/material';
+
+
+import OpenAI from 'openai';
+
+
+
+const Photo = (props) => {
+  const [valor, setValor] = useState(props.questionData.correctAnswer);
+  const [resultados, setResultados] = useState([]);
+  const [info, setInfo] = useState();
+  const [question, setQuestion] = useState(props.questionData.question);
+
+
+  useEffect(() => {
+    // Actualiza el valor cuando props.questionData cambia
+    setValor(props.questionData.correctAnswer);
+    setQuestion(props.questionData.correctAnswer)
+  }, [props.questionData]);
+
+  const chatGPT = async () => {
+    const openai = new OpenAI({apiKey:'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', dangerouslyAllowBrowser:true});
+    const completion = await openai.chat.completions.create({
+      prompt: {question} ,
+      model: "gpt-3.5-turbo",
+    });
+
+    setInfo(completion.choices[0]);
+  }
+
+  const buscarResultados = async () => {
+
+    const ACCESS_KEY = 'tMukKPzKPjLvDq3gyWEojI38X7zJQZsPeD6DBtaxSJ0'
+    const URL = `https://api.unsplash.com/search/photos/?query=${valor}&client_id=${ACCESS_KEY}`;
+
+    const response = await fetch(URL);
+    const data = await response.json();
+
+    setResultados(data.results);
+  }
+
+  buscarResultados();
+    chatGPT();
+
+  return (
+    <div>
+      {resultados.length < 1 && <Typography variant="h5" align="center">{question}{valor}</Typography>}
+      {resultados.length > 0 &&
+        <Card sx={{ height:'100%', }}>
+          <CardActionArea sx={{display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', height:'100%'}}>
+            <Box sx={{width:'50%'}}>
+              <img style={{width: '100%', height:'100%', maxHeight: '40vh'}}  key='foto' src={resultados[0].urls.regular} alt='Foto sobre el dato correcto' />
+            </Box>
+            <CardContent sx={{width:'50%'}}>
+              <Typography gutterBottom variant="h6" component="div" sx={{ textAlign: 'center' }}> {question} </Typography>
+              <Typography variant="body2" color="text.secondary"> {info}</Typography>
+            </CardContent>
+          </CardActionArea>
+        </Card>
+      }
+    </div>
+  );
+}
+
+export default Photo;

webapp/src/data/gameInfo.json

@@ -3,12 +3,12 @@
       "nombre": "WISE MEN STACK",
       "descripcion":
             "The player chooses a topic from five available options and must answer a battery of questions related to it within 60 seconds. For each question, the host provides two options. If the contestant guesses correctly, they win €20; otherwise, they move on to the next question (as the correct answer would be the other option). If the time runs out before the question is fully asked and both possible answers are provided, the contestant may still answer it; however, if the statement hasn't been completed (or the options weren't provided), they cannot answer.",
-      "foto": "../gameImg/foto1.jpg"
+      "foto": "../gameImg/foto0.png"
     },
     {
       "nombre": "DISCARDING",
       "descripcion": "In this challenge, a work of any type (music, painting, sculpture, literature, scientific, and even works from the world of fiction) is presented, and the contestant must identify its author from four options. The mechanics of this challenge require the contestant to eliminate one of the non-authors so that only the correct author remains undisputed. If solved correctly, €100 is won, but if the author is eliminated, €50 is lost.",
-      "foto": "../gameImg/foto1.jpg"
+      "foto": "../gameImg/foto1.png"
     },
     {
       "nombre": "WARM QUESTION",
@@ -18,26 +18,26 @@
     {
       "nombre": "DISCOVERING CITIES",
       "descripcion": "Through photographs and clues provided by Pilar Vázquez, the contestants must guess the city proposed by the program that day. The contestant who goes first after the 'Warm question' will have the right to answer first and for 300 points. If they guess it correctly, they earn the points; if not, there will be a rebound, an additional clue, and a reduction of 100 points for each contestant.",
-      "foto": "../gameImg/foto1.jpg"
+      "foto": "../gameImg/foto3.png"
     },
     {
       "nombre": "LAST CALL",
       "descripcion": "The three contestants are positioned according to the scores obtained so far in the program. Six questions related to a specific topic are asked. Before starting, the answers to the six questions are provided. If the contestant's answer is incorrect, €100 is deducted from their score, and it contributes to a jackpot (which starts at zero). If the contestant answers correctly, they add the amount accumulated in the jackpot to their score, and the jackpot resets to zero (if there is nothing accumulated, the score remains the same). The first question is directed to the participant with the highest score, the next to the second highest, and the third to the lowest scorer. For the next three questions, this order is repeated.",
-      "foto": "../gameImg/foto1.jpg"
+      "foto": "../gameImg/foto4.png"
     },
     {
       "nombre": "THE HUMAN CALCULATOR",
       "descripcion": "Introduced in 2003, this challenge is the most feared after the main game. In it, the contestant who placed second in Last Call (previously, the loser in The Duel) faces the resolution of 7 arithmetic operations in 30 seconds. In 2021, it was slightly modified to include operations with indirect numbers (e.g., years in a lustrum, dozens, elements that make up something...). If they solve them, they keep the points earned for the day, but if not, they lose all accumulated points for the day (since the introduction of the mixed term, they lose 50% of the day's accumulation).",
-      "foto": "../gameImg/foto3.jpg"
+      "foto": "../gameImg/foto5.jpg"
     },
     {
       "nombre": "THE PART FOR THE WHOLE",
       "descripcion": "This challenge allows one of the contestants to win an extra sum of money, directly added to their total accumulated. The contestants must discover a 'whole', related to each of the 'parts' provided by Elisenda as clues. For their answer to be considered valid, besides discovering the whole, they must describe correctly how each of the parts relates to that whole. All contestants can participate, but in a specific order depending on the score obtained during the program. The game can last for several days until a contestant has the correct and complete answer. First day, the prize starts at 1000 euros, and decreases by 100 euros for each day that passes.",
-      "foto": "../gameImg/foto1.jpg"
+      "foto": "../gameImg/foto6.png"
     },
     {
       "nombre": "THE CHALLENGE",
       "descripcion": "In the early days of the program, there was no challenge, so after the hot question, there was always an elimination. This challenge was incorporated in 1998. It is one of the audience's favorite challenges, despite being an elimination round. The contestant with the lowest score after the last call (previously, the contestant with the lowest score after the hot question) gains access to this challenge. The contestant is presented with seven words, of which they only know the first three letters, and with Elisenda Roca's definitions, they must guess all the words in less than 50 seconds. If they guess them correctly, they will participate in the next program; otherwise, their participation ends. In both cases, the points earned that day are added to the total.",
-      "foto": "../gameImg/foto4.jpg"
+      "foto": "../gameImg/foto7.jpg"
     }
   ]

webapp/src/data/particles.json

@@ -0,0 +1,98 @@
+{
+  "particles": {
+    "number": {
+      "value": 100,
+      "density": {
+        "enable": true,
+        "value_area": 800
+      }
+    },
+    "color": {
+      "value": "#006699"
+    },
+    "shape": {
+      "type": "circle"
+    },
+    "opacity": {
+      "value": 0.5,
+      "random": false,
+      "anim": {
+        "enable": false,
+        "speed": 1,
+        "opacity_min": 0.1,
+        "sync": false
+      }
+    },
+    "size": {
+      "value": 3,
+      "random": true,
+      "anim": {
+        "enable": false,
+        "speed": 40,
+        "size_min": 0.1,
+        "sync": false
+      }
+    },
+    "links": {
+      "enable": true,
+      "distance": 150,
+      "color": "#006699",
+      "opacity": 0.4,
+      "width": 1
+    },
+    "move": {
+      "enable": true,
+      "speed": 2,
+      "direction": "none",
+      "random": false,
+      "straight": false,
+      "out_mode": "out",
+      "bounce": false,
+      "attract": {
+        "enable": false,
+        "rotateX": 600,
+        "rotateY": 1200
+      }
+    }
+  },
+  "interactivity": {
+    "detect_on": "canvas",
+    "events": {
+      "onhover": {
+        "enable": true,
+        "mode": "repulse"
+      },
+      "onclick": {
+        "enable": true,
+        "mode": "push"
+      },
+      "resize": true
+    },
+    "modes": {
+      "grab": {
+        "distance": 400,
+        "line_linked": {
+          "opacity": 1
+        }
+      },
+      "bubble": {
+        "distance": 400,
+        "size": 40,
+        "duration": 2,
+        "opacity": 8,
+        "speed": 3
+      },
+      "repulse": {
+        "distance": 200,
+        "duration": 0.4
+      },
+      "push": {
+        "particles_nb": 4
+      },
+      "remove": {
+        "particles_nb": 2
+      }
+    }
+  },
+  "retina_detect": true
+}