Frontend pet (#115)

frontend/package.json

@@ -16,6 +16,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-oidc-context": "^3.1.0",
+    "react-progressbar-fancy": "^1.1.4",
     "react-router-dom": "^6.23.1",
     "reactjs-popup": "^2.0.6"
   },
@@ -28,7 +29,6 @@
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
-    "tailwindcss": "^3.4.3",
     "typescript": "^5.2.2",
     "vite": "^5.2.12"
   }

frontend/src/App.css

@@ -1,7 +1,3 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 #root {
     display: flex;
     flex-grow: 1;
@@ -11,8 +7,8 @@
 }
 
 .footer {
-    display: flex;
-    width: 100%;
-    position: fixed;
-    bottom: 0;
+  display: flex;
+  width: 100%;
+  position: fixed;
+  bottom: 0;
 }

frontend/src/App.tsx

@@ -2,22 +2,23 @@ import React from "react";
 import { useAuth } from "react-oidc-context";
 import { useState } from 'react'
 import './App.css'
+import Pet from "./Components/Pet/Pet";
 import LinkDevice from './Components/LinkDevice'
 import Footer from './Components/Footer';
 import Navbar from './Components/Navbar/Navbar'
 import Settings from './Components/Settings'
 
 function App() {
   const auth = useAuth();
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState(0);
 
   switch (auth.activeNavigator) {
-    case 'signinSilent':
+    case "signinSilent":
       return <div>Signing you in...</div>;
-    case 'signoutRedirect':
+    case "signoutRedirect":
       return <div>Signing you out...</div>;
   }
-  
+
   if (auth.isLoading) {
     return <div>Loading...</div>;
   }
@@ -48,14 +49,11 @@ function App() {
 
         <div>Hello USERNAME: {auth.user?.profile?.preferred_username || 'User'}</div>
         <Footer/ >,
-
       </div>
     );
   }
-
   return[
     <Navbar/>,
-    <Settings/>,
     <Footer/>,
   ];
 }

frontend/src/Components/Navbar/Navbar.tsx

@@ -73,4 +73,4 @@ const Navbar = () => {
         </div>
     )
 }
-export default Navbar;
+export default Navbar;

frontend/src/Components/Pet/Pet.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import "./pet.css";
+import petImage from "../../assets/pet_frog.png";
+import petImage2 from "../../assets/petyboi_carti.png";
+import { ProgressBar } from "react-progressbar-fancy";
+
+// https://github.com/RavinRau/react-progressbar-fancy?tab=readme-ov-file
+
+const Pet = () => {
+  return (
+    <div className="pet_container">
+      <div className="pet_image">
+        <img src={petImage} alt="pet name" />
+      </div>
+      <div className="pet_status_container">
+        <div className="pet_status_contents pet_status_name text-primary">
+          (Pet name)
+        </div>
+        <div className="pet_status_contents pet_status_HP">
+          <ProgressBar
+            // className="space"
+            label={"HP"}
+            progressColor={"red"}
+            score={25}
+          />
+        </div>
+        <div className="pet_status_contents pet_status_Happiness">
+          <ProgressBar
+            className="space"
+            label={"Happiness"}
+            progressColor={"purple"}
+            score={50}
+          />
+        </div>
+        <div className="pet_status_contents pet_status_XP">
+          <ProgressBar
+            className="space"
+            label={"XP"}
+            progressColor={"green"}
+            score={80}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Pet;

frontend/src/Components/Pet/pet.css

@@ -0,0 +1,31 @@
+.pet_container{
+    display: flex;
+    flex-direction: row;
+}
+
+.pet_image{
+    flex: 1;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    margin: 2rem;
+}
+
+.pet_image img{
+    height: 100%;
+    width: 100%;
+}
+
+.pet_status_container {
+    flex: 1;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-direction: column;
+}
+
+.pet_status_contents{
+    width: 90%;
+    margin: 1rem;
+}

frontend/src/index.css

@@ -1,5 +1,7 @@
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  --bs-font-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Helvetica Neue", Inter, system-ui, Avenir, Arial, Helvetica,
+    sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
@@ -28,6 +30,7 @@ body {
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
+  font-family: "Helvetica Neue";
 }
 
 h1 {

frontend/src/main.tsx

@@ -1,9 +1,9 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
 import { AuthProvider } from "react-oidc-context";
-import 'bootstrap/dist/css/bootstrap.min.css';
+import "bootstrap/dist/css/bootstrap.min.css";
 import "bootstrap/dist/js/bootstrap.bundle.min";
 
 const oidcConfig = {
@@ -13,12 +13,10 @@ const oidcConfig = {
   // ...
 };
 
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <AuthProvider {...oidcConfig}>
       <App />
     </AuthProvider>
-  </React.StrictMode>,
-)
-
+  </React.StrictMode>
+);