From a243b800971f1c844827ba4e3f30f4d8527f1533 Mon Sep 17 00:00:00 2001 From: lauratbg Date: Thu, 7 Mar 2024 15:42:56 +0100 Subject: [PATCH 1/2] Merged all the css into one "custom.css" --- webapp/src/App.css | 38 -- webapp/src/App.js | 4 +- webapp/src/components/GameMenu.js | 0 webapp/src/components/GameMenu/GameMenu.css | 22 -- webapp/src/components/GameMenu/GameMenu.js | 7 +- webapp/src/components/Home/Home.css | 37 -- webapp/src/components/Home/Home.js | 5 +- webapp/src/components/Instructions.css | 21 -- webapp/src/components/Instructions.js | 2 +- webapp/src/components/fragments/NavBar.css | 41 --- webapp/src/components/fragments/NavBar.js | 11 +- .../loginAndRegistration/AddUser.js | 2 +- .../components/loginAndRegistration/Login.css | 106 ------ .../components/loginAndRegistration/Login.js | 1 + .../src/components/questionView/Question.js | 2 + .../questionView/QuestionGenerator.js | 1 + .../components/questionView/QuestionView.css | 29 -- .../components/questionView/QuestionView.js | 5 +- webapp/src/custom.css | 339 ++++++++++++++++++ webapp/src/index.css | 13 - webapp/src/index.js | 2 +- webapp/src/locales/en/messages_en.properties | 19 - webapp/src/locales/es/messages_es.properties | 19 - 23 files changed, 361 insertions(+), 365 deletions(-) delete mode 100644 webapp/src/App.css delete mode 100644 webapp/src/components/GameMenu.js delete mode 100644 webapp/src/components/GameMenu/GameMenu.css delete mode 100644 webapp/src/components/Home/Home.css delete mode 100644 webapp/src/components/Instructions.css delete mode 100644 webapp/src/components/fragments/NavBar.css delete mode 100644 webapp/src/components/loginAndRegistration/Login.css delete mode 100644 webapp/src/components/questionView/QuestionView.css create mode 100644 webapp/src/custom.css delete mode 100644 webapp/src/index.css delete mode 100644 webapp/src/locales/en/messages_en.properties delete mode 100644 webapp/src/locales/es/messages_es.properties diff --git a/webapp/src/App.css b/webapp/src/App.css deleted file mode 100644 index 74b5e053..00000000 --- a/webapp/src/App.css +++ /dev/null @@ -1,38 +0,0 @@ -.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; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/webapp/src/App.js b/webapp/src/App.js index 29e0f7fe..fd336858 100644 --- a/webapp/src/App.js +++ b/webapp/src/App.js @@ -4,11 +4,11 @@ import Container from '@mui/material/Container'; import QuestionView from './components/questionView/QuestionView'; import GameMenu from './components/GameMenu/GameMenu'; import Navbar from './components/fragments/NavBar'; -import Home from './components/Home/Home'; +import Home from './components/home/Home'; import Login from './components/loginAndRegistration/Login'; import AddUser from './components/loginAndRegistration/AddUser'; import Instructions from './components/Instructions'; - +import './custom.css'; function App() { return ( diff --git a/webapp/src/components/GameMenu.js b/webapp/src/components/GameMenu.js deleted file mode 100644 index e69de29b..00000000 diff --git a/webapp/src/components/GameMenu/GameMenu.css b/webapp/src/components/GameMenu/GameMenu.css deleted file mode 100644 index db52042c..00000000 --- a/webapp/src/components/GameMenu/GameMenu.css +++ /dev/null @@ -1,22 +0,0 @@ -.menuButton { - width: 40%; - 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; -} - -.divMenu { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100vh; -} \ No newline at end of file diff --git a/webapp/src/components/GameMenu/GameMenu.js b/webapp/src/components/GameMenu/GameMenu.js index c5b1169d..d9961bdc 100644 --- a/webapp/src/components/GameMenu/GameMenu.js +++ b/webapp/src/components/GameMenu/GameMenu.js @@ -1,6 +1,5 @@ -import './GameMenu.css'; +import "../../custom.css"; import { Link } from "react-router-dom"; -import QuestionView from '../questionView/QuestionView'; export default function GameMenu() { return (
@@ -22,8 +21,8 @@ export default function GameMenu() { function ButtonNewGame() { return ( <> - - + + ); diff --git a/webapp/src/components/Home/Home.css b/webapp/src/components/Home/Home.css deleted file mode 100644 index 98b8043a..00000000 --- a/webapp/src/components/Home/Home.css +++ /dev/null @@ -1,37 +0,0 @@ - .wrapper { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100vh; - } - - .wrapper button{ - width: 100%; - 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; - } - - .wrapper link{ - font-size: 14.5px; - text-align: center; - margin: 20px 0 15px; - } - - - - - - - - - - diff --git a/webapp/src/components/Home/Home.js b/webapp/src/components/Home/Home.js index 0e9af41a..0faf09e7 100644 --- a/webapp/src/components/Home/Home.js +++ b/webapp/src/components/Home/Home.js @@ -1,12 +1,9 @@ import React from "react"; -import Typography from "@mui/material/Typography"; import Button from "@mui/material/Button"; import { Link } from 'react-router-dom'; -import "./Home.css"; +import "../../custom.css"; import {useTranslation} from "react-i18next"; -import "./Home.css"; - function Home() { diff --git a/webapp/src/components/Instructions.css b/webapp/src/components/Instructions.css deleted file mode 100644 index e381600b..00000000 --- a/webapp/src/components/Instructions.css +++ /dev/null @@ -1,21 +0,0 @@ - -main{ - background-color: white; -} - -section { - text-align: justify; - background-color: white; -} - - -article ul p{ - text-align: center; - background-color: lightblue; - font-size: large; -} - -article ul li{ - text-align: justify; - background-color: white; -} \ No newline at end of file diff --git a/webapp/src/components/Instructions.js b/webapp/src/components/Instructions.js index 5f2e93c4..a881b6ed 100644 --- a/webapp/src/components/Instructions.js +++ b/webapp/src/components/Instructions.js @@ -1,5 +1,5 @@ import React from 'react'; -import '../components/Instructions.css'; +import '../custom.css'; import {useTranslation} from "react-i18next"; diff --git a/webapp/src/components/fragments/NavBar.css b/webapp/src/components/fragments/NavBar.css deleted file mode 100644 index 4ec0f2c2..00000000 --- a/webapp/src/components/fragments/NavBar.css +++ /dev/null @@ -1,41 +0,0 @@ -.navbar-container { - display: flex; - justify-content: space-between; - align-items: center; - background-color: blue; - width: 100%; - padding: 10px; - box-sizing: border-box; - } - - main { - width: 100%; - } - - .navbar-container img { - width: 40px; - height: 40px; - margin-right: 10px; - } - - .navbar-text { - color: white; - } - - - .help-button { - border: none; - background: none; - - } - - .help-button img { - width: 40px; - height: 40px; - } - - - - - - \ No newline at end of file diff --git a/webapp/src/components/fragments/NavBar.js b/webapp/src/components/fragments/NavBar.js index 53235491..d65ef527 100644 --- a/webapp/src/components/fragments/NavBar.js +++ b/webapp/src/components/fragments/NavBar.js @@ -2,7 +2,7 @@ import React from 'react'; import Typography from "@mui/material/Typography"; import { Link } from 'react-router-dom'; -import "./NavBar.css"; +import "../../custom.css"; import {useTranslation} from "react-i18next"; function Navbar() { @@ -15,9 +15,12 @@ function Navbar() { {t("navBar.title")} - - - +
+ + + +
+
); } diff --git a/webapp/src/components/loginAndRegistration/AddUser.js b/webapp/src/components/loginAndRegistration/AddUser.js index 2fa87faa..5911c7f5 100644 --- a/webapp/src/components/loginAndRegistration/AddUser.js +++ b/webapp/src/components/loginAndRegistration/AddUser.js @@ -1,6 +1,6 @@ import React from "react"; import { FaUser, FaLock } from "react-icons/fa"; -import "./Login.css"; +import "../../custom.css"; import { Link } from "react-router-dom"; import { useTranslation } from "react-i18next"; diff --git a/webapp/src/components/loginAndRegistration/Login.css b/webapp/src/components/loginAndRegistration/Login.css deleted file mode 100644 index c65fa58b..00000000 --- a/webapp/src/components/loginAndRegistration/Login.css +++ /dev/null @@ -1,106 +0,0 @@ - -.wrapper{ - display: flex; - justify-content: center; - align-items: center; - min-height: 100vh; - background-color: lightblue; -} - -.wrapper2{ - width: 420px; - background-color: blue; - color: white; - border-style: 10px; - padding: 30px 40px; - border-radius: 15%; -} - -.wrapper2 h1{ - font-size: 36px; - text-align: center; -} - -.wrapper2 .input-box{ - position: relative; - width: 100%; - height: 50px; - margin: 30px 0; -} - -.input-box input{ - width: 100%; - height: 100%; - background: lightblue; - border: none; - outline: none; - border: 2px solid gray; - border-radius: 40px; - font-size: 14.5px; - color: black; -} - -.input-box input::placeholder{ - background-color: lightblue; -} - -.input-box .icon{ - position: absolute; - right: 20px; - top: 50%; - transform: translateY(-50%); - font-size: 16px; -} - -.wrapper2 .remember-forgot{ - display: flex; - justify-content: space-between; - font-size: 14.5px; - margin: -15px 0 15px; -} - -.remember-forgot label input{ - accent-color: white; - margin-right: 4px; -} - -.remember-forgot a { - color: white; - text-decoration: none; -} - -.remember-forgot a:hover{ - text-decoration: underline; -} - -.wrapper2 button{ - width: 100%; - height: 45px; - background: white; - border: none; - outline: none; - border-radius: 40px; - box-shadow: 0 0 10px black; - cursor:pointer; - font-size: 16px; - color: black; - font-weight: 700; -} - -.button-register { - color: aliceblue; - } - - .button-login { - color: aliceblue; - } - -.register-link p a { - color: white; - text-decoration: none; - font-weight: 600; -} - -.register-link p a:hover{ - text-decoration: underline; -} \ No newline at end of file diff --git a/webapp/src/components/loginAndRegistration/Login.js b/webapp/src/components/loginAndRegistration/Login.js index 0e9c8c9d..167b5ca8 100644 --- a/webapp/src/components/loginAndRegistration/Login.js +++ b/webapp/src/components/loginAndRegistration/Login.js @@ -3,6 +3,7 @@ import { FaUser, FaLock } from "react-icons/fa"; import { Link } from "react-router-dom"; import Button from "@mui/material/Button"; import { useTranslation } from "react-i18next"; +import "../../custom.css"; const Login = () => { const { t } = useTranslation("global"); diff --git a/webapp/src/components/questionView/Question.js b/webapp/src/components/questionView/Question.js index a572d7e1..41346f6a 100644 --- a/webapp/src/components/questionView/Question.js +++ b/webapp/src/components/questionView/Question.js @@ -1,3 +1,5 @@ +import "../../custom.css"; + class Question{ constructor(json){ this.question = ""; diff --git a/webapp/src/components/questionView/QuestionGenerator.js b/webapp/src/components/questionView/QuestionGenerator.js index 42049447..391047f6 100644 --- a/webapp/src/components/questionView/QuestionGenerator.js +++ b/webapp/src/components/questionView/QuestionGenerator.js @@ -1,4 +1,5 @@ import Question from './Question'; +import "../../custom.css"; class QuestionGenerator{ constructor(){ diff --git a/webapp/src/components/questionView/QuestionView.css b/webapp/src/components/questionView/QuestionView.css deleted file mode 100644 index 035cd898..00000000 --- a/webapp/src/components/questionView/QuestionView.css +++ /dev/null @@ -1,29 +0,0 @@ -.answerButton { - width: 100%; - 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; -} - -.answerPanel { - display: grid; - grid-template-columns: repeat(2, 1fr); /* 2 columns */ - grid-template-rows: repeat(2, 1fr); /* 2 rows */ - gap: 10px; /* Adjust the gap between grid items */ -} - -/* Adjust width of child elements */ -.answerPanel div > * { - width: 100%; /* Adjust as needed */ - margin:1em; -} -p{ - text-align: center; -} \ No newline at end of file diff --git a/webapp/src/components/questionView/QuestionView.js b/webapp/src/components/questionView/QuestionView.js index e116f32b..2686ae44 100644 --- a/webapp/src/components/questionView/QuestionView.js +++ b/webapp/src/components/questionView/QuestionView.js @@ -1,7 +1,6 @@ -import Question from './Question'; import QuestionGenerator from './QuestionGenerator'; import { useEffect, useState } from 'react'; -import './QuestionView.css'; +import "../../custom.css"; function QuestionView(){ @@ -30,7 +29,7 @@ function QuestionView(){ useEffect(() => {generateQuestions(numQuestion)}, []); return ( -
+
{/*Nav*/} {numQuestion >= 0 ? : diff --git a/webapp/src/custom.css b/webapp/src/custom.css new file mode 100644 index 00000000..39ce5c1b --- /dev/null +++ b/webapp/src/custom.css @@ -0,0 +1,339 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + + code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; + } + .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; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; + } + + .App-link { + color: #61dafb; + } + + @keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } + } + .navbar-container { + display: flex; + justify-content: space-between; + align-items: center; + background-color: blue; + width: 100%; + padding: 10px; + box-sizing: border-box; + } + + main { + width: 100%; + } + + .navbar-container img { + display: flex; + justify-content: space-between; + align-items: center; + width: 40px; + height: 40px; + margin-right: 10px; + } + + .navbar-text { + color: white; + } + + + .help-button { + border: none; + background: none; + + } + + .en-button, .es-button{ + margin-right: 10px; + background: rgb(171, 171, 221); + 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; + } + + .right-nav{ + display: flex; + } + + + + .help-button img { + width: 40px; + height: 40px; + } + + + .menuButton { + 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; + } + + .create-game{ + 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; + } + + + + + .divMenu { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + background-color: lightblue; + + } + + .wrapper { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + } + + .wrapper button{ + width: 100%; + 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; + } + + .wrapper link{ + font-size: 14.5px; + text-align: center; + margin: 20px 0 15px; + } + + +.wrapper{ + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background-color: lightblue; +} + +.wrapper2{ + width: 420px; + background-color: blue; + color: white; + border-style: 10px; + padding: 30px 40px; + border-radius: 15%; +} + +.wrapper2 h1{ + font-size: 36px; + text-align: center; +} + +.wrapper2 .input-box{ + position: relative; + width: 100%; + height: 50px; + margin: 30px 0; +} + +.input-box input{ + width: 100%; + height: 100%; + background: lightblue; + border: none; + outline: none; + border: 2px solid gray; + border-radius: 40px; + font-size: 14.5px; + color: black; +} + +.input-box input::placeholder{ + background-color: lightblue; +} + +.input-box .icon{ + position: absolute; + right: 20px; + top: 50%; + transform: translateY(-50%); + font-size: 16px; +} + +.wrapper2 .remember-forgot{ + display: flex; + justify-content: space-between; + font-size: 14.5px; + margin: -15px 0 15px; +} + +.remember-forgot label input{ + accent-color: white; + margin-right: 4px; +} + +.remember-forgot a { + color: white; + text-decoration: none; +} + +.remember-forgot a:hover{ + text-decoration: underline; +} + +.wrapper2 button{ + width: 100%; + height: 45px; + background: white; + border: none; + outline: none; + border-radius: 40px; + box-shadow: 0 0 10px black; + cursor:pointer; + font-size: 16px; + color: black; + font-weight: 700; +} + +.button-register { + color: aliceblue; + } + + .button-login { + color: aliceblue; + } + +.register-link p a { + color: white; + text-decoration: none; + font-weight: 600; +} + +.register-link p a:hover{ + text-decoration: underline; +} + +.answerButton { + width: 100%; + 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; +} + +.answerPanel { + display: grid; + grid-template-columns: repeat(2, 1fr); /* 2 columns */ + grid-template-rows: repeat(2, 1fr); /* 2 rows */ + gap: 10px; /* Adjust the gap between grid items */ + + +} + +/* Adjust width of child elements */ +.answerPanel div > * { + width: 100%; /* Adjust as needed */ + margin:1em; +} +p{ + text-align: center; +} + + +.question-view-container, .answerPanel { + background-color: lightblue; + padding: 20px; +} + + + + + + + + + + + + + \ No newline at end of file diff --git a/webapp/src/index.css b/webapp/src/index.css deleted file mode 100644 index ec2585e8..00000000 --- a/webapp/src/index.css +++ /dev/null @@ -1,13 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/webapp/src/index.js b/webapp/src/index.js index cc263c85..f5d8ebec 100644 --- a/webapp/src/index.js +++ b/webapp/src/index.js @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; -import './index.css'; +import './custom.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import {I18nextProvider} from "react-i18next"; diff --git a/webapp/src/locales/en/messages_en.properties b/webapp/src/locales/en/messages_en.properties deleted file mode 100644 index 103b5e56..00000000 --- a/webapp/src/locales/en/messages_en.properties +++ /dev/null @@ -1,19 +0,0 @@ -# messages_en.properties -navbar.title = Know and Win! -button.language = Español -instructionsTitle=WIQ Instructions -objective=Objective: -objectiveDescription=The objective of the game is to answer as many questions correctly as possible. -howToPlay=How to Play: -howToPlayDescription1=The game consists of a series of questions. -howToPlayDescription2=Read each question carefully. -howToPlayDescription3=Choose the correct answer from the options provided. -howToPlayDescription4=Click or tap on your selected answer to submit it. -scoring=Scoring: -scoringDescription1=Each correct answer earns you x points. -scoringDescription2=Incorrect answers do not deduct points. -timeLimit=Time Limit: -timeLimitDescription=Some game modes may have a time limit for answering each question. Be quick and accurate to maximize your score. -haveFun=Have Fun!: -haveFunDescription=Enjoy the game and test your knowledge. Good luck! - diff --git a/webapp/src/locales/es/messages_es.properties b/webapp/src/locales/es/messages_es.properties deleted file mode 100644 index a9ab7b5c..00000000 --- a/webapp/src/locales/es/messages_es.properties +++ /dev/null @@ -1,19 +0,0 @@ -# messages_es.properties -navbar.title = Saber y ganar -button.language = English -instructionsTitle=Instrucciones de WIQ -objective=Objetivo: -objectiveDescription=El objetivo del juego es responder tantas preguntas correctamente como sea posible. -howToPlay=Cómo Jugar: -howToPlayDescription1=El juego consiste en una serie de preguntas. -howToPlayDescription2=Lee cada pregunta cuidadosamente. -howToPlayDescription3=Elige la respuesta correcta de las opciones proporcionadas. -howToPlayDescription4=Haz clic o toca tu respuesta seleccionada para enviarla. -scoring=Puntuación: -scoringDescription1=Cada respuesta correcta te otorga x puntos. -scoringDescription2=Las respuestas incorrectas no restan puntos. -timeLimit=Límite de Tiempo: -timeLimitDescription=Algunos modos de juego pueden tener un límite de tiempo para responder cada pregunta. Sé rápido y preciso para maximizar tu puntuación. -haveFun=¡Diviértete!: -haveFunDescription=¡Disfruta del juego y pon a prueba tus conocimientos. ¡Buena suerte! - From 2c7c7c8aaaf35b850735e9d377f70ac5837e0746 Mon Sep 17 00:00:00 2001 From: lauratbg Date: Thu, 7 Mar 2024 23:31:56 +0100 Subject: [PATCH 2/2] Improving --- webapp/package-lock.json | 13 +++++ webapp/package.json | 1 + webapp/src/components/GameMenu/GameMenu.js | 15 +++--- webapp/src/custom.css | 57 ++++++++++++++++------ 4 files changed, 63 insertions(+), 23 deletions(-) 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;