AzenKain
cfc5842113
All checks were successful
Gitea Auto Deploy / Deploy-Container (push) Successful in 1m16s
71 lines
3.8 KiB
TypeScript
71 lines
3.8 KiB
TypeScript
"use client"
|
|
|
|
import useBattleDataStore from "@/stores/battleDataStore";
|
|
import Image from "next/image";
|
|
|
|
function formatEnemyIdForURL(id?: number): string {
|
|
const n = id ?? 0;
|
|
const adjusted = n.toString().length === 9 ? n / 100 : n;
|
|
return adjusted.toFixed(0);
|
|
}
|
|
|
|
export default function EnemyBar() {
|
|
const { enemyDetail } = useBattleDataStore()
|
|
|
|
return (
|
|
<div className="p-3 w-full">
|
|
<div className="flex gap-3 overflow-x-auto pb-2">
|
|
{enemyDetail && Object.values(enemyDetail).filter((enemy) => (enemy.stats?.AV > 0
|
|
&& enemy.stats.HP <= enemy.maxHP)).map((enemy, uid) => (
|
|
<div key={uid} className="bg-base-200 rounded-lg p-3 border border-gray-700 w-52 flex-shrink-0">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div className="flex items-center gap-2">
|
|
<Image
|
|
src={`https://api.hakush.in/hsr/UI/monstermiddleicon/Monster_${formatEnemyIdForURL(enemy.id)}.webp`}
|
|
alt={enemy.name}
|
|
width={40}
|
|
height={40}
|
|
className="object-cover w-10 h-10 rounded-lg"
|
|
/>
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="text-base font-semibold leading-tight truncate overflow-hidden" title={enemy.name}>
|
|
{enemy.name}
|
|
</h3>
|
|
<p className="text-base-content/70 text-xs">Level {enemy.level || 1}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between items-center">
|
|
<div className="text-xs text-base-content/70">HP:</div>
|
|
<div className="flex text-xs font-medium">
|
|
<div className="text-error">
|
|
{Number(enemy?.stats?.HP ?? 0).toLocaleString(undefined, { maximumFractionDigits: 0 })}
|
|
</div>
|
|
<div className="text-base-content/50 mx-1">/</div>
|
|
<div className="text-base-content/70">
|
|
{Number(enemy?.maxHP ?? 100).toLocaleString(undefined, { maximumFractionDigits: 0 })}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative w-full bg-base-300 rounded-full h-2.5">
|
|
<div
|
|
className="bg-error h-2.5 rounded-full transition-all duration-300"
|
|
style={{
|
|
width: `${Math.max(0, Math.min(100, ((enemy.stats?.HP || 0) / (enemy.maxHP || 100)) * 100))}%`
|
|
}}
|
|
/>
|
|
<div className="absolute inset-0 flex items-center justify-center text-xs text-white font-medium">
|
|
{Math.round(((enemy.stats?.HP || 0) / (enemy.maxHP || 100)) * 100)}%
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
} |