Skip to content

Commit 484340d

Browse files
TheOrcDevTheOrcDev
authored
feat(player-profile-card): add 8-bit Player Profile Card component with customizable stats and health/mana bars (#364)
1 parent 1dde6cb commit 484340d

File tree

7 files changed

+742
-0
lines changed

7 files changed

+742
-0
lines changed

‎app/blocks/gaming/gaming.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import DifficultySelect from "@/components/ui/8bit/blocks/difficulty-select";
44
import GameOver from "@/components/ui/8bit/blocks/game-over";
55
import MainMenu from "@/components/ui/8bit/blocks/main-menu";
66
import PauseMenu from "@/components/ui/8bit/blocks/pause-menu";
7+
import PlayerProfileCard from "@/components/ui/8bit/blocks/player-profile-card";
78
import EnemyHealthDisplay from "@/components/ui/8bit/enemy-health-display";
89
import HealthBar from "@/components/ui/8bit/health-bar";
910
import ManaBar from "@/components/ui/8bit/mana-bar";
@@ -279,6 +280,75 @@ export default function GamingBlocks() {
279280
</div>
280281
</div>
281282

283+
<div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px]">
284+
<div className="flex flex-col md:flex-row gap-2 items-center justify-between">
285+
<h2 className="text-sm text-muted-foreground sm:pl-3">
286+
Player Profile Card
287+
</h2>
288+
289+
<div className="flex flex-col md:flex-row items-center gap-2">
290+
<CopyCommandButton
291+
command="pnpm dlx shadcn@latest add @8bitcn/player-profile-card"
292+
copyCommand="pnpm dlx shadcn@latest add @8bitcn/player-profile-card"
293+
/>
294+
<OpenInV0Button name="8bit-player-profile-card" className="w-fit" />
295+
</div>
296+
</div>
297+
298+
<div className="py-14 flex flex-col gap-6">
299+
<div className="flex flex-col gap-6 w-full max-w-4xl mx-auto">
300+
{/* Default Variant */}
301+
<div className="space-y-4">
302+
<p className="text-sm text-muted-foreground text-center">
303+
Default Variant
304+
</p>
305+
<div className="flex justify-center">
306+
<PlayerProfileCard
307+
playerName="OrcDev"
308+
avatarSrc="/avatars/orcdev.jpeg"
309+
avatarFallback="OD"
310+
level={25}
311+
stats={{
312+
health: { current: 850, max: 1000 },
313+
mana: { current: 320, max: 400 },
314+
experience: { current: 7500, max: 10000 },
315+
}}
316+
playerClass="Web Dev Warrior"
317+
/>
318+
</div>
319+
</div>
320+
321+
{/* Custom Stats Example */}
322+
<div className="space-y-4">
323+
<p className="text-sm text-muted-foreground text-center">
324+
Custom Stats Example
325+
</p>
326+
<div className="flex justify-center">
327+
<PlayerProfileCard
328+
playerName="Sir Knight"
329+
avatarFallback="SK"
330+
level={42}
331+
stats={{
332+
health: { current: 1200, max: 1500 },
333+
mana: { current: 500, max: 600 },
334+
experience: { current: 15000, max: 20000 },
335+
}}
336+
playerClass="Fighter"
337+
customStats={[
338+
{
339+
label: "Stamina",
340+
value: 72,
341+
max: 100,
342+
color: "bg-green-500",
343+
},
344+
]}
345+
/>
346+
</div>
347+
</div>
348+
</div>
349+
</div>
350+
</div>
351+
282352
<div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px]">
283353
<div className="flex flex-col md:flex-row gap-2 items-center justify-between">
284354
<h2 className="text-sm text-muted-foreground sm:pl-3">Leaderboard</h2>

‎app/blocks/player-profile/page.tsx‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import PlayerProfileCard from "@/components/ui/8bit/blocks/player-profile-card";
2+
3+
import CopyCommandButton from "../../docs/components/copy-command-button";
4+
import { OpenInV0Button } from "../../docs/components/open-in-v0-button";
5+
6+
export default function PlayerProfilePage() {
7+
return (
8+
<div className="container mx-auto py-8">
9+
<div className="flex flex-col gap-8">
10+
<div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px]">
11+
<div className="flex flex-col md:flex-row gap-2 items-center justify-between">
12+
<h2 className="text-sm text-muted-foreground sm:pl-3">
13+
Player Profile Card
14+
</h2>
15+
16+
<div className="flex flex-col md:flex-row items-center gap-2">
17+
<CopyCommandButton
18+
command="pnpm dlx shadcn@latest add @8bitcn/player-profile-card"
19+
copyCommand="pnpm dlx shadcn@latest add @8bitcn/player-profile-card"
20+
/>
21+
<OpenInV0Button
22+
name="8bit-player-profile-card"
23+
className="w-fit"
24+
/>
25+
</div>
26+
</div>
27+
28+
<div className="py-14 flex flex-col gap-6">
29+
<div className="flex flex-col gap-6 w-full max-w-4xl mx-auto">
30+
{/* Default Variant */}
31+
<div className="space-y-4">
32+
<p className="text-sm text-muted-foreground text-center">
33+
Default Variant
34+
</p>
35+
<div className="flex justify-center">
36+
<PlayerProfileCard
37+
playerName="OrcDev"
38+
avatarSrc="/avatars/orcdev.jpeg"
39+
avatarFallback="OD"
40+
level={25}
41+
stats={{
42+
health: { current: 850, max: 1000 },
43+
mana: { current: 320, max: 400 },
44+
experience: { current: 7500, max: 10000 },
45+
}}
46+
playerClass="Pixel Warrior"
47+
/>
48+
</div>
49+
</div>
50+
51+
{/* Custom Stats Example */}
52+
<div className="space-y-4">
53+
<p className="text-sm text-muted-foreground text-center">
54+
Custom Stats Example
55+
</p>
56+
<div className="flex justify-center">
57+
<PlayerProfileCard
58+
playerName="Dragon Slayer"
59+
avatarFallback="DS"
60+
level={42}
61+
stats={{
62+
health: { current: 1200, max: 1500 },
63+
mana: { current: 500, max: 600 },
64+
experience: { current: 15000, max: 20000 },
65+
}}
66+
playerClass="Dragon Slayer"
67+
customStats={[
68+
{
69+
label: "Strength",
70+
value: 95,
71+
max: 100,
72+
color: "bg-red-500",
73+
},
74+
{
75+
label: "Defense",
76+
value: 88,
77+
max: 100,
78+
color: "bg-blue-500",
79+
},
80+
{
81+
label: "Speed",
82+
value: 72,
83+
max: 100,
84+
color: "bg-green-500",
85+
},
86+
]}
87+
/>
88+
</div>
89+
</div>
90+
</div>
91+
</div>
92+
</div>
93+
</div>
94+
</div>
95+
);
96+
}

0 commit comments

Comments
 (0)