Merge pull request #74 from Arquisoft/fix-styles-game

Fix styles game

game/qgservice/generatorLogic/queries.js

@@ -47,12 +47,14 @@ const chemicalElementQuery = `SELECT ?element ?elementLabel ?symbol WHERE {
 }
 `
 
-const monumentQuery = `SELECT ?monument ?monumentLabel ?country ?countryLabel WHERE {
-  ?monument wdt:P31 wd:Q4989906;       # Instance of historical monument
-         wdt:P17 ?country.             # Country of the monument
+const monumentQuery = `SELECT ?monument ?monumentLabel ?country ?countryLabel ?followers WHERE {
+  ?monument wdt:P31 wd:Q570116;       # Instance of historical monument
+            wdt:P8687 ?followers;     # Social media followers count
+            wdt:P17 ?country.         # Country of the monument
   SERVICE wikibase:label { bd:serviceParam wikibase:language "[AUTO_LANGUAGE],en". }
 }
-LIMIT 1000
+ORDER BY DESC(?followers)
+LIMIT 100
 `
 
 

game/qgservice/generatorLogic/questiongenerator.js

@@ -95,7 +95,7 @@ function generateQuestionCapital(countryCapitalMap) {
     // Create the question object
     const question = {
       uuid: uuid.v4(),
-      question: `What is the symbol of ${chemical}?`,
+      question: `What is the chemical symbol of ${chemical}?`,
       correctAnswer: symbol,
       incorrectAnswer1: incorrectAnswers[0],
       incorrectAnswer2: incorrectAnswers[1],
@@ -125,7 +125,7 @@ function generateQuestionMonument(monumentMap) {
   while (incorrectAnswers.length < 3) {
     const randomMonument = monumentArray[Math.floor(Math.random() * monumentArray.length)];
     const [randomMonumentLabel, randomCountry] = randomMonument;
-    if (randomMonumentLabel !== monumentLabel && !incorrectAnswers.includes(randomCountry)) {
+    if (randomMonumentLabel !== monumentLabel && !incorrectAnswers.includes(randomCountry) && randomCountry!= countryLabel) {
       incorrectAnswers.push(randomCountry);
     }
   }

multiplayerservice/server.js

@@ -89,13 +89,11 @@ io.on('connection', socket => {
   });
 
   socket.on('updateQuestions', (partyCode, questions) => {
-    console.log('here')
     // Broadcast questions to all users in the specified party
     broadcastQuestions(partyCode, questions);
   });
 
   socket.on('exitParty', (partyCode) => {
-    console.log("aqui")
     if (lobby[partyCode]) {
       // Remove the user from the lobby
       delete lobby[partyCode][socket.id];

webapp/src/components/game/LobbyGame.scss

@@ -32,6 +32,13 @@ table {
     padding: 10px;
   }
 
+  .lobby-title-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0px 2em 0px 2em;
+  }
+
   img {
     max-width: 100px; // Cambia el tamaño máximo de la imagen según sea necesario
     height: auto;

webapp/src/components/game/QuestionsGame.scss

@@ -0,0 +1,30 @@
+.question-container {
+    text-align: center;
+  }
+
+  .question-title {
+    font-size: 24px;
+    margin-bottom: 20px;
+  }
+
+  .answer-grid {
+    margin-top: 3em;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.5em;
+  }
+
+  .answer-grid button {
+    width: 100%;
+    height: 50px;
+    border-radius: 10px; /* Rounded borders */
+    font-size: 18px; /* Big text */
+    font-weight: bold; /* Bold font */
+    transition: transform 0.2s; /* Transition for scale animation */
+    cursor:pointer;
+  }
+
+  .answer-grid button:active {
+    transform: scale(0.95); /* Scale down on active state */
+  }
+

webapp/src/components/game/ScoreboardGame.css

@@ -1,22 +1,30 @@
 table {
     width: 100%;
     border-collapse: collapse;
+    border-radius: 50%;
+    margin-top: 5rem;
   }
 
   table caption {
-    background-color: black;
+    background-color: #1E1E1E;
     color: white;
-    padding: 10px;
+    padding: 20px;
     text-align: center;
   }
 
   table th, table td {
-    border: 1px solid black;
+    border: 1px solid #1E1E1E;
     width: 33.33%;
     text-align: center;
     padding: 10px;
   }
 
   table th {
-    color: blue;
+    font-weight: bold;
+    color: #007bff;
+  }
+
+  .selected {
+    background-color: #D9D9D9;
+    font-weight: bold;
   }

webapp/src/components/game/ScoreboardGame.tsx

@@ -11,26 +11,33 @@ interface ScoreboardGameProps {
 
 const ScoreboardGame:FC<ScoreboardGameProps> = ({userScoresSinglePlayer, userScoresMultiPlayer}) => {
   let sorted;
+  const username = localStorage.getItem('username');
   if(userScoresSinglePlayer){
     sorted = userScoresSinglePlayer.sort((a, b) => b.points - a.points);
   } else if (userScoresMultiPlayer){
     sorted = userScoresMultiPlayer.sort((a, b) => b.points - a.points);
   }
     return (
-        <section>
         <table>
-            <caption>Scoreboard</caption>
+            <caption>Game Scoreboard</caption>
           <thead>
             <tr>
-              <th scope="col" id="rankingHeader">Username</th>
+              <th scope="col" id="rankingHeader">Position</th>
               <th scope="col" id="usernameHeader">Username</th>
               <th scope="col" id="pointsHeader">Points</th>
             </tr>
           </thead>
           <tbody>
             {sorted.map((score, index) => {
+              if(score.username === username) return(
+                <tr key={score.username} className='selected'>
+                  <td headers="rankingHeader">{index+1}</td>
+                  <td headers="usernameHeader">{score.username}</td>
+                  <td headers="pointsHeader">{score.points}</td>
+                </tr>
+              );
               return (
-                <tr key={score.username}>
+                <tr key={score.username} >
                   <td headers="rankingHeader">{index+1}</td>
                   <td headers="usernameHeader">{score.username}</td>
                   <td headers="pointsHeader">{score.points}</td>
@@ -39,7 +46,6 @@ const ScoreboardGame:FC<ScoreboardGameProps> = ({userScoresSinglePlayer, userSco
             })}
           </tbody>
         </table>
-      </section>
     )
 }
 

webapp/src/components/game/multiplayer/GameMultiPlayer.tsx

@@ -31,7 +31,6 @@ export interface PlayerWithPoints {
 const GameMultiPlayer: FC<GameMultiPlayerProps> = () => {
 
   const SERVER_URL = 'http://localhost:8006';
-  const username = localStorage.getItem("username")
 
   const [socket, setSocket] = useState<SocketProps | null>(null);
   const [stage, setStage] = useState<number>(1)
@@ -40,6 +39,26 @@ const GameMultiPlayer: FC<GameMultiPlayerProps> = () => {
   const [questions, setQuestions] = useState<Question4Answers[]>([]);
   const [sortedUsersByPoints, setSortedUsersByPoints] = useState<PlayerWithPoints[]>([])
 
+  const shuffleQuestions = (questions: Question4Answers[]): Question4Answers[] => {
+    return questions.map((question) => {
+      const { correctAnswer, incorrectAnswer1, incorrectAnswer2, incorrectAnswer3 } = question;
+      const answers = [correctAnswer, incorrectAnswer1, incorrectAnswer2, incorrectAnswer3];
+
+      // Shuffle the order of incorrect answers (answers excluding correctAnswer)
+      for (let i = answers.length - 1; i > 1; i--) {
+        const j = Math.floor(Math.random() * (i - 1) + 1); // Exclude correctAnswer from shuffling
+        [answers[i], answers[j]] = [answers[j], answers[i]];
+      }
+
+      return {
+        ...question,
+        incorrectAnswer1: answers[1],
+        incorrectAnswer2: answers[2],
+        incorrectAnswer3: answers[3],
+      };
+    });
+  };
+
   useEffect(() => {
     const newSocket = io(SERVER_URL);
     setSocket(newSocket);
@@ -61,13 +80,19 @@ const GameMultiPlayer: FC<GameMultiPlayerProps> = () => {
       console.log('Party not found');
     });
 
-    newSocket.on('allPlayersFinished', (playersWithPoints:PlayerWithPoints[]) => {
+    newSocket.on('allPlayersFinished', async (playersWithPoints:PlayerWithPoints[]) => {
+      await new Promise<void>((resolve) => { // Specify void as the type argument
+        setTimeout(() => {
+          resolve(); // Resolve the promise without any arguments
+        }, 1000);
+      });
       setSortedUsersByPoints(playersWithPoints);
       setStage(4);
     })
 
     newSocket.on('questionsUpdated', (questions: Question4Answers[]) => {
-      setQuestions(questions);
+      const shuffledquestions = shuffleQuestions(questions);
+      setQuestions(shuffledquestions);
       setStage(3);
     })
 

webapp/src/components/game/multiplayer/LobbyMultiPlayer.tsx

@@ -44,8 +44,10 @@ const LobbyMultiPlayer: FC<LobbyMultiPlayerProps> = ({socket, handleCurrentStage
 
   return (
     <div className='lobby-container'>
-      <h2 className='lobby-title'>Lobby - Multiplayer</h2>
-      <p>Party code: {partyCode}</p>
+      <div className='lobby-title-container'>
+        <h2 className='lobby-title'>Lobby - Multiplayer</h2>
+        <p>Party code: <b>{partyCode}</b></p>
+      </div>
       {users.map((player) => (
         <div key={player.uuid} className='player-item'>
           <img src={"https://robohash.org/"+player.username+".png"} alt={player.uuid} />

webapp/src/components/game/multiplayer/MenuMultiplayer.css

@@ -2,26 +2,54 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    justify-content: center;
+    height: 70vh;
+  }
+  .container > * {
+    margin-bottom: 60px; /* Adjust the margin as needed */
   }
 
   .create-party-button {
-    margin-top: 20px;
-  }
+    font-size: 1.2em;
+    padding: 10px 20px;
+    margin: 10px;
+    text-decoration: none;
+    background-color: #007bff;
+    color: #ffffff;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  } 
 
   .join-party-container {
     margin-top: 20px;
     display: flex;
     align-items: center;
   }
 
-  .join-party-label {
-    margin-right: 10px;
-  }
-
   .join-party-input {
+    width: 250px;
+    height: 35px;
+    font-size: 16px;
+    padding: 10px;
     margin-right: 10px;
   }
 
   .join-party-button {
+    font-size: 1.2em; /* Adjust as needed */
+    padding: 10px 20px; /* Adjust as needed */
+    margin: 10px; /* Adjust as needed */
+    text-decoration: none;
+    background-color: #007bff;
+    color: #ffffff; /* White text color */
+    border: none;
+    border-radius: 8px; /* Make the button slightly round */
     cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+
+  h1{
+    margin-bottom: 20px;
+    margin-top: 20px;
   }

webapp/src/components/game/multiplayer/MenuMultiplayer.tsx

@@ -38,15 +38,16 @@ const MenuMultiplayer: FC<MenuMultiplayerProps> = ({socket, handleCurrentStage,
     }
 
     return (
-        <div className="container">
-      <button onClick={createParty} className="create-party-button">
-        Create Party
-      </button>
-      <div className="join-party-container">
-        <input className="join-party-input" placeholder="Code" onChange={(e) => setTypedCode(e.target.value)}></input>
-        <button className="join-party-button" onClick={joinParty}>Join Party</button>
+      <div className="container">
+        <h1>Create a party or join one!</h1>
+        <button onClick={createParty} className="create-party-button">
+          Create Party
+        </button>
+        <div className="join-party-container">
+          <input className="join-party-input" placeholder="Code" onChange={(e) => setTypedCode(e.target.value)}></input>
+          <button className="join-party-button" onClick={joinParty}>Join Party</button>
+        </div>
       </div>
-    </div>
     )
 }