Lane-dependant stats (fix #5)

2024-11-29 18:26:17 +01:00
parent 5b7262877d
commit d8443efd7e
12 changed files with 233 additions and 107 deletions
--- a/frontend/components/ChampionTitle.vue
+++ b/frontend/components/ChampionTitle.vue
@@ -1,18 +1,17 @@
 <script setup lang="ts">
 const props = defineProps<{
-  championId: string,
+  championId: number,
  winrate: number,
  pickrate: number,
  gameCount: number
 }>()

-const championId = Number(props.championId)
+const winrate = ref((props.winrate * 100).toFixed(2))
+watch(() => props.winrate, () => {winrate.value = (props.winrate * 100).toFixed(2)})
+const pickrate = ref((props.pickrate * 100).toFixed(2))
+watch(() => props.pickrate, () => {pickrate.value = (props.pickrate * 100).toFixed(2)})

-const winrate = (props.winrate * 100).toFixed(2)
-const pickrate = (props.pickrate * 100).toFixed(2)
-const gameCount = props.gameCount
-
-const { data: championData } : ChampionResponse = await useFetch(CDRAGON_BASE + "plugins/rcp-be-lol-game-data/global/default/v1/champions/" + championId + ".json")
+const { data: championData } : ChampionResponse = await useFetch(CDRAGON_BASE + "plugins/rcp-be-lol-game-data/global/default/v1/champions/" + props.championId + ".json")
 const championName = championData.value.name
 const championDescription = championData.value.title
 </script>
--- a/frontend/components/ItemViewer.vue
+++ b/frontend/components/ItemViewer.vue
@@ -2,7 +2,6 @@
 const props = defineProps<{
  builds: Builds
 }>()
-const builds = props.builds

 const {data : items} : ItemResponse = await useFetch(CDRAGON_BASE + "plugins/rcp-be-lol-game-data/global/default/v1/items.json")
 const itemMap = reactive(new Map())
@@ -10,9 +9,15 @@ for(let item of items.value) {
    itemMap.set(item.id, item)
 }

-builds.tree.children.splice(1, builds.tree.children.length - 1)
-if(builds.tree.children[0] != null && builds.tree.children[0] != undefined)
-    builds.tree.children[0].children.splice(1, builds.tree.children[0].children.length - 1)
+watch(() => props.builds, () => trimBuilds(props.builds))
+trimBuilds(props.builds)
+
+function trimBuilds(builds : Builds) {
+    builds.tree.children.splice(1, builds.tree.children.length - 1)
+    if(builds.tree.children[0] != null && builds.tree.children[0] != undefined)
+        builds.tree.children[0].children.splice(1, builds.tree.children[0].children.length - 1)
+}
+
 </script>

 <template>
--- a/frontend/components/LaneFilter.vue
+++ b/frontend/components/LaneFilter.vue
@@ -1,13 +1,10 @@
 <script setup lang="ts">
+import { LANE_IMAGES, LANE_IMAGES_HOVER, LANE_IMAGES_SELECTED } from '~/utils/cdragon';
+
 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)

--- a/frontend/components/RuneSelector.vue
+++ b/frontend/components/RuneSelector.vue
@@ -7,8 +7,6 @@ const props = defineProps<{
        pickrate: number}>
 }>()

-const runes = props.runes
-
 const currentlySelectedPage = ref(0)
 const primaryStyles : Ref<Array<PerkStyle>> = ref([])
 const secondaryStyles : Ref<Array<PerkStyle>> = ref([])
@@ -21,22 +19,35 @@ for(let perk of perks_data.value) {
 }

 let { data: stylesData } : PerkStylesResponse = await useFetch(CDRAGON_BASE + "plugins/rcp-be-lol-game-data/global/default/v1/perkstyles.json")
