Replace WUBRG letters with mana font symbols

lib/mtg_wheel_web/components/layouts/root.html.heex

@@ -6,6 +6,7 @@
     <meta name="csrf-token" content={get_csrf_token()} />
     <.live_title default="MtgWheel" suffix=" · Phoenix Framework" phx-no-format>{assigns[:page_title]}</.live_title>
     <link phx-track-static rel="stylesheet" href={~p"/assets/css/app.css"} />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mana-font/css/mana.css" />
     <script defer phx-track-static type="text/javascript" src={~p"/assets/js/app.js"}>
     </script>
     <script>

lib/mtg_wheel_web/live/wheel_live.ex

@@ -40,7 +40,7 @@ defmodule MtgWheelWeb.WheelLive do
         <.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} />
+        <.wheel label="Colors" items={@color_combos} result={@result && @result.colors} spinning={@spinning} color?={true} />
       </div>
 
       <button
@@ -54,10 +54,12 @@ defmodule MtgWheelWeb.WheelLive do
       <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="Budget" value={(@result && @result.budget) || ""} />
-          <.stat label="Archetype" value={(@result && @result.archetype) || " "} />
+          <.stat label="Archetype" value={(@result && @result.archetype) || ""} />
-          <.stat label="Subtheme" value={(@result && @result.subtheme) || " "} />
+          <.stat label="Subtheme" value={(@result && @result.subtheme) || ""} />
-          <.stat label="Colors" value={(@result && @result.colors) || " "} />
+          <.stat label="Colors">
+            <.color_icons colors={(@result && @result.colors) || ""} size="lg" />
+          </.stat>
         </div>
       </div>
     </div>
@@ -65,6 +67,8 @@ defmodule MtgWheelWeb.WheelLive do
   end
 
   defp wheel(assigns) do
+    assigns = assign_new(assigns, :color?, fn -> false end)
+
     ~H"""
     <div class="flex flex-col items-center gap-2">
       <span class="text-xs font-semibold uppercase tracking-widest text-gray-400"><%= @label %></span>
@@ -73,25 +77,51 @@ defmodule MtgWheelWeb.WheelLive do
           <%= 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 %>
+                <%= if @color? do %>
+                  <.color_icons colors={item} />
+                <% else %>
+                  <%= item %>
+                <% end %>
               </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"]}>
+      <span class={["h-6 flex items-center justify-center gap-1", (@result == nil || @spinning) && "invisible"]}>
-        <%= @result %>
+        <%= if @color? do %>
+          <.color_icons colors={@result || ""} size="lg" />
+        <% else %>
+          <span class="text-sm font-bold text-purple-300"><%= @result %></span>
+        <% end %>
       </span>
     </div>
     """
   end
 
+  defp color_icons(assigns) do
+    assigns = assign_new(assigns, :size, fn -> "md" end)
+
+    ~H"""
+    <%= for letter <- String.graphemes(@colors) do %>
+      <i class={["ms ms-cost", "ms-#{String.downcase(letter)}", @size == "lg" && "ms-2x"]}></i>
+    <% end %>
+    """
+  end
+
   defp stat(assigns) do
+    assigns = assign_new(assigns, :value, fn -> nil end)
+
     ~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 class="text-white font-semibold min-h-[1.5rem] flex items-center justify-center">
+        <%= if Map.has_key?(assigns, :inner_block) do %>
+          <%= render_slot(@inner_block) %>
+        <% else %>
+          <%= @value %>
+        <% end %>
+      </div>
     </div>
     """
   end