From 29d56db5194f22d7fed6e650a97ecb11caf1d42a Mon Sep 17 00:00:00 2001
From: sk337 <nathan@shorthoppers.com>
Date: Tue, 23 Jan 2024 19:36:57 -0800
Subject: [PATCH] add a ton of code

---
 .editorconfig                    |  7 +++
 .gitmodules                      |  3 ++
 package.json                     |  2 +
 src/App.jsx                      | 61 ++++++----------------
 src/Leaderboard.jsx              | 86 ++++++++++++++++++++++++++++----
 src/components/ui/avatar.tsx     | 48 ++++++++++++++++++
 src/components/ui/hover-card.tsx | 27 ++++++++++
 src/components/ui/skeleton.tsx   | 15 ++++++
 src/components/usercard.jsx      | 53 ++++++++++++++++++++
 src/index.jsx                    | 10 ++--
 src/utils/jsutils.js             | 37 ++++++++++++++
 src/utils/leaderboard.js         | 46 +++++++++++------
 vendor/swordbattle.io            |  1 +
 13 files changed, 319 insertions(+), 77 deletions(-)
 create mode 100644 .editorconfig
 create mode 100644 .gitmodules
 create mode 100644 src/components/ui/avatar.tsx
 create mode 100644 src/components/ui/hover-card.tsx
 create mode 100644 src/components/ui/skeleton.tsx
 create mode 100644 src/components/usercard.jsx
 create mode 100644 src/utils/jsutils.js
 create mode 160000 vendor/swordbattle.io

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..1105878
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,7 @@
+
+root=true
+
+[*.{js,jsx,ts,tsx}]
+
+indent_size = 2
+indent_style = space
\ No newline at end of file
diff --git a/.gitmodules b/.gitmodules
new file mode 100644
index 0000000..569f73c
--- /dev/null
+++ b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "vendor/swordbattle.io"]
+	path = vendor/swordbattle.io
+	url = https://github.com/codergautam/swordbattle.io
diff --git a/package.json b/package.json
index bf9942a..d846c5d 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.jsx b/src/App.jsx
index 3b891bb..0a74485 100644
--- a/src/App.jsx
+++ b/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
                               ) {
diff --git a/src/Leaderboard.jsx b/src/Leaderboard.jsx
index db5c0e4..995bb0e 100644
--- a/src/Leaderboard.jsx
+++ b/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>
diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
new file mode 100644
index 0000000..c5434bb
--- /dev/null
+++ b/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 }
diff --git a/src/components/ui/hover-card.tsx b/src/components/ui/hover-card.tsx
new file mode 100644
index 0000000..076c06b
--- /dev/null
+++ b/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 }
diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
new file mode 100644
index 0000000..7e8125a
--- /dev/null
+++ b/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 }
diff --git a/src/components/usercard.jsx b/src/components/usercard.jsx
new file mode 100644
index 0000000..5919873
--- /dev/null
+++ b/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>
+    );
+  }
+}
diff --git a/src/index.jsx b/src/index.jsx
index c4f9a6d..9e3fafe 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,8 +1,8 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App";
-import "@/App.css"
-import Leaderboard from './Leaderboard'
+import App from "@/App";
+import "@/App.css";
+import Leaderboard from "@/Leaderboard";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 console.log(window.location.hash.toLowerCase());
@@ -12,11 +12,11 @@ if (window.location.hash.toLowerCase() == "#leaderboard") {
     <React.StrictMode>
       <Leaderboard />
     </React.StrictMode>
-  )
+  );
 } else {
   root.render(
     <React.StrictMode>
       <App />
-    </React.StrictMode>,
+    </React.StrictMode>
   );
 }
diff --git a/src/utils/jsutils.js b/src/utils/jsutils.js
new file mode 100644
index 0000000..efd3d96
--- /dev/null
+++ b/src/utils/jsutils.js
@@ -0,0 +1,37 @@
+import cosmetics from "@/../cosmetics.json";
+
+export 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();
+}
+
+export function prettyNum(num) {
+  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+}
+
+export function id2skin(id) {
+  for (let i = 0; i < cosmetics.skins.length; i++) {
+    if (cosmetics.skins[i].id == id) {
+      return cosmetics.skins[i];
+    }
+  }
+}
diff --git a/src/utils/leaderboard.js b/src/utils/leaderboard.js
index 81619f6..a54267e 100644
--- a/src/utils/leaderboard.js
+++ b/src/utils/leaderboard.js
@@ -1,21 +1,35 @@
 export const types = {
-  'kills': 'Kills',
-  'coins': 'Coins',
-  'playtime': 'Survived',
-  'xp': 'XP',
-  'total-coins': 'Total Coins',
-  'total-kills': 'Total Stabs',
-  'total-playtime': 'Total Playtime',
-}
+  kills: "Kills",
+  coins: "Coins",
+  playtime: "Survived",
+  xp: "XP",
+  coins: "Total Coins",
+  kills: "Total Stabs",
+  playtime: "Total Playtime",
+};
 
 export const ranges = {
-  'all': 'All-Time',
-  'day': 'Past Day',
-  'week': 'Past Week',
-}
+  all: "All-Time",
+  day: "Past Day",
+  week: "Past Week",
+};
 
-const ApiUrl = "https://sb-api-fb48ef34a197.herokuapp.com/"
+const ApiUrl = "https://sb-api-fb48ef34a197.herokuapp.com/";
 
-export async function getLeaderboard(range, type){
-
-}
\ No newline at end of file
+export async function getLeaderboard(range, type) {
+  const isGames = type === "coins" || type === "kills" || type === "playtime";
+  const leaders = await fetch(`${ApiUrl}${isGames ? "games" : "stats"}/fetch`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      timeRange: range,
+      sortBy: type,
+      limit: 100,
+    }),
+  });
+  const data = await leaders.json();
+  console.log(data);
+  return data;
+}
diff --git a/vendor/swordbattle.io b/vendor/swordbattle.io
new file mode 160000
index 0000000..4129740
--- /dev/null
+++ b/vendor/swordbattle.io
@@ -0,0 +1 @@
+Subproject commit 4129740ed620ad8b0ea883ce99d17af2be8a20f1