view

lib/cobblemon_ui_web/live/battle_components.ex

@@ -0,0 +1,84 @@
+defmodule CobblemonUiWeb.BattleComponents do
+  use CobblemonUiWeb, :html
+
+  attr :battle, :map, required: true
+  attr :player_id, :string, required: true
+
+  def battle_panel(assigns) do
+    ~H"""
+    <div class="rounded-xl border border-error/30 bg-error/5 overflow-hidden mb-6">
+      <div class="px-5 py-3 border-b border-error/20 flex items-center gap-2">
+        <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>
+      </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">
+          <span class="text-base font-black text-base-content/20 bg-base-200/80 px-2 py-1 rounded-lg">
+            VS
+          </span>
+        </div>
+        <%= for actor <- @battle.actors do %>
+          <div class={[
+            "rounded-lg border p-3",
+            if(actor.player_id == @player_id,
+              do: "border-primary/25 bg-primary/5",
+              else: "border-warning/25 bg-warning/5"
+            )
+          ]}>
+            <div class="flex items-center gap-2 mb-2">
+              <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")
+              ]}>
+                <%= if actor.type == "player" do %>
+                  <.icon name="hero-user" class="size-3.5 text-primary" />
+                <% else %>
+                  <.icon name="hero-cpu-chip" class="size-3.5 text-warning" />
+                <% end %>
+              </div>
+              <div>
+                <p class="text-sm font-semibold text-base-content">{actor.name}</p>
+                <p class={[
+                  "text-[10px] uppercase font-medium tracking-wide",
+                  if(actor.type == "player", do: "text-primary/60", else: "text-warning/60")
+                ]}>
+                  {actor.type}
+                </p>
+              </div>
+            </div>
+            <%= for poke <- actor.active_pokemon do %>
+              <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>
+                  <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 %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+    """
+  end
+end