Merge branch 'main' into samuel-branch

smartuni · Jul 1, 2024 · 9f8dbf4 · 9f8dbf4
2 parents afee89f + a3d33a9
commit 9f8dbf4
Show file tree

Hide file tree

Showing 15 changed files with 764 additions and 63 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -2,8 +2,6 @@ import { useAuth } from "react-oidc-context";
 import "./App.css";
 import Footer from "./Components/Footer";
 import Navbar from "./Components/Navbar/Navbar";
-import CreatePetModal from "./Components/CreatePetModal";
-import Settings from "./Components/Settings";
 import LandingPage from "./Components/LandingPage";
 
 function App() {
@@ -25,19 +23,19 @@ function App() {
         return <div>Oops... {auth.error.message}</div>;
     }
 
-    if (auth.isAuthenticated) {
-        return (
-            <div style={{ backgroundColor: "#FFFFFF" }}>
-                <div>
-                    <div>
-                        <Navbar />
-                    </div>
-                </div>
-                <Footer />
-            </div>
-        );
-    }
-    return [<Navbar />, <Footer />];
+  if (auth.isAuthenticated) {
+    return (
+      <div style={{ backgroundColor: "#FFFFFF" }}>
+        <div>
+          <div>
+            <Navbar />
+          </div>
+        </div>
+        <Footer />
+      </div>
+    );
+  }
+  return [<Navbar />, <LandingPage />,<Footer />];
 }
 
 export default App;
diff --git a/frontend/src/Components/CreatePetModal.tsx b/frontend/src/Components/CreatePetModal.tsx
@@ -6,6 +6,7 @@ import profile_air from "../Misc/duck_8bit.png";
 import profile_water from "../Misc/frog.png";
 
 const CreatePetModal = () => {
+
     const [open, setOpen] = useState(false);
     const [petName, setPetName] = useState("");
     const [petType, setPetType] = useState("Water");

diff --git a/frontend/src/Components/LandingPage.tsx b/frontend/src/Components/LandingPage.tsx
@@ -1,30 +1,67 @@
-import React from 'react';
-import 'bootstrap/dist/css/bootstrap.min.css';
-import backgroundImage from '../Misc/compute-ea4c57a4.png';
-import Footer from "../Components/Footer";
+import React from "react";
+import "bootstrap/dist/css/bootstrap.min.css";
+import backgroundImage from "../Misc/compute-ea4c57a4.png";
+import Navbar from "./Navbar/Navbar";
+import { Link } from "react-router-dom";
+import { useAuth } from "react-oidc-context";
+
 
 const LandingPage = () => {
-    React.useEffect(() => {
-        document.body.style.overflow = 'hidden';
-        return () => {
-            document.body.style.overflow = 'auto';
-        };
-    }, []);
+  const auth = useAuth();
+  React.useEffect(() => {
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = "auto";
+    };
+  }, []);
 
-    return (
-        <div>
-            <div className="vh-100 vw-100 d-flex justify-content-center align-items-center" style={{ backgroundImage: `url(${backgroundImage})`, backgroundSize: 'cover', backgroundPosition: 'center', backgroundRepeat: 'no-repeat' }}>
-                <div className="text-white p-4 rounded text-center">
-                    <main role="main">
-                        <h1 className="font-weight-bold" style={{ fontSize: '4rem', textShadow: '2px 2px 4px rgba(0, 0, 0, 0.8)' }}>TEAMAGOCHI</h1>
-                        <p className="lead pt-4 pb-2" style={{ fontSize: '1.75rem', textShadow: '1px 1px 2px rgba(0, 0, 0, 0.8)' }}>Teamagochi is more than just a toy, it's a pet.<br></br> Customize it the way you want it and complete fun challenges to earn rewards.<br>
-                        </br>Take care of your pet and you will make it happy and thankful!</p>
-                        <button type='button' className='btn btn-lg btn-success py-3' style={{ fontSize: '2rem' }}>Get started!</button>
-                    </main>
-                </div>
-            </div>
+  return (
+    <div>
+      <div
+        className="vh-100 vw-100 d-flex justify-content-center align-items-center"
+        style={{
+          backgroundImage: `url(${backgroundImage})`,
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          backgroundRepeat: "no-repeat",
+        }}
+      >
+        <div className="text-white p-4 rounded text-center">
+          <main role="main">
+            <h1
+              className="font-weight-bold"
+              style={{
+                fontSize: "4rem",
+                textShadow: "2px 2px 4px rgba(0, 0, 0, 0.8)",
+              }}
+            >
+              TEAMAGOCHI
+            </h1>
+            <p
+              className="lead pt-4 pb-2"
+              style={{
+                fontSize: "1.75rem",
+                textShadow: "1px 1px 2px rgba(0, 0, 0, 0.8)",
+              }}
+            >
+              Teamagochi is more than just a toy, it's a pet.<br></br> Customize
+              it the way you want it and complete fun challenges to earn
+              rewards.<br></br>Take care of your pet and you will make it happy
+              and thankful!
+            </p>
+            {/* <button type='button' className='btn btn-lg btn-success py-3' style={{ fontSize: '2rem' }}>Get started!</button> */}
+            <a
+              className="btn btn-lg btn-success py-3"
+              href="#"
+              onClick={() => auth.signinRedirect()}
+            >
+              Get started!
+            </a>
+          </main>
         </div>
-    );
+      </div>
+    </div>
+  );
 };
 
 export default LandingPage;
