[V0_FILE]typescriptreact:file="game-menu.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Progress } from "@/components/ui/progress" import { ScrollArea } from "@/components/ui/scroll-area" import { Shield, Sword, Heart, Zap, Brain, Backpack, User, Sparkles } from "lucide-react" import { motion, AnimatePresence } from "framer-motion" export default function GameMenu() { const [selectedTab, setSelectedTab] = useState("status") return (

Dragonslayer

Level 42

Status {selectedTab === "status" && ( )} Equipment {selectedTab === "equipment" && ( )} Inventory {selectedTab === "inventory" && ( )}

{selectedTab === "status" && ( )} {selectedTab === "equipment" && ( )} {selectedTab === "inventory" && ( )}

) } // Update the StatusTab and EquipmentTab to animate height changes function StatusTab() { return (

Character Stats

} label="Health" value={85} max={100} color="bg-red-600" /> } label="Mana" value={65} max={100} color="bg-blue-600" /> } label="Experience" value={70} max={100} color="bg-yellow-600" />

Attributes

Active Effects

Skills

) } function EquipmentTab() { return (

Equipped Items

Equipment Stats

} label="Attack Power" value="450" /> } label="Defense" value="320" /> } label="Magic Power" value="180" /> } label="Critical Rate" value="25%" />

Resistances

) } // Update the InventoryTab to animate height changes in the ScrollArea function InventoryTab() { return (

Inventory (24/40)

12,450

{Array.from({ length: 24 }).map((_, i) => ( ))}

Item Details

Ancient Tome of Wisdom

Legendary Item

A mysterious book containing forgotten knowledge of the ancients.

+15 Intelligence

+10% Spell Critical Chance

Reduces spell cooldowns by 5%

) } // Helper components function StatBar({ icon, label, value, max, color }) { return (

{icon} {label}

{value}/{max}

) } function AttributeItem({ label, value }) { return ( {label} {value} ) } function EffectItem({ name, description, duration, icon }) { return (

{name} {duration}

{description}

) } function SkillItem({ name, level, maxLevel }) { return (

{name} {level}/{maxLevel}

) } function EquipmentSlot({ type, item }) { return (

{type}

{item ? (

{item.name}

{item.stats.map((stat, i) => (

{stat}

))}

) : (

Empty

)} ) } function StatItem({ icon, label, value }) { return (

{icon} {label}

{value}

) } function ResistanceItem({ type, value }) { return ( {type} {value} ) } function InventoryItem({ item }) { return ( {item && (

{item.quantity > 1 && ( {item.quantity} )}

)} ) } // Helper functions function getRarityColor(rarity) { switch (rarity) { case "Common": return "text-gray-300" case "Uncommon": return "text-green-400" case "Rare": return "text-blue-400" case "Epic": return "text-purple-400" case "Legendary": return "text-yellow-400" default: return "text-gray-300" } } function getRarityBorder(rarity) { switch (rarity) { case "Common": return "border-gray-600 bg-gray-800" case "Uncommon": return "border-green-600/50 bg-green-900/20" case "Rare": return "border-blue-600/50 bg-blue-900/20" case "Epic": return "border-purple-600/50 bg-purple-900/20" case "Legendary": return "border-yellow-600/50 bg-yellow-900/20" default: return "border-gray-600 bg-gray-800" } } function getRandomItem(index) { const items = [ { name: "Health Potion", rarity: "Common", quantity: 5, image: "/placeholder.svg?height=40&width=40" }, { name: "Mana Potion", rarity: "Common", quantity: 3, image: "/placeholder.svg?height=40&width=40" }, { name: "Dragon Scale", rarity: "Rare", quantity: 1, image: "/placeholder.svg?height=40&width=40" }, { name: "Ancient Tome", rarity: "Epic", quantity: 1, image: "/placeholder.svg?height=40&width=40" }, { name: "Steel Ingot", rarity: "Common", quantity: 12, image: "/placeholder.svg?height=40&width=40" }, { name: "Magic Dust", rarity: "Uncommon", quantity: 8, image: "/placeholder.svg?height=40&width=40" }, { name: "Enchanted Gem", rarity: "Rare", quantity: 2, image: "/placeholder.svg?height=40&width=40" }, { name: "Legendary Crystal", rarity: "Legendary", quantity: 1, image: "/placeholder.svg?height=40&width=40" }, { name: "Healing Herb", rarity: "Common", quantity: 15, image: "/placeholder.svg?height=40&width=40" }, { name: "Mystic Feather", rarity: "Uncommon", quantity: 4, image: "/placeholder.svg?height=40&width=40" }, { name: "Dragon Tooth", rarity: "Epic", quantity: 1, image: "/placeholder.svg?height=40&width=40" }, { name: "Arcane Scroll", rarity: "Rare", quantity: 3, image: "/placeholder.svg?height=40&width=40" }, { name: "Gold Coin", rarity: "Common", quantity: 50, image: "/placeholder.svg?height=40&width=40" }, { name: "Enchanted Armor", rarity: "Epic", quantity: 1, image: "/placeholder.svg?height=40&width=40" }, { name: "Magic Wand", rarity: "Rare", quantity: 1, image: "/placeholder.svg?height=40&width=40" }, ] return items[index % items.length] } [V0_FILE]typescriptreact:file="components/website-renderer.tsx" isMerged="true" "use client" import { useState } from "react" import { LayoutRenderer } from "./layout-renderer" import type { LayoutType, ContentType } from "@/lib/types" interface WebsiteRendererProps { layout: LayoutType content: ContentType } export function WebsiteRenderer({ layout, content }: WebsiteRendererProps) { const [currentPage, setCurrentPage] = useState(layout.defaultPage || Object.keys(layout.pages)[0]) // Find the current page layout const pageLayout = layout.pages[currentPage] if (!pageLayout) { return

Error: Page "{currentPage}" not found in layout

} // Find the content for the current page const pageContent = content.pages[currentPage] if (!pageContent) { return

Error: Page "{currentPage}" not found in content

} // Handle navigation const handleNavigation = (pageName: string) => { if (layout.pages[pageName]) { setCurrentPage(pageName) } } return (

) } [V0_FILE]typescriptreact:file="components/layout-renderer.tsx" isMerged="true" import { ContentRenderer } from "./content-renderer" import { NavigationBar } from "./navigation-bar" import type { PageLayout, PageContent, GlobalContent, NavigationConfig, ThemeConfig } from "@/lib/types" interface LayoutRendererProps { layout: PageLayout content: PageContent globalContent: GlobalContent navigation: { items: NavigationConfig[] onNavigate: (page: string) => void currentPage: string } theme: ThemeConfig } export function LayoutRenderer({ layout, content, globalContent, navigation, theme }: LayoutRendererProps) { // Determine layout type and render accordingly const renderLayout = () => { switch (layout.type) { case "top-nav": return renderTopNavLayout() case "sidebar-nav": return renderSidebarNavLayout() case "landing": return renderLandingLayout() default: return renderDefaultLayout() } } // Render a layout with top navigation const renderTopNavLayout = () => { return (

{renderAreas()}

) } // Render a layout with sidebar navigation const renderSidebarNavLayout = () => { return (

{renderAreas()}

) } // Render a landing page layout const renderLandingLayout = () => { return (

{renderAreas()}

) } // Default layout as fallback const renderDefaultLayout = () => { return (

{renderAreas()}

) } // Render all areas defined in the layout const renderAreas = () => { return layout.areas.map((area) => { const areaContent = content.areas[area.id] if (!areaContent) { return (

No content defined for area: {area.id}

) } return (

) }) } return renderLayout() } [V0_FILE]typescriptreact:file="components/content-renderer.tsx" isMerged="true" import type { ContentItem } from "@/lib/types" interface ContentRendererProps { content: ContentItem | ContentItem[] } export function ContentRenderer({ content }: ContentRendererProps) { // Handle array of content items if (Array.isArray(content)) { return (

{content.map((item, index) => (

))}

) } // Handle single content item based on type switch (content.type) { case "heading": return renderHeading(content) case "paragraph": return renderParagraph(content) case "image": return renderImage(content) case "button": return renderButton(content) case "card": return renderCard(content) case "grid": return renderGrid(content) case "hero": return renderHero(content) case "list": return renderList(content) case "divider": return renderDivider(content) case "spacer": return renderSpacer(content) default: return

Unknown content type: {content.type}

} } // Render a heading (h1, h2, h3, etc.) function renderHeading(content: ContentItem) { const { level = 1, text, align = "left", color } = content const className = `text-${align} ${color ? "" : "text-gray-900"}` const style = color ? { color } : {} switch (level) { case 1: return (

{text}

) case 2: return (

{text}

) case 3: return (

{text}

) case 4: return (

{text}

) default: return (

{text}

) } } // Render a paragraph of text function renderParagraph(content: ContentItem) { const { text, align = "left", color, size = "medium" } = content const sizeClass = size === "small" ? "text-sm" : size === "large" ? "text-lg" : "text-base" const className = `${sizeClass} mb-4 text-${align} ${color ? "" : "text-gray-700"}` const style = color ? { color } : {} return (

{text}

) } // Render an image function renderImage(content: ContentItem) { const { src, alt = "", width = 400, height = 300, rounded = false } = content const roundedClass = rounded ? "rounded-lg overflow-hidden" : "" return (

) } // Render a button function renderButton(content: ContentItem) { const { text, variant = "primary", size = "medium", align = "left" } = content const variantClass = variant === "primary" ? "bg-blue-600 hover:bg-blue-700 text-white" : variant === "secondary" ? "bg-gray-200 hover:bg-gray-300 text-gray-800" : variant === "outline" ? "bg-transparent border border-gray-300 hover:bg-gray-100 text-gray-800" : "bg-blue-600 hover:bg-blue-700 text-white" const sizeClass = size === "small" ? "px-3 py-1 text-sm" : size === "large" ? "px-6 py-3 text-lg" : "px-4 py-2" const alignClass = align === "center" ? "mx-auto block" : align === "right" ? "ml-auto block" : "" return (

) } // Render a card component function renderCard(content: ContentItem) { const { title, body, image, footer } = content return (

{image && (

)}

{title &&

{title}

} {body &&

{body}

} {footer &&

{footer}

}

) } // Render a grid of content items function renderGrid(content: ContentItem) { const { items = [], columns = 2 } = content const gridClass = `grid grid-cols-1 md:grid-cols-${columns} gap-4 mb-4` return (

{items.map((item, index) => (

))}

) } // Render a hero section function renderHero(content: ContentItem) { const { title, subtitle, backgroundImage, overlay = true, height = "medium", align = "center" } = content const heightClass = height === "small" ? "py-8" : height === "large" ? "py-24" : "py-16" const alignClass = align === "left" ? "text-left" : align === "right" ? "text-right" : "text-center" const style = backgroundImage ? { backgroundImage: `url(${backgroundImage})`, backgroundSize: "cover", backgroundPosition: "center", } : {} return (

{backgroundImage && overlay &&

}

{title &&

{title}

} {subtitle &&

{subtitle}

}

) } // Render a list of items function renderList(content: ContentItem) { const { items = [], ordered = false, style = "disc" } = content if (ordered) { return (

{item}

) } const listStyle = style === "disc" ? "list-disc" : style === "circle" ? "list-circle" : style === "square" ? "list-square" : style === "none" ? "list-none" : "list-disc" return (

{item}

) } // Render a horizontal divider function renderDivider(content: ContentItem) { const { color = "#e2e8f0", thickness = 1 } = content return (

) } // Render a vertical spacer function renderSpacer(content: ContentItem) { const { height = 20 } = content return

} [V0_FILE]typescriptreact:file="components/navigation-bar.tsx" isMerged="true" "use client" import type { NavigationConfig } from "@/lib/types" interface NavigationBarProps { items: NavigationConfig[] onNavigate: (page: string) => void currentPage: string position: "top" | "sidebar" } export function NavigationBar({ items, onNavigate, currentPage, position }: NavigationBarProps) { if (position === "sidebar") { return ( ) } return ( ) } [V0_FILE]typescriptreact:file="lib/types.ts" isMerged="true" // Layout Types export interface LayoutType { theme: ThemeConfig defaultPage?: string navigation: { items: NavigationConfig[] } pages: { [key: string]: PageLayout } } export interface PageLayout { type: "top-nav" | "sidebar-nav" | "landing" | "custom" areas: AreaConfig[] } export interface AreaConfig { id: string gridArea?: string padding?: string backgroundColor?: string } export interface NavigationConfig { label: string page: string } export interface ThemeConfig { primaryColor: string backgroundColor: string textColor: string footerColor: string footerTextColor: string sidebarColor?: string sidebarTextColor?: string } // Content Types export interface ContentType { global: GlobalContent pages: { [key: string]: PageContent } } export interface GlobalContent { header?: ContentItem | ContentItem[] footer: ContentItem | ContentItem[] } export interface PageContent { title: string areas: { [key: string]: ContentItem | ContentItem[] } } export interface ContentItem { type: string [key: string]: any } [V0_FILE]typescriptreact:file="lib/default-data.ts" isMerged="true" import type { LayoutType, ContentType } from "./types" export const defaultLayoutJson: LayoutType = { theme: { primaryColor: "#1e40af", backgroundColor: "#ffffff", textColor: "#ffffff", footerColor: "#1e3a8a", footerTextColor: "#ffffff", sidebarColor: "#1e3a8a", sidebarTextColor: "#ffffff", }, defaultPage: "home", navigation: { items: [ { label: "Home", page: "home" }, { label: "About", page: "about" }, { label: "Services", page: "services" }, { label: "Contact", page: "contact" }, ], }, pages: { home: { type: "top-nav", areas: [ { id: "hero", backgroundColor: "#f8fafc" }, { id: "features" }, { id: "testimonials", backgroundColor: "#f1f5f9" }, ], }, about: { type: "sidebar-nav", areas: [{ id: "header" }, { id: "content" }, { id: "team" }], }, services: { type: "top-nav", areas: [{ id: "header" }, { id: "servicesList" }], }, contact: { type: "top-nav", areas: [{ id: "header" }, { id: "contactInfo" }, { id: "map" }], }, }, } export const defaultContentJson: ContentType = { global: { footer: [ { type: "paragraph", text: "© 2025 JSON Website Builder. All rights reserved.", align: "center", color: "#ffffff", }, ], }, pages: { home: { title: "Home", areas: { hero: { type: "hero", title: "Build Your Website with JSON", subtitle: "A flexible system for creating custom websites using JSON configuration", backgroundImage: "/placeholder.svg?height=500&width=1200", height: "large", }, features: [ { type: "heading", level: 2, text: "Key Features", align: "center", }, { type: "grid", columns: 3, items: [ { type: "card", title: "Flexible Layouts", body: "Create various website structures with top navigation, sidebar navigation, or custom layouts.", image: { src: "/placeholder.svg?height=200&width=300", alt: "Flexible Layouts", }, }, { type: "card", title: "Separate Content", body: "Keep your layout and content separate for better organization and maintenance.", image: { src: "/placeholder.svg?height=200&width=300", alt: "Separate Content", }, }, { type: "card", title: "Easy Customization", body: "Customize your website extensively by modifying the JSON configuration.", image: { src: "/placeholder.svg?height=200&width=300", alt: "Easy Customization", }, }, ], }, ], testimonials: [ { type: "heading", level: 2, text: "What Our Users Say", align: "center", }, { type: "grid", columns: 2, items: [ { type: "card", body: '"This JSON website builder has made it so easy to create and maintain our company website. Highly recommended!"', footer: "- John Doe, CEO", }, { type: "card", body: '"I love how flexible this system is. I can create any layout I want just by modifying the JSON."', footer: "- Jane Smith, Designer", }, ], }, ], }, }, about: { title: "About Us", areas: { header: { type: "heading", level: 1, text: "About Our Company", }, content: [ { type: "paragraph", text: "We are a team of passionate developers and designers who believe in the power of flexible, data-driven website creation. Our JSON-based website builder allows anyone to create beautiful, customized websites without writing code.", size: "large", }, { type: "paragraph", text: "Founded in 2023, we've been helping businesses and individuals create their online presence with ease and flexibility.", }, { type: "image", src: "/placeholder.svg?height=300&width=600", alt: "Our office", width: 600, height: 300, rounded: true, }, ], team: [ { type: "heading", level: 2, text: "Our Team", }, { type: "grid", columns: 3, items: [ { type: "card", title: "John Doe", body: "Founder & CEO", image: { src: "/placeholder.svg?height=200&width=200", alt: "John Doe", }, }, { type: "card", title: "Jane Smith", body: "Lead Designer", image: { src: "/placeholder.svg?height=200&width=200", alt: "Jane Smith", }, }, { type: "card", title: "Mike Johnson", body: "Lead Developer", image: { src: "/placeholder.svg?height=200&width=200", alt: "Mike Johnson", }, }, ], }, ], }, }, services: { title: "Our Services", areas: { header: { type: "heading", level: 1, text: "Services We Offer", }, servicesList: [ { type: "grid", columns: 2, items: [ { type: "card", title: "Website Development", body: "We create custom websites tailored to your specific needs and requirements.", image: { src: "/placeholder.svg?height=200&width=300", alt: "Website Development", }, }, { type: "card", title: "UI/UX Design", body: "We design intuitive and engaging user interfaces that provide excellent user experiences.", image: { src: "/placeholder.svg?height=200&width=300", alt: "UI/UX Design", }, }, { type: "card", title: "Content Management", body: "We provide easy-to-use content management solutions for your website.", image: { src: "/placeholder.svg?height=200&width=300", alt: "Content Management", }, }, { type: "card", title: "Maintenance & Support", body: "We offer ongoing maintenance and support to keep your website running smoothly.", image: { src: "/placeholder.svg?height=200&width=300", alt: "Maintenance & Support", }, }, ], }, ], }, }, contact: { title: "Contact Us", areas: { header: { type: "heading", level: 1, text: "Get In Touch", }, contactInfo: [ { type: "paragraph", text: "We'd love to hear from you! Please use the information below to contact us.", size: "large", }, { type: "grid", columns: 2, items: [ { type: "card", title: "Email", body: "info@jsonwebsitebuilder.com", }, { type: "card", title: "Phone", body: "+1 (555) 123-4567", }, ], }, { type: "button", text: "Send us a message", variant: "primary", size: "large", align: "center", }, ], map: { type: "image", src: "/placeholder.svg?height=300&width=800", alt: "Map location", width: 800, height: 300, }, }, }, }, } [V0_FILE]typescriptreact:file="lib/schema-validator.ts" isMerged="true" import type { LayoutType } from "./types" // Validate layout JSON structure export function validateLayoutJson(json: any): { valid: boolean; errors: string[] } { const errors: string[] = [] // Check if json is an object if (typeof json !== "object" || json === null) { errors.push("Layout JSON must be an object") return { valid: false, errors } } // Check required top-level properties if (!json.theme) errors.push("Layout JSON must have a theme property") if (!json.navigation) errors.push("Layout JSON must have a navigation property") if (!json.pages) errors.push("Layout JSON must have a pages property") // Check theme properties if (json.theme) { if (!json.theme.primaryColor) errors.push("Theme must have a primaryColor") if (!json.theme.backgroundColor) errors.push("Theme must have a backgroundColor") if (!json.theme.textColor) errors.push("Theme must have a textColor") if (!json.theme.footerColor) errors.push("Theme must have a footerColor") if (!json.theme.footerTextColor) errors.push("Theme must have a footerTextColor") } // Check navigation if (json.navigation) { if (!Array.isArray(json.navigation.items)) { errors.push("Navigation must have an items array") } else { // Check each navigation item json.navigation.items.forEach((item, index) => { if (!item.label) errors.push(`Navigation item ${index} must have a label`) if (!item.page) errors.push(`Navigation item ${index} must have a page`) }) } } // Check pages if (json.pages && typeof json.pages === "object") { // Check if pages object is empty if (Object.keys(json.pages).length === 0) { errors.push("Pages object cannot be empty") } // Check each page Object.entries(json.pages).forEach(([pageName, page]: [string, any]) => { if (!page.type) errors.push(`Page "${pageName}" must have a type`) if (!Array.isArray(page.areas)) { errors.push(`Page "${pageName}" must have an areas array`) } else { // Check each area page.areas.forEach((area, index) => { if (!area.id) errors.push(`Area ${index} in page "${pageName}" must have an id`) }) } }) // Check if defaultPage exists in pages if (json.defaultPage && !json.pages[json.defaultPage]) { errors.push(`Default page "${json.defaultPage}" does not exist in pages`) } } return { valid: errors.length === 0, errors } } // Validate content JSON structure export function validateContentJson(json: any, layoutJson: LayoutType): { valid: boolean; errors: string[] } { const errors: string[] = [] // Check if json is an object if (typeof json !== "object" || json === null) { errors.push("Content JSON must be an object") return { valid: false, errors } } // Check required top-level properties if (!json.global) errors.push("Content JSON must have a global property") if (!json.pages) errors.push("Content JSON must have a pages property") // Check global content if (json.global) { if (!json.global.footer) errors.push("Global content must have a footer") } // Check pages if (json.pages && typeof json.pages === "object") { // Check if all layout pages have corresponding content Object.keys(layoutJson.pages).forEach((pageName) => { if (!json.pages[pageName]) { errors.push(`Content for page "${pageName}" is missing`) } else { // Check if page has a title if (!json.pages[pageName].title) { errors.push(`Page "${pageName}" must have a title`) } // Check if page has areas if (!json.pages[pageName].areas || typeof json.pages[pageName].areas !== "object") { errors.push(`Page "${pageName}" must have an areas object`) } else { // Check if all layout areas have corresponding content const layoutAreas = layoutJson.pages[pageName].areas.map((area) => area.id) const contentAreas = Object.keys(json.pages[pageName].areas) layoutAreas.forEach((areaId) => { if (!contentAreas.includes(areaId)) { errors.push(`Content for area "${areaId}" in page "${pageName}" is missing`) } }) } } }) } return { valid: errors.length === 0, errors } } [V0_FILE]typescriptreact:file="components/equipment-tab-renderer.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Shield, Sword, Zap, Brain } from "lucide-react" import type { EquipmentTabLayout, EquipmentTabContent, RPGTheme } from "@/lib/rpg-types" interface EquipmentTabRendererProps { layout: EquipmentTabLayout content: EquipmentTabContent theme: RPGTheme } export function EquipmentTabRenderer({ layout, content, theme }: EquipmentTabRendererProps) { return (

