display boots section in champion detail

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

@@ -21,7 +21,7 @@ defmodule LoLAnalyticsWeb.ChampionLive.Show do
      |> assign(:summoner_spells, %{
        summoner_spells: load_summoner_spells(id, team_position) |> ShowMapper.map_spells()
      })
-     |> assign(:items, load_items(id, team_position) |> ShowMapper.map_items())}
+     |> load_items(id, team_position)}
   end
 
   defp load_summoner_spells(champion_id, team_position) do
@@ -31,11 +31,19 @@ defmodule LoLAnalyticsWeb.ChampionLive.Show do
     )
   end
 
-  defp load_items(champion_id, team_position) do
-    LolAnalytics.Facts.ChampionPickedItem.Repo.get_champion_picked_items(
-      champion_id,
-      team_position
-    )
+  defp load_items(socket, champion_id, team_position) do
+    items =
+      LolAnalytics.Facts.ChampionPickedItem.Repo.get_champion_picked_items(
+        champion_id,
+        team_position
+      )
+
+    all_items_mapped = items |> ShowMapper.map_items() |> Enum.take(30)
+    boots = items |> ShowMapper.extract_boots()
+
+    socket
+    |> assign(:items, all_items_mapped)
+    |> assign(:boots, boots)
   end
 
   defp load_champion_info(champion_id) do

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

@@ -17,6 +17,16 @@
 
 <h2 class="text-2xl">Items</h2>
 
+<h2 class="text-xl">Boots</h2>
+
+<div class="my-2" />
+
+<.items items={@boots} />
+
+<div class="my-4" />
+
+<h2 class="text-xl">Popular items</h2>
+
 <div class="my-2" />
 
 <.items items={@items} />

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

@@ -47,4 +47,14 @@ defmodule LolAnalyticsWeb.ChampionComponents.SummonerSpells.ShowMapper do
       wins: item.wins
     }
   end
+
+  def extract_boots(items) do
+    items
+    |> Enum.filter(fn item ->
+      tags = item.metadata["tags"]
+      tags |> Enum.any?(&String.equivalent?(&1, "Boots"))
+    end)
+    |> Enum.map(&map_item/1)
+    |> Enum.sort(&(&1.total_games > &2.total_games))
+  end
 end