finish leaderboard and add dummy registration page

sk337 · sk337 · commit 7ecedd14ba7e · 2024-01-24T10:52:49.000-08:00
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",
     "@types/node": "^18.0.6",
     "@vitejs/plugin-react": "^4.2.1",
diff --git a/src/Leaderboard.jsx b/src/Leaderboard.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useReducer } from "react";
 import Nav from "@/components/nav";
 import {
   Select,
@@ -15,21 +15,31 @@ import { getPubInfo } from "@/utils/login";
 import UserCard from "@/components/usercard";
 
 export default function Leaderboard() {
+  const [ignored, forceUpdate] = useReducer(x => x + 1, 0);
   const [leaderboard, setLeaderboard] = useState([]);
-  const profiles = [];
+  const [profiles, setProfiles] = useState([]);
   const [upd, setUpd] = useState(0);
   const [range, setRange] = useState("all");
   const [type, setType] = useState("xp");
 
+  function userChk(e){
+    let res = "empty";
+    if (profiles.length === 0) {
+      return res;
+    }
+    for (let i = 0; i < profiles.length; i++) {
+      if (profiles[i] != undefined && profiles[i].account.username === e) {
+        return profiles[i];
+      }
+    }
+    return res;
+  }
+
   useEffect(() => {
     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);
-      });
+      console.log(data.length);
+      
 
       setLeaderboard(data);
     };
@@ -70,16 +80,27 @@ export default function Leaderboard() {
                 total += 1;
                 return (
                   <tr key={tmp} className="m-5">
-                    <td>
-                      <UserCard
-                        user={
-                          Object.prototype.hasOwnProperty.call(
-                            profiles,
-                            user.username
-                          )
-                            ? profiles[user.username]
-                            : "empty"
+                    <td onMouseOver={( async (e)=>{
+                      const username = e.target.childNodes[0].innerText;
+                      console.log(username)
+                      for (let i = 0; i < profiles.length; i++) {
+                        if (profiles[i] === undefined) {
+                        } else if (Object.prototype.hasOwnProperty.call(profiles[i], "account") && profiles[i].account.username === username){
+                          return;
                         }
+                      }
+                  
+                      let ud = await getPubInfo(username);
+                      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}`)
+                        ud["image"] = image.default;
+                        setProfiles(profiles =>[...profiles, ud]);
+                      }
+                    })}>
+                      <UserCard
+                        user={userChk(user.username)}
                       >
                         {user.username}
                       </UserCard>
diff --git a/src/Login.jsx b/src/Login.jsx
@@ -7,6 +7,12 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/components/ui/tabs";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
@@ -28,6 +34,10 @@ export default function Login() {
       }
     });
   }
+
+  function register() {
+    alert("For Now, Registration is not available for now. Please Login.")
+  }
   
   return (
     <main className="flex flex-col items-center justify-center">
@@ -39,28 +49,61 @@ export default function Login() {
             Invalid Username or Password
           </AlertDescription>
         </Alert>
-        <Card className="w-full">
-          <CardHeader>
-            <CardTitle className=" text-center">
-              Login With Swordbattle
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <Input id="username" placeholder="Username"></Input>
-            <Input
-              id="password"
-              placeholder="Password"
-              type="password"
-              className="mt-3"
-            ></Input>
-            <Button
-              className="text-center mt-5 w-full bg-blue-500 hover:bg-blue-600"
-              onClick={flogin}
-            >
-              Login
-            </Button>
-          </CardContent>
-        </Card>
+        <Tabs defaultValue="login" className="w-[400px]">
+          <TabsList className=" grid w-full grid-cols-2">
+            <TabsTrigger value="login">Log In</TabsTrigger>
+            <TabsTrigger value="signup">Sign Up</TabsTrigger>
+          </TabsList>
+          <TabsContent value="login">
+            <Card className="w-full">
+              <CardHeader>
+                <CardTitle className=" text-center">
+                  Login With Swordbattle
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <Input id="username" placeholder="Username"></Input>
+                <Input
+                  id="password"
+                  placeholder="Password"
+                  type="password"
+                  className="mt-3"
+                ></Input>
+                <Button
+                  className="text-center mt-5 w-full bg-blue-500 hover:bg-blue-600"
+                  onClick={flogin}
+                >
+                  Login
+                </Button>
+              </CardContent>
+            </Card>
+          </TabsContent>
+          <TabsContent value="signup">
+            <Card className="w-full">
+              <CardHeader>
+                <CardTitle className=" text-center">
+                  Sign Up for Account
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <Input id="username" placeholder="Username"></Input>
+                <Input
+                  id="password"
+                  placeholder="Password"
+                  type="password"
+                  className="mt-3"
+                ></Input>
+                <Button
+                  className="text-center mt-5 w-full bg-blue-500 hover:bg-blue-600"
+                  onClick={register}
+                >
+                  Sign Up
+                </Button>
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </Tabs>
+       
       </div>
     </main>
   );
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
@@ -0,0 +1,53 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/utils/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/src/components/usercard.jsx b/src/components/usercard.jsx
@@ -6,8 +6,27 @@ import {
 } from "@/components/ui/hover-card";
 import { CalendarDays } from "lucide-react";
 import { Skeleton } from "@/components/ui/skeleton";
+import { id2skin } 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>
@@ -30,18 +49,18 @@ export default function UserCard({ user, children }) {
         <HoverCardContent className="w-80">
           <div className="flex justify-between space-x-4">
             <Avatar>
-              <AvatarImage src="https://github.com/vercel.png" />
+              <AvatarImage src={user.image} />
               <AvatarFallback>VC</AvatarFallback>
             </Avatar>
             <div className="space-y-1">
-              <h4 className="text-sm font-semibold">@{user.username}</h4>
+              <h4 className="text-sm font-semibold">@{user.account.username}</h4>
               <p className="text-sm">
-                The React Framework – created and maintained by @vercel.
+                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 December 2021
+                  Joined {dateparse()}
                 </span>
               </div>
             </div>