{layout.sections.equipped.title}

{content.equippedItems.map((item, index) => ( ))}

{layout.sections.stats.title}

{content.equipmentStats.map((stat, index) => ( ))}

{layout.sections.resistances.title}

{content.resistances.map((resistance, index) => ( ))}

) } function EquipmentSlot({ type, item, theme }) { return (

{type}

{item ? (

{item.name}

{item.stats.map((stat, i) => (

{stat}

))}

) : (

Empty

)} ) } function StatItem({ icon, label, value }) { return (

{icon} {label}

{value}

) } function ResistanceItem({ type, value }) { return ( {type} {value} ) } // Helper functions function getStatIcon(type: string) { switch (type) { case "attack": return case "defense": return case "magic": return case "critical": return default: return null } } function getRarityColor(rarity: string, theme: RPGTheme) { switch (rarity) { case "Common": return theme.rarityColors.common case "Uncommon": return theme.rarityColors.uncommon case "Rare": return theme.rarityColors.rare case "Epic": return theme.rarityColors.epic case "Legendary": return theme.rarityColors.legendary default: return theme.rarityColors.common } } function getRarityBorder(rarity: string, theme: RPGTheme) { switch (rarity) { case "Common": return theme.rarityBorders.common case "Uncommon": return theme.rarityBorders.uncommon case "Rare": return theme.rarityBorders.rare case "Epic": return theme.rarityBorders.epic case "Legendary": return theme.rarityBorders.legendary default: return theme.rarityBorders.common } } [V0_FILE]typescriptreact:file="components/inventory-tab-renderer.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { ScrollArea } from "@/components/ui/scroll-area" import type { InventoryTabLayout, InventoryTabContent, RPGTheme } from "@/lib/rpg-types" interface InventoryTabRendererProps { layout: InventoryTabLayout content: InventoryTabContent theme: RPGTheme } export function InventoryTabRenderer({ layout, content, theme }: InventoryTabRendererProps) { return (

{layout.sections.inventory.title} ({content.inventoryUsed}/{content.inventoryCapacity})

{content.currencies.map((currency, index) => (

{currency.amount.toLocaleString()} ))}

{Array.from({ length: content.inventoryCapacity }).map((_, i) => ( ))}

{layout.sections.itemDetails.title}

{content.selectedItem.name}

{content.selectedItem.rarity} Item

{content.selectedItem.description}

{content.selectedItem.effects.map((effect, index) => (

{effect}

))}

