Display picked items by champion

apps/lol_analytics_web/assets/css/app.css

@@ -3,3 +3,14 @@
 @import "tailwindcss/utilities";
 
 /* This file is for your main application CSS */
+
+.tooltip {
+    visibility: hidden;
+    position: absolute;
+}
+
+.has-tooltip:hover .tooltip {
+    visibility: visible;
+    z-index: 100;
+    background-color:lightsteelblue;
+}

apps/lol_analytics_web/lib/lol_analytics_web/components/champion_components/champion_avatar.ex

@@ -9,7 +9,6 @@ defmodule LolAnalyticsWeb.ChampionComponents.ChampionAvatar do
     ~H"""
     <div class="flex flex-col w-40">
       <img src={@image} alt="champion-icon" />
-      <p class="w-full text-center"><%= @name %></p>
     </div>
     """
   end

apps/lol_analytics_web/lib/lol_analytics_web/components/champion_components/champion_card.ex

@@ -10,8 +10,10 @@ defmodule LolAnalyticsWeb.ChampionComponents.ChampionCard do
   attr :props, Props, default: %Props{}
 
   def champion_card(assigns) do
+    # IO.inspect(assigns)
+
     ~H"""
-    <.link patch={"/champions/#{@props.id}"}>
+    <.link patch={"/champions/#{@props.id}?team-position=#{@props.team_position}"}>
       <div class="flex flex-col rounded-xl bg-clip-border overflow-hidden bg-gray-200">
         <div class="flex flex-col flex-col-reverse">
           <div class="flex w-auto px-4 py-1 opacity-80 gap-2 absolute z-10 align-bottom bg-black">

apps/lol_analytics_web/lib/lol_analytics_web/components/champion_components/items.ex

@@ -0,0 +1,23 @@
+defmodule LolAnalyticsWeb.ChampionComponents.Items do
+  use Phoenix.Component
+
+  def items(assigns) do
+    image = ""
+
+    ~H"""
+    <div class="flex flex-wrap flex-wrap gap-4">
+      <%= for item <- assigns.items do %>
+        <div class="has-tooltip">
+          <div clas="flex flex-col gap-1 p-4">
+            <img src={item.image} />
+            <%!-- <p><%= item.name %></p> --%>
+            <p><%= item.win_rate %>%</p>
+            <p><%= item.wins %>/<%= item.total_games %></p>
+          </div>
+          <span class="tooltip -mt-8 py-2 px-4 rounded-xl"><%= item.name %></span>
+        </div>
+      <% end %>
+    </div>
+    """
+  end
+end

apps/lol_analytics_web/lib/lol_analytics_web/components/champion_components/summoner_spells.ex

@@ -6,11 +6,13 @@ defmodule LolAnalyticsWeb.ChampionComponents.SummonerSpells do
     ~H"""
     <div class="flex flex-wrap flex-wrap gap-4">
       <%= for spell <- assigns.spells.summoner_spells do %>
-        <div clas="flex flex-col gap-1">
-          <img src={spell.image} />
-          <p><%= spell.name %></p>
-          <p><%= spell.win_rate %>%</p>
-          <p><%= spell.wins %>/<%= spell.total_games %></p>
+        <div class="has-tooltip">
+          <div clas="flex flex-col gap-1">
+            <img src={spell.image} />
+            <p><%= spell.win_rate %>%</p>
+            <p><%= spell.wins %>/<%= spell.total_games %></p>
+          </div>
+          <div class="tooltip -my-8 px-4 py-2 rounded-xl"><%= spell.name %></div>
         </div>
       <% end %>
     </div>

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

@@ -3,6 +3,7 @@ defmodule LoLAnalyticsWeb.ChampionLive.Show do
 
   import LolAnalyticsWeb.ChampionComponents.SummonerSpells
   import LolAnalyticsWeb.ChampionComponents.ChampionAvatar
+  import LolAnalyticsWeb.ChampionComponents.Items
 
   alias LolAnalyticsWeb.ChampionComponents.SummonerSpells.ShowMapper
 
@@ -12,30 +13,30 @@ defmodule LoLAnalyticsWeb.ChampionLive.Show do
   end
 
   @impl true
-  def handle_params(%{"id" => id}, _, socket) do
+  def handle_params(%{"id" => id, "team-position" => team_position}, _, socket) do
     {:noreply,
      socket
      |> assign(:page_title, page_title(socket.assigns.live_action))
      |> assign(:champion, load_champion_info(id) |> ShowMapper.map_champion())
      |> assign(:summoner_spells, %{
        summoner_spells: load_summoner_spells(id) |> ShowMapper.map_spells()
-     })}
+     })
+     |> assign(:items, load_items(id, team_position) |> ShowMapper.map_items())}
   end
 
   defp load_summoner_spells(champion_id) do
     LolAnalytics.Facts.ChampionPickedSummonerSpell.Repo.get_champion_picked_summoners(champion_id)
   end
 
-  defp load_items(champion_id) do
-    LolAnalytics.Facts.ChampionPickedItem.Repo.get_champion_picked_items(champion_id)
+  defp load_items(champion_id, team_position) do
+    LolAnalytics.Facts.ChampionPickedItem.Repo.get_champion_picked_items(
+      champion_id,
+      team_position
+    )
   end
 
   defp load_champion_info(champion_id) do
-    champion = LolAnalytics.Dimensions.Champion.ChampionRepo.get_or_create(champion_id)
-
-    IO.inspect(champion)
-
-    champion
+    LolAnalytics.Dimensions.Champion.ChampionRepo.get_or_create(champion_id)
   end
 
   defp page_title(:show), do: "Show Champion"

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

@@ -1,6 +1,5 @@
 <.header>
-  Champion <%= @champion.id %>
-    <:actions></:actions>
+  <%= @champion.name %>
 </.header>
 
 <.champion_avatar id={@champion.id} name={@champion.name}
@@ -8,4 +7,16 @@
 
 <div class="my-4" />
 
-<.summoner_spells spells={@summoner_spells} />
+<h2 class="text-2xl">Summoner spells</h2>
+
+<div class="my-2" />
+
+<.summoner_spells spells={@summoner_spells} />
+
+<div class="my-4" />
+
+<h2 class="text-2xl">Items</h2>
+
+<div class="my-2" />
+
+<.items items={@items} />

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

@@ -29,6 +29,22 @@ defmodule LolAnalyticsWeb.ChampionComponents.SummonerSpells.ShowMapper do
     }
   end
 
+  def map_items(items) do
+    items
+    |> Enum.map(&map_item/1)
+    |> Enum.sort(&(&1.total_games > &2.total_games))
+  end
+
   def map_item(item) do
+    image = item.metadata["image"]["full"]
+
+    %{
+      id: item["id"],
+      win_rate: :erlang.float_to_binary(item.win_rate, decimals: 2),
+      total_games: item.total_games,
+      image: "https://ddragon.leagueoflegends.com/cdn/14.11.1/img/item/#{image}",
+      name: item.metadata["name"],
+      wins: item.wins
+    }
   end
 end