Merge pull request #148 from Arquisoft/develop

🔀 Game design responsive

.github/workflows/build.yml

@@ -23,6 +23,8 @@ jobs:
     - run: npm --prefix webapp ci
     - run: npm --prefix users/authservice test -- --coverage
     - run: npm --prefix users/userservice test -- --coverage
+    - run: npm --prefix questions/creationservice test -- --coverage
+    - run: npm --prefix questions/retrieveservice test -- --coverage
     - run: npm --prefix gatewayservice test -- --coverage
     - run: npm --prefix webapp test -- --coverage
     - name: Analyze with SonarCloud

.github/workflows/release.yml

@@ -20,6 +20,8 @@ jobs:
     - run: npm --prefix webapp ci
     - run: npm --prefix users/authservice test -- --coverage
     - run: npm --prefix users/userservice test -- --coverage
+    - run: npm --prefix questions/creationservice test -- --coverage
+    - run: npm --prefix questions/retrieveservice test -- --coverage
     - run: npm --prefix gatewayservice test -- --coverage
     - run: npm --prefix webapp test -- --coverage
     - name: Analyze with SonarCloud

docs/index.adoc

@@ -6,7 +6,7 @@
 // configure EN settings for asciidoc
 include::src/config.adoc[]
 
-= image:arc42-logo.png[arc42] Template
+= image:arc42-logo.png[arc42] WIQ ES-2B Documentation
 :revnumber: 8.2 EN
 :revdate: January 2023
 :revremark: (based upon AsciiDoc version)

questions/creationservice/creation-service.test.js

@@ -0,0 +1,25 @@
+const request = require('supertest');
+const { MongoMemoryServer } = require('mongodb-memory-server');
+
+let mongoServer;
+let app;
+
+beforeAll(async () => {
+  mongoServer = await MongoMemoryServer.create();
+  const mongoUri = mongoServer.getUri();
+  process.env.MONGODB_URI = mongoUri;
+  app = require('./creation-service'); 
+});
+
+afterAll(async () => {
+    app.close();
+    await mongoServer.stop();
+});
+
+describe('Retrieve Service', () => {
+  it('should add a new user on GET /createquestion', async () => {
+
+    const response = await request(app).get('/createquestion');
+    expect(response.status).toBe(200);
+  });
+});

questions/retrieveservice/retrieve-service.test.js

@@ -0,0 +1,25 @@
+const request = require('supertest');
+const { MongoMemoryServer } = require('mongodb-memory-server');
+
+let mongoServer;
+let app;
+
+beforeAll(async () => {
+  mongoServer = await MongoMemoryServer.create();
+  const mongoUri = mongoServer.getUri();
+  process.env.MONGODB_URI = mongoUri;
+  app = require('./retrieve-service'); 
+});
+
+afterAll(async () => {
+    app.close();
+    await mongoServer.stop();
+});
+
+describe('Retrieve Service', () => {
+  it('should add a new user on GET /getquestionshistory', async () => {
+
+    const response = await request(app).get('/getquestionshistory');
+    expect(response.status).toBe(200);
+  });
+});

sonar-project.properties

@@ -15,7 +15,7 @@ sonar.projectName=wiq_es2b
 
 
 sonar.coverage.exclusions=**/*.test.js
-sonar.sources=webapp/src/components,users/authservice,users/userservice,gatewayservice
+sonar.sources=webapp/src/components,users/authservice,users/userservice,questions/creationservice,questions/retrieveservice,gatewayservice
 sonar.sourceEncoding=UTF-8
 sonar.exclusions=node_modules/**
 sonar.javascript.lcov.reportPaths=**/coverage/lcov.info

webapp/src/App.js

@@ -13,34 +13,32 @@ function App() {
   const handleToggleView = () => {
     setShowLogin(!showLogin);
   };
-  
+
 
   return (
+    <Container component="main" maxWidth="xs">
+      <CssBaseline />
+      <div title='main'>
 
-      <Container component="main" maxWidth="xs">
-        <CssBaseline />
-        <div title='main'>
 
-
         <Typography component="h1" variant="h5" align="center" sx={{ marginTop: 2 }}>
           Bienvenido a WIQ 2024 del curso de Arquitectura del Software
         </Typography>
-              {showLogin ? <Login /> : <AddUser />}
-              <Typography component="div" align="center" sx={{ marginTop: 2 }}>
-                {showLogin ? (
-                  <Link name="gotoregister" component="button" variant="body2" onClick={handleToggleView}>
-                    ¿No tienes una cuenta? Regístrate aquí.
-                  </Link>
-                ) : (
-                  <Link component="button" variant="body2" onClick={handleToggleView}>
-                    ¿Ya tienes cuenta? Inicia sesión aquí.
-                  </Link>
-                )}
-
-              </Typography>
-              </div>
-      </Container>
+        {showLogin ? <Login /> : <AddUser />}
+        <Typography component="div" align="center" sx={{ marginTop: 2 }}>
+          {showLogin ? (
+            <Link name="gotoregister" component="button" variant="body2" onClick={handleToggleView}>
+              ¿No tienes una cuenta? Regístrate aquí.
+            </Link>
+          ) : (
+            <Link component="button" variant="body2" onClick={handleToggleView}>
+              ¿Ya tienes cuenta? Inicia sesión aquí.
+            </Link>
+          )}
 
+        </Typography>
+      </div>
+    </Container>
   );
 }
 

