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

style upload
All checks were successful
Build and Deploy / Build & Push Image (push) Successful in 31s
Details

Browse Source
This commit is contained in:
Alex Mickelson
2026-03-16 21:19:34 -06:00
parent c2297d0fdd
commit 452b2ab21b
2 changed files with 62 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,92 +9,107 @@ defmodule CobblemonUiWeb.BattleComponents do
def battle_panel(assigns) do def battle_panel(assigns) do
~H""" ~H"""
<div class="rounded-xl border border-error/30 bg-error/5 overflow-hidden mb-6"> <div class="rounded-xl border border-error/20 bg-error/5 overflow-hidden mb-6">
<div class="px-5 py-3 border-b border-error/20 flex items-center gap-2"> <%!-- 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="w-2 h-2 rounded-full bg-error animate-pulse inline-block"></span>
<span class="text-sm font-semibold text-error">Active Battle</span> <span class="text-sm font-semibold text-error tracking-wide">Active Battle</span>
</div> </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"> <%!-- Actors --%>
<span class="text-base font-black text-base-content/20 bg-base-200/80 px-2 py-1 rounded-lg"> <div class="grid grid-cols-1 md:grid-cols-2">
VS <%= for {actor, idx} <- Enum.with_index(@battle.actors) do %>
</span> <%!-- Divider between actors on mobile, VS bar on desktop --%>
</div> <div :if={idx == 1} class="md:hidden border-t border-base-300/20 mx-4" />
<%= for actor <- @battle.actors do %>
<div class={[ <div class={[
"rounded-lg border p-3", "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, if(actor.player_id == @player_id,
do: "border-primary/25 bg-primary/5", do: "border-primary/15",
else: "border-warning/25 bg-warning/5" else: "border-warning/15"
) )
]}> ]}>
<div class="flex items-center gap-2 mb-3">
<div class={[ <div class={[
"w-7 h-7 rounded-md flex items-center justify-center shrink-0", "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: "bg-primary/15", else: "bg-warning/15")
]}> ]}>
<%= if actor.type == "player" do %> <%= if actor.type == "player" do %>
<.icon name="hero-user" class="size-3.5 text-primary" /> <.icon name="hero-user" class="size-4 text-primary" />
<% else %> <% else %>
<.icon name="hero-cpu-chip" class="size-3.5 text-warning" /> <.icon name="hero-cpu-chip" class="size-4 text-warning" />
<% end %> <% end %>
</div> </div>
<div> <div class="flex-1 min-w-0">
<p class="text-sm font-semibold text-base-content">{actor.name}</p> <p class="text-sm font-bold text-base-content truncate">{actor.name}</p>
<p class={[ <p class={[
"text-[10px] uppercase font-medium tracking-wide", "text-[10px] uppercase font-semibold tracking-widest",
if(actor.type == "player", do: "text-primary/60", else: "text-warning/60") if(actor.type == "player", do: "text-primary/50", else: "text-warning/50")
]}> ]}>
{actor.type} {actor.type}
</p> </p>
</div> </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>
</div>
<%!-- Pokemon cards --%>
<div class="space-y-2">
<%= for poke <- actor.active_pokemon do %> <%= for poke <- actor.active_pokemon do %>
<% tier = Map.get(@tier_list, String.downcase(poke.species || ""), nil) %> <% 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"> <% 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"> <div class="flex items-center gap-3 rounded-lg bg-base-100/40 border border-base-300/20 p-3">
<%!-- Sprite --%> <%!-- Sprite --%>
<div class="w-14 h-14 rounded-lg bg-base-300/20 flex items-center justify-center shrink-0 overflow-hidden"> <div class="w-16 h-16 rounded-lg bg-base-300/15 flex items-center justify-center shrink-0">
<img <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/#{String.downcase(poke.species || "")}.png"}
alt={poke.species} alt={poke.species}
class="w-12 h-12 object-contain drop-shadow-sm" class="w-14 h-14 object-contain drop-shadow-sm"
/> />
</div> </div>
<%!-- Info --%> <%!-- Info --%>
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<div class="flex items-center gap-1.5 mb-1"> <%!-- Name row --%>
<span class="text-sm font-bold text-base-content capitalize">{poke.species}</span> <div class="flex items-center gap-2 mb-1.5">
<span class="text-[10px] text-base-content/40 bg-base-300/40 px-1.5 py-0.5 rounded font-mono"> <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} Lv.{poke.level}
</span> </span>
<.tier_badge :if={tier} tier={tier} species={poke.species} compact={true} /> <.tier_badge :if={tier} tier={tier} species={poke.species} compact={true} />
</div> </div>
<div class="flex items-center justify-between mb-1"> <%!-- HP bar --%>
<span class="text-[11px] text-base-content/40">HP</span> <div class="w-full h-2 rounded-full bg-base-300/40 overflow-hidden mb-1">
<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 <div
class={[ class={[
"h-full rounded-full transition-all", "h-full rounded-full transition-all duration-500",
cond do cond do
poke.max_hp == 0 -> "bg-base-content/20" poke.max_hp == 0 -> "bg-base-content/20"
poke.hp / poke.max_hp > 0.5 -> "bg-success" hp_pct > 50 -> "bg-success"
poke.hp / poke.max_hp > 0.2 -> "bg-warning" hp_pct > 20 -> "bg-warning"
true -> "bg-error" true -> "bg-error"
end end
]} ]}
style={"width: #{if poke.max_hp > 0, do: Float.round(poke.hp / poke.max_hp * 100, 1), else: 0}%"} style={"width: #{hp_pct}%"}
/> />
</div> </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> </div>
</div> </div>
<% end %> <% end %>
</div> </div>
</div>
<% end %> <% end %>
</div> </div>
</div> </div>

4
lib/cobblemon_ui_web/live/pokemon_components.ex
View File

@@ -52,7 +52,7 @@ defmodule CobblemonUiWeb.PokemonComponents do
class={[ class={[
"inline-flex items-center justify-center font-black rounded leading-none shrink-0", "inline-flex items-center justify-center font-black rounded leading-none shrink-0",
"bg-base-300/20 text-base-content/25 ring-1 ring-base-300/30", "bg-base-300/20 text-base-content/25 ring-1 ring-base-300/30",
if(@compact, do: "text-[9px] w-4 h-4", else: "text-[10px] w-5 h-5") if(@compact, do: "text-[11px] w-6 h-6", else: "text-sm w-7 h-7")
]} ]}
> >
? ?
@@ -101,7 +101,7 @@ defmodule CobblemonUiWeb.PokemonComponents do
rel="noopener noreferrer" rel="noopener noreferrer"
class={[ class={[
"inline-flex items-center justify-center font-black rounded leading-none shrink-0 hover:scale-110 transition-transform", "inline-flex items-center justify-center font-black rounded leading-none shrink-0 hover:scale-110 transition-transform",
if(@compact, do: "text-[9px] w-4 h-4", else: "text-[10px] w-5 h-5"), if(@compact, do: "text-[11px] w-6 h-6", else: "text-sm w-7 h-7"),
case @tier do case @tier do
"S" -> "bg-red-500/20 text-red-400 ring-1 ring-red-500/30 hover:bg-red-500/30" "S" -> "bg-red-500/20 text-red-400 ring-1 ring-red-500/30 hover:bg-red-500/30"
"A" -> "bg-orange-500/20 text-orange-400 ring-1 ring-orange-500/30 hover:bg-orange-500/30" "A" -> "bg-orange-500/20 text-orange-400 ring-1 ring-orange-500/30 hover:bg-orange-500/30"