render champions as list or grid

apps/lol_analytics/lib/lol_analytics/application.ex

@@ -12,7 +12,7 @@ defmodule LoLAnalytics.Application do
       {DNSCluster, query: Application.get_env(:lol_analytics, :dns_cluster_query) || :ignore},
       {Phoenix.PubSub, name: LoLAnalytics.PubSub},
       {Task.Supervisor, name: LoLAnalytics.TaskSupervisor},
-      {LolAnalytics.MatchProcessor.MatchesBroadwayProcessor, []},
+      # {LolAnalytics.MatchProcessor.MatchesBroadwayProcessor, []},
       {LolAnalytics.MatchProcessor.MatchesProducer, []}
       # Start a worker by calling: LoLAnalytics.Worker.start_link(arg)
       # {LoLAnalytics.Worker, arg}

apps/lol_analytics_web/lib/lol_analytics_web/components/patch_selector.ex

@@ -50,7 +50,7 @@ defmodule LolAnalyticsWeb.PatchSelector do
             phx-change="selected_patch"
             id="patch"
             name="patch"
-            class="patch-selector block w-full rounded-md border border-gray-300 bg-white shadow-sm focus:border-zinc-400 focus:ring-0 sm:text-sm"
+            class="patch-selector cursor-pointer block w-full rounded-md border border-gray-300 bg-white shadow-sm focus:border-zinc-400 focus:ring-0 sm:text-sm"
           >
             <%= for patch <- @patch_numbers do %>
               <option key={patch} phx-click="select-patch" name={patch} value={patch}>

apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/components/champion_filters.ex

@@ -22,7 +22,6 @@ defmodule LolAnalyticsWeb.ChampionLive.Components.ChampionFilters do
   end
 
   attr :selectedrole, :string, required: true
-  attr :roles, :list, default: []
 
   def render(assigns) do
     selected_class =

apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/components/champions_list.ex

@@ -0,0 +1,81 @@
+defmodule LolAnalyticsWeb.ChampionLive.Components.ChampionsList do
+  use Phoenix.Component
+
+  attr :champion, :map
+
+  defp render_champion(assigns) do
+    detail_url =
+      "/champions/#{assigns.champion.id}?team-position=#{assigns.champion.team_position}&patch=#{assigns.champion.patch_number}"
+
+    IO.inspect(detail_url)
+
+    ~H"""
+    <tr>
+      <td>
+        <.link patch={detail_url}>
+          <div class="flex cursor-pointer items-center gap-2">
+            <img
+              class="champion_image  rounded-md"
+              src={"https://ddragon.leagueoflegends.com/cdn/14.11.1/img/champion/#{assigns.champion.image}"}
+            />
+            <%= @champion.name %>
+          </div>
+        </.link>
+      </td>
+      <td><%= @champion.win_rate %>%</td>
+      <td><%= @champion.total_games %></td>
+      <td>
+        <img src={team_position_image(@champion.team_position)} class="w-5 h-5" />
+      </td>
+    </tr>
+    """
+  end
+
+  attr :champions, :list
+  attr :patch_number, :integer
+  attr :position, :string
+
+  def champions_list(assigns) do
+    ~H"""
+    <style>
+      .champion_image {
+        width: 50px;
+      }
+    </style>
+    <table class="table w-full">
+      <thead>
+        <tr>
+          <th scope="col" class="py-3 text-left text-gray-500 uppercase tracking-wider">
+            Champion
+          </th>
+          <th scope="col" class="py-3 text-left text-gray-500 uppercase tracking-wider">
+            Win rate
+          </th>
+          <th scope="col" class="py-3 text-left text-gray-500 uppercase tracking-wider">
+            Total games
+          </th>
+          <th scope="col" class="py-3 text-left text-gray-500 uppercase tracking-wider">
+            Position
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <%= for champion <- assigns.champions do %>
+          <div class="cursor-pointer">
+            <.link patch={"/champions/#{champion.id}?team-position=#{champion.team_position}&patch=#{champion.patch_number}"}>
+              <.render_champion champion={champion} ) />
+            </.link>
+          </div>
+        <% end %>
+        <!-- table rows and cells go here -->
+      </tbody>
+    </table>
+    """
+  end
+
+  defp team_position_image("BOTTOM"), do: "/images/lanes/bot.png"
+  defp team_position_image("MIDDLE"), do: "/images/lanes/mid.png"
+  defp team_position_image("TOP"), do: "/images/lanes/top.png"
+  defp team_position_image("JUNGLE"), do: "/images/lanes/jungle.png"
+  defp team_position_image("UTILITY"), do: "/images/lanes/utility.png"
+end

apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/index.ex

@@ -2,6 +2,7 @@ defmodule LoLAnalyticsWeb.ChampionLive.Index do
   use LoLAnalyticsWeb, :live_view
 
   import LolAnalyticsWeb.ChampionComponents.ChampionCard
+  import LolAnalyticsWeb.ChampionLive.Components.ChampionsList
   import LolAnalyticsWeb.Loader
   import Phoenix.VerifiedRoutes
 
@@ -21,6 +22,7 @@ defmodule LoLAnalyticsWeb.ChampionLive.Index do
       |> assign(:selected_role, role)
       |> assign(:selected_patch, patch)
       |> assign(:champions, %{status: :loading})
+      |> assign(:display_mode, "grid")
       |> load_champs(role, patch)
 
     {:ok, socket}
@@ -49,6 +51,10 @@ defmodule LoLAnalyticsWeb.ChampionLive.Index do
      |> assign(:selected_role, selected_role)}
   end
 
+  def handle_event("set-display-mode", %{"mode" => mode}, socket) do
+    {:noreply, assign(socket, :display_mode, mode)}
+  end
+
   def handle_info(%{patch: patch}, socket) do
     selected_role = socket.assigns.selected_role
     query_params = %{role: selected_role, patch: patch}
@@ -93,13 +99,54 @@ defmodule LoLAnalyticsWeb.ChampionLive.Index do
     {:noreply, assign(socket, :champions, %{status: :data, data: champs})}
   end
 
-  def render_champions(assigns) do
+  def render_display_mode_selector_selector(assigns) do
+    ~H"""
+    <div class="flex">
+      <div phx-click="set-display-mode" phx-value-mode="grid" class="cursor-pointer">
+        <.icon name={grid_icon(assigns.display_mode)} alt="table" />
+      </div>
+      <div phx-click="set-display-mode" phx-value-mode="list" class="cursor-pointer">
+        <.icon name={list_icon(assigns.display_mode)} alt="table" />
+      </div>
+    </div>
+    """
+  end
+
+  defp grid_icon(selected_display_mode) do
+    case selected_display_mode do
+      "grid" -> "hero-squares-2x2-solid"
+      "list" -> "hero-squares-2x2"
+    end
+  end
+
+  def list_icon(selected_display_mode) do
+    case selected_display_mode do
+      "grid" -> "hero-table-cells"
+      "list" -> "hero-table-cells-solid"
+    end
+  end
+
+  def render_champions_list(assigns) do
     case assigns.champions do
       %{status: :loading} ->
         ~H"""
         <.loader />
         """
 
+      %{status: :data, data: champions} ->
+        ~H"""
+        <.champions_list champions={champions} />
+        """
+    end
+  end
+
+  def render_champions_grid(%{:champions => champions_state} = assigns) do
+    case champions_state do
+      %{status: :loading} ->
+        ~H"""
+        <.loader />
+        """
+
       %{status: :data, data: champions} ->
         ~H"""
         <div id="champions" class="grid grid-cols-2 sm:grid-cols-4  gap-4">

apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/index.html.heex

@@ -1,7 +1,12 @@
 <.header>
-  Champions
+  <p class="text-3xl">
+    Champions
+  </p>
+
 </.header>
 
+<div class="h-4" />
+
 <div class="px-2">
   <h1 class="text-l font-semibold">Filters</h1>
 
@@ -10,9 +15,18 @@
     <.live_component module={ChampionFilters} id="role-filters" selectedrole={@selected_role || "all" } />
   </div>
 
-  <.live_component module={PatchSelector} id="patch-selector" />
+  <div class="flex justify-between items-center">
+    <.live_component module={PatchSelector} id="patch-selector" />
+
+    <.render_display_mode_selector_selector display_mode={@display_mode} />
+  </div>
+
 
   <div class="h-4"></div>
 
-  <.render_champions champions={@champions} />
+  <%= if @display_mode=="grid" do %>
+    <.render_champions_grid champions={@champions} />
+  <% else %>
+    <.render_champions_list id="champions-list" champions={@champions} />
+  <% end %>
 </div>