webapp/src/Timer.css

@@ -1,20 +1,20 @@
 .Timer {
     font-family: sans-serif;
     text-align: center;
-    height: 50vh;
+    height: 30vh;
     display: flex;
     justify-content: center;
     align-items: center;
   }
 
   .Timer .container {
     position: relative;
-    transform: scale(200%);
+    transform: scale(150%);
   }
 
   .Timer .text {
     position: absolute;
-    color: #007bff;
+    color: #23384b;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
@@ -31,7 +31,7 @@
 
   .Timer .container svg circle {
     fill: transparent;
-    stroke: #415262;
+    stroke: #23384b;
     stroke-width: 4;
     transform: translate(5px, 5px);
     transition: all 2s;
@@ -40,7 +40,7 @@
 
   .Timer .container svg circle:nth-child(2) {
     fill: transparent;
-    stroke: #007bff;
+    stroke: #62bbff;
     stroke-width: 6;
     stroke-dasharray: 440;
     /* stroke-dashoffset: 0; */
@@ -60,12 +60,12 @@
     content: "";
     width: 20px;
     height: 20px;
-    background-color: #007bff;
+    background-color: #62bbff;
     z-index: 1000;
     position: absolute;
     border-radius: 10px;
     top: -2px;
     transform: translate(-10px);
-    box-shadow: 0 0 20px 4px #007bff;
+    box-shadow: 0 0 20px 4px #62bbff;
   }
 

webapp/src/components/Footer.css

@@ -0,0 +1,20 @@
+.footer {
+    position: absolute;
+    width: 100%;
+    background-color: #f5f5f5;
+    padding: 0.5rem;
+    text-align: center;
+    margin-top: 90vh;
+    height: auto;
+    bottom: 0;
+}
+
+.footer a {
+    color: #a5b8d4;
+    text-decoration: none;
+    font-weight: 600;
+}
+
+.footer a:hover {
+    text-decoration: underline;
+}

webapp/src/components/Footer.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import './Footer.css'; // Importa el archivo de estilos CSS
+import { AppBar, Toolbar, Typography } from '@mui/material';
+
+const Footer = () => {
+    return (
+        <AppBar className="footer">
+            <Toolbar>
+                <Typography variant="body1" className='fs-6' color="textSecondary">
+                    © {new Date().getFullYear()} Hecho con ❤️ por <a href="https://github.com/coral2742">Coral</a>, <a href="https://github.com/baraganio">Carlos</a>, <a href="https://github.com/uo264915">Pablo</a> y <a href="https://github.com/UO290054">Raymond</a>. ASW - Curso 2023-24
+                </Typography>
+            </Toolbar>
+        </AppBar>
+    );
+};
+
+export default Footer;

webapp/src/components/Game.css

@@ -1,28 +1,64 @@
-button[title="sigPreg"] {
-    margin: 1em;
-    margin-left: 2em;
-    background-color: rgba(31, 60, 134, 0.764);
-}
-
-button[title="contador"]:disabled{
-    margin: 1em;
-    background-color: rgba(31, 60, 134, 0.764);
+button[title="contador"]:disabled {
+    margin: 0.5em;
+    background-color: #0155B7;
     color: white;
+    padding: 0.5rem;
 }
 
-button[title="btnsPreg"]{
+button[title="btnsPreg"] {
     margin: 0.5em;
     padding-top: 0.2em;
     padding-bottom: 0.2em;
-    background-color: rgba(29, 86, 109, 0.764);
+    background-color: #4c8dbf;
+    font-weight: 700;
+}
+
+button[title="puntuacion"]:disabled {
+    margin: 1em;
+    background-color: #0155B7;
+    color: white;
+    padding-top: 0.4em;
+    padding-bottom: 0.2em;
+    font-size: 1.5em;
+}
+
+
+button[title="volver"] {
+    margin-top: 0.5em;
 }
 
-button[title="puntuacion"]:disabled{
+
+button[title="volver"]:disabled {
     margin: 1em;
-    background-color: rgba(31, 60, 134, 0.764);
+    background-color: #0155B7;
     color: white;
     padding-top: 0.4em;
     padding-bottom: 0.2em;
     font-size: 1.5em;
 }
 
+.game-question h2 {
+    font-size: 1.5rem;
+}
+
+.button-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+
+
+@media (max-width: 600px) {
+    .button-container {
+        flex-direction: column;
+        align-items: center;
+        gap: 0;
+        margin: 0;
+    }
+
+    .button-container button {
+        font-size: 12px;
+        padding: 5px 10px;
+    }
+}