Arquisoft · pelazas · Mar 12, 2024 · Mar 5, 2024 · Mar 5, 2024 · Mar 5, 2024
diff --git a/users/userservice/util/ValidateUUID.js b/users/userservice/util/ValidateUUID.js
@@ -1,7 +1,6 @@
-
 function isValidUuidV4(uuidString) {
-  const regex = /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
-  return regex.test(uuidString);
-  }
-
-module.exports = isValidUuidV4;
+    const regex = /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+    return regex.test(uuidString);
+    }
+  
+  module.exports = isValidUuidV4;
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
diff --git a/webapp/package.json b/webapp/package.json
@@ -61,6 +61,7 @@
     "mongodb-memory-server": "^9.1.4",
     "puppeteer": "^2.1.1",
     "react-i18next": "^11.6.0",
+    "sass": "^1.71.1",
     "serve": "^14.2.1",
     "start-server-and-test": "^2.0.3",
     "typescript": "4.9.5"

diff --git a/webapp/public/favicon.ico b/webapp/public/favicon.ico
diff --git a/webapp/public/index.html b/webapp/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Conocer y Vencer</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/webapp/public/logo192.png b/webapp/public/logo192.png
diff --git a/webapp/public/logo512.png b/webapp/public/logo512.png
diff --git a/webapp/public/manifest.json b/webapp/public/manifest.json
@@ -1,21 +1,11 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Conocer y Vencer",
+  "name": "Conocer y Vencer: a Web-based Saber y Ganar-style game",
   "icons": [
     {
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

diff --git a/webapp/src/App.css → webapp/src/App.scss b/webapp/src/App.css → webapp/src/App.scss
diff --git a/webapp/src/Router.tsx b/webapp/src/Router.tsx
@@ -11,8 +11,8 @@ export const AppRouter: React.FC<{}> = () => {
   return (
     <Routes>
       <Route element={<RouterLayout />}>
-        /* when accessing /game or the other paths, it will be shown as the  
-            outlet inside the RouterLayout*/
+        { /* When accessing /game or the other paths, it will be shown as the  
+            outlet inside RouterLayout*/ }
         <Route path="/game" element={<GamePage />} />
         <Route path="/groups" element={<GroupsPage />} />
         <Route path="/scoreboard" element={<ScoreboardPage />} />

diff --git a/webapp/src/common/Nav.tsx b/webapp/src/common/Nav.tsx
@@ -1,10 +1,13 @@
-import React, { useState } from 'react';
-import './nav.css';
+import React, { useState, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import './nav.scss';
 import { useTranslation } from 'react-i18next';
 import {AppBar, Container, Toolbar, Grid, Stack, Button, Menu, MenuItem} from "@mui/material";
 import { useNavigate } from "react-router-dom";
 
-const NavBar: React.FC<{}> = () => {
+const NavBar: React.FC<{}> = () => 
+{
+    const location = useLocation();
     const { t } = useTranslation();
     const navigate = useNavigate();
     const value :string= JSON.stringify( localStorage.getItem("isAuthenticated")).replace("\"","").replace("\"","");
@@ -23,15 +26,42 @@ const NavBar: React.FC<{}> = () => {
         navigate("/");
     } 
 
+    useEffect(() => {
+        switch (location.pathname) {
+          case '/game':
+            document.title = 'Conocer y Vencer - Game';
+            break;
+          case '/groups':
+            document.title = 'Conocer y Vencer - Groups';
+            break;
+          case '/scoreboard':
+            document.title = 'Conocer y Vencer - Scoreboard';
+            break;
+          case '/profile':
+            document.title = 'Conocer y Vencer - Profile';
+            break;
+          default:
+            document.title = 'Conocer y Vencer';
+        }
+      }, [location.pathname]);
+
     return (
-        <AppBar className="nav_appBar">
+        <AppBar className="nav-appBar" sx={
+            { 
+                display: 'flex', 
+                flexDirection: 'row',
+                flexWrap: 'nowrap', 
+                alignItems: 'flex-start', 
+                justifyContent: 'flex-start' 
+            }
+        }>
             <Toolbar>
                 <Container maxWidth="xl">
                     <Grid
                     container
                     direction="row"
                     alignItems="center"
-                    justifyContent="space-between"
+                    spacing={4}
                     >
                         <Grid item className="logo">
                             {t('app_name')}
@@ -47,20 +77,21 @@ const NavBar: React.FC<{}> = () => {
                                 <Button variant="contained" onClick={() => navigate("/scoreboard")}>
                                     {t('nav_scoreboard')}
                                 </Button>
-                            </Stack>
-                        </Grid>
-                        <Grid >
+                                <Grid >
                             <Button variant="text" 
                                 id="menu-button" 
                                 color='inherit' 
                                 onClick={handleClick} 
-                                aria-control={open? 'menu' : undefined} 
+                                aria-controls={open? 'menu' : undefined} 
                                 aria-haspopup='true' aria-expanded={open? 'true' : undefined}>
                                 {user}
                             </Button>
                         </Grid>
+                            </Stack>
+
+                        </Grid>
+
                     </Grid>
-
                     <Menu id="menu" open={open} MenuListProps={{'aria-labelledby':'menu-button'}} 
                         onClose={()=>handleClose()} anchorEl={anchorEl}>
                         <MenuItem onClick={()=> navigate("/profile")}>My account</MenuItem>

diff --git a/webapp/src/common/nav.css b/webapp/src/common/nav.css
diff --git a/webapp/src/common/nav.scss b/webapp/src/common/nav.scss
@@ -0,0 +1,21 @@
+.navbar {
+    width:100%;
+    height: 50px;
+    display: flex;
+    align-items: center; 
+}
+
+.nav-appBar{
+    height: 65px;
+    background: #D9D9D9;
+    position: fixed;
+}
+
+.logo{
+    font-weight: 500;
+    font-size: xx-large;
+}
+
+.link{
+    text-decoration: none;
+}
diff --git a/webapp/src/components/Init.tsx b/webapp/src/components/Init.tsx
diff --git a/webapp/src/components/ScoreBoard.tsx b/webapp/src/components/ScoreBoard.tsx
diff --git a/webapp/src/components/GLogoutButton.tsx → ...mponents/g-login-button/GLoginButton.scss b/webapp/src/components/GLogoutButton.tsx → ...mponents/g-login-button/GLoginButton.scss
diff --git a/webapp/src/components/g-login-button/GLoginButton.test.js b/webapp/src/components/g-login-button/GLoginButton.test.js
diff --git a/webapp/src/components/GLoginButton.tsx → ...omponents/g-login-button/GLoginButton.tsx b/webapp/src/components/GLoginButton.tsx → ...omponents/g-login-button/GLoginButton.tsx
@@ -1,14 +1,16 @@
-
 import { GoogleLogin } from '@react-oauth/google';
+import './GLoginButton.scss';
 
-const GLoginButton = () => {
-
+const GLoginButton = () => 
+{
     return(
       <GoogleLogin
-         onSuccess={(credentialResponse) => {
+         onSuccess={(credentialResponse) => 
+            {
                 console.log(credentialResponse);
             }}
-         onError={() => {
+         onError={() => 
+            {
                 console.log('Login Failed');
             }}
     />)

diff --git a/webapp/src/components/g-logout-button/GLogoutButton.scss b/webapp/src/components/g-logout-button/GLogoutButton.scss
diff --git a/webapp/src/components/g-logout-button/GLogoutButton.test.js b/webapp/src/components/g-logout-button/GLogoutButton.test.js
diff --git a/webapp/src/components/g-logout-button/GLogoutButton.tsx b/webapp/src/components/g-logout-button/GLogoutButton.tsx
@@ -0,0 +1 @@
+import './GLogoutButton.scss';
diff --git a/webapp/src/components/game-layout/GameLayout.scss b/webapp/src/components/game-layout/GameLayout.scss
diff --git a/webapp/src/components/game-layout/GameLayout.test.js b/webapp/src/components/game-layout/GameLayout.test.js
diff --git a/webapp/src/components/GameLayout.tsx → ...src/components/game-layout/GameLayout.tsx b/webapp/src/components/GameLayout.tsx → ...src/components/game-layout/GameLayout.tsx
@@ -1,15 +1,18 @@
 import { useState } from "react";
-import Game from "./game/Game";
-import Group from "./Group";
-import Scoreboard from "./ScoreBoard";
+import Game from "../game/Game";
+import Group from "../group/Group";
+import Scoreboard from "../scoreboard/Scoreboard";
 
 
 const GameLayout = () => {
 
 const [currentView, setCurrentView] = useState("Game");
+
 
+
 return(
 
+
     <head className="GameHead">
     <nav className="GameNav">
         <ul>

diff --git a/webapp/src/components/game/Game.scss b/webapp/src/components/game/Game.scss
diff --git a/webapp/src/components/game/Game.test.js b/webapp/src/components/game/Game.test.js
diff --git a/webapp/src/components/group/Group.scss b/webapp/src/components/group/Group.scss
diff --git a/webapp/src/components/group/Group.test.js b/webapp/src/components/group/Group.test.js
diff --git a/webapp/src/components/Group.tsx → webapp/src/components/group/Group.tsx b/webapp/src/components/Group.tsx → webapp/src/components/group/Group.tsx
@@ -1,7 +1,7 @@
+import './Group.scss';
 
-
-const Group=()=>{
-
+const Group = () => 
+{
     return(
         <div>
             <h1>Group</h1>

diff --git a/webapp/src/components/init/Init.scss b/webapp/src/components/init/Init.scss
diff --git a/webapp/src/components/init/Init.test.js b/webapp/src/components/init/Init.test.js
diff --git a/webapp/src/components/init/Init.tsx b/webapp/src/components/init/Init.tsx
@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {Button, Stack} from "@mui/material";
+import GLoginButton from '../g-login-button/GLoginButton';
+import './Init.scss';
+
+type ActionProps = {
+    changeView:(arg:boolean)=> void;
+}
+
+const Init = (props:ActionProps) =>{
+  const { t } = useTranslation()
+  const [, setCurrentView] = useState<'register' | 'login'>('register');
+
+  const handleViewChange = (isLoginView: boolean) => {
+    setCurrentView(isLoginView ? 'login' : 'register');
+    props.changeView(isLoginView);
+    document.title = isLoginView ? t('Conocer y Vencer - Login') : t('Conocer y Vencer - Register');
+  };
+
+  return (
+    <Stack direction="column">
+      <Button onClick={() => handleViewChange(false)} size='large'>
+        {t('register')}
+      </Button>
+      <Button onClick={() => handleViewChange(true)} size='large' sx={{ marginBottom: 2 }}>
+        {t('login')}
+      </Button>
+      <GLoginButton />
+    </Stack>
+  );
+};
+
+export default Init;
diff --git a/webapp/src/components/login/Login.scss b/webapp/src/components/login/Login.scss
diff --git a/webapp/src/components/login/Login.test.js b/webapp/src/components/login/Login.test.js