From f80dff1a15530de45a3523ae3f7e8e73227d463d Mon Sep 17 00:00:00 2001 From: uo288245 Date: Sat, 2 Mar 2024 12:28:39 +0100 Subject: [PATCH 01/30] Added server methods of the groups functionality --- users/index.js | 2 + users/models/user-model.js | 1 + users/routes/group-routes.js | 91 ++++++++++++++++++++++++++++++++++++ 3 files changed, 94 insertions(+) create mode 100644 users/routes/group-routes.js diff --git a/users/index.js b/users/index.js index df43b4a1..f122d1dd 100644 --- a/users/index.js +++ b/users/index.js @@ -4,6 +4,7 @@ const express = require('express'); // Routes: const authRoutes = require('./routes/auth-routes.js'); const userRoutes = require('./routes/user-routes.js'); +const groupRoutes = require('./routes/group-routes.js'); // App definition and const app = express(); @@ -15,6 +16,7 @@ app.use(express.json()); // Routes middlewares to be used app.use('/user', userRoutes); app.use('/login', authRoutes); +app.use('/group', groupRoutes); // Start the service const server = app.listen(port, () => { diff --git a/users/models/user-model.js b/users/models/user-model.js index 3fc86750..7863eb1a 100644 --- a/users/models/user-model.js +++ b/users/models/user-model.js @@ -67,6 +67,7 @@ const Group = sequelize.define('Group', { type: DataTypes.DATE, defaultValue: Sequelize.literal('CURRENT_TIMESTAMP') } + // When the session is introduced, the creator user and more stuff will be added }) const UserGroup = sequelize.define('UserGroup', { diff --git a/users/routes/group-routes.js b/users/routes/group-routes.js new file mode 100644 index 00000000..ee93074d --- /dev/null +++ b/users/routes/group-routes.js @@ -0,0 +1,91 @@ +const express = require('express'); +const router = express.Router(); +const bcrypt = require('bcrypt'); +const { Group,User,UserGroup } = require('../models/user-model'); + +// Getting the list of groups in the database +router.get('/list', async (req, res) => { + try { + const allGroups = await Group.findAll(); + const groupsJSON = allGroups.map(group => group.toJSON()); + + const allGroupsJSON = { + groups: groupsJSON + }; + + res.json(allGroupsJSON); + } catch (error) { + return res.status(500).json({ error: 'Internal Server Error' }); + } +}); + +// Adding a group to the database +router.post('/add', async (req, res) => { + try { + const { name } = req.body; + + // To be changed when more fileds are added + const newGroup = await Group.create({ + name: name, + createdAt: new Date() + }); + + res.json(newGroup); + } catch (error) { + return res.status(500).json({ error: 'Internal Server Error' }); + } +}); + +// Getting a group by its name +router.get('/:name', async (req, res) => { + try { + const groupName = req.params.name; + + // Need also to get the group members + const group = await Group.findOne({ + where: { + name: groupName + } + }); + if (!group) { + return res.status(404).json({ error: 'Group not found' }); + } + + const groupUsers = await User.findAll({ + include: [ + { + model: UserGroup, + where: { name: groupName } + } + ] + }); + + // Construct JSON response + const groupJSON = group.toJSON(); + groupJSON.users = groupUsers.map(user => user.toJSON()); + + res.json(groupJSON); + } catch (error) { + return res.status(400).json({ error: error.message }); + } +}); + +// Adding a new relationship in the database between a group and a user when this one joins it +router.post('/:name/join', async (req, res) => { + try { + const groupName = req.params.name; + + // Need to get the logged in user for the username + const newUserGroup = await UserGroup.create({ + name: groupName, + // username: username, + createdAt: new Date() + }); + + res.json(newUserGroup); + } catch (error) { + return res.status(500).json({ error: 'Internal Server Error' }); + } +}); + +module.exports = router; \ No newline at end of file From dc40b609e174a4a1c12c9a4d55c26dae160d02a6 Mon Sep 17 00:00:00 2001 From: teresagg Date: Sat, 2 Mar 2024 12:35:29 +0100 Subject: [PATCH 02/30] change app document title --- webapp/src/App.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/webapp/src/App.js b/webapp/src/App.js index 064f3bcb..ae17f8f8 100644 --- a/webapp/src/App.js +++ b/webapp/src/App.js @@ -27,6 +27,9 @@ const theme = createTheme({ }); function App() { + React.useEffect(() => { + document.title = "WIQ - Wikidata Infinite Quest"; + }, []); return ( From 19daa65a8ec6f9bf5ca3435bb518b47e792ff89b Mon Sep 17 00:00:00 2001 From: uo288245 Date: Sat, 2 Mar 2024 12:52:06 +0100 Subject: [PATCH 03/30] Added the groups methods to the gateway; still need to build the webapp to test it. --- gatewayservice/gateway-service.js | 62 +++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) diff --git a/gatewayservice/gateway-service.js b/gatewayservice/gateway-service.js index 53ae12ec..e33f820e 100644 --- a/gatewayservice/gateway-service.js +++ b/gatewayservice/gateway-service.js @@ -52,6 +52,68 @@ app.post('/user/add', async (req, res) => { } }); +app.get('/group/list', async (req, res) => { + try { + const userResponse = await axios.get(userServiceUrl + '/group/list'); + res.json(userResponse.data); + } catch (error) { + if (error.response && error.response.status) { + res.status(error.response.status).json({ error: error.response.data.error }); + } else if (error.message) { + res.status(500).json({ error: error.message }); + } else { + res.status(500).json({ error: 'Internal Server Error' }); + } + } +}); + +app.post('/group/add', async (req, res) => { + try { + const userResponse = await axios.post(userServiceUrl + '/group/add', req.body); + res.json(userResponse.data); + } catch (error) { + if (error.response && error.response.status) { + res.status(error.response.status).json({ error: error.response.data.error }); + } else if (error.message) { + res.status(500).json({ error: error.message }); + } else { + res.status(500).json({ error: 'Internal Server Error' }); + } + } +}); + +app.get('/group/:name', async (req, res) => { + try { + const { name } = req.params; + const userResponse = await axios.get(`${userServiceUrl}/group/${name}`); + res.json(userResponse.data); + } catch (error) { + if (error.response && error.response.status) { + res.status(error.response.status).json({ error: error.response.data.error }); + } else if (error.message) { + res.status(500).json({ error: error.message }); + } else { + res.status(500).json({ error: 'Internal Server Error' }); + } + } +}); + +app.post('/group/:name/join', async (req, res) => { + try { + const { name } = req.params; + const userResponse = await axios.post(`${userServiceUrl}/group/${name}/join`, req.body); + res.json(userResponse.data); + } catch (error) { + if (error.response && error.response.status) { + res.status(error.response.status).json({ error: error.response.data.error }); + } else if (error.message) { + res.status(500).json({ error: error.message }); + } else { + res.status(500).json({ error: 'Internal Server Error' }); + } + } +}); + // Start the gateway service const server = app.listen(port, () => { console.log(`Gateway Service listening at http://localhost:${port}`); From 669d2417374f75b7810cf4fdda0c9a96af1aeb48 Mon Sep 17 00:00:00 2001 From: Pablo Date: Sat, 2 Mar 2024 15:22:04 +0100 Subject: [PATCH 04/30] Added background gradient proposal and corrected Instructions styles --- webapp/src/index.css | 8 ++++++++ webapp/src/pages/Home.js | 28 +++++++++++++-------------- webapp/src/pages/Instructions.js | 33 ++++++++++++++++---------------- 3 files changed, 39 insertions(+), 30 deletions(-) diff --git a/webapp/src/index.css b/webapp/src/index.css index ec2585e8..0a7007ab 100644 --- a/webapp/src/index.css +++ b/webapp/src/index.css @@ -5,6 +5,14 @@ body { sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + + /* Background */ + background: rgb(0,102,153); + background: -moz-linear-gradient(90deg, rgba(0,102,153,0.2) 0%, rgba(0,102,153,0.1) 25%, rgba(255,255,255,1) 50%, rgba(0,102,153,0.1) 75%, rgba(0,102,153,0.2) 100%); + background: -webkit-linear-gradient(90deg, rgba(0,102,153,0.2) 0%, rgba(0,102,153,0.1) 25%, rgba(255,255,255,1) 50%, rgba(0,102,153,0.1) 75%, rgba(0,102,153,0.2) 100%); + background: linear-gradient(90deg, rgba(0,102,153,0.2) 0%, rgba(0,102,153,0.1) 25%, rgba(255,255,255,1) 50%, rgba(0,102,153,0.1) 75%, rgba(0,102,153,0.2) 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#006699",endColorstr="#006699",GradientType=1); + } code { diff --git a/webapp/src/pages/Home.js b/webapp/src/pages/Home.js index cd486e0a..89d0d370 100644 --- a/webapp/src/pages/Home.js +++ b/webapp/src/pages/Home.js @@ -1,27 +1,27 @@ -import * as React from 'react'; -import ImageSlider from '../components/ImageSlider'; -import { Box, Typography, Paper, useTheme } from '@mui/material'; +import * as React from "react"; +import ImageSlider from "../components/ImageSlider"; +import { Box, Typography, Paper, useTheme } from "@mui/material"; import data from "../data/sliderData.json"; const Home = () => { const theme = useTheme(); return ( - - - Logo - - WIKIDATA - INFINITE - QUEST + + + Logo + + WIKIDATA + INFINITE + QUEST - - Welcome to WIQ, also known as Wikidata Infinite Quest. On this page, a vast array of challenges awaits you, which will help you become the most knowledgeable person in the world.
- To achieve this, you'll need to complete various mini-games. But don't worry, thanks to our dynamic question system, you can play as many times as you want since the questions are infinite.
+ + Welcome to WIQ, also known as Wikidata Infinite Quest. On this page, a vast array of challenges awaits you, which will help you become the most knowledgeable person in the world.

