From 749518bcbc6fc4be863dcd2425b9eb8f33cccda3 Mon Sep 17 00:00:00 2001 From: CANCI0 Date: Sun, 4 Feb 2024 15:22:50 +0100 Subject: [PATCH 01/20] =?UTF-8?q?Se=20ha=20ampliado=20el=20sistema=20de=20?= =?UTF-8?q?autenticaci=C3=B3n?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 441 +++++++++++++++++++++++++++++++ package.json | 5 + webapp/package-lock.json | 365 ++++++++++++++++++++++++- webapp/package.json | 3 + webapp/src/App.js | 66 ++--- webapp/src/components/Login.js | 30 ++- webapp/src/pages/Authenticate.js | 41 +++ webapp/src/pages/Clasico.js | 116 ++++++++ webapp/src/pages/Home.js | 13 + 9 files changed, 1033 insertions(+), 47 deletions(-) create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 webapp/src/pages/Authenticate.js create mode 100644 webapp/src/pages/Clasico.js create mode 100644 webapp/src/pages/Home.js diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 00000000..1c5472ed --- /dev/null +++ b/package-lock.json @@ -0,0 +1,441 @@ +{ + "name": "wiq_es1a", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "dependencies": { + "react-auth-kit": "^3.0.2-alpha.19" + } + }, + "node_modules/@next/env": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/@next/env/-/env-14.1.0.tgz", + "integrity": "sha512-Py8zIo+02ht82brwwhTg36iogzFqGLPXlRGKQw5s+qP/kMNc4MAyDeEwBKDijk6zTIbegEgu8Qy7C1LboslQAw==", + "peer": true + }, + "node_modules/@next/swc-darwin-arm64": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.1.0.tgz", + "integrity": "sha512-nUDn7TOGcIeyQni6lZHfzNoo9S0euXnu0jhsbMOmMJUBfgsnESdjN97kM7cBqQxZa8L/bM9om/S5/1dzCrW6wQ==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "darwin" + ], + "peer": true, + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-darwin-x64": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.1.0.tgz", + "integrity": "sha512-1jgudN5haWxiAl3O1ljUS2GfupPmcftu2RYJqZiMJmmbBT5M1XDffjUtRUzP4W3cBHsrvkfOFdQ71hAreNQP6g==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "darwin" + ], + "peer": true, + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm64-gnu": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.1.0.tgz", + "integrity": "sha512-RHo7Tcj+jllXUbK7xk2NyIDod3YcCPDZxj1WLIYxd709BQ7WuRYl3OWUNG+WUfqeQBds6kvZYlc42NJJTNi4tQ==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm64-musl": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.1.0.tgz", + "integrity": "sha512-v6kP8sHYxjO8RwHmWMJSq7VZP2nYCkRVQ0qolh2l6xroe9QjbgV8siTbduED4u0hlk0+tjS6/Tuy4n5XCp+l6g==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-x64-gnu": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.1.0.tgz", + "integrity": "sha512-zJ2pnoFYB1F4vmEVlb/eSe+VH679zT1VdXlZKX+pE66grOgjmKJHKacf82g/sWE4MQ4Rk2FMBCRnX+l6/TVYzQ==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-x64-musl": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.1.0.tgz", + "integrity": "sha512-rbaIYFt2X9YZBSbH/CwGAjbBG2/MrACCVu2X0+kSykHzHnYH5FjHxwXLkcoJ10cX0aWCEynpu+rP76x0914atg==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-arm64-msvc": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.1.0.tgz", + "integrity": "sha512-o1N5TsYc8f/HpGt39OUQpQ9AKIGApd3QLueu7hXk//2xq5Z9OxmV6sQfNp8C7qYmiOlHYODOGqNNa0e9jvchGQ==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "win32" + ], + "peer": true, + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-ia32-msvc": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.1.0.tgz", + "integrity": "sha512-XXIuB1DBRCFwNO6EEzCTMHT5pauwaSj4SWs7CYnME57eaReAKBXCnkUE80p/pAZcewm7hs+vGvNqDPacEXHVkw==", + "cpu": [ + "ia32" + ], + "optional": true, + "os": [ + "win32" + ], + "peer": true, + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-x64-msvc": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.1.0.tgz", + "integrity": "sha512-9WEbVRRAqJ3YFVqEZIxUqkiO8l1nool1LmNxygr5HWF8AcSYsEpneUDhmjUVJEzO2A04+oPtZdombzzPPkTtgg==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "win32" + ], + "peer": true, + "engines": { + "node": ">= 10" + } + }, + "node_modules/@swc/helpers": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz", + "integrity": "sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==", + "peer": true, + "dependencies": { + "tslib": "^2.4.0" + } + }, + "node_modules/busboy": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz", + "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==", + "peer": true, + "dependencies": { + "streamsearch": "^1.1.0" + }, + "engines": { + "node": ">=10.16.0" + } + }, + "node_modules/caniuse-lite": { + "version": "1.0.30001583", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001583.tgz", + "integrity": "sha512-acWTYaha8xfhA/Du/z4sNZjHUWjkiuoAi2LM+T/aL+kemKQgPT1xBb/YKjlQ0Qo8gvbHsGNplrEJ+9G3gL7i4Q==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "peer": true + }, + "node_modules/client-only": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", + "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==", + "peer": true + }, + "node_modules/graceful-fs": { + "version": "4.2.11", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", + "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", + "peer": true + }, + "node_modules/js-cookie": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz", + "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==", + "engines": { + "node": ">=14" + } + }, + "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==", + "peer": true + }, + "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==", + "peer": true, + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, + "node_modules/nanoid": { + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "peer": true, + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, + "node_modules/next": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/next/-/next-14.1.0.tgz", + "integrity": "sha512-wlzrsbfeSU48YQBjZhDzOwhWhGsy+uQycR8bHAOt1LY1bn3zZEcDyHQOEoN3aWzQ8LHCAJ1nqrWCc9XF2+O45Q==", + "peer": true, + "dependencies": { + "@next/env": "14.1.0", + "@swc/helpers": "0.5.2", + "busboy": "1.6.0", + "caniuse-lite": "^1.0.30001579", + "graceful-fs": "^4.2.11", + "postcss": "8.4.31", + "styled-jsx": "5.1.1" + }, + "bin": { + "next": "dist/bin/next" + }, + "engines": { + "node": ">=18.17.0" + }, + "optionalDependencies": { + "@next/swc-darwin-arm64": "14.1.0", + "@next/swc-darwin-x64": "14.1.0", + "@next/swc-linux-arm64-gnu": "14.1.0", + "@next/swc-linux-arm64-musl": "14.1.0", + "@next/swc-linux-x64-gnu": "14.1.0", + "@next/swc-linux-x64-musl": "14.1.0", + "@next/swc-win32-arm64-msvc": "14.1.0", + "@next/swc-win32-ia32-msvc": "14.1.0", + "@next/swc-win32-x64-msvc": "14.1.0" + }, + "peerDependencies": { + "@opentelemetry/api": "^1.1.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "sass": "^1.3.0" + }, + "peerDependenciesMeta": { + "@opentelemetry/api": { + "optional": true + }, + "sass": { + "optional": true + } + } + }, + "node_modules/picocolors": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", + "peer": true + }, + "node_modules/postcss": { + "version": "8.4.31", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", + "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "peer": true, + "dependencies": { + "nanoid": "^3.3.6", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/react": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-auth-kit": { + "version": "3.0.2-alpha.19", + "resolved": "https://registry.npmjs.org/react-auth-kit/-/react-auth-kit-3.0.2-alpha.19.tgz", + "integrity": "sha512-xZStv05wItit/AN2qgSErYCtpn9u8rr3cpgMxG8ZOkJMcYa4wvFPkYoAWT5rkOuP85fp9B0AqGb5tUen0B5yeg==", + "dependencies": { + "js-cookie": "^3.0.1", + "rxjs": "^7.8.1" + }, + "peerDependencies": { + "next": ">=13.0 || ^14.x", + "react": ">=16.8.0 || ^17.x || ^18.x", + "react-dom": ">=16.8.0 || ^17.x || ^18.x" + } + }, + "node_modules/react-dom": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", + "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0", + "scheduler": "^0.23.0" + }, + "peerDependencies": { + "react": "^18.2.0" + } + }, + "node_modules/rxjs": { + "version": "7.8.1", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz", + "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==", + "dependencies": { + "tslib": "^2.1.0" + } + }, + "node_modules/scheduler": { + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", + "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0" + } + }, + "node_modules/source-map-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "peer": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/streamsearch": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz", + "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==", + "peer": true, + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/styled-jsx": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz", + "integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==", + "peer": true, + "dependencies": { + "client-only": "0.0.1" + }, + "engines": { + "node": ">= 12.0.0" + }, + "peerDependencies": { + "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0" + }, + "peerDependenciesMeta": { + "@babel/core": { + "optional": true + }, + "babel-plugin-macros": { + "optional": true + } + } + }, + "node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 00000000..2d4da84c --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "react-auth-kit": "^3.0.2-alpha.19" + } +} diff --git a/webapp/package-lock.json b/webapp/package-lock.json index 27466aee..d3aef19f 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -8,6 +8,7 @@ "name": "webapp", "version": "0.1.0", "dependencies": { + "@auth-kit/react-router": "^3.0.2-alpha.19", "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", "@mui/material": "^5.15.3", @@ -16,7 +17,9 @@ "@testing-library/user-event": "^14.5.2", "axios": "^1.6.5", "react": "^18.2.0", + "react-auth-kit": "^3.0.2-alpha.19", "react-dom": "^18.2.0", + "react-router-dom": "^6.22.0", "react-scripts": "5.0.1", "web-vitals": "^3.5.1" }, @@ -68,6 +71,18 @@ "node": ">=6.0.0" } }, + "node_modules/@auth-kit/react-router": { + "version": "3.0.2-alpha.19", + "resolved": "https://registry.npmjs.org/@auth-kit/react-router/-/react-router-3.0.2-alpha.19.tgz", + "integrity": "sha512-EK69EVVJd6y84VwE8GqNQtui+fQhMlkkSiaTleW8fHR8i+N7Ydwjgq2gTPiZokEfKzTk0X5lp7/0KEIChXS6EQ==", + "dependencies": { + "react-auth-kit": "^3.0.2-alpha.19" + }, + "peerDependencies": { + "react": ">=16.8.0 || ^17.x || ^18.x", + "react-router": ">=6.x" + } + }, "node_modules/@babel/code-frame": { "version": "7.23.5", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz", @@ -4752,6 +4767,156 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" }, + "node_modules/@next/env": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/@next/env/-/env-14.1.0.tgz", + "integrity": "sha512-Py8zIo+02ht82brwwhTg36iogzFqGLPXlRGKQw5s+qP/kMNc4MAyDeEwBKDijk6zTIbegEgu8Qy7C1LboslQAw==", + "peer": true + }, + "node_modules/@next/swc-darwin-arm64": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.1.0.tgz", + "integrity": "sha512-nUDn7TOGcIeyQni6lZHfzNoo9S0euXnu0jhsbMOmMJUBfgsnESdjN97kM7cBqQxZa8L/bM9om/S5/1dzCrW6wQ==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "darwin" + ], + "peer": true, + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-darwin-x64": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.1.0.tgz", + "integrity": "sha512-1jgudN5haWxiAl3O1ljUS2GfupPmcftu2RYJqZiMJmmbBT5M1XDffjUtRUzP4W3cBHsrvkfOFdQ71hAreNQP6g==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "darwin" + ], + "peer": true, + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm64-gnu": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.1.0.tgz", + "integrity": "sha512-RHo7Tcj+jllXUbK7xk2NyIDod3YcCPDZxj1WLIYxd709BQ7WuRYl3OWUNG+WUfqeQBds6kvZYlc42NJJTNi4tQ==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm64-musl": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.1.0.tgz", + "integrity": "sha512-v6kP8sHYxjO8RwHmWMJSq7VZP2nYCkRVQ0qolh2l6xroe9QjbgV8siTbduED4u0hlk0+tjS6/Tuy4n5XCp+l6g==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-x64-gnu": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.1.0.tgz", + "integrity": "sha512-zJ2pnoFYB1F4vmEVlb/eSe+VH679zT1VdXlZKX+pE66grOgjmKJHKacf82g/sWE4MQ4Rk2FMBCRnX+l6/TVYzQ==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-x64-musl": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.1.0.tgz", + "integrity": "sha512-rbaIYFt2X9YZBSbH/CwGAjbBG2/MrACCVu2X0+kSykHzHnYH5FjHxwXLkcoJ10cX0aWCEynpu+rP76x0914atg==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-arm64-msvc": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.1.0.tgz", + "integrity": "sha512-o1N5TsYc8f/HpGt39OUQpQ9AKIGApd3QLueu7hXk//2xq5Z9OxmV6sQfNp8C7qYmiOlHYODOGqNNa0e9jvchGQ==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "win32" + ], + "peer": true, + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-ia32-msvc": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.1.0.tgz", + "integrity": "sha512-XXIuB1DBRCFwNO6EEzCTMHT5pauwaSj4SWs7CYnME57eaReAKBXCnkUE80p/pAZcewm7hs+vGvNqDPacEXHVkw==", + "cpu": [ + "ia32" + ], + "optional": true, + "os": [ + "win32" + ], + "peer": true, + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-x64-msvc": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.1.0.tgz", + "integrity": "sha512-9WEbVRRAqJ3YFVqEZIxUqkiO8l1nool1LmNxygr5HWF8AcSYsEpneUDhmjUVJEzO2A04+oPtZdombzzPPkTtgg==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "win32" + ], + "peer": true, + "engines": { + "node": ">= 10" + } + }, "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": { "version": "5.1.1-v1", "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz", @@ -5005,6 +5170,14 @@ "node": ">=12" } }, + "node_modules/@remix-run/router": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.0.tgz", + "integrity": "sha512-HOil5aFtme37dVQTB6M34G95kPM3MMuqSmIRVCC52eKV+Y/tGSqw9P3rWhlAx6A+mz+MoX+XxsGsNJbaI5qCgQ==", + "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", @@ -5354,6 +5527,15 @@ "url": "https://github.com/sponsors/gregberge" } }, + "node_modules/@swc/helpers": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz", + "integrity": "sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==", + "peer": true, + "dependencies": { + "tslib": "^2.4.0" + } + }, "node_modules/@testing-library/dom": { "version": "9.3.3", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.3.tgz", @@ -7729,6 +7911,18 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/busboy": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz", + "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==", + "peer": true, + "dependencies": { + "streamsearch": "^1.1.0" + }, + "engines": { + "node": ">=10.16.0" + } + }, "node_modules/bytes": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", @@ -7818,9 +8012,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001576", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001576.tgz", - "integrity": "sha512-ff5BdakGe2P3SQsMsiqmt1Lc8221NR1VzHj5jXN5vBny9A6fpze94HiVV/n7XRosOlsShJcvMv5mdnpjOGCEgg==", + "version": "1.0.30001583", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001583.tgz", + "integrity": "sha512-acWTYaha8xfhA/Du/z4sNZjHUWjkiuoAi2LM+T/aL+kemKQgPT1xBb/YKjlQ0Qo8gvbHsGNplrEJ+9G3gL7i4Q==", "funding": [ { "type": "opencollective", @@ -8124,6 +8318,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/client-only": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", + "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==", + "peer": true + }, "node_modules/clipboardy": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-3.0.0.tgz", @@ -18233,6 +18433,14 @@ "@sideway/pinpoint": "^2.0.0" } }, + "node_modules/js-cookie": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz", + "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==", + "engines": { + "node": ">=14" + } + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -19207,6 +19415,80 @@ "node": ">=12.22.0" } }, + "node_modules/next": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/next/-/next-14.1.0.tgz", + "integrity": "sha512-wlzrsbfeSU48YQBjZhDzOwhWhGsy+uQycR8bHAOt1LY1bn3zZEcDyHQOEoN3aWzQ8LHCAJ1nqrWCc9XF2+O45Q==", + "peer": true, + "dependencies": { + "@next/env": "14.1.0", + "@swc/helpers": "0.5.2", + "busboy": "1.6.0", + "caniuse-lite": "^1.0.30001579", + "graceful-fs": "^4.2.11", + "postcss": "8.4.31", + "styled-jsx": "5.1.1" + }, + "bin": { + "next": "dist/bin/next" + }, + "engines": { + "node": ">=18.17.0" + }, + "optionalDependencies": { + "@next/swc-darwin-arm64": "14.1.0", + "@next/swc-darwin-x64": "14.1.0", + "@next/swc-linux-arm64-gnu": "14.1.0", + "@next/swc-linux-arm64-musl": "14.1.0", + "@next/swc-linux-x64-gnu": "14.1.0", + "@next/swc-linux-x64-musl": "14.1.0", + "@next/swc-win32-arm64-msvc": "14.1.0", + "@next/swc-win32-ia32-msvc": "14.1.0", + "@next/swc-win32-x64-msvc": "14.1.0" + }, + "peerDependencies": { + "@opentelemetry/api": "^1.1.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "sass": "^1.3.0" + }, + "peerDependenciesMeta": { + "@opentelemetry/api": { + "optional": true + }, + "sass": { + "optional": true + } + } + }, + "node_modules/next/node_modules/postcss": { + "version": "8.4.31", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", + "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "peer": true, + "dependencies": { + "nanoid": "^3.3.6", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, "node_modules/nice-try": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", @@ -21862,6 +22144,20 @@ "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" }, + "node_modules/react-auth-kit": { + "version": "3.0.2-alpha.19", + "resolved": "https://registry.npmjs.org/react-auth-kit/-/react-auth-kit-3.0.2-alpha.19.tgz", + "integrity": "sha512-xZStv05wItit/AN2qgSErYCtpn9u8rr3cpgMxG8ZOkJMcYa4wvFPkYoAWT5rkOuP85fp9B0AqGb5tUen0B5yeg==", + "dependencies": { + "js-cookie": "^3.0.1", + "rxjs": "^7.8.1" + }, + "peerDependencies": { + "next": ">=13.0 || ^14.x", + "react": ">=16.8.0 || ^17.x || ^18.x", + "react-dom": ">=16.8.0 || ^17.x || ^18.x" + } + }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -22009,6 +22305,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.22.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.0.tgz", + "integrity": "sha512-q2yemJeg6gw/YixRlRnVx6IRJWZD6fonnfZhN1JIOhV2iJCPeRNSH3V1ISwHf+JWcESzLC3BOLD1T07tmO5dmg==", + "dependencies": { + "@remix-run/router": "1.15.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.22.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.0.tgz", + "integrity": "sha512-z2w+M4tH5wlcLmH3BMMOMdrtrJ9T3oJJNsAlBJbwk+8Syxd5WFJ7J5dxMEW0/GEXD1BBis4uXRrNIz3mORr0ag==", + "dependencies": { + "@remix-run/router": "1.15.0", + "react-router": "6.22.0" + }, + "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", @@ -23755,7 +24081,6 @@ "version": "7.8.1", "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz", "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==", - "dev": true, "dependencies": { "tslib": "^2.1.0" } @@ -25246,6 +25571,15 @@ "duplexer": "~0.1.1" } }, + "node_modules/streamsearch": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz", + "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==", + "peer": true, + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/streamx": { "version": "2.15.6", "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.15.6.tgz", @@ -25485,6 +25819,29 @@ "webpack": "^5.0.0" } }, + "node_modules/styled-jsx": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz", + "integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==", + "peer": true, + "dependencies": { + "client-only": "0.0.1" + }, + "engines": { + "node": ">= 12.0.0" + }, + "peerDependencies": { + "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0" + }, + "peerDependenciesMeta": { + "@babel/core": { + "optional": true + }, + "babel-plugin-macros": { + "optional": true + } + } + }, "node_modules/stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz", diff --git a/webapp/package.json b/webapp/package.json index 74e31bee..44fe9415 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "@auth-kit/react-router": "^3.0.2-alpha.19", "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", "@mui/material": "^5.15.3", @@ -11,7 +12,9 @@ "@testing-library/user-event": "^14.5.2", "axios": "^1.6.5", "react": "^18.2.0", + "react-auth-kit": "^3.0.2-alpha.19", "react-dom": "^18.2.0", + "react-router-dom": "^6.22.0", "react-scripts": "5.0.1", "web-vitals": "^3.5.1" }, diff --git a/webapp/src/App.js b/webapp/src/App.js index d932005b..0dd8fe91 100644 --- a/webapp/src/App.js +++ b/webapp/src/App.js @@ -1,38 +1,38 @@ import React, { useState } from 'react'; -import AddUser from './components/AddUser'; -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 Authenticate from './pages/Authenticate'; +import Home from './pages/Home.js'; +import Clasico from './pages/Authenticate'; -function App() { - const [showLogin, setShowLogin] = useState(true); +import {BrowserRouter, Routes, Route} from "react-router-dom"; +import AuthProvider from 'react-auth-kit'; +import AuthOutlet from '@auth-kit/react-router/AuthOutlet'; +import createStore from 'react-auth-kit/createStore'; - const handleToggleView = () => { - setShowLogin(!showLogin); - }; - - return ( - - - - Welcome to the 2024 edition of the Software Architecture course - - {showLogin ? : } - - {showLogin ? ( - - Don't have an account? Register here. - - ) : ( - - Already have an account? Login here. - - )} - - - ); -} +const store = createStore({ + authName:'_auth', + authType:'cookie', + cookieDomain: window.location.hostname, + cookieSecure: window.location.protocol === 'https:' +}) + + const App = () => { + + return ( + + + + {/** Rutas públicas */} + }/> + + {/** Rutas privadas */} + }> + } /> + } /> + + + + + ); + }; export default App; diff --git a/webapp/src/components/Login.js b/webapp/src/components/Login.js index 0ad6268e..df9ba7ca 100644 --- a/webapp/src/components/Login.js +++ b/webapp/src/components/Login.js @@ -2,30 +2,47 @@ import React, { useState } from 'react'; import axios from 'axios'; import { Container, Typography, TextField, Button, Snackbar } from '@mui/material'; +import { useNavigate } from "react-router-dom"; +import useSignIn from 'react-auth-kit/hooks/useSignIn'; const Login = () => { + const signIn = useSignIn(); const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); + const [token, setToken] = useState(''); const [error, setError] = useState(''); const [loginSuccess, setLoginSuccess] = useState(false); const [createdAt, setCreatedAt] = useState(''); const [openSnackbar, setOpenSnackbar] = useState(false); + const navigate = useNavigate(); + const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000'; const loginUser = async () => { try { const response = await axios.post(`${apiEndpoint}/login`, { username, password }); - + console.log(response); // Extract data from the response const { createdAt: userCreatedAt } = response.data; + setToken(response.data.token); + + signIn({ + auth: { + token: token + }, + userState: {name: username} + }) setCreatedAt(userCreatedAt); setLoginSuccess(true); setOpenSnackbar(true); + + navigate('/home') } catch (error) { - setError(error.response.data.error); + //console.log(error); + //setError(error.response.data.error); } }; @@ -36,14 +53,7 @@ const Login = () => { return ( {loginSuccess ? ( -
- - Hello {username}! - - - Your account was created on {new Date(createdAt).toLocaleDateString()}. - -
+ navigate('../home') ) : (
diff --git a/webapp/src/pages/Authenticate.js b/webapp/src/pages/Authenticate.js new file mode 100644 index 00000000..d48f2e19 --- /dev/null +++ b/webapp/src/pages/Authenticate.js @@ -0,0 +1,41 @@ +import React, { useState } from 'react'; +import AddUser from '../components/AddUser'; +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, Redirect } from 'react-router-dom'; +import { PrivateRoute, useAuth } from 'react-auth-kit'; + +function Authenticate() { + const [showLogin, setShowLogin] = useState(true); + + const handleToggleView = () => { + setShowLogin(!showLogin); + }; + + return ( + + + + Bienvenido a WIQ + + {showLogin ? : } + + {showLogin ? ( + + ¿No tienes cuenta? Regístrate. + + ) : ( + + Ya tienes cuenta? Inicia sesión. + + )} + + + ); +} + +export default Authenticate; diff --git a/webapp/src/pages/Clasico.js b/webapp/src/pages/Clasico.js new file mode 100644 index 00000000..1368e1ea --- /dev/null +++ b/webapp/src/pages/Clasico.js @@ -0,0 +1,116 @@ +import React, { useState, useEffect } from 'react'; +import '../css/JuegoPreguntas.css'; +import Preguntas from '../components/Preguntas'; +import { useNavigate } from 'react-router-dom'; + +const JuegoPreguntas = () => { + const [indicePregunta, setIndicePregunta] = useState(0); + const [puntuacion, setPuntuacion] = useState(0); + const [respuestaSeleccionada, setRespuestaSeleccionada] = useState(null); + const [tiempoRestante, setTiempoRestante] = useState(10); + const [juegoTerminado, setJuegoTerminado] = useState(false); + const [mostrarMenu, setMostrarMenu] = useState(false); // Estado para mostrar el menú al finalizar el juego + const preguntaActual = Preguntas[indicePregunta]; + const navigate = useNavigate(); + + useEffect(() => { + if (tiempoRestante === 0) { + setTimeout(() => { + handleSiguientePregunta(); + }, 3000); + } + const timer = setInterval(() => { + setTiempoRestante(prevTiempo => prevTiempo <= 0 ? 0 : prevTiempo - 1); + }, 1000); + return () => clearInterval(timer); + }, [tiempoRestante, indicePregunta]); + + useEffect(() => { + if (juegoTerminado) { + // Detener el juego y mostrar el menú al finalizar el juego + setMostrarMenu(true); + } + }, [juegoTerminado]); + + const handleRespuestaSeleccionada = (respuesta) => { + if (!juegoTerminado) { + setRespuestaSeleccionada(respuesta); + } + }; + + const estiloRespuesta = (respuesta) => { + if (juegoTerminado) { + if (respuesta === preguntaActual.respuestaCorrecta) { + return { backgroundColor: 'green' }; + } else if (respuesta === respuestaSeleccionada) { + return { backgroundColor: 'red' }; + } + } else { + if (respuesta === respuestaSeleccionada) { + return { backgroundColor: 'orange' }; + } + } + return {}; + }; + + const handleSiguientePregunta = () => { + if (respuestaSeleccionada === preguntaActual.respuestaCorrecta) { + setPuntuacion(puntuacion + 1); + } + setRespuestaSeleccionada(null); + setTiempoRestante(10); + if (indicePregunta + 1 < Preguntas.length) { + setIndicePregunta(indicePregunta + 1); + } else { + setJuegoTerminado(true); + } + }; + + const handleRepetirJuego = () => { + // Reiniciar el estado para repetir el juego + setIndicePregunta(0); + setPuntuacion(0); + setRespuestaSeleccionada(null); + setTiempoRestante(10); + setJuegoTerminado(false); + setMostrarMenu(false); + }; + + const handleVolverAlMenu = () => { + navigate('../home'); + }; + + if (mostrarMenu) { + return ( +
+

¡Juego terminado!

+

Tu puntuación: {puntuacion}/{Preguntas.length}

+ + +
+ ); + } + + return ( +
+

Pregunta {indicePregunta + 1}:

+

{preguntaActual.pregunta}

+
+ {preguntaActual.respuestas.map((respuesta, index) => ( + + ))} +
+
Tiempo restante: {tiempoRestante}
+
Puntuación: {puntuacion}
+
+ ); +}; + +export default JuegoPreguntas; diff --git a/webapp/src/pages/Home.js b/webapp/src/pages/Home.js new file mode 100644 index 00000000..e6c8d5c5 --- /dev/null +++ b/webapp/src/pages/Home.js @@ -0,0 +1,13 @@ +import React from 'react'; +import { Link } from "react-router-dom"; + +const Home = () => { + return ( + <> +

Bienvenido a WIQ. Selecciona un modo de juego

+ + + ) +} + +export default Home; \ No newline at end of file From ee0bb83038903dcb12591f9be50619b599a0fe2e Mon Sep 17 00:00:00 2001 From: CANCI0 Date: Sun, 4 Feb 2024 15:47:27 +0100 Subject: [PATCH 02/20] Solucionado error con imports --- webapp/src/App.js | 2 +- webapp/src/components/Login.js | 9 ++++- webapp/src/components/Preguntas.js | 56 ++++++++++++++++++++++++++++++ webapp/src/css/JuegoPreguntas.css | 56 ++++++++++++++++++++++++++++++ 4 files changed, 121 insertions(+), 2 deletions(-) create mode 100644 webapp/src/components/Preguntas.js create mode 100644 webapp/src/css/JuegoPreguntas.css diff --git a/webapp/src/App.js b/webapp/src/App.js index 0dd8fe91..867fc4e1 100644 --- a/webapp/src/App.js +++ b/webapp/src/App.js @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import Authenticate from './pages/Authenticate'; import Home from './pages/Home.js'; -import Clasico from './pages/Authenticate'; +import Clasico from './pages/Clasico.js'; import {BrowserRouter, Routes, Route} from "react-router-dom"; import AuthProvider from 'react-auth-kit'; diff --git a/webapp/src/components/Login.js b/webapp/src/components/Login.js index df9ba7ca..85123322 100644 --- a/webapp/src/components/Login.js +++ b/webapp/src/components/Login.js @@ -53,7 +53,14 @@ const Login = () => { return ( {loginSuccess ? ( - navigate('../home') +
+ + Hello {username}! + + + Your account was created on {new Date(createdAt).toLocaleDateString()}. + +
) : (
diff --git a/webapp/src/components/Preguntas.js b/webapp/src/components/Preguntas.js new file mode 100644 index 00000000..3083f529 --- /dev/null +++ b/webapp/src/components/Preguntas.js @@ -0,0 +1,56 @@ +const Preguntas = [ + { + pregunta: "¿Cuál es la capital de Francia?", + respuestas: ["Londres", "París", "Madrid", "Roma"], + respuestaCorrecta: "París" + }, + { + pregunta: "¿Cuál es el río más largo del mundo?", + respuestas: ["Amazonas", "Nilo", "Misisipi", "Yangtsé"], + respuestaCorrecta: "Amazonas" + } + //, + // { + // pregunta: "¿Cuál es el océano más grande?", + // respuestas: ["Pacífico", "Atlántico", "Índico", "Ártico"], + // respuestaCorrecta: "Pacífico" + // }, + // { + // pregunta: "¿Quién escribió 'Don Quijote de la Mancha'?", + // respuestas: ["Miguel de Cervantes", "Gabriel García Márquez", "William Shakespeare", "Leo Tolstoy"], + // respuestaCorrecta: "Miguel de Cervantes" + // }, + // { + // pregunta: "¿Cuál es el elemento más abundante en la Tierra?", + // respuestas: ["Hierro", "Oxígeno", "Hidrógeno", "Silicio"], + // respuestaCorrecta: "Oxígeno" + // }, + // { + // pregunta: "¿Cuál es el país más poblado del mundo?", + // respuestas: ["India", "China", "Estados Unidos", "Brasil"], + // respuestaCorrecta: "China" + // }, + // { + // pregunta: "¿Quién pintó la 'Mona Lisa'?", + // respuestas: ["Leonardo da Vinci", "Pablo Picasso", "Vincent van Gogh", "Rembrandt"], + // respuestaCorrecta: "Leonardo da Vinci" + // }, + // { + // pregunta: "¿Cuál es el hueso más largo del cuerpo humano?", + // respuestas: ["Fémur", "Tibia", "Húmero", "Radio"], + // respuestaCorrecta: "Fémur" + // }, + // { + // pregunta: "¿Quién fue el primer presidente de Estados Unidos?", + // respuestas: ["George Washington", "Thomas Jefferson", "Abraham Lincoln", "John Adams"], + // respuestaCorrecta: "George Washington" + // }, + // { + // pregunta: "¿Cuál es la montaña más alta del mundo?", + // respuestas: ["Monte Everest", "Monte Kilimanjaro", "Monte McKinley", "Monte Aconcagua"], + // respuestaCorrecta: "Monte Everest" + // } +]; + +export default Preguntas; + \ No newline at end of file diff --git a/webapp/src/css/JuegoPreguntas.css b/webapp/src/css/JuegoPreguntas.css new file mode 100644 index 00000000..95dce8d4 --- /dev/null +++ b/webapp/src/css/JuegoPreguntas.css @@ -0,0 +1,56 @@ +body{ + font-family: "Consolas", sans-serif; +} + +.container h1{ + text-align: center; +} + +.questionContainer{ + display: grid; + justify-content: center; + align-items: center; +} + +.responsesContainer { + display: grid; + justify-content: center; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); + gap: 1rem; +} + +/* CSS */ +.responsesContainer button { + appearance: none; + background-color: transparent; + border: 0.13rem solid #0F0F0F; + border-radius: 15px; + box-sizing: border-box; + color: #0F0F0F; + padding: 1rem; + text-align: center; + text-decoration: none; + transition: all 300ms cubic-bezier(.23, 1, 0.32, 1); + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + width: 100%; + will-change: transform; +} + +.responsesContainer button:disabled { + pointer-events: none; +} + +.responsesContainer button:hover { + color: #fff; + background-color: #1A1A1A; + box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px; + transform: translateY(-2px); +} + +.responsesContainer button:active { + box-shadow: none; + transform: translateY(0); +} \ No newline at end of file From af4cf09c4d43b59d00bc341e4913639dc2d95f4d Mon Sep 17 00:00:00 2001 From: CANCI0 Date: Sun, 4 Feb 2024 16:40:24 +0100 Subject: [PATCH 03/20] =?UTF-8?q?Reorganizaci=C3=B3n=20de=20paquetes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- webapp/src/App.css | 25 +++++++++ webapp/src/App.js | 7 +-- webapp/src/components/Login/Login.css | 9 ++++ webapp/src/components/{ => Login}/Login.js | 54 ++++++++++--------- .../src/components/{ => Login}/Login.test.js | 0 .../{AddUser.js => Register/Register.js} | 0 .../Register.test.js} | 0 .../pages/{ => Authenticate}/Authenticate.js | 4 +- .../Clasico/Clasico.css} | 0 webapp/src/pages/{ => Clasico}/Clasico.js | 5 +- webapp/src/pages/Home.js | 13 ----- webapp/src/pages/Home/Home.css | 0 webapp/src/pages/Home/Home.js | 20 +++++++ 13 files changed, 91 insertions(+), 46 deletions(-) create mode 100644 webapp/src/components/Login/Login.css rename webapp/src/components/{ => Login}/Login.js (67%) rename webapp/src/components/{ => Login}/Login.test.js (100%) rename webapp/src/components/{AddUser.js => Register/Register.js} (100%) rename webapp/src/components/{AddUser.test.js => Register/Register.test.js} (100%) rename webapp/src/pages/{ => Authenticate}/Authenticate.js (92%) rename webapp/src/{css/JuegoPreguntas.css => pages/Clasico/Clasico.css} (100%) rename webapp/src/pages/{ => Clasico}/Clasico.js (95%) delete mode 100644 webapp/src/pages/Home.js create mode 100644 webapp/src/pages/Home/Home.css create mode 100644 webapp/src/pages/Home/Home.js diff --git a/webapp/src/App.css b/webapp/src/App.css index 74b5e053..ec289d7d 100644 --- a/webapp/src/App.css +++ b/webapp/src/App.css @@ -36,3 +36,28 @@ transform: rotate(360deg); } } + +input, button { + appearance: none; + background-color: transparent; + border: 0.13rem solid #0F0F0F; + border-radius: 15px; + box-sizing: border-box; + color: #0F0F0F; + padding: 1rem; + text-align: center; + text-decoration: none; + transition: all 300ms cubic-bezier(.23, 1, 0.32, 1); + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + width: 100%; + will-change: transform; +} + +button:hover { + color: #fff; + background-color: #1A1A1A; + box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px; + transform: translateY(-2px); +} diff --git a/webapp/src/App.js b/webapp/src/App.js index 867fc4e1..ed0e08c6 100644 --- a/webapp/src/App.js +++ b/webapp/src/App.js @@ -1,7 +1,8 @@ import React, { useState } from 'react'; -import Authenticate from './pages/Authenticate'; -import Home from './pages/Home.js'; -import Clasico from './pages/Clasico.js'; +import Authenticate from './pages/Authenticate/Authenticate.js'; +import Home from './pages/Home/Home.js'; +import Clasico from './pages/Clasico/Clasico.js'; +import './App.css'; import {BrowserRouter, Routes, Route} from "react-router-dom"; import AuthProvider from 'react-auth-kit'; diff --git a/webapp/src/components/Login/Login.css b/webapp/src/components/Login/Login.css new file mode 100644 index 00000000..5fc0993d --- /dev/null +++ b/webapp/src/components/Login/Login.css @@ -0,0 +1,9 @@ +.login-container { + display: grid; + grid-template-columns: 1fr; + gap: 1rem; +} + +.login-container h1{ + text-align: center; +} \ No newline at end of file diff --git a/webapp/src/components/Login.js b/webapp/src/components/Login/Login.js similarity index 67% rename from webapp/src/components/Login.js rename to webapp/src/components/Login/Login.js index 85123322..e6a85166 100644 --- a/webapp/src/components/Login.js +++ b/webapp/src/components/Login/Login.js @@ -4,6 +4,7 @@ import axios from 'axios'; import { Container, Typography, TextField, Button, Snackbar } from '@mui/material'; import { useNavigate } from "react-router-dom"; import useSignIn from 'react-auth-kit/hooks/useSignIn'; +import './Login.css'; const Login = () => { const signIn = useSignIn(); @@ -51,47 +52,50 @@ const Login = () => { }; return ( - +
{loginSuccess ? (
- +

Hello {username}! - - +

+

Your account was created on {new Date(createdAt).toLocaleDateString()}. - +

) : ( -
- - Login - - +

Login

+ setUsername(e.target.value)} /> - setPassword(e.target.value)} /> - - + + {openSnackbar && ( +
+ Login successful +
+ )} {error && ( - setError('')} message={`Error: ${error}`} /> +
+ Error: {error} +
)} -
+ )} - - ); -}; +
+ ) +} export default Login; diff --git a/webapp/src/components/Login.test.js b/webapp/src/components/Login/Login.test.js similarity index 100% rename from webapp/src/components/Login.test.js rename to webapp/src/components/Login/Login.test.js diff --git a/webapp/src/components/AddUser.js b/webapp/src/components/Register/Register.js similarity index 100% rename from webapp/src/components/AddUser.js rename to webapp/src/components/Register/Register.js diff --git a/webapp/src/components/AddUser.test.js b/webapp/src/components/Register/Register.test.js similarity index 100% rename from webapp/src/components/AddUser.test.js rename to webapp/src/components/Register/Register.test.js diff --git a/webapp/src/pages/Authenticate.js b/webapp/src/pages/Authenticate/Authenticate.js similarity index 92% rename from webapp/src/pages/Authenticate.js rename to webapp/src/pages/Authenticate/Authenticate.js index d48f2e19..b86167b5 100644 --- a/webapp/src/pages/Authenticate.js +++ b/webapp/src/pages/Authenticate/Authenticate.js @@ -1,6 +1,6 @@ import React, { useState } from 'react'; -import AddUser from '../components/AddUser'; -import Login from '../components/Login'; +import AddUser from '../../components/Register/Register'; +import Login from '../../components/Login/Login'; import CssBaseline from '@mui/material/CssBaseline'; import Container from '@mui/material/Container'; import Typography from '@mui/material/Typography'; diff --git a/webapp/src/css/JuegoPreguntas.css b/webapp/src/pages/Clasico/Clasico.css similarity index 100% rename from webapp/src/css/JuegoPreguntas.css rename to webapp/src/pages/Clasico/Clasico.css diff --git a/webapp/src/pages/Clasico.js b/webapp/src/pages/Clasico/Clasico.js similarity index 95% rename from webapp/src/pages/Clasico.js rename to webapp/src/pages/Clasico/Clasico.js index 1368e1ea..784d5f6c 100644 --- a/webapp/src/pages/Clasico.js +++ b/webapp/src/pages/Clasico/Clasico.js @@ -1,6 +1,6 @@ import React, { useState, useEffect } from 'react'; -import '../css/JuegoPreguntas.css'; -import Preguntas from '../components/Preguntas'; +import './Clasico.css'; +import Preguntas from '../../components/Preguntas'; import { useNavigate } from 'react-router-dom'; const JuegoPreguntas = () => { @@ -27,7 +27,6 @@ const JuegoPreguntas = () => { useEffect(() => { if (juegoTerminado) { - // Detener el juego y mostrar el menú al finalizar el juego setMostrarMenu(true); } }, [juegoTerminado]); diff --git a/webapp/src/pages/Home.js b/webapp/src/pages/Home.js deleted file mode 100644 index e6c8d5c5..00000000 --- a/webapp/src/pages/Home.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { Link } from "react-router-dom"; - -const Home = () => { - return ( - <> -

Bienvenido a WIQ. Selecciona un modo de juego

- - - ) -} - -export default Home; \ No newline at end of file diff --git a/webapp/src/pages/Home/Home.css b/webapp/src/pages/Home/Home.css new file mode 100644 index 00000000..e69de29b diff --git a/webapp/src/pages/Home/Home.js b/webapp/src/pages/Home/Home.js new file mode 100644 index 00000000..37bd266c --- /dev/null +++ b/webapp/src/pages/Home/Home.js @@ -0,0 +1,20 @@ +import React from 'react'; +import './Home.css'; +import { Link } from "react-router-dom"; + +const Home = () => { + return ( + <> +

Bienvenido a WIQ. Selecciona un modo de juego

+ + + ) +} + +export default Home; \ No newline at end of file From fa005ee707bb9c1f3915ad1526b0e1f1558ed9af Mon Sep 17 00:00:00 2001 From: CANCI0 Date: Sun, 4 Feb 2024 17:46:49 +0100 Subject: [PATCH 04/20] Mejoras en la interfaz --- webapp/src/App.css | 42 ++++------------------ webapp/src/App.js | 4 ++- webapp/src/pages/Home/Home.css | 19 ++++++++++ webapp/src/pages/Home/Home.js | 14 ++++---- webapp/src/pages/WrongRoute/WrongRoute.css | 23 ++++++++++++ webapp/src/pages/WrongRoute/WrongRoute.js | 13 +++++++ 6 files changed, 72 insertions(+), 43 deletions(-) create mode 100644 webapp/src/pages/WrongRoute/WrongRoute.css create mode 100644 webapp/src/pages/WrongRoute/WrongRoute.js diff --git a/webapp/src/App.css b/webapp/src/App.css index ec289d7d..e4322e48 100644 --- a/webapp/src/App.css +++ b/webapp/src/App.css @@ -1,43 +1,15 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; +#root{ + height: 90vh; display: flex; - flex-direction: column; - align-items: center; justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; + align-items: center; } -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +h1{ + text-align: center; } -input, button { +input, button, a{ appearance: none; background-color: transparent; border: 0.13rem solid #0F0F0F; @@ -55,7 +27,7 @@ input, button { will-change: transform; } -button:hover { +input:hover, button:hover, a:hover { color: #fff; background-color: #1A1A1A; box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px; diff --git a/webapp/src/App.js b/webapp/src/App.js index ed0e08c6..c37a947f 100644 --- a/webapp/src/App.js +++ b/webapp/src/App.js @@ -2,6 +2,7 @@ import React, { useState } from 'react'; import Authenticate from './pages/Authenticate/Authenticate.js'; import Home from './pages/Home/Home.js'; import Clasico from './pages/Clasico/Clasico.js'; +import WrongRoute from './pages/WrongRoute/WrongRoute.js'; import './App.css'; import {BrowserRouter, Routes, Route} from "react-router-dom"; @@ -17,7 +18,6 @@ const store = createStore({ }) const App = () => { - return ( @@ -30,6 +30,8 @@ const store = createStore({ } /> } /> + + } /> diff --git a/webapp/src/pages/Home/Home.css b/webapp/src/pages/Home/Home.css index e69de29b..d0ed1793 100644 --- a/webapp/src/pages/Home/Home.css +++ b/webapp/src/pages/Home/Home.css @@ -0,0 +1,19 @@ +.games-container{ + display: grid; + grid-template-columns: 1fr; + justify-content: center; +} + +ul{ + display: grid; + grid-template-columns: 1fr; + list-style-type: none; + text-align: center; + gap: 1rem; + width: 50%; + margin: auto; +} + +ul li{ + text-decoration: none; +} \ No newline at end of file diff --git a/webapp/src/pages/Home/Home.js b/webapp/src/pages/Home/Home.js index 37bd266c..f1a73e61 100644 --- a/webapp/src/pages/Home/Home.js +++ b/webapp/src/pages/Home/Home.js @@ -4,16 +4,16 @@ import { Link } from "react-router-dom"; const Home = () => { return ( - <> + ) } diff --git a/webapp/src/pages/WrongRoute/WrongRoute.css b/webapp/src/pages/WrongRoute/WrongRoute.css new file mode 100644 index 00000000..3578e4c9 --- /dev/null +++ b/webapp/src/pages/WrongRoute/WrongRoute.css @@ -0,0 +1,23 @@ +.notFoundContainer{ + align-self: center; + grid-template-columns: 1fr; +} + +.notFoundContainer h1, .notFoundContainer p{ + font-family: montserrat, sans-serif; + font-size: 5rem; + font-weight: 900; + text-align: center; + +} + +.notFoundContainer h1{ + font-size: 20vw; + text-shadow: -4px -4px 0px #00FFC0; + margin: 0; +} + +.notFoundContainer p{ + font-size: 5vw; + color: #0F0F0F; +} \ No newline at end of file diff --git a/webapp/src/pages/WrongRoute/WrongRoute.js b/webapp/src/pages/WrongRoute/WrongRoute.js new file mode 100644 index 00000000..a71df000 --- /dev/null +++ b/webapp/src/pages/WrongRoute/WrongRoute.js @@ -0,0 +1,13 @@ +import React from 'react'; +import './WrongRoute.css'; + +const WrongRoute = () => { + return( +
+

404

+

Página no encontrada

+
+ ); +} + +export default WrongRoute; \ No newline at end of file From 71b58195cb128b36c10aa43ef9b0ea8a30b36ce4 Mon Sep 17 00:00:00 2001 From: CANCI0 Date: Sun, 4 Feb 2024 17:52:16 +0100 Subject: [PATCH 05/20] Rutas del menu arregladas --- webapp/src/pages/Home/Home.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/webapp/src/pages/Home/Home.js b/webapp/src/pages/Home/Home.js index f1a73e61..712ef196 100644 --- a/webapp/src/pages/Home/Home.js +++ b/webapp/src/pages/Home/Home.js @@ -7,11 +7,11 @@ const Home = () => { ) From 504753cf91d33c9ffe087ba3700bd894c3da71c4 Mon Sep 17 00:00:00 2001 From: CANCI0 Date: Sun, 4 Feb 2024 17:55:26 +0100 Subject: [PATCH 06/20] =?UTF-8?q?M=C3=A1s=20mejoras=20en=20la=20UI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- webapp/src/App.css | 1 + webapp/src/pages/Clasico/Clasico.css | 40 +++++++++++++---------- webapp/src/pages/Clasico/Clasico.js | 22 +++++++------ webapp/src/pages/Home/Home.js | 32 +++++++++--------- webapp/src/pages/WrongRoute/WrongRoute.js | 20 ++++++------ 5 files changed, 61 insertions(+), 54 deletions(-) diff --git a/webapp/src/App.css b/webapp/src/App.css index e4322e48..cc327655 100644 --- a/webapp/src/App.css +++ b/webapp/src/App.css @@ -3,6 +3,7 @@ display: flex; justify-content: center; align-items: center; + text-align: center; } h1{ diff --git a/webapp/src/pages/Clasico/Clasico.css b/webapp/src/pages/Clasico/Clasico.css index 95dce8d4..b27d2313 100644 --- a/webapp/src/pages/Clasico/Clasico.css +++ b/webapp/src/pages/Clasico/Clasico.css @@ -1,37 +1,41 @@ -body{ - font-family: "Consolas", sans-serif; +body { + font-family: "Consolas", sans-serif; } -.container h1{ - text-align: center; +.container h1 { + text-align: center; } -.questionContainer{ - display: grid; - justify-content: center; - align-items: center; +.questionContainer { + display: grid; + justify-content: center; + align-items: center; } .responsesContainer { - display: grid; - justify-content: center; - grid-template-columns: repeat(2, 1fr); - grid-template-rows: repeat(2, 1fr); - gap: 1rem; + display: grid; + justify-content: center; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); + gap: 1rem; +} + +button{ + margin: 0.25rem; } /* CSS */ .responsesContainer button { appearance: none; background-color: transparent; - border: 0.13rem solid #0F0F0F; + border: 0.13rem solid #0f0f0f; border-radius: 15px; box-sizing: border-box; - color: #0F0F0F; + color: #0f0f0f; padding: 1rem; text-align: center; text-decoration: none; - transition: all 300ms cubic-bezier(.23, 1, 0.32, 1); + transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1); user-select: none; -webkit-user-select: none; touch-action: manipulation; @@ -45,7 +49,7 @@ body{ .responsesContainer button:hover { color: #fff; - background-color: #1A1A1A; + background-color: #1a1a1a; box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px; transform: translateY(-2px); } @@ -53,4 +57,4 @@ body{ .responsesContainer button:active { box-shadow: none; transform: translateY(0); -} \ No newline at end of file +} diff --git a/webapp/src/pages/Clasico/Clasico.js b/webapp/src/pages/Clasico/Clasico.js index 784d5f6c..58b50d34 100644 --- a/webapp/src/pages/Clasico/Clasico.js +++ b/webapp/src/pages/Clasico/Clasico.js @@ -1,7 +1,7 @@ -import React, { useState, useEffect } from 'react'; -import './Clasico.css'; -import Preguntas from '../../components/Preguntas'; -import { useNavigate } from 'react-router-dom'; +import React, { useState, useEffect } from "react"; +import "./Clasico.css"; +import Preguntas from "../../components/Preguntas"; +import { useNavigate } from "react-router-dom"; const JuegoPreguntas = () => { const [indicePregunta, setIndicePregunta] = useState(0); @@ -20,7 +20,7 @@ const JuegoPreguntas = () => { }, 3000); } const timer = setInterval(() => { - setTiempoRestante(prevTiempo => prevTiempo <= 0 ? 0 : prevTiempo - 1); + setTiempoRestante((prevTiempo) => (prevTiempo <= 0 ? 0 : prevTiempo - 1)); }, 1000); return () => clearInterval(timer); }, [tiempoRestante, indicePregunta]); @@ -40,13 +40,13 @@ const JuegoPreguntas = () => { const estiloRespuesta = (respuesta) => { if (juegoTerminado) { if (respuesta === preguntaActual.respuestaCorrecta) { - return { backgroundColor: 'green' }; + return { backgroundColor: "green" }; } else if (respuesta === respuestaSeleccionada) { - return { backgroundColor: 'red' }; + return { backgroundColor: "red" }; } } else { if (respuesta === respuestaSeleccionada) { - return { backgroundColor: 'orange' }; + return { backgroundColor: "orange" }; } } return {}; @@ -76,14 +76,16 @@ const JuegoPreguntas = () => { }; const handleVolverAlMenu = () => { - navigate('../home'); + navigate("../home"); }; if (mostrarMenu) { return (

¡Juego terminado!

-

Tu puntuación: {puntuacion}/{Preguntas.length}

+

+ Tu puntuación: {puntuacion}/{Preguntas.length} +

diff --git a/webapp/src/pages/Home/Home.js b/webapp/src/pages/Home/Home.js index 712ef196..ea8203c0 100644 --- a/webapp/src/pages/Home/Home.js +++ b/webapp/src/pages/Home/Home.js @@ -1,20 +1,20 @@ -import React from 'react'; -import './Home.css'; +import React from "react"; +import "./Home.css"; import { Link } from "react-router-dom"; const Home = () => { - return ( -
-

Bienvenido a WIQ. Selecciona un modo de juego

- -
- ) -} + return ( +
+

Bienvenido a WIQ. Selecciona un modo de juego

+ +
+ ); +}; -export default Home; \ No newline at end of file +export default Home; diff --git a/webapp/src/pages/WrongRoute/WrongRoute.js b/webapp/src/pages/WrongRoute/WrongRoute.js index a71df000..c963a5ac 100644 --- a/webapp/src/pages/WrongRoute/WrongRoute.js +++ b/webapp/src/pages/WrongRoute/WrongRoute.js @@ -1,13 +1,13 @@ -import React from 'react'; -import './WrongRoute.css'; +import React from "react"; +import "./WrongRoute.css"; const WrongRoute = () => { - return( -
-

404

-

Página no encontrada

-
- ); -} + return ( +
+

404

+

Página no encontrada

+
+ ); +}; -export default WrongRoute; \ No newline at end of file +export default WrongRoute; From 2c627e5ac2d205b6628b9e8d96f983bd9664da67 Mon Sep 17 00:00:00 2001 From: CANCI0 Date: Sun, 4 Feb 2024 21:28:35 +0100 Subject: [PATCH 07/20] =?UTF-8?q?A=C3=B1adida=20barra=20de=20navegaci?= =?UTF-8?q?=C3=B3n=20y=20footer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- webapp/src/App.css | 7 +- webapp/src/components/Footer/Footer.css | 3 + webapp/src/components/Footer/Footer.js | 14 ++ webapp/src/components/Nav/Nav.css | 32 ++++ webapp/src/components/Nav/Nav.js | 17 ++ webapp/src/pages/Clasico/Clasico.js | 41 ++--- webapp/src/pages/Home/Home.css | 3 +- webapp/src/pages/Home/Home.js | 29 ++-- webapp/src/pages/WrongRoute/WrongRoute.css | 174 +++++++++++++++++++-- webapp/src/pages/WrongRoute/WrongRoute.js | 21 ++- 10 files changed, 292 insertions(+), 49 deletions(-) create mode 100644 webapp/src/components/Footer/Footer.css create mode 100644 webapp/src/components/Footer/Footer.js create mode 100644 webapp/src/components/Nav/Nav.css create mode 100644 webapp/src/components/Nav/Nav.js diff --git a/webapp/src/App.css b/webapp/src/App.css index cc327655..6c257577 100644 --- a/webapp/src/App.css +++ b/webapp/src/App.css @@ -1,7 +1,8 @@ #root{ height: 90vh; display: flex; - justify-content: center; + flex-direction: column; + justify-content: flex-start; align-items: center; text-align: center; } @@ -26,6 +27,10 @@ input, button, a{ touch-action: manipulation; width: 100%; will-change: transform; + -webkit-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1); + -moz-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1); + box-shadow: 5px 5px 6px 0px rgba(0,255,192,1); + margin: 1rem; } input:hover, button:hover, a:hover { diff --git a/webapp/src/components/Footer/Footer.css b/webapp/src/components/Footer/Footer.css new file mode 100644 index 00000000..c422f99e --- /dev/null +++ b/webapp/src/components/Footer/Footer.css @@ -0,0 +1,3 @@ +footer{ + margin: 3rem; +} \ No newline at end of file diff --git a/webapp/src/components/Footer/Footer.js b/webapp/src/components/Footer/Footer.js new file mode 100644 index 00000000..7198079f --- /dev/null +++ b/webapp/src/components/Footer/Footer.js @@ -0,0 +1,14 @@ +import React from 'react'; +import { Link } from "react-router-dom"; +import './Footer.css'; + +const Footer = () => { + return( +
+

WIQ!

+

Copyright 2024 ® Grupo 1A de Arquitectura del Software

+
+ ); +} + +export default Footer; \ No newline at end of file diff --git a/webapp/src/components/Nav/Nav.css b/webapp/src/components/Nav/Nav.css new file mode 100644 index 00000000..9162d8b7 --- /dev/null +++ b/webapp/src/components/Nav/Nav.css @@ -0,0 +1,32 @@ +.logo{ + font-family: oswald,sans-serif; + width: 100%; + font-size: 5rem; + font-weight: 700; + margin: 0; + text-shadow: 4px 4px 0 #00ffc0; +} + +nav{ + width: 80vw; + display: flex; + flex-wrap: wrap; + border: 3px solid #0F0F0F; + border-radius: 1rem; + padding: 1rem; + margin: 1rem; + -webkit-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1); + -moz-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1); + box-shadow: 10px 10px 5px 0px rgba(0,255,192,1); +} + +nav ul{ + display: flex; + flex-direction: row; +} + +nav li{ + display: flex; + flex-direction: row; + height: 100%; +} \ No newline at end of file diff --git a/webapp/src/components/Nav/Nav.js b/webapp/src/components/Nav/Nav.js new file mode 100644 index 00000000..95d8f951 --- /dev/null +++ b/webapp/src/components/Nav/Nav.js @@ -0,0 +1,17 @@ +import React from 'react'; +import { Link } from "react-router-dom"; +import './Nav.css'; + +const Nav = () => { + return( + + ); +} + +export default Nav; \ No newline at end of file diff --git a/webapp/src/pages/Clasico/Clasico.js b/webapp/src/pages/Clasico/Clasico.js index 58b50d34..dd1fc47f 100644 --- a/webapp/src/pages/Clasico/Clasico.js +++ b/webapp/src/pages/Clasico/Clasico.js @@ -2,6 +2,8 @@ import React, { useState, useEffect } from "react"; import "./Clasico.css"; import Preguntas from "../../components/Preguntas"; import { useNavigate } from "react-router-dom"; +import Nav from '../../components/Nav/Nav.js'; +import { Link } from 'react-router-dom'; const JuegoPreguntas = () => { const [indicePregunta, setIndicePregunta] = useState(0); @@ -87,30 +89,33 @@ const JuegoPreguntas = () => { Tu puntuación: {puntuacion}/{Preguntas.length}

- + Volver al Menú Principal
); } return ( -
-

Pregunta {indicePregunta + 1}:

-

{preguntaActual.pregunta}

-
- {preguntaActual.respuestas.map((respuesta, index) => ( - - ))} + <> +
+ ); }; diff --git a/webapp/src/pages/Home/Home.css b/webapp/src/pages/Home/Home.css index d0ed1793..928b4894 100644 --- a/webapp/src/pages/Home/Home.css +++ b/webapp/src/pages/Home/Home.css @@ -10,10 +10,11 @@ ul{ list-style-type: none; text-align: center; gap: 1rem; - width: 50%; margin: auto; + padding: 0; } ul li{ text-decoration: none; + } \ No newline at end of file diff --git a/webapp/src/pages/Home/Home.js b/webapp/src/pages/Home/Home.js index ea8203c0..e5d08fda 100644 --- a/webapp/src/pages/Home/Home.js +++ b/webapp/src/pages/Home/Home.js @@ -1,19 +1,28 @@ import React from "react"; import "./Home.css"; +import Nav from '../../components/Nav/Nav.js'; +import Footer from '../../components/Footer/Footer.js'; import { Link } from "react-router-dom"; const Home = () => { return ( -
-

Bienvenido a WIQ. Selecciona un modo de juego

- -
+ <> +