From 74a086c855fb304b8cf06801555c2605b4b99159 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81lvaro?= <alvaro.girona@gmail.com>
Date: Sun, 9 Jun 2024 02:48:45 +0200
Subject: [PATCH] update champion card

---
 .../champion_components/champion_card.ex      | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/apps/lol_analytics_web/lib/lol_analytics_web/components/champion_components/champion_card.ex b/apps/lol_analytics_web/lib/lol_analytics_web/components/champion_components/champion_card.ex
index 4d50cab..f1b7d2d 100644
--- a/apps/lol_analytics_web/lib/lol_analytics_web/components/champion_components/champion_card.ex
+++ b/apps/lol_analytics_web/lib/lol_analytics_web/components/champion_components/champion_card.ex
@@ -13,13 +13,22 @@ defmodule LolAnalyticsWeb.ChampionComponents.ChampionCard do
     ~H"""
     <.link patch={"/champions/#{@props.id}"}>
       <div class="flex flex-col rounded-xl bg-clip-border overflow-hidden bg-gray-200">
-        <img src={"https://ddragon.leagueoflegends.com/cdn/14.11.1/img/champion/#{@props.image}"} />
-        <div class="py-2" />
-        <div class="flex mx-auto">
-          <img src={team_position_image(@props.team_position)} class="w-5 h-5" />
-          <h3><%= @props.name %></h3>
+        <div class="flex flex-column overflow-hidden">
+          <div class=" px-4 py-1 opacity-80 gap-2 absolute z-10 align-bottom flex mx-auto bg-black w-max">
+            <img src={team_position_image(@props.team_position)} class="w-5 h-5" />
+            <h3 class="text-white"><%= @props.name %></h3>
+          </div>
+          <img
+            class="static w-40 h-40"
+            src={"https://ddragon.leagueoflegends.com/cdn/14.11.1/img/champion/#{@props.image}"}
+          />
         </div>
-        <div class="py-2" />
+        <div class="py-1" />
+        <div class="pl-2">
+          <h3>Win rate: <%= @props.win_rate %></h3>
+          <h3>Wins: <%= @props.wins %> / <%= @props.total_games %></h3>
+        </div>
+        <div class="py-1" />
       </div>
     </.link>
     """