458 lines
16 KiB
TypeScript
458 lines
16 KiB
TypeScript
"use client"
|
|
|
|
import type React from "react"
|
|
import Link from "next/link"
|
|
import { ChevronLeft, Shield, Zap, Eye, Brain, Heart } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
|
import { Separator } from "@/components/ui/separator"
|
|
import { useUser } from "@/context/user-context"
|
|
|
|
export default function EquipmentPage() {
|
|
const { userStats } = useUser()
|
|
|
|
// Sample equipment data - in a real app, this would come from the user context
|
|
const equippedItems = [
|
|
{
|
|
id: "e1",
|
|
name: "Shadow Monarch's Helmet",
|
|
rarity: "Legendary" as const,
|
|
stats: ["+15% Intelligence", "+10% Perception"],
|
|
setBonus: "Shadow Monarch Set (2/5)",
|
|
slot: "Head",
|
|
equipped: true,
|
|
},
|
|
{
|
|
id: "e2",
|
|
name: "Gauntlets of Strength",
|
|
rarity: "Epic" as const,
|
|
stats: ["+12 Strength", "+8% Critical Rate"],
|
|
setBonus: "Warrior's Set (1/5)",
|
|
slot: "Hands",
|
|
equipped: true,
|
|
},
|
|
{
|
|
id: "e3",
|
|
name: "Boots of Agility",
|
|
rarity: "Rare" as const,
|
|
stats: ["+10 Agility", "+5% Movement Speed"],
|
|
setBonus: "None",
|
|
slot: "Feet",
|
|
equipped: true,
|
|
},
|
|
{
|
|
id: "e4",
|
|
name: "Shadow Monarch's Armor",
|
|
rarity: "Legendary" as const,
|
|
stats: ["+20 Defense", "+15% Vitality"],
|
|
setBonus: "Shadow Monarch Set (2/5)",
|
|
slot: "Chest",
|
|
equipped: true,
|
|
},
|
|
{
|
|
id: "e5",
|
|
name: "Empty Slot",
|
|
rarity: "Common" as const,
|
|
stats: [],
|
|
setBonus: "None",
|
|
slot: "Accessory",
|
|
equipped: false,
|
|
},
|
|
{
|
|
id: "e6",
|
|
name: "Empty Slot",
|
|
rarity: "Common" as const,
|
|
stats: [],
|
|
setBonus: "None",
|
|
slot: "Weapon",
|
|
equipped: false,
|
|
},
|
|
]
|
|
|
|
const inventoryItems = [
|
|
{
|
|
id: "i1",
|
|
name: "Amulet of Wisdom",
|
|
rarity: "Epic" as const,
|
|
stats: ["+15 Intelligence", "+10% Mana Regeneration"],
|
|
setBonus: "Scholar's Set (1/3)",
|
|
slot: "Accessory",
|
|
},
|
|
{
|
|
id: "i2",
|
|
name: "Dagger of Precision",
|
|
rarity: "Rare" as const,
|
|
stats: ["+8 Perception", "+12% Critical Damage"],
|
|
setBonus: "Assassin's Set (1/4)",
|
|
slot: "Weapon",
|
|
},
|
|
{
|
|
id: "i3",
|
|
name: "Bracers of Vitality",
|
|
rarity: "Uncommon" as const,
|
|
stats: ["+6 Vitality", "+5% Health Regeneration"],
|
|
setBonus: "None",
|
|
slot: "Hands",
|
|
},
|
|
{
|
|
id: "i4",
|
|
name: "Shadow Monarch's Greaves",
|
|
rarity: "Legendary" as const,
|
|
stats: ["+12 Agility", "+15% Movement Speed"],
|
|
setBonus: "Shadow Monarch Set (1/5)",
|
|
slot: "Feet",
|
|
},
|
|
]
|
|
|
|
// Calculate stat bonuses from equipment
|
|
const calculateStatBonuses = () => {
|
|
// In a real app, this would parse the equipment stats and calculate actual bonuses
|
|
return {
|
|
str: 18,
|
|
agi: 10,
|
|
per: 10,
|
|
int: 10,
|
|
vit: 10,
|
|
}
|
|
}
|
|
|
|
const statBonuses = calculateStatBonuses()
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#0a0e14] text-[#e0f2ff] pb-16 md:pb-0">
|
|
<div className="container mx-auto px-4 py-6">
|
|
{/* Header */}
|
|
<header className="flex items-center mb-8">
|
|
<Link href="/" className="mr-4">
|
|
<Button variant="ghost" size="icon" className="hover:bg-[#1e2a3a]">
|
|
<ChevronLeft className="h-5 w-5" />
|
|
<span className="sr-only">Back</span>
|
|
</Button>
|
|
</Link>
|
|
<h1 className="text-2xl font-bold tracking-tight text-[#4cc9ff]">Equipment</h1>
|
|
</header>
|
|
|
|
{/* Equipment Stats */}
|
|
<div className="mb-8 relative">
|
|
<div className="absolute inset-0 border border-[#4cc9ff]/30 rounded-lg shadow-[0_0_15px_rgba(76,201,255,0.15)]"></div>
|
|
<div className="absolute inset-0 border-t-2 border-l-2 border-r-2 border-b-2 border-[#4cc9ff]/20 rounded-lg"></div>
|
|
<div className="absolute top-0 left-0 w-[20px] h-[20px] border-t-2 border-l-2 border-[#4cc9ff]"></div>
|
|
<div className="absolute top-0 right-0 w-[20px] h-[20px] border-t-2 border-r-2 border-[#4cc9ff]"></div>
|
|
<div className="absolute bottom-0 left-0 w-[20px] h-[20px] border-b-2 border-l-2 border-[#4cc9ff]"></div>
|
|
<div className="absolute bottom-0 right-0 w-[20px] h-[20px] border-b-2 border-r-2 border-[#4cc9ff]"></div>
|
|
|
|
<div className="p-6 relative z-10">
|
|
<h2 className="text-xl uppercase tracking-wider text-[#4cc9ff] mb-6">Equipment Stats</h2>
|
|
<div className="grid grid-cols-2 md:grid-cols-5 gap-4">
|
|
<StatBonus
|
|
icon={<Shield className="h-5 w-5 text-[#4cc9ff]" />}
|
|
name="STR"
|
|
baseValue={userStats.stats.str}
|
|
bonusValue={statBonuses.str}
|
|
/>
|
|
<StatBonus
|
|
icon={<Zap className="h-5 w-5 text-[#4cc9ff]" />}
|
|
name="AGI"
|
|
baseValue={userStats.stats.agi}
|
|
bonusValue={statBonuses.agi}
|
|
/>
|
|
<StatBonus
|
|
icon={<Eye className="h-5 w-5 text-[#4cc9ff]" />}
|
|
name="PER"
|
|
baseValue={userStats.stats.per}
|
|
bonusValue={statBonuses.per}
|
|
/>
|
|
<StatBonus
|
|
icon={<Brain className="h-5 w-5 text-[#4cc9ff]" />}
|
|
name="INT"
|
|
baseValue={userStats.stats.int}
|
|
bonusValue={statBonuses.int}
|
|
/>
|
|
<StatBonus
|
|
icon={<Heart className="h-5 w-5 text-[#4cc9ff]" />}
|
|
name="VIT"
|
|
baseValue={userStats.stats.vit}
|
|
bonusValue={statBonuses.vit}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Equipment Slots */}
|
|
<div className="mb-8">
|
|
<Tabs defaultValue="equipped">
|
|
<TabsList className="grid w-full grid-cols-2 bg-[#1e2a3a] border border-[#1e2a3a]">
|
|
<TabsTrigger
|
|
value="equipped"
|
|
className="data-[state=active]:bg-[#0a0e14] data-[state=active]:border-t-2 data-[state=active]:border-[#4cc9ff]"
|
|
>
|
|
Equipped
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="inventory"
|
|
className="data-[state=active]:bg-[#0a0e14] data-[state=active]:border-t-2 data-[state=active]:border-[#4cc9ff]"
|
|
>
|
|
Inventory
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="equipped" className="mt-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{equippedItems.map((item) => (
|
|
<EquipmentSlotCard
|
|
key={item.id}
|
|
name={item.name}
|
|
rarity={item.rarity}
|
|
stats={item.stats}
|
|
setBonus={item.setBonus}
|
|
slot={item.slot}
|
|
equipped={item.equipped}
|
|
/>
|
|
))}
|
|
</div>
|
|
</TabsContent>
|
|
<TabsContent value="inventory" className="mt-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{inventoryItems.map((item) => (
|
|
<EquipmentCard
|
|
key={item.id}
|
|
name={item.name}
|
|
rarity={item.rarity}
|
|
stats={item.stats}
|
|
setBonus={item.setBonus}
|
|
slot={item.slot}
|
|
/>
|
|
))}
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
|
|
{/* Set Bonuses */}
|
|
<div>
|
|
<h2 className="text-xl uppercase tracking-wider text-[#4cc9ff] mb-4">Set Bonuses</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<Card className="bg-[#0a0e14]/80 border-[#1e2a3a] relative">
|
|
<div className="absolute inset-0 border border-[#4cc9ff]/10"></div>
|
|
<CardHeader className="pb-2 relative z-10">
|
|
<CardTitle className="text-base text-yellow-400">Shadow Monarch Set (2/5)</CardTitle>
|
|
<CardDescription>Legendary Set</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="relative z-10">
|
|
<div className="space-y-2 text-sm">
|
|
<div className="flex items-center">
|
|
<div className="w-2 h-2 rounded-full bg-[#4cc9ff] mr-2"></div>
|
|
<span className="text-[#4cc9ff]">(2) Set: +15% Intelligence, +10% Perception</span>
|
|
</div>
|
|
<div className="flex items-center">
|
|
<div className="w-2 h-2 rounded-full bg-[#1e2a3a] mr-2"></div>
|
|
<span className="text-[#8bacc1]">(3) Set: +20% Mana Regeneration</span>
|
|
</div>
|
|
<div className="flex items-center">
|
|
<div className="w-2 h-2 rounded-full bg-[#1e2a3a] mr-2"></div>
|
|
<span className="text-[#8bacc1]">(4) Set: +25% Skill Damage</span>
|
|
</div>
|
|
<div className="flex items-center">
|
|
<div className="w-2 h-2 rounded-full bg-[#1e2a3a] mr-2"></div>
|
|
<span className="text-[#8bacc1]">(5) Set: Unlock Shadow Extraction Ability</span>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-[#0a0e14]/80 border-[#1e2a3a] relative">
|
|
<div className="absolute inset-0 border border-[#4cc9ff]/10"></div>
|
|
<CardHeader className="pb-2 relative z-10">
|
|
<CardTitle className="text-base text-purple-400">Warrior's Set (1/5)</CardTitle>
|
|
<CardDescription>Epic Set</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="relative z-10">
|
|
<div className="space-y-2 text-sm">
|
|
<div className="flex items-center">
|
|
<div className="w-2 h-2 rounded-full bg-[#1e2a3a] mr-2"></div>
|
|
<span className="text-[#8bacc1]">(2) Set: +15% Strength, +10% Vitality</span>
|
|
</div>
|
|
<div className="flex items-center">
|
|
<div className="w-2 h-2 rounded-full bg-[#1e2a3a] mr-2"></div>
|
|
<span className="text-[#8bacc1]">(3) Set: +20% Physical Damage</span>
|
|
</div>
|
|
<div className="flex items-center">
|
|
<div className="w-2 h-2 rounded-full bg-[#1e2a3a] mr-2"></div>
|
|
<span className="text-[#8bacc1]">(4) Set: +25% Defense</span>
|
|
</div>
|
|
<div className="flex items-center">
|
|
<div className="w-2 h-2 rounded-full bg-[#1e2a3a] mr-2"></div>
|
|
<span className="text-[#8bacc1]">(5) Set: Unlock Berserker Rage Ability</span>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function StatBonus({
|
|
icon,
|
|
name,
|
|
baseValue,
|
|
bonusValue,
|
|
}: {
|
|
icon: React.ReactNode
|
|
name: string
|
|
baseValue: number
|
|
bonusValue: number
|
|
}) {
|
|
return (
|
|
<div className="flex flex-col items-center p-3 rounded-lg bg-[#0a0e14] border border-[#1e2a3a]">
|
|
<div className="flex items-center justify-center mb-2">{icon}</div>
|
|
<div className="text-xs text-[#8bacc1] mb-1">{name}</div>
|
|
<div className="text-lg font-bold flex items-center">
|
|
{baseValue} <span className="text-[#4cc9ff] text-sm ml-1">+{bonusValue}</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function EquipmentSlotCard({
|
|
name,
|
|
rarity,
|
|
stats,
|
|
setBonus,
|
|
slot,
|
|
equipped,
|
|
}: {
|
|
name: string
|
|
rarity: "Common" | "Uncommon" | "Rare" | "Epic" | "Legendary"
|
|
stats: string[]
|
|
setBonus: string
|
|
slot: string
|
|
equipped: boolean
|
|
}) {
|
|
const rarityColors = {
|
|
Common: "text-gray-400",
|
|
Uncommon: "text-green-400",
|
|
Rare: "text-[#4cc9ff]",
|
|
Epic: "text-purple-400",
|
|
Legendary: "text-yellow-400",
|
|
}
|
|
|
|
return (
|
|
<Card className={`bg-[#0a0e14]/80 border-[#1e2a3a] overflow-hidden relative ${!equipped ? "opacity-50" : ""}`}>
|
|
<div className="absolute inset-0 border border-[#4cc9ff]/10"></div>
|
|
<div
|
|
className={`h-1 w-full bg-gradient-to-r ${
|
|
rarity === "Common"
|
|
? "from-gray-500 to-gray-600"
|
|
: rarity === "Uncommon"
|
|
? "from-green-500 to-green-600"
|
|
: rarity === "Rare"
|
|
? "from-[#4cc9ff] to-[#4cc9ff]/60"
|
|
: rarity === "Epic"
|
|
? "from-purple-500 to-purple-600"
|
|
: "from-yellow-500 to-yellow-600"
|
|
}`}
|
|
></div>
|
|
<CardHeader className="pb-2 relative z-10">
|
|
<div className="flex justify-between items-start">
|
|
<CardTitle className={`text-base ${rarityColors[rarity]}`}>{name}</CardTitle>
|
|
<span className="text-xs text-[#8bacc1]">{slot}</span>
|
|
</div>
|
|
<CardDescription className={rarityColors[rarity]}>{rarity}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="relative z-10">
|
|
<div className="space-y-1">
|
|
{stats.length > 0 ? (
|
|
stats.map((stat, index) => (
|
|
<div key={index} className="text-xs">
|
|
{stat}
|
|
</div>
|
|
))
|
|
) : (
|
|
<div className="text-xs text-[#8bacc1]">No item equipped</div>
|
|
)}
|
|
{stats.length > 0 && (
|
|
<>
|
|
<Separator className="my-2 bg-[#1e2a3a]" />
|
|
<div className="text-xs text-[#8bacc1]">{setBonus}</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
{equipped && (
|
|
<CardFooter className="relative z-10">
|
|
<Button variant="outline" className="w-full border-[#1e2a3a] hover:bg-[#1e2a3a] hover:text-white">
|
|
Unequip
|
|
</Button>
|
|
</CardFooter>
|
|
)}
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
function EquipmentCard({
|
|
name,
|
|
rarity,
|
|
stats,
|
|
setBonus,
|
|
slot,
|
|
}: {
|
|
name: string
|
|
rarity: "Common" | "Uncommon" | "Rare" | "Epic" | "Legendary"
|
|
stats: string[]
|
|
setBonus: string
|
|
slot: string
|
|
}) {
|
|
const rarityColors = {
|
|
Common: "text-gray-400",
|
|
Uncommon: "text-green-400",
|
|
Rare: "text-[#4cc9ff]",
|
|
Epic: "text-purple-400",
|
|
Legendary: "text-yellow-400",
|
|
}
|
|
|
|
return (
|
|
<Card className="bg-[#0a0e14]/80 border-[#1e2a3a] overflow-hidden relative">
|
|
<div className="absolute inset-0 border border-[#4cc9ff]/10"></div>
|
|
<div
|
|
className={`h-1 w-full bg-gradient-to-r ${
|
|
rarity === "Common"
|
|
? "from-gray-500 to-gray-600"
|
|
: rarity === "Uncommon"
|
|
? "from-green-500 to-green-600"
|
|
: rarity === "Rare"
|
|
? "from-[#4cc9ff] to-[#4cc9ff]/60"
|
|
: rarity === "Epic"
|
|
? "from-purple-500 to-purple-600"
|
|
: "from-yellow-500 to-yellow-600"
|
|
}`}
|
|
></div>
|
|
<CardHeader className="pb-2 relative z-10">
|
|
<div className="flex justify-between items-start">
|
|
<CardTitle className={`text-base ${rarityColors[rarity]}`}>{name}</CardTitle>
|
|
<span className="text-xs text-[#8bacc1]">{slot}</span>
|
|
</div>
|
|
<CardDescription className={rarityColors[rarity]}>{rarity}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="relative z-10">
|
|
<div className="space-y-1">
|
|
{stats.map((stat, index) => (
|
|
<div key={index} className="text-xs">
|
|
{stat}
|
|
</div>
|
|
))}
|
|
<Separator className="my-2 bg-[#1e2a3a]" />
|
|
<div className="text-xs text-[#8bacc1]">{setBonus}</div>
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter className="relative z-10">
|
|
<Button className="w-full bg-transparent border border-[#4cc9ff] hover:bg-[#4cc9ff]/10 text-[#4cc9ff]">
|
|
Equip
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
)
|
|
}
|