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

updates
All checks were successful
Build and Deploy / Build & Push Image (push) Successful in 33s
Details

Browse Source
This commit is contained in:
Alex Mickelson
2026-03-25 21:41:03 -06:00
parent 991d284f69
commit 99474f5502
1 changed files with 71 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -31,62 +31,77 @@ defmodule CobblemonUiWeb.PokemonComponents do
if(@compact, do: "p-2.5", else: "p-3.5") if(@compact, do: "p-2.5", else: "p-3.5")
]} ]}
> >
<div class="flex items-start justify-between"> <div class="flex items-start gap-3">
<div class="min-w-0"> <%!-- Sprite (party only) --%>
<p class={[ <div
"font-semibold text-base-content/90 capitalize truncate group-hover:text-primary transition-colors", :if={!@compact}
if(@compact, do: "text-xs", else: "text-sm") class="w-14 h-14 rounded-lg bg-base-300/15 flex items-center justify-center shrink-0 overflow-hidden"
]}> >
{@pokemon.species || "Unknown"} <img
</p> src={CobblemonUi.SpriteCache.sprite_url(@pokemon.species || "")}
<p class={[ alt={@pokemon.species}
"text-base-content/40 mt-0.5", class="w-12 h-12 object-contain drop-shadow-sm"
if(@compact, do: "text-[10px]", else: "text-xs") />
]}>
Lv. {@pokemon.level || "?"}
</p>
</div> </div>
<div class="flex items-center gap-1 shrink-0"> <div class="flex-1 min-w-0">
<.tier_badge :if={@tier} tier={@tier} species={@pokemon.species} compact={@compact} /> <div class="flex items-start justify-between">
<div <div class="min-w-0">
:if={!@tier} <p class={[
title="Tier data not downloaded" "font-semibold text-base-content/90 capitalize truncate group-hover:text-primary transition-colors",
class={[ if(@compact, do: "text-xs", else: "text-sm")
"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", {@pokemon.species || "Unknown"}
if(@compact, do: "text-[9px] w-4 h-4", else: "text-[10px] w-5 h-5") </p>
]} <p class={[
> "text-base-content/40 mt-0.5",
? if(@compact, do: "text-[10px]", else: "text-xs")
]}>
Lv. {@pokemon.level || "?"}
</p>
</div>
<div class="flex items-center gap-1 shrink-0">
<.tier_badge :if={@tier} tier={@tier} species={@pokemon.species} compact={@compact} />
<div
:if={!@tier}
title="Tier data not downloaded"
class={[
"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",
if(@compact, do: "text-[9px] w-4 h-4", else: "text-[10px] w-5 h-5")
]}
>
?
</div>
<div :if={@pokemon.shiny} title="Shiny">
<.icon
name="hero-sparkles"
class={[
"text-warning",
if(@compact, do: "size-3", else: "size-4")
]}
/>
</div>
</div>
</div> </div>
<div :if={@pokemon.shiny} title="Shiny"> <div :if={!@compact} class="flex items-center gap-2 mt-2">
<.icon <span
name="hero-sparkles" :if={@pokemon.nature}
class="inline-block text-[10px] px-1.5 py-0.5 rounded bg-base-300/40 text-base-content/50 capitalize"
>
{@pokemon.nature}
</span>
<span
:if={@pokemon.gender}
class={[ class={[
"text-warning", "text-[10px] font-bold",
if(@compact, do: "size-3", else: "size-4") gender_color(@pokemon.gender)
]} ]}
/> >
{gender_symbol(@pokemon.gender)}
</span>
</div> </div>
</div> </div>
</div> </div>
<div :if={!@compact} class="flex items-center gap-2 mt-2">
<span
:if={@pokemon.nature}
class="inline-block text-[10px] px-1.5 py-0.5 rounded bg-base-300/40 text-base-content/50 capitalize"
>
{@pokemon.nature}
</span>
<span
:if={@pokemon.gender}
class={[
"text-[10px] font-bold",
gender_color(@pokemon.gender)
]}
>
{gender_symbol(@pokemon.gender)}
</span>
</div>
</div> </div>
""" """
end end
@@ -388,12 +403,12 @@ defmodule CobblemonUiWeb.PokemonComponents do
def type_chart_card(assigns) do def type_chart_card(assigns) do
~H""" ~H"""
<div class="flex items-start gap-3 rounded-xl bg-base-200/40 border border-base-300/20 px-3.5 py-3 hover:bg-base-200/60 transition-colors"> <div class="flex items-start gap-3 rounded-xl bg-base-200/40 border border-base-300/20 px-3.5 py-3 hover:bg-base-200/60 transition-colors">
<%!-- Type icon circle --%> <%!-- Type icon --%>
<div class={[ <div class={[
"w-11 h-11 rounded-full flex items-center justify-center shrink-0 shadow-sm mt-0.5 text-white", "w-11 h-11 flex items-center justify-center shrink-0 mt-0.5",
TypeChart.type_color(@type_name) TypeChart.type_text_color(@type_name)
]}> ]}>
<TypeIcons.type_icon type={@type_name} class="w-6 h-6" /> <TypeIcons.type_icon type={@type_name} class="w-8 h-8" />
</div> </div>
<%!-- Weakness / Resistance rows --%> <%!-- Weakness / Resistance rows --%>
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
@@ -442,12 +457,12 @@ defmodule CobblemonUiWeb.PokemonComponents do
~H""" ~H"""
<span <span
class={[ class={[
"inline-flex items-center justify-center w-5 h-5 rounded-full shadow-sm text-white", "inline-flex items-center justify-center w-5 h-5",
TypeChart.type_color(@type_name) TypeChart.type_text_color(@type_name)
]} ]}
title={@type_name} title={@type_name}
> >
<TypeIcons.type_icon type={@type_name} class="w-3 h-3" /> <TypeIcons.type_icon type={@type_name} class="w-4 h-4" />
</span> </span>
""" """
end end