Merge pull request #116 from Arquisoft/fix-frontend

Fix frontend
Arquisoft · Apr 27, 2024 · de6d17a · de6d17a
2 parents 30ac9cf + cd0e88b
commit de6d17a
Show file tree

Hide file tree

Showing 14 changed files with 124 additions and 29 deletions.
diff --git a/webapp/src/common/Nav.tsx b/webapp/src/common/Nav.tsx
@@ -71,7 +71,9 @@ const NavBar: React.FC<{}> = () =>
                 flexWrap: 'nowrap', 
                 alignItems: 'flex-start', 
                 justifyContent: 'flex-start',
-                width: '100%' 
+                width: '100%',
+                position: 'inherit',
+                marginBottom: '10px'
             }
         }>
             <Toolbar sx={{ width: '100%' }}>

diff --git a/webapp/src/common/RootLayout.scss b/webapp/src/common/RootLayout.scss
@@ -0,0 +1,5 @@
+.flex-column {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
diff --git a/webapp/src/common/RouterLayout.tsx b/webapp/src/common/RouterLayout.tsx
@@ -1,13 +1,14 @@
 import React from "react";
 import { Outlet } from "react-router-dom";
 import  NavBar  from "./Nav";
+import "./RootLayout.scss"
 
 /* This shows the NavBar and behind the element passed <RouterLayout> here </RouterLayout> */
 export const RouterLayout: React.FC<{}> = () => {
   return(
-    <>
+    <div className="flex-column">
       <NavBar />
       <Outlet />
-    </>
+    </div>
   )
 };
diff --git a/webapp/src/common/nav.scss b/webapp/src/common/nav.scss
@@ -8,7 +8,6 @@
 .nav-appBar{
   height: 65px;
   background: #D9D9D9;
-  position: fixed;
 }
 
 .nav-profile-picture{

diff --git a/webapp/src/components/game/multiplayer/GameMultiPlayer.tsx b/webapp/src/components/game/multiplayer/GameMultiPlayer.tsx
@@ -111,12 +111,14 @@ const GameMultiPlayer: FC<GameMultiPlayerProps> = () => {
   };
 
   return (
-    <Container>
+    <>
       {stage === 1 && <MenuMultiplayer socket={socket} handleCurrentStage={handleCurrentStage} handlePartyCode={handlePartyCode}/>}
-      {stage === 2 && <LobbyMultiPlayer socket={socket} handleCurrentStage={handleCurrentStage} partyCode={partyCode} users={users}/>}
-      {stage === 3 && <PlayingGame socket={socket} setCurrentStage={handleCurrentStage} questions={questions} partyCode={partyCode}/>}
-      {stage === 4 && <ScoreboardGame userScoresMultiPlayer={sortedUsersByPoints}/>}
-    </Container>
+      <Container>
+        {stage === 2 && <LobbyMultiPlayer socket={socket} handleCurrentStage={handleCurrentStage} partyCode={partyCode} users={users}/>}
+        {stage === 3 && <PlayingGame socket={socket} setCurrentStage={handleCurrentStage} questions={questions} partyCode={partyCode}/>}
+        {stage === 4 && <ScoreboardGame userScoresMultiPlayer={sortedUsersByPoints}/>}
+      </Container>
+    </>
   )
 }
 

diff --git a/webapp/src/components/game/multiplayer/menu-multiplayer.scss b/webapp/src/components/game/multiplayer/menu-multiplayer.scss
@@ -1,9 +1,9 @@
 .container {
     display: flex;
+    flex: 1;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    height: 100vh;
 }
 
 .create-party-button {

diff --git a/webapp/src/components/game/singleplayer/GameSinglePlayer.tsx b/webapp/src/components/game/singleplayer/GameSinglePlayer.tsx
@@ -78,7 +78,7 @@ const GameSinglePlayer = () => {
   };
 
   return (
-    <Container  sx={{ mt: 9 }}>
+    <Container>
       {currentStage === 1 && (<LobbyGame  players={players} setPlayers={handlePlayers} setCurrentStage={handleCurrentStage} isFetched={fetched}/>)}
       {currentStage === 2 && (<PlayingGame questions={questions} setCurrentStage={handleCurrentStage} setPlayers={handlePlayers} players={players}/>)}
       {currentStage === 3 && (<ScoreboardGame userScoresSinglePlayer={players}/> )}

diff --git a/webapp/src/components/group/Group.scss b/webapp/src/components/group/Group.scss
@@ -21,4 +21,45 @@
 
 .group-button:hover {
     background-color: #0056b3;
-}
+}
+
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5); /* Dark overlay with half opacity */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+.modal {
+    background-color: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Optional: Add a shadow effect */
+  }
+
+.close-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 16px;
+    color: #333; /* Example color */
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+.close-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 16px;
+    color: #333; /* Example color */
+  }
diff --git a/webapp/src/components/group/GroupCreationModal.tsx b/webapp/src/components/group/GroupCreationModal.tsx
@@ -1,17 +1,19 @@
-import  { useState, ChangeEvent } from 'react';
+import  { useState, ChangeEvent, FC } from 'react';
 import axios from 'axios';
 import { Button, TextField, Grid, RadioGroup, FormControlLabel, Radio } from "@mui/material";
 import { useTranslation } from 'react-i18next';
+import "./Group.scss"
+import CloseModalIcon from '../util/CloseModalIcon';
 
 const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
 type ActionProps = {
     nowHasGroup:()=> void;
     setError:(error:any) => void;
-    closeModal:() => void;
+    toggleCreateModal: () => void
 }
 
