diff --git a/webapp/src/App.js b/webapp/src/App.js index d6b5967e..6c9a3d1f 100644 --- a/webapp/src/App.js +++ b/webapp/src/App.js @@ -13,6 +13,7 @@ import Config from "./pages/Config/Config.js"; import Login from "./components/Login/Login.js"; import Register from "./components/Register/Register.js"; import Perfil from "./pages/Perfil/Perfil.js"; +import CalculadoraHumana from "./pages/Calculadora/Calculadora.js"; function App() { @@ -32,6 +33,7 @@ function App() { } /> } /> } /> + } /> } /> } /> } /> diff --git a/webapp/src/pages/Calculadora/Calculadora.js b/webapp/src/pages/Calculadora/Calculadora.js new file mode 100644 index 00000000..5572f7b3 --- /dev/null +++ b/webapp/src/pages/Calculadora/Calculadora.js @@ -0,0 +1,169 @@ +import React, { useState, useEffect } from "react"; +import Nav from "../../components/Nav/Nav.js"; +import Footer from "../../components/Footer/Footer.js"; +import { Link } from "react-router-dom"; +import { Box, Flex, Heading, Button, Input } from "@chakra-ui/react"; + +const generateRandomOperation = () => { + let operators = ["+", "-", "*", "/"]; + let operator = operators[Math.floor(Math.random() * operators.length)]; + let num1 = Math.floor(Math.random() * 10 + 1); + let num2 = Math.floor(Math.random() * 10 + 1); + if (operator === "/") { + let numCandidates = findDivisors(num1); + let num2 = numCandidates[Math.floor(Math.random() * numCandidates.length)]; + return `${num1} ${operator} ${num2}`; + } + + return `${num1} ${operator} ${num2}`; +}; + +function findDivisors(num) { + const divisors = []; + const sqrtNum = Math.sqrt(Math.abs(num)); + + for (let i = 1; i <= sqrtNum; i++) { + if (num % i === 0) { + divisors.push(i); + if (i !== sqrtNum) { + divisors.push(num / i); + } + } + } + + return divisors; +} + +const CalculadoraHumana = () => { + const TIME = 60; + + const [valSubmit, setValSubmit] = useState(""); + const [puntuacion, setPuntuacion] = useState(0); + const [operation, setOperation] = useState(generateRandomOperation()); + const [tiempoRestante, setTiempoRestante] = useState(TIME); + const [juegoTerminado, setJuegoTerminado] = useState(false); + const [progressPercent, setProgressPercent] = useState(100); + + useEffect(() => { + if (tiempoRestante === 0) { + setJuegoTerminado(true); + } + const timer = setInterval(() => { + setTiempoRestante((prevTiempo) => (prevTiempo <= 0 ? 0 : prevTiempo - 1)); + }, 1000); + return () => clearInterval(timer); + // eslint-disable-next-line + }, [tiempoRestante]); + + useEffect(() => { + setProgressPercent((tiempoRestante / TIME) * 100); + + const timer = setInterval(() => { + setTiempoRestante((prevTiempo) => + prevTiempo <= 0 ? 0 : prevTiempo - 0.01 + ); + }, 10); + + return () => clearInterval(timer); + // eslint-disable-next-line + }, [tiempoRestante]); + + const handleAnswer = (valSubmit) => { + setValSubmit(""); + valSubmit = Number(valSubmit); + + let evalued = eval(operation); + if (valSubmit === evalued) { + setPuntuacion(puntuacion + 1); + let newOperation = generateOperation(valSubmit); + setOperation(newOperation); + } else { + setJuegoTerminado(true); + } + }; + + const generateOperation = (valSubmit) => { + valSubmit = Number(valSubmit); + + let operators = ["+", "-", "*", "/"]; + let operator = operators[Math.floor(Math.random() * operators.length)]; + let num1 = Math.floor(Math.random() * 10 + 1); + let operation = `${valSubmit} ${operator} ${num1}`; + if (operator === "/") { + if(valSubmit === 0){ + return `${valSubmit} ${operator} ${1}`; + } + let numCandidates = findDivisors(valSubmit); + let num2 = + numCandidates[Math.floor(Math.random() * numCandidates.length)]; + return `${valSubmit} ${operator} ${num2}`; + } + return operation; + }; + + const handleRepetirJuego = () => { + setPuntuacion(0); + setTiempoRestante(60); + setJuegoTerminado(false); + setOperation(generateRandomOperation()); + }; + + const handleKeyDown = (event) => { + if (event.key === "Enter") { + handleAnswer(Number(event.target.value)); + } + }; + + return ( + <> +