Skip to content

Commit dcbe056

Browse files
author
sk337
committed
add profiles
1 parent 202bbc7 commit dcbe056

File tree

6 files changed

+132
-24
lines changed

6 files changed

+132
-24
lines changed

‎src/Leaderboard.jsx

-2
Original file line numberDiff line numberDiff line change
@@ -109,8 +109,6 @@ export default function Leaderboard() {
109109
if (ud.error) {
110110
console.log("Error: ", ud.error);
111111
} else {
112-
let image= await import(`../vendor/swordbattle.io/client/public/assets/game/player/${id2skin(ud.account.skins.equipped).bodyFileName.split(".")[0]}.png`)
113-
ud["image"] = image.default;
114112
setProfiles(profiles =>[...profiles, ud]);
115113
}
116114
})}>

‎src/Profile.jsx

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import React, { useState, useEffect } from "react";
2+
import Nav from "@/components/nav";
3+
import { getPubInfo } from "@/utils/login";
4+
import {
5+
Avatar,
6+
AvatarFallback,
7+
AvatarImage,
8+
} from "@/components/ui/avatar";
9+
import {
10+
Card,
11+
CardContent,
12+
CardDescription,
13+
CardFooter,
14+
CardHeader,
15+
CardTitle,
16+
} from "@/components/ui/card";
17+
18+
import { dateParse } from "@/utils/jsutils";
19+
20+
export default function Profile() {
21+
const urlData = new URL("https://"+window.location.hash.replace("#", "q/s"))
22+
console.log(urlData)
23+
if (!urlData.searchParams.get("user")) {
24+
return (
25+
<main>
26+
<nav />
27+
<div className="flex flex-col items-center">
28+
<div className="felx flex-row items-center justify-center">
29+
<h1>Username required</h1>
30+
</div>
31+
</div>
32+
</main>
33+
);
34+
}
35+
36+
const [user, setUser] = useState(false);
37+
38+
useEffect(() => {
39+
const fetchUser = async () => {
40+
const data = await getPubInfo(urlData.searchParams.get("user"));
41+
setUser(data);
42+
};
43+
fetchUser();
44+
}, []);
45+
46+
47+
if (user && !user.error) {
48+
return (
49+
<main>
50+
<Nav />
51+
<div className="flex flex-col items-center">
52+
<div className="felx flex-row items-center justify-center p-5">
53+
<h1 className="text-3xl font-bold text-center">Profile</h1>
54+
<Card>
55+
<CardHeader>
56+
<CardTitle>{user.account.username}</CardTitle>
57+
</CardHeader>
58+
<CardContent>
59+
<div className="flex items-center space-x-4">
60+
<Avatar>
61+
<AvatarImage src={user.image} />
62+
<AvatarFallback>VC</AvatarFallback>
63+
</Avatar>
64+
<div className="space-y-2">
65+
<p>Joined: {dateParse(user.account.created_at)}</p>
66+
<p>XP: {user.account.xp}</p>
67+
</div>
68+
</div>
69+
<p>Level: {user.account.level}</p>
70+
</CardContent>
71+
<CardFooter>
72+
<p>More stats coming soon</p>
73+
</CardFooter>
74+
</Card>
75+
76+
</div>
77+
</div>
78+
</main>
79+
);
80+
} else if(user.error){
81+
return (
82+
<p>not found</p>
83+
)
84+
} else {
85+
return (
86+
<main>
87+
<h1 className="m-5 text-3xl font-bold text-center">Loading...</h1>
88+
<p className="font-symbol text-center text-6xl animate-spin"></p>
89+
</main>
90+
);
91+
}
92+
}

‎src/components/usercard.jsx

+7-21
Original file line numberDiff line numberDiff line change
@@ -6,27 +6,10 @@ import {
66
} from "@/components/ui/hover-card";
77
import { CalendarDays } from "lucide-react";
88
import { Skeleton } from "@/components/ui/skeleton";
9-
import { id2skin } from "@/utils/jsutils";
9+
import { id2skin, dateParse } from "@/utils/jsutils";
1010

