.

apps/lol_analytics_web/assets/js/hooks/champion_win_rate_patch.js

@@ -3,15 +3,16 @@ import Chart from "chart.js/auto"
 const ChampionWinRate = {
     mounted() {
         this.handleEvent("win-rate", ({ winRates }) => {
-            patches = winRates.map((winRate) => {
+            this.patches = winRates.map((winRate) => {
                 return winRate.patch_number
             })
-            winRateValues = winRates.map((winRate) => winRate.win_rate)
+            this.winRateValues = winRates.map((winRate) => winRate.win_rate)
+            // TODO: it breaks on liveview updates, should apply a better fix...
             setInterval(() => {
                 const data = {
-                    labels: patches,
+                    labels: this.patches,
                     datasets: [{
-                        data: winRateValues,
+                        data: this.winRateValues,
                         fill: false,
                         borderColor: 'rgb(75, 192, 192)',
                         tension: 0.1

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

@@ -16,7 +16,7 @@ defmodule LolAnalyticsWeb.ChampionComponents.ChampionAvatar do
       }
     </style>
     <div class="flex flex-col w-40">
-      <img src={@image} class="champion-avatar" alt="champion-icon" />
+      <img src={@image} class="champion-avatar rounded-xl" alt="champion-icon" />
     </div>
     """
   end

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

@@ -9,7 +9,7 @@ defmodule LolAnalyticsWeb.ChampionComponents.Items do
       <%= for item <- assigns.items do %>
         <div class="has-tooltip">
           <div clas="flex flex-col gap-1 p-4">
-            <img src={item.image} />
+            <img class="rounded-xl" src={item.image} />
             <%!-- <p><%= item.name %></p> --%>
             <p><%= item.win_rate %>%</p>
             <p class="text-xs"><%= item.wins %>/<%= item.total_games %></p>

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

@@ -8,7 +8,7 @@ defmodule LolAnalyticsWeb.ChampionComponents.SummonerSpells do
       <%= for spell <- assigns.spells do %>
         <div class="has-tooltip">
           <div clas="flex flex-col gap-1">
-            <img src={spell.image} />
+            <img class="rounded-xl" src={spell.image} />
             <p><%= spell.win_rate %>%</p>
             <p class="text-xs"><%= spell.wins %>/<%= spell.total_games %></p>
           </div>

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

@@ -114,9 +114,6 @@ defmodule LoLAnalyticsWeb.ChampionLive.Show do
   defp page_title(:show), do: "Show Champion"
   defp page_title(:edit), do: "Edit Champion"
 
-  def render_summoner_spells(assigns) do
-  end
-
   def render_items(assigns) do
     case assigns.items do
       %{status: :loading} ->
@@ -151,6 +148,8 @@ defmodule LoLAnalyticsWeb.ChampionLive.Show do
     case assigns.summoner_pells do
       %{status: :loading} ->
         ~H"""
+        <h2 class="text-2xl">Summoner spells</h2>
+        <div class="my-2" />
         <.loader />
         """
 

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

@@ -20,7 +20,7 @@
 <div class="flex flex-row gap-4">
   <.champion_avatar class="w-20" id={@champion.id} name={@champion.name}
     image={"https://ddragon.leagueoflegends.com/cdn/14.11.1/img/champion/#{@champion.image}"} />
-  <div class="win-rate-container">
+  <div class="win-rate-container" style="position: relative; height:250px; width:400px">
     <canvas class="w-full win-rate" height="250" class="win-rate" id="win-rate" phx-hook="ChampionWinRate" />
   </div>
 </div>