add a ton of code

.editorconfig

@@ -0,0 +1,7 @@
+
+root=true
+
+[*.{js,jsx,ts,tsx}]
+
+indent_size = 2
+indent_style = space

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "vendor/swordbattle.io"]
+	path = vendor/swordbattle.io
+	url = https://github.com/codergautam/swordbattle.io

package.json

@@ -15,7 +15,9 @@
   "license": "ISC",
   "dependencies": {
     "@babel/plugin-syntax-import-attributes": "^7.23.3",
+    "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-hover-card": "^1.0.7",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-select": "^2.0.0",

src/App.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { checkLogin, tokenlogin, getPubInfo, login } from "@/utils/login";
-import cosmetics from "../cosmetics.json";
+import cosmetics from "@/../cosmetics.json";
 import {
   Card,
   CardContent,
@@ -33,11 +33,12 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 
-import Login from './Login';
+import { id2skin, playtimeParse, prettyNum } from "@/utils/jsutils";
 
-import Nav from "@/components/nav"
+import Login from "./Login";
+
+import Nav from "@/components/nav";
 
 export default function App() {
   const ApiUrl = "https://sb-api-fb48ef34a197.herokuapp.com/";
@@ -69,12 +70,13 @@ export default function App() {
   function flogin() {
     login(
       document.getElementById("username").value,
-      document.getElementById("password").value,
+      document.getElementById("password").value
     ).then((res) => {
       if (res.error) {
         document.getElementById("error").classList.remove("hidden");
-        document.getElementById("desc").innerHTML =
-          `${res.error}: ${res.message}`;
+        document.getElementById(
+          "desc"
+        ).innerHTML = `${res.error}: ${res.message}`;
       } else {
         window.localStorage.setItem("token", res.token);
         window.location.reload();
@@ -83,44 +85,10 @@ export default function App() {
   }
 
   if (isLogin == false) {
-    return (<Login />);
-  }
-
-  function playtimeParse(seconds) {
-    let days = Math.floor(seconds / 86400);
-    let remainder = seconds % 86400;
-    let hours = Math.floor(remainder / 3600);
-    remainder %= 3600;
-    let minutes = Math.floor(remainder / 60);
-    let secs = remainder % 60;
-
-    let result = "";
-
-    if (days > 0) {
-      result += `${days}d `;
-    }
-    if (hours > 0 || days > 0) {
-      result += `${hours}h `;
-    }
-    if (minutes > 0 || hours > 0 || days > 0) {
-      result += `${minutes}m `;
-    }
-    result += `${secs}s`;
-
-    return result.trim();
+    return <Login />;
   }
 
-  function prettyNum(num) {
-    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-  }
   // console.log(cosmetics)
-  function id2skin(id) {
-    for (let i = 0; i < cosmetics.skins.length; i++) {
-      if (cosmetics.skins[i].id == id) {
-        return cosmetics.skins[i];
-      }
-    }
-  }
 
   // console.log(userData)
   function email(userData) {
@@ -225,8 +193,8 @@ export default function App() {
       }),
     }).then((req) => {
       req.json().then((obj) => {
-        console.log(req)
-        console.log(obj)
+        console.log(req);
+        console.log(obj);
         if (Object.prototype.hasOwnProperty.call(obj, "error")) {
           alert(`equip failed: ${obj.error}`);
           return;
@@ -238,10 +206,9 @@ export default function App() {
   }
   // console.log(pubInfo)
   if (userData && pubInfo) {
-    console.log(pubInfo);
     return (
       <main>
-        <Nav/>
+        <Nav />
         <h1 className="text-3xl font-bold text-center p-5">Sword Manager</h1>
         <div className="flex flex-wrap w-full items-top justify-center p-2 h-full">
           <div className="flex flex-col w-2/5 m-3">
@@ -348,7 +315,7 @@ export default function App() {
                               if (
                                 !skin.og &&
                                 !userData.account.skins.owned.includes(
-                                  skin.id,
+                                  skin.id
                                 ) &&
                                 skin.price <= userData.account.gems
                               ) {

src/Leaderboard.jsx

@@ -1,28 +1,96 @@
 import React, { useEffect, useState } from "react";
 import Nav from "@/components/nav";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { ranges, types, getLeaderboard } from "@/utils/leaderboard";
+
+import { id2skin, prettyNum, playtimeParse } from "@/utils/jsutils";
+import { getPubInfo } from "@/utils/login";
+
+import UserCard from "@/components/usercard";
 
 export default function Leaderboard() {
   const [leaderboard, setLeaderboard] = useState([]);
-  const [profiles, setProfiles] = useState({});
+  const profiles = [];
+  const [upd, setUpd] = useState(0);
   const [range, setRange] = useState("all");
   const [type, setType] = useState("xp");
-  const [total, setTotal] = useState(0);
 
   useEffect(() => {
-    const fetchLeaderboard = async () => {};
-  }, []);
+    const fetchLeaderboard = async () => {
+      const data = await getLeaderboard(range, type);
+      data.forEach(async (element) => {
+        let user = element.username;
+        let info = await getPubInfo(user);
+        profiles.push(info);
+        setUpd(upd + 1);
+      });
 
-  if (leaderboard.length == 0) {
+      setLeaderboard(data);
+    };
+    fetchLeaderboard();
+  }, []);
+  if (leaderboard.length !== 0) {
+    let total = 0;
     return (
       <main>
         <Nav />
         <div className="flex flex-col items-center">
-          <p className="text-3xl text-center font-bold">Leaderboard</p>
+          <div className="felx flex-row items-center justify-center">
+            <Select>
+              <SelectTrigger className="w-[180px]">
+                <SelectValue placeholder="All-Time" />
+              </SelectTrigger>
+            </Select>
+            <Select>
+              <SelectTrigger className="w-[180px] mt-5">
+                <SelectValue placeholder="Xp" />
+              </SelectTrigger>
+            </Select>
+          </div>
+          <p className="text-3xl text-center font-bold mt-5">Leaderboard</p>
           <table className="mt-10 w-4/5">
-            <tbody className="w-full" id="data">
-              <tr className="w-full bg-slate-700 text-center">
-                <td className="p-2 rounded-sm">lol</td>
+            <thead>
+              <tr>
+                <td>Username</td>
+                <td>Coins</td>
+                <td>Kills</td>
+                <td>Playtime</td>
+                <td>Xp</td>
               </tr>
+            </thead>
+            <tbody className="w-full" id="data">
+              {leaderboard.map((user) => {
+                let tmp = total;
+                total += 1;
+                return (
+                  <tr key={tmp} className="m-5">
+                    <td>
+                      <UserCard
+                        user={
+                          Object.prototype.hasOwnProperty.call(
+                            profiles,
+                            user.username
+                          )
+                            ? profiles[user.username]
+                            : "empty"
+                        }
+                      >
+                        {user.username}
+                      </UserCard>
+                    </td>
+                    <td>{prettyNum(user.coins)}</td>
+                    <td>{prettyNum(user.kills)}</td>
+                    <td>{playtimeParse(user.playtime)}</td>
+                    <td>{prettyNum(user.xp)}</td>
+                  </tr>
+                );
+              })}
             </tbody>
           </table>
         </div>

src/components/ui/avatar.tsx

@@ -0,0 +1,48 @@
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/utils/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }

src/components/ui/hover-card.tsx

@@ -0,0 +1,27 @@
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/utils/utils"
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

src/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/utils/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

src/components/usercard.jsx

@@ -0,0 +1,53 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card";
+import { CalendarDays } from "lucide-react";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function UserCard({ user, children }) {
+  if (user == "empty") {
+    return (
+      <HoverCard>
+        <HoverCardTrigger>{children}</HoverCardTrigger>
+        <HoverCardContent className="w-80">
+          <div className="flex items-center space-x-4">
+            <Skeleton className="h-12 w-12 rounded-full" />
+            <div className="space-y-2">
+              <Skeleton className="h-4 w-[150px]" />
+              <Skeleton className="h-4 w-[100px]" />
+            </div>
+          </div>
+        </HoverCardContent>
+      </HoverCard>
+    );
+  } else {
+    return (
+      <HoverCard>
+        <HoverCardTrigger>{children}</HoverCardTrigger>
+        <HoverCardContent className="w-80">
+          <div className="flex justify-between space-x-4">
+            <Avatar>
+              <AvatarImage src="https://github.com/vercel.png" />
+              <AvatarFallback>VC</AvatarFallback>
+            </Avatar>
+            <div className="space-y-1">
+              <h4 className="text-sm font-semibold">@{user.username}</h4>
+              <p className="text-sm">
+                The React Framework – created and maintained by @vercel.
+              </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 December 2021
+                </span>
+              </div>
+            </div>
+          </div>
+        </HoverCardContent>
+      </HoverCard>
+    );
+  }
+}