diff --git a/webapp/package-lock.json b/webapp/package-lock.json index 72a49817..ad42295e 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -17,6 +17,7 @@ "axios": "^1.6.5", "i18n": "^0.15.1", "react": "^18.2.0", + "react-countdown": "^2.3.5", "react-dom": "^18.2.0", "react-i18next": "^14.0.5", "react-icons": "^5.0.1", @@ -22005,6 +22006,18 @@ "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" }, + "node_modules/react-countdown": { + "version": "2.3.5", + "resolved": "https://registry.npmjs.org/react-countdown/-/react-countdown-2.3.5.tgz", + "integrity": "sha512-K26ENYEesMfPxhRRtm1r+Pf70SErrvW3g4CArLi/x6MPFjgfDFYePT4UghEj8p2nI0cqVV7/JjDgjyr//U60Og==", + "dependencies": { + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": ">= 15", + "react-dom": ">= 15" + } + }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", diff --git a/webapp/package.json b/webapp/package.json index 85a27803..f31b2a0c 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -12,6 +12,7 @@ "axios": "^1.6.5", "i18n": "^0.15.1", "react": "^18.2.0", + "react-countdown": "^2.3.5", "react-dom": "^18.2.0", "react-i18next": "^14.0.5", "react-icons": "^5.0.1", diff --git a/webapp/src/components/GameMenu/GameMenu.js b/webapp/src/components/GameMenu/GameMenu.js index ed5a392c..a84fe5ea 100644 --- a/webapp/src/components/GameMenu/GameMenu.js +++ b/webapp/src/components/GameMenu/GameMenu.js @@ -22,13 +22,10 @@ export default function GameMenu() { return ; } - function ButtonNewGame({t}) { + function ButtonNewGame({ t }) { return ( - <> - -

{t("gameMenu.new_game_button")}

- - - ); - } - \ No newline at end of file + +

{t("gameMenu.new_game_button")}

+ + ); + } \ No newline at end of file diff --git a/webapp/src/custom.css b/webapp/src/custom.css index 39ce5c1b..cc3106ae 100644 --- a/webapp/src/custom.css +++ b/webapp/src/custom.css @@ -110,21 +110,40 @@ body { .menuButton { - width: 200px; - height: 45px; + width: 40%; + height: 45px; background: darkblue; border: none; outline: none; border-radius: 40px; box-shadow: 0 0 10px black; - cursor: pointer; + cursor:pointer; font-size: 16px; color: white; font-weight: 700; margin: 0.5em; + text-align: center; + } + + .countdown { + font-weight: 500; + margin: 3em; + } + + .topPanel{ + display: flex; + flex-direction: row; + align-items: center; + } + .divMenu { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; } - .create-game{ + .menuButton{ width: 200px; height: 45px; background: darkblue; @@ -137,20 +156,30 @@ body { color: white; font-weight: 700; margin: 0.5em; + text-decoration: none; } - + + .linkButton { + display: flex; + justify-content: center; + align-items: center; + width: 200px; + height: 45px; + background: darkblue; + border: none; + outline: none; + border-radius: 40px; + box-shadow: 0 0 10px black; + cursor: pointer; + font-size: 16px; + color: white; + font-weight: 700; + margin: 0.5em; + text-decoration: none; +} - - .divMenu { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100vh; - background-color: lightblue; - } .wrapper { display: flex;