[V0_FILE]typescriptreact:file="components/ui/tooltip.tsx" isMerged="true" "use client" import * as React from "react" import * as TooltipPrimitive from "@radix-ui/react-tooltip" import { cn } from "@/lib/utils" const TooltipProvider = TooltipPrimitive.Provider const Tooltip = TooltipPrimitive.Root const TooltipTrigger = TooltipPrimitive.Trigger const TooltipContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, sideOffset = 4, ...props }, ref) => ( )) TooltipContent.displayName = TooltipPrimitive.Content.displayName export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } [V0_FILE]typescriptreact:file="components/ui/tabs.tsx" isMerged="true" "use client" import * as React from "react" import * as TabsPrimitive from "@radix-ui/react-tabs" import { cn } from "@/lib/utils" const Tabs = TabsPrimitive.Root const TabsList = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsList.displayName = TabsPrimitive.List.displayName const TabsTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsTrigger.displayName = TabsPrimitive.Trigger.displayName const TabsContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsContent.displayName = TabsPrimitive.Content.displayName export { Tabs, TabsList, TabsTrigger, TabsContent } [V0_FILE]typescriptreact:file="components/ui/select.tsx" isMerged="true" "use client" import * as React from "react" import * as SelectPrimitive from "@radix-ui/react-select" import { Check, ChevronDown, ChevronUp } from "lucide-react" import { cn } from "@/lib/utils" const Select = SelectPrimitive.Root const SelectGroup = SelectPrimitive.Group const SelectValue = SelectPrimitive.Value const SelectTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( span]:line-clamp-1", className, )} {...props} > {children} )) SelectTrigger.displayName = SelectPrimitive.Trigger.displayName const SelectScrollUpButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName const SelectScrollDownButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName const SelectContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, position = "popper", ...props }, ref) => ( {children} )) SelectContent.displayName = SelectPrimitive.Content.displayName const SelectLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectLabel.displayName = SelectPrimitive.Label.displayName const SelectItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) SelectItem.displayName = SelectPrimitive.Item.displayName const SelectSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectSeparator.displayName = SelectPrimitive.Separator.displayName export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="app/globals.css" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 222 20% 12%; --foreground: 34 35% 92%; --card: 222 20% 8%; --card-foreground: 34 35% 92%; --popover: 222 20% 8%; --popover-foreground: 34 35% 92%; --primary: 32 75% 44%; --primary-foreground: 34 35% 92%; --secondary: 222 20% 15%; --secondary-foreground: 34 35% 92%; --muted: 222 20% 15%; --muted-foreground: 34 35% 60%; --accent: 32 75% 44%; --accent-foreground: 34 35% 92%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 34 35% 92%; --border: 32 75% 44%; --input: 222 20% 15%; --ring: 32 75% 44%; --radius: 0.3rem; } } @layer base { * { @apply border-border; } body { background-color: #1a1f28; color: hsl(var(--foreground)); background-image: url("/placeholder.svg?height=1080&width=1920"); background-size: cover; background-attachment: fixed; background-position: center; background-blend-mode: overlay; } } @layer utilities { .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .scrollbar-custom::-webkit-scrollbar { height: 8px; } .scrollbar-custom::-webkit-scrollbar-track { @apply bg-secondary rounded-full; } .scrollbar-custom::-webkit-scrollbar-thumb { @apply bg-primary rounded-full; } .scrollbar-custom::-webkit-scrollbar-thumb:hover { @apply bg-primary/80; } } [V0_FILE]typescriptreact:file="tailwind.config.js" isQuickEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1800px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef(({ className, type, ...props }, ref) => { return ( ) }) Input.displayName = "Input" export { Input } [V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true" "use client" import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70") const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import Link from "next/link" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Path of Exile Character Armory", description: "View Path of Exile character equipment and passive trees", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return (

PoE Armory

{children}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import CharacterSearch from "@/components/character-search" import type { Metadata } from "next" export const metadata: Metadata = { title: "Path of Exile Character Viewer", description: "View Path of Exile character equipment and passive trees", } export default function Home() { return (

Path of Exile Character Viewer

) } [V0_FILE]typescript:file="app/api/characters/route.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import { NextResponse } from "next/server" const POE_API_URL = "https://www.pathofexile.com/character-window/get-characters" const POE_ITEMS_API_URL = "https://www.pathofexile.com/character-window/get-items" const POE_PASSIVE_TREE_URL = "https://www.pathofexile.com/character-window/get-passive-skills" export async function GET(request: Request) { const { searchParams } = new URL(request.url) const accountName = searchParams.get("accountName") if (!accountName) { return NextResponse.json({ error: "Account name is required" }, { status: 400 }) } try { // Fetch characters const charactersResponse = await fetch(`${POE_API_URL}?accountName=${encodeURIComponent(accountName)}`, { headers: { "User-Agent": "PoE Character Viewer (contact@example.com)", Accept: "application/json", }, }) if (!charactersResponse.ok) { console.error(`Failed to fetch characters: ${charactersResponse.status} ${charactersResponse.statusText}`) throw new Error(`Failed to fetch characters: ${charactersResponse.statusText}`) } const characters = await charactersResponse.json() // Fetch items and passive tree data for each character const charactersWithData = await Promise.all( characters.map(async (character: any) => { try { // Fetch items const itemsResponse = await fetch( `${POE_ITEMS_API_URL}?accountName=${encodeURIComponent(accountName)}&character=${encodeURIComponent(character.name)}`, { headers: { "User-Agent": "PoE Character Viewer (contact@example.com)", Accept: "application/json", }, }, ) // Fetch passive tree data const passiveTreeResponse = await fetch( `${POE_PASSIVE_TREE_URL}?accountName=${encodeURIComponent(accountName)}&character=${encodeURIComponent(character.name)}`, { headers: { "User-Agent": "PoE Character Viewer (contact@example.com)", Accept: "application/json", }, }, ) const itemsData = itemsResponse.ok ? await itemsResponse.json() : { items: [] } const passiveTreeData = passiveTreeResponse.ok ? await passiveTreeResponse.json() : null let passiveTreeUrl = null if (passiveTreeData && (passiveTreeData.hashes_ex || passiveTreeData.hashes)) { const hashesData = passiveTreeData.hashes_ex || passiveTreeData.hashes if (hashesData.length > 0) { const encodedHashes = btoa( String.fromCharCode.apply(null, new Uint8Array(new Int32Array(hashesData).buffer)), ) passiveTreeUrl = `https://www.pathofexile.com/fullscreen-passive-skill-tree/alternate/${encodedHashes}?accountName=${encodeURIComponent(accountName)}&characterName=${encodeURIComponent(character.name)}` } } console.log(`Passive Tree URL for ${character.name}:`, passiveTreeUrl) // Add this log return { ...character, items: itemsData.items || [], passiveSkills: passiveTreeData, passiveTreeUrl: passiveTreeUrl, } } catch (error) { console.error(`Error fetching data for character ${character.name}:`, error) return { ...character, items: [], passiveSkills: null, passiveTreeUrl: null, error: `Failed to fetch data for this character: ${error instanceof Error ? error.message : "Unknown error"}`, } } }), ) return NextResponse.json(charactersWithData) } catch (error) { console.error("Error fetching character data:", error) const errorMessage = error instanceof Error ? error.message : "Unknown error occurred" return NextResponse.json({ error: `Failed to fetch character data: ${errorMessage}` }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/character-search.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import CharacterList from "@/components/character-list" import { Loader2 } from "lucide-react" export default function CharacterSearch() { const [username, setUsername] = useState("") const [characters, setCharacters] = useState([]) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState(null) const handleSearch = async (e: React.FormEvent) => { e.preventDefault() if (!username.trim()) return setIsLoading(true) setError(null) setCharacters([]) try { const response = await fetch(`/api/characters?accountName=${encodeURIComponent(username)}`) if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`) } const data = await response.json() if (Array.isArray(data)) { setCharacters(data) } else if (data.error) { throw new Error(data.error) } else { throw new Error("Unexpected response format") } } catch (err) { setError(err instanceof Error ? err.message : "An unexpected error occurred. Please try again.") console.error("Error in character search:", err) } finally { setIsLoading(false) } } return (

{error &&

{error}

} {characters.length > 0 && !isLoading && !error && }

) } [V0_FILE]typescriptreact:file="components/character-equipment.tsx" isMerged="true" "use client" import Image from "next/image" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" interface Character { name: string class: string level: number league: string items: any[] } interface EquipmentSlot { id: string name: string position: { top: string left: string width: string height: string } } const EQUIPMENT_SLOTS: EquipmentSlot[] = [ { id: "Helm", name: "Helmet", position: { top: "18%", left: "50%", width: "100px", height: "100px" }, }, { id: "Amulet", name: "Amulet", position: { top: "32%", left: "35%", width: "45px", height: "45px" }, }, { id: "BodyArmour", name: "Body Armour", position: { top: "40%", left: "50%", width: "100px", height: "150px" }, }, { id: "Ring", name: "Left Ring", position: { top: "47%", left: "35%", width: "45px", height: "45px" }, }, { id: "Ring2", name: "Right Ring", position: { top: "47%", left: "65%", width: "45px", height: "45px" }, }, { id: "Gloves", name: "Gloves", position: { top: "65%", left: "32%", width: "100px", height: "100px" }, }, { id: "Weapon", name: "Weapon", position: { top: "38%", left: "17%", width: "100px", height: "250px" }, }, { id: "Boots", name: "Boots", position: { top: "65%", left: "68%", width: "100px", height: "100px" }, }, { id: "Belt", name: "Belt", position: { top: "67%", left: "50%", width: "100px", height: "50px" }, }, { id: "Offhand", name: "Off Hand", position: { top: "38%", left: "83%", width: "100px", height: "250px" }, }, ] const getRarityColor = (frameType: number) => { switch (frameType) { case 0: return "text-gray-200" // Normal case 1: return "text-blue-400" // Magic case 2: return "text-yellow-400" // Rare case 3: return "text-[#c17c1d]" // Unique default: return "text-gray-200" } } export default function CharacterEquipment({ character }: { character: Character }) { if (!character.items) { return (

{character.name}

Level {character.level} {character.class}

No equipment data available for this character.

) } return (

{EQUIPMENT_SLOTS.map((slot) => { const item = character.items?.find((item) => item.inventoryId === slot.id) return (

{item ? (

{/* Glow effect */}

{item.name}

{item.explicitMods && (

{item.explicitMods.map((mod: string, index: number) => (

{mod}

))}

)}

) : (

{/* Empty slot glow effect */}

{slot.name}

)}

) })}

{character.name}

Level {character.level} {character.class}

) } [V0_FILE]typescript:file="lib/passiveSkillTree.ts" isMerged="true" import type { PassiveSkillTreeData } from "@/types/passiveSkillTree" const PASSIVE_TREE_DATA_URL = "https://raw.githubusercontent.com/grindinggear/skilltree-export/master/data/PassiveSkillTree.json" let cachedTreeData: PassiveSkillTreeData | null = null export async function getPassiveSkillTreeData(): Promise { if (cachedTreeData) { return cachedTreeData } const response = await fetch(PASSIVE_TREE_DATA_URL) if (!response.ok) { throw new Error("Failed to fetch passive skill tree data") } const data: PassiveSkillTreeData = await response.json() cachedTreeData = data return data } export function getCharacterPassiveNodes( treeData: PassiveSkillTreeData, characterHashes: number[], ): PassiveSkillTreeData["nodes"] { return Object.values(treeData.nodes).filter((node) => characterHashes.includes(node.skill)) } [V0_FILE]typescript:file="types/passiveSkillTree.ts" isQuickEdit="true" isMerged="true" export interface PassiveSkillTreeData { nodes: { [key: string]: { skill: number name: string icon: string x: number y: number } } } [V0_FILE]typescript:file="lib/simplifiedPassiveSkillTree.ts" isMerged="true" export interface SimplePassiveNode { id: number name: string x: number y: number } export const simplifiedPassiveSkillTree: SimplePassiveNode[] = [ { id: 1, name: "Life", x: 0, y: 0 }, { id: 2, name: "Mana", x: 100, y: 0 }, { id: 3, name: "Strength", x: 50, y: 50 }, { id: 4, name: "Dexterity", x: -50, y: 50 }, { id: 5, name: "Intelligence", x: 0, y: 100 }, { id: 6, name: "Armor", x: 100, y: 100 }, { id: 7, name: "Evasion", x: -100, y: 100 }, { id: 8, name: "Energy Shield", x: 0, y: -100 }, { id: 9, name: "Critical Strike", x: 150, y: -50 }, { id: 10, name: "Elemental Damage", x: -150, y: -50 }, // Add more nodes as needed ] export function getRandomNodes(count: number): SimplePassiveNode[] { const shuffled = [...simplifiedPassiveSkillTree].sort(() => 0.5 - Math.random()) return shuffled.slice(0, count) } [V0_FILE]typescript:file="app/api/passive-skills/route.ts" isMerged="true" import { NextResponse } from "next/server" import { getRandomNodes } from "@/lib/simplifiedPassiveSkillTree" export async function GET(request: Request) { const { searchParams } = new URL(request.url) const accountName = searchParams.get("accountName") const characterName = searchParams.get("characterName") if (!accountName || !characterName) { return NextResponse.json({ error: "Account name and character name are required" }, { status: 400 }) } try { // Simulate fetching character-specific passive skills by getting random nodes const characterNodes = getRandomNodes(20) // Get 20 random nodes return NextResponse.json({ passiveSkillTreeData: characterNodes }) } catch (error) { console.error("Error fetching passive skills:", error) return NextResponse.json( { error: error instanceof Error ? error.message : "An unexpected error occurred" }, { status: 500 }, ) } } [V0_FILE]typescriptreact:file="components/character-passive-tree.tsx" isDeleted="true" isEdit="true" ...deleted... [V0_FILE]typescriptreact:file="components/character-list.tsx" isEdit="true" "use client" import { useState, useMemo } from "react" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import CharacterEquipment from "@/components/character-equipment" import { ExternalLink } from "lucide-react" interface Character { name: string class: string level: number league: string items: any[] passiveSkills?: any passiveTreeUrl?: string | null } const CHARACTERS_PER_PAGE = 10 export default function CharacterList({ characters }: { characters: Character[] }) { const [selectedLeague, setSelectedLeague] = useState("all") const [selectedCharacter, setSelectedCharacter] = useState(null) const [currentPage, setCurrentPage] = useState(1) const leagues = useMemo(() => { const uniqueLeagues = Array.from(new Set(characters.map((char) => char.league))) return ["all", ...uniqueLeagues] }, [characters]) const filteredCharacters = useMemo(() => { return selectedLeague === "all" ? characters : characters.filter((char) => char.league === selectedLeague) }, [characters, selectedLeague]) const totalPages = Math.ceil(filteredCharacters.length / CHARACTERS_PER_PAGE) const paginatedCharacters = filteredCharacters.slice( (currentPage - 1) * CHARACTERS_PER_PAGE, currentPage * CHARACTERS_PER_PAGE, ) const handlePageChange = (newPage: number) => { setCurrentPage(newPage) setSelectedCharacter(null) } return (

Characters

{filteredCharacters.length === 0 ? (

No characters found in the selected league.

) : (

{paginatedCharacters.map((character) => (

setSelectedCharacter(character)} >

{character.name}

Level {character.level} {character.class}

{character.league}

{character.passiveTreeUrl && ( e.stopPropagation()} > View Passive Tree )}

))}

{totalPages > 1 && (

Page {currentPage} of {totalPages}

)} {selectedCharacter && (

)}

) }

About

Tags

Share

About

Tags

Share

More from spiritbocs

More Templates Like This

About

Tags

Share

About

Tags

Share

More from spiritbocs

More Templates Like This