From 3d730d4027a1dc65d226dd8a91291396d14c586e Mon Sep 17 00:00:00 2001 From: carlospelazas Date: Sat, 27 Apr 2024 19:50:26 +0200 Subject: [PATCH 1/4] fix views --- docker-compose.yml | 18 +++++++++--------- multiplayerservice/server.js | 4 ++-- webapp/src/common/Nav.tsx | 4 +++- webapp/src/common/RootLayout.scss | 5 +++++ webapp/src/common/RouterLayout.tsx | 5 +++-- webapp/src/common/nav.scss | 1 - .../game/multiplayer/GameMultiPlayer.tsx | 12 +++++++----- .../game/multiplayer/menu-multiplayer.scss | 2 +- .../game/singleplayer/GameSinglePlayer.tsx | 2 +- webapp/src/pages/game/game-page.scss | 2 +- webapp/src/pages/groups/groups-page.scss | 2 +- 11 files changed, 33 insertions(+), 24 deletions(-) create mode 100644 webapp/src/common/RootLayout.scss diff --git a/docker-compose.yml b/docker-compose.yml index 4cfa563f..3644d65a 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -119,15 +119,15 @@ services: GROUP_SERVICE_URL: http://groupservice:8005 MULTIPLAYER_SERVICE_URL: http://multiplayerservice:8006 - webapp: - container_name: webapp-${teamname:-defaultASW} - image: ghcr.io/arquisoft/wiq_en2a/webapp:latest - profiles: ["dev", "prod"] - build: ./webapp - depends_on: - - gatewayservice - ports: - - "80:80" + # webapp: + # container_name: webapp-${teamname:-defaultASW} + # image: ghcr.io/arquisoft/wiq_en2a/webapp:latest + # profiles: ["dev", "prod"] + # build: ./webapp + # depends_on: + # - gatewayservice + # ports: + # - "80:80" prometheus: image: prom/prometheus diff --git a/multiplayerservice/server.js b/multiplayerservice/server.js index 17c155e9..a96c6434 100644 --- a/multiplayerservice/server.js +++ b/multiplayerservice/server.js @@ -9,8 +9,8 @@ require('dotenv').config(); const io = socketIo(server, { cors: { //origin: 'http://conoceryvencer.xyz', - origin: process.env.WEBAPP_ENDPOINT || 'http://localhost', - //origin: 'http://localhost:3000', + //origin: process.env.WEBAPP_ENDPOINT || 'http://localhost', + origin: 'http://localhost:3000', methods: ['GET', 'POST'], credentials: true } diff --git a/webapp/src/common/Nav.tsx b/webapp/src/common/Nav.tsx index 30f843fa..67815981 100644 --- 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' } }> diff --git a/webapp/src/common/RootLayout.scss b/webapp/src/common/RootLayout.scss new file mode 100644 index 00000000..1d3fcf3d --- /dev/null +++ b/webapp/src/common/RootLayout.scss @@ -0,0 +1,5 @@ +.flex-column { + display: flex; + flex-direction: column; + min-height: 100vh; +} \ No newline at end of file diff --git a/webapp/src/common/RouterLayout.tsx b/webapp/src/common/RouterLayout.tsx index b828ad5a..84c66b17 100644 --- 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 here */ export const RouterLayout: React.FC<{}> = () => { return( - <> +
- +
) }; \ No newline at end of file diff --git a/webapp/src/common/nav.scss b/webapp/src/common/nav.scss index 62f7cff0..92fe9251 100644 --- 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 index 4c86ed01..b7e96009 100644 --- a/webapp/src/components/game/multiplayer/GameMultiPlayer.tsx +++ b/webapp/src/components/game/multiplayer/GameMultiPlayer.tsx @@ -111,12 +111,14 @@ const GameMultiPlayer: FC = () => { }; return ( - + <> {stage === 1 && } - {stage === 2 && } - {stage === 3 && } - {stage === 4 && } - + + {stage === 2 && } + {stage === 3 && } + {stage === 4 && } + + ) } diff --git a/webapp/src/components/game/multiplayer/menu-multiplayer.scss b/webapp/src/components/game/multiplayer/menu-multiplayer.scss index c234438d..f2fc4058 100644 --- 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 index cbe6e732..ac5fb3a4 100644 --- a/webapp/src/components/game/singleplayer/GameSinglePlayer.tsx +++ b/webapp/src/components/game/singleplayer/GameSinglePlayer.tsx @@ -78,7 +78,7 @@ const GameSinglePlayer = () => { }; return ( - + {currentStage === 1 && ()} {currentStage === 2 && ()} {currentStage === 3 && ( )} diff --git a/webapp/src/pages/game/game-page.scss b/webapp/src/pages/game/game-page.scss index 2696ba2f..fa3c27b0 100644 --- 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 index 419a3ade..6a7404cd 100644 --- 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; } \ No newline at end of file From 89dd61681b6ccf99328e527d6834076c6049fb20 Mon Sep 17 00:00:00 2001 From: carlospelazas Date: Sat, 27 Apr 2024 20:07:09 +0200 Subject: [PATCH 2/4] create group modal refactor --- webapp/src/components/group/Group.scss | 43 ++++++++++++++++++- .../components/group/GroupCreationModal.tsx | 26 ++++++----- webapp/src/components/group/NoGroup.tsx | 2 +- webapp/src/components/util/CloseModalIcon.tsx | 26 +++++++++++ 4 files changed, 85 insertions(+), 12 deletions(-) create mode 100644 webapp/src/components/util/CloseModalIcon.tsx diff --git a/webapp/src/components/group/Group.scss b/webapp/src/components/group/Group.scss index 31828464..701081e2 100644 --- a/webapp/src/components/group/Group.scss +++ b/webapp/src/components/group/Group.scss @@ -21,4 +21,45 @@ .group-button:hover { background-color: #0056b3; -} \ No newline at end of file +} + +.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 */ + } \ No newline at end of file diff --git a/webapp/src/components/group/GroupCreationModal.tsx b/webapp/src/components/group/GroupCreationModal.tsx index 6df262b6..6571defa 100644 --- 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 = ({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 ( -
-
-

Create group

+
+
+
+

Create group

+ +

{t('create_group_group_name')}

 @@ -83,8 +90,7 @@ export const CreationModal = (props: ActionProps) => { /> - - +
diff --git a/webapp/src/components/group/NoGroup.tsx b/webapp/src/components/group/NoGroup.tsx index 66d20792..b49aad4a 100644 --- a/webapp/src/components/group/NoGroup.tsx +++ b/webapp/src/components/group/NoGroup.tsx @@ -98,7 +98,7 @@ const NoGroup = (props: ActionProps) => setError('')} message={`Error: ${error}`} data-testid="error-snackbar"/> )} {createModal && - () + () } {joinModal && (groupsCharged && (
diff --git a/webapp/src/components/util/CloseModalIcon.tsx b/webapp/src/components/util/CloseModalIcon.tsx new file mode 100644 index 00000000..805d5fc6 --- /dev/null +++ b/webapp/src/components/util/CloseModalIcon.tsx @@ -0,0 +1,26 @@ +import { FC } from 'react' + +interface CloseModalIconProps { + +} + +const CloseModalIcon: FC = ({}) => { + return ( + + + + + ); +} + +export default CloseModalIcon \ No newline at end of file From 85f5a9a9af528514adc364d5c0f1d1a99acc9414 Mon Sep 17 00:00:00 2001 From: carlospelazas Date: Sat, 27 Apr 2024 20:13:07 +0200 Subject: [PATCH 3/4] refactor join group modal --- webapp/src/components/group/NoGroup.tsx | 25 ++++++++++++++++--- webapp/src/components/util/CloseModalIcon.tsx | 7 +----- 2 files changed, 22 insertions(+), 10 deletions(-) diff --git a/webapp/src/components/group/NoGroup.tsx b/webapp/src/components/group/NoGroup.tsx index b49aad4a..a04a7bc2 100644 --- a/webapp/src/components/group/NoGroup.tsx +++ b/webapp/src/components/group/NoGroup.tsx @@ -91,8 +91,25 @@ const NoGroup = (props: ActionProps) =>

{t('no_group_not_part')}

- - + + {error && ( setError('')} message={`Error: ${error}`} data-testid="error-snackbar"/> @@ -101,8 +118,8 @@ const NoGroup = (props: ActionProps) => () } {joinModal && (groupsCharged && ( -
-
+
+

{t('no_group_join_group')}

{groups.map((group) => ( diff --git a/webapp/src/components/util/CloseModalIcon.tsx b/webapp/src/components/util/CloseModalIcon.tsx index 805d5fc6..28363b1d 100644 --- a/webapp/src/components/util/CloseModalIcon.tsx +++ b/webapp/src/components/util/CloseModalIcon.tsx @@ -1,10 +1,5 @@ -import { FC } from 'react' -interface CloseModalIconProps { - -} - -const CloseModalIcon: FC = ({}) => { +const CloseModalIcon = () => { return ( Date: Sat, 27 Apr 2024 20:15:52 +0200 Subject: [PATCH 4/4] restore behaviour --- docker-compose.yml | 18 +++++++++--------- multiplayerservice/server.js | 4 ++-- webapp/src/pages/userProfile/index.tsx | 1 + 3 files changed, 12 insertions(+), 11 deletions(-) diff --git a/docker-compose.yml b/docker-compose.yml index 3644d65a..4cfa563f 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -119,15 +119,15 @@ services: GROUP_SERVICE_URL: http://groupservice:8005 MULTIPLAYER_SERVICE_URL: http://multiplayerservice:8006 - # webapp: - # container_name: webapp-${teamname:-defaultASW} - # image: ghcr.io/arquisoft/wiq_en2a/webapp:latest - # profiles: ["dev", "prod"] - # build: ./webapp - # depends_on: - # - gatewayservice - # ports: - # - "80:80" + webapp: + container_name: webapp-${teamname:-defaultASW} + image: ghcr.io/arquisoft/wiq_en2a/webapp:latest + profiles: ["dev", "prod"] + build: ./webapp + depends_on: + - gatewayservice + ports: + - "80:80" prometheus: image: prom/prometheus diff --git a/multiplayerservice/server.js b/multiplayerservice/server.js index a96c6434..17c155e9 100644 --- a/multiplayerservice/server.js +++ b/multiplayerservice/server.js @@ -9,8 +9,8 @@ require('dotenv').config(); const io = socketIo(server, { cors: { //origin: 'http://conoceryvencer.xyz', - //origin: process.env.WEBAPP_ENDPOINT || 'http://localhost', - origin: 'http://localhost:3000', + origin: process.env.WEBAPP_ENDPOINT || 'http://localhost', + //origin: 'http://localhost:3000', methods: ['GET', 'POST'], credentials: true } diff --git a/webapp/src/pages/userProfile/index.tsx b/webapp/src/pages/userProfile/index.tsx index a22c8efc..4b5dc969 100644 --- 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);