vhaudiquet/buildpath
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

TypeScript in ItemViewer

Browse Source
This commit is contained in:
Valentin Haudiquet
2024-11-25 20:47:22 +01:00
parent b8506bfcdb
commit 306c1e31e9
1 changed files with 30 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/components/ItemViewer.vue
View File

@@ -1,12 +1,30 @@
<script setup>
const props = defineProps({
builds: {
type: Array,
required: true
<script setup lang="ts">
type ItemTree = {
count: number
data: number
children: Array<ItemTree>
}
type Builds = {
start: Array<{count: number, data: number}>
tree: ItemTree
bootsFirst: number
boots: Array<{count: number, data: number}>
lateGame: Array<{count: number, data: number}>
}
})
const {data : items} = await useFetch(CDRAGON_BASE + "plugins/rcp-be-lol-game-data/global/default/v1/items.json")
const props = defineProps<{
builds: Builds
}>()
const builds = props.builds
type Item = {
id: number
}
type ItemResponse = {
data: Ref<Array<Item>>
}
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)
@@ -22,7 +40,7 @@ for(let item of items.value) {
<div style="margin-left: 5px; margin-right: 5px;" v-for="item in builds.start" >
<NuxtImg v-if="item.data != null && item.data != undefined"
style="border: 1px solid var(--color-on-surface);"
width="64" height="64" :alt="item.data"
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>
@@ -37,7 +55,7 @@ for(let item of items.value) {
<div style="margin-left: 5px; margin-right: 5px;" v-for="item in builds.boots" >
<NuxtImg v-if="item.data != null && item.data != undefined"
style="border: 1px solid var(--color-on-surface);"
width="64" height="64" :alt="item.data"
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>
@@ -55,7 +73,7 @@ for(let item of items.value) {
<div style="margin-left: 5px; margin-right: 5px;" v-for="item in builds.boots" >
<NuxtImg v-if="item.data != null && item.data != undefined"
style="border: 1px solid var(--color-on-surface);"
width="64" height="64" :alt="item.data"
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>
@@ -67,7 +85,7 @@ for(let item of items.value) {
<div style="display: flex; width: fit-content; height: fit-content; margin:auto;">
<div style="margin-left: 5px; margin-right: 5px;" v-for="item in builds.lateGame.slice(0, 7)" >
<NuxtImg v-if="item.data != null && item.data != undefined"
class="item-img" width="64" height="64" :alt="item.data"
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>