diff --git a/package-lock.json b/package-lock.json index 0e2bee4..5063da0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2,5 +2,259 @@ "name": "wiq_en2a", "lockfileVersion": 3, "requires": true, - "packages": {} + "packages": { + "": { + "dependencies": { + "react-query": "^3.39.3" + } + }, + "node_modules/@babel/runtime": { + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.1.tgz", + "integrity": "sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==", + "dependencies": { + "regenerator-runtime": "^0.14.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/balanced-match": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" + }, + "node_modules/big-integer": { + "version": "1.6.52", + "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.52.tgz", + "integrity": "sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==", + "engines": { + "node": ">=0.6" + } + }, + "node_modules/brace-expansion": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dependencies": { + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, + "node_modules/broadcast-channel": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz", + "integrity": "sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==", + "dependencies": { + "@babel/runtime": "^7.7.2", + "detect-node": "^2.1.0", + "js-sha3": "0.8.0", + "microseconds": "0.2.0", + "nano-time": "1.0.0", + "oblivious-set": "1.0.0", + "rimraf": "3.0.2", + "unload": "2.2.0" + } + }, + "node_modules/concat-map": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", + "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" + }, + "node_modules/detect-node": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz", + "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==" + }, + "node_modules/fs.realpath": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", + "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" + }, + "node_modules/glob": { + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", + "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.1.1", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + }, + "engines": { + "node": "*" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/inflight": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", + "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", + "dependencies": { + "once": "^1.3.0", + "wrappy": "1" + } + }, + "node_modules/inherits": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" + }, + "node_modules/js-sha3": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz", + "integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==" + }, + "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/match-sorter": { + "version": "6.3.4", + "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.4.tgz", + "integrity": "sha512-jfZW7cWS5y/1xswZo8VBOdudUiSd9nifYRWphc9M5D/ee4w4AoXLgBEdRbgVaxbMuagBPeUC5y2Hi8DO6o9aDg==", + "dependencies": { + "@babel/runtime": "^7.23.8", + "remove-accents": "0.5.0" + } + }, + "node_modules/microseconds": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/microseconds/-/microseconds-0.2.0.tgz", + "integrity": "sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA==" + }, + "node_modules/minimatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, + "node_modules/nano-time": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz", + "integrity": "sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==", + "dependencies": { + "big-integer": "^1.6.16" + } + }, + "node_modules/oblivious-set": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz", + "integrity": "sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw==" + }, + "node_modules/once": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", + "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", + "dependencies": { + "wrappy": "1" + } + }, + "node_modules/path-is-absolute": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", + "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==", + "engines": { + "node": ">=0.10.0" + } + }, + "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-query": { + "version": "3.39.3", + "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz", + "integrity": "sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "broadcast-channel": "^3.4.1", + "match-sorter": "^6.0.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, + "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/remove-accents": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz", + "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==" + }, + "node_modules/rimraf": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", + "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", + "dependencies": { + "glob": "^7.1.3" + }, + "bin": { + "rimraf": "bin.js" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/unload": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz", + "integrity": "sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==", + "dependencies": { + "@babel/runtime": "^7.6.2", + "detect-node": "^2.0.4" + } + }, + "node_modules/wrappy": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", + "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==" + } + } } diff --git a/package.json b/package.json new file mode 100644 index 0000000..f2ba0ce --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "react-query": "^3.39.3" + } +} diff --git a/webapp/.env b/webapp/.env index 3a9d2b3..7de05f5 100644 --- a/webapp/.env +++ b/webapp/.env @@ -1 +1,2 @@ -REACT_APP_API_ENDPOINT=http://74.234.241.249 \ No newline at end of file +http://74.234.241.249 +REACT_APP_API_ENDPOINT=http://localhost:8000 \ No newline at end of file diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx index 792dc60..eb70489 100644 --- a/webapp/src/App.tsx +++ b/webapp/src/App.tsx @@ -2,14 +2,14 @@ import { BrowserRouter } from "react-router-dom"; import { AppRouter } from "./Router"; - /** The old code is not in /pages/init/index.tsx and is shown as default */ function App() { + return ( - - - + + + ); } diff --git a/webapp/src/Router.tsx b/webapp/src/Router.tsx index a2535be..707a34e 100644 --- a/webapp/src/Router.tsx +++ b/webapp/src/Router.tsx @@ -6,6 +6,8 @@ import { RouterLayout } from "./common/RouterLayout"; import { InitPage } from "./pages/init"; import { ScoreboardPage } from "./pages/scoreboard"; import ProfilePage from "./pages/userProfile"; +import GameSinglePlayer from "./components/game/GameSinglePlayer"; +import GameMultiPlayer from "./components/game/GameMultiPlayer"; export const AppRouter: React.FC<{}> = () => { return ( @@ -14,6 +16,8 @@ export const AppRouter: React.FC<{}> = () => { { /* When accessing /game or the other paths, it will be shown as the outlet inside RouterLayout*/ } } /> + } /> + } /> } /> } /> } /> diff --git a/webapp/src/components/game-layout/GameLayout.tsx b/webapp/src/components/game-layout/GameLayout.tsx index aec311e..705dea8 100644 --- a/webapp/src/components/game-layout/GameLayout.tsx +++ b/webapp/src/components/game-layout/GameLayout.tsx @@ -1,5 +1,5 @@ import { useState } from "react"; -import Game from "../game/Game"; +import Game from "../game/GameSinglePlayer"; import Group from "../group/Group"; import Scoreboard from "../scoreboard/Scoreboard"; diff --git a/webapp/src/components/game/Game.tsx b/webapp/src/components/game/Game.tsx deleted file mode 100644 index 368015c..0000000 --- a/webapp/src/components/game/Game.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import axios from 'axios'; -import { useEffect, useState } from 'react'; -import MenuGame from './MenuGame'; -import LobbyGame from './LobbyGame'; -import PlayingGame from './PlayingGame'; -import ScoreboardGame from './ScoreboardGame'; -export interface Question4Answers { - uuid: string - question: string; - correctAnswer: string; - incorrectAnswer1: string; - incorrectAnswer2: string; - incorrectAnswer3: string; -} - -export interface User { - createdAt: string; - nCorrectAnswers: number; - nWins: number; - nWrongAnswers: number; - totalScore: number; - username: string; - uuid: string; -} - -export interface Player { - // can be a real player or bot - username: string; - points: number; - isBot: boolean; -} - -const Game = () => { - - const [questions, setQuestions] = useState([]); - const [currentStage, setCurrentStage] = useState(1); - const [players, setPlayers] = useState([]); - const [gameCreated, setGameCreated] = useState(false); - - const username = localStorage.getItem("username"); - const uuid = localStorage.getItem("userUUID"); - - useEffect(() => { - if(!gameCreated){ - createGame(); - setGameCreated(true); - } - },[gameCreated]) - - if(!username) return

error

; - - const createGame = async () => { - - const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000'; - - try { - setPlayers([ - { - username: username, - points: 0, - isBot: false, - } - ]) - const requestData = { - players: [{ - uuid: uuid, - }], - }; - - const response = await axios.post(`${apiEndpoint}/createGame`, requestData); - - const createdGame = response.data; - - setQuestions(createdGame); - console.log('Juego creado:', createdGame); - - - setCurrentStage(1); - return createdGame; - } catch (error) { - console.error('Error al crear el juego:', error); - throw error; - } - }; - - const handlePlayers = (Players:Player[]) => { - return setPlayers(Players); - } - - const handleCurrentStage = (n:number) => { - return setCurrentStage(n); - } - - - return ( -
- {currentStage === 1 && ()} - {currentStage === 2 && ()} - {currentStage === 3 && ()} - {currentStage === 4 && ( )} -
- - ) -} - -export default Game; \ No newline at end of file diff --git a/webapp/src/components/game/GameMultiPlayer.tsx b/webapp/src/components/game/GameMultiPlayer.tsx new file mode 100644 index 0000000..32779df --- /dev/null +++ b/webapp/src/components/game/GameMultiPlayer.tsx @@ -0,0 +1,11 @@ +import { FC } from 'react' + +interface GameMultiPlayerProps { + +} + +const GameMultiPlayer: FC = ({}) => { + return
GameMultiPlayer
+} + +export default GameMultiPlayer \ No newline at end of file diff --git a/webapp/src/components/game/GameSinglePlayer.tsx b/webapp/src/components/game/GameSinglePlayer.tsx new file mode 100644 index 0000000..c44fa9c --- /dev/null +++ b/webapp/src/components/game/GameSinglePlayer.tsx @@ -0,0 +1,87 @@ +import axios from 'axios'; +import { useState, useEffect } from 'react'; +import LobbyGame from './LobbyGame'; +import PlayingGame from './PlayingGame'; +import ScoreboardGame from './ScoreboardGame'; +import { Container } from '@mui/material'; + +export interface Question4Answers { + uuid: string + question: string; + correctAnswer: string; + incorrectAnswer1: string; + incorrectAnswer2: string; + incorrectAnswer3: string; +} + +export interface Player { + // can be a real player or bot + username: string; + points: number; + isBot: boolean; +} + +const GameSinglePlayer = () => { + const [questions, setQuestions] = useState([]); + const [currentStage, setCurrentStage] = useState(1); + const [players, setPlayers] = useState([]); + + const username = localStorage.getItem("username"); + const uuid = localStorage.getItem("userUUID"); + const [fetched, setFetched] = useState(false); + + useEffect(() => { + const fetchQuestions = async () => { + const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000'; + + try { + setPlayers([ + { + username: username, + points: 0, + isBot: false, + } + ]) + const requestData = { + players: [{ + uuid: uuid, + }], + }; + + const response = await axios.post(`${apiEndpoint}/createGame`, requestData); + + setQuestions(response.data); + console.log("Juego creado") + console.log(response.data) + setCurrentStage(1); + setFetched(true); + } catch (error) { + console.error('Error al obtener las preguntas:', error); + } + }; + + if (!questions.length && !fetched) { + fetchQuestions(); + } + }, [questions.length, uuid, username, fetched]); + + if (!username) return

Error

; + + const handlePlayers = (Players:Player[]) => { + setPlayers(Players); + }; + + const handleCurrentStage = (n:number) => { + setCurrentStage(n); + }; + + return ( + + {currentStage === 1 && ()} + {currentStage === 2 && ()} + {currentStage === 3 && ( )} + + ); +}; + +export default GameSinglePlayer; diff --git a/webapp/src/components/game/LobbyGame.css b/webapp/src/components/game/LobbyGame.css index e071ec2..322f9e0 100644 --- a/webapp/src/components/game/LobbyGame.css +++ b/webapp/src/components/game/LobbyGame.css @@ -62,4 +62,10 @@ cursor: pointer; margin-left: 10px; } + + .start-game-button:disabled { + background-color: #cccccc; /* Change background color for disabled state */ + color: #666666; /* Change text color for disabled state */ + cursor: not-allowed; /* Change cursor for disabled state */ + } \ No newline at end of file diff --git a/webapp/src/components/game/LobbyGame.tsx b/webapp/src/components/game/LobbyGame.tsx index f4f186f..a5d7199 100644 --- a/webapp/src/components/game/LobbyGame.tsx +++ b/webapp/src/components/game/LobbyGame.tsx @@ -1,14 +1,15 @@ import { FC } from 'react' -import { Player } from './Game'; +import { Player } from './GameSinglePlayer'; import './LobbyGame.css'; interface LobbyGameProps { setPlayers: (players:Player[]) => void; players: Player[]; setCurrentStage: (n: number) => void; + isFetched: boolean; } -const LobbyGame: FC = ({setPlayers, players, setCurrentStage}) => { +const LobbyGame: FC = ({setPlayers, players, setCurrentStage, isFetched}) => { const addBotPlayer = () => { if (players.length < 4) { @@ -38,9 +39,12 @@ const LobbyGame: FC = ({setPlayers, players, setCurrentStage}) = - + } + {!isFetched && } ); diff --git a/webapp/src/components/game/MenuGame.tsx b/webapp/src/components/game/MenuGame.tsx deleted file mode 100644 index 091830b..0000000 --- a/webapp/src/components/game/MenuGame.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { Button } from '@mui/material' -import { FC } from 'react' - -interface MenuGameProps { - setCurrentStage: (n: number) => void; -} - -const MenuGame: FC = ({setCurrentStage}) => { - return ( - <> - - - - ) -} - -export default MenuGame \ No newline at end of file diff --git a/webapp/src/components/game/PlayingGame.tsx b/webapp/src/components/game/PlayingGame.tsx index 0cabba9..729f311 100644 --- a/webapp/src/components/game/PlayingGame.tsx +++ b/webapp/src/components/game/PlayingGame.tsx @@ -1,5 +1,5 @@ import { FC, useState } from 'react' -import { Player, Question4Answers } from './Game' +import { Player, Question4Answers } from './GameSinglePlayer' import axios from 'axios'; interface PlayingGameProps { @@ -43,7 +43,7 @@ const PlayingGame: FC = ({questions, setCurrentStage, setPlaye return player; }) setPlayers(players); - setCurrentStage(4); + setCurrentStage(3); const sorted = players.sort((a, b) => b.points - a.points); const requestData ={ "players": [{ "uuid": uuid, diff --git a/webapp/src/components/game/ScoreboardGame.tsx b/webapp/src/components/game/ScoreboardGame.tsx index 541b8cd..3b4afe3 100644 --- a/webapp/src/components/game/ScoreboardGame.tsx +++ b/webapp/src/components/game/ScoreboardGame.tsx @@ -1,5 +1,5 @@ import { FC} from 'react' -import { Player } from './Game'; +import { Player } from './GameSinglePlayer'; import './ScoreboardGame.css'; interface ScoreboardGameProps { diff --git a/webapp/src/pages/game/GamePage.css b/webapp/src/pages/game/GamePage.css new file mode 100644 index 0000000..b21a952 --- /dev/null +++ b/webapp/src/pages/game/GamePage.css @@ -0,0 +1,29 @@ +.game-page-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; +} + +.game-page-button { + font-size: 1.5em; /* Adjust as needed */ + padding: 15px 30px; /* Adjust as needed */ + margin: 10px; /* Adjust as needed */ + text-decoration: none; + background-color: #007bff; + color: #ffffff; /* White text color */ + border: none; + border-radius: 8px; /* Make the button slightly round */ + cursor: pointer; + transition: background-color 0.3s ease; +} + +.game-page-button:hover { + background-color: #0056b3; /* Adjust as needed */ +} + +.game-page-button a { + color: inherit; /* Inherit the color from the button */ + text-decoration: none; /* Remove underline for Link */ +} \ No newline at end of file diff --git a/webapp/src/pages/game/game-page.scss b/webapp/src/pages/game/game-page.scss deleted file mode 100644 index e69de29..0000000 diff --git a/webapp/src/pages/game/index.tsx b/webapp/src/pages/game/index.tsx index c9879bd..4f2fcb7 100644 --- a/webapp/src/pages/game/index.tsx +++ b/webapp/src/pages/game/index.tsx @@ -1,11 +1,16 @@ import React from "react"; -import Game from "../../components/game/Game"; -import { Container } from "@mui/material"; +import { Link } from "react-router-dom"; +import "./GamePage.css"; export const GamePage: React.FC<{}> = () => { return ( - - - +
+ + +
); }; \ No newline at end of file diff --git a/webapp/tsconfig.json b/webapp/tsconfig.json index cb08062..3486ee7 100644 --- a/webapp/tsconfig.json +++ b/webapp/tsconfig.json @@ -26,17 +26,17 @@ "sourceRoot": "/", // Strict Checks - "alwaysStrict": true, - "allowUnreachableCode": false, - "noImplicitAny": true, + //"alwaysStrict": true, + //"allowUnreachableCode": false, + //"noImplicitAny": true, //"strictNullChecks": true, // Linter Checks - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true, - "noUncheckedIndexedAccess": true, - "noUnusedLocals": true, - "noUnusedParameters": true + //"noImplicitReturns": true, + //"noFallthroughCasesInSwitch": true, + //"noUncheckedIndexedAccess": true, + //"noUnusedLocals": true, + //"noUnusedParameters": true }, "include": ["./**/*.tsx", "src/index.tsx"], "exclude": [