add profiles

sk337 · Jan 24, 2024 · dcbe056 · dcbe056
1 parent 202bbc7
commit dcbe056
Show file tree

Hide file tree

Showing 6 changed files with 132 additions and 24 deletions.
diff --git a/src/Leaderboard.jsx b/src/Leaderboard.jsx
@@ -109,8 +109,6 @@ export default function Leaderboard() {
                       if (ud.error) {
                         console.log("Error: ", ud.error);
                       } else {
-                        let image= await import(`../vendor/swordbattle.io/client/public/assets/game/player/${id2skin(ud.account.skins.equipped).bodyFileName.split(".")[0]}.png`)
-                        ud["image"] = image.default;
                         setProfiles(profiles =>[...profiles, ud]);
                       }
                     })}>

diff --git a/src/Profile.jsx b/src/Profile.jsx
@@ -0,0 +1,92 @@
+import React, { useState, useEffect } from "react";
+import Nav from "@/components/nav";
+import { getPubInfo } from "@/utils/login";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/components/ui/avatar";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+import { dateParse } from "@/utils/jsutils";
+
+export default function Profile() {
+  const urlData = new URL("https://"+window.location.hash.replace("#", "q/s"))
+  console.log(urlData)
+  if (!urlData.searchParams.get("user")) {
+    return (
+      <main>
+        <nav />
+        <div className="flex flex-col items-center">
+          <div className="felx flex-row items-center justify-center">
+            <h1>Username required</h1>
+          </div>
+        </div>
+      </main>
+    );
+  }
+
+  const [user, setUser] = useState(false);
+
+  useEffect(() => {
+    const fetchUser = async () => {
+      const data = await getPubInfo(urlData.searchParams.get("user"));
+      setUser(data);
+    };
+    fetchUser();
+  }, []);
+
+
+  if (user && !user.error) {
+    return (
+      <main>
+        <Nav />
+        <div className="flex flex-col items-center">
+          <div className="felx flex-row items-center justify-center p-5">
+            <h1 className="text-3xl font-bold text-center">Profile</h1>
+            <Card>
+              <CardHeader>
+                <CardTitle>{user.account.username}</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="flex items-center space-x-4">
+                  <Avatar>
+                    <AvatarImage src={user.image} />
+                    <AvatarFallback>VC</AvatarFallback>
+                  </Avatar>
+                  <div className="space-y-2">
+                    <p>Joined: {dateParse(user.account.created_at)}</p>
+                    <p>XP: {user.account.xp}</p>
+                  </div>
+                </div>
+                <p>Level: {user.account.level}</p>
+              </CardContent>
+              <CardFooter>
+                <p>More stats coming soon</p>
+              </CardFooter>
+            </Card>
+
+          </div>
+        </div>
+      </main>
+    );
+  } else if(user.error){
+    return (
+      <p>not found</p>
+    )
+  } else {
+    return (
+      <main>
+        <h1 className="m-5 text-3xl font-bold text-center">Loading...</h1>
+        <p className="font-symbol text-center text-6xl animate-spin"></p>
+      </main>
+    );
+  }
+}
diff --git a/src/components/usercard.jsx b/src/components/usercard.jsx
@@ -6,27 +6,10 @@ import {
 } from "@/components/ui/hover-card";
 import { CalendarDays } from "lucide-react";
 import { Skeleton } from "@/components/ui/skeleton";
-import { id2skin } from "@/utils/jsutils";
+import { id2skin, dateParse } from "@/utils/jsutils";
 
 export default function UserCard({ user, children }) {
-  function dateparse(){
-    let date = new Date(user.account.created_at).toString().split(" ");
-    let monthMap= {
-      "Jan": "January",
-      "Feb": "February",
-      "Mar": "March",
-      "Apr": "April",
-      "May": "May",
-      "Jun": "June",
-      "Jul": "July",
-      "Aug": "August",
-      "Sep": "September",
-      "Oct": "October",
-      "Nov": "November",
-      "Dec": "December"
-    }
-    return `${monthMap[date[1]]} ${date[2]} ${date[3]}`;
-  }
+
   if (user == "empty") {
     return (
       <HoverCard>
@@ -53,14 +36,17 @@ export default function UserCard({ user, children }) {
               <AvatarFallback>VC</AvatarFallback>
             </Avatar>
             <div className="space-y-1">
-              <h4 className="text-sm font-semibold">@{user.account.username}</h4>
+              <a className="text-sm font-semibold" href="#" onClick={()=>{
+                window.location.hash = `#profile?user=${encodeURIComponent(user.account.username)}`;
+                window.location.reload();
+              }}>@{user.account.username}</a>
               <p className="text-sm">
                 If Gautam adds bios it will go here
               </p>
               <div className="flex items-center pt-2">
                 <CalendarDays className="mr-2 h-4 w-4 opacity-70" />{" "}
                 <span className="text-xs text-muted-foreground">
-                  Joined {dateparse()}
+                  Joined {dateParse(user.account.created_at)}
                 </span>
               </div>
             </div>

diff --git a/src/index.jsx b/src/index.jsx
@@ -3,16 +3,23 @@ import ReactDOM from "react-dom/client";
 import App from "@/App";
 import "@/App.css";
 import Leaderboard from "@/Leaderboard";
+import Profile from "@/Profile";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 console.log(window.location.hash.toLowerCase());
 
-if (window.location.hash.toLowerCase() == "#leaderboard") {
+if (window.location.hash.toLowerCase().startsWith("#leaderboard")) {
   root.render(
     <React.StrictMode>
       <Leaderboard />
     </React.StrictMode>
   );
+} else if (window.location.hash.toLowerCase().startsWith("#profile")) {
+  root.render(
+    <React.StrictMode>
+      <Profile />
+    </React.StrictMode>
+  );
 } else {
   root.render(
     <React.StrictMode>

diff --git a/src/utils/jsutils.js b/src/utils/jsutils.js
@@ -35,3 +35,22 @@ export function id2skin(id) {
     }
   }
 }
+
+export function dateParse(dates){
+  let date = new Date(dates).toString().split(" ");
+  let monthMap= {
+    "Jan": "January",
+    "Feb": "February",
+    "Mar": "March",
+    "Apr": "April",
+    "May": "May",
+    "Jun": "June",
+    "Jul": "July",
+    "Aug": "August",
+    "Sep": "September",
+    "Oct": "October",
+    "Nov": "November",
+    "Dec": "December"
+  }
+  return `${monthMap[date[1]]} ${date[2]} ${date[3]}`;
+}
diff --git a/src/utils/login.js b/src/utils/login.js
@@ -1,5 +1,7 @@
 const ApiUrl = "https://sb-api-fb48ef34a197.herokuapp.com/";
 
+import {id2skin} from "./jsutils"
+
 export async function checkLogin(){
 if (window.localStorage.getItem("token") !== null) {
   let account = await fetch(ApiUrl + "auth/account", {
@@ -50,5 +52,9 @@ export async function getPubInfo(username){
     method: "POST",
   });
   const data = await pub.json();
+  if (!data.hasOwnProperty("error")) {
+    let image= await import(`../../vendor/swordbattle.io/client/public/assets/game/player/${id2skin(data.account.skins.equipped).bodyFileName.split(".")[0]}.png`)
+    data["image"] = image.default;
+  }
   return data;
 }