From 43968e4cf11f0a120f93fdd8b5f6d035fc112007 Mon Sep 17 00:00:00 2001
From: vhaudiquet <vhaudiquet343@hotmail.fr>
Date: Wed, 27 Nov 2024 20:59:03 +0100
Subject: [PATCH] Added lanes (first try)

---
 frontend/components/ChampionSelector.vue      |  67 +++++++++++++++---
 frontend/components/LaneFilter.vue            |  62 ++++++++++++++++
 frontend/nuxt.config.ts                       |   2 +-
 .../img/lanes/icon-position-bottom-blue.png   | Bin 0 -> 4575 bytes
 .../img/lanes/icon-position-bottom-hover.png  | Bin 0 -> 665 bytes
 .../public/img/lanes/icon-position-bottom.png | Bin 0 -> 665 bytes
 .../img/lanes/icon-position-jungle-blue.png   | Bin 0 -> 5059 bytes
 .../img/lanes/icon-position-jungle-hover.png  | Bin 0 -> 2322 bytes
 .../public/img/lanes/icon-position-jungle.png | Bin 0 -> 2322 bytes
 .../img/lanes/icon-position-middle-blue.png   | Bin 0 -> 4652 bytes
 .../img/lanes/icon-position-middle-hover.png  | Bin 0 -> 577 bytes
 .../public/img/lanes/icon-position-middle.png | Bin 0 -> 574 bytes
 .../img/lanes/icon-position-top-blue.png      | Bin 0 -> 4575 bytes
 .../img/lanes/icon-position-top-hover.png     | Bin 0 -> 581 bytes
 .../public/img/lanes/icon-position-top.png    | Bin 0 -> 582 bytes
 .../img/lanes/icon-position-utility-blue.png  | Bin 0 -> 4941 bytes
 .../img/lanes/icon-position-utility-hover.png | Bin 0 -> 1334 bytes
 .../img/lanes/icon-position-utility.png       | Bin 0 -> 1335 bytes
 frontend/server/api/champion/[alias].js       |  14 +---
 frontend/server/api/champions.js              |  23 ++++++
 frontend/server/utils/mongo.js                |  17 +++++
 match_collector/champion_stat.ts              |  12 +++-
 22 files changed, 173 insertions(+), 24 deletions(-)
 create mode 100644 frontend/components/LaneFilter.vue
 create mode 100644 frontend/public/img/lanes/icon-position-bottom-blue.png
 create mode 100644 frontend/public/img/lanes/icon-position-bottom-hover.png
 create mode 100644 frontend/public/img/lanes/icon-position-bottom.png
 create mode 100644 frontend/public/img/lanes/icon-position-jungle-blue.png
 create mode 100644 frontend/public/img/lanes/icon-position-jungle-hover.png
 create mode 100644 frontend/public/img/lanes/icon-position-jungle.png
 create mode 100644 frontend/public/img/lanes/icon-position-middle-blue.png
 create mode 100644 frontend/public/img/lanes/icon-position-middle-hover.png
 create mode 100644 frontend/public/img/lanes/icon-position-middle.png
 create mode 100644 frontend/public/img/lanes/icon-position-top-blue.png
 create mode 100644 frontend/public/img/lanes/icon-position-top-hover.png
 create mode 100644 frontend/public/img/lanes/icon-position-top.png
 create mode 100644 frontend/public/img/lanes/icon-position-utility-blue.png
 create mode 100644 frontend/public/img/lanes/icon-position-utility-hover.png
 create mode 100644 frontend/public/img/lanes/icon-position-utility.png
 create mode 100644 frontend/server/api/champions.js
 create mode 100644 frontend/server/utils/mongo.js

diff --git a/frontend/components/ChampionSelector.vue b/frontend/components/ChampionSelector.vue
index cb6ab20..41d5927 100644
--- a/frontend/components/ChampionSelector.vue
+++ b/frontend/components/ChampionSelector.vue
@@ -1,20 +1,68 @@
-<script setup>
-const {data: championsData} = await useFetch(CDRAGON_BASE + "plugins/rcp-be-lol-game-data/global/default/v1/champion-summary.json")
+<script setup lang="ts">
+type ChampionResponse = {
+    data: Ref<Array<Champion>>
+}
+type Champion = {
+    name: string
+    alias: string
+    squarePortraitPath: string
+}
+const {data: championsData} : ChampionResponse = await useFetch(CDRAGON_BASE + "plugins/rcp-be-lol-game-data/global/default/v1/champion-summary.json")
 const champions = championsData.value.slice(1).sort((a, b) => {
     if(a.name < b.name) return -1;
     if(a.name > b.name) return 1;
     return 0;
 })
 
+const {data: championsLanes} : {data: Ref<any>} = await useFetch("/api/champions")
+const lanesMap = new Map()
+for(let champion of championsLanes.value) {
+    lanesMap.set(champion.alias, champion.lanes)
+}
+console.log(lanesMap)
+
 const filteredChampions = ref(champions)
 
-const searchBar = ref(null)
-watch(searchBar, (newS, oldS) => {searchBar.value.focus()})
+const searchBar = useTemplateRef("searchBar")
+watch(searchBar, (newS, oldS) => {searchBar.value?.focus()})
 const searchText = ref("")
 watch(searchText, (newT, oldT) => {
     filteredChampions.value = champions.filter((champion) => champion.name.toLowerCase().includes(searchText.value.toLowerCase()))
 })
 