{content.selectedItem.actions.map((action, index) => ( ))}

) } function InventoryItem({ item, theme }) { return ( {item && (

{item.quantity > 1 && ( {item.quantity} )}

)} ) } // Helper functions function getRarityColor(rarity: string, theme: RPGTheme) { switch (rarity) { case "Common": return theme.rarityColors.common case "Uncommon": return theme.rarityColors.uncommon case "Rare": return theme.rarityColors.rare case "Epic": return theme.rarityColors.epic case "Legendary": return theme.rarityColors.legendary default: return theme.rarityColors.common } } function getRarityBorder(rarity: string, theme: RPGTheme) { switch (rarity) { case "Common": return theme.rarityBorders.common case "Uncommon": return theme.rarityBorders.uncommon case "Rare": return theme.rarityBorders.rare case "Epic": return theme.rarityBorders.epic case "Legendary": return theme.rarityBorders.legendary default: return theme.rarityBorders.common } } [V0_FILE]typescriptreact:file="lib/rpg-examples.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" /** * RPG UI Builder - Example Configurations * * This file contains example configurations to help you get started * with building RPG game UIs. */ import { createRPGLayout, createRPGContent, createStatusTabContent, createEquipmentTabContent, createInventoryTabContent, createCharacterStat, createAttribute, createEffect, createSkill, createEquippedItem, createEquipmentStat, createResistance, createCurrency, createInventoryItem, createSelectedItem, createActionButton, createFantasyTheme, createSciFiTheme, createApocalypseTheme, createPartyTabLayout, createPartyTabContent, createPartyMember, createPartyMemberDetails, } from "./rpg-builder" /** * Example fantasy RPG layout configuration */ export const exampleFantasyLayout = createRPGLayout({ theme: createFantasyTheme(), defaultTab: "status", partyLayout: createPartyTabLayout(), }) /** * Example sci-fi RPG layout configuration */ export const exampleSciFiLayout = createRPGLayout({ theme: createSciFiTheme(), defaultTab: "equipment", partyLayout: createPartyTabLayout({ membersTitle: "Crew Members", detailsTitle: "Crew Profile", }), }) /** * Example post-apocalyptic RPG layout configuration */ export const exampleApocalypseLayout = createRPGLayout({ theme: createApocalypseTheme(), defaultTab: "inventory", partyLayout: createPartyTabLayout({ membersTitle: "Survivors", detailsTitle: "Survivor Profile", }), }) // Create example party members for fantasy setting const fantasyPartyMembers = [ createPartyMember( "lyra", "Lyra", "Paladin", 40, "/placeholder.svg?height=80&width=80", "Righteous defender of the light", ), createPartyMember( "thorne", "Thorne", "Rogue", 38, "/placeholder.svg?height=80&width=80", "Shadow walker and master of stealth", ), createPartyMember( "elara", "Elara", "Wizard", 39, "/placeholder.svg?height=80&width=80", "Arcane scholar with ancient knowledge", ), createPartyMember( "garrick", "Garrick", "Ranger", 37, "/placeholder.svg?height=80&width=80", "Wilderness guide and expert tracker", ), ] // Create detailed profile for Lyra const lyraDetails = createPartyMemberDetails( "lyra", "Lyra Brightshield", "Paladin", "Human", 32, "Female", 40, "/placeholder.svg?height=128&width=128", { description: "Lyra is a steadfast and compassionate warrior who believes in justice and mercy in equal measure. She is serious about her duties but has a warm heart and dry sense of humor that emerges among friends.", traits: ["Honorable", "Compassionate", "Disciplined", "Protective", "Faithful"], alignment: "Lawful Good", likes: ["Dawn prayers", "Helping the vulnerable", "Fine craftsmanship", "Honest conversation", "Sweet pastries"], dislikes: ["Needless cruelty", "Demons", "Corruption", "Excessive drinking", "Dishonorable tactics"], }, "Born to a blacksmith and a priestess in the small town of Oakvale, Lyra showed an affinity for both martial prowess and divine magic from a young age. When darkness fell upon her hometown in the form of a necromancer's curse, she was the only survivor, protected by a mysterious divine light.\n\nShe was found and raised by the Order of the Silver Dawn, where she trained as a paladin. After taking her oaths at age 20, she set out to right wrongs and protect the innocent, eventually crossing paths with the party while investigating a series of mysterious disappearances that led back to the same necromancer who destroyed her home.", [ "Defeat the necromancer Malachar and free the souls he has bound", "Restore the Order of the Silver Dawn to its former glory", "Find and recover the lost holy relic, the Sunheart Chalice", "Protect her companions and help them achieve their goals", ], [ { name: "Thorne", type: "Complicated Friendship", description: "Lyra disapproves of Thorne's methods but respects his loyalty. They bicker often but would die for each other.", }, { name: "Elara", type: "Trusted Ally", description: "Lyra admires Elara's wisdom and often seeks her counsel. They share a bond through their faith in different powers.", }, { name: "Garrick", type: "Close Friend", description: "Lyra and Garrick understand each other's straightforward nature. He reminds her of her father, and she values his practical wisdom.", }, { name: "Sir Galenus", type: "Mentor", description: "The paladin who found and trained Lyra. She writes to him regularly and seeks to make him proud.", }, ], [ "By the light of the Dawn, I will protect those who cannot protect themselves.", "Mercy is not weakness; it is the highest form of strength.", "I don't trust magic I can't see, but I trust you, Elara.", "My sword arm may tire, but my resolve never will.", "Sometimes the righteous path is not the easiest one, but it is always the one worth taking.", ], [ { name: "Divine Smite", description: "Channels divine energy through her weapon, dealing extra radiant damage to evil creatures.", type: "Combat", }, { name: "Lay on Hands", description: "A healing touch that can cure wounds, diseases, and neutralize poisons.", type: "Healing", }, { name: "Aura of Protection", description: "Emits an aura that bolsters the saving throws of nearby allies.", type: "Support", }, { name: "Zone of Truth", description: "Creates a magical zone where those within cannot lie.", type: "Utility", }, ], "Lyra carries a locket containing ashes from her destroyed hometown. She touches it before battle for strength. Despite her serious demeanor, she has a beautiful singing voice but only uses it during religious ceremonies. She struggles with forgiveness when it comes to truly evil acts, which conflicts with her faith's teachings.", "Lyra speaks with formal diction and rarely uses contractions. She often invokes religious terminology and metaphors of light and darkness. When angry, her voice becomes very quiet and measured. She addresses strangers respectfully as 'sir' or 'lady' until given permission to use their name.", "/placeholder.svg?height=300&width=150", ) /** * Example fantasy RPG content configuration */ export const exampleFantasyContent = createRPGContent( "Dragonslayer", 42, // Status tab content createStatusTabContent( // Stats [ createCharacterStat("health", "Health", 85, 100), createCharacterStat("mana", "Mana", 65, 100), createCharacterStat("experience", "Experience", 70, 100), ], // Attributes [ createAttribute("Strength", 42), createAttribute("Dexterity", 38), createAttribute("Intelligence", 25), createAttribute("Vitality", 45), createAttribute("Wisdom", 30), createAttribute("Charisma", 22), ], // Effects [ createEffect("Blessing of Light", "Increases holy damage by 15%", "30:42", "/placeholder.svg?height=40&width=40"), createEffect("Well Fed", "Health regeneration +5/sec", "15:20", "/placeholder.svg?height=40&width=40"), createEffect("Dragon's Might", "Strength +10", "05:11", "/placeholder.svg?height=40&width=40"), ], // Skills [ createSkill("Swordsmanship", 7, 10), createSkill("Archery", 4, 10), createSkill("Fire Magic", 3, 10), createSkill("Alchemy", 5, 10), ], ), // Equipment tab content createEquipmentTabContent( // Equipped items [ createEquippedItem( "Weapon", "Dragonslayer Sword", "Epic", ["Damage: 120-150", "Critical: +15%"], "/placeholder.svg?height=60&width=60", ), createEquippedItem( "Shield", "Bulwark of the Ages", "Rare", ["Defense: +45", "Block: 25%"], "/placeholder.svg?height=60&width=60", ), createEquippedItem( "Helmet", "Crown of Wisdom", "Rare", ["Armor: +35", "Intelligence: +8"], "/placeholder.svg?height=60&width=60", ), createEquippedItem( "Chest", "Dragonscale Armor", "Epic", ["Armor: +75", "Fire Resist: +40%"], "/placeholder.svg?height=60&width=60", ), createEquippedItem( "Gloves", "Gauntlets of Power", "Uncommon", ["Armor: +20", "Strength: +5"], "/placeholder.svg?height=60&width=60", ), createEquippedItem( "Boots", "Swift Walkers", "Uncommon", ["Armor: +18", "Movement: +10%"], "/placeholder.svg?height=60&width=60", ), createEquippedItem( "Amulet", "Ancient Pendant", "Legendary", ["All Stats: +5", "Luck: +15%"], "/placeholder.svg?height=60&width=60", ), createEquippedItem( "Ring", "Band of Protection", "Rare", ["Defense: +25", "Health: +100"], "/placeholder.svg?height=60&width=60", ), ], // Equipment stats [ createEquipmentStat("attack", "Attack Power", "450"), createEquipmentStat("defense", "Defense", "320"), createEquipmentStat("magic", "Magic Power", "180"), createEquipmentStat("critical", "Critical Rate", "25%"), ], // Resistances [ createResistance("Fire", "65%"), createResistance("Ice", "30%"), createResistance("Lightning", "45%"), createResistance("Poison", "20%"), ], ), // Inventory tab content createInventoryTabContent( // Inventory used 24, // Inventory capacity 40, // Currencies [ createCurrency("Gold", 12450, "/placeholder.svg?height=20&width=20", "#fcd34d"), createCurrency("Gems", 85, "/placeholder.svg?height=20&width=20", "#c4b5fd"), ], // Items [ createInventoryItem("Health Potion", "Common", 5, "/placeholder.svg?height=40&width=40"), createInventoryItem("Mana Potion", "Common", 3, "/placeholder.svg?height=40&width=40"), createInventoryItem("Dragon Scale", "Rare", 1, "/placeholder.svg?height=40&width=40"), createInventoryItem("Ancient Tome", "Epic", 1, "/placeholder.svg?height=40&width=40"), createInventoryItem("Steel Ingot", "Common", 12, "/placeholder.svg?height=40&width=40"), createInventoryItem("Magic Dust", "Uncommon", 8, "/placeholder.svg?height=40&width=40"), createInventoryItem("Enchanted Gem", "Rare", 2, "/placeholder.svg?height=40&width=40"), createInventoryItem("Legendary Crystal", "Legendary", 1, "/placeholder.svg?height=40&width=40"), createInventoryItem("Healing Herb", "Common", 15, "/placeholder.svg?height=40&width=40"), createInventoryItem("Mystic Feather", "Uncommon", 4, "/placeholder.svg?height=40&width=40"), createInventoryItem("Dragon Tooth", "Epic", 1, "/placeholder.svg?height=40&width=40"), createInventoryItem("Arcane Scroll", "Rare", 3, "/placeholder.svg?height=40&width=40"), createInventoryItem("Gold Coin", "Common", 50, "/placeholder.svg?height=40&width=40"), createInventoryItem("Enchanted Armor", "Epic", 1, "/placeholder.svg?height=40&width=40"), createInventoryItem("Magic Wand", "Rare", 1, "/placeholder.svg?height=40&width=40"), ], // Selected item createSelectedItem( "Ancient Tome of Wisdom", "Legendary", "A mysterious book containing forgotten knowledge of the ancients.", "/placeholder.svg?height=50&width=50", ["+15 Intelligence", "+10% Spell Critical Chance", "Reduces spell cooldowns by 5%"], [ createActionButton("Use", "rgba(37, 99, 235, 0.3)", "rgba(37, 99, 235, 0.5)", "#93c5fd"), createActionButton("Sell (750g)", "rgba(202, 138, 4, 0.3)", "rgba(202, 138, 4, 0.5)", "#fcd34d"), ], ), ), // Party tab content createPartyTabContent(fantasyPartyMembers, lyraDetails), ) // Create example party members for sci-fi setting const scifiPartyMembers = [ createPartyMember( "nova", "Nova", "Biotic Specialist", 33, "/placeholder.svg?height=80&width=80", "Powerful psychic with a mysterious past", ), createPartyMember( "axel", "Axel", "Combat Engineer", 30, "/placeholder.svg?height=80&width=80", "Tech genius with a knack for explosives", ), createPartyMember( "zara", "Zara", "Infiltrator", 32, "/placeholder.svg?height=80&width=80", "Former assassin seeking redemption", ), createPartyMember( "krell", "Krell", "Heavy Weapons", 36, "/placeholder.svg?height=80&width=80", "Krogan mercenary with a code of honor", ), ] // Create detailed profile for Nova const novaDetails = createPartyMemberDetails( "nova", "Nova Reyes", "Biotic Specialist", "Human", 28, "Female", 33, "/placeholder.svg?height=128&width=128", { description: "Nova is intense and focused, with a dry wit that emerges when least expected. Her biotic abilities have made her both feared and coveted by various factions, leading to a lifetime of caution and calculated trust.", traits: ["Analytical", "Reserved", "Loyal", "Pragmatic", "Determined"], alignment: "Neutral Good", likes: ["Quiet moments", "Classical music", "Precision", "Clear objectives", "Spicy food"], dislikes: ["Needless violence", "Corporate politics", "Being studied", "Loud environments", "Blind faith"], }, "Nova was identified as a biotic prodigy at age six after an eezo exposure incident on the colony world Elysium. She was 'recruited' by the Chimera Corporation for their advanced biotic program, where she spent her childhood as a test subject and later as a specialized operative.\n\nAt 22, she escaped during a mission gone wrong and spent years on the run, using her abilities to survive while avoiding detection. She eventually crossed paths with Commander Shepard during an investigation into Chimera's illegal research, joining the crew to bring down her former captors and find others who suffered her fate.", [ "Dismantle the remaining Chimera Corporation research cells", "Find and free other biotic test subjects", "Discover the full extent of her abilities without losing control", "Build a life defined by her choices, not her past", ], [ { name: "Axel", type: "Close Friend", description: "Nova trusts Axel implicitly. His straightforward nature and technical skills complement her abilities in combat.", }, { name: "Zara", type: "Kindred Spirit", description: "Both were weapons for others before claiming their autonomy. They understand each other without words.", }, { name: "Krell", type: "Respected Ally", description: "Nova appreciates Krell's directness and code of honor. He's one of the few who doesn't fear her abilities.", }, { name: "Dr. Eliza Kerrigan", type: "Former Handler", description: "The scientist who oversaw Nova's 'development' at Chimera. Nova is conflicted about whether to seek justice or answers from her.", }, ], [ "Power isn't good or evil. The hand that wields it makes that choice.", "I've been a weapon. Now I choose my own targets.", "Fear is useful. It keeps you sharp. Just don't let it drive.", "Some scars you can't see, but they shape you more than the visible ones.", "I don't need your trust. I need your cooperation. Trust can come later... if we survive.", ], [ { name: "Biotic Singularity", description: "Creates a gravity well that traps and damages enemies within its radius.", type: "Combat", }, { name: "Neural Shock", description: "Overloads an opponent's nervous system, temporarily paralyzing them.", type: "Combat", }, { name: "Biotic Barrier", description: "Generates a protective field that absorbs damage.", type: "Defense", }, { name: "Psychometric Reading", description: "Can sense impressions and emotions left on objects by touching them.", type: "Utility", }, ], "Nova maintains a meditation routine to control her biotic abilities, which can fluctuate with her emotional state. She keeps a small collection of origami figures, a hobby that helps her focus. Despite her reserved nature, she's fiercely protective of civilians and will put herself at risk to protect innocents, perhaps compensating for operations she conducted while under Chimera's control.", "Nova speaks precisely and economically, rarely wasting words. When using her biotics, her voice takes on a slight echo quality. She tends to use technical terminology and military jargon. Under stress, she sometimes slips into Spanish, her first language before Chimera standardized her speech patterns.", "/placeholder.svg?height=300&width=150", ) /** * Example sci-fi RPG content configuration */ export const exampleSciFiContent = createRPGContent( "Commander Shepard", 35, // Status tab content createStatusTabContent( // Stats [ createCharacterStat("health", "Health", 75, 100), createCharacterStat("mana", "Energy", 80, 100), createCharacterStat("experience", "XP", 60, 100), ], // Attributes [ createAttribute("Strength", 35), createAttribute("Agility", 42), createAttribute("Intelligence", 38), createAttribute("Endurance", 40), createAttribute("Tech", 45), createAttribute("Leadership", 50), ], // Effects [ createEffect("Nano Boost", "Increases tech damage by 20%", "15:30", "/placeholder.svg?height=40&width=40"), createEffect("Stim Pack", "Health regeneration +8/sec", "10:45", "/placeholder.svg?height=40&width=40"), createEffect("Combat Focus", "Accuracy +15%", "05:00", "/placeholder.svg?height=40&width=40"), ], // Skills [ createSkill("Assault Rifles", 8, 10), createSkill("Biotics", 6, 10), createSkill("Tech Abilities", 7, 10), createSkill("Negotiation", 9, 10), ], ), // Equipment tab content createEquipmentTabContent( // Equipped items [ createEquippedItem( "Primary", "M-8 Avenger", "Rare", ["Damage: 85-110", "Rate of Fire: High"], "/placeholder.svg?height=60&width=60", ), createEquippedItem( "Secondary", "M-3 Predator", "Uncommon", ["Damage: 55-70", "Accuracy: +20%"], "/placeholder.svg?height=60&width=60", ), createEquippedItem( "Helmet", "N7 Helmet", "Epic", ["Armor: +45", "Tech Power: +10%"], "/placeholder.svg?height=60&width=60", ), createEquippedItem( "Armor", "N7 Chest Plate", "Epic", ["Armor: +85", "Shields: +200"], "/placeholder.svg?height=60&width=60", ), createEquippedItem( "Gauntlets", "N7 Gauntlets", "Rare", ["Armor: +25", "Weapon Stability: +15%"], "/placeholder.svg?height=60&width=60", ), createEquippedItem( "Greaves", "N7 Greaves", "Rare", ["Armor: +30", "Movement: +10%"], "/placeholder.svg?height=60&width=60", ), createEquippedItem( "Omni-Tool", "Savant X", "Legendary", ["Tech Power: +20%", "Cooldown: -15%"], "/placeholder.svg?height=60&width=60", ), createEquippedItem( "Amp", "Biotic Amp V", "Epic", ["Biotic Power: +25%", "Recharge: +10%"], "/placeholder.svg?height=60&width=60", ), ], // Equipment stats [ createEquipmentStat("attack", "Weapon Damage", "380"), createEquipmentStat("defense", "Armor Rating", "285"), createEquipmentStat("magic", "Tech/Biotic Power", "220"), createEquipmentStat("critical", "Critical Chance", "18%"), ], // Resistances [ createResistance("Kinetic", "70%"), createResistance("Energy", "55%"), createResistance("Biotic", "40%"), createResistance("Tech", "60%"), ], ), // Inventory tab content createInventoryTabContent( // Inventory used 18, // Inventory capacity 30, // Currencies [ createCurrency("Credits", 125000, "/placeholder.svg?height=20&width=20", "#22d3ee"), createCurrency("Element Zero", 45, "/placeholder.svg?height=20&width=20", "#818cf8"), ], // Items [ createInventoryItem("Medi-Gel", "Common", 8, "/placeholder.svg?height=40&width=40"), createInventoryItem("Thermal Clip", "Common", 20, "/placeholder.svg?height=40&width=40"), createInventoryItem("Weapon Mod", "Rare", 3, "/placeholder.svg?height=40&width=40"), createInventoryItem("Armor Upgrade", "Epic", 1, "/placeholder.svg?height=40&width=40"), createInventoryItem("Iridium", "Common", 15, "/placeholder.svg?height=40&width=40"), createInventoryItem("Power Cell", "Uncommon", 5, "/placeholder.svg?height=40&width=40"), createInventoryItem("Prothean Artifact", "Legendary", 1, "/placeholder.svg?height=40&width=40"), createInventoryItem("Shield Capacitor", "Rare", 2, "/placeholder.svg?height=40&width=40"), ], // Selected item createSelectedItem( "Prothean Data Disk", "Legendary", "An ancient data storage device containing Prothean technology blueprints.", "/placeholder.svg?height=50&width=50", ["+25% Tech Research Speed", "Unlocks Prothean Weapon Research", "Provides 5000 XP when studied"], [ createActionButton("Research", "rgba(6, 182, 212, 0.3)", "rgba(6, 182, 212, 0.5)", "#22d3ee"), createActionButton("Sell (50,000c)", "rgba(59, 130, 246, 0.3)", "rgba(59, 130, 246, 0.5)", "#93c5fd"), ], ), ), // Party tab content createPartyTabContent(scifiPartyMembers, novaDetails), ) // Create example party members for post-apocalyptic setting const apocalypsePartyMembers = [ createPartyMember( "ash", "Ash", "Wasteland Scout", 26, "/placeholder.svg?height=80&width=80", "Survivor with uncanny instincts", ), createPartyMember( "rust", "Rust", "Mechanic", 30, "/placeholder.svg?height=80&width=80", "Can fix anything with enough duct tape", ), createPartyMember( "willow", "Willow", "Healer", 24, "/placeholder.svg?height=80&width=80", "Keeper of old-world medical knowledge", ), createPartyMember( "diesel", "Diesel", "Enforcer", 35, "/placeholder.svg?height=80&width=80", "Former raider seeking redemption", ), ] // Create detailed profile for Ash const ashDetails = createPartyMemberDetails( "ash", "Ash (formerly Ashley Chen)", "Wasteland Scout", "Human", 27, "Female", 26, "/placeholder.svg?height=128&width=128", { description: "Ash is a survivor first and foremost, with keen instincts and a pragmatic outlook. Years in the wasteland have made her cautious and resourceful, but not heartless. She maintains a gruff exterior that hides a deep loyalty to those who earn her trust.", traits: ["Resourceful", "Vigilant", "Adaptable", "Skeptical", "Resilient"], alignment: "Chaotic Good", likes: ["Clear skies", "Pre-war books", "Self-sufficiency", "Honest deals", "Quiet nights by a fire"], dislikes: ["Wasted resources", "Blind optimism", "Enclosed spaces", "Empty promises", "Radiation storms"], }, "Ash was born fifteen years after the collapse, to parents who had once been university researchers. They taught her to read and about the old world while moving between settlements. When she was twelve, their small community was raided, and her parents were killed protecting her.\n\nShe survived alone for years, developing an uncanny sense for danger and opportunity alike. She eventually found work as a scout for trading caravans, mapping safe routes through the wasteland. Her reputation for reliability brought her to the attention of the Restoration Project, where she now serves as their eyes in the wilderness, searching for resources and technologies that might help rebuild.", [ "Find a permanent, safe settlement to call home", "Recover her parents' research notes from their old university", "Map the entire region to create safe travel routes", "Learn the truth about the rumors of a government bunker that survived intact", ], [ { name: "Rust", type: "Trusted Friend", description: "Ash brings Rust salvage in exchange for repairs. His straightforward nature and useful skills have earned her respect.", }, { name: "Willow", type: "Protective", description: "Ash sees Willow as too idealistic for the wasteland and often tries to shield her from harsh realities.", }, { name: "Diesel", type: "Cautious Ally", description: "Ash hasn't fully forgiven Diesel's past as a raider, but acknowledges his skills and genuine desire to change.", }, { name: "The Collector", type: "Uneasy Business Relationship", description: "A mysterious trader who pays well for pre-war artifacts. Ash doesn't trust him but values his information network.", }, ], [ "Plans are good. Backup plans are better.", "The wasteland doesn't care about fair. Neither do I.", "I've eaten worse. I've definitely eaten worse.", "Trust gets you killed. Except when it saves your life.", "The old world died for a reason. We need to build something better, not just dig up corpses.", ], [ { name: "Danger Sense", description: "An almost supernatural ability to detect ambushes, traps, and environmental hazards.", type: "Survival", }, { name: "Wasteland Navigation", description: "Can navigate using stars, landmarks, and subtle environmental cues even in unfamiliar territory.", type: "Exploration", }, { name: "Scavenger's Eye", description: "Exceptional talent for spotting valuable salvage and useful resources others might miss.", type: "Utility", }, { name: "Ghost Step", description: "Can move almost silently even through debris and rough terrain.", type: "Stealth", }, ], "Ash carries a small, worn photograph of her parents that she never shows anyone. She has extensive knowledge of pre-war geography that sometimes helps her locate potential scavenging sites. Despite her practical nature, she collects undamaged books when she finds them, hoping to eventually trade them for something valuable. She suffers from occasional nightmares about the raid that killed her parents, which is why she often volunteers for night watch.", "Ash speaks tersely, often dropping pronouns and using shortened sentences. She has a habit of scanning the horizon while talking and rarely makes extended eye contact. When discussing serious matters, her voice becomes notably quieter, making others lean in to hear. She uses a lot of practical metaphors and wasteland slang that can be confusing to those from sheltered communities.", "/placeholder.svg?height=300&width=150", ) /** * Example post-apocalyptic RPG content configuration */ export const exampleApocalypseContent = createRPGContent( "Wasteland Survivor", 28, // Status tab content createStatusTabContent( // Stats [ createCharacterStat("health", "Health", 65, 100), createCharacterStat("mana", "Radiation", 30, 100), createCharacterStat("experience", "Survival XP", 45, 100), ], // Attributes [ createAttribute("Strength", 32), createAttribute("Perception", 40), createAttribute("Endurance", 35), createAttribute("Charisma", 25), createAttribute("Intelligence", 30), createAttribute("Agility", 38), createAttribute("Luck", 20), ], // Effects [ createEffect("Rad Resistance", "Reduces radiation damage by 25%", "45:00", "/placeholder.svg?height=40&width=40"), createEffect("Adrenaline Rush", "Damage +15%, Speed +10%", "05:30", "/placeholder.svg?height=40&width=40"), createEffect("Mild Radiation", "Endurance -5", "Permanent", "/placeholder.svg?height=40&width=40"), ], // Skills [ createSkill("Firearms", 6, 10), createSkill("Survival", 8, 10), createSkill("Scavenging", 7, 10), createSkill("Bartering", 4, 10), ], ), // Equipment tab content createEquipmentTabContent( // Equipped items [ createEquippedItem( "Weapon", "Makeshift Rifle", "Uncommon", ["Damage: 65-85", "Condition: 72%"], "/placeholder.svg?height=60&width=60", ), createEquippedItem( "Sidearm", "Rusty Revolver", "Common", ["Damage: 40-55", "Accuracy: -10%"], "/placeholder.svg?height=60&width=60", ), createEquippedItem( "Head", "Gas Mask", "Rare", ["Armor: +15", "Rad Resist: +30%"], "/placeholder.svg?height=60&width=60", ), createEquippedItem( "Torso", "Scavenger Vest", "Uncommon", ["Armor: +25", "Carry Capacity: +15"], "/placeholder.svg?height=60&width=60", ), createEquippedItem( "Arms", "Leather Bracers", "Common", ["Armor: +10", "Scavenging: +5%"], "/placeholder.svg?height=60&width=60", ), createEquippedItem( "Legs", "Reinforced Pants", "Uncommon", ["Armor: +20", "Movement: -5%"], "/placeholder.svg?height=60&width=60", ), createEquippedItem( "Backpack", "Military Rucksack", "Rare", ["Carry Capacity: +25", "Organization: +10%"], "/placeholder.svg?height=60&width=60", ), createEquippedItem( "Accessory", "Radiation Detector", "Uncommon", ["Rad Detection: +20m", "Perception: +5"], "/placeholder.svg?height=60&width=60", ), ], // Equipment stats [ createEquipmentStat("attack", "Damage", "175"), createEquipmentStat("defense", "Armor", "70"), createEquipmentStat("magic", "Rad Resistance", "45%"), createEquipmentStat("critical", "Critical Chance", "12%"), ], // Resistances [ createResistance("Physical", "35%"), createResistance("Radiation", "45%"), createResistance("Thermal", "20%"), createResistance("Poison", "15%"), ], ), // Inventory tab content createInventoryTabContent( // Inventory used 20, // Inventory capacity 35, // Currencies [ createCurrency("Bottle Caps", 347, "/placeholder.svg?height=20&width=20", "#f97316"), createCurrency("Scrap Metal", 28, "/placeholder.svg?height=20&width=20", "#78716c"), ], // Items [ createInventoryItem("Stimpak", "Uncommon", 4, "/placeholder.svg?height=40&width=40"), createInventoryItem("Canned Food", "Common", 8, "/placeholder.svg?height=40&width=40"), createInventoryItem("Purified Water", "Common", 6, "/placeholder.svg?height=40&width=40"), createInventoryItem("Ammunition", "Common", 45, "/placeholder.svg?height=40&width=40"), createInventoryItem("RadAway", "Rare", 2, "/placeholder.svg?height=40&width=40"), createInventoryItem("Scrap Electronics", "Uncommon", 12, "/placeholder.svg?height=40&width=40"), createInventoryItem("Military-Grade Circuit", "Epic", 1, "/placeholder.svg?height=40&width=40"), createInventoryItem("Pre-War Money", "Uncommon", 25, "/placeholder.svg?height=40&width=40"), ], // Selected item createSelectedItem( "Experimental Serum", "Legendary", "A mysterious pre-war medical serum with unknown effects.", "/placeholder.svg?height=50&width=50", ["Restores 100% Health", "Removes all Radiation", "Unknown side effects may occur"], [ createActionButton("Use", "rgba(120, 53, 15, 0.3)", "rgba(120, 53, 15, 0.5)", "#fdba74"), createActionButton("Sell (200 caps)", "rgba(63, 63, 70, 0.3)", "rgba(63, 63, 70, 0.5)", "#d4d4d8"), ], ), ), // Party tab content createPartyTabContent(apocalypsePartyMembers, ashDetails), ) [V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import ExampleUsage from "./example-usage" export default function Home() { return } [V0_FILE]typescriptreact:file="lib/rpg-data.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import type { RPGLayoutType, RPGContentType } from "./rpg-types" /** * Default RPG layout configuration * This defines the structure and theme of the RPG game menu */ export const rpgLayoutJson: RPGLayoutType = { theme: { primaryGradientStart: "rgba(76, 29, 149, 0.5)", primaryGradientEnd: "rgba(30, 58, 138, 0.5)", tabIndicatorColor: "#a855f7", levelBadgeBg: "rgba(202, 138, 4, 0.3)", levelBadgeBorder: "rgba(202, 138, 4, 0.5)", levelBadgeText: "#fde047", healthBarColor: "bg-red-600", manaBarColor: "bg-blue-600", experienceBarColor: "bg-yellow-600", rarityColors: { common: "text-gray-300", uncommon: "text-green-400", rare: "text-blue-400", epic: "text-purple-400", legendary: "text-yellow-400", }, rarityBorders: { common: "border-gray-600 bg-gray-800", uncommon: "border-green-600/50 bg-green-900/20", rare: "border-blue-600/50 bg-blue-900/20", epic: "border-purple-600/50 bg-purple-900/20", legendary: "border-yellow-600/50 bg-yellow-900/20", }, }, defaultTab: "status", tabs: [ { id: "status", label: "Status" }, { id: "equipment", label: "Equipment" }, { id: "inventory", label: "Inventory" }, { id: "party", label: "Party" }, ], tabLayouts: { status: { sections: { stats: { title: "Character Stats" }, attributes: { title: "Attributes" }, effects: { title: "Active Effects" }, skills: { title: "Skills" }, }, }, equipment: { sections: { equipped: { title: "Equipped Items" }, stats: { title: "Equipment Stats" }, resistances: { title: "Resistances" }, }, }, inventory: { sections: { inventory: { title: "Inventory" }, itemDetails: { title: "Item Details" }, }, }, party: { sections: { members: { title: "Party Members" }, details: { title: "Character Details" }, }, }, }, } /** * Default RPG content configuration * This defines the actual game data displayed in the menu */ export const rpgContentJson: RPGContentType = { character: { name: "Dragonslayer", level: 42, }, tabContents: { status: { stats: [ { type: "health", label: "Health", current: 85, max: 100 }, { type: "mana", label: "Mana", current: 65, max: 100 }, { type: "experience", label: "Experience", current: 70, max: 100 }, ], attributes: [ { name: "Strength", value: 42 }, { name: "Dexterity", value: 38 }, { name: "Intelligence", value: 25 }, { name: "Vitality", value: 45 }, { name: "Wisdom", value: 30 }, { name: "Charisma", value: 22 }, ], effects: [ { name: "Blessing of Light", description: "Increases holy damage by 15%", duration: "30:42", icon: "/placeholder.svg?height=40&width=40", }, { name: "Well Fed", description: "Health regeneration +5/sec", duration: "15:20", icon: "/placeholder.svg?height=40&width=40", }, { name: "Dragon's Might", description: "Strength +10", duration: "05:11", icon: "/placeholder.svg?height=40&width=40", }, ], skills: [ { name: "Swordsmanship", level: 7, maxLevel: 10 }, { name: "Archery", level: 4, maxLevel: 10 }, { name: "Fire Magic", level: 3, maxLevel: 10 }, { name: "Alchemy", level: 5, maxLevel: 10 }, ], }, equipment: { equippedItems: [ { slot: "Weapon", name: "Dragonslayer Sword", rarity: "Epic", stats: ["Damage: 120-150", "Critical: +15%"], image: "/placeholder.svg?height=60&width=60", }, { slot: "Shield", name: "Bulwark of the Ages", rarity: "Rare", stats: ["Defense: +45", "Block: 25%"], image: "/placeholder.svg?height=60&width=60", }, { slot: "Helmet", name: "Crown of Wisdom", rarity: "Rare", stats: ["Armor: +35", "Intelligence: +8"], image: "/placeholder.svg?height=60&width=60", }, { slot: "Chest", name: "Dragonscale Armor", rarity: "Epic", stats: ["Armor: +75", "Fire Resist: +40%"], image: "/placeholder.svg?height=60&width=60", }, { slot: "Gloves", name: "Gauntlets of Power", rarity: "Uncommon", stats: ["Armor: +20", "Strength: +5"], image: "/placeholder.svg?height=60&width=60", }, { slot: "Boots", name: "Swift Walkers", rarity: "Uncommon", stats: ["Armor: +18", "Movement: +10%"], image: "/placeholder.svg?height=60&width=60", }, { slot: "Amulet", name: "Ancient Pendant", rarity: "Legendary", stats: ["All Stats: +5", "Luck: +15%"], image: "/placeholder.svg?height=60&width=60", }, { slot: "Ring", name: "Band of Protection", rarity: "Rare", stats: ["Defense: +25", "Health: +100"], image: "/placeholder.svg?height=60&width=60", }, ], equipmentStats: [ { type: "attack", label: "Attack Power", value: "450" }, { type: "defense", label: "Defense", value: "320" }, { type: "magic", label: "Magic Power", value: "180" }, { type: "critical", label: "Critical Rate", value: "25%" }, ], resistances: [ { type: "Fire", value: "65%" }, { type: "Ice", value: "30%" }, { type: "Lightning", value: "45%" }, { type: "Poison", value: "20%" }, ], }, inventory: { inventoryUsed: 24, inventoryCapacity: 40, currencies: [ { name: "Gold", amount: 12450, icon: "/placeholder.svg?height=20&width=20", color: "#fcd34d" }, { name: "Gems", amount: 85, icon: "/placeholder.svg?height=20&width=20", color: "#c4b5fd" }, ], items: [ { name: "Health Potion", rarity: "Common", quantity: 5, image: "/placeholder.svg?height=40&width=40" }, { name: "Mana Potion", rarity: "Common", quantity: 3, image: "/placeholder.svg?height=40&width=40" }, { name: "Dragon Scale", rarity: "Rare", quantity: 1, image: "/placeholder.svg?height=40&width=40" }, { name: "Ancient Tome", rarity: "Epic", quantity: 1, image: "/placeholder.svg?height=40&width=40" }, { name: "Steel Ingot", rarity: "Common", quantity: 12, image: "/placeholder.svg?height=40&width=40" }, { name: "Magic Dust", rarity: "Uncommon", quantity: 8, image: "/placeholder.svg?height=40&width=40" }, { name: "Enchanted Gem", rarity: "Rare", quantity: 2, image: "/placeholder.svg?height=40&width=40" }, { name: "Legendary Crystal", rarity: "Legendary", quantity: 1, image: "/placeholder.svg?height=40&width=40" }, { name: "Healing Herb", rarity: "Common", quantity: 15, image: "/placeholder.svg?height=40&width=40" }, { name: "Mystic Feather", rarity: "Uncommon", quantity: 4, image: "/placeholder.svg?height=40&width=40" }, { name: "Dragon Tooth", rarity: "Epic", quantity: 1, image: "/placeholder.svg?height=40&width=40" }, { name: "Arcane Scroll", rarity: "Rare", quantity: 3, image: "/placeholder.svg?height=40&width=40" }, { name: "Gold Coin", rarity: "Common", quantity: 50, image: "/placeholder.svg?height=40&width=40" }, { name: "Enchanted Armor", rarity: "Epic", quantity: 1, image: "/placeholder.svg?height=40&width=40" }, { name: "Magic Wand", rarity: "Rare", quantity: 1, image: "/placeholder.svg?height=40&width=40" }, ], selectedItem: { name: "Ancient Tome of Wisdom", rarity: "Legendary", description: "A mysterious book containing forgotten knowledge of the ancients.", image: "/placeholder.svg?height=50&width=50", effects: ["+15 Intelligence", "+10% Spell Critical Chance", "Reduces spell cooldowns by 5%"], actions: [ { label: "Use", bgColor: "rgba(37, 99, 235, 0.3)", borderColor: "rgba(37, 99, 235, 0.5)", textColor: "#93c5fd", }, { label: "Sell (750g)", bgColor: "rgba(202, 138, 4, 0.3)", borderColor: "rgba(202, 138, 4, 0.5)", textColor: "#fcd34d", }, ], }, }, party: { members: [ { id: "lyra", name: "Lyra", class: "Paladin", level: 40, portrait: "/placeholder.svg?height=80&width=80", tagline: "Righteous defender of the light", }, { id: "thorne", name: "Thorne", class: "Rogue", level: 38, portrait: "/placeholder.svg?height=80&width=80", tagline: "Shadow walker and master of stealth", }, { id: "elara", name: "Elara", class: "Wizard", level: 39, portrait: "/placeholder.svg?height=80&width=80", tagline: "Arcane scholar with ancient knowledge", }, { id: "garrick", name: "Garrick", class: "Ranger", level: 37, portrait: "/placeholder.svg?height=80&width=80", tagline: "Wilderness guide and expert tracker", }, ], selectedMember: { id: "lyra", fullName: "Lyra Brightshield", class: "Paladin", race: "Human", age: 32, gender: "Female", level: 40, portrait: "/placeholder.svg?height=128&width=128", fullImage: "/placeholder.svg?height=300&width=150", personality: { description: "Lyra is a steadfast and compassionate warrior who believes in justice and mercy in equal measure. She is serious about her duties but has a warm heart and dry sense of humor that emerges among friends.", traits: ["Honorable", "Compassionate", "Disciplined", "Protective", "Faithful"], alignment: "Lawful Good", likes: [ "Dawn prayers", "Helping the vulnerable", "Fine craftsmanship", "Honest conversation", "Sweet pastries", ], dislikes: ["Needless cruelty", "Demons", "Corruption", "Excessive drinking", "Dishonorable tactics"], }, background: "Born to a blacksmith and a priestess in the small town of Oakvale, Lyra showed an affinity for both martial prowess and divine magic from a young age. When darkness fell upon her hometown in the form of a necromancer's curse, she was the only survivor, protected by a mysterious divine light.\n\nShe was found and raised by the Order of the Silver Dawn, where she trained as a paladin. After taking her oaths at age 20, she set out to right wrongs and protect the innocent, eventually crossing paths with the party while investigating a series of mysterious disappearances that led back to the same necromancer who destroyed her home.", goals: [ "Defeat the necromancer Malachar and free the souls he has bound", "Restore the Order of the Silver Dawn to its former glory", "Find and recover the lost holy relic, the Sunheart Chalice", "Protect her companions and help them achieve their goals", ], relationships: [ { name: "Thorne", type: "Complicated Friendship", description: "Lyra disapproves of Thorne's methods but respects his loyalty. They bicker often but would die for each other.", }, { name: "Elara", type: "Trusted Ally", description: "Lyra admires Elara's wisdom and often seeks her counsel. They share a bond through their faith in different powers.", }, { name: "Garrick", type: "Close Friend", description: "Lyra and Garrick understand each other's straightforward nature. He reminds her of her father, and she values his practical wisdom.", }, { name: "Sir Galenus", type: "Mentor", description: "The paladin who found and trained Lyra. She writes to him regularly and seeks to make him proud.", }, ], quotes: [ "By the light of the Dawn, I will protect those who cannot protect themselves.", "Mercy is not weakness; it is the highest form of strength.", "I don't trust magic I can't see, but I trust you, Elara.", "My sword arm may tire, but my resolve never will.", "Sometimes the righteous path is not the easiest one, but it is always the one worth taking.", ], abilities: [ { name: "Divine Smite", description: "Channels divine energy through her weapon, dealing extra radiant damage to evil creatures.", type: "Combat", }, { name: "Lay on Hands", description: "A healing touch that can cure wounds, diseases, and neutralize poisons.", type: "Healing", }, { name: "Aura of Protection", description: "Emits an aura that bolsters the saving throws of nearby allies.", type: "Support", }, { name: "Zone of Truth", description: "Creates a magical zone where those within cannot lie.", type: "Utility", }, ], roleplayNotes: "Lyra carries a locket containing ashes from her destroyed hometown. She touches it before battle for strength. Despite her serious demeanor, she has a beautiful singing voice but only uses it during religious ceremonies. She struggles with forgiveness when it comes to truly evil acts, which conflicts with her faith's teachings.", speechPatterns: "Lyra speaks with formal diction and rarely uses contractions. She often invokes religious terminology and metaphors of light and darkness. When angry, her voice becomes very quiet and measured. She addresses strangers respectfully as 'sir' or 'lady' until given permission to use their name.", }, }, }, } [V0_FILE]typescriptreact:file="lib/component-registry.ts" isMerged="true" "use client" import type React from "react" import { Heart, Zap, Sparkles } from "lucide-react" import { Progress } from "@/components/ui/progress" // Type definitions for component registry export interface RegisteredComponent { id: string displayName: string description: string code: string compiledComponent?: React.ComponentType } export interface ComponentReference { componentId: string props: Record } // Helper to check if something is a component reference export function isComponentReference(obj: any): obj is ComponentReference { return obj && typeof obj === "object" && "componentId" in obj && "props" in obj } // Default components that are always available const defaultComponents: RegisteredComponent[] = [ { id: "StatBar", displayName: "Stat Bar", description: "A bar showing a stat with current and max values", code: ` import React from "react"; import { Progress } from "@/components/ui/progress"; import { Heart, Zap, Sparkles } from 'lucide-react'; interface StatBarProps { title: string; icon?: [string, string]; // [library, iconName] min?: number; max: number; current: number; color?: string; } export default function StatBar({ title, icon, min = 0, max, current, color = "bg-primary" }: StatBarProps) { const getIcon = () => { if (!icon) return null; if (icon[0] === "lucide") { switch (icon[1]) { case "Heart": return ; case "Zap": return ; case "Sparkles": return ; default: return null; } } return null; }; return (

