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