diff --git a/frontend/src/Components/Navbar/Navbar.tsx b/frontend/src/Components/Navbar/Navbar.tsx
@@ -57,7 +57,11 @@ const Navbar = () => {
             <ul className="navbar-nav">
               {auth.isAuthenticated ? (
                 <>
-                  <li>
+                  <li
+                    className={`nav-item ${
+                      activePage === "Pet Page" ? "active" : ""
+                    }`}
+                  >
                     <Link
                       className="nav-link"
                       to="/PetPage"
@@ -110,13 +114,14 @@ const Navbar = () => {
                     </Link>
                   </li>
                   <li className="navbar-item">
-                    <button
+                    <Link
                       className="nav-link"
                       onClick={() => auth.removeUser()}
+                      to="/LandingPage"
                       style={loginButtonStyles}
                     >
                       Log out
-                    </button>
+                    </Link>
                   </li>
                 </>
               ) : (

diff --git a/frontend/src/Components/PetDetails.tsx b/frontend/src/Components/PetDetails.tsx
@@ -18,19 +18,39 @@ const PetDetails = (props: { pet: Pet; petImageSrc: string }) => {
       </div>
       <div className="col-6">
         <div className="h2 px-3 py-4">{pet.name}</div>
+        <PetDetailsProgressBar
+          labelName="Health"
+          value={petState.health}
+          color="green"
+        />
         <PetDetailsProgressBar
           labelName="XP"
           value={petState.xp}
-          color="green"
+          color="purple"
         />
         <PetDetailsProgressBar
           labelName="Happiness"
           value={petState.happiness}
-          color="purple"
+          color="red"
         />
         <PetDetailsProgressBar
-          labelName="Health"
-          value={petState.health}
+          labelName="Wellbeing"
+          value={petState.wellbeing}
+          color="red"
+        />
+        <PetDetailsProgressBar
+          labelName="Hunger"
+          value={petState.hunger}
+          color="red"
+        />
+        <PetDetailsProgressBar
+          labelName="Cleanliness"
+          value={petState.cleanliness}
+          color="red"
+        />
+        <PetDetailsProgressBar
+          labelName="Fun"
+          value={petState.fun}
           color="red"
         />
       </div>

diff --git a/frontend/src/Components/PetDetailsProgressBar.tsx b/frontend/src/Components/PetDetailsProgressBar.tsx
@@ -13,10 +13,9 @@ const PetDetailsProgressBar = (props: {
     <>
       {props.value != undefined && (
         <div>
-          <div className="h5 px-3">{props.labelName}</div>
           <ProgressBar
             className="px-1 py-2"
-            hideText={true}
+            label={props.labelName}
             progressColor={props.color}
             score={props.value}
           />

diff --git a/frontend/src/Misc/frog.png b/frontend/src/Misc/frog.png