From 83d5cdd27dc0be9c6fd506ba74a2c15ea3b69fc9 Mon Sep 17 00:00:00 2001
From: vhaudiquet <vhaudiquet343@hotmail.fr>
Date: Sun, 24 Nov 2024 21:20:40 +0100
Subject: [PATCH] Better ChampionSelector

---
 frontend/components/ChampionSelector.vue | 30 ++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/frontend/components/ChampionSelector.vue b/frontend/components/ChampionSelector.vue
index 6376cdd..7453781 100644
--- a/frontend/components/ChampionSelector.vue
+++ b/frontend/components/ChampionSelector.vue
@@ -9,16 +9,22 @@ watch(searchText, (newT, oldT) => {
     filteredChampions.value = champions.value.slice(1).filter((champion) => champion.name.toLowerCase().includes(searchText.value.toLowerCase()))
 })
 
+async function submit() {
+    await navigateTo("/champion/" + filteredChampions.value[0].alias.toLowerCase())
+}
+
 </script>
 
 <template>
     <div>
     <div style="width: fit-content; margin: auto;">
-        <input v-model="searchText" ref="searchBar" class="search-bar" type="text" placeholder="Search a champion"/>
+        <input @keyup.enter="submit" v-model="searchText" ref="searchBar" class="search-bar" type="text" placeholder="Search a champion"/>
     </div>
-    <div class="champion-container" style="margin-top: 20px;">
-        <RouterLink style="margin-left: 5px; margin-right: 5px;" v-for="champion in filteredChampions" :to="'/champion/' + champion.alias.toLowerCase()">
-        <img :src="CDRAGON_BASE + mapPath(champion.squarePortraitPath)" :alt="champion.name"/>
+    <div class="champion-container" style="margin-top: 20px; margin-bottom: 20px;">
+        <RouterLink v-for="champion in filteredChampions" :to="'/champion/' + champion.alias.toLowerCase()">
+        <div class="champion-img-container">
+        <img class="champion-img" :src="CDRAGON_BASE + mapPath(champion.squarePortraitPath)" :alt="champion.name"/>
+        </div>
         </RouterLink>
     </div>
     </div>
@@ -45,6 +51,10 @@ watch(searchText, (newT, oldT) => {
     width: 1390px;
     height: auto;
 
+    display: grid;
+    grid-template-columns: repeat(10, 1fr);
+    grid-gap: 10px;
+
     overflow-x: hidden;
     overflow-y: scroll;
     scrollbar-color: var(--color-on-surface) var(--color-surface-darker);
@@ -52,4 +62,16 @@ watch(searchText, (newT, oldT) => {
 
     margin: auto;
 }
+.champion-img-container {
+    overflow: hidden; width: 120px; height: 120px;
+    border: 1px solid var(--color-surface);
+}
+.champion-img-container:hover {
+    border: 1px solid var(--color-on-surface);
+}
+.champion-img {
+    width: 116px;
+    height: 116px;
+    transform: translate(4px, 4px) scale(1.2, 1.2);
+}
 </style>
\ No newline at end of file