mirror of
https://forgejo.merr.is/annika/isl-vue3.git
synced 2025-12-14 14:35:34 -05:00
Updated Items and Added Event Icons
This commit is contained in:
parent
d30bde5c4d
commit
744e6608af
15 changed files with 202 additions and 58 deletions
|
|
@ -11,6 +11,12 @@ const {
|
|||
} = storeToRefs(usePowerItems())
|
||||
|
||||
const headers = ref([
|
||||
{
|
||||
title: "Event",
|
||||
align: ' d-none d-lg-table-cell start',
|
||||
sortable: true,
|
||||
value: '1.origin'
|
||||
},
|
||||
{
|
||||
title: 'Name',
|
||||
align: 'start',
|
||||
|
|
@ -61,8 +67,14 @@ const sortBy = ref([
|
|||
}
|
||||
])
|
||||
|
||||
const getEventImageUrl = function(eventName: string): string {
|
||||
return eventName !== undefined ? "/images/" + eventName.replace(/\s/g, '_').toLocaleLowerCase() + ".png" : ''
|
||||
}
|
||||
|
||||
const getColor = computed(() => (rarity: number): string => {
|
||||
if (rarity === 4) {
|
||||
if (rarity === 5) {
|
||||
return 'red'
|
||||
} else if (rarity === 4) {
|
||||
return 'amber'
|
||||
} else if (rarity === 3) {
|
||||
return 'purple'
|
||||
|
|
@ -85,6 +97,11 @@ const getColor = computed(() => (rarity: number): string => {
|
|||
:items="[...specialBlessingItems.entries()]"
|
||||
:headers="headers"
|
||||
>
|
||||
<template v-slot:item.1.origin="{ item }">
|
||||
<v-card class="my-2" elevation="2" rounded width="39" v-if="getEventImageUrl(item[1].origin) !== ''" color="transparent">
|
||||
<v-img :src="getEventImageUrl(item[1].origin)"></v-img>
|
||||
</v-card>
|
||||
</template>
|
||||
<template v-slot:item.1.itemName="{ item }">
|
||||
<v-tooltip activator="parent" v-if="item[1].tooltip != undefined" content-class="custom-tooltip">
|
||||
<v-card variant="text" density="compact" max-width="25vw">
|
||||
|
|
@ -116,6 +133,7 @@ const getColor = computed(() => (rarity: number): string => {
|
|||
<template v-slot:tfoot>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td class="d-none d-lg-table-cell"></td>
|
||||
<td></td>
|
||||
<td class="d-none d-lg-table-cell"></td>
|
||||
<td class="d-none d-lg-table-cell"></td>
|
||||
|
|
|
|||
|
|
@ -44,7 +44,9 @@ const sortBy = ref([
|
|||
])
|
||||
|
||||
const getColor = computed(() => (rarity: number): string => {
|
||||
if (rarity === 4) {
|
||||
if (rarity === 5) {
|
||||
return 'red'
|
||||
} else if (rarity === 4) {
|
||||
return 'amber'
|
||||
} else if (rarity === 3) {
|
||||
return 'purple'
|
||||
|
|
|
|||
|
|
@ -11,6 +11,12 @@ const {
|
|||
} = storeToRefs(usePowerItems())
|
||||
|
||||
const headers = ref([
|
||||
{
|
||||
title: "Event",
|
||||
align: ' d-none d-lg-table-cell start',
|
||||
sortable: true,
|
||||
value: '1.origin'
|
||||
},
|
||||
{
|
||||
title: 'Name',
|
||||
align: 'start',
|
||||
|
|
@ -61,8 +67,13 @@ const sortBy = ref([
|
|||
}
|
||||
])
|
||||
|
||||
const getEventImageUrl = function(eventName: string): string {
|
||||
return eventName !== undefined ? "/images/" + eventName.replace(/\s/g, '_').toLocaleLowerCase() + ".png" : ''
|
||||
}
|
||||
const getColor = computed(() => (rarity: number): string => {
|
||||
if (rarity === 4) {
|
||||
if (rarity === 5) {
|
||||
return 'red'
|
||||
} else if (rarity === 4) {
|
||||
return 'amber'
|
||||
} else if (rarity === 3) {
|
||||
return 'purple'
|
||||
|
|
@ -85,6 +96,11 @@ const getColor = computed(() => (rarity: number): string => {
|
|||
:items="[...specialFellowItems.entries()]"
|
||||
:headers="headers"
|
||||
>
|
||||
<template v-slot:item.1.origin="{ item }">
|
||||
<v-card class="my-2" elevation="2" rounded width="39" v-if="getEventImageUrl(item[1].origin) !== ''" color="transparent">
|
||||
<v-img :src="getEventImageUrl(item[1].origin)"></v-img>
|
||||
</v-card>
|
||||
</template>
|
||||
<template v-slot:item.1.itemName="{ item }">
|
||||
<v-tooltip activator="parent" v-if="item[1].tooltip != undefined" content-class="custom-tooltip">
|
||||
<v-card variant="text" density="compact" max-width="25vw">
|
||||
|
|
@ -116,6 +132,7 @@ const getColor = computed(() => (rarity: number): string => {
|
|||
<template v-slot:tfoot>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td class="d-none d-lg-table-cell"></td>
|
||||
<td></td>
|
||||
<td class="d-none d-lg-table-cell"></td>
|
||||
<td class="d-none d-lg-table-cell"></td>
|
||||
|
|
|
|||
|
|
@ -38,7 +38,9 @@ const sortBy = ref([
|
|||
])
|
||||
|
||||
const getColor = computed(() => (rarity: number): string => {
|
||||
if (rarity === 4) {
|
||||
if (rarity === 5) {
|
||||
return 'red'
|
||||
} else if (rarity === 4) {
|
||||
return 'amber'
|
||||
} else if (rarity === 3) {
|
||||
return 'purple'
|
||||
|
|
|
|||
|
|
@ -11,6 +11,12 @@ const {
|
|||
} = storeToRefs(usePowerItems())
|
||||
|
||||
const headers = ref([
|
||||
{
|
||||
title: "Event",
|
||||
align: ' d-none d-lg-table-cell start',
|
||||
sortable: true,
|
||||
value: '1.origin'
|
||||
},
|
||||
{
|
||||
title: 'Name',
|
||||
align: 'start',
|
||||
|
|
@ -61,8 +67,14 @@ const sortBy = ref([
|
|||
}
|
||||
])
|
||||
|
||||
const getEventImageUrl = function(eventName: string): string {
|
||||
return eventName !== undefined ? "/images/" + eventName.replace(/\s/g, '_').toLocaleLowerCase() + ".png" : ''
|
||||
}
|
||||
|
||||
const getColor = computed(() => (rarity: number): string => {
|
||||
if (rarity === 4) {
|
||||
if (rarity === 5) {
|
||||
return 'red'
|
||||
} else if (rarity === 4) {
|
||||
return 'amber'
|
||||
} else if (rarity === 3) {
|
||||
return 'purple'
|
||||
|
|
@ -85,6 +97,11 @@ const getColor = computed(() => (rarity: number): string => {
|
|||
:items="[...specialIntimacyItems.entries()]"
|
||||
:headers="headers"
|
||||
>
|
||||
<template v-slot:item.1.origin="{ item }">
|
||||
<v-card class="my-2" elevation="2" rounded width="39" v-if="getEventImageUrl(item[1].origin) !== ''" color="transparent">
|
||||
<v-img :src="getEventImageUrl(item[1].origin)"></v-img>
|
||||
</v-card>
|
||||
</template>
|
||||
<template v-slot:item.1.itemName="{ item }">
|
||||
<v-tooltip activator="parent" v-if="item[1].tooltip != undefined" content-class="custom-tooltip">
|
||||
<v-card variant="text" density="compact" max-width="25vw">
|
||||
|
|
@ -117,6 +134,7 @@ const getColor = computed(() => (rarity: number): string => {
|
|||
<template v-slot:tfoot>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td class="d-none d-lg-table-cell"></td>
|
||||
<td></td>
|
||||
<td class="d-none d-lg-table-cell"></td>
|
||||
<td class="d-none d-lg-table-cell"></td>
|
||||
|
|
|
|||
|
|
@ -38,7 +38,9 @@ const sortBy = ref([
|
|||
])
|
||||
|
||||
const getColor = computed(() => (rarity: number): string => {
|
||||
if (rarity === 4) {
|
||||
if (rarity === 5) {
|
||||
return 'red'
|
||||
} else if (rarity === 4) {
|
||||
return 'amber'
|
||||
} else if (rarity === 3) {
|
||||
return 'purple'
|
||||
|
|
|
|||
|
|
@ -137,7 +137,7 @@ export const usePowerItems = defineStore('powerItems', () => {
|
|||
() =>
|
||||
new Map(
|
||||
[...blessingPowerItems.value.entries()].filter(
|
||||
(cur) => cur[1].maxItemPower === cur[1].minItemPower
|
||||
(cur) => !(cur[1].isEventItem)
|
||||
)
|
||||
)
|
||||
)
|
||||
|
|
@ -157,7 +157,7 @@ export const usePowerItems = defineStore('powerItems', () => {
|
|||
() =>
|
||||
new Map(
|
||||
[...blessingPowerItems.value.entries()].filter(
|
||||
(cur) => cur[1].maxItemPower !== cur[1].minItemPower
|
||||
(cur) => (cur[1].isEventItem)
|
||||
)
|
||||
)
|
||||
)
|
||||
|
|
@ -206,7 +206,7 @@ export const usePowerItems = defineStore('powerItems', () => {
|
|||
() =>
|
||||
new Map(
|
||||
[...fellowPowerItems.value.entries()].filter(
|
||||
(cur) => cur[1].maxItemPower === cur[1].minItemPower
|
||||
(cur) => !(cur[1].isEventItem)
|
||||
)
|
||||
)
|
||||
)
|
||||
|
|
@ -226,7 +226,7 @@ export const usePowerItems = defineStore('powerItems', () => {
|
|||
() =>
|
||||
new Map(
|
||||
[...fellowPowerItems.value.entries()].filter(
|
||||
(cur) => cur[1].maxItemPower !== cur[1].minItemPower
|
||||
(cur) => (cur[1].isEventItem)
|
||||
)
|
||||
)
|
||||
)
|
||||
|
|
@ -278,7 +278,7 @@ export const usePowerItems = defineStore('powerItems', () => {
|
|||
() =>
|
||||
new Map(
|
||||
[...intimacyPowerItems.value.entries()].filter(
|
||||
(cur) => cur[1].maxItemPower === cur[1].minItemPower
|
||||
(cur) => !(cur[1].isEventItem)
|
||||
)
|
||||
)
|
||||
)
|
||||
|
|
@ -298,7 +298,7 @@ export const usePowerItems = defineStore('powerItems', () => {
|
|||
() =>
|
||||
new Map(
|
||||
[...intimacyPowerItems.value.entries()].filter(
|
||||
(cur) => cur[1].maxItemPower !== cur[1].minItemPower
|
||||
(cur) => (cur[1].isEventItem)
|
||||
)
|
||||
)
|
||||
)
|
||||
|
|
|
|||
|
|
@ -7,4 +7,5 @@ export type PowerItem = {
|
|||
rarity: number
|
||||
origin: string
|
||||
tooltip: string
|
||||
isEventItem: string
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue