user profile and some fancy css all around

gatewayservice/gateway-service.js

@@ -130,14 +130,12 @@ app.get('/rankings/:filter', async (req, res) => {
 
 app.get('/ranking/user', async (req, res) => {
   const username = req.query.username;
-  const category = req.query.category;
 
   try {
     // Forward the request to the user service
     const result = await axios.get(`${userServiceUrl}/ranking/user`, {
       params: {
-        username: username,
-        category: category
+        username: username
       }
     });
 

gatewayservice/gateway-service.test.js

@@ -90,7 +90,6 @@ describe('Gateway Service', () => {
     } else if (url.endsWith('/ranking/user')) {
       return Promise.resolve({data:{
         username: data.params.username,
-        category: data.params.category,
         points: 5,
         questions: 7,
         correct: 5,
@@ -290,13 +289,11 @@ it('should forward get Foods request to question service', async () => {
       .get('/ranking/user')
       .query({
           username: "username",
-          category: "category"
         })
 
     // Verify response body
     expect(response.body).toEqual({
       username: "username",
-      category: "category",
       points: 5,
       questions: 7,
       correct: 5,

users/userservice/user-service.js

@@ -57,7 +57,6 @@ app.get('/rankings/:filter', async (req, res) => {
 // Get the ranking info for a specified category and user
 app.get('/ranking/user', async (req, res) => {
   const username = req.query.username;
-  const category = req.query.category;
 
   try {
     // Fetch the user with the specified username
@@ -68,17 +67,7 @@ app.get('/ranking/user', async (req, res) => {
       return res.status(400).json("Error: User not found");
     }
 
-    // Extract ranking info for the specified category
-    const rankingInfo = {
-      username: user.username,
-      category,
-      points: user.ranking[category].points,
-      questions: user.ranking[category].questions,
-      correct: user.ranking[category].correct,
-      wrong: user.ranking[category].wrong
-    };
-
-    res.status(200).json(rankingInfo);
+    res.status(200).json(user);
   } catch (error) {
     res.status(400).json({ error: error.message });
   }

webapp/src/App.jsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import {BrowserRouter, Routes, Route} from 'react-router-dom'
-import AddUser from './components/AddUser';
+import AddUser from './components/auth/AddUser';
 import Navbar from './components/Navbar';
-import Login from './components/Login';
+import Login from './components/auth/Login';
 import RankingsLayout from './components/ranking/RankingLayout';
-import Game from './components/Game';
+import Game from './components/game/Game';
 import MainPage from './components/MainPage';
 import Squads from './components/Squads';
-import UserProfile from './components/UserProfile';
+import UserProfile from './components/user/UserProfile';
 
 
 function App() {

webapp/src/components/MainPage.jsx

@@ -21,11 +21,11 @@ const MainPage = () => {
         , [logged]);
 
     return (
-        <div className="flex flex-col items-center justify-center text-center bg-[#2E2F82]" style={{height: "92.9vh"}}>
+        <div className="flex flex-col items-center justify-center text-center bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900" style={{height: "92.9vh"}}>
             {logged ?
                 <div>
 
-                    <h1 className="text-6xl font-bold text-white mb-8 text-white">Welcome back, {auth.username}!</h1>
+                    <h1 className="text-6xl font-bold mb-8 text-white">Welcome back, {auth.username}!</h1>
 
 
                     <div className="flex flex-col items-center justify-center">
@@ -48,7 +48,7 @@ const MainPage = () => {
                     </div>
                 </div> :
                 <div>
-                    <h1 className="text-6xl font-bold text-white mb-8 text-white">Welcome to WIQ, Please log in to play!</h1>
+                    <h1 className="text-6xl font-bold mb-8 text-white">Welcome to WIQ, Please log in to play!</h1>
                     <div className="basis-1 flex flex-col items-center justify-center">
                     <button className=" flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10 transition-transform transform-gpu hover:-translate-y-1 hover:shadow-lg" onClick={() => navigate("/register")}>
                         Create account

webapp/src/components/Squads.jsx

@@ -3,8 +3,8 @@ import React from 'react';
 function Squads() {
     return (
         <div class="content-align text-center justify-center bg-[#4c2185]" style={{height: "92.9vh"}}>
-            <h1 className="text-6xl font-bold text-white mb-8 text-white">Squads</h1>
-            <h2 className="text-4xl font-body text-white mb-8 text-white">Coming soon...</h2>
+            <h1 className="text-6xl font-bold mb-8 text-white">Squads</h1>
+            <h2 className="text-4xl font-body mb-8 text-white">Coming soon...</h2>
         </div>
     );
 }

webapp/src/components/AddUser.jsx → webapp/src/components/auth/AddUser.jsx

@@ -40,7 +40,7 @@ const AddUser = () => {
   };
 
   return (
-    <div className="content-center justify-center bg-[#2E2F82] " style={{ height: "92.9vh" }}>
+    <div className="content-center justify-center bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900" style={{ height: "92.9vh" }}>
       <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }} className='bg-white rounded-xl content-center justify-center'>
         <h1 className='py-5 text-4xl font-bold text-[#111827]'>
           Register

webapp/src/components/Login.jsx → webapp/src/components/auth/Login.jsx

@@ -62,7 +62,7 @@ const Login = () => {
   };
 
   return (
-    <div className="content-center justify-center bg-[#2E2F82] " style={{ height: "92.9vh" }}>
+    <div className="content-center justify-center bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900" style={{ height: "92.9vh" }}>
       <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }} className='bg-white rounded-xl content-center justify-center'>
         <h1 className='py-5 text-4xl font-bold text-[#111827]'>
           Access WIQ

webapp/src/components/Game.jsx → webapp/src/components/game/Game.jsx

@@ -35,7 +35,20 @@ const Game = () => {
     }, [isAuthenticated, navigate]);
 
     return (
-        <div className="bg-[#4c2185]" style={{ height: "92.9vh" }}>
+        <div class="area">
+            <ul class="circles">
+				<li></li>
+				<li></li>
+				<li></li>
+				<li></li>
+				<li></li>
+				<li></li>
+				<li></li>
+				<li></li>
+				<li></li>
+				<li></li>
+			</ul>
+        <div className="bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900" style={{ height: "92.9vh" }}>
             {isAuthenticated() ? (flagGameStarted || cityGameStarted || monumentGameStarted
                 || touristAttractionGameStarted || foodGameStarted) ? (
                 <div className="flex justify-center content-center pt-10 h-auto">
@@ -73,6 +86,7 @@ const Game = () => {
                 </div>
             ) : ""}
         </div>
+        </div>
     )
 };
 

webapp/src/components/Question.jsx → webapp/src/components/game/Question.jsx

@@ -118,7 +118,7 @@ const Question = (props) => {
 
     return (
         finished ? <div className="bg-white"><ImgGameReport score={score} answers={answers} restartGame={restartGame}  /></div> :
-        <div className="bg-slate-50 shadow-lg rounded-md p-4 mx-auto max-w-2xl ">
+        <div className="bg-slate-100 shadow-lg rounded-md p-4 mx-auto max-w-2xl ">
             <div className="absolute bottom-0 left-0 p-2 bg-gray-200 rounded-md">
                 Score: {score}
             </div>
@@ -138,8 +138,8 @@ const Question = (props) => {
                     </div>
                     <div className="grid grid-cols-2 mt-10 item">
                         {questions[currentQuestion].images.map(image => (
-                            <button className="transition-transform transform-gpu hover:scale-105 rounded-xl mx-8 my-8 max-h-52 max-w-80">
-                                <img src={image} alt='Loading ...' className="rounded-lg object-contain shadow-md"
+                            <button className="flex flex-auto transition-transform transform-gpu hover:scale-105 rounded-xl mx-8 my-8">
+                                <img src={image} alt='Loading ...' className="rounded-lg object-contain max-w-48 max-h-36"
                                     onClick={async () => await answerQuestion(image, questions[currentQuestion].question)}
                                     onLoad={() => setRenderedImages(renderedImages => renderedImages + 1)}></img>
                             </button>

webapp/src/components/ranking/RankingLayout.jsx

@@ -10,7 +10,7 @@ const RankingsLayout = () => {
     }
 
     return (
-        <div className="flex flex-col bg-[#4c2185]" style={{height: "92.9vh"}}>
+        <div className="flex flex-col bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900" style={{height: "92.9vh"}}>
             <div id="sidebar" className="sm:flex flex-col w-auto bg-[#4c2185]">
                 <div className="flex items-center justify-center h-16 bg-[#4c2185]">
                     <span className="text-4xl font-bold text-white">Rankings</span>