show evolutions as well
All checks were successful
Build and Deploy / Build & Push Image (push) Successful in 33s

This commit is contained in:
2026-03-18 20:28:06 -06:00
parent a8e3c9b1cc
commit d48f23b022
7 changed files with 4431 additions and 106 deletions

View File

@@ -6,6 +6,7 @@ defmodule CobblemonUiWeb.BattleComponents do
attr :battle, :map, required: true
attr :player_id, :string, required: true
attr :tier_list, :map, default: %{}
attr :evolutions, :map, default: %{}
def battle_panel(assigns) do
~H"""
@@ -51,12 +52,15 @@ defmodule CobblemonUiWeb.BattleComponents do
</div>
<%= for poke <- actor.active_pokemon do %>
<% tier = Map.get(@tier_list, String.downcase(poke.species || ""), nil) %>
<% species_key = String.downcase(poke.species || "") %>
<% is_opponent = actor.player_id != @player_id %>
<% evos = if is_opponent, do: Map.get(@evolutions, species_key, []), else: [] %>
<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"}
src={"https://img.rankedboost.com/wp-content/plugins/k-Pokemon/assets/sprites-official/#{species_key}.png"}
alt={poke.species}
class="w-12 h-12 object-contain drop-shadow-sm"
/>
@@ -64,7 +68,9 @@ defmodule CobblemonUiWeb.BattleComponents do
<%!-- 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-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>
@@ -92,6 +98,31 @@ defmodule CobblemonUiWeb.BattleComponents do
</div>
</div>
</div>
<%!-- Evolution info for opponent Pokémon --%>
<div :if={evos != []} class="mt-2 pt-2 border-t border-base-300/20">
<div class="flex items-center gap-1.5 mb-1.5">
<.icon name="hero-arrow-trending-up" class="size-3 text-info/60" />
<span class="text-[10px] uppercase font-semibold tracking-wide text-info/60">
Evolves into
</span>
</div>
<div class="flex flex-wrap gap-1.5">
<%= for evo <- evos do %>
<% evo_tier = Map.get(@tier_list, evo, nil) %>
<div class="flex items-center gap-1.5 rounded-md bg-info/5 border border-info/15 px-2 py-1">
<img
src={"https://img.rankedboost.com/wp-content/plugins/k-Pokemon/assets/sprites-official/#{evo}.png"}
alt={evo}
class="w-6 h-6 object-contain"
/>
<span class="text-xs font-semibold text-base-content/70 capitalize">
{evo}
</span>
<.tier_badge :if={evo_tier} tier={evo_tier} species={evo} compact={true} />
</div>
<% end %>
</div>
</div>
</div>
<% end %>
</div>