Initial commit: MTG deck wheel Phoenix app

lib/mtg_wheel_web/live/wheel_live.ex

@@ -0,0 +1,98 @@
+defmodule MtgWheelWeb.WheelLive do
+  use MtgWheelWeb, :live_view
+  alias MtgWheel.DeckGenerator
+
+  @spin_duration_ms 3000
+
+  @impl true
+  def mount(_params, _session, socket) do
+    {:ok,
+     assign(socket,
+       page_title: "MTG Deck Wheel",
+       spinning: false,
+       result: nil,
+       budgets: DeckGenerator.budgets(),
+       archetypes: DeckGenerator.archetypes(),
+       subthemes: DeckGenerator.subthemes(),
+       color_combos: DeckGenerator.color_combos()
+     )}
+  end
+
+  @impl true
+  def handle_event("spin", _params, socket) do
+    result = DeckGenerator.generate()
+    Process.send_after(self(), :stop_spin, @spin_duration_ms)
+    {:noreply, assign(socket, spinning: true, result: result)}
+  end
+
+  @impl true
+  def handle_info(:stop_spin, socket) do
+    {:noreply, assign(socket, spinning: false)}
+  end
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div class="min-h-screen bg-gray-950 text-white flex flex-col items-center justify-center p-8 gap-10">
+      <h1 class="text-4xl font-bold tracking-tight text-purple-400">MTG Deck Wheel</h1>
+
+      <div class="grid grid-cols-2 gap-8 md:grid-cols-4">
+        <.wheel label="Budget" items={Enum.map(@budgets, &"$#{&1}")} result={@result && @result.budget} spinning={@spinning} />
+        <.wheel label="Archetype" items={@archetypes} result={@result && @result.archetype} spinning={@spinning} />
+        <.wheel label="Subtheme" items={@subthemes} result={@result && @result.subtheme} spinning={@spinning} />
+        <.wheel label="Colors" items={@color_combos} result={@result && @result.colors} spinning={@spinning} />
+      </div>
+
+      <button
+        phx-click="spin"
+        disabled={@spinning}
+        class="mt-4 px-10 py-4 rounded-full text-xl font-semibold bg-purple-600 hover:bg-purple-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-lg shadow-purple-900"
+      >
+        <%= if @spinning, do: "Spinning...", else: "Spin!" %>
+      </button>
+
+      <div class={["mt-2 rounded-2xl bg-gray-800 border border-purple-700 p-6 w-full max-w-lg text-center shadow-xl", (@result == nil || @spinning) && "invisible"]}>
+        <h2 class="text-lg font-semibold text-purple-300 mb-3">Your Deck</h2>
+        <div class="grid grid-cols-2 gap-3 text-sm">
+          <.stat label="Budget" value={@result && @result.budget} />
+          <.stat label="Archetype" value={@result && @result.archetype} />
+          <.stat label="Subtheme" value={@result && @result.subtheme} />
+          <.stat label="Colors" value={@result && @result.colors} />
+        </div>
+      </div>
+    </div>
+    """
+  end
+
+  defp wheel(assigns) do
+    ~H"""
+    <div class="flex flex-col items-center gap-2">
+      <span class="text-xs font-semibold uppercase tracking-widest text-gray-400"><%= @label %></span>
+      <div class="relative w-28 h-28 rounded-full border-4 border-purple-600 overflow-hidden bg-gray-900 shadow-lg shadow-purple-950">
+        <div class={["wheel-inner absolute inset-0 flex flex-col items-center", @spinning && "spinning"]}>
+          <%= for _ <- 1..5 do %>
+            <%= for item <- @items do %>
+              <div class="wheel-item flex-shrink-0 w-full h-28 flex items-center justify-center text-xs font-bold text-center px-1">
+                <%= item %>
+              </div>
+            <% end %>
+          <% end %>
+        </div>
+        <div class="absolute inset-0 pointer-events-none rounded-full ring-4 ring-purple-500/30"></div>
+      </div>
+      <span class={["text-sm font-bold text-purple-300 h-5 block text-center", (@result == nil || @spinning) && "invisible"]}>
+        <%= @result %>
+      </span>
+    </div>
+    """
+  end
+
+  defp stat(assigns) do
+    ~H"""
+    <div class="bg-gray-900 rounded-lg p-3">
+      <div class="text-gray-400 text-xs mb-1"><%= @label %></div>
+      <div class="text-white font-semibold"><%= @value %></div>
+    </div>
+    """
+  end
+end