+ To achieve this, you"ll need to complete various mini-games. But don"t worry, thanks to our dynamic question system, you can play as many times as you want since the questions are infinite.

From here, HappySoftware in collaboration with RTVE wishes you luck and hopes to see you at the top of the leaderboard. - + diff --git a/webapp/src/pages/Instructions.js b/webapp/src/pages/Instructions.js index ef12af42..c7510827 100644 --- a/webapp/src/pages/Instructions.js +++ b/webapp/src/pages/Instructions.js @@ -1,8 +1,8 @@ -import * as React from 'react'; -import { Container } from '@mui/material'; -import CssBaseline from '@mui/material/CssBaseline'; -import { Button, Typography, Box, Grid } from '@mui/material'; -import data from '../data/gameInfo.json'; +import * as React from "react"; +import { Container } from "@mui/material"; +import CssBaseline from "@mui/material/CssBaseline"; +import { Button, Typography, Grid } from "@mui/material"; +import data from "../data/gameInfo.json"; const Instructions = () => { @@ -15,15 +15,16 @@ const Instructions = () => { const newGameInfo = (index) => { setGameInfo( - - - Foto del minijuego - - - {info[index].nombre} - {info[index].descripcion} - - + + + Foto del minijuego + + + + {info[index].nombre} + {info[index].descripcion} + + ); }; @@ -32,7 +33,7 @@ const Instructions = () => { } return ( - + @@ -40,7 +41,7 @@ const Instructions = () => { {info.map((option, index) => ( - From d544e947a9be8cdc7dd75c40034ecd8a253d9632 Mon Sep 17 00:00:00 2001 From: Pablo Date: Sat, 2 Mar 2024 16:33:35 +0100 Subject: [PATCH 05/30] Instructions being responsive and show/hide games. Solved footer problem with React ShowLabel prop --- webapp/src/components/Footer.js | 8 +++--- webapp/src/pages/Instructions.js | 45 ++++++++++++++++++++------------ 2 files changed, 32 insertions(+), 21 deletions(-) diff --git a/webapp/src/components/Footer.js b/webapp/src/components/Footer.js index 3632b7aa..139082f1 100644 --- a/webapp/src/components/Footer.js +++ b/webapp/src/components/Footer.js @@ -1,17 +1,15 @@ import * as React from 'react'; -import { BottomNavigation, Toolbar, Typography, useTheme } from '@mui/material'; +import { AppBar, Toolbar, Typography } from '@mui/material'; const Footer = () => { - const theme = useTheme(); - return ( - + © WIQ_ES04A - + ); }; diff --git a/webapp/src/pages/Instructions.js b/webapp/src/pages/Instructions.js index c7510827..3b1d68de 100644 --- a/webapp/src/pages/Instructions.js +++ b/webapp/src/pages/Instructions.js @@ -6,26 +6,39 @@ import data from "../data/gameInfo.json"; const Instructions = () => { + // Whole information about games const [info, setInfo] = React.useState(null); + + // Game to show info about and the comp with the info + const [gameDisplayedIndex, setGameDisplayed] = React.useState(null); const [gameInfo, setGameInfo] = React.useState(null); React.useEffect(() => { setInfo(data); }, []); - const newGameInfo = (index) => { - setGameInfo( - - - Foto del minijuego - - - - {info[index].nombre} - {info[index].descripcion} + const displayGameInfo = (index) => { + // If game being displayed is selected, hides the info panel + if (gameDisplayedIndex === index) { + setGameInfo(null); + setGameDisplayed(null); + console.log(gameDisplayedIndex); + } + else { + setGameInfo( + + + Foto del minijuego + + + + {info[index].nombre} + {info[index].descripcion} + - - ); + ); + setGameDisplayed(index); + } }; if (!info) { @@ -35,13 +48,13 @@ const Instructions = () => { return ( - - + + GAMEPLAY & MODES: {info.map((option, index) => ( - - From 8598eaa7b1d46db6386db2a2a9780e4e23bfb1e8 Mon Sep 17 00:00:00 2001 From: uo288245 Date: Sat, 2 Mar 2024 23:07:16 +0100 Subject: [PATCH 06/30] Added pages for the groups addition and list --- webapp/src/App.js | 5 ++- webapp/src/components/NavBar.js | 1 + webapp/src/pages/AddUser.js | 1 - webapp/src/pages/GroupCreate.js | 56 +++++++++++++++++++++++++++++++++ webapp/src/pages/GroupList.js | 37 ++++++++++++++++++++++ 5 files changed, 98 insertions(+), 2 deletions(-) create mode 100644 webapp/src/pages/GroupCreate.js create mode 100644 webapp/src/pages/GroupList.js diff --git a/webapp/src/App.js b/webapp/src/App.js index ae17f8f8..7442c3a1 100644 --- a/webapp/src/App.js +++ b/webapp/src/App.js @@ -7,6 +7,8 @@ import Footer from './components/Footer'; import Home from './pages/Home'; import Homepage from './pages/Homepage'; import Game from './pages/Game'; +import GroupList from './pages/GroupList'; +import GroupCreate from './pages/GroupCreate'; import {Route, Routes} from 'react-router-dom'; import { createTheme, ThemeProvider } from '@mui/material/styles'; import { Box } from '@mui/material'; @@ -41,7 +43,8 @@ function App() { }/> }/> }/> - + }/> + }/>