+function filterToLane(filter: number) {
+    switch(filter) {
+        case 0:
+            return "TOP";
+        case 1:
+            return "JUNGLE";
+        case 2:
+            return "MIDDLE";
+        case 3:
+            return "BOTTOM";
+        case 4:
+            return "UTILITY";
+    }
+}
+
+function onLaneFilterChange(newValue: number) {
+    if(newValue != -1) {
+        
+        
+        
+        filteredChampions.value = champions.filter((champion) => {
+            const lanes : Array<any> = lanesMap.get(champion.alias.toLowerCase())
+            if(lanes == undefined) return false;
+            
+            return lanes.reduce((acc : boolean, current : {data:string, count:number}) => 
+                acc || (current.data == filterToLane(newValue)), false)
+        })
+    }
+    else {
+        filteredChampions.value = champions
+    }
+}
+
 async function submit() {
     await navigateTo("/champion/" + filteredChampions.value[0].alias.toLowerCase())
 }
@@ -23,7 +71,8 @@ async function submit() {
 
 <template>
     <div>
-    <div style="width: fit-content; margin: auto;">
+    <div style="width: fit-content; margin: auto; display: flex; align-items: center;">
+        <LaneFilter @filter-change="(value : number) => onLaneFilterChange(value)" style="margin-right: 20px;"/>
         <input @keyup.enter="submit" v-model="searchText" ref="searchBar" class="search-bar" type="text" placeholder="Search a champion"/>
     </div>
     <div class="champion-container">
@@ -39,15 +88,15 @@ async function submit() {
 <style>
 .search-bar {
     width: 400px;
-    height: 40px;
+    height: 60px;
 
     background-color: var(--color-surface-darker);
     
-    font-size: 20px;
+    font-size: 28px;
 
     border-radius: 12px;
     border: none;
-    padding-left: 5px;
+    padding-left: 10px;
 }
 .search-bar:focus {
     border: 2px solid var(--color-on-surface);
@@ -82,7 +131,7 @@ async function submit() {
     width: 116px;
     height: 116px;
     transform: translate(4px, 4px) scale(1.2, 1.2);
-    
+
     user-select: none;
 }
 </style>
\ No newline at end of file
diff --git a/frontend/components/LaneFilter.vue b/frontend/components/LaneFilter.vue
new file mode 100644
index 0000000..79183d9
--- /dev/null
+++ b/frontend/components/LaneFilter.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+const emit = defineEmits<{
+    filterChange: [value: number]
+}>()
+
+const POSITIONS = ["top", "jungle", "middle", "bottom", "utility"]
+const LANE_IMAGES = Array(5).fill("").map((_, index) => "/img/lanes/icon-position-" + POSITIONS[index] + ".png")
+const LANE_IMAGES_HOVER = Array(5).fill("").map((_, index) => "/img/lanes/icon-position-" + POSITIONS[index] + "-hover.png")
+const LANE_IMAGES_SELECTED = Array(5).fill("").map((_, index) => "/img/lanes/icon-position-" + POSITIONS[index] + "-blue.png")
+
+const laneImgs = Array(5).fill(ref("")).map((_, index) => ref(LANE_IMAGES[index]))
+const laneFilter = ref(-1)
+
+function selectLaneFilter(index: number) {
+    // Unselect previous filter
+    if(laneFilter.value != -1) {
+        laneImgs[laneFilter.value].value = LANE_IMAGES[laneFilter.value]
+
+        // This is a deselection.
+        if(laneFilter.value == index) {
+            laneFilter.value = -1;
+            emit('filterChange', laneFilter.value)
+            return;
+        }
+    }
+
+    // Select new one
+    laneImgs[index].value = LANE_IMAGES_SELECTED[index]
+    laneFilter.value = index
+    emit('filterChange', laneFilter.value)
+}
+
+function handleMouseOut(laneImg: Ref<string>, index: number) {
+    if(laneImg.value == LANE_IMAGES_HOVER[index]) 
+        laneImg.value = LANE_IMAGES[index]
+}
+function handleHover(laneImg: Ref<string>, index: number) {
+    if(laneImg.value == LANE_IMAGES[index])
+        laneImg.value = LANE_IMAGES_HOVER[index]
+}
+</script>
+
+<template>
+<div style="width: fit-content; margin: auto;">
+    <img v-for="(laneImg, index) in laneImgs" 
+    class="lane-img" :src="laneImg.value" 
+    @mouseout="handleMouseOut(laneImg, index)"
+    @mouseover="handleHover(laneImg, index)"
+    @click="selectLaneFilter(index)"/>
+</div>
+</template>
+
+<style>
+.lane-img {
+    width: 64px;
+    margin-left: 5px;
+    margin-right: 5px;
+}
+.lane-img:hover {
+    cursor: pointer;
+}
+</style>
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index 604e3e3..e5ad3d2 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -5,7 +5,7 @@ export default defineNuxtConfig({
   css: ['~/assets/css/main.css'],
 
   routeRules: {
-    '/' : {prerender: true},
+    '/' : {prerender: false, swr: true},
     '/champion/**' : {swr: true}
   },
 
diff --git a/frontend/public/img/lanes/icon-position-bottom-blue.png b/frontend/public/img/lanes/icon-position-bottom-blue.png
new file mode 100644
index 0000000000000000000000000000000000000000..8dd335c83a389eb49e7fe42e2a03cfe18b6b4c9c
GIT binary patch
literal 4575
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
YZhfzBu>H}deheN@S-Gpb^s$zI0Yq#P6#xJL

literal 0
HcmV?d00001

diff --git a/frontend/public/img/lanes/icon-position-bottom-hover.png b/frontend/public/img/lanes/icon-position-bottom-hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..df84013f484f8601d362f67a9103cb113c3ab04f
GIT binary patch
literal 665
zcmeAS@N?(olHy`uVBq!ia0vp^9U#oX1|)5EEd~lOC3w0xhEy=Vy>)b|h=WMm#aZ)S
zE+{D9UQtk9ULLvWpzwh<g^0<H!L8o5TlT&$KR4fD@9s4!o|6!$_ICI3_W7l`+ZZQg
zY^!6iU|?cbDEQ;vaDb6R228xaw=a`Ph_|nE&+djRY{x6^&D|rWu=QZ!>IV!<%q-T4
zOMpbLHZe`O^<c*jWj=>f4>F#_u6W46(zkKXXVya(m^^>U%cLtyG#n_@asnEvt|S0t
znjB)_kZD)qXkaKZZ~`)aD>F14*r;x0r%>>wi;tf}=Jx4Eci9t%mq_*L%JcJ__`5{D
zFo%nuuj5ran@a-&6Ndsaap|}J6&T;+I5UfY0|O(1cp|6J@F#0KBa#q85(mpo4QRv@
z`!Yq&3Gr`ggivgQS+30YB=Fu96$d7n%aa*63(k0~Vma}6Po(EmhRR9i)|?X<j?V!}
zex3xB)bU_aIk0iZ+5YX8>r<QgpJd*fWcK*Rs|U<nOPZ21XBXy_zhPtzI=FGqS&K5O
zF9i&m7Gc{YkLS6|@hPw#e+5+f{J>$xB@ZHQyGbNhvdflNG_1)t?mNt9?c#8&=kbcg
zOhOMW-YsZwvGB7}QxNRi%*W}$>#qEMk1|uxVZ(Xl2N@YV3u20F9F%0jW%wp=94~ce
zRykC7`XIx~hciy>ejL$orNHF#J1Y?dq@>~bs{bDId)|lp)XJYQ0h1hqr>mdKI;Vst
E0K;$WjsO4v

literal 0
HcmV?d00001

diff --git a/frontend/public/img/lanes/icon-position-bottom.png b/frontend/public/img/lanes/icon-position-bottom.png
new file mode 100644
index 0000000000000000000000000000000000000000..c49002d3e6d7cb5c6dd6a69e64705502d7ca7216
GIT binary patch
literal 665
zcmeAS@N?(olHy`uVBq!ia0vp^9U#oX1|)5EEd~lOC3w0xhEy=Vz2!Ph#6YC&VoB-s
zxEoCG-syEGoZ%@iFQ2X`yd?3|x-ORKHe2?*D?hitagVjnFEh_cDsYr}e4A$eZnN7Q
z9wxU97-Se4nFTEVDLXu1VBrH1edYe!%o#h`j=S6ocF1Z@wt4Rv$35ZJgNl#>h9GH~
z@7z2<(Z_j?j2^iKcm4>nE2I{fe9F60z`%4o;@(%L#EeFjzx;ix1$i7E>=0Q9G>==5
z!{LF2bRv)$EXd-(U@55xWIh&T0E!C9$_rTVxwf;j^!<H$U@_m5)F9sD^ZMD@o>X4y
zw<v36XLtGP%&g?Vz{nziOuYQ7o(1DCdCbVfq0qp9AU^R3IMi)Djx2<b#KBS)1{(26
ze)mL{6Z&PgnMWFt%tL7Tq?I2fq`=rG>Dj<yk){^P^rZCOn<ZWiKF`j2GN~LeH0PYa
zaQu&o1CtE*WCqRxoy^aV-=539`GC1{^7bufExz$RYGhdXIO1BG%y0HD4h<m%Ych=c
znhzK1IB@la<{m4ou;63$IJj}yS&Kg2;}aP)Ev{`9JQi{9<U>m#1?gKokG}}Wa!fFL
zZ1H+UgNwyEYYhd#zV1FwkCw-)oSA|SUp%q<T}Q)}f}ZDh3mhDjWVXxjPvAH%+s>?V
zsPO(phRy<;A_Ipk3$;)4EW{K{WzOzd&d1t;NEn`zel7lPa$9Zb*}tySfk}?R)78&q
Iol`;+06Q<~HUIzs

literal 0
HcmV?d00001

diff --git a/frontend/public/img/lanes/icon-position-jungle-blue.png b/frontend/public/img/lanes/icon-position-jungle-blue.png
new file mode 100644
index 0000000000000000000000000000000000000000..9f06646894d011f96bcce60b8f6f0c824c1985bc
GIT binary patch
literal 5059
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
NN&Q14rM}D4{tf8yG}!<E

literal 0
HcmV?d00001

diff --git a/frontend/public/img/lanes/icon-position-jungle-hover.png b/frontend/public/img/lanes/icon-position-jungle-hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..fe26ac111d1943859fc0655d16b5fe5eca9b2fb0
GIT binary patch
literal 2322
zcmV+t3GMcYP)<h;3K|Lk000e1NJLTq004*p004*x1^@s6Ji4P&000QtNkl<ZcmeI*
z1CZ>>7Y6WNU)y}PZQHhO+qP}nwr$(*-TUtSdpWmu-_FkW|ElU@UTQLPI-cZwRlo8k
z-Kn#aq`Q+CO?INuXfzs)Mx)VaG#ZUYqtR$I8jVKNGUba28SeWWred@})}z50?Dr_z
z)KrWXNN>6*gZ;jfdK*!+NG_taGSuHa=u#t&7RcQ66ZOqNUnf#4&1<ZpMe+h&lJY**
z&@1$!v5pqVW|XI8Q{2Zx2(*Q<juuEg{Xt(+V+#8>FHNJ#RBt>*i{vB%otCnG)zNzd
zI@NfN7RYGoqE1>MMg2OFK;1OP_=*<E{RDc8YEsaj#i)xw4;kOl0$G(X-M%Rp1pJyX
z-I_+@KSc+%nZ{IcKQ1Rs_ib>$h*}^A5vF^vO8c-56$sNEY66QE$N*|5Ot*2BwSOp0
zAxxK}K_<{>kz7ZZ?hoo;MQwk8P~<ifc(g#4AQZWxO4_{x!C^%cO0-BmButm5WfI=r
zG4x+Tk*`f?(E{0*P~<bJPw+(CGX#gjO=!^q=}+y1B1a~)t$Pz3I%%j0HCiM$5{k6b
z*o3ulc4{Ly++#wI7Rb^BhX)dNYI%|15aGzF7RhG>hjkOuw%rLO{6@7Vl4yY(L2&qi
znqqF(Ncu0KgtLq$(q#a7g2Qo1n0a<FkI_WFW)(@fVC8-{A-MR^L>?`Woe3q}9n)OV
zB!Y`0j3$;bksQIHKr2VwmP-gOdT5-{#8M=8yZxk7ZA5KYn7Ror-ZYxn3S<L<i#;M5
z^LT@xr<Y_FNFy~9N|-`@L*D;3gmUzW{bW4!3>T+{xZhs%8=;IZOa>x32d@(2{<kK$
zXs1!3KDtoexiKD>6=;E^6v;;P9IYP1z6a7@1Q$1ku+L%CN~mC!7>>sR^e}Cdv|o}H
zsfAvkr6b<=YXld0S}@@KT}r5+g&HC}27T!w`VXy`)YHvM)IkM$nC6OTzsC{Ecr@VG
zHFOdxcp}2%zApVj9kf!?uSr&;9D%y%A{r3#J{KpHQJ|%RT#q7fR0PMmAKgZv9Ia;J
zk9b}p@3`gMHspt)n+at+AJ9UezX$?Lg?x+`qHhUQpe@rdCI2GL8PfiqB2=)d&wboL
z5NM~m5RdI{j%kLIs`VE5K7vDz4x!qB_jN3xf;W9^e>`;&1l|a7<n{tWk^8BpnkUqL
za65=JA;5jDP7qkf<MuBk2wfb)v1}^w5BCH0ul9koWhqZ6p_#S}aLT<WjQ?)_%^+$c
z2yGwySda5oK1HwRVn@y+lyNmR1hAj)2m&ixZucmHg@pqyj`s)-=cj2nz90Qw>H2_1
z264?J@SMdqYv~t)P@bBCI&Ln-@dx!w+nmi7gbF6nB0lzUDnV#T;WjrUSok5pnd+Ab
zC2X12iM`i_L)2^doqiX1*#7oe<mrHp)$N25UQhGP?<xd=F51$=_7@=t_0ZgcZQe|<
zaBav_2dkugdBF1ofo|H`!`%if+#r6EPww~tPQ?ZJXmI)pWHrkRzHKbG-%1dgM#BW#
z{D>g5laFIFC$$h<td^<wd<b>X8rCnolRI9p&3y<V55zTAI4+-LX%*To1Pd*+uyETi
z5iI;p^@7{YR)WCN9*@bzgfjNX+DC($2^RjK;nMekS=wB%-D?N}b9$U6C=gt<QlG4?
zWxbYQ=~b$$u-)qkmYx-~cPWCv5D)(>KN8BgDT|ApS0Z?Dfp}P7u7}18+WZBff`LA!
zA+mLAD;UE5lVGVpYl&Bz%bhG}^Pz+a`dGfVy_-<RpLWyvdYS=EqJg48Cb?gzM({%1
zE`l4&{=Xp~c*|yitV{6d8u84l+!{VFg5R|0`&I;jb+cR`O_U>ekf$X}Y;%8tM|TO@
zyeYxOM#6qK&=10aye5<7On=}C9=%UB0TxI*^%fL$v&(6(&i;L`@`ct}Es$dfK5Q*o
zn<}@Npv|`s94@!`_4t(_aEvipAj=SZ_=f5P7pXy>X4ZDOevy7e8A8h#qXp7HIf4&6
z7j5q>f)B0KBzO+zpU%fDg<tag$zme0(P+vnB$E3?G^ZiAiRCT&qaiG4dfjLQj}*wQ
zHho*S5`4PNaw*~g!hXI<5W3LJj26gt1fL$8zO82nK1~%2n)RVh0?i|Sepqfhqxsuc
zsNqwdM$-p`04ywA9rvSQLRh*upV9nnUZ#WK(~*K(NU6hx-`+o8_-xBGf>4LP*Ilx#
z&)#R0BLv_X;S#|`#ovyR`^Y$Bv_S46BuGbq4?w+TKNh2rPt(U|)d2c67ZnH=PBI$#
z>}HHk2%ul5`j|e@INq3pgn1;;j~~e`WHcq0{pSe@G9`f13xos@e`}HaOh}kfKKgSs
z!O|~ABlt*Aa;)Q{KkpDkbPb67`}_%Wl*hgdu{>q!8dT|v=o04oKwd>5ceK$6Ud*2y
zuNgrEb1za`8P{lmEI~+^Ngn$$iQvKF#x+_Xg9!=KO?8(2n493yU{f|)B!^QEAwkAk
z_F)f#2d5d0_*$fskPu5-w*M9_j%eOz_CG=btZmu$AGJ85`+CyvgqUq((dJRn7Kawe
z82XG5qkSyeyRjBWJRb#kkr0#pE!ujf7Ds%uy|)u$aJWS~pNX$Hv`A{`Y(m72vuNX#
z_=`geWxt5mjvQ#wwp=obLyKf%$|dj`<PR;5WPPmYUxbkDVe=y2WEF=N$z1d!Aw-+n
ztcpusacGf@p!W$OS<#{`zbCUev`G5WTZ9nIXVH%4<Q9h($w2yo5U}1BZD>z+acGf@
zqe*c+`k=*8Jr}M)-QB!xG^xD>&JldN!Dv$bCg(2Sqo|rx7s-xP@O6u;NqvzV;bXya
zAEU`ck(^7g^sdQNbg94{1Pf;yO{R*Zjvglntz<NrE0R9+9-)GNX828m`UIa~Nd9J{
z(II*L(vzlKku2ykBtJ<{FB<2NeA&AfjjnI)B2YI?FdB`^ko^5dqbc*v-Q|o%qtR$I
s8jVJy(P%UpjYgx<Xfzs)MiW8)4~D_+&mBOhzyJUM07*qoM6N<$g7k7!_5c6?

literal 0
HcmV?d00001

diff --git a/frontend/public/img/lanes/icon-position-jungle.png b/frontend/public/img/lanes/icon-position-jungle.png
new file mode 100644
index 0000000000000000000000000000000000000000..88daaf694d6f7580060ad073166d0f66f20b107f
GIT binary patch
literal 2322
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

literal 0
HcmV?d00001

diff --git a/frontend/public/img/lanes/icon-position-middle-blue.png b/frontend/public/img/lanes/icon-position-middle-blue.png
new file mode 100644
index 0000000000000000000000000000000000000000..cf798ded05934e151826306de1737b1f01ffc516
GIT binary patch
literal 4652
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
HKkWWD5H2bA

literal 0
HcmV?d00001

diff --git a/frontend/public/img/lanes/icon-position-middle-hover.png b/frontend/public/img/lanes/icon-position-middle-hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..e7593961fc7852c2c676c38392f5b2a36105905c
GIT binary patch
literal 577
zcmeAS@N?(olHy`uVBq!ia0vp^9U#oX1|)5EEd~lOad^5ohEy=Vy}R9))lsDFBJ0G9
z()WIIb$slv(rB746wG2MYBTx4&Su%SS6|dzx_{uV@cWXgxhkHM;OJdmU;DQ`i{J6v
z+TGz_CjI~UCx(s9EEbcPHva9gU^uyP?-C0J&kc9M<XkYhw#0&=k$J+O+dd7<6P85#
zw=xR=74E<N^4g?F3@VI$Q~!YFODv{M2J?@)STMYl(vs$Lc=UjQh0g&<^sU;>wq!Ys
z$LH{hon4`TfeAze*@JWgO$1u8>L4SBOv3@e`q_~VhaSv$$1*{~!ms-~E6@<2QBNj6
zu;_lr%^~yr>2D^W-uW!YkDh-I<Ttp0^i98L%h>q%)pM}&MIcKLrf+9v>6>ZP_pMRp
zVBns&H8s0|tOJ6qC+uVb8{QlQGW0+Ukcb%2-j9zNZnh|MO(+Gr|A7X($Dd=;GWGl4
z#&A14O5gL~!*>>oeOwbBN#_?ZY~o;72yKG68tC+u@<82Sr!#u|Me-#J%$HxJfIhv%
z4)!IG$b30Jq5U$iv;-^=Kp~MLjm%>ZVt1d<3<*6@5V{~@P{s4-YzDjI{FlXi49)|S
O27{-opUXO@geCymCevX6

literal 0
HcmV?d00001

diff --git a/frontend/public/img/lanes/icon-position-middle.png b/frontend/public/img/lanes/icon-position-middle.png
new file mode 100644
index 0000000000000000000000000000000000000000..c16810c75c3136f6f4b3c25bd5e3828eab3b5632
GIT binary patch
literal 574
zcmeAS@N?(olHy`uVBq!ia0vp^9U#oX1|)5EEd~lOv3j~VhEy=Vy?f9w*HNVP;pZtc
zU0j$M8aR9yJKP0)Tv>%HZt#}e4c)$Pf0pWo^X7K8d;BJ;c*2p@of-Qo=e_0K|KeNL
z|3`)2>vzg1Y!hx!7U{@kf54zp63uAAz<D=~fzQEdyI=$JgbQn*K4xIyb9l5(s*8C-
zgYI)MZ&BIb9ZLgb8dx4goH)+NA=7Z=;SBzxj2;YqHx*<WcuulDU|14ez`(?=03_V^
z$1)jBdH^y7Nc8<<ga`xWzVHiJFf=lQh{g2{2S5fL2&|dS>2T^n#T`Y3&;l9L_uN3i
zD+d`*upcapxhpPU;dkphE6^l6j=szCcYu5b%_g7$=T=oSF&+QO{|=;F<RH)_arwJ^
z0v7+a7WUXru(g=AeeSA!^M4Ly4^}XxNcU+uYy&ZbfebScgBR$uA7u?|4h6EFFamm@
zU<>n;@A-QU2Hr0#0$P8*;^4#goCPM#Pd1z1d%%z)#^<n$1?)EvamgO$3FZm^KvqM1
z@`V%ZUmzio*>K>ZGRX5l&I<vBjsID0>+;DOKt(ttK%oRPj)eyiCWj$`<9Up+11Sn8
bePIawpI6JOmHr2qE*Lyr{an^LB{Ts5p()At

literal 0
HcmV?d00001

diff --git a/frontend/public/img/lanes/icon-position-top-blue.png b/frontend/public/img/lanes/icon-position-top-blue.png
new file mode 100644
index 0000000000000000000000000000000000000000..e5a0248cceaf67eafd46a708aa48ee3d3f6bf1e6
GIT binary patch
literal 4575
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

literal 0
HcmV?d00001

diff --git a/frontend/public/img/lanes/icon-position-top-hover.png b/frontend/public/img/lanes/icon-position-top-hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..9c4023b13992a79c9bdde0caf6e6378322185ffa
GIT binary patch
literal 581
zcmeAS@N?(olHy`uVBq!ia0vp^9U#oX1|)5EEd~lO@p!s8hEy=Vy>xVIfT2X|MVr+E
z*P{x`%gd`OwlnVGI99^&pJz8auh_Tk*JiqxU2gZBqyk4T&%O@N|9|66VJ_>0oi`WX
zDw@qHP#qARWz3lLU5L-&jo%^0j=NqK3>&jK*%ivRZo84jbVTpE*e#!i8%JB11+3>6
zFeIf50~MzD%lL=;uVYP_Bm2H5IX0ImrAIb5G+(BnXXD|yg=^OP0vXM73v*V07=M9`
zH6VuVer9%s|If<Gj&0O@C?Vu=`TK(#a|#)RnwSMFwxx(Pv^-#7>C2U5R#3EHXiWb7
z{V@XzpTn2G8Vrmq0*p)?3JnbCL<hsk-+%e<lw-=Es{VAFiABHxWDX(Xr#&{6H(Oa0
zGOG(1RC49H8kWc&QD8kG$P&~blg-6gv`3TW#K~JuvppN;G%B;6u(Swjh-m;aL_v(V
zos0GMY}*z!`^|m!qP5#Nj^AO}85jMkCwY@$!<{x|-U+)4mM|8{_nA1z9h}H^;_)pb
znaqYY2N*s0_#7TEJn?@N@m!g)5g0xUU_#Oy9+yDIUS^%h=bSRy51D|;gTd3)&t;uc
GLK6Uc>%?CG

literal 0
HcmV?d00001

diff --git a/frontend/public/img/lanes/icon-position-top.png b/frontend/public/img/lanes/icon-position-top.png
new file mode 100644
index 0000000000000000000000000000000000000000..fa923fcedec2a86c90e6611f849a55ae0779c798
GIT binary patch
literal 582
zcmeAS@N?(olHy`uVBq!ia0vp^9U#oX1|)5EEd~lO@p`&AhEy=Vy>xVHn4^U2#jMk<
zH3htlhR%2H-d+0tolHgWrl$P1z1?DAZ#G|>JN?Zv{>dtylVIr5?B3@5|2J|rZ(}=g
zCui}tTWL&3u4QZIsyVz#J;c~y>u<rZaXBZu!Z(A53`gXyOuOyVaAWVSpxK-PyC)Yg
zByAVsb9mzhR2ciR^YMjwy0;l5)2CZKz7aQ@K{8o9>Z&xmLh_rKbQ$X`VIac?$jAmU
zLegb+gGGM4Kfrim|4!w(g>U>U+E^}qv9<V?BGb_FfPtlNuOzF2q6I@^a{Vy|4-P(u
z2Noax0=dirwf0;N42&)f3``sf7=)6;r@H^l-(@jnP*wlg#=yuT05pdn@vk47qCO=?
zk6VQ@44&4VObVIl1|Ez>a*ZMi;<KF^VzRgxi<WM?k|v~Z{UK0XxKBi3JBT3<Wbju#
zTEU&adha^lZ||8aBcj`q^BQbctt~lbcvHe*-oc4%C%7#xF;ud;ODRYfEMeRf8QrSP
zJHga~;p9O^4w;5Oo-(&<RTK&snAjo2V>Lu%PFhla+)Mkzr{>F3fa!z5)78&qol`;+
E02gV)g#Z8m

literal 0
HcmV?d00001

diff --git a/frontend/public/img/lanes/icon-position-utility-blue.png b/frontend/public/img/lanes/icon-position-utility-blue.png
new file mode 100644
index 0000000000000000000000000000000000000000..bc77b76c713b07e5518e0026bc65d8dee1689ccc
GIT binary patch
literal 4941
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
a{1>MG{%f<-KbOCv6{?uH=*p-+=lvVoh~C=(

literal 0
HcmV?d00001

diff --git a/frontend/public/img/lanes/icon-position-utility-hover.png b/frontend/public/img/lanes/icon-position-utility-hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..55e725ed7784d0b2fed2e177c6444b9ab48bcabb
GIT binary patch
literal 1334
zcmeAS@N?(olHy`uVBq!ia0vp^9U#oX1|)5EEd~m({PlEk45?szbFdL8#?Y|f?@IBN
zOduvh!%fR<jpa=ST#sMhN<6!(q@p|fSM%iu6W(qNc=(R*YhG)$d;9Kb6Zpz`x6e5G
z^zZDGXXelSeeUN6StH}`XYT2r^q%rM@>7&$1zXU(8)suL$WAa-cslX?0{L>Mbc?Fy
z?Fvt47B5gPcZqlS)-Xj#t-!scbunK}h{%NY1rw|nt1IX#EbV!EM^g6T3-)~)JSVIJ
z&dPq0pAf9Dbc*sF#s7>qmsu#>-r@X@`4a1#P>H_H3%JWY+&#Pw)Ve<0!SA)xc$ZTU
z>pV@4<Hpm1_bN&<*;Vo!S2vhqz0g`^vn^W+UwK2Cb8;p-<I6WUax!#Gq@}pewjFcY
zyl~@(qEs^zv01#mt!c{bV37+z1rx>BcwYEqI$=Y;SzZrovdX56x%Q3AuCdz**>LKp
zY<_x7$j4${)5QIL3)o`#byRLIIVR*_v95X6eqR;&H~b1J7tb7%@OF53ga6ZFpDd}0
zyZ@Y&45X8F8e1Nl&QO~hqr5}N#iQrupDd7wRz}WimEr@dbT-au;oWS=!>b@O|IEE-
zHv%3yJ_ut_oXPu)MW8P_VZz(z-bH7g+~0P60!xB+z9Z9<lp?`Z2MgO&ULPuy3E3Sp
zA@ISnUlR;u%nxeJUq8W*?fcd?l?MfP*n=I?b+_C5g|0ZtFLUN^<0i{^!|IE!ue<9H
zI~Z3iPuOT?HRHXTs=Vn%p0?E6>U`%I)oo{;k6`~S^Z25N-z-zT^WV0MJZZj|pqOEJ
zRCDIT2YVPR`JPQ<zn5ac;kh|YH(_Gr>6(2z*;Tb=*LEA!l~4HL&-hj@aZYlk%{k57
zXxX;Kc4x(T9t-~KFI>CrGrx7GtAzTzXWXg0cM2bFSK&UtF@#gp^y7B>egnUyt<SYs
z?i)!=_^bCt?Ekw9>(9@Y2(m9YG4Y+;gLB?h?aX_R?ynX}T(iXa?%Y!>H{Qz@?KNc$
zHHa(U`EFCc#Ty`3ROE`rkte%O+dW!Ve!_BE<MjX`!Q(bs5|_Q?6W>n|o-T65W5yz_
zYq8%1+4nm8P2IA9t80}*`PMIj-}rXko7JSXWOqn;DV(SB?B&(F%x`4BNhs^B_}2aE
z1<#pmt!kh%L`6az14Uox{qAVKr+6XS(NR=1bmzNU@0EdWc=V`AYx(Y&@|*5U7+<oN
zHBO%<zTPV);OUW=*XtfGjoe(P_;rGk0dq{j((PjRTK8S~ID4jk)64}LU!FVvYMT2X
zRqbn7T)<P;&~>|QbX6QRa~`iWI_BiKH8#ZE+Df-#6~`BlbjkD=>keOTTHfW5&&nF=
z<Fjb@KY#9dT7}uHSL*_Mf7=5UhD2!t-JF$LHdl-%?2?niq)4;eI6kgb3sz+9uQ<uQ
zYR>w%cMl3443KEOxL;xI3&puhIhHzDZ>W;yc&Fl7v~OlkW5M}%Z@o`vq%1I7p{L2(
zAl0ynK{SLBj6O4JtzZJ8R~!MN3!1b*=-5In2i8y!I_n(Tz_kj5X6@%wg$l}wu3`!a
z$c5_DTJfs!m|;F&0BZ;oh03g0zy(ID7y=wc101jNUV7RuC0Uc=9^QSzcT=`|Ur$l2
z-1*4v)0Gu}In3SvSFD?K(oj?F_>vhilZ8$^nIST{*hsU}r_Zx8rO4;h2cL5{m+UzO
h6!x5?0zti(coXNAX8%?5p8zWFJYD@<);T3K0RWi`Q%C>+

literal 0
HcmV?d00001

diff --git a/frontend/public/img/lanes/icon-position-utility.png b/frontend/public/img/lanes/icon-position-utility.png
new file mode 100644
index 0000000000000000000000000000000000000000..724f6c8c3d3443b6dc25cb342b5037275d2bcbd4
GIT binary patch
literal 1335
zcmeAS@N?(olHy`uVBq!ia0vp^9U#oX1|)5EEd~m({PT2i45?szbFdL8#?Y|f?@IBN
zOduvh!%fTV7b}_!xE>e2-Jqr?d+%83@8-)7HoV+8ovXZj#bmDUT;<n&#a|X&e<~&%
zbMNfAeKYTV-(PH}qIme+8Qaa@ql=4UGdR<l(-m?$WH)h_v8SkVNIx-_P_#}=w`gnH
zu8=dsc)|8J9kq-%IS)-U@GCpAu0W)*UyOAL^O95NZU|2Z6WG?Hy2-e#C7I<%Qli7X
z#+sXopBXLr4oxcxC_7Q(U=}Si;p`^oXUv!Q=WH^NS?*weQ_<RK5~Gt?t1^pGYWf>4
zPq~UTM~iu$mRrqLo<5j-u%L!Xbdzvdd&;td4QD3F3Tzfk?rd)O^7TZ{k%%Km*k&Js
zSAmeaqaPuB_0!qM5(d(`$C?c1NJKsNU$F9b+w}(ZeVm;6W}9oo`j#(vcAZnC;kF(3
z$+T+`H3EIN7d*%p_GGJmWUJD0QzQAKuf?~96!XcmnBsn`sGQ2FNbX!*u!k-9#>uHo
z(srDkM$-2p9x2F}J7)T;&t#Z(yyK~b)fu<Ihs^~wLDjPtIJX{esJ7!c>0@x3{oxMw
zV=wCVs5tum%iYs<gnip5F$)F7S=|%(`#e07^km!}_D$yw;(iw;FT{B~HX!?x<fTr9
zlzNXE@jihWEWd7j`gZ)JSXSX|_Tv1_Ip@r;#C_TP_2ho93rzPSH$=R)nepDr+b(Mn
zYsj%%>U`&zj`Pg&Z)X3z#ymsi_!X)2<G;MQCOOK^;ExI|eAQJ{aIZmy|JgK_doGq7
zu~}!M4l-?>cJk9BxhZQrwwycqgSqkZd?u?4M=jcwcg&q!warSX?-9p*1D;(!?4@?+
zK9?^ODlqgjIHZ2cE9Lmf-738O8=p+<diCe+YrSJ9uYQPNEu5~%c=K`Vy+`-o{{LDi
z?D~WKTlJFN)v3>C-h0>x6fNB)vHG<0-MKoP7w%hE><wj|Dv__ScsJXxjxT&+`JGL#
z+8Cg`ro(|1d`Al{pD8B!=+?SavHMTZUZEG@I`vxYOJ%t)eDiF!Ef50nK7%CJZ(p@w
z63>&;@LwIgdz-IEhX!~uwavSGS9`Cs{MTRHTCpLo7a6QSdCB_AYu)&OpNmetUiZ&V
z38Zr00wdR{*JJ-etk7Fw!yI{cs@);>6qXx&aanPDY<4a9#IomF>{0KnY07`DIA1zo
zQsBD&o)GKQ<u@OT8^^O=cARxzo?nu0TjO-8FJbA9s$E*^cNax{aP)lpaAnZ?g$rKk
zttu^wlCTKn*sIE=b<`oQ{OJ~h;#D82Zm&>OU<C6jSFvmr4f*S8s<FKFXRvB`wByzI
zkmBUmTP7rwW^#Ch%josS)HpuvUiEi+4A3|6A#e9TQR3F}|9t)1yBl2%8eNNCXnO=+
zzA3U$B!hj?e1;hQH=D05IZ#mk&HH{ha{zk?>xu<jD+*U|1vrX=QE26YCM_^pb;yA=
z6olTktYQ!iVT7QsN3U;U0qFsuRbep2KrO4>+)b9{GX$_+(SVo=Q^W>Sv`RYVl)P!t
z=ZUhxwXS)Sj#?Bgd3sB3{^osp&mW%UH9uZcvu@H!Lrt~gOJ>MS7CP}{hREd2W}1yY
weV&$SMLwrwXU^&Mw44r9F-gS}g0eFCYcAb)Y@g0104nf2UHx3vIVCg!05NxB4FCWD

literal 0
HcmV?d00001

diff --git a/frontend/server/api/champion/[alias].js b/frontend/server/api/champion/[alias].js
index 686d18b..531d833 100644
--- a/frontend/server/api/champion/[alias].js
+++ b/frontend/server/api/champion/[alias].js
@@ -1,17 +1,5 @@
-import { MongoClient } from 'mongodb'
+import {connectToDatabase, fetchLatestPatch} from '../../utils/mongo'
 
-async function connectToDatabase() {
-    // Create a MongoClient with a MongoClientOptions object to set the Stable API version
-    const client = new MongoClient(`mongodb://${process.env.MONGO_USER}:${process.env.MONGO_PASS}@mongo:27017`)
-    await client.connect()
-    return client
-}
-async function fetchLatestPatch(client) {
-    const database = client.db("patches");
-    const patches = database.collection("patches");
-    const latestPatch = await patches.find().limit(1).sort({date:-1}).next()
-    return latestPatch.patch
-}
 async function championInfos(client, patch, championAlias) {
     const database = client.db("champions");
     const collection = database.collection(patch);
diff --git a/frontend/server/api/champions.js b/frontend/server/api/champions.js
new file mode 100644
index 0000000..6f54fa8
--- /dev/null
+++ b/frontend/server/api/champions.js
@@ -0,0 +1,23 @@
+import {connectToDatabase, fetchLatestPatch} from '../utils/mongo'
+
+async function champions(client, patch) {
+    const database = client.db("champions");
+    const collection = database.collection(patch);
+    const data = await collection.find().toArray()
+    data.map((x) => {
+        delete x.runes
+        delete x.builds
+    })
+    return data
+}
+
+export default defineEventHandler(async (event) => {
+    const client = await connectToDatabase();
+    const latestPatch = await fetchLatestPatch(client);
+
+    const data = await champions(client, latestPatch);
+    
+    await client.close()
+
+    return data
+})
diff --git a/frontend/server/utils/mongo.js b/frontend/server/utils/mongo.js
new file mode 100644
index 0000000..1d9c9d1
--- /dev/null
+++ b/frontend/server/utils/mongo.js
@@ -0,0 +1,17 @@
+import { MongoClient } from 'mongodb'
+
+async function connectToDatabase() {
+    // Create a MongoClient with a MongoClientOptions object to set the Stable API version
+    const client = new MongoClient(`mongodb://${process.env.MONGO_USER}:${process.env.MONGO_PASS}@mongo:27017`)
+    await client.connect()
+    return client
+}
+
+async function fetchLatestPatch(client) {
+    const database = client.db("patches");
+    const patches = database.collection("patches");
+    const latestPatch = await patches.find().limit(1).sort({date:-1}).next()
+    return latestPatch.patch
+}
+
+export {connectToDatabase, fetchLatestPatch}
diff --git a/match_collector/champion_stat.ts b/match_collector/champion_stat.ts
index 6a49166..b1bad4e 100644
--- a/match_collector/champion_stat.ts
+++ b/match_collector/champion_stat.ts
@@ -141,6 +141,7 @@ async function championInfos(client, patch: number, champion: Champion) {
     let winningMatches = 0;
     let losingMatches = 0;
     let totalMatches = 0;
+    const lanes : Array<{data: string, count: number}> = [];
     const runes : Array<Rune> = [];
     const builds : Builds = {tree:treeInit(), start: [], bootsFirst: 0, boots: [], lateGame: []}
     for await (let match of allMatches) {
@@ -156,6 +157,12 @@ async function championInfos(client, patch: number, champion: Champion) {
             else
                 losingMatches += 1;
 
+            // Lanes
+            // TODO: make stats lane-dependant
+            const already = lanes.find((x) => x.data == participant.teamPosition)
+            if(already == undefined) lanes.push({count:1, data: participant.teamPosition})
+            else already.count += 1
+
             // Runes
             handleParticipantRunes(participant, runes)
             
@@ -168,6 +175,9 @@ async function championInfos(client, patch: number, champion: Champion) {
 
     let totalChampionMatches = winningMatches + losingMatches;
 
+    lanes.sort((a, b) => b.count - a.count)
+    arrayRemovePercentage(lanes, totalChampionMatches, 0.15)
+
     // Filter runes to keep 3 most played
     runes.sort((a, b) => b.count - a.count)
     if(runes.length > 3)
@@ -198,6 +208,7 @@ async function championInfos(client, patch: number, champion: Champion) {
     return {name: champion.name,
             alias: champion.alias.toLowerCase(),
             id: championId,
+            lanes: lanes,
             winrate: winningMatches / totalChampionMatches, 
             gameCount: totalChampionMatches,
             pickrate: totalChampionMatches/totalMatches,
@@ -236,7 +247,6 @@ async function makeChampionsStats(client, patch : number) {
 
     const database = client.db("champions")
     const collection = database.collection(patch)
-    await collection.createIndex({id:1})
     await collection.createIndex({alias:1})
 }