From b1a7f2698d8bae9a0f5da53720d336d604431fa5 Mon Sep 17 00:00:00 2001 From: uo283182 Date: Sat, 9 Mar 2024 19:11:05 +0100 Subject: [PATCH 1/6] =?UTF-8?q?Creaci=C3=B3n=20pantalla=20inicial=20y=20a?= =?UTF-8?q?=C3=B1adidas=20rutas?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 301 +++++++++++++++++++++++++++- webapp/src/App.js | 18 +- webapp/src/components/AddUser.js | 6 + webapp/src/components/HomeScreen.js | 30 +++ webapp/src/components/Login.js | 16 +- webapp/src/index.js | 7 +- 6 files changed, 365 insertions(+), 13 deletions(-) create mode 100644 webapp/src/components/HomeScreen.js diff --git a/package-lock.json b/package-lock.json index 28193309..cc22dfcc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2,5 +2,304 @@ "name": "wiq_es2a", "lockfileVersion": 3, "requires": true, - "packages": {} + "packages": { + "": { + "dependencies": { + "react-router-dom": "^5.0.0" + } + }, + "node_modules/@babel/runtime": { + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.0.tgz", + "integrity": "sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==", + "dependencies": { + "regenerator-runtime": "^0.14.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/asap": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", + "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==" + }, + "node_modules/core-js": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", + "integrity": "sha512-ZiPp9pZlgxpWRu0M+YWbm6+aQ84XEfH1JRXvfOc/fILWI0VKhLC2LX13X1NYq4fULzLMq7Hfh43CSo2/aIaUPA==", + "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js." + }, + "node_modules/create-react-context": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.3.tgz", + "integrity": "sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==", + "dependencies": { + "fbjs": "^0.8.0", + "gud": "^1.0.0" + }, + "peerDependencies": { + "prop-types": "^15.0.0", + "react": "^0.14.0 || ^15.0.0 || ^16.0.0" + } + }, + "node_modules/encoding": { + "version": "0.1.13", + "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz", + "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==", + "dependencies": { + "iconv-lite": "^0.6.2" + } + }, + "node_modules/fbjs": { + "version": "0.8.18", + "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.18.tgz", + "integrity": "sha512-EQaWFK+fEPSoibjNy8IxUtaFOMXcWsY0JaVrQoZR9zC8N2Ygf9iDITPWjUTVIax95b6I742JFLqASHfsag/vKA==", + "dependencies": { + "core-js": "^1.0.0", + "isomorphic-fetch": "^2.1.1", + "loose-envify": "^1.0.0", + "object-assign": "^4.1.0", + "promise": "^7.1.1", + "setimmediate": "^1.0.5", + "ua-parser-js": "^0.7.30" + } + }, + "node_modules/gud": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz", + "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==" + }, + "node_modules/history": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", + "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "dependencies": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^3.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^1.0.1" + } + }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, + "node_modules/iconv-lite": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", + "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", + "dependencies": { + "safer-buffer": ">= 2.1.2 < 3.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-stream": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz", + "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==" + }, + "node_modules/isomorphic-fetch": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz", + "integrity": "sha512-9c4TNAKYXM5PRyVcwUZrF3W09nQ+sO7+jydgs4ZGW9dhsLG2VOlISJABombdQqQRXCwuYG3sYV/puGf5rp0qmA==", + "dependencies": { + "node-fetch": "^1.0.1", + "whatwg-fetch": ">=0.10.0" + } + }, + "node_modules/js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + }, + "node_modules/loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, + "node_modules/node-fetch": { + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", + "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==", + "dependencies": { + "encoding": "^0.1.11", + "is-stream": "^1.0.1" + } + }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/path-to-regexp": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", + "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", + "dependencies": { + "isarray": "0.0.1" + } + }, + "node_modules/promise": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", + "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", + "dependencies": { + "asap": "~2.0.3" + } + }, + "node_modules/prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, + "node_modules/react": { + "version": "16.14.0", + "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz", + "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, + "node_modules/react-router": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.0.0.tgz", + "integrity": "sha512-6EQDakGdLG/it2x9EaCt9ZpEEPxnd0OCLBHQ1AcITAAx7nCnyvnzf76jKWG1s2/oJ7SSviUgfWHofdYljFexsA==", + "dependencies": { + "@babel/runtime": "^7.1.2", + "create-react-context": "^0.2.2", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", + "loose-envify": "^1.3.1", + "path-to-regexp": "^1.7.0", + "prop-types": "^15.6.2", + "react-is": "^16.6.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "peerDependencies": { + "react": ">=15" + } + }, + "node_modules/react-router-dom": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.0.0.tgz", + "integrity": "sha512-wSpja5g9kh5dIteZT3tUoggjnsa+TPFHSMrpHXMpFsaHhQkm/JNVGh2jiF9Dkh4+duj4MKCkwO6H08u6inZYgQ==", + "dependencies": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "loose-envify": "^1.3.1", + "prop-types": "^15.6.2", + "react-router": "5.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "peerDependencies": { + "react": ">=15" + } + }, + "node_modules/regenerator-runtime": { + "version": "0.14.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", + "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==" + }, + "node_modules/resolve-pathname": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", + "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" + }, + "node_modules/safer-buffer": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" + }, + "node_modules/setimmediate": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", + "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==" + }, + "node_modules/tiny-invariant": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz", + "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==" + }, + "node_modules/tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, + "node_modules/ua-parser-js": { + "version": "0.7.37", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.37.tgz", + "integrity": "sha512-xV8kqRKM+jhMvcHWUKthV9fNebIzrNy//2O9ZwWcfiBFR5f25XVZPLlEajk/sf3Ra15V92isyQqnIEXRDaZWEA==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/ua-parser-js" + }, + { + "type": "paypal", + "url": "https://paypal.me/faisalman" + }, + { + "type": "github", + "url": "https://github.com/sponsors/faisalman" + } + ], + "engines": { + "node": "*" + } + }, + "node_modules/value-equal": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", + "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" + }, + "node_modules/whatwg-fetch": { + "version": "3.6.20", + "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz", + "integrity": "sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg==" + } + } } diff --git a/webapp/src/App.js b/webapp/src/App.js index d932005b..71831e63 100644 --- a/webapp/src/App.js +++ b/webapp/src/App.js @@ -4,7 +4,7 @@ import Login from './components/Login'; import CssBaseline from '@mui/material/CssBaseline'; import Container from '@mui/material/Container'; import Typography from '@mui/material/Typography'; -import Link from '@mui/material/Link'; +import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'; function App() { const [showLogin, setShowLogin] = useState(true); @@ -14,11 +14,21 @@ function App() { }; return ( + - - Welcome to the 2024 edition of the Software Architecture course + Saber y Ganar + + + + + + + + + {/* + {showLogin ? : } {showLogin ? ( @@ -30,7 +40,7 @@ function App() { Already have an account? Login here. )} - + */} ); } diff --git a/webapp/src/components/AddUser.js b/webapp/src/components/AddUser.js index 00d522a2..d1230f0d 100644 --- a/webapp/src/components/AddUser.js +++ b/webapp/src/components/AddUser.js @@ -2,6 +2,7 @@ import React, { useState } from 'react'; import axios from 'axios'; import { Container, Typography, TextField, Button, Snackbar } from '@mui/material'; +import { Link } from "react-router-dom"; const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000'; @@ -49,10 +50,15 @@ const AddUser = () => { + {error && ( setError('')} message={`Error: ${error}`} /> )} +

