Updated Items and Added Event Icons

This commit is contained in:
Annika Merris 2024-01-22 21:25:41 -05:00
parent d30bde5c4d
commit 744e6608af
15 changed files with 202 additions and 58 deletions

View file

@ -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>

View file

@ -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'

View file

@ -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>

View file

@ -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'

View file

@ -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>

View file

@ -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'

View file

@ -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)
)
)
)

View file

@ -7,4 +7,5 @@ export type PowerItem = {
rarity: number
origin: string
tooltip: string
isEventItem: string
}