-export const CreationModal = (props: ActionProps) => {
+export const CreationModal: FC<ActionProps> = ({nowHasGroup, setError, toggleCreateModal}) => {
     const { t } = useTranslation();
     const [isPublic, setPublic] = useState(true);
     const [groupName, setGroupName] = useState('');
@@ -22,10 +24,10 @@ export const CreationModal = (props: ActionProps) => {
     const createGroup = async () =>{
         try{
             await axios.post(`${apiEndpoint}/createGroup`, { groupName, creatorUUID, description, isPublic }).then( res => {
-                props.nowHasGroup();
+                nowHasGroup();
             });
         }catch (error:any) {
-            props.setError(error.response.data.error);
+            setError(error.response.data.error);
         }
     }
 
@@ -43,9 +45,14 @@ export const CreationModal = (props: ActionProps) => {
     };
 
     return (
-        <div className="modal" data-testid="create-group-modal">
-            <div className="modal-content">
-                <h2>Create group</h2>
+        <div className="modal-overlay" data-testid="create-group-modal">
+            <div className="modal">
+                <div className="modal-header">
+                    <h2>Create group</h2>
+                    <button className="close-button" onClick={toggleCreateModal}>
+                        <CloseModalIcon />
+                    </button>
+                </div>
                 <Grid >
                     <Grid container padding={2} >
                         <Grid item xs={5} ><p>{t('create_group_group_name')}</p></Grid>
@@ -83,8 +90,7 @@ export const CreationModal = (props: ActionProps) => {
                         /></Grid>
                     </Grid>
                     <Grid container padding={2} >
-                        <Grid item xs={6} ><Button onClick={props.closeModal}>{t('create_group_button')}</Button></Grid>
-                        <Grid item xs={6} ><Button onClick={createGroup}>{t('close_button')}</Button></Grid>
+                        <Grid item xs={6} ><Button onClick={createGroup}>{t('create_group_button')}</Button></Grid>
                     </Grid>
                 </Grid>
             </div>

diff --git a/webapp/src/components/group/NoGroup.tsx b/webapp/src/components/group/NoGroup.tsx
@@ -91,18 +91,35 @@ const NoGroup = (props: ActionProps) =>
         <Container className="groups-container" data-testid="no-group-container">
             <Stack className='groups-container'> 
                 <h2 style={{ marginBottom: '20px' }}>{t('no_group_not_part')}</h2>
-                <button className='group-button' onClick={toggleJoinModal} data-testid="join-group-button">{t('no_group_join')}</button>
-                <button className='group-button' onClick={toggleCreateModal} data-testid="create-group-button">{t('no_group_create')}</button>
+                <button className='group-button' 
+                    onClick={() => {
+                        toggleJoinModal();
+                        if(createModal)
+                            toggleCreateModal();
+
+                        }}
+                    data-testid="join-group-button">
+                        {t('no_group_join')}
+                </button>
+                <button className='group-button'
+                    onClick={() => {
+                        toggleCreateModal();
+                        if(joinModal)
+                            toggleJoinModal();
+                    }} 
+                    data-testid="create-group-button">
+                        {t('no_group_create')}
+                </button>
             </Stack>
             {error && (
                 <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} data-testid="error-snackbar"/>
             )}
             {createModal && 
-                (<CreationModal data-testid="create-group-modal" nowHasGroup={props.nowHasGroup} setError={setError} closeModal={toggleCreateModal}/>)
+                (<CreationModal data-testid="create-group-modal" nowHasGroup={props.nowHasGroup} setError={setError} toggleCreateModal={toggleCreateModal}/>)
             }
             {joinModal && (groupsCharged && (
-                <div className="modal" data-testid="join-group-modal">
-                    <div className="modal-content">
+                <div className="modal-overlay" data-testid="join-group-modal">
+                    <div className="modal">
                         <h2>{t('no_group_join_group')}</h2>
                         <Grid >
                             {groups.map((group) => (

diff --git a/webapp/src/components/util/CloseModalIcon.tsx b/webapp/src/components/util/CloseModalIcon.tsx
@@ -0,0 +1,21 @@
+
+const CloseModalIcon = () => {
+    return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="red"
+          strokeWidth="3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <line x1="18" y1="6" x2="6" y2="18" />
+          <line x1="6" y1="6" x2="18" y2="18" />
+        </svg>
+      );
+}
+
+export default CloseModalIcon
diff --git a/webapp/src/pages/game/game-page.scss b/webapp/src/pages/game/game-page.scss
@@ -1,9 +1,9 @@
 .game-page-container {
   display: flex;
+  flex: 1;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 100vh;
 }
 
 .game-page-button {

diff --git a/webapp/src/pages/groups/groups-page.scss b/webapp/src/pages/groups/groups-page.scss
@@ -1,7 +1,7 @@
 .groups-container{
     display: flex;
+    flex: 1;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    height: 100vh;
 }
diff --git a/webapp/src/pages/userProfile/index.tsx b/webapp/src/pages/userProfile/index.tsx
@@ -7,6 +7,7 @@ import axios from 'axios';
 const ProfilePage = () => {
   const { t } = useTranslation();
   const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
+  console.log(process.env.REACT_APP_API_ENDPOINT)
   const uuid = localStorage.getItem('uuid');
   const [profileInfo, setProfileInfo] = useState(null);