+ + Already have an account? Login here. + ); }; diff --git a/webapp/src/components/HomeScreen.js b/webapp/src/components/HomeScreen.js new file mode 100644 index 00000000..ec0a81b0 --- /dev/null +++ b/webapp/src/components/HomeScreen.js @@ -0,0 +1,30 @@ +import React, { useState } from 'react'; +import { Container} from '@mui/material'; +const HomeScreen = () => { + const [juegoIniciado, setJuegoIniciado] = useState(false); + + const handleStartButtonClick = () => { + setJuegoIniciado(true); + }; + return ( + +
+ {juegoIniciado ? ( + // Muestra otro componente o contenido cuando el juego está iniciado +
+

¡El juego ha comenzado!

+ +
+ ) : ( + // Muestra el contenido inicial con el botón "Jugar" +
+ +
+ )} +
+ + ) +}; + +export default HomeScreen; + diff --git a/webapp/src/components/Login.js b/webapp/src/components/Login.js index 0ad6268e..6f75ef5b 100644 --- a/webapp/src/components/Login.js +++ b/webapp/src/components/Login.js @@ -2,6 +2,8 @@ import React, { useState } from 'react'; import axios from 'axios'; import { Container, Typography, TextField, Button, Snackbar } from '@mui/material'; +import HomeScreen from './HomeScreen'; +import { Link } from "react-router-dom"; const Login = () => { const [username, setUsername] = useState(''); @@ -37,12 +39,7 @@ const Login = () => { {loginSuccess ? (
- - Hello {username}! - - - Your account was created on {new Date(createdAt).toLocaleDateString()}. - +
) : (
@@ -67,10 +64,17 @@ const Login = () => { + {error && ( setError('')} message={`Error: ${error}`} /> )} +

+ + Don't have an account? Register here. + + +
)} diff --git a/webapp/src/index.js b/webapp/src/index.js index d563c0fb..d2fe47b4 100644 --- a/webapp/src/index.js +++ b/webapp/src/index.js @@ -3,12 +3,15 @@ import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; +import { BrowserRouter as Router } from 'react-router-dom'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( - + + - + + ); // If you want to start measuring performance in your app, pass a function From 08ee955a3d75546c28731e977115846be2cde563 Mon Sep 17 00:00:00 2001 From: uo283182 Date: Sun, 10 Mar 2024 10:09:59 +0100 Subject: [PATCH 2/6] creacion de la pantalla de juego --- webapp/src/App.js | 26 +++++++++++++++++++++++++- webapp/src/components/Game.js | 29 +++++++++++++++++++++++++++++ webapp/src/components/HomeScreen.js | 8 ++++---- 3 files changed, 58 insertions(+), 5 deletions(-) create mode 100644 webapp/src/components/Game.js diff --git a/webapp/src/App.js b/webapp/src/App.js index 71831e63..14f0351e 100644 --- a/webapp/src/App.js +++ b/webapp/src/App.js @@ -4,7 +4,10 @@ import Login from './components/Login'; import CssBaseline from '@mui/material/CssBaseline'; import Container from '@mui/material/Container'; import Typography from '@mui/material/Typography'; -import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'; +import { BrowserRouter as Router, Route, Switch, Link, Redirect } from 'react-router-dom'; +import HomeScreen from './components/HomeScreen'; +import Game from './components/Game'; + function App() { const [showLogin, setShowLogin] = useState(true); @@ -12,6 +15,12 @@ function App() { const handleToggleView = () => { setShowLogin(!showLogin); }; + const [isAuthenticated, setAuthenticated] = useState(false); + + const handleLogin = () => { + // Lógica para autenticar al usuario (por ejemplo, verificar credenciales) + setAuthenticated(true); + }; return ( @@ -24,6 +33,8 @@ function App() { + + @@ -43,6 +54,19 @@ function App() { */} ); + } +const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => ( + + isAuthenticated ? ( + + ) : ( + + ) + } + /> +); export default App; diff --git a/webapp/src/components/Game.js b/webapp/src/components/Game.js new file mode 100644 index 00000000..4d9b2765 --- /dev/null +++ b/webapp/src/components/Game.js @@ -0,0 +1,29 @@ +import React, { useState } from 'react'; +import { Container, styled } from '@mui/system'; + +const StyledContainer = styled(Container)({ + textAlign: 'center', + marginTop: '2rem', + }); + + const StyledButton = styled('button')({ + + padding: '10px 20px', + cursor: 'pointer', + + + }); + + const Game = () => { + return ( + +

Pregunta

+ 1 + 2 + 3 + 4 + + ); + }; + +export default Game; \ No newline at end of file diff --git a/webapp/src/components/HomeScreen.js b/webapp/src/components/HomeScreen.js index ec0a81b0..e5e80d47 100644 --- a/webapp/src/components/HomeScreen.js +++ b/webapp/src/components/HomeScreen.js @@ -1,5 +1,6 @@ import React, { useState } from 'react'; import { Container} from '@mui/material'; +import Game from './Game'; const HomeScreen = () => { const [juegoIniciado, setJuegoIniciado] = useState(false); @@ -11,14 +12,13 @@ const HomeScreen = () => {
{juegoIniciado ? ( // Muestra otro componente o contenido cuando el juego está iniciado -
-

¡El juego ha comenzado!

- -
+ ) : ( // Muestra el contenido inicial con el botón "Jugar"
+

+
)}
From 779af9dcfb4f1415443d64c35018f36fe67d8f30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pablo=20L=C3=B3pez=20Tamargo?= Date: Sun, 10 Mar 2024 10:57:03 +0100 Subject: [PATCH 3/6] Pruebas con la Interfaz --- webapp/package-lock.json | 39 +++++++++++++++++++++++++++++++++++++++ webapp/package.json | 1 + webapp/src/App.js | 34 ++++++++++++---------------------- 3 files changed, 52 insertions(+), 22 deletions(-) diff --git a/webapp/package-lock.json b/webapp/package-lock.json index 27466aee..df73ce7d 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -17,6 +17,7 @@ "axios": "^1.6.5", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.22.3", "react-scripts": "5.0.1", "web-vitals": "^3.5.1" }, @@ -5005,6 +5006,14 @@ "node": ">=12" } }, + "node_modules/@remix-run/router": { + "version": "1.15.3", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz", + "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -22009,6 +22018,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.22.3", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz", + "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==", + "dependencies": { + "@remix-run/router": "1.15.3" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.22.3", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz", + "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==", + "dependencies": { + "@remix-run/router": "1.15.3", + "react-router": "6.22.3" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/webapp/package.json b/webapp/package.json index 74e31bee..062f84c2 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -12,6 +12,7 @@ "axios": "^1.6.5", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.22.3", "react-scripts": "5.0.1", "web-vitals": "^3.5.1" }, diff --git a/webapp/src/App.js b/webapp/src/App.js index 14f0351e..eb061bb3 100644 --- a/webapp/src/App.js +++ b/webapp/src/App.js @@ -4,7 +4,7 @@ import Login from './components/Login'; import CssBaseline from '@mui/material/CssBaseline'; import Container from '@mui/material/Container'; import Typography from '@mui/material/Typography'; -import { BrowserRouter as Router, Route, Switch, Link, Redirect } from 'react-router-dom'; +import { BrowserRouter as Router, Route, Routes, Link, Navigate } from 'react-router-dom'; import HomeScreen from './components/HomeScreen'; import Game from './components/Game'; @@ -28,15 +28,13 @@ function App() { Saber y Ganar - - - - - - - - - + + } /> + } /> + } /> + } /> + } /> + {/* @@ -56,17 +54,9 @@ function App() { ); } -const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => ( - - isAuthenticated ? ( - - ) : ( - - ) - } - /> -); + +/* function PrivateRoute({ isAuthenticated, ...props }) { + return isAuthenticated ? : ; +} */ export default App; From 5a5512a21b900b75a5d82c99bcceab09f4afa3c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pablo=20L=C3=B3pez=20Tamargo?= Date: Sun, 10 Mar 2024 11:15:20 +0100 Subject: [PATCH 4/6] Grid layout en pantalla game --- webapp/src/components/Game.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/webapp/src/components/Game.js b/webapp/src/components/Game.js index 4d9b2765..873822b5 100644 --- a/webapp/src/components/Game.js +++ b/webapp/src/components/Game.js @@ -1,5 +1,6 @@ import React, { useState } from 'react'; import { Container, styled } from '@mui/system'; +import Grid from '@mui/material/Grid'; const StyledContainer = styled(Container)({ textAlign: 'center', @@ -18,10 +19,20 @@ const StyledContainer = styled(Container)({ return (

Pregunta

+ + 1 + + 2 + + 3 + + 4 + + ); }; From d53d3ee7f1d6dfc54d03231c5bc9247751ab490d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pablo=20L=C3=B3pez=20Tamargo?= Date: Sun, 10 Mar 2024 17:32:28 +0100 Subject: [PATCH 5/6] Cambiar texto en la pagina game --- webapp/src/components/Game.js | 38 ++++++++++++++++++++++++++++++----- 1 file changed, 33 insertions(+), 5 deletions(-) diff --git a/webapp/src/components/Game.js b/webapp/src/components/Game.js index 873822b5..ca343def 100644 --- a/webapp/src/components/Game.js +++ b/webapp/src/components/Game.js @@ -16,21 +16,49 @@ const StyledContainer = styled(Container)({ }); const Game = () => { + const [textoPregunta, setTextoPregunta] = useState('Pregunta'); + const [textoBoton1, setTextoBoton1] = useState('Placeholder'); + const [textoBoton2, setTextoBoton2] = useState('Placeholder'); + const [textoBoton3, setTextoBoton3] = useState('Placeholder'); + const [textoBoton4, setTextoBoton4] = useState('Placeholder'); + + + + const cambiarTextoBoton1 = () => { + setTextoBoton('Prueba'); // Aquí iria la llamada a la función de preguntas + }; + + const cambiarTextoBoton2 = () => { + setTextoBoton('Prueba'); // Aquí iria la llamada a la función de preguntas + }; + + const cambiarTextoBoton3 = () => { + setTextoBoton('Prueba'); // Aquí iria la llamada a la función de preguntas + }; + + const cambiarTextoBoton4 = () => { + setTextoBoton('Prueba'); // Aquí iria la llamada a la función de preguntas + }; + + const cambiarTextoPregunta = () => { + setTextoPregunta('Prueba2'); // Llamada a la función + } + return ( -

Pregunta

+

{textoPregunta}

- 1 + {textoBoton1} - 2 + {textoBoton2} - 3 + {textoBoton3} - 4 + {textoBoton4} From cb87605f7681fdf2c49da987ac51ebdd7f488541 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pablo=20L=C3=B3pez=20Tamargo?= Date: Sun, 10 Mar 2024 17:43:51 +0100 Subject: [PATCH 6/6] Correccion rapida --- webapp/src/components/Game.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/webapp/src/components/Game.js b/webapp/src/components/Game.js index ca343def..4ccef69a 100644 --- a/webapp/src/components/Game.js +++ b/webapp/src/components/Game.js @@ -25,19 +25,19 @@ const StyledContainer = styled(Container)({ const cambiarTextoBoton1 = () => { - setTextoBoton('Prueba'); // Aquí iria la llamada a la función de preguntas + setTextoBoton1('Prueba'); // Aquí iria la llamada a la función de preguntas }; const cambiarTextoBoton2 = () => { - setTextoBoton('Prueba'); // Aquí iria la llamada a la función de preguntas + setTextoBoton2('Prueba'); // Aquí iria la llamada a la función de preguntas }; const cambiarTextoBoton3 = () => { - setTextoBoton('Prueba'); // Aquí iria la llamada a la función de preguntas + setTextoBoton3('Prueba'); // Aquí iria la llamada a la función de preguntas }; const cambiarTextoBoton4 = () => { - setTextoBoton('Prueba'); // Aquí iria la llamada a la función de preguntas + setTextoBoton4('Prueba'); // Aquí iria la llamada a la función de preguntas }; const cambiarTextoPregunta = () => {