Alex Mickelson
c2297d0fdd
All checks were successful
Build and Deploy / Build & Push Image (push) Successful in 14s
104 lines
4.7 KiB
Elixir
104 lines
4.7 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/30 bg-error/5 overflow-hidden mb-6">
|
|
<div class="px-5 py-3 border-b border-error/20 flex items-center gap-2">
|
|
<span class="w-2 h-2 rounded-full bg-error animate-pulse inline-block"></span>
|
|
<span class="text-sm font-semibold text-error">Active Battle</span>
|
|
</div>
|
|
<div class="p-4 grid grid-cols-1 md:grid-cols-2 gap-3 relative">
|
|
<div class="hidden md:flex absolute inset-y-0 left-1/2 -translate-x-1/2 items-center justify-center z-10 pointer-events-none">
|
|
<span class="text-base font-black text-base-content/20 bg-base-200/80 px-2 py-1 rounded-lg">
|
|
VS
|
|
</span>
|
|
</div>
|
|
<%= for actor <- @battle.actors do %>
|
|
<div class={[
|
|
"rounded-lg border p-3",
|
|
if(actor.player_id == @player_id,
|
|
do: "border-primary/25 bg-primary/5",
|
|
else: "border-warning/25 bg-warning/5"
|
|
)
|
|
]}>
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<div class={[
|
|
"w-7 h-7 rounded-md 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-3.5 text-primary" />
|
|
<% else %>
|
|
<.icon name="hero-cpu-chip" class="size-3.5 text-warning" />
|
|
<% end %>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-semibold text-base-content">{actor.name}</p>
|
|
<p class={[
|
|
"text-[10px] uppercase font-medium tracking-wide",
|
|
if(actor.type == "player", do: "text-primary/60", else: "text-warning/60")
|
|
]}>
|
|
{actor.type}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<%= for poke <- actor.active_pokemon do %>
|
|
<% tier = Map.get(@tier_list, String.downcase(poke.species || ""), nil) %>
|
|
<div class="rounded-md bg-base-100/50 border border-base-300/30 px-3 py-2">
|
|
<div class="flex items-center gap-3">
|
|
<%!-- Sprite --%>
|
|
<div class="w-14 h-14 rounded-lg bg-base-300/20 flex items-center justify-center shrink-0 overflow-hidden">
|
|
<img
|
|
src={"https://img.rankedboost.com/wp-content/plugins/k-Pokemon/assets/sprites-official/#{String.downcase(poke.species || "")}.png"}
|
|
alt={poke.species}
|
|
class="w-12 h-12 object-contain drop-shadow-sm"
|
|
/>
|
|
</div>
|
|
<%!-- Info --%>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center gap-1.5 mb-1">
|
|
<span class="text-sm font-bold text-base-content capitalize">{poke.species}</span>
|
|
<span class="text-[10px] text-base-content/40 bg-base-300/40 px-1.5 py-0.5 rounded font-mono">
|
|
Lv.{poke.level}
|
|
</span>
|
|
<.tier_badge :if={tier} tier={tier} species={poke.species} compact={true} />
|
|
</div>
|
|
<div class="flex items-center justify-between mb-1">
|
|
<span class="text-[11px] text-base-content/40">HP</span>
|
|
<span class="text-xs font-mono text-base-content/50">
|
|
{poke.hp}/{poke.max_hp}
|
|
</span>
|
|
</div>
|
|
<div class="w-full h-1.5 rounded-full bg-base-300/50 overflow-hidden">
|
|
<div
|
|
class={[
|
|
"h-full rounded-full transition-all",
|
|
cond do
|
|
poke.max_hp == 0 -> "bg-base-content/20"
|
|
poke.hp / poke.max_hp > 0.5 -> "bg-success"
|
|
poke.hp / poke.max_hp > 0.2 -> "bg-warning"
|
|
true -> "bg-error"
|
|
end
|
|
]}
|
|
style={"width: #{if poke.max_hp > 0, do: Float.round(poke.hp / poke.max_hp * 100, 1), else: 0}%"}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
"""
|
|
end
|
|
end
|