From 7ae395658d21ba5883695b97d7f4a1c2e9f36abd Mon Sep 17 00:00:00 2001
From: vhaudiquet <vhaudiquet343@hotmail.fr>
Date: Sat, 30 Nov 2024 18:16:14 +0100
Subject: [PATCH] Better champions images in title

---
 frontend/components/ChampionTitle.vue | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/frontend/components/ChampionTitle.vue b/frontend/components/ChampionTitle.vue
index 507209d..bf88cd8 100644
--- a/frontend/components/ChampionTitle.vue
+++ b/frontend/components/ChampionTitle.vue
@@ -18,7 +18,9 @@ const championDescription = championData.value.title
 
 <template>
     <div style="display: flex;">
-        <NuxtImg width="160" height="160" :src="CDRAGON_BASE + 'plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/' + championId + '.png'"/>
+        <div class="champion-title-img-container">
+        <NuxtImg width="160" height="160" class="champion-title-img" :src="CDRAGON_BASE + 'plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/' + championId + '.png'"/>
+        </div>
         <div style="margin-left: 15px; margin-top: 5px;">
             <h1>{{ championName }}</h1>
             <h3 style="margin-top: 5px">{{ championDescription }}</h3>
@@ -29,4 +31,21 @@ const championDescription = championData.value.title
             </div>
         </div>
     </div>
-</template>
\ No newline at end of file
+</template>
+
+<style>
+.champion-title-img-container {
+    width: 160px;
+    height: 160px;
+    overflow: hidden;
+    
+    border: 1px solid var(--color-on-surface);
+}
+.champion-title-img {
+    width: 160px;
+    height: 160px;
+    transform: translate(4px, 4px) scale(1.2, 1.2);
+
+    user-select: none;
+}
+</style>
\ No newline at end of file