Merge pull request #141 from YuStudy-Inc/finalfixes

fixed the result page

Author: Nickthecan

Frontend/src/Components/Results/ResultCard.jsx

@@ -1,6 +1,6 @@
 import "../../Styles/Components/Results/ResultsCard.css"
 
-const ResultCard = ({ didWin, coins, monsters, xp, lvl }) => {
+const ResultCard = ({ didWin, coins, monsters }) => {
     return (
         <>
             <div className="results-card-container">
@@ -11,16 +11,6 @@ const ResultCard = ({ didWin, coins, monsters, xp, lvl }) => {
                         <p className="right-results">{coins}</p>
                         <p className="left-results">Monsters Slain</p>
                         <p className="right-results">{monsters}</p>
-                        <p className="left-results">XP Received</p>
-                        <p className="right-results">{xp}</p>
-                    </div>
-                    <div className="progress-bar">
-                        <div className="full-bar">
-                            <div className="actual-bar"></div>
-                        </div>
-                        <div className="level">
-                            <h1>lv. {lvl}</h1>
-                        </div>
                     </div>
                 </div>
             </div>

Frontend/src/Pages/Results/Results.jsx

@@ -1,8 +1,12 @@
 import "../../Styles/Pages/Results/Results.css"
 import { Podium, ResultCard } from "../../Components/Components"
+import { useState, useEffect } from "react"
 import { useNavigate } from "react-router-dom"
 
-const Results = ({didWin, }) => {
+const URI = import.meta.env.VITE_APP_URI
+const userId = JSON.parse(localStorage.getItem('id'));
+
+const Results = () => {
     const win = "You beat the Quiz!"
     const lose = "Better luck next time..."
     const monstersSlain = localStorage.getItem('results') || 0;
@@ -11,6 +15,31 @@ const Results = ({didWin, }) => {
         navigate('/home')
     }
     console.log("Monsters slain", monstersSlain)
+    const [totalCoins, setTotalCoins] = useState(0)
+
+    useEffect(() => {
+        const coinsEarned = monstersSlain * 3
+        setTotalCoins(coinsEarned)
+
+        const updateCoins = async () => {
+            try {
+                const response = await axios.put(`${URI}users/updateCoins/${userId}`, {
+                    coins: coinsEarned,
+                }, 
+                { 
+                    withCredentials: true 
+                })
+                if (response.status === 200) {
+                    console.log("Coins updated successfully")
+                }
+            } catch (error) {
+                console.error("Failed to update coins:", error)
+            }
+        }
+
+        if (coinsEarned > 0) updateCoins()
+    }, [monstersSlain])
+
     return(
         <>
             <div className="results-container">
@@ -23,7 +52,7 @@ const Results = ({didWin, }) => {
                             <Podium />
                         </div>
                         <div className="container-for-result-card">
-                            <ResultCard didWin={true} coins={"27"} monsters={monstersSlain} xp={"87"} lvl={"9"}/>
+                            <ResultCard didWin={true} coins={totalCoins} monsters={monstersSlain}/>
                         </div>
                     </div>
                 </div>

Frontend/src/Styles/Components/Results/ResultsCard.css

@@ -40,31 +40,5 @@
     font-size: 1.4rem;
 }
 
-.progress-bar {
-    height: auto;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-}
-
-.full-bar {
-    width: 100%;
-    height: 20px;
-    background-color: var(--black);
-    border-radius: 20px;
-    margin-top: 10%;
-}
-
-.actual-bar {
-    z-index: 10;
-    position: absolute;
-    /* pass it from the game */
-    /* this is scuffed rn, 100% width goes outside the full bar for some reason */
-    height: 20px;
-    border-radius: 20px;
-    width: 10%;
-    background-color: var(--light-green) !important;
-}
 
 

Frontend/src/Styles/Pages/Results/Results.css

@@ -36,7 +36,7 @@
     width: 100%;
     display: flex;
     justify-content: space-between;
-    align-items: end;
+    align-items: center;
 }
 
 .container-for-podium-results-page {
@@ -48,8 +48,8 @@
 }
 
 .container-for-result-card {
-    height: 80%;
-    width: 55%;
+    height: 40%;
+    width: 50%;
     display: flex;
     align-items: center;
     margin-bottom: 5%;