4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T2097,"use client"; import Image from "next/image"; import { useCallback, useState } from "react"; import { cn } from "@/lib/utils"; import { Alert, AlertDescription, AlertTitle } from "@/components/ui/8bit/alert"; import { Badge } from "@/components/ui/8bit/badge"; import { Button } from "@/components/ui/8bit/button"; import HealthBar from "@/components/ui/8bit/health-bar"; import "@/components/ui/8bit/styles/retro.css"; interface Fighter { className?: string; hp: number; image: string; maxHp: number; name: string; subtitle: string; } interface DuelBlockProps { className?: string; leftFighter?: Fighter; rightFighter?: Fighter; } const hitMessages = [ "Critical strike!", "Holy damage!", "Shield block!", "Orc smash!", "Combo x2!", "Parried!", "Devastating blow!", "Glancing hit!", ]; export default function DuelBlock({ leftFighter = { name: "Paladin", subtitle: "Holy Vanguard", image: "/images/8bit-paladin.png", hp: 100, maxHp: 100, }, rightFighter = { name: "Orc Warrior", subtitle: "Arena Berserker", image: "/images/8bit-orc-warrior.png", hp: 100, maxHp: 100, }, className, }: DuelBlockProps) { const [left, setLeft] = useState(leftFighter); const [right, setRight] = useState(rightFighter); const [round, setRound] = useState(1); const [lastMessage, setLastMessage] = useState("Fight!"); const [lastHit, setLastHit] = useState<"left" | "right" | null>(null); const winner = left.hp <= 0 ? right.name : right.hp <= 0 ? left.name : null; const handleHit = useCallback(() => { if (winner) { return; } const damage = Math.floor(Math.random() * 20) + 5; const msg = hitMessages[Math.floor(Math.random() * hitMessages.length)]; if (round % 2 === 1) { // Paladin attacks orc setRight((f) => ({ ...f, hp: Math.max(0, f.hp - damage) })); setLastMessage(`${left.name}: ${msg} -${damage} HP`); setLastHit("right"); } else { // Orc attacks paladin setLeft((f) => ({ ...f, hp: Math.max(0, f.hp - damage) })); setLastMessage(`${right.name}: ${msg} -${damage} HP`); setLastHit("left"); } setRound((r) => r + 1); }, [round, winner, left.name, right.name]); const handleReset = useCallback(() => { setLeft(leftFighter); setRight(rightFighter); setRound(1); setLastMessage("Round 1 — Fight!"); setLastHit(null); }, [leftFighter, rightFighter]); return (

{/* Badge */}

DUEL

{/* Mobile: stacked arena / Desktop: side-by-side duel */}

HP {left.hp}/{left.maxHp}

{left.name}

{left.subtitle}

{winner ? (

{winner} wins!

) : ( )}

Round {round}

HP {right.hp}/{right.maxHp}

{right.name}

{right.subtitle}

HP {left.hp}/{left.maxHp}

{left.name}

{left.subtitle}

{winner ? (

{winner} wins!

) : ( )}

HP {right.hp}/{right.maxHp}

{right.name}

{right.subtitle}

{/* Battle Message */}

Round {round} {lastMessage}

); } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@8bitcn","registryDependencies":["badge","button","health-bar"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"components/ui/8bit/blocks/duel-block.tsx","content":"$50","type":"registry:block","target":"components/ui/8bit/blocks/duel-block.tsx"},{"path":"components/ui/8bit/styles/retro.css","content":"@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n font-family:\n \"Press Start 2P\",\n system-ui,\n -apple-system,\n sans-serif;\n line-height: 1.5;\n letter-spacing: 0.5px;\n}\n\n.pixelated {\n image-rendering: pixelated;\n image-rendering: crisp-edges;\n}","type":"registry:file","target":"components/ui/8bit/styles/retro.css"}],"className":"h-[70svh] min-h-80"}]]}]