-for(let style of stylesData.value.styles) {
-    for(let rune of runes) {
-        if(style.id == rune.primaryStyle) {
-            primaryStyles.value.push(style)
-            for(let perk of style.slots[0].perks) {
-                if(rune.selections.includes(perk)) {
-                    keystoneIds.value.push(perk)
+watch(() => props.runes, (newRunes, oldRunes) => {
+    currentlySelectedPage.value = 0
+    primaryStyles.value = []
+    secondaryStyles.value = []
+    keystoneIds.value = []
+
+    refreshStylesKeystones()
+})
+
+function refreshStylesKeystones() {
+    for(let style of stylesData.value.styles) {
+        for(let rune of props.runes) {
+            if(style.id == rune.primaryStyle) {
+                primaryStyles.value.push(style)
+                for(let perk of style.slots[0].perks) {
+                    if(rune.selections.includes(perk)) {
+                        keystoneIds.value.push(perk)
+                    }
                }
            }
-        }
-        if(style.id == rune.secondaryStyle) {
-            secondaryStyles.value.push(style)
+            if(style.id == rune.secondaryStyle) {
+                secondaryStyles.value.push(style)
+            }
        }
    }
 }

+refreshStylesKeystones()
+
 function runeSelect(index: number) {
    currentlySelectedPage.value = index
 }
@@ -45,8 +56,12 @@ function runeSelect(index: number) {

 <template>
    <div style="width: fit-content;">
-    <RunePage style="margin:auto; width: fit-content;" :primaryStyleId="runes[currentlySelectedPage].primaryStyle" :secondaryStyleId="runes[currentlySelectedPage].secondaryStyle" :selectionIds="runes[currentlySelectedPage].selections" />
-    <div style="display: flex; margin-top: 20px;">
+    <RunePage v-if="runes[currentlySelectedPage] != undefined && runes[currentlySelectedPage] != null" 
+        style="margin:auto; width: fit-content;" 
+        :primaryStyleId="runes[currentlySelectedPage].primaryStyle" 
+        :secondaryStyleId="runes[currentlySelectedPage].secondaryStyle" 
+        :selectionIds="runes[currentlySelectedPage].selections" />
+    <div style="display: flex; margin-top: 20px; justify-content: center;">
    <div v-for="(_, i) in runes" :class="'rune-selector-entry ' + (i == currentlySelectedPage ? 'rune-selector-entry-selected' : '')" @click="runeSelect(i)">
        <div style="display: flex; margin-top: 20px;">
        <NuxtImg v-if="primaryStyles[i] != null && primaryStyles[i] != undefined" 
--- a/frontend/components/SideBar.vue
+++ b/frontend/components/SideBar.vue
@@ -1,27 +1,42 @@
 <script setup lang="ts">
+import { LANE_IMAGES, lanePositionToIndex } from '~/utils/cdragon';
+
 defineProps<{
    championName: String
+    championLanes: any
 }>()
 const emit = defineEmits<{
-    stateChange: [state: String]
+    stateChange: [state: String, lane: number]
 }>()

 const state = ref("runes")
+const laneState = ref(0)

-function handleStateChange(newState : string) {
+function handleStateChange(newState : string, newLane: number) {
    state.value = newState;
-    emit('stateChange', newState)
+    laneState.value = newLane;
+    emit('stateChange', newState, newLane)
 }
 </script>

 <template>
    <div class="sidebar-container">
        <Logo font-size="2.6rem" img-width="60" style="padding-left: 15px; padding-right: 15px; margin-top: 30px;"/>
-        <h1 class="sidebar-link" style="margin-top: 30px; font-size: 2.4rem; padding-left: 20px;">{{ championName }}</h1>
-        <h2 :class="'sidebar-link ' + (state == 'runes' ? 'sidebar-link-selected' : '')" 
-            @click="handleStateChange('runes')" style="margin-top: 10px; font-size: 1.9rem; padding-left: 35px;">Runes</h2>
-        <h2 :class="'sidebar-link ' + (state == 'items' ? 'sidebar-link-selected' : '')" 
-            @click="handleStateChange('items')" style="margin-top: 10px; font-size: 1.9rem; padding-left: 35px;">Items</h2>
+
+        <div v-for="(lane, i) in championLanes">
+            
+        <div style="display: flex; align-items: center; margin-top: 30px;">
+        <h1 style="font-size: 2.4rem; padding-left: 20px;">{{ championName }}</h1>
+        <img style="margin-left: 10px;" width="40" height="40" :src="LANE_IMAGES[lanePositionToIndex(lane.data)]" />
+        <h2 style="margin-left: 5px; font-size: 1.8rem; font-weight: 200;">{{ lane.data.toLowerCase() }}</h2>
+        </div>
+
+        <h2 :class="'sidebar-link ' + (state == 'runes' && laneState == i ? 'sidebar-link-selected' : '')" 
+            @click="handleStateChange('runes', i)" style="margin-top: 10px; font-size: 1.9rem; padding-left: 35px;">Runes</h2>
+        <h2 :class="'sidebar-link ' + (state == 'items' && laneState == i ? 'sidebar-link-selected' : '')" 
+            @click="handleStateChange('items', i)" style="margin-top: 10px; font-size: 1.9rem; padding-left: 35px;">Items</h2>
+        
+        </div>
    </div>
 </template>

--- a/frontend/components/TreeItem.vue
+++ b/frontend/components/TreeItem.vue
@@ -8,15 +8,12 @@ const emit = defineEmits<{
    refresh: []
 }>()

-const item = props.tree
-
 const {data : items} : ItemResponse = await useFetch(CDRAGON_BASE + "plugins/rcp-be-lol-game-data/global/default/v1/items.json")
 const itemMap = reactive(new Map())
 for(let item of items.value) {
    itemMap.set(item.id, item)
 }

-import type { TreeItem } from '#build/components';
 import pkg from 'svg-dom-arrows';
 const { LinePath } = pkg;

@@ -28,6 +25,18 @@ onMounted(() => {
    emit('mount', start.value!!)
 })

+onBeforeUpdate(() => {
+    for(let arrow of arrows) {
+        arrow.release()
+    }
+    arrows.splice(0, arrows.length)
+})
+
+onUpdated(() => {
+    refreshArrows()
+    emit('mount', start.value!!)
+})
+
 onUnmounted(() => {
    for(let arrow of arrows) {
        arrow.release()
@@ -84,13 +93,13 @@ function handleRefresh() {
 <template>
    <div style="display: flex; align-items: center;">
        
-        <div v-if="item.data != undefined && item.data != null" style="width: fit-content; height: fit-content;">
-        <img ref="start" class="item-img" width="64" height="64" :alt="item.data.toString()" :src="CDRAGON_BASE + mapPath(itemMap.get(item.data).iconPath)" />
-        <h3 style="width: fit-content; margin:auto; margin-bottom: 10px;">{{ item.count }}</h3>
+        <div v-if="tree.data != undefined && tree.data != null" style="width: fit-content; height: fit-content;">
+        <img ref="start" class="item-img" width="64" height="64" :alt="tree.data.toString()" :src="CDRAGON_BASE + mapPath(itemMap.get(tree.data).iconPath)" />
+        <h3 style="width: fit-content; margin:auto; margin-bottom: 10px;">{{ tree.count }}</h3>
        </div>

        <div style="margin-left: 30px;">
-            <div style="width: fit-content; height: fit-content;" v-for="child in item.children">
+            <div style="width: fit-content; height: fit-content;" v-for="child in tree.children">
            <TreeItem @refresh="handleRefresh" @mount="(end) => handleSubtreeMount(end)" :tree="child" />
            </div>
        </div>