alex/cobblemon-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new battle ui
All checks were successful
Build and Deploy / Build & Push Image (push) Successful in 14s
Details

Browse Source
This commit is contained in:
Alex Mickelson
2026-03-16 21:13:35 -06:00
parent c5ebf5b9af
commit c2297d0fdd
2 changed files with 44 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
lib/cobblemon_ui_web/live/battle_components.ex
View File

@@ -1,8 +1,11 @@
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"""
@@ -25,7 +28,7 @@ defmodule CobblemonUiWeb.BattleComponents do
else: "border-warning/25 bg-warning/5"
)
]}>
<div class="flex items-center gap-2 mb-2">
<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")
@@ -47,31 +50,47 @@ defmodule CobblemonUiWeb.BattleComponents do
</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 justify-between mb-1">
<div class="flex items-center gap-1.5">
<span class="text-sm font-bold text-base-content">{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>
<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>
<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>
<% end %>