1111
export default function UserCard({ user, children }) {
12-
function dateparse(){
13-
let date = new Date(user.account.created_at).toString().split(" ");
14-
let monthMap= {
15-
"Jan": "January",
16-
"Feb": "February",
17-
"Mar": "March",
18-
"Apr": "April",
19-
"May": "May",
20-
"Jun": "June",
21-
"Jul": "July",
22-
"Aug": "August",
23-
"Sep": "September",
24-
"Oct": "October",
25-
"Nov": "November",
26-
"Dec": "December"
27-
}
28-
return `${monthMap[date[1]]} ${date[2]} ${date[3]}`;
29-
}
12+
3013
if (user == "empty") {
3114
return (
3215
<HoverCard>
@@ -53,14 +36,17 @@ export default function UserCard({ user, children }) {
5336
<AvatarFallback>VC</AvatarFallback>
5437
</Avatar>
5538
<div className="space-y-1">
56-
<h4 className="text-sm font-semibold">@{user.account.username}</h4>
39+
<a className="text-sm font-semibold" href="#" onClick={()=>{
40+
window.location.hash = `#profile?user=${encodeURIComponent(user.account.username)}`;
41+
window.location.reload();
42+
}}>@{user.account.username}</a>
5743
<p className="text-sm">
5844
If Gautam adds bios it will go here
5945
</p>
6046
<div className="flex items-center pt-2">
6147
<CalendarDays className="mr-2 h-4 w-4 opacity-70" />{" "}
6248
<span className="text-xs text-muted-foreground">
63-
Joined {dateparse()}
49+
Joined {dateParse(user.account.created_at)}
6450
</span>
6551
</div>
6652
</div>

‎src/index.jsx

+8-1
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,23 @@ import ReactDOM from "react-dom/client";
33
import App from "@/App";
44
import "@/App.css";
55
import Leaderboard from "@/Leaderboard";
6+
import Profile from "@/Profile";
67

78
const root = ReactDOM.createRoot(document.getElementById("root"));
89
console.log(window.location.hash.toLowerCase());
910

10-
if (window.location.hash.toLowerCase() == "#leaderboard") {
11+
if (window.location.hash.toLowerCase().startsWith("#leaderboard")) {
1112
root.render(
1213
<React.StrictMode>
1314
<Leaderboard />
1415
</React.StrictMode>
1516
);
17+
} else if (window.location.hash.toLowerCase().startsWith("#profile")) {
18+
root.render(
19+
<React.StrictMode>
20+
<Profile />
21+
</React.StrictMode>
22+
);
1623
} else {
1724
root.render(
1825
<React.StrictMode>

‎src/utils/jsutils.js

+19
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,22 @@ export function id2skin(id) {
3535
}
3636
}
3737
}
38+
39+
export function dateParse(dates){
40+
let date = new Date(dates).toString().split(" ");
41+
let monthMap= {
42+
"Jan": "January",
43+
"Feb": "February",
44+
"Mar": "March",
45+
"Apr": "April",
46+
"May": "May",
47+
"Jun": "June",
48+
"Jul": "July",
49+
"Aug": "August",
50+
"Sep": "September",
51+
"Oct": "October",
52+
"Nov": "November",
53+
"Dec": "December"
54+
}
55+
return `${monthMap[date[1]]} ${date[2]} ${date[3]}`;
56+
}

‎src/utils/login.js

+6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
const ApiUrl = "https://sb-api-fb48ef34a197.herokuapp.com/";
22

3+
import {id2skin} from "./jsutils"
4+
35
export async function checkLogin(){
46
if (window.localStorage.getItem("token") !== null) {
57
let account = await fetch(ApiUrl + "auth/account", {
@@ -50,5 +52,9 @@ export async function getPubInfo(username){
5052
method: "POST",
5153
});
5254
const data = await pub.json();
55+
if (!data.hasOwnProperty("error")) {
56+
let image= await import(`../../vendor/swordbattle.io/client/public/assets/game/player/${id2skin(data.account.skins.equipped).bodyFileName.split(".")[0]}.png`)
57+
data["image"] = image.default;
58+
}
5359
return data;
5460
}

0 commit comments

Comments
 (0)