Updated sidebar
This commit is contained in:
@@ -25,102 +25,155 @@ export default function Sidebar({ level, ign, player, guild, rank, specialRank,
|
|||||||
const levelMultiplierVal = levelMultiplier.value
|
const levelMultiplierVal = levelMultiplier.value
|
||||||
const levelMultiplierText = levelMultiplier.level === true ? `(Level ${level.toFixed(1).split(".")[0]})` : `(${levelMultiplier.name})`
|
const levelMultiplierText = levelMultiplier.level === true ? `(Level ${level.toFixed(1).split(".")[0]})` : `(${levelMultiplier.name})`
|
||||||
|
|
||||||
|
function General() {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-between px-8">
|
||||||
|
<div className="text-center">
|
||||||
|
<p>Hypixel level</p>
|
||||||
|
<p>{level.toFixed(2)}</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<p>Karma</p>
|
||||||
|
<p className="text-mc-light-purple">{formatNumber(player.karma)}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function Coins() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
<span className="font-bold">{"Coin multiplier: "}</span>
|
||||||
|
<span>{`x${levelMultiplierVal} ${levelMultiplierText}`}</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span className="font-bold">{"Total coins: "}</span>
|
||||||
|
<span className="text-mc-gold">
|
||||||
|
{formatNumber(getTotalCoins(player.stats as Record<string, Record<"coins", number | undefined>>))}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function Other() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
<span>
|
||||||
|
<Link href={`/achievements/${ign}`} className="font-bold underline">
|
||||||
|
Achievement Points
|
||||||
|
</Link>
|
||||||
|
</span>
|
||||||
|
<span className="font-bold">{": "}</span>
|
||||||
|
<span>{formatNumber(player.achievementPoints ?? 0)}</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span>
|
||||||
|
<Link href={`/quests/${ign}`} className="font-bold underline">
|
||||||
|
Quests Completed
|
||||||
|
</Link>
|
||||||
|
</span>
|
||||||
|
<span className="font-bold">{": "}</span>
|
||||||
|
<span>{formatNumber(getTotalQuests(player.quests))}</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span className="font-bold">{"Challenges Completed: "}</span>
|
||||||
|
<span>{formatNumber(getTotalChallenges(player.challenges))}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DailyRewards() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
<span className="font-bold">{"Today's Reward: "}</span>
|
||||||
|
<span
|
||||||
|
className={`${rewardClaimed(player.lastClaimedReward) === true ? "font-bold text-mc-green" : undefined}`}
|
||||||
|
>
|
||||||
|
{rewardClaimed(player.lastClaimedReward) ? "Claimed" : "Unclaimed"}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span className="font-bold">{"Rewards Claimed: "}</span>
|
||||||
|
<span>{player.totalRewards}</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span className="font-bold">{"Reward Streak: "}</span>
|
||||||
|
<span>{player.rewardStreak}</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span className="font-bold">{"Top Reward Streak: "}</span>
|
||||||
|
<span>{player.rewardHighScore}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function Gifting() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
<span className="font-bold">{"Gifts Given: "}</span>
|
||||||
|
<span>{player.giftingMeta?.giftsGiven ?? 0}</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span className="font-bold">{"Ranks Given: "}</span>
|
||||||
|
<span>{player.giftingMeta?.ranksGiven ?? 0}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function Logins() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
<span className="font-bold">{"First Login: "}</span>
|
||||||
|
<span>{formatDate(player.firstLogin ?? 0)}</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span className="font-bold">{"Last Login: "}</span>
|
||||||
|
<span>{formatDate(player.lastLogin ?? 0)}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SoicalLinks() {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<h1 className="text-xl font-bold underline">Social Links</h1>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<SocialIcons
|
||||||
|
discord={player?.socialMedia?.links?.DISCORD}
|
||||||
|
twitch={player?.socialMedia?.links?.TWITCH}
|
||||||
|
youtube={player?.socialMedia?.links?.YOUTUBE}
|
||||||
|
twitter={player?.socialMedia?.links?.TWITCH}
|
||||||
|
hypixel={player?.socialMedia?.links?.HYPIXEL}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className="w-1/4">
|
<Card className="w-1/4">
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<div className="flex justify-between px-8">
|
<General />
|
||||||
<div className="text-center">
|
|
||||||
<p>Hypixel level</p>
|
|
||||||
<p>{level.toFixed(2)}</p>
|
|
||||||
</div>
|
|
||||||
<div className="text-center">
|
|
||||||
<p>Karma</p>
|
|
||||||
<p className="text-mc-light-purple">{formatNumber(player.karma)}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Separator className="my-4" />
|
<Separator className="my-4" />
|
||||||
<div>
|
<Coins />
|
||||||
<p>
|
|
||||||
<span className="font-bold">{"Coin multiplier: "}</span>
|
|
||||||
<span>{`x${levelMultiplierVal} ${levelMultiplierText}`}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span className="font-bold">{"Total coins: "}</span>
|
|
||||||
<span className="text-mc-gold">
|
|
||||||
{formatNumber(getTotalCoins(player.stats as Record<string, Record<"coins", number | undefined>>))}
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<Separator className="my-4" />
|
<Separator className="my-4" />
|
||||||
<div>
|
<Other />
|
||||||
<p>
|
|
||||||
<span>
|
|
||||||
<Link href={`/achievements/${ign}`} className="font-bold underline">
|
|
||||||
Achievement Points
|
|
||||||
</Link>
|
|
||||||
</span>
|
|
||||||
<span className="font-bold">{": "}</span>
|
|
||||||
<span>{formatNumber(player.achievementPoints ?? 0)}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span>
|
|
||||||
<Link href={`/quests/${ign}`} className="font-bold underline">
|
|
||||||
Quests Completed
|
|
||||||
</Link>
|
|
||||||
</span>
|
|
||||||
<span className="font-bold">{": "}</span>
|
|
||||||
<span>{formatNumber(getTotalQuests(player.quests))}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span className="font-bold">{"Challenges Completed: "}</span>
|
|
||||||
<span>{formatNumber(getTotalChallenges(player.challenges))}</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<Separator className="my-4" />
|
<Separator className="my-4" />
|
||||||
<div>
|
<DailyRewards />
|
||||||
<p>
|
|
||||||
<span className="font-bold">{"Today's Reward: "}</span>
|
|
||||||
<span
|
|
||||||
className={`${rewardClaimed(player.lastClaimedReward) === true ? "font-bold text-mc-green" : undefined}`}
|
|
||||||
>
|
|
||||||
{rewardClaimed(player.lastClaimedReward) ? "Claimed" : "Unclaimed"}
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span className="font-bold">{"Rewards Claimed: "}</span>
|
|
||||||
<span>{player.totalRewards}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span className="font-bold">{"Reward Streak: "}</span>
|
|
||||||
<span>{player.rewardStreak}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span className="font-bold">{"Top Reward Streak: "}</span>
|
|
||||||
<span>{player.rewardHighScore}</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<Separator className="my-4" />
|
<Separator className="my-4" />
|
||||||
<div>
|
<Gifting />
|
||||||
<p>
|
|
||||||
<span className="font-bold">{"Gifts Given: "}</span>
|
|
||||||
<span>{player.giftingMeta?.giftsGiven ?? 0}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span className="font-bold">{"Ranks Given: "}</span>
|
|
||||||
<span>{player.giftingMeta?.ranksGiven ?? 0}</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<Separator className="my-4" />
|
<Separator className="my-4" />
|
||||||
<div>
|
<Logins />
|
||||||
<p>
|
|
||||||
<span className="font-bold">{"First Login: "}</span>
|
|
||||||
<span>{formatDate(player.firstLogin ?? 0)}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span className="font-bold">{"Last Login: "}</span>
|
|
||||||
<span>{formatDate(player.lastLogin ?? 0)}</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<Separator className="my-4" />
|
<Separator className="my-4" />
|
||||||
{guild && (
|
{guild && (
|
||||||
<>
|
<>
|
||||||
@@ -163,18 +216,7 @@ export default function Sidebar({ level, ign, player, guild, rank, specialRank,
|
|||||||
<Separator className="my-4" />
|
<Separator className="my-4" />
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<div className="flex flex-col gap-2">
|
<SoicalLinks />
|
||||||
<h1 className="text-xl font-bold underline">Social Links</h1>
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<SocialIcons
|
|
||||||
discord={player?.socialMedia?.links?.DISCORD}
|
|
||||||
twitch={player?.socialMedia?.links?.TWITCH}
|
|
||||||
youtube={player?.socialMedia?.links?.YOUTUBE}
|
|
||||||
twitter={player?.socialMedia?.links?.TWITCH}
|
|
||||||
hypixel={player?.socialMedia?.links?.HYPIXEL}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user