Merge pull request #148 from Arquisoft/footer

Footer and about

webapp/src/App.js

@@ -2,6 +2,9 @@ import React,{ useEffect }  from 'react';
 import QuestionView from './components/questionView/QuestionView';
 import GameMenu from './components/GameMenu/GameMenu';
 import Navbar from './components/fragments/NavBar';
+import Footer from './components/fragments/Footer';
+import About from './components/fragments/About';
+
 import ErrorPage from './components/fragments/ErrorPage';
 import Home from './components/Home/Home';
 import Login from './components/loginAndRegistration/Login';
@@ -28,7 +31,8 @@ function App() {
     <Router>
         <div style={{ position: 'relative', minHeight: '100vh' }}>
           <Navbar style={{ width: '100%' }} /> 
-          <Container component="main" className="main" maxWidth="lg" style={{ paddingTop: '64px' }}>
+        <Container component="main" className="main" maxWidth="lg" style={{ paddingTop: '64px' }}>
+
             <Routes>
               <Route path="/" element={<Navigate to="/home" />} /> 
               <Route path="/home" element={isLoggedIn ? <GameMenu /> : <Home />} />
@@ -40,10 +44,14 @@ function App() {
               <Route path="/historical" element={isLoggedIn ? <HistoricalView /> : <Login />} />
               <Route path="/configurator" element={isLoggedIn ? <GameConfigurator /> : <Login />}/>
               <Route path="/ranking" element={isLoggedIn ? <RankingView /> : <Login />} />
+              <Route path="/about" element={<About /> } />
               <Route path="*" element={<ErrorPage />} />
             </Routes>
           </Container>
+          <Footer style={{ width: '100%' }} /> 
+
         </div>
+
     </Router>
   );
 }

webapp/src/components/fragments/About.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useTranslation } from "react-i18next";
+import '../../custom.css';
+
+function About() {    
+    const t = useTranslation("global").t;
+
+    const imageNames = ["person1.jpg", "person2.jpg", "person3.jpg", "person4.jpg", "person5.jpg", "person6.jpg"];
+
+    return (
+        <div>
+            <h1>{t("about.hello")}</h1>
+            <h2>{t("about.team")}</h2>
+            <ul className="person-list">
+                {imageNames.map((imageName, index) => (
+                    <li key={index} className="person-item">
+                        <img src={`/${imageName}`} alt={`Person ${index + 1}`} className="person-image" />
+                        {t(`about.name${index + 1}`)}
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}
+
+export default About;

webapp/src/components/fragments/About.test.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import About from './About';
+
+
+// Mocking useTranslation hook
+jest.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: key => key }),
+  }));
+
+  describe('About', () => {
+    test('renders about page', () => {
+      render(
+        <Router>
+            <About />
+        </Router>
+      );
+
+      expect(screen.getByText('about.hello')).toBeInTheDocument();
+
+      expect(screen.getByText('about.name1')).toBeInTheDocument();
+      expect(screen.getByText('about.name2')).toBeInTheDocument();
+      expect(screen.getByText('about.name3')).toBeInTheDocument();
+      expect(screen.getByText('about.name4')).toBeInTheDocument();
+      expect(screen.getByText('about.name5')).toBeInTheDocument();
+      expect(screen.getByText('about.name6')).toBeInTheDocument();
+
+
+    });
+  });

webapp/src/components/fragments/BackButtonToGameMenu.test.js

