8-bit Character Sheet

1import type * as React from "react";
2 
3import { type VariantProps, cva } from "class-variance-authority";
4 
5import { cn } from "@/lib/utils";
6 
7import {
8  Avatar,
9  AvatarFallback,
10  AvatarImage,
11} from "@/components/ui/8bit/avatar";
12import { Badge } from "@/components/ui/8bit/badge";
13import { Card, CardContent, CardHeader } from "@/components/ui/8bit/card";
14import HealthBar from "@/components/ui/8bit/health-bar";
15import ManaBar from "@/components/ui/8bit/mana-bar";
16import { Progress } from "@/components/ui/8bit/progress";
17import { Separator } from "@/components/ui/8bit/separator";
18import "@/components/ui/8bit/styles/retro.css";
19 
20export interface PrimaryAttribute {
21  name: string;
22  shortName: string;
23  value: number;
24  max?: number;
25  color?: string;
26}
27 
28export interface SecondaryStat {
29  name: string;
30  value: number;
31  max?: number;
32  isPercentage?: boolean;
33  icon?: React.ReactNode;
34  color?: string;
35}
36 
37export interface EquipmentItem {
38  slot: string;
39  name: string;
40  rarity?: "common" | "uncommon" | "rare" | "epic" | "legendary";
41  icon?: React.ReactNode;
42}
43 
44export interface CustomSection {
45  title: string;
46  content: React.ReactNode;
47}
48 
49export const characterSheetVariants = cva("", {
50  variants: {
51    font: {
52      normal: "",
53      retro: "retro",
54    },
55  },
56  defaultVariants: {
57    font: "retro",
58  },
59});
60 
61export interface CharacterSheetProps
62  extends React.HTMLAttributes<HTMLDivElement>,
63    VariantProps<typeof characterSheetVariants> {
64  characterName: string;
65  characterClass?: string;
66  characterTitle?: string;
67  characterLevel?: number;
68  avatarSrc?: string;
69  avatarFallback?: string;
70 
71  primaryAttributes?: PrimaryAttribute[];
72 
73  secondaryStats?: SecondaryStat[];
74 
75  health?: { current: number; max: number };
76  mana?: { current: number; max: number };
77  experience?: { current: number; max: number };
78 
79  equipment?: EquipmentItem[];
80 
81  customSections?: CustomSection[];
82 
83  showAvatar?: boolean;
84  showLevel?: boolean;
85  showHealth?: boolean;
86  showMana?: boolean;
87  showExperience?: boolean;
88  showAttributes?: boolean;
89  showSecondaryStats?: boolean;
90  showEquipment?: boolean;
91}
92 
93const defaultPrimaryAttributes: PrimaryAttribute[] = [
94  { name: "Strength", shortName: "STR", value: 10 },
95  { name: "Dexterity", shortName: "DEX", value: 10 },
96  { name: "Intelligence", shortName: "INT", value: 10 },
97  { name: "Vitality", shortName: "VIT", value: 10 },
98  { name: "Wisdom", shortName: "WIS", value: 10 },
99  { name: "Charisma", shortName: "CHA", value: 10 },
100// … truncated