{getIcon()} {title}

{current}/{max}

); }`, compiledComponent: ({ title, icon, min = 0, max, current, color = "bg-primary" }) => { const getIcon = () => { if (!icon) return null if (icon[0] === "lucide") { switch (icon[1]) { case "Heart": return case "Zap": return case "Sparkles": return default: return null } } return null } return (

{getIcon()} {title}

{current}/{max}

) }, }, { id: "AttributeItem", displayName: "Attribute Item", description: "A simple attribute display with name and value", code: ` import React from "react"; import { motion } from "framer-motion"; interface AttributeItemProps { label: string; value: number | string; } export default function AttributeItem({ label, value }: AttributeItemProps) { return ( {label} {value} ); }`, compiledComponent: ({ label, value }) => { return (

{label} {value}

) }, }, ] // Class to manage component registry export class ComponentRegistry { private components: Map = new Map() constructor() { // Initialize with default components defaultComponents.forEach((component) => { this.components.set(component.id, component) }) // Load any saved components from localStorage this.loadFromStorage() } // Get all registered components getAllComponents(): RegisteredComponent[] { return Array.from(this.components.values()) } // Get a specific component by ID getComponent(id: string): RegisteredComponent | undefined { return this.components.get(id) } // Register a new component or update an existing one registerComponent(component: RegisteredComponent): void { this.components.set(component.id, component) this.saveToStorage() } // Remove a component from the registry removeComponent(id: string): boolean { // Don't allow removing default components if (defaultComponents.some((c) => c.id === id)) { return false } const result = this.components.delete(id) if (result) { this.saveToStorage() } return result } // Save the current registry to localStorage private saveToStorage(): void { try { // Only save custom components (not default ones) const customComponents = Array.from(this.components.values()) .filter((comp) => !defaultComponents.some((dc) => dc.id === comp.id)) .map(({ id, displayName, description, code }) => ({ id, displayName, description, code })) localStorage.setItem("rpg-ui-components", JSON.stringify(customComponents)) } catch (error) { console.error("Failed to save components to localStorage:", error) } } // Load components from localStorage private loadFromStorage(): void { try { const stored = localStorage.getItem("rpg-ui-components") if (stored) { const components = JSON.parse(stored) as RegisteredComponent[] components.forEach((component) => { // Don't override default components if (!defaultComponents.some((dc) => dc.id === component.id)) { this.components.set(component.id, component) } }) } } catch (error) { console.error("Failed to load components from localStorage:", error) } } } // Create a singleton instance export const componentRegistry = new ComponentRegistry() [V0_FILE]typescriptreact:file="components/dynamic-component-renderer.tsx" isMerged="true" "use client" import React from "react" import { componentRegistry, isComponentReference, type ComponentReference } from "@/lib/component-registry" interface DynamicComponentRendererProps { componentRef: ComponentReference } export function DynamicComponentRenderer({ componentRef }: DynamicComponentRendererProps) { const { componentId, props } = componentRef const component = componentRegistry.getComponent(componentId) if (!component || !component.compiledComponent) { return (

Component "{componentId}" not found or not compiled

) } const Component = component.compiledComponent // Process props to handle nested component references const processedProps = Object.entries(props).reduce( (acc, [key, value]) => { if (isComponentReference(value)) { acc[key] = } else if (Array.isArray(value) && value.some((item) => isComponentReference(item))) { acc[key] = value.map((item, index) => isComponentReference(item) ? ( ) : ( item ), ) } else { acc[key] = value } return acc }, {} as Record, ) return } [V0_FILE]typescriptreact:file="components/component-editor.tsx" isMerged="true" "use client" import React, { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Alert, AlertDescription } from "@/components/ui/alert" import { componentRegistry, type RegisteredComponent } from "@/lib/component-registry" import { compileComponent } from "@/lib/component-compiler" interface ComponentEditorProps { initialComponent?: RegisteredComponent onSave?: (component: RegisteredComponent) => void onCancel?: () => void } export function ComponentEditor({ initialComponent, onSave, onCancel }: ComponentEditorProps) { const [component, setComponent] = useState( initialComponent || { id: "", displayName: "", description: "", code: `import React from "react"; interface MyComponentProps { // Define your props here title: string; } export default function MyComponent({ title }: MyComponentProps) { return (

{title}

); }`, }, ) const [error, setError] = useState(null) const [preview, setPreview] = useState | null>(null) const [previewProps, setPreviewProps] = useState('{ "title": "Preview" }') // Compile the component when code changes const handleCompile = async () => { try { setError(null) const compiledComponent = await compileComponent(component.code) setComponent((prev) => ({ ...prev, compiledComponent })) setPreview(compiledComponent) } catch (err) { setError(err.message || "Failed to compile component") setPreview(null) } } // Handle saving the component const handleSave = () => { if (!component.id) { setError("Component ID is required") return } if (!component.displayName) { setError("Display name is required") return } if (!component.compiledComponent) { setError("Component must be compiled successfully before saving") return } componentRegistry.registerComponent(component) if (onSave) { onSave(component) } } // Parse preview props const getParsedPreviewProps = () => { try { return JSON.parse(previewProps) } catch (err) { return { error: "Invalid JSON" } } } return ( {initialComponent ? "Edit Component" : "Create New Component"}

Component ID setComponent((prev) => ({ ...prev, id: e.target.value }))} placeholder="MyComponent" />

Display Name setComponent((prev) => ({ ...prev, displayName: e.target.value }))} placeholder="My Component" />

Description

setComponent((prev) => ({ ...prev, description: e.target.value }))}
              placeholder="Describe what this component does"
              rows={2}
            />
          </div>

<Tabs defaultValue="code">
            <TabsList>
              <TabsTrigger value="code">Code</TabsTrigger>
              <TabsTrigger value="preview">Preview</TabsTrigger>
            </TabsList>

<TabsContent value="code">
              <div className="grid gap-4">
                <Textarea
                  value={component.code}
                  onChange={(e) => setComponent((prev) => ({ ...prev, code: e.target.value }))}
                  placeholder="Component code"
                  className="font-mono h-[300px]"
                />

<div className="flex justify-end">
                  <Button onClick={handleCompile}>Compile</Button>
                </div>
              </div>
            </TabsContent>

<TabsContent value="preview">
              <div className="grid gap-4">
                <div>
                  <Label htmlFor="preview-props">Preview Props (JSON)</Label>
                  <Textarea
                    id="preview-props"
                    value={previewProps}
                    onChange={(e) => setPreviewProps(e.target.value)}
                    placeholder='{ "prop": "value" }'
                    rows={3}
                    className="font-mono"
                  />
                </div>

<div className="border rounded-lg p-4 bg-gray-900 min-h-[200px]">
                  {preview ? (
                    <div className="text-white">{React.createElement(preview, getParsedPreviewProps())}</div>
                  ) : (
                    <div className="text-gray-400 flex items-center justify-center h-full">
                      {error ? "Compilation failed" : "Compile your component to see a preview"}
                    </div>
                  )}
                </div>
              </div>
            </TabsContent>
          </Tabs>

{error && (
            <Alert variant="destructive">
              <AlertDescription>{error}</AlertDescription>
            </Alert>
          )}
        </div>
      </CardContent>
      <CardFooter className="flex justify-between">
        <Button variant="outline" onClick={onCancel}>
          Cancel
        </Button>
        <Button onClick={handleSave}>Save Component</Button>
      </CardFooter>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="lib/component-compiler.ts" isMerged="true"
"use client"

import React from "react"
import { transform } from "sucrase"
import { Progress } from "@/components/ui/progress"
import * as LucideIcons from "lucide-react"
import { motion } from "framer-motion"

// Function to compile a component from code string to React component
export async function compileComponent(code: string): Promise<React.ComponentType<any>> {
  try {
    // Transform TypeScript to JavaScript
    const { code: transformedCode } = transform(code, {
      transforms: ["typescript", "jsx"],
      jsxRuntime: "automatic",
    })

// Create a function that will evaluate the code and return the component
    const AsyncFunction = Object.getPrototypeOf(async () => {}).constructor

// Create a module-like environment with React and other dependencies
    const moduleExports = {}
    const require = (moduleName: string) => {
      switch (moduleName) {
        case "react":
          return React
        case "@/components/ui/progress":
          return { Progress }
        case "lucide-react":
          return LucideIcons
        case "framer-motion":
          return { motion }
        default:
          throw new Error(`Module "${moduleName}" is not available`)
      }
    }

// Execute the code in the context of our module environment
    const executeCode = new AsyncFunction(
      "React",
      "require",
      "exports",
      `${transformedCode}
      return exports.default || exports;`,
    )

// Run the code and get the component
    const component = await executeCode(React, require, moduleExports)

if (!component || typeof component !== "function") {
      throw new Error("Component must export a React component function as default")
    }

return component
  } catch (error) {
    console.error("Component compilation failed:", error)
    throw new Error(`Failed to compile component: ${error.message}`)
  }
}

[V0_FILE]typescriptreact:file="components/component-manager.tsx" isMerged="true"
"use client"

import React, { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"
import { Plus, Edit, Trash2, Code } from "lucide-react"
import { componentRegistry, type RegisteredComponent } from "@/lib/component-registry"
import { ComponentEditor } from "./component-editor"
import { compileComponent } from "@/lib/component-compiler"

export function ComponentManager() {
  const [components, setComponents] = useState<RegisteredComponent[]>([])
  const [selectedComponent, setSelectedComponent] = useState<RegisteredComponent | null>(null)
  const [isEditing, setIsEditing] = useState(false)
  const [isCreating, setIsCreating] = useState(false)

// Load components on mount
  useEffect(() => {
    loadComponents()
  }, [])

// Load and compile all components
  const loadComponents = async () => {
    const allComponents = componentRegistry.getAllComponents()

// Compile any components that aren't already compiled
    for (const component of allComponents) {
      if (!component.compiledComponent) {
        try {
          component.compiledComponent = await compileComponent(component.code)
        } catch (error) {
          console.error(`Failed to compile component ${component.id}:`, error)
        }
      }
    }

setComponents(allComponents)
  }

// Handle component selection
  const handleSelectComponent = (component: RegisteredComponent) => {
    setSelectedComponent(component)
  }

// Handle component deletion
  const handleDeleteComponent = (id: string) => {
    const isDefault = componentRegistry.removeComponent(id)
    if (!isDefault) {
      loadComponents()
      if (selectedComponent?.id === id) {
        setSelectedComponent(null)
      }
    }
  }

// Handle component save
  const handleSaveComponent = () => {
    loadComponents()
    setIsEditing(false)
    setIsCreating(false)
  }

return (
    <div className="grid grid-cols-1 gap-6">
      <div className="flex justify-between items-center">
        <h2 className="text-2xl font-bold">Component Manager</h2>
        <Dialog open={isCreating} onOpenChange={setIsCreating}>
          <DialogTrigger asChild>
            <Button onClick={() => setIsCreating(true)}>
              <Plus className="w-4 h-4 mr-2" />
              New Component
            </Button>
          </DialogTrigger>
          <DialogContent className="max-w-3xl">
            <ComponentEditor onSave={() => handleSaveComponent()} onCancel={() => setIsCreating(false)} />
          </DialogContent>
        </Dialog>
      </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card className="md:col-span-1">
          <CardHeader>
            <CardTitle>Available Components</CardTitle>
            <CardDescription>Select a component to view details</CardDescription>
          </CardHeader>
          <CardContent>
            <ScrollArea className="h-[400px] pr-4">
              <div className="space-y-2">
                {components.map((component) => (
                  <div
                    key={component.id}
                    className={`p-3 rounded-md cursor-pointer flex justify-between items-center ${
                      selectedComponent?.id === component.id
                        ? "bg-primary/10 border border-primary/50"
                        : "bg-secondary hover:bg-secondary/80"
                    }`}
                    onClick={() => handleSelectComponent(component)}
                  >
                    <div>
                      <div className="font-medium">{component.displayName}</div>
                      <div className="text-xs text-muted-foreground">{component.id}</div>
                    </div>
                    <Code className="w-4 h-4 text-muted-foreground" />
                  </div>
                ))}
              </div>
            </ScrollArea>
          </CardContent>
        </Card>

<Card className="md:col-span-2">
          {selectedComponent ? (
            <>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <div>
                  <CardTitle>{selectedComponent.displayName}</CardTitle>
                  <CardDescription className="text-sm text-muted-foreground">
                    Component ID: {selectedComponent.id}
                  </CardDescription>
                </div>
                <div className="flex space-x-2">
                  <Dialog open={isEditing} onOpenChange={setIsEditing}>
                    <DialogTrigger asChild>
                      <Button variant="outline" size="icon" onClick={() => setIsEditing(true)}>
                        <Edit className="h-4 w-4" />
                      </Button>
                    </DialogTrigger>
                    <DialogContent className="max-w-3xl">
                      <ComponentEditor
                        initialComponent={selectedComponent}
                        onSave={() => handleSaveComponent()}
                        onCancel={() => setIsEditing(false)}
                      />
                    </DialogContent>
                  </Dialog>
                  <Button
                    variant="outline"
                    size="icon"
                    onClick={() => handleDeleteComponent(selectedComponent.id)}
                    disabled={components.findIndex((c) => c.id === selectedComponent.id) < 2} // Disable for default components
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              </CardHeader>
              <CardContent>
                <Tabs defaultValue="details">
                  <TabsList>
                    <TabsTrigger value="details">Details</TabsTrigger>
                    <TabsTrigger value="code">Code</TabsTrigger>
                    <TabsTrigger value="usage">Usage</TabsTrigger>
                  </TabsList>

<TabsContent value="details">
                    <div className="space-y-4">
                      <div>
                        <h3 className="text-sm font-medium">Description</h3>
                        <p className="text-sm text-muted-foreground">{selectedComponent.description}</p>
                      </div>

<div>
                        <h3 className="text-sm font-medium mb-2">Preview</h3>
                        <div className="border rounded-lg p-4 bg-gray-900">
                          {selectedComponent.compiledComponent ? (
                            <div className="text-white">
                              {React.createElement(selectedComponent.compiledComponent, { title: "Preview" })}
                            </div>
                          ) : (
                            <div className="text-gray-400">Component not compiled</div>
                          )}
                        </div>
                      </div>
                    </div>
                  </TabsContent>

<TabsContent value="code">
                    <pre className="p-4 rounded-lg bg-gray-900 text-gray-100 overflow-auto text-sm h-[300px]">
                      {selectedComponent.code}
                    </pre>
                  </TabsContent>

<TabsContent value="usage">
                    <div className="space-y-4">
                      <div>
                        <h3 className="text-sm font-medium">JSON Usage</h3>
                        <p className="text-sm text-muted-foreground mb-2">
                          Use this component in your RPG UI JSON by adding the following:
                        </p>
                        <pre className="p-4 rounded-lg bg-gray-900 text-gray-100 overflow-auto text-sm">
                          {`{
  "componentId": "${selectedComponent.id}",
  "props": {
    "title": "Your Title"
    // Add other props as needed
  }
}`}
                        </pre>
                      </div>
                    </div>
                  </TabsContent>
                </Tabs>
              </CardContent>
            </>
          ) : (
            <CardContent className="h-[400px] flex items-center justify-center">
              <div className="text-center text-muted-foreground">
                <p>Select a component to view details</p>
              </div>
            </CardContent>
          )}
        </Card>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/status-tab-renderer.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { Progress } from "@/components/ui/progress"
import { Heart, Zap, Sparkles } from "lucide-react"
import type { StatusTabLayout, StatusTabContent, RPGTheme } from "@/lib/rpg-types"
import { isComponentReference } from "@/lib/component-registry"
import { DynamicComponentRenderer } from "./dynamic-component-renderer"

interface StatusTabRendererProps {
  layout: StatusTabLayout
  content: StatusTabContent
  theme: RPGTheme
}

export function StatusTabRenderer({ layout, content, theme }: StatusTabRendererProps) {
  return (
    <motion.div
      className="p-6 text-gray-300"
      layout
      transition={{
        layout: { duration: 0.3, ease: "easeOut" },
        height: { duration: 0.3, ease: "easeOut" },
      }}
    >
      <motion.div
        className="grid grid-cols-1 md:grid-cols-2 gap-6"
        layout
        transition={{
          layout: { duration: 0.3, ease: "easeOut" },
          height: { duration: 0.3, ease: "easeOut" },
        }}
      >
        <motion.div
          className="space-y-6"
          layout
          transition={{
            layout: { duration: 0.3, ease: "easeOut" },
            height: { duration: 0.3, ease: "easeOut" },
          }}
        >
          <div>
            <h3 className="text-lg font-semibold text-white mb-4">{layout.sections.stats.title}</h3>
            <div className="space-y-4">
              {content.stats.map((stat, index) => {
                if (isComponentReference(stat)) {
                  return <DynamicComponentRenderer key={index} componentRef={stat} />
                }

return (
                  <StatBar
                    key={index}
                    icon={getStatIcon(stat.type)}
                    label={stat.label}
                    value={stat.current}
                    max={stat.max}
                    color={getStatColor(stat.type, theme)}
                  />
                )
              })}
            </div>
          </div>

<div>
            <h3 className="text-lg font-semibold text-white mb-4">{layout.sections.attributes.title}</h3>
            <div className="grid grid-cols-2 gap-4">
              {content.attributes.map((attr, index) => {
                if (isComponentReference(attr)) {
                  return <DynamicComponentRenderer key={index} componentRef={attr} />
                }

return <AttributeItem key={index} label={attr.name} value={attr.value} />
              })}
            </div>
          </div>
        </motion.div>

<motion.div
          layout
          transition={{
            layout: { duration: 0.3, ease: "easeOut" },
            height: { duration: 0.3, ease: "easeOut" },
          }}
        >
          <h3 className="text-lg font-semibold text-white mb-4">{layout.sections.effects.title}</h3>
          <div className="space-y-3">
            {content.effects.map((effect, index) => {
              if (isComponentReference(effect)) {
                return <DynamicComponentRenderer key={index} componentRef={effect} />
              }

return (
                <EffectItem
                  key={index}
                  name={effect.name}
                  description={effect.description}
                  duration={effect.duration}
                  icon={effect.icon}
                />
              )
            })}
          </div>

<h3 className="text-lg font-semibold text-white mt-6 mb-4">{layout.sections.skills.title}</h3>
          <div className="grid grid-cols-2 gap-3">
            {content.skills.map((skill, index) => {
              if (isComponentReference(skill)) {
                return <DynamicComponentRenderer key={index} componentRef={skill} />
              }

return <SkillItem key={index} name={skill.name} level={skill.level} maxLevel={skill.maxLevel} />
            })}
          </div>
        </motion.div>
      </motion.div>
    </motion.div>
  )
}

// Helper components
function StatBar({ icon, label, value, max, color }) {
  return (
    <div className="space-y-1">
      <div className="flex justify-between items-center">
        <div className="flex items-center">
          {icon}
          <span className="ml-2 text-sm">{label}</span>
        </div>
        <span className="text-sm">
          {value}/{max}
        </span>
      </div>
      <Progress value={(value / max) * 100} className="h-2 bg-gray-800" indicatorClassName={color} />
    </div>
  )
}

function AttributeItem({ label, value }) {
  return (
    <motion.div
      className="flex justify-between items-center bg-gray-900/50 p-2 rounded border border-gray-800"
      layout
      transition={{
        duration: 0.2,
        height: { duration: 0.3, ease: "easeOut" },
      }}
    >
      <span className="text-sm">{label}</span>
      <span className="text-sm font-semibold text-white">{value}</span>
    </motion.div>
  )
}

function EffectItem({ name, description, duration, icon }) {
  return (
    <motion.div
      className="flex items-center bg-gray-900/50 p-2 rounded border border-gray-800"
      layout
      transition={{
        duration: 0.2,
        height: { duration: 0.3, ease: "easeOut" },
      }}
    >
      <img src={icon || "/placeholder.svg?height=40&width=40"} alt={name} className="w-8 h-8 mr-3" />
      <div className="flex-1">
        <div className="flex justify-between">
          <span className="text-sm font-semibold text-white">{name}</span>
          <span className="text-xs text-gray-400">{duration}</span>
        </div>
        <p className="text-xs text-gray-400">{description}</p>
      </div>
    </motion.div>
  )
}

function SkillItem({ name, level, maxLevel }) {
  return (
    <motion.div
      className="bg-gray-900/50 p-2 rounded border border-gray-800"
      layout
      transition={{
        duration: 0.2,
        height: { duration: 0.3, ease: "easeOut" },
      }}
    >
      <div className="flex justify-between items-center mb-1">
        <span className="text-sm">{name}</span>
        <span className="text-xs text-gray-400">
          {level}/{maxLevel}
        </span>
      </div>
      <Progress value={(level / maxLevel) * 100} className="h-1.5 bg-gray-800" indicatorClassName="bg-green-600" />
    </motion.div>
  )
}

// Helper functions
function getStatIcon(type: string) {
  switch (type) {
    case "health":
      return <Heart className="w-4 h-4 text-red-500" />
    case "mana":
      return <Zap className="w-4 h-4 text-blue-400" />
    case "experience":
      return <Sparkles className="w-4 h-4 text-yellow-400" />
    default:
      return null
  }
}

function getStatColor(type: string, theme: RPGTheme) {
  switch (type) {
    case "health":
      return theme.healthBarColor
    case "mana":
      return theme.manaBarColor
    case "experience":
      return theme.experienceBarColor
    default:
      return "bg-gray-500"
  }
}

[V0_FILE]typescriptreact:file="app/example-usage.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { GameMenuRenderer } from "@/components/game-menu-renderer"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent } from "@/components/ui/card"
import { Textarea } from "@/components/ui/textarea"
import {
  exampleFantasyLayout,
  exampleFantasyContent,
  exampleSciFiLayout,
  exampleSciFiContent,
  exampleApocalypseLayout,
  exampleApocalypseContent,
} from "@/lib/rpg-examples"
import { validateRPGLayout, validateRPGContent } from "@/lib/rpg-builder"
import { ComponentManager } from "@/components/component-manager"

export default function ExampleUsage() {
  // Default to fantasy theme
  const [layoutJson, setLayoutJson] = useState(JSON.stringify(exampleFantasyLayout, null, 2))
  const [contentJson, setContentJson] = useState(JSON.stringify(exampleFantasyContent, null, 2))
  const [parsedLayout, setParsedLayout] = useState(exampleFantasyLayout)
  const [parsedContent, setParsedContent] = useState(exampleFantasyContent)
  const [error, setError] = useState("")
  const [activeTab, setActiveTab] = useState("editor")

const handleRender = () => {
    try {
      const newLayout = JSON.parse(layoutJson)
      const newContent = JSON.parse(contentJson)

// Validate the layout and content
      const layoutValidation = validateRPGLayout(newLayout)
      const contentValidation = validateRPGContent(newContent)

if (!layoutValidation.valid) {
        setError(`Layout validation failed: ${layoutValidation.errors.join(", ")}`)
        return
      }

if (!contentValidation.valid) {
        setError(`Content validation failed: ${contentValidation.errors.join(", ")}`)
        return
      }

setParsedLayout(newLayout)
      setParsedContent(newContent)
      setError("")
    } catch (e) {
      setError(`JSON parsing error: ${e.message}`)
    }
  }

const loadPreset = (preset: "fantasy" | "scifi" | "apocalypse") => {
    switch (preset) {
      case "fantasy":
        setLayoutJson(JSON.stringify(exampleFantasyLayout, null, 2))
        setContentJson(JSON.stringify(exampleFantasyContent, null, 2))
        setParsedLayout(exampleFantasyLayout)
        setParsedContent(exampleFantasyContent)
        break
      case "scifi":
        setLayoutJson(JSON.stringify(exampleSciFiLayout, null, 2))
        setContentJson(JSON.stringify(exampleSciFiContent, null, 2))
        setParsedLayout(exampleSciFiLayout)
        setParsedContent(exampleSciFiContent)
        break
      case "apocalypse":
        setLayoutJson(JSON.stringify(exampleApocalypseLayout, null, 2))
        setContentJson(JSON.stringify(exampleApocalypseContent, null, 2))
        setParsedLayout(exampleApocalypseLayout)
        setParsedContent(exampleApocalypseContent)
        break
    }
    setError("")
  }

// Example of using a custom component
  const addCustomComponentExample = () => {
    try {
      const content = JSON.parse(contentJson)

// Add a custom StatBar component to the stats array
      content.tabContents.status.stats = [
        ...content.tabContents.status.stats,
        {
          componentId: "StatBar",
          props: {
            title: "Custom Stat",
            icon: ["lucide", "Heart"],
            current: 75,
            max: 100,
            color: "bg-purple-600",
          },
        },
      ]

setContentJson(JSON.stringify(content, null, 2))
    } catch (e) {
      setError(`Failed to add custom component: ${e.message}`)
    }
  }

return (
    <div className="container mx-auto p-4">
      <h1 className="text-3xl font-bold mb-6">RPG Game Menu Builder</h1>

<Tabs value={activeTab} onValueChange={setActiveTab} className="mb-6">
        <TabsList>
          <TabsTrigger value="editor">Editor</TabsTrigger>
          <TabsTrigger value="components">Component Manager</TabsTrigger>
        </TabsList>

<TabsContent value="editor">
          <div className="flex gap-4 mb-6">
            <Button onClick={() => loadPreset("fantasy")}>Fantasy Theme</Button>
            <Button onClick={() => loadPreset("scifi")}>Sci-Fi Theme</Button>
            <Button onClick={() => loadPreset("apocalypse")}>Post-Apocalyptic Theme</Button>
            <Button onClick={addCustomComponentExample} variant="outline">
              Add Component Example
            </Button>
          </div>

<div className="grid grid-cols-1 lg:grid-cols-1 gap-6 mb-6">
            <Card>
              <CardContent className="p-4">
                <Tabs defaultValue="layout">
                  <TabsList className="mb-4">
                    <TabsTrigger value="layout">Layout JSON</TabsTrigger>
                    <TabsTrigger value="content">Content JSON</TabsTrigger>
                  </TabsList>

<TabsContent value="layout">
                    <Textarea
                      className="font-mono h-[400px] mb-4"
                      value={layoutJson}
                      onChange={(e) => setLayoutJson(e.target.value)}
                    />
                  </TabsContent>

<TabsContent value="content">
                    <Textarea
                      className="font-mono h-[400px] mb-4"
                      value={contentJson}
                      onChange={(e) => setContentJson(e.target.value)}
                    />
                  </TabsContent>
                </Tabs>

<div className="flex justify-between items-center">
                  <Button onClick={handleRender}>Render Game Menu</Button>
                  {error && <p className="text-red-500 text-sm">{error}</p>}
                </div>
              </CardContent>
            </Card>

<Card className="border border-gray-200">
              <CardContent className="p-0 h-[600px] overflow-auto bg-gray-950">
                <div className="border-b border-gray-800 p-2 bg-gray-900 text-sm font-medium text-white">Preview</div>
                <div className="p-0">
                  <GameMenuRenderer layout={parsedLayout} content={parsedContent} />
                </div>
              </CardContent>
            </Card>
          </div>

<Card>
            <CardContent className="p-4">
              <h2 className="text-xl font-bold mb-4">Using Custom Components</h2>
              <p className="mb-4">
                You can now use custom components in your RPG UI by adding component references to your JSON:
              </p>

<pre className="bg-gray-100 p-3 rounded text-sm mb-4 overflow-auto">
                {`// Example of using a custom component in your content JSON
{
  "componentId": "StatBar",
  "props": {
    "title": "Custom Stat",
    "icon": ["lucide", "Heart"],
    "current": 75,
    "max": 100,
    "color": "bg-purple-600"
  }
}`}
              </pre>

<p className="mb-2">
                Create your own components in the Component Manager tab, then reference them in your JSON.
              </p>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="components">
          <ComponentManager />
        </TabsContent>
      </Tabs>
    </div>
  )
}

[V0_FILE]json:file="package.json" isFixed="true" isQuickEdit="true" isMerged="true"
{
  "name": "rpg-ui-builder",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "framer-motion": "^10.16.4",
    "lucide-react": "^0.292.0",
    "next": "14.0.3",
    "react": "^18",
    "react-dom": "^18",
    "sucrase": "^3.34.0"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.3",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}

[V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true"
import type * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        outline: "text-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
)

export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
}

export { Badge, badgeVariants }

[V0_FILE]typescriptreact:file="components/party-tab-renderer.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Users, User, Heart, Zap, Brain, Quote, Target, MessageCircle } from "lucide-react"
import type { PartyTabLayout, PartyTabContent, RPGTheme } from "@/lib/rpg-types"
import { isComponentReference } from "@/lib/component-registry"
import { DynamicComponentRenderer } from "./dynamic-component-renderer"

interface PartyTabRendererProps {
  layout: PartyTabLayout
  content: PartyTabContent
  theme: RPGTheme
}

export function PartyTabRenderer({ layout, content, theme }: PartyTabRendererProps) {
  const [selectedMemberId, setSelectedMemberId] = useState<string | null>(
    content.selectedMember && !isComponentReference(content.selectedMember)
      ? content.selectedMember.id
      : content.members.length > 0 && !isComponentReference(content.members[0])
        ? content.members[0].id
        : null,
  )

// Find the selected member from the members array
  const selectedMember = content.members.find(
    (member) => !isComponentReference(member) && member.id === selectedMemberId,
  )

// Handle member selection
  const handleSelectMember = (id: string) => {
    setSelectedMemberId(id)
  }

return (
    <motion.div
      className="p-6 text-gray-300"
      layout
      transition={{
        layout: { duration: 0.3, ease: "easeOut" },
        height: { duration: 0.3, ease: "easeOut" },
      }}
    >
      <motion.div
        className="grid grid-cols-1 md:grid-cols-3 gap-6"
        layout
        transition={{
          layout: { duration: 0.3, ease: "easeOut" },
          height: { duration: 0.3, ease: "easeOut" },
        }}
      >
        {/* Party Members List */}
        <motion.div
          className="md:col-span-1"
          layout
          transition={{
            layout: { duration: 0.3, ease: "easeOut" },
            height: { duration: 0.3, ease: "easeOut" },
          }}
        >
          <h3 className="text-lg font-semibold text-white mb-4 flex items-center">
            <Users className="w-5 h-5 mr-2" />
            {layout.sections.members.title}
          </h3>

<ScrollArea className="h-[500px] pr-4">
            <div className="space-y-3">
              {content.members.map((member, index) => {
                if (isComponentReference(member)) {
                  return <DynamicComponentRenderer key={index} componentRef={member} />
                }

return (
                  <PartyMemberCard
                    key={member.id}
                    member={member}
                    isSelected={member.id === selectedMemberId}
                    onSelect={handleSelectMember}
                    theme={theme}
                  />
                )
              })}
            </div>
          </ScrollArea>
        </motion.div>

{/* Party Member Details */}
        <motion.div
          className="md:col-span-2"
          layout
          transition={{
            layout: { duration: 0.3, ease: "easeOut" },
            height: { duration: 0.3, ease: "easeOut" },
          }}
        >
          <h3 className="text-lg font-semibold text-white mb-4 flex items-center">
            <User className="w-5 h-5 mr-2" />
            {layout.sections.details.title}
          </h3>

<AnimatePresence mode="wait">
            {content.selectedMember &&
              !isComponentReference(content.selectedMember) &&
              selectedMemberId === content.selectedMember.id && (
                <motion.div
                  key={content.selectedMember.id}
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -10 }}
                  transition={{ duration: 0.2 }}
                >
                  <PartyMemberDetails member={content.selectedMember} theme={theme} />
                </motion.div>
              )}

{(!content.selectedMember ||
              (content.selectedMember &&
                !isComponentReference(content.selectedMember) &&
                selectedMemberId !== content.selectedMember.id)) && (
              <motion.div
                className="bg-gray-900/50 rounded-lg p-6 border border-gray-800 flex items-center justify-center h-[500px]"
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ duration: 0.2 }}
              >
                <p className="text-gray-500">
                  {content.members.length > 0
                    ? "Select a party member to view their details"
                    : "No party members available"}
                </p>
              </motion.div>
            )}
          </AnimatePresence>
        </motion.div>
      </motion.div>
    </motion.div>
  )
}

// Party Member Card Component
function PartyMemberCard({ member, isSelected, onSelect, theme }) {
  return (
    <motion.div
      className={`bg-gray-900/50 rounded-lg border p-3 cursor-pointer ${
        isSelected ? "border-purple-500 bg-purple-900/20" : "border-gray-800 hover:border-gray-700"
      }`}
      whileHover={{ scale: 1.02 }}
      transition={{ duration: 0.2 }}
      onClick={() => onSelect(member.id)}
      layout
    >
      <div className="flex items-center">
        <div className="relative mr-3">
          <div className="w-12 h-12 rounded-full overflow-hidden">
            <img
              src={member.portrait || "/placeholder.svg?height=48&width=48"}
              alt={member.name}
              className="w-full h-full object-cover"
            />
          </div>
          <div className="absolute -bottom-1 -right-1 bg-gray-900 rounded-full border border-gray-700 px-1 text-xs">
            {member.level}
          </div>
        </div>
        <div className="flex-1">
          <h4 className="text-white font-medium">{member.name}</h4>
          <div className="flex items-center">
            <span className="text-xs text-gray-400">{member.class}</span>
          </div>
          <p className="text-xs text-gray-500 mt-1 line-clamp-1">{member.tagline}</p>
        </div>
      </div>
    </motion.div>
  )
}

// Party Member Details Component
function PartyMemberDetails({ member, theme }) {
  return (
    <div className="bg-gray-900/50 rounded-lg border border-gray-800 overflow-hidden">
      {/* Header with portrait and basic info */}
      <div
        className="p-4 border-b border-gray-800 flex flex-col md:flex-row items-center md:items-start gap-4"
        style={{
          background: `linear-gradient(to right, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.7))`,
        }}
      >
        <div className="relative">
          <div className="w-24 h-24 md:w-32 md:h-32 rounded-lg overflow-hidden border-2 border-gray-700">
            <img
              src={member.portrait || "/placeholder.svg?height=128&width=128"}
              alt={member.fullName}
              className="w-full h-full object-cover"
            />
          </div>
        </div>

<div className="flex-1 text-center md:text-left">
          <h2 className="text-xl md:text-2xl font-bold text-white">{member.fullName}</h2>
          <div className="flex flex-wrap gap-2 justify-center md:justify-start mt-2">
            <Badge variant="outline" className="bg-blue-900/30 text-blue-300 border-blue-800">
              {member.race}
            </Badge>
            <Badge variant="outline" className="bg-purple-900/30 text-purple-300 border-purple-800">
              {member.class}
            </Badge>
            <Badge variant="outline" className="bg-amber-900/30 text-amber-300 border-amber-800">
              Level {member.level}
            </Badge>
          </div>
          <p className="mt-2 text-sm text-gray-400">
            {member.age} years old • {member.gender}
          </p>
        </div>

{member.fullImage && (
          <div className="hidden lg:block">
            <div className="w-24 h-36 rounded overflow-hidden">
              <img
                src={member.fullImage || "/placeholder.svg?height=144&width=96"}
                alt={`${member.fullName} full`}
                className="w-full h-full object-cover"
              />
            </div>
          </div>
        )}
      </div>

{/* Tabs for different sections of character details */}
      <Tabs defaultValue="personality" className="p-4">
        <TabsList className="grid grid-cols-4 mb-4">
          <TabsTrigger value="personality" className="text-xs">
            <Heart className="w-3 h-3 mr-1" />
            <span className="hidden sm:inline">Personality</span>
          </TabsTrigger>
          <TabsTrigger value="background" className="text-xs">
            <Zap className="w-3 h-3 mr-1" />
            <span className="hidden sm:inline">Background</span>
          </TabsTrigger>
          <TabsTrigger value="abilities" className="text-xs">
            <Brain className="w-3 h-3 mr-1" />
            <span className="hidden sm:inline">Abilities</span>
          </TabsTrigger>
          <TabsTrigger value="roleplay" className="text-xs">
            <Quote className="w-3 h-3 mr-1" />
            <span className="hidden sm:inline">Roleplay</span>
          </TabsTrigger>
        </TabsList>

<ScrollArea className="h-[350px] pr-4">
          <TabsContent value="personality" className="mt-0">
            <div className="space-y-4">
              <div>
                <h3 className="text-sm font-semibold text-white mb-2">Personality</h3>
                <p className="text-sm text-gray-400">{member.personality.description}</p>
              </div>

<div className="grid grid-cols-2 gap-4">
                <div>
                  <h3 className="text-sm font-semibold text-white mb-2">Traits</h3>
                  <div className="flex flex-wrap gap-2">
                    {member.personality.traits.map((trait, index) => (
                      <Badge key={index} variant="outline" className="bg-gray-800 text-gray-300">
                        {trait}
                      </Badge>
                    ))}
                  </div>
                </div>
                <div>
                  <h3 className="text-sm font-semibold text-white mb-2">Alignment</h3>
                  <Badge variant="outline" className="bg-gray-800 text-gray-300">
                    {member.personality.alignment}
                  </Badge>
                </div>
              </div>

<div className="grid grid-cols-2 gap-4">
                <div>
                  <h3 className="text-sm font-semibold text-white mb-2">Likes</h3>
                  <ul className="list-disc pl-5 text-sm text-gray-400">
                    {member.personality.likes.map((like, index) => (
                      <li key={index}>{like}</li>
                    ))}
                  </ul>
                </div>
                <div>
                  <h3 className="text-sm font-semibold text-white mb-2">Dislikes</h3>
                  <ul className="list-disc pl-5 text-sm text-gray-400">
                    {member.personality.dislikes.map((dislike, index) => (
                      <li key={index}>{dislike}</li>
                    ))}
                  </ul>
                </div>
              </div>
            </div>
          </TabsContent>

<TabsContent value="background" className="mt-0">
            <div className="space-y-4">
              <div>
                <h3 className="text-sm font-semibold text-white mb-2">Background</h3>
                <p className="text-sm text-gray-400 whitespace-pre-line">{member.background}</p>
              </div>

<div>
                <h3 className="text-sm font-semibold text-white mb-2">Goals</h3>
                <ul className="list-disc pl-5 text-sm text-gray-400">
                  {member.goals.map((goal, index) => (
                    <li key={index}>{goal}</li>
                  ))}
                </ul>
              </div>

<div>
                <h3 className="text-sm font-semibold text-white mb-2">Relationships</h3>
                <div className="space-y-2">
                  {member.relationships.map((relationship, index) => (
                    <div key={index} className="bg-gray-800/50 p-2 rounded border border-gray-700">
                      <div className="flex justify-between">
                        <span className="text-sm font-medium text-white">{relationship.name}</span>
                        <Badge variant="outline" className="text-xs">
                          {relationship.type}
                        </Badge>
                      </div>
                      <p className="text-xs text-gray-400 mt-1">{relationship.description}</p>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </TabsContent>

<TabsContent value="abilities" className="mt-0">
            <div className="space-y-4">
              <div>
                <h3 className="text-sm font-semibold text-white mb-2">Special Abilities</h3>
                <div className="space-y-3">
                  {member.abilities.map((ability, index) => (
                    <div key={index} className="bg-gray-800/50 p-3 rounded border border-gray-700">
                      <div className="flex items-center justify-between">
                        <h4 className="text-sm font-medium text-white flex items-center">
                          <Target className="w-3 h-3 mr-1 text-blue-400" />
                          {ability.name}
                        </h4>
                        <Badge variant="outline" className="text-xs bg-blue-900/20 text-blue-300 border-blue-800">
                          {ability.type}
                        </Badge>
                      </div>
                      <p className="text-xs text-gray-400 mt-1">{ability.description}</p>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </TabsContent>

<TabsContent value="roleplay" className="mt-0">
            <div className="space-y-4">
              <div>
                <h3 className="text-sm font-semibold text-white mb-2 flex items-center">
                  <MessageCircle className="w-4 h-4 mr-1" />
                  Speech Patterns
                </h3>
                <p className="text-sm text-gray-400 bg-gray-800/50 p-3 rounded border border-gray-700">
                  {member.speechPatterns}
                </p>
              </div>

<div>
                <h3 className="text-sm font-semibold text-white mb-2">Notable Quotes</h3>
                <div className="space-y-2">
                  {member.quotes.map((quote, index) => (
                    <div key={index} className="bg-gray-800/50 p-3 rounded border border-gray-700">
                      <p className="text-sm text-gray-300 italic">"{quote}"</p>
                    </div>
                  ))}
                </div>
              </div>

<div>
                <h3 className="text-sm font-semibold text-white mb-2">Roleplay Notes</h3>
                <p className="text-sm text-gray-400 bg-gray-800/50 p-3 rounded border border-gray-700 whitespace-pre-line">
                  {member.roleplayNotes}
                </p>
              </div>
            </div>
          </TabsContent>
        </ScrollArea>
      </Tabs>
    </div>
  )
}

[V0_FILE]typescriptreact:file="lib/rpg-builder.ts" isEdit="true" isQuickEdit="true"
/**
 * RPG UI Builder - Helper Functions
 *
 * This file contains utility functions to help create and manage
 * RPG game UI configurations.
 */

import type {
  RPGLayoutType,
  RPGContentType,
  RPGTheme,
  TabConfig,
  StatusTabLayout,
  EquipmentTabLayout,
  InventoryTabLayout,
  StatusTabContent,
  EquipmentTabContent,
  InventoryTabContent,
  ItemRarity,
  StatType,
  EquipmentStatType,
  PartyTabLayout,
  PartyTabContent,
} from "./rpg-types"

/**
 * Creates a default RPG theme with customizable colors
 *
 * @param options - Optional theme customization options
 * @returns A complete RPGTheme object
 *
 * @example
 * \`\`\`ts
 * // Create a theme with default values
 * const defaultTheme = createRPGTheme();
 *
 * // Create a theme with custom primary colors
 * const customTheme = createRPGTheme({
 *   primaryStart: "#6d28d9",
 *   primaryEnd: "#1e3a8a"
 * });
 * \`\`\`
 */
export function createRPGTheme(options?: {
  primaryStart?: string
  primaryEnd?: string
  accentColor?: string
  levelBadgeColor?: string
}): RPGTheme {
  return {
    primaryGradientStart: options?.primaryStart || "rgba(76, 29, 149, 0.5)",
    primaryGradientEnd: options?.primaryEnd || "rgba(30, 58, 138, 0.5)",
    tabIndicatorColor: options?.accentColor || "#a855f7",
    levelBadgeBg: options?.levelBadgeColor ? `${options.levelBadgeColor}30` : "rgba(202, 138, 4, 0.3)",
    levelBadgeBorder: options?.levelBadgeColor ? `${options.levelBadgeColor}50` : "rgba(202, 138, 4, 0.5)",
    levelBadgeText: options?.levelBadgeColor || "#fde047",
    healthBarColor: "bg-red-600",
    manaBarColor: "bg-blue-600",
    experienceBarColor: "bg-yellow-600",
    rarityColors: {
      common: "text-gray-300",
      uncommon: "text-green-400",
      rare: "text-blue-400",
      epic: "text-purple-400",
      legendary: "text-yellow-400",
    },
    rarityBorders: {
      common: "border-gray-600 bg-gray-800",
      uncommon: "border-green-600/50 bg-green-900/20",
      rare: "border-blue-600/50 bg-blue-900/20",
      epic: "border-purple-600/50 bg-purple-900/20",
      legendary: "border-yellow-600/50 bg-yellow-900/20",
    },
  }
}

/**
 * Creates a default tab configuration
 *
 * @returns An array of default tabs
 *
 * @example
 * \`\`\`ts
 * const defaultTabs = createDefaultTabs();
 * \`\`\`
 */
export function createDefaultTabs(): TabConfig[] {
  return [
    { id: "status", label: "Status" },
    { id: "equipment", label: "Equipment" },
    { id: "inventory", label: "Inventory" },
    { id: "party", label: "Party" },
  ]
}

/**
 * Creates a custom tab configuration
 *
 * @param tabs - Array of tab configurations
 * @returns An array of custom tabs
 *
 * @example
 * \`\`\`ts
 * const customTabs = createCustomTabs([
 *   { id: "status", label: "Character" },
 *   { id: "equipment", label: "Gear" },
 *   { id: "inventory", label: "Backpack" },
 *   { id: "quests", label: "Quests" }
 * ]);
 * \`\`\`
 */
export function createCustomTabs(tabs: TabConfig[]): TabConfig[] {
  return tabs
}

/**
 * Creates a default status tab layout
 *
 * @param options - Optional custom section titles
 * @returns A StatusTabLayout object
 *
 * @example
 * \`\`\`ts
 * // Default section titles
 * const defaultLayout = createStatusTabLayout();
 *
 * // Custom section titles
 * const customLayout = createStatusTabLayout({
 *   statsTitle: "Vitals",
 *   attributesTitle: "Character Attributes",
 *   effectsTitle: "Buffs & Debuffs",
 *   skillsTitle: "Abilities"
 * });
 * \`\`\`
 */
export function createStatusTabLayout(options?: {
  statsTitle?: string
  attributesTitle?: string
  effectsTitle?: string
  skillsTitle?: string
}): StatusTabLayout {
  return {
    sections: {
      stats: { title: options?.statsTitle || "Character Stats" },
      attributes: { title: options?.attributesTitle || "Attributes" },
      effects: { title: options?.effectsTitle || "Active Effects" },
      skills: { title: options?.skillsTitle || "Skills" },
    },
  }
}

/**
 * Creates a default equipment tab layout
 *
 * @param options - Optional custom section titles
 * @returns An EquipmentTabLayout object
 *
 * @example
 * \`\`\`ts
 * // Default section titles
 * const defaultLayout = createEquipmentTabLayout();
 *
 * // Custom section titles
 * const customLayout = createEquipmentTabLayout({
 *   equippedTitle: "Worn Items",
 *   statsTitle: "Combat Stats",
 *   resistancesTitle: "Elemental Resistances"
 * });
 * \`\`\`
 */
export function createEquipmentTabLayout(options?: {
  equippedTitle?: string
  statsTitle?: string
  resistancesTitle?: string
}): EquipmentTabLayout {
  return {
    sections: {
      equipped: { title: options?.equippedTitle || "Equipped Items" },
      stats: { title: options?.statsTitle || "Equipment Stats" },
      resistances: { title: options?.resistancesTitle || "Resistances" },
    },
  }
}

/**
 * Creates a default inventory tab layout
 *
 * @param options - Optional custom section titles
 * @returns An InventoryTabLayout object
 *
 * @example
 * \`\`\`ts
 * // Default section titles
 * const defaultLayout = createInventoryTabLayout();
 *
 * // Custom section titles
 * const customLayout = createInventoryTabLayout({
 *   inventoryTitle: "Backpack",
 *   itemDetailsTitle: "Selected Item"
 * });
 * \`\`\`
 */
export function createInventoryTabLayout(options?: {
  inventoryTitle?: string
  itemDetailsTitle?: string
}): InventoryTabLayout {
  return {
    sections: {
      inventory: { title: options?.inventoryTitle || "Inventory" },
      itemDetails: { title: options?.itemDetailsTitle || "Item Details" },
    },
  }
}

/**
 * Creates a default party tab layout
 *
 * @param options - Optional custom section titles
 * @returns A PartyTabLayout object
 *
 * @example
 * \`\`\`ts
 * // Default section titles
 * const defaultLayout = createPartyTabLayout();
 *
 * // Custom section titles
 * const customLayout = createPartyTabLayout({
 *   membersTitle: "Companions",
 *   detailsTitle: "Character Profile"
 * });
 * \`\`\`
 */
export function createPartyTabLayout(options?: {
  membersTitle?: string
  detailsTitle?: string
}): PartyTabLayout {
  return {
    sections: {
      members: { title: options?.membersTitle || "Party Members" },
      details: { title: options?.detailsTitle || "Character Details" },
    },
  }
}

/**
 * Creates a complete RPG layout configuration
 *
 * @param options - Layout configuration options
 * @returns A complete RPGLayoutType object
 *
 * @example
 * \`\`\`ts
 * // Create a layout with default settings
 * const defaultLayout = createRPGLayout();
 *
 * // Create a layout with custom theme and tabs
 * const customLayout = createRPGLayout({
 *   theme: myCustomTheme,
 *   tabs: myCustomTabs,
 *   defaultTab: "inventory"
 * });
 * \`\`\`
 */
export function createRPGLayout(options?: {
  theme?: RPGTheme
  tabs?: TabConfig[]
  defaultTab?: string
  statusLayout?: StatusTabLayout
  equipmentLayout?: EquipmentTabLayout
  inventoryLayout?: InventoryTabLayout
  partyLayout?: PartyTabLayout
}): RPGLayoutType {
  return {
    theme: options?.theme || createRPGTheme(),
    defaultTab: options?.defaultTab || "status",
    tabs: options?.tabs || createDefaultTabs(),
    tabLayouts: {
      status: options?.statusLayout || createStatusTabLayout(),
      equipment: options?.equipmentLayout || createEquipmentTabLayout(),
      inventory: options?.inventoryLayout || createInventoryTabLayout(),
      party: options?.partyLayout || createPartyTabLayout(),
    },
  }
}

/**
 * Creates a character stat object
 *
 * @param type - Type of stat (health, mana, experience)
 * @param label - Display label for the stat
 * @param current - Current value
 * @param max - Maximum value
 * @returns A stat object
 *
 * @example
 * \`\`\`ts
 * const healthStat = createCharacterStat("health", "Health", 85, 100);
 * const manaStat = createCharacterStat("mana", "Mana", 65, 100);
 * \`\`\`
 */
export function createCharacterStat(type: StatType, label: string, current: number, max: number) {
  return { type, label, current, max }
}

/**
 * Creates an attribute object
 *
 * @param name - Name of the attribute
 * @param value - Value of the attribute
 * @returns An attribute object
 *
 * @example
 * \`\`\`ts
 * const strength = createAttribute("Strength", 42);
 * const dexterity = createAttribute("Dexterity", 38);
 * \`\`\`
 */
export function createAttribute(name: string, value: number) {
  return { name, value }
}

/**
 * Creates an effect object
 *
 * @param name - Name of the effect
 * @param description - Description of what the effect does
 * @param duration - Duration string (e.g., "30:42")
 * @param icon - Icon URL
 * @returns an effect object
 *
 * @example
 * \`\`\`ts
 * const effect = createEffect(
 *   "Blessing of Light",
 *   "Increases holy damage by 15%",
 *   "30:42",
 *   "/icons/blessing.png"
 * );
 * \`\`\`
 */
export function createEffect(name: string, description: string, duration: string, icon: string) {
  return { name, description, duration, icon }
}

/**
 * Creates a skill object
 *
 * @param name - Name of the skill
 * @param level - Current level
 * @param maxLevel - Maximum level
 * @returns A skill object
 *
 * @example
 * \`\`\`ts
 * const swordsmanship = createSkill("Swordsmanship", 7, 10);
 * \`\`\`
 */
export function createSkill(name: string, level: number, maxLevel: number) {
  return { name, level, maxLevel }
}

/**
 * Creates a status tab content object
 *
 * @param stats - Array of character stats
 * @param attributes - Array of attributes
 * @param effects - Array of active effects
 * @param skills - Array of skills
 * @returns A StatusTabContent object
 *
 * @example
 * \`\`\`ts
 * const statusContent = createStatusTabContent(
 *   [healthStat, manaStat, expStat],
 *   [strength, dexterity, intelligence],
 *   [blessing, wellFed],
 *   [swordsmanship, archery]
 * );
 * \`\`\`
 */
export function createStatusTabContent(
  stats: StatusTabContent["stats"],
  attributes: StatusTabContent["attributes"],
  effects: StatusTabContent["effects"],
  skills: StatusTabContent["skills"],
): StatusTabContent {
  return {
    stats,
    attributes,
    effects,
    skills,
  }
}

/**
 * Creates an equipped item object
 *
 * @param slot - Equipment slot
 * @param name - Item name
 * @param rarity - Item rarity
 * @param stats - Array of stat strings
 * @param image - Image URL
 * @returns An equipped item object
 *
 * @example
 * \`\`\`ts
 * const sword = createEquippedItem(
 *   "Weapon",
 *   "Dragonslayer Sword",
 *   "Epic",
 *   ["Damage: 120-150", "Critical: +15%"],
 *   "/items/sword.png"
 * );
 * \`\`\`
 */
export function createEquippedItem(slot: string, name: string, rarity: ItemRarity, stats: string[], image: string) {
  return { slot, name, rarity, stats, image }
}

/**
 * Creates an equipment stat object
 *
 * @param type - Type of stat
 * @param label - Display label
 * @param value - Value (as string to allow for percentages)
 * @returns An equipment stat object
 *
 * @example
 * \`\`\`ts
 * const attackStat = createEquipmentStat("attack", "Attack Power", "450");
 * const critStat = createEquipmentStat("critical", "Critical Rate", "25%");
 * \`\`\`
 */
export function createEquipmentStat(type: EquipmentStatType, label: string, value: string) {
  return { type, label, value }
}

/**
 * Creates a resistance object
 *
 * @param type - Type of resistance
 * @param value - Value (as string to allow for percentages)
 * @returns A resistance object
 *
 * @example
 * \`\`\`ts
 * const fireResist = createResistance("Fire", "65%");
 * \`\`\`
 */
export function createResistance(type: string, value: string) {
  return { type, value }
}

/**
 * Creates an equipment tab content object
 *
 * @param equippedItems - Array of equipped items
 * @param equipmentStats - Array of equipment stats
 * @param resistances - Array of resistances
 * @returns An EquipmentTabContent object
 *
 * @example
 * \`\`\`ts
 * const equipmentContent = createEquipmentTabContent(
 *   [sword, shield, helmet],
 *   [attackStat, defenseStat],
 *   [fireResist, iceResist]
 * );
 * \`\`\`
 */
export function createEquipmentTabContent(
  equippedItems: EquipmentTabContent["equippedItems"],
  equipmentStats: EquipmentTabContent["equipmentStats"],
  resistances: EquipmentTabContent["resistances"],
): EquipmentTabContent {
  return {
    equippedItems,
    equipmentStats,
    resistances,
  }
}

/**
 * Creates a currency object
 *
 * @param name - Currency name
 * @param amount - Amount
 * @param icon - Icon URL
 * @param color - Display color
 * @returns A currency object
 *
 * @example
 * \`\`\`ts
 * const gold = createCurrency("Gold", 12450, "/icons/gold.png", "#fcd34d");
 * \`\`\`
 */
export function createCurrency(name: string, amount: number, icon: string, color: string) {
  return { name, amount, icon, color }
}

/**
 * Creates an inventory item object
 *
 * @param name - Item name
 * @param rarity - Item rarity
 * @param quantity - Quantity
 * @param image - Image URL
 * @returns An inventory item object
 *
 * @example
 * \`\`\`ts
 * const potion = createInventoryItem(
 *   "Health Potion",
 *   "Common",
 *   5,
 *   "/items/potion.png"
 * );
 * \`\`\`
 */
export function createInventoryItem(name: string, rarity: ItemRarity, quantity: number, image: string) {
  return { name, rarity, quantity, image }
}

/**
 * Creates an action button configuration
 *
 * @param label - Button label
 * @param bgColor - Background color
 * @param borderColor - Border color
 * @param textColor - Text color
 * @returns An action button configuration
 *
 * @example
 * \`\`\`ts
 * const useButton = createActionButton(
 *   "Use",
 *   "rgba(37, 99, 235, 0.3)",
 *   "rgba(37, 99, 235, 0.5)",
 *   "#93c5fd"
 * );
 * \`\`\`
 */
export function createActionButton(label: string, bgColor: string, borderColor: string, textColor: string) {
  return { label, bgColor, borderColor, textColor }
}

/**
 * Creates a selected item object
 *
 * @param name - Item name
 * @param rarity - Item rarity
 * @param description - Item description
 * @param image - Image URL
 * @param effects - Array of effect strings
 * @param actions - Array of action button configurations
 * @returns A selected item object
 *
 * @example
 * \`\`\`ts
 * const selectedItem = createSelectedItem(
 *   "Ancient Tome of Wisdom",
 *   "Legendary",
 *   "A mysterious book containing forgotten knowledge of the ancients.",
 *   "/items/tome.png",
 *   ["+15 Intelligence", "+10% Spell Critical Chance"],
 *   [useButton, sellButton]
 * );
 * \`\`\`
 */
export function createSelectedItem(
  name: string,
  rarity: ItemRarity,
  description: string,
  image: string,
  effects: string[],
  actions: InventoryTabContent["selectedItem"]["actions"],
) {
  return { name, rarity, description, image, effects, actions }
}

/**
 * Creates an inventory tab content object
 *
 * @param inventoryUsed - Number of used inventory slots
 * @param inventoryCapacity - Total inventory capacity
 * @param currencies - Array of currencies
 * @param items - Array of inventory items
 * @param selectedItem - Selected item configuration
 * @returns An InventoryTabContent object
 *
 * @example
 * \`\`\`ts
 * const inventoryContent = createInventoryTabContent(
 *   24,
 *   40,
 *   [gold, gems],
 *   [potion, scroll, gem],
 *   selectedItem
 * );
 * \`\`\`
 */
export function createInventoryTabContent(
  inventoryUsed: number,
  inventoryCapacity: number,
  currencies: InventoryTabContent["currencies"],
  items: InventoryTabContent["items"],
  selectedItem: InventoryTabContent["selectedItem"],
): InventoryTabContent {
  return {
    inventoryUsed,
    inventoryCapacity,
    currencies,
    items,
    selectedItem,
  }
}

/**
 * Creates a party member object
 *
 * @param id - Unique identifier for the party member
 * @param name - Name of the party member
 * @param characterClass - Class or role of the party member
 * @param level - Level of the party member
 * @param portrait - Portrait image URL
 * @param tagline - Short description or tagline
 * @returns A party member object
 *
 * @example
 * \`\`\`ts
 * const partyMember = createPartyMember(
 *   "thalia",
 *   "Thalia",
 *   "Mage",
 *   12,
 *   "/portraits/thalia.png",
 *   "Master of arcane mysteries"
 * );
 * \`\`\`
 */
export function createPartyMember(
  id: string,
  name: string,
  characterClass: string,
  level: number,
  portrait: string,
  tagline: string,
) {
  return { id, name, class: characterClass, level, portrait, tagline }
}

/**
 * Creates a party member details object
 *
 * @param id - Unique identifier matching a party member
 * @param fullName - Full name of the party member
 * @param characterClass - Class or role
 * @param race - Race or species
 * @param age - Age in years
 * @param gender - Gender
 * @param level - Level
 * @param portrait - Portrait image URL
 * @param personality - Personality traits object
 * @param background - Background story
 * @param goals - Array of goals or motivations
 * @param relationships - Array of relationships
 * @param quotes - Array of notable quotes
 * @param abilities - Array of special abilities
 * @param roleplayNotes - Additional roleplay notes
 * @param speechPatterns - Speech patterns or voice notes
 * @param fullImage - Optional full body image URL
 * @returns A party member details object
 */
export function createPartyMemberDetails(
  id: string,
  fullName: string,
  characterClass: string,
  race: string,
  age: number,
  gender: string,
  level: number,
  portrait: string,
  personality: {
    description: string
    traits: string[]
    alignment: string
    likes: string[]
    dislikes: string[]
  },
  background: string,
  goals: string[],
  relationships: Array<{
    name: string
    type: string
    description: string
  }>,
  quotes: string[],
  abilities: Array<{
    name: string
    description: string
    type: string
  }>,
  roleplayNotes: string,
  speechPatterns: string,
  fullImage?: string,
) {
  return {
    id,
    fullName,
    class: characterClass,
    race,
    age,
    gender,
    level,
    portrait,
    fullImage,
    personality,
    background,
    goals,
    relationships,
    quotes,
    abilities,
    roleplayNotes,
    speechPatterns,
  }
}

/**
 * Creates a party tab content object
 *
 * @param members - Array of party members
 * @param selectedMember - Selected party member details
 * @returns A PartyTabContent object
 *
 * @example
 * \`\`\`ts
 * const partyContent = createPartyTabContent(
 *   [member1, member2, member3],
 *   selectedMemberDetails
 * );
 * \`\`\`
 */
export function createPartyTabContent(
  members: PartyTabContent["members"],
  selectedMember: PartyTabContent["selectedMember"],
): PartyTabContent {
  return {
    members,
    selectedMember,
  }
}

/**
 * Creates a complete RPG content configuration
 *
 * @param characterName - Character name
 * @param characterLevel - Character level
 * @param statusContent - Status tab content
 * @param equipmentContent - Equipment tab content
 * @param inventoryContent - Inventory tab content
 * @param partyContent - Party tab content (optional)
 * @returns A complete RPGContentType object
 */
export function createRPGContent(
  characterName: string,
  characterLevel: number,
  statusContent: StatusTabContent,
  equipmentContent: EquipmentTabContent,
  inventoryContent: InventoryTabContent,
  partyContent?: PartyTabContent,
): RPGContentType {
  return {
    character: {
      name: characterName,
      level: characterLevel,
    },
    tabContents: {
      status: statusContent,
      equipment: equipmentContent,
      inventory: inventoryContent,
      party: partyContent || {
        members: [],
        selectedMember: undefined,
      },
    },
  }
}

/**
 * Validates an RPG layout configuration
 *
 * @param layout - The layout configuration to validate
 * @returns An object with validation result and any error messages
 *
 * @example
 * \`\`\`ts
 * const { valid, errors } = validateRPGLayout(myLayout);
 * if (!valid) {
 *   console.error("Layout validation failed:", errors);
 * }
 * \`\`\`
 */
export function validateRPGLayout(layout: RPGLayoutType): { valid: boolean; errors: string[] } {
  const errors: string[] = []

// Check theme
  if (!layout.theme) {
    errors.push("Layout must have a theme")
  }

// Check tabs
  if (!layout.tabs || !Array.isArray(layout.tabs) || layout.tabs.length === 0) {
    errors.push("Layout must have at least one tab")
  } else {
    // Check each tab has id and label
    layout.tabs.forEach((tab, index) => {
      if (!tab.id) errors.push(`Tab ${index} must have an id`)
      if (!tab.label) errors.push(`Tab ${index} must have a label`)
    })
  }

// Check tab layouts
  if (!layout.tabLayouts) {
    errors.push("Layout must have tabLayouts")
  } else {
    // Check required tab layouts
    if (!layout.tabLayouts.status) errors.push("Layout must have a status tab layout")
    if (!layout.tabLayouts.equipment) errors.push("Layout must have an equipment tab layout")
    if (!layout.tabLayouts.inventory) errors.push("Layout must have an inventory tab layout")
    if (!layout.tabLayouts.party) errors.push("Layout must have a party tab layout")
  }

// Check if defaultTab exists in tabs
  if (layout.defaultTab) {
    const tabIds = layout.tabs.map((tab) => tab.id)
    if (!tabIds.includes(layout.defaultTab)) {
      errors.push(`Default tab "${layout.defaultTab}" does not exist in tabs`)
    }
  }

return { valid: errors.length === 0, errors }
}

/**
 * Validates an RPG content configuration
 *
 * @param content - The content configuration to validate
 * @returns An object with validation result and any error messages
 *
 * @example
 * \`\`\`ts
 * const { valid, errors } = validateRPGContent(myContent);
 * if (!valid) {
 *   console.error("Content validation failed:", errors);
 * }
 * \`\`\`
 */
export function validateRPGContent(content: RPGContentType): { valid: boolean; errors: string[] } {
  const errors: string[] = []

// Check character
  if (!content.character) {
    errors.push("Content must have character information")
  } else {
    if (!content.character.name) errors.push("Character must have a name")
    if (content.character.level === undefined) errors.push("Character must have a level")
  }

// Check tab contents
  if (!content.tabContents) {
    errors.push("Content must have tabContents")
  } else {
    // Check required tab contents
    if (!content.tabContents.status) errors.push("Content must have status tab content")
    if (!content.tabContents.equipment) errors.push("Content must have equipment tab content")
    if (!content.tabContents.inventory) errors.push("Content must have inventory tab content")
    // Party tab content is optional
    if (content.tabContents.party === undefined) {
      content.tabContents.party = { members: [], selectedMember: undefined }
    }
  }

return { valid: errors.length === 0, errors }
}

/**
 * Creates a preset theme for a fantasy RPG
 *
 * @returns A fantasy-themed RPGTheme object
 *
 * @example
 * \`\`\`ts
 * const fantasyTheme = createFantasyTheme();
 * \`\`\`
 */
export function createFantasyTheme(): RPGTheme {
  return createRPGTheme({
    primaryStart: "rgba(76, 29, 149, 0.5)",
    primaryEnd: "rgba(30, 58, 138, 0.5)",
    accentColor: "#a855f7",
    levelBadgeColor: "#fde047",
  })
}

/**
 * Creates a preset theme for a sci-fi RPG
 *
 * @returns A sci-fi-themed RPGTheme object
 *
 * @example
 * \`\`\`ts
 * const scifiTheme = createSciFiTheme();
 * \`\`\`
 */
export function createSciFiTheme(): RPGTheme {
  const theme = createRPGTheme({
    primaryStart: "rgba(6, 182, 212, 0.5)",
    primaryEnd: "rgba(59, 130, 246, 0.5)",
    accentColor: "#22d3ee",
    levelBadgeColor: "#93c5fd",
  })

// Override some colors for sci-fi feel
  theme.healthBarColor = "bg-red-500"
  theme.manaBarColor = "bg-cyan-500"
  theme.experienceBarColor = "bg-blue-500"

return theme
}

/**
 * Creates a preset theme for a post-apocalyptic RPG
 *
 * @returns A post-apocalyptic-themed RPGTheme object
 *
 * @example
 * \`\`\`ts
 * const apocalypseTheme = createApocalypseTheme();
 * \`\`\`
 */
export function createApocalypseTheme(): RPGTheme {
  const theme = createRPGTheme({
    primaryStart: "rgba(120, 53, 15, 0.5)",
    primaryEnd: "rgba(63, 63, 70, 0.5)",
    accentColor: "#f97316",
    levelBadgeColor: "#d97706",
  })

// Override some colors for post-apocalyptic feel
  theme.healthBarColor = "bg-red-700"
  theme.manaBarColor = "bg-amber-600"
  theme.experienceBarColor = "bg-orange-600"

return theme
}

[V0_FILE]typescriptreact:file="components/game-menu-renderer.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import type { RPGLayoutType, RPGContentType } from "@/lib/rpg-types"
import { StatusTabRenderer } from "./status-tab-renderer"
import { EquipmentTabRenderer } from "./equipment-tab-renderer"
import { InventoryTabRenderer } from "./inventory-tab-renderer"
import { Sword, Backpack, User } from "lucide-react"
// Import the PartyTabRenderer
import { PartyTabRenderer } from "./party-tab-renderer"

interface GameMenuRendererProps {
  layout: RPGLayoutType
  content: RPGContentType
}

export function GameMenuRenderer({ layout, content }: GameMenuRendererProps) {
  const [selectedTab, setSelectedTab] = useState(layout.defaultTab || "status")

const handleTabChange = (value: string) => {
    setSelectedTab(value)
  }

// Get the theme from layout
  const theme = layout.theme

return (
    <div className="flex items-center justify-center min-h-[500px] bg-gradient-to-b from-gray-900 to-gray-950 p-4">
      <motion.div
        className="w-full max-w-4xl bg-black/60 backdrop-blur-sm border border-gray-800 rounded-lg shadow-lg"
        layout
        transition={{
          layout: { duration: 0.3, ease: "easeOut" },
        }}
      >
        {/* Character Header */}
        <div
          className="p-4 border-b border-gray-800"
          style={{
            background: `linear-gradient(to right, ${theme.primaryGradientStart}, ${theme.primaryGradientEnd})`,
          }}
        >
          <div className="flex items-center justify-between">
            <h2 className="text-xl font-bold text-white">{content.character.name}</h2>
            <span
              className="text-xs px-2 py-1 rounded-md border"
              style={{
                backgroundColor: theme.levelBadgeBg,
                borderColor: theme.levelBadgeBorder,
                color: theme.levelBadgeText,
              }}
            >
              Level {content.character.level}
            </span>
          </div>
        </div>

{/* Tabs */}
        <Tabs value={selectedTab} onValueChange={handleTabChange} className="w-full">
          <div className="border-b border-gray-800">
            <TabsList className="w-full h-14 bg-gray-900/50">
              {layout.tabs.map((tab) => (
                <TabsTrigger
                  key={tab.id}
                  value={tab.id}
                  className="flex-1 data-[state=active]:bg-gray-800/50 data-[state=active]:text-purple-300 relative"
                >
                  <motion.div layout transition={{ duration: 0.2 }} className="flex items-center justify-center">
                    {getTabIcon(tab.id)}
                    {tab.label}
                  </motion.div>
                  {selectedTab === tab.id && (
                    <motion.div
                      className="absolute bottom-0 left-0 right-0 h-0.5"
                      style={{ backgroundColor: theme.tabIndicatorColor }}
                      layoutId="activeTab"
                      transition={{ duration: 0.2 }}
                    />
                  )}
                </TabsTrigger>
              ))}
            </TabsList>
          </div>

<AnimatePresence mode="wait">
            {selectedTab === "status" && (
              <motion.div
                key="status"
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -10 }}
                transition={{ duration: 0.2 }}
              >
                <StatusTabRenderer
                  layout={layout.tabLayouts.status}
                  content={content.tabContents.status}
                  theme={theme}
                />
              </motion.div>
            )}

{selectedTab === "equipment" && (
              <motion.div
                key="equipment"
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -10 }}
                transition={{ duration: 0.2 }}
              >
                <EquipmentTabRenderer
                  layout={layout.tabLayouts.equipment}
                  content={content.tabContents.equipment}
                  theme={theme}
                />
              </motion.div>
            )}

{selectedTab === "inventory" && (
              <motion.div
                key="inventory"
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -10 }}
                transition={{ duration: 0.2 }}
              >
                <InventoryTabRenderer
                  layout={layout.tabLayouts.inventory}
                  content={content.tabContents.inventory}
                  theme={theme}
                />
              </motion.div>
            )}

{selectedTab === "party" && (
              <motion.div
                key="party"
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -10 }}
                transition={{ duration: 0.2 }}
              >
                {content.tabContents.party ? (
                  <PartyTabRenderer
                    layout={layout.tabLayouts.party}
                    content={content.tabContents.party}
                    theme={theme}
                  />
                ) : (
                  <div className="p-6 text-gray-300 flex items-center justify-center h-[500px]">
                    <p className="text-gray-500">Party information not available</p>
                  </div>
                )}
              </motion.div>
            )}
          </AnimatePresence>
        </Tabs>
      </motion.div>
    </div>
  )
}

// Helper function to get the appropriate icon for each tab
function getTabIcon(tabId: string) {
  switch (tabId) {
    case "status":
      return <User className="w-4 h-4 mr-2" />
    case "equipment":
      return <Sword className="w-4 h-4 mr-2" />
    case "inventory":
      return <Backpack className="w-4 h-4 mr-2" />
    default:
      return null
  }
}

[V0_FILE]typescript:file="lib/rpg-types.ts" isEdit="true" isQuickEdit="true"
/**
 * RPG UI Builder - Type Definitions
 *
 * This file contains all the TypeScript interfaces and types used for building
 * RPG game user interfaces with the JSON-based configuration system.
 */

import type { ComponentReference } from "./component-registry"

/**
 * The main configuration object for an RPG game UI.
 * Contains theme settings, tab configuration, and layouts for each tab.
 */
export interface RPGLayoutType {
  /** Theme settings for the entire UI */
  theme: RPGTheme
  /** The tab that should be selected by default when the UI loads */
  defaultTab?: string
  /** Array of tab configurations */
  tabs: TabConfig[]
  /** Layout configurations for each tab type */
  tabLayouts: {
    /** Layout for the character status tab */
    status: StatusTabLayout
    /** Layout for the equipment tab */
    equipment: EquipmentTabLayout
    /** Layout for the inventory tab */
    inventory: InventoryTabLayout
    /** Layout for the party tab */
    party: PartyTabLayout
  }
}

/**
 * Configuration for a single tab in the UI.
 */
export interface TabConfig {
  /** Unique identifier for the tab */
  id: string
  /** Display label for the tab */
  label: string
  /** Optional icon identifier (used by the getTabIcon function) */
  icon?: string
}

/**
 * Layout configuration for the Status tab.
 */
export interface StatusTabLayout {
  /** Section titles for different parts of the Status tab */
  sections: {
    /** Title for the character stats section (health, mana, etc.) */
    stats: { title: string }
    /** Title for the attributes section (strength, dexterity, etc.) */
    attributes: { title: string }
    /** Title for the active effects section */
    effects: { title: string }
    /** Title for the skills section */
    skills: { title: string }
  }
}

/**
 * Layout configuration for the Equipment tab.
 */
export interface EquipmentTabLayout {
  /** Section titles for different parts of the Equipment tab */
  sections: {
    /** Title for the equipped items section */
    equipped: { title: string }
    /** Title for the equipment stats section */
    stats: { title: string }
    /** Title for the resistances section */
    resistances: { title: string }
  }
}

/**
 * Layout configuration for the Inventory tab.
 */
export interface InventoryTabLayout {
  /** Section titles for different parts of the Inventory tab */
  sections: {
    /** Title for the inventory grid section */
    inventory: { title: string }
    /** Title for the selected item details section */
    itemDetails: { title: string }
  }
}

/**
 * Theme configuration for the RPG UI.
 * Controls colors, gradients, and visual styling.
 */
export interface RPGTheme {
  /** Starting color for the header gradient */
  primaryGradientStart: string
  /** Ending color for the header gradient */
  primaryGradientEnd: string
  /** Color of the active tab indicator */
  tabIndicatorColor: string
  /** Background color for the level badge */
  levelBadgeBg: string
  /** Border color for the level badge */
  levelBadgeBorder: string
  /** Text color for the level badge */
  levelBadgeText: string
  /** Color class for the health bar (Tailwind class) */
  healthBarColor: string
  /** Color class for the mana bar (Tailwind class) */
  manaBarColor: string
  /** Color class for the experience bar (Tailwind class) */
  experienceBarColor: string
  /** Text color classes for different item rarities */
  rarityColors: {
    /** Text color for common items */
    common: string
    /** Text color for uncommon items */
    uncommon: string
    /** Text color for rare items */
    rare: string
    /** Text color for epic items */
    epic: string
    /** Text color for legendary items */
    legendary: string
  }
  /** Border and background classes for different item rarities */
  rarityBorders: {
    /** Border styling for common items */
    common: string
    /** Border styling for uncommon items */
    uncommon: string
    /** Border styling for rare items */
    rare: string
    /** Border styling for epic items */
    epic: string
    /** Border styling for legendary items */
    legendary: string
  }
}

/**
 * The main content configuration for an RPG game UI.
 * Contains character information and content for each tab.
 */
export interface RPGContentType {
  /** Basic character information */
  character: {
    /** Character name */
    name: string
    /** Character level */
    level: number
  }
  /** Content for each tab type */
  tabContents: {
    /** Content for the status tab */
    status: StatusTabContent
    /** Content for the equipment tab */
    equipment: EquipmentTabContent
    /** Content for the inventory tab */
    inventory: InventoryTabContent
    /** Content for the party tab */
    party: PartyTabContent
  }
}

/**
 * Content configuration for the Status tab.
 */
export interface StatusTabContent {
  /** Character stats like health, mana, etc. */
  stats: Array<
    | {
        /** Type identifier for the stat (used for icon and color selection) */
        type: string
        /** Display label for the stat */
        label: string
        /** Current value of the stat */
        current: number
        /** Maximum value of the stat */
        max: number
      }
    | ComponentReference
  >
  /** Character attributes like strength, dexterity, etc. */
  attributes: Array<
    | {
        /** Name of the attribute */
        name: string
        /** Value of the attribute */
        value: number
      }
    | ComponentReference
  >
  /** Active effects/buffs on the character */
  effects: Array<
    | {
        /** Name of the effect */
        name: string
        /** Description of what the effect does */
        description: string
        /** Remaining duration of the effect */
        duration: string
        /** Icon for the effect */
        icon: string
      }
    | ComponentReference
  >
  /** Character skills and their levels */
  skills: Array<
    | {
        /** Name of the skill */
        name: string
        /** Current level of the skill */
        level: number
        /** Maximum possible level for the skill */
        maxLevel: number
      }
    | ComponentReference
  >
}

/**
 * Content configuration for the Equipment tab.
 */
export interface EquipmentTabContent {
  /** Items currently equipped by the character */
  equippedItems: Array<
    | {
        /** Equipment slot (e.g., "Weapon", "Helmet") */
        slot: string
        /** Name of the equipped item */
        name: string
        /** Rarity of the item (Common, Uncommon, Rare, Epic, Legendary) */
        rarity: string
        /** Array of stat bonuses provided by the item */
        stats: string[]
        /** Image URL for the item */
        image: string
      }
    | ComponentReference
  >
  /** Overall equipment stats */
  equipmentStats: Array<
    | {
        /** Type identifier for the stat (used for icon selection) */
        type: string
        /** Display label for the stat */
        label: string
        /** Value of the stat (as a string to allow for percentages) */
        value: string
      }
    | ComponentReference
  >
  /** Character's elemental/damage type resistances */
  resistances: Array<
    | {
        /** Type of resistance (e.g., "Fire", "Ice") */
        type: string
        /** Value of the resistance (as a string to allow for percentages) */
        value: string
      }
    | ComponentReference
  >
}

/**
 * Content configuration for the Inventory tab.
 */
export interface InventoryTabContent {
  /** Number of inventory slots currently used */
  inventoryUsed: number
  /** Total inventory capacity */
  inventoryCapacity: number
  /** Currencies the character possesses */
  currencies: Array<
    | {
        /** Name of the currency */
        name: string
        /** Amount of the currency */
        amount: number
        /** Icon URL for the currency */
        icon: string
        /** Display color for the currency */
        color: string
      }
    | ComponentReference
  >
  /** Items in the character's inventory */
  items: Array<
    | {
        /** Name of the item */
        name: string
        /** Rarity of the item (Common, Uncommon, Rare, Epic, Legendary) */
        rarity: string
        /** Quantity of the item (for stackable items) */
        quantity: number
        /** Image URL for the item */
        image: string
      }
    | ComponentReference
  >
  /** Details for the currently selected item */
  selectedItem:
    | {
        /** Name of the selected item */
        name: string
        /** Rarity of the selected item */
        rarity: string
        /** Description of the selected item */
        description: string
        /** Image URL for the selected item */
        image: string
        /** Array of effects/bonuses provided by the item */
        effects: string[]
        /** Available actions for the selected item */
        actions: Array<
          | {
              /** Label for the action button */
              label: string
              /** Background color for the action button */
              bgColor: string
              /** Border color for the action button */
              borderColor: string
              /** Text color for the action button */
              textColor: string
            }
          | ComponentReference
        >
      }
    | ComponentReference
}

/**
 * Layout configuration for the Party tab.
 */
export interface PartyTabLayout {
  /** Section titles for different parts of the Party tab */
  sections: {
    /** Title for the party members list section */
    members: { title: string }
    /** Title for the selected party member details section */
    details: { title: string }
  }
}

/**
 * Content configuration for the Party tab.
 */
export interface PartyTabContent {
  /** List of party members */
  members: Array<
    | {
        /** Unique identifier for the party member */
        id: string
        /** Name of the party member */
        name: string
        /** Class or role of the party member */
        class: string
        /** Level of the party member */
        level: number
        /** Portrait image URL for the party member */
        portrait: string
        /** Short description or tagline for the party member */
        tagline: string
      }
    | ComponentReference
  >
  /** Currently selected party member details */
  selectedMember:
    | {
        /** Unique identifier matching a member in the members array */
        id: string
        /** Full name of the party member */
        fullName: string
        /** Class or role of the party member */
        class: string
        /** Race or species of the party member */
        race: string
        /** Age of the party member */
        age: number
        /** Gender of the party member */
        gender: string
        /** Level of the party member */
        level: number
        /** Portrait image URL for the party member */
        portrait: string
        /** Full body image URL for the party member (optional) */
        fullImage?: string
        /** Personality traits of the party member */
        personality: {
          /** Brief description of the character's personality */
          description: string
          /** List of key personality traits */
          traits: string[]
          /** Character's alignment or moral compass */
          alignment: string
          /** Character's likes */
          likes: string[]
          /** Character's dislikes */
          dislikes: string[]
        }
        /** Character's background story */
        background: string
        /** Character's goals or motivations */
        goals: string[]
        /** Character's relationships with other characters */
        relationships: Array<{
          /** Name of the related character */
          name: string
          /** Relationship type (friend, rival, etc.) */
          type: string
          /** Description of the relationship */
          description: string
        }>
        /** Character's notable quotes */
        quotes: string[]
        /** Character's special abilities or skills */
        abilities: Array<{
          /** Name of the ability */
          name: string
          /** Description of the ability */
          description: string
          /** Type of ability (combat, social, etc.) */
          type: string
        }>
        /** Additional roleplay notes for the character */
        roleplayNotes: string
        /** Character's speech patterns or voice notes */
        speechPatterns: string
      }
    | ComponentReference
}

/**
 * Type for item rarity levels
 */
export type ItemRarity = "Common" | "Uncommon" | "Rare" | "Epic" | "Legendary"

/**
 * Type for stat types
 */
export type StatType = "health" | "mana" | "experience"

/**
 * Type for equipment stat types
 */
export type EquipmentStatType = "attack" | "defense" | "magic" | "critical"

/**
 * Type for tab IDs
 */
export type TabId = "status" | "equipment" | "inventory" | string

export interface PartyMember {
  /** Unique identifier for the party member */
  id: string
  /** Name of the party member */
  name: string
  /** Class or role of the party member */
  class: string
  /** Level of the party member */
  level: number
  /** Portrait image URL for the party member */
  portrait: string
  /** Short description or tagline for the party member */
  tagline: string
}
</article></body></html>

About

Tags

Share

About

Tags

Share

More from bradennapier

More Templates Like This

About

Tags

Share

About

Tags

Share

More from bradennapier

More Templates Like This