@@ -18,7 +18,7 @@ global.i18en = i18en;
 describe('BackButtonToGameMenu component', () => {
 
     it('renders option to go back to the game menu', () => {
-        render(<MemoryRouter><BackButtonToGameMenu t={i18n.t} /></MemoryRouter>);
+        render(<MemoryRouter><BackButtonToGameMenu t={i18en.t} /></MemoryRouter>);
         const text = screen.getByText((content, element) => {
             const regex = new RegExp(i18en.t("gameMenu.back"));
             return regex.test(content);

webapp/src/components/fragments/Footer.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import '../../custom.css';
+import { Link } from 'react-router-dom';
+import { useTranslation } from "react-i18next";
+
+function Footer() {
+    const [t] = useTranslation("global");
+
+    return (
+        <footer className="footer-container">
+            <div></div>
+                <a href="http://wiqen1b.serveminecraft.net:8000/api-doc/" className="API" target="_blank" rel="noopener noreferrer">
+                    <p className='link-text'>{t("footer.API")}</p>
+                </a>
+
+                    <Link to="/about" className="about">
+                        <p className='link-text'>{t("footer.about")}</p>
+                    </Link>
+
+                    <a href="https://arquisoft.github.io/wiq_en1b/" className="ARC" target="_blank" rel="noopener noreferrer">
+                        <p className='link-text'>{t("footer.ARC")}</p>
+                     </a>
+                     <div></div>
+
+        </footer>
+    );
+}
+
+export default Footer;

webapp/src/components/fragments/Footer.test.js

@@ -0,0 +1,34 @@
+import { render , screen } from '@testing-library/react';
+import { initReactI18next } from 'react-i18next';
+import i18en from 'i18next';
+
+import App from '../../App'
+
+i18en.use(initReactI18next).init({
+    resources: {},
+    lng: 'en',
+    interpolation:{
+        escapeValue: false,
+    }
+});
+global.i18en = i18en;
+
+describe('Footer fragment', () => {
+
+
+
+    test('Footer renders correctly', async () => {
+        render(
+            <App />
+        );
+        expect(screen.getByText('footer.about')).toBeInTheDocument();
+        expect(screen.getByText('footer.API')).toBeInTheDocument();
+        expect(screen.getByText('footer.ARC')).toBeInTheDocument();
+
+
+
+
+
+      });
+});
+

webapp/src/custom.css

@@ -20,7 +20,23 @@
   overflow: hidden;
   height: 100vh;
 }
+/* About.css */
+.person-list {
+  list-style: none;
+  padding: 0;
+}
+
+.person-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
 
+.person-image {
+  width: 50px; 
+  height: auto; 
+  margin-right: 10px; 
+}
 
 
 /*---------------------------Navbar---------------------------*/
@@ -36,6 +52,31 @@
   left: 0;
   top: 0;
 }
+
+.footer-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: #000;
+  color: white;
+  width: 100vw;
+  padding: 5px;
+  box-sizing: border-box;
+  position: fixed;
+  height: 30px;
+}
+
+
+
+.about, .API, .ARC{
+  color: white;
+}
+
+
+
 .left-nav{
   display:flex;
   align-items: left;
@@ -104,7 +145,8 @@
   .form {
     display: flex;
     flex-direction: column;
-    gap: 20px;
+    gap: 10px;
+    padding-top: 0;
     padding-left: 2em;
     padding-right: 2em;
     padding-bottom: 0.4em;
@@ -116,7 +158,7 @@
 
   .card {
     background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%);
-    border-radius: 22px;
+    border-radius: 15px;
     transition: all 0.3s;
   }
 
@@ -139,7 +181,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    margin-bottom: 20px; 
+    margin-bottom: 10px; 
   }
 
   .input-box p {

webapp/src/translations/en/global.json

@@ -129,7 +129,22 @@
       "error":{
         "error":"Error",
         "sorry":"We're sorry, this page does not exist. Don't be angry, I'm just a little cat."
-        }
+      },
+      "footer":{
+        "about": "About us",
+        "API": "API-Doc",
+        "ARC": "Arc42-Doc"
+      },
+      "about":{
+        "hello": "Hello there!",
+        "team": "We're the awesome bunch from en01b! We hope you like our game.",
+        "name1": "Mario Junquera Rojas",
+        "name2": "Lucia Ruiz Núñez",
+        "name3": "Daniel Sinne Argüelles",
+        "name4": "Jorge Cano Martínez",
+        "name5": "Ahmet Erdem Yabaci",
+        "name6": "Laura Gómez Menéndez"
+      }
 }
 
 

webapp/src/translations/es/global.json

@@ -130,7 +130,23 @@
       "num_games":"Juegos Competitivos",
       "search":"Buscar",
       "enter_username":"Inserta usuario..."
-    }
+    },
+    "footer":{
+        "about": "Sobre nosotros",
+        "API": "API-Doc",
+        "ARC": "Arc42-Doc"
+      },
+
+      "about":{
+    "hello": "¡Hola!",
+    "team": "¡Somos el increíble grupo en01b! Esperamos que les guste nuestro juego.",
+    "name1": "Mario Junquera Rojas",
+    "name2": "Lucía Ruiz Núñez",
+    "name3": "Daniel Sinne Argüelles",
+    "name4": "Jorge Cano Martínez",
+    "name5": "Ahmet Erdem Yabacı",
+    "name6": "Laura Gómez Menéndez"
+}
 
   }
 

webapp/src/translations/tk/global.json

@@ -128,5 +128,20 @@
   "error":{
   "error":"Hata",
   "sorry":"Üzgünüz, bu sayfa mevcut değil. Kızma, ben sadece küçük bir kediğim."
-  }
+  },
+  "footer":{
+    "about": "Hakkımızda",
+    "API": "API Belgeleri",
+    "ARC": "Arc42 Belgeleri"
+},
+  "about":{
+    "hello": "Merhaba!",
+    "team": "Biz, en01b'den harika bir ekipiz! Oyunumuzu beğenmenizi umuyoruz.",
+    "name1": "Mario Junquera Rojas",
+    "name2": "Lucía Ruiz Núñez",
+    "name3": "Daniel Sinne Argüelles",
+    "name4": "Jorge Cano Martínez",
+    "name5": "Ahmet Erdem Yabacı",
+    "name6": "Laura Gómez Menéndez"
+}
   }