Alex Mickelson
452b2ab21b
All checks were successful
Build and Deploy / Build & Push Image (push) Successful in 31s
119 lines
5.3 KiB
Elixir
119 lines
5.3 KiB
Elixir
defmodule CobblemonUiWeb.BattleComponents do
|
|
use CobblemonUiWeb, :html
|
|
|
|
import CobblemonUiWeb.PokemonComponents, only: [tier_badge: 1]
|
|
|
|
attr :battle, :map, required: true
|
|
attr :player_id, :string, required: true
|
|
attr :tier_list, :map, default: %{}
|
|
|
|
def battle_panel(assigns) do
|
|
~H"""
|
|
<div class="rounded-xl border border-error/20 bg-error/5 overflow-hidden mb-6">
|
|
<%!-- Header --%>
|
|
<div class="px-5 py-3 border-b border-error/15 flex items-center gap-2.5 bg-error/5">
|
|
<span class="w-2 h-2 rounded-full bg-error animate-pulse inline-block"></span>
|
|
<span class="text-sm font-semibold text-error tracking-wide">Active Battle</span>
|
|
</div>
|
|
|
|
<%!-- Actors --%>
|
|
<div class="grid grid-cols-1 md:grid-cols-2">
|
|
<%= for {actor, idx} <- Enum.with_index(@battle.actors) do %>
|
|
<%!-- Divider between actors on mobile, VS bar on desktop --%>
|
|
<div :if={idx == 1} class="md:hidden border-t border-base-300/20 mx-4" />
|
|
<div class={[
|
|
"p-4",
|
|
if(idx == 0, do: "md:border-r border-base-300/20", else: "")
|
|
]}>
|
|
<%!-- Actor header --%>
|
|
<div class={[
|
|
"flex items-center gap-2 mb-3 pb-3 border-b",
|
|
if(actor.player_id == @player_id,
|
|
do: "border-primary/15",
|
|
else: "border-warning/15"
|
|
)
|
|
]}>
|
|
<div class={[
|
|
"w-8 h-8 rounded-lg flex items-center justify-center shrink-0",
|
|
if(actor.type == "player", do: "bg-primary/15", else: "bg-warning/15")
|
|
]}>
|
|
<%= if actor.type == "player" do %>
|
|
<.icon name="hero-user" class="size-4 text-primary" />
|
|
<% else %>
|
|
<.icon name="hero-cpu-chip" class="size-4 text-warning" />
|
|
<% end %>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm font-bold text-base-content truncate">{actor.name}</p>
|
|
<p class={[
|
|
"text-[10px] uppercase font-semibold tracking-widest",
|
|
if(actor.type == "player", do: "text-primary/50", else: "text-warning/50")
|
|
]}>
|
|
{actor.type}
|
|
</p>
|
|
</div>
|
|
<%!-- VS badge for desktop --%>
|
|
<div :if={idx == 0} class="hidden md:flex items-center justify-center">
|
|
<span class="text-xs font-black text-base-content/20">VS</span>
|
|
</div>
|
|
</div>
|
|
|
|
<%!-- Pokemon cards --%>
|
|
<div class="space-y-2">
|
|
<%= for poke <- actor.active_pokemon do %>
|
|
<% tier = Map.get(@tier_list, String.downcase(poke.species || ""), nil) %>
|
|
<% hp_pct = if poke.max_hp > 0, do: Float.round(poke.hp / poke.max_hp * 100, 1), else: 0.0 %>
|
|
<div class="flex items-center gap-3 rounded-lg bg-base-100/40 border border-base-300/20 p-3">
|
|
<%!-- Sprite --%>
|
|
<div class="w-16 h-16 rounded-lg bg-base-300/15 flex items-center justify-center shrink-0">
|
|
<img
|
|
src={"https://img.rankedboost.com/wp-content/plugins/k-Pokemon/assets/sprites-official/#{String.downcase(poke.species || "")}.png"}
|
|
alt={poke.species}
|
|
class="w-14 h-14 object-contain drop-shadow-sm"
|
|
/>
|
|
</div>
|
|
<%!-- Info --%>
|
|
<div class="flex-1 min-w-0">
|
|
<%!-- Name row --%>
|
|
<div class="flex items-center gap-2 mb-1.5">
|
|
<span class="text-sm font-bold text-base-content capitalize truncate">{poke.species}</span>
|
|
<span class="text-[10px] text-base-content/35 bg-base-300/30 px-1.5 py-0.5 rounded font-mono shrink-0">
|
|
Lv.{poke.level}
|
|
</span>
|
|
<.tier_badge :if={tier} tier={tier} species={poke.species} compact={true} />
|
|
</div>
|
|
<%!-- HP bar --%>
|
|
<div class="w-full h-2 rounded-full bg-base-300/40 overflow-hidden mb-1">
|
|
<div
|
|
class={[
|
|
"h-full rounded-full transition-all duration-500",
|
|
cond do
|
|
poke.max_hp == 0 -> "bg-base-content/20"
|
|
hp_pct > 50 -> "bg-success"
|
|
hp_pct > 20 -> "bg-warning"
|
|
true -> "bg-error"
|
|
end
|
|
]}
|
|
style={"width: #{hp_pct}%"}
|
|
/>
|
|
</div>
|
|
<%!-- HP numbers --%>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-[10px] text-base-content/35 font-medium">HP</span>
|
|
<span class="text-[10px] font-mono text-base-content/40">
|
|
{poke.hp} / {poke.max_hp}
|
|
<span class="text-base-content/25 ml-1">({hp_pct}%)</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
"""
|
|
end
|
|
end
|