updates

lib/cobblemon_ui_web/live/pokemon_components.ex

@@ -89,6 +89,76 @@ defmodule CobblemonUiWeb.PokemonComponents do
     """
   end
 
+  attr :pokemon, :map, required: true
+  attr :index, :integer, required: true
+  attr :tier, :string, default: nil
+  attr :types, :list, default: []
+  attr :evo_tiers, :list, default: []
+
+  def pc_pokemon_card(assigns) do
+    ~H"""
+    <div
+      phx-click="select_pokemon"
+      phx-value-index={@index}
+      class="group rounded-lg border border-base-300/30 bg-base-200/20 hover:bg-base-200/40 hover:border-primary/30 transition-all duration-150 cursor-pointer hover:shadow-md hover:shadow-primary/5 p-3"
+    >
+      <div class="flex items-start gap-2.5">
+        <%!-- Sprite --%>
+        <div class="w-12 h-12 rounded-lg bg-base-300/15 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(@pokemon.species || "")}.png"}
+            alt={@pokemon.species}
+            class="w-10 h-10 object-contain drop-shadow-sm"
+          />
+        </div>
+        <%!-- Info --%>
+        <div class="flex-1 min-w-0">
+          <div class="flex items-center gap-1.5">
+            <span class="text-xs font-semibold text-base-content/90 capitalize truncate group-hover:text-primary transition-colors">
+              {@pokemon.species || "Unknown"}
+            </span>
+            <.tier_badge :if={@tier} tier={@tier} species={@pokemon.species} compact={true} />
+          </div>
+          <p class="text-[10px] text-base-content/40 mt-0.5">
+            Lv. {@pokemon.level || "?"}
+          </p>
+          <%!-- Types --%>
+          <div :if={@types != []} class="flex flex-wrap gap-1 mt-1.5">
+            <span
+              :for={type <- @types}
+              class={[
+                "inline-block text-[9px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded leading-none text-white/90",
+                CobblemonUi.TypeChart.type_color(type)
+              ]}
+            >
+              {type}
+            </span>
+          </div>
+        </div>
+      </div>
+      <%!-- Evolution tiers --%>
+      <div :if={@evo_tiers != []} class="mt-2 pt-2 border-t border-base-content/5">
+        <div class="flex items-center gap-1 flex-wrap">
+          <span class="text-[9px] text-base-content/25 uppercase tracking-wider font-medium mr-0.5">
+            Evo
+          </span>
+          <%= for evo <- @evo_tiers do %>
+            <div class="flex items-center gap-1 rounded bg-base-300/15 px-1.5 py-0.5">
+              <img
+                src={"https://img.rankedboost.com/wp-content/plugins/k-Pokemon/assets/sprites-official/#{evo.species}.png"}
+                alt={evo.species}
+                class="w-4 h-4 object-contain opacity-70"
+              />
+              <span class="text-[9px] text-base-content/40 capitalize">{evo.species}</span>
+              <.tier_badge :if={evo.tier} tier={evo.tier} species={evo.species} compact={true} />
+            </div>
+          <% end %>
+        </div>
+      </div>
+    </div>
+    """
+  end
+
   attr :tier, :string, required: true
   attr :species, :string, required: true
   attr :compact, :boolean, default: false
@@ -281,6 +351,232 @@ defmodule CobblemonUiWeb.PokemonComponents do
     """
   end
 
+  # --- Type Chart Component ---
+
+  alias CobblemonUi.TypeChart
+
+  attr :selected_type, :string, default: nil
+
+  def type_chart(assigns) do
+    chart = TypeChart.defensive_chart()
+    offense = TypeChart.offensive_chart()
+    types = TypeChart.types()
+
+    assigns = assign(assigns, chart: chart, offense: offense, types: types)
+
+    ~H"""
+    <div class="mt-8 rounded-xl border border-base-300/40 bg-base-200/30 overflow-hidden">
+      <div class="px-5 py-4 border-b border-base-300/30 flex items-center gap-3">
+        <div class="w-10 h-10 rounded-lg bg-primary/15 flex items-center justify-center shrink-0">
+          <.icon name="hero-table-cells" class="size-5 text-primary/80" />
+        </div>
+        <div>
+          <h3 class="font-bold text-base-content text-lg">Type Chart</h3>
+          <p class="text-xs text-base-content/40">
+            Tap a type to see its matchups
+          </p>
+        </div>
+      </div>
+
+      <%!-- Type picker grid --%>
+      <div class="px-5 pt-4 pb-2">
+        <div class="flex flex-wrap gap-1.5">
+          <button
+            :for={t <- @types}
+            phx-click="select_type"
+            phx-value-type={t}
+            class={[
+              "inline-flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-xs font-semibold capitalize transition-all duration-150 border cursor-pointer",
+              if(@selected_type == t,
+                do: "ring-2 ring-primary/60 border-primary/40 bg-base-100 shadow-md scale-105",
+                else:
+                  "border-base-300/30 bg-base-200/40 hover:bg-base-200/70 hover:border-base-300/50 hover:shadow-sm"
+              )
+            ]}
+          >
+            <span class={[
+              "inline-block w-2.5 h-2.5 rounded-full shrink-0",
+              type_bg(@selected_type == t, t)
+            ]} />
+            {t}
+          </button>
+        </div>
+      </div>
+
+      <%!-- Selected type detail --%>
+      <%= if @selected_type do %>
+        <div class="px-5 py-4 animate-in fade-in duration-200">
+          <div class="flex items-center gap-3 mb-5">
+            <div class={[
+              "w-12 h-12 rounded-xl flex items-center justify-center shrink-0 shadow-sm",
+              TypeChart.type_color(@selected_type)
+            ]}>
+              <.icon name={TypeChart.type_icon(@selected_type)} class="size-6 text-white drop-shadow" />
+            </div>
+            <div>
+              <h4 class="font-bold text-base-content capitalize text-xl">{@selected_type}</h4>
+              <p class="text-xs text-base-content/40">Defensive & Offensive matchups</p>
+            </div>
+            <button
+              phx-click="select_type"
+              phx-value-type=""
+              class="ml-auto btn btn-ghost btn-sm btn-circle hover:bg-base-300/50"
+            >
+              <.icon name="hero-x-mark" class="size-4" />
+            </button>
+          </div>
+
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
+            <%!-- Defensive --%>
+            <div class="space-y-4">
+              <h5 class="text-xs font-semibold text-base-content/40 uppercase tracking-wider flex items-center gap-1.5">
+                <.icon name="hero-shield-check" class="size-3.5" /> Defensive
+              </h5>
+
+              <%!-- Weak to --%>
+              <div>
+                <p class="text-[11px] text-error/80 font-semibold uppercase tracking-wider mb-1.5 flex items-center gap-1">
+                  <.icon name="hero-exclamation-triangle" class="size-3" /> Weak to (2×)
+                </p>
+                <div class="flex flex-wrap gap-1.5">
+                  <.type_pill
+                    :for={t <- @chart[@selected_type].weak_to}
+                    type_name={t}
+                  />
+                  <span
+                    :if={@chart[@selected_type].weak_to == []}
+                    class="text-xs text-base-content/25 italic"
+                  >
+                    None
+                  </span>
+                </div>
+              </div>
+
+              <%!-- Resists --%>
+              <div>
+                <p class="text-[11px] text-success/80 font-semibold uppercase tracking-wider mb-1.5 flex items-center gap-1">
+                  <.icon name="hero-shield-check" class="size-3" /> Resists (½×)
+                </p>
+                <div class="flex flex-wrap gap-1.5">
+                  <.type_pill
+                    :for={t <- @chart[@selected_type].resists}
+                    type_name={t}
+                  />
+                  <span
+                    :if={@chart[@selected_type].resists == []}
+                    class="text-xs text-base-content/25 italic"
+                  >
+                    None
+                  </span>
+                </div>
+              </div>
+
+              <%!-- Immune to --%>
+              <div :if={@chart[@selected_type].immune_to != []}>
+                <p class="text-[11px] text-info/80 font-semibold uppercase tracking-wider mb-1.5 flex items-center gap-1">
+                  <.icon name="hero-no-symbol" class="size-3" /> Immune to (0×)
+                </p>
+                <div class="flex flex-wrap gap-1.5">
+                  <.type_pill
+                    :for={t <- @chart[@selected_type].immune_to}
+                    type_name={t}
+                  />
+                </div>
+              </div>
+            </div>
+
+            <%!-- Offensive --%>
+            <div class="space-y-4">
+              <h5 class="text-xs font-semibold text-base-content/40 uppercase tracking-wider flex items-center gap-1.5">
+                <.icon name="hero-bolt" class="size-3.5" /> Offensive
+              </h5>
+
+              <%!-- Super effective --%>
+              <div>
+                <p class="text-[11px] text-error/80 font-semibold uppercase tracking-wider mb-1.5 flex items-center gap-1">
+                  <.icon name="hero-bolt" class="size-3" /> Super effective (2×)
+                </p>
+                <div class="flex flex-wrap gap-1.5">
+                  <.type_pill
+                    :for={t <- @offense[@selected_type].strong_against}
+                    type_name={t}
+                  />
+                  <span
+                    :if={@offense[@selected_type].strong_against == []}
+                    class="text-xs text-base-content/25 italic"
+                  >
+                    None
+                  </span>
+                </div>
+              </div>
+
+              <%!-- Not very effective --%>
+              <div>
+                <p class="text-[11px] text-warning/80 font-semibold uppercase tracking-wider mb-1.5 flex items-center gap-1">
+                  <.icon name="hero-shield-exclamation" class="size-3" /> Not very effective (½×)
+                </p>
+                <div class="flex flex-wrap gap-1.5">
+                  <.type_pill
+                    :for={t <- @offense[@selected_type].not_effective}
+                    type_name={t}
+                  />
+                  <span
+                    :if={@offense[@selected_type].not_effective == []}
+                    class="text-xs text-base-content/25 italic"
+                  >
+                    None
+                  </span>
+                </div>
+              </div>
+
+              <%!-- No effect --%>
+              <div :if={@offense[@selected_type].no_effect != []}>
+                <p class="text-[11px] text-base-content/40 font-semibold uppercase tracking-wider mb-1.5 flex items-center gap-1">
+                  <.icon name="hero-no-symbol" class="size-3" /> No effect (0×)
+                </p>
+                <div class="flex flex-wrap gap-1.5">
+                  <.type_pill
+                    :for={t <- @offense[@selected_type].no_effect}
+                    type_name={t}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      <% else %>
+        <%!-- Compact overview when no type selected --%>
+        <div class="px-5 pb-4">
+          <p class="text-xs text-base-content/30 italic">Select a type above to view matchups</p>
+        </div>
+      <% end %>
+    </div>
+    """
+  end
+
+  attr :type_name, :string, required: true
+
+  def type_pill(assigns) do
+    ~H"""
+    <button
+      phx-click="select_type"
+      phx-value-type={@type_name}
+      class={[
+        "inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-semibold capitalize",
+        "border transition-all duration-150 cursor-pointer hover:scale-105 hover:shadow-sm",
+        TypeChart.type_color(@type_name),
+        "text-white border-white/10"
+      ]}
+    >
+      <.icon name={TypeChart.type_icon(@type_name)} class="size-3 drop-shadow" />
+      {@type_name}
+    </button>
+    """
+  end
+
+  defp type_bg(true, type), do: TypeChart.type_color(type)
+  defp type_bg(false, type), do: TypeChart.type_color(type) <> "/60"
+
   # --- Helpers ---
 
   defp gender_symbol("male"), do: "♂"