Many Changes

Added a 'default' image for spots where one is missing. Not the best solution, but it looks better on the site.
Cleaned up my code to avoid some duplication.
Added better 'Select All' logic to the event filter.
This commit is contained in:
Annika Merris 2024-01-23 18:33:55 -05:00
parent abe48cd902
commit 255f15798a
24 changed files with 323 additions and 783 deletions

BIN
public/images/isl_logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 202 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 202 KiB

BIN
public/images/unknown.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 202 KiB

View file

@ -20,7 +20,7 @@
"isEventItem": false
},
"ddd29671-ca7f-4132-8784-80346e154059": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Blessing Power Gachapon",
"minItemPower": 10,
"maxItemPower": 30,
@ -30,7 +30,7 @@
"isEventItem": true
},
"c1e029ff-b82c-48bd-a1f1-ea6291fad948": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Mandrake",
"minItemPower": 1,
"maxItemPower": 3,
@ -40,7 +40,7 @@
"isEventItem": true
},
"52cd4a48-ff8a-4493-8030-b4e7754cd227": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Muddled Mushroom",
"minItemPower": 2,
"maxItemPower": 5,
@ -50,7 +50,7 @@
"isEventItem": true
},
"636b7384-1389-4012-933c-9063baa7a38d": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Grassy Bunny",
"minItemPower": 3,
"maxItemPower": 6,
@ -60,7 +60,7 @@
"isEventItem": true
},
"2563b5f8-8fd5-4795-af86-33200605cf3e": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Chirping Chick",
"minItemPower": 4,
"maxItemPower": 10,
@ -70,7 +70,7 @@
"isEventItem": true
},
"54e9bcf5-f1a5-4350-a75d-88af02b4fc13": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Gorgeous Horse",
"minItemPower": 5,
"maxItemPower": 16,
@ -80,7 +80,7 @@
"isEventItem": true
},
"e736d2b9-a8ec-4a4e-a721-24880c8a6038": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Blooming Fox",
"minItemPower": 7,
"maxItemPower": 24,
@ -90,7 +90,7 @@
"isEventItem": true
},
"9fb7f9ba-e7ed-4e99-b161-386f48299443": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Frozen Dragon",
"minItemPower": 10,
"maxItemPower": 32,
@ -100,7 +100,7 @@
"isEventItem": true
},
"e2472929-1218-4cd6-a73b-b783c17bbc31": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Flaming Lion",
"minItemPower": 14,
"maxItemPower": 48,
@ -110,7 +110,7 @@
"isEventItem": true
},
"0e21a6ea-8262-44f7-91c3-0c51ace7613f": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Touno Souvenir 1",
"minItemPower": 5,
"maxItemPower": 5,
@ -120,7 +120,7 @@
"isEventItem": true
},
"700ffd61-c0bf-4f41-abd1-b6fd74a645bb": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Touno Souvenir 2",
"minItemPower": 10,
"maxItemPower": 10,

View file

@ -1,6 +1,6 @@
{
"1f7aff96-030d-4007-9a70-82db7a8be3e3": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Contestant Portrait (Wolf)",
"minItemPower": 15000,
"maxItemPower": 40000,
@ -10,7 +10,7 @@
"isEventItem": true
},
"2006c92e-8e32-4c9f-a913-3b2d1ed8dea0": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Potion of Bravery",
"minItemPower": 800,
"maxItemPower": 800,
@ -20,7 +20,7 @@
"isEventItem": false
},
"30d05d98-a615-4e3a-94da-8aa6e4ad03a9": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Basic Elixir",
"minItemPower": 3000,
"maxItemPower": 3000,
@ -30,7 +30,7 @@
"isEventItem": false
},
"3eccaaac-5afe-415a-ac8f-55df213cf015": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Potion of Freedom",
"minItemPower": 800,
"maxItemPower": 800,
@ -40,7 +40,7 @@
"isEventItem": false
},
"68a7a68a-2123-4a8e-b64d-9dbdf0637521": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Potion of Erudition",
"minItemPower": 800,
"maxItemPower": 800,
@ -50,7 +50,7 @@
"isEventItem": false
},
"7075da2f-a617-42a1-b142-fe2401ad87ec": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Potion of Inspiration",
"minItemPower": 800,
"maxItemPower": 800,
@ -60,7 +60,7 @@
"isEventItem": false
},
"762a2775-ca50-4c13-8797-2f03b045ed10": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Contestant Portrait (Lion)",
"minItemPower": 10000,
"maxItemPower": 25000,
@ -70,7 +70,7 @@
"isEventItem": true
},
"9c95396d-e5d8-4f7d-9d37-1469e7dc0ee1": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Signed Towel (Yellow)",
"minItemPower": 4500,
"maxItemPower": 10000,
@ -80,7 +80,7 @@
"isEventItem": true
},
"a351a27b-765b-46b5-95fc-99c47e63176d": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Potion of Diligence",
"minItemPower": 800,
"maxItemPower": 800,
@ -90,7 +90,7 @@
"isEventItem": false
},
"a44b763b-833b-49d0-91d6-e5fcb8c6ce7c": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Signed Handkerchief (Yellow)",
"minItemPower": 2000,
"maxItemPower": 5000,
@ -100,7 +100,7 @@
"isEventItem": true
},
"bc5fc5c6-65e1-41c8-822d-d6e06ec0894e": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Advanced Elixir",
"minItemPower": 30000,
"maxItemPower": 30000,
@ -110,7 +110,7 @@
"isEventItem": false
},
"cd50f711-36a4-4b3b-b4ef-84b52c8a18e2": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Champion's Statue",
"minItemPower": 30000,
"maxItemPower": 80000,
@ -120,7 +120,7 @@
"isEventItem": true
},
"ce522371-80bd-4266-b473-8f5ace7099c7": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Signed Handkerchief (Red)",
"minItemPower": 3000,
"maxItemPower": 8000,
@ -130,7 +130,7 @@
"isEventItem": true
},
"d7d705d3-9562-4f03-98d8-3b0da81fcf47": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Champion's Belt",
"minItemPower": 20000,
"maxItemPower": 50000,
@ -140,7 +140,7 @@
"isEventItem": true
},
"ed1663c2-aff0-41b4-b5ed-7f86463c1d69": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Signed Towel (Red)",
"minItemPower": 6000,
"maxItemPower": 15000,
@ -150,7 +150,7 @@
"isEventItem": true
},
"472d229e-3541-4115-8104-53af579f24a4": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Demonic Exercise Bike",
"minItemPower": 20000,
"maxItemPower": 50000,
@ -160,7 +160,7 @@
"isEventItem": true
},
"6214eeeb-c77b-415c-a055-6d15b04ca026": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Steel Barbell",
"minItemPower": 15000,
"maxItemPower": 40000,
@ -170,7 +170,7 @@
"isEventItem": true
},
"732f16e3-6de7-4bc7-af77-9cdbaf68b695": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Pac-Ball",
"minItemPower": 4500,
"maxItemPower": 10000,
@ -180,7 +180,7 @@
"isEventItem": true
},
"a64b4819-5b32-41c5-8fe0-293ea8695a0c": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Stone Dumbbell",
"minItemPower": 3000,
"maxItemPower": 8000,
@ -190,7 +190,7 @@
"isEventItem": true
},
"b282b9cb-1802-4563-88a1-e7e267a0bcd4": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Rock Kettlebell",
"minItemPower": 6000,
"maxItemPower": 15000,
@ -200,7 +200,7 @@
"isEventItem": true
},
"bf1611c0-ddec-4ad8-8299-a2e19818186f": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Screaming Punching Bag",
"minItemPower": 30000,
"maxItemPower": 80000,
@ -210,7 +210,7 @@
"isEventItem": true
},
"daca4964-69c4-4167-b7bf-2e8eb49a8f1b": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Ivy Jump Rope",
"minItemPower": 2000,
"maxItemPower": 5000,
@ -220,7 +220,7 @@
"isEventItem": true
},
"fff5a89a-1691-47ea-af30-c811f1c1dbfc": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Fairy Shuttlecock",
"minItemPower": 10000,
"maxItemPower": 25000,

View file

@ -1,6 +1,6 @@
{
"09b1fff4-c1a3-49d5-acf1-b996d93a7217": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Song: \"Unhappy Elder\"",
"minItemPower": 2,
"maxItemPower": 5,
@ -10,7 +10,7 @@
"isEventItem": true
},
"0dbbda4c-0e4c-4cc2-b204-0301178ae667": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Gold Ring",
"minItemPower": 1,
"maxItemPower": 1,
@ -20,7 +20,7 @@
"isEventItem": false
},
"590ebe99-0fdd-4216-bb51-88d48f07d518": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Song: \"Forbidden Love\"",
"minItemPower": 10,
"maxItemPower": 32,
@ -30,7 +30,7 @@
"isEventItem": true
},
"62c5fe6d-92d2-458d-8ce4-c206eeb6245a": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Song: \"Prince's Wish\"",
"minItemPower": 4,
"maxItemPower": 10,
@ -40,7 +40,7 @@
"isEventItem": true
},
"67e7598f-f687-4ea0-b9f5-f89aaa965d44": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Song: \"Otherworld Stars\"",
"minItemPower": 7,
"maxItemPower": 24,
@ -50,7 +50,7 @@
"isEventItem": true
},
"71c7537b-ef33-4f64-91d4-e7e9c3915cad": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Diamond Ring",
"minItemPower": 5,
"maxItemPower": 5,
@ -60,7 +60,7 @@
"isEventItem": false
},
"73ddfbbf-3071-4103-9893-b9b77af05ce9": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Song: \"Single Golden Mushroom\"",
"minItemPower": 5,
"maxItemPower": 16,
@ -70,7 +70,7 @@
"isEventItem": true
},
"910cfd8f-9e75-4ca1-b776-e6b4df78e80b": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Song: \"Starry Love\"",
"minItemPower": 1,
"maxItemPower": 3,
@ -80,7 +80,7 @@
"isEventItem": true
},
"b2536feb-7dcb-4cec-93e5-581bc64e693b": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Song: \"Princess's Wish\"",
"minItemPower": 3,
"maxItemPower": 6,
@ -90,7 +90,7 @@
"isEventItem": true
},
"b2ebc786-79c3-47df-b0d9-330bb8e85a5f": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Song: \"Unlucky Succubus\"",
"minItemPower": 14,
"maxItemPower": 48,
@ -100,7 +100,7 @@
"isEventItem": true
},
"d5eb513d-68e0-4cd3-bb44-e3e8d36cfecd": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Gemstone Ring",
"minItemPower": 2,
"maxItemPower": 2,
@ -110,7 +110,7 @@
"isEventItem": false
},
"bcd9068a-c3b1-4914-ac50-af3369a7a8e5": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Intamacy Gachapon",
"minItemPower": 10,
"maxItemPower": 30,
@ -119,7 +119,7 @@
"isEventItem": true
},
"6459b278-9e0d-48ab-b6bb-aa4bfc88011b": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Touno Speciality 1",
"minItemPower": 5,
"maxItemPower": 5,
@ -128,7 +128,7 @@
"origin": "Touno Island"
},
"223aafe8-450f-4343-8df3-d96117d28642": {
"iconURL": "",
"iconURL": "isl_logo.png",
"itemName": "Touno Speciality 2",
"minItemPower": 10,
"maxItemPower": 10,

View file

@ -1,13 +1,25 @@
<script setup lang="ts">
import { RouterView } from 'vue-router'
import GlobalHeader from '@/components/GlobalHeader.vue'
import { storeToRefs } from 'pinia'
import { usePowerItems } from './stores/powerItems'
import { computed } from 'vue'
const { blessingPowerItems, fellowPowerItems, intimacyPowerItems } = storeToRefs(usePowerItems())
const isLoaded = computed(
() =>
!blessingPowerItems.value.keys().next().done &&
!fellowPowerItems.value.keys().next().done &&
!intimacyPowerItems.value.keys().next().done
)
</script>
<template>
<v-app>
<GlobalHeader />
<v-main class="d-flex">
<RouterView />
<RouterView v-if="isLoaded" />
</v-main>
<v-footer app>
<div>Copyright Annika Merris 2024</div>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 196 KiB

View file

@ -1,187 +0,0 @@
<script setup lang="ts">
import { usePowerItems } from '@/stores/powerItems'
import { storeToRefs } from 'pinia'
import type { Ref } from 'vue';
import { computed, ref } from 'vue'
const {
specialBlessingItems,
specialBlessingItemsMinTotal,
specialBlessingItemsMaxTotal,
specialBlessingItemsAveTotal
} = storeToRefs(usePowerItems())
const headers = ref([
{
title: "Event",
align: ' d-none d-lg-table-cell start',
sortable: true,
value: '1.origin'
},
{
title: 'Name',
align: 'start',
sortable: true,
value: '1.itemName'
},
{
title: 'Min.',
align: ' d-none d-lg-table-cell',
sortable: true,
key: '1.minItemPower'
},
{
title: 'Max.',
align: ' d-none d-lg-table-cell',
sortable: true,
key: '1.maxItemPower'
},
{
title: 'Owned',
align: 'end',
sortable: true,
key: `1.owned`
},
{
title: 'Min. Total',
align: ' d-none d-lg-table-cell',
sortable: false,
key: `1.minTotalPower`
},
{
title: 'Max. Total',
align: ' d-none d-lg-table-cell',
sortable: false,
key: `1.maxTotalPower`
},
{
title: 'Mean Total Power',
align: 'end',
sortable: false,
key: `1.aveTotalPower`
}
])
const sortBy = ref([
{
key: '1.minItemPower',
order: 'asc'
}
])
const selectedEvents: Ref<string[]> = ref(['All'])
const getEventImageUrl = function(eventName: string): string {
return eventName !== undefined ? "/images/" + eventName.replace(/\s/g, '_').toLocaleLowerCase() + ".png" : ''
}
const events = computed(() =>
[...specialBlessingItems.value.values()]
.map((cur) => cur.origin)
.filter((value: string, idx: number, arr: string[]) => arr.indexOf(value) === idx)
.concat('All')
)
const filteredItems = computed(() =>
[...specialBlessingItems.value.entries()]
.map((value) =>
selectedEvents.value.indexOf('All') !== -1 ||
selectedEvents.value.indexOf(value[1].origin) !== -1
? value
: undefined
)
.filter((value) => value !== undefined)
)
const getColor = computed(() => (rarity: number): string => {
if (rarity === 5) {
return 'red'
} else if (rarity === 4) {
return 'amber'
} else if (rarity === 3) {
return 'purple'
} else if (rarity === 2) {
return 'blue'
} else {
return 'green'
}
})
</script>
<template>
<v-card fluid>
<v-card-title>Special Items</v-card-title>
<v-card-subtitle>Items from events</v-card-subtitle>
<v-card-item>
<v-select
clearable
chips
label="Event"
:items="events"
multiple
density="compact"
v-model="selectedEvents"
></v-select>
<v-data-table
density="compact"
v-model:sort-by="sortBy"
:items="filteredItems"
: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">
<v-card-title class="px-2">Origin: {{ item[1].origin }}</v-card-title>
<v-card-text class="px-2" v-if="item[1].tooltip !== ''">{{ item[1].tooltip }}</v-card-text>
</v-card>
</v-tooltip>
<v-chip :color="`${getColor(item[1].rarity)}`">
{{ item[1].itemName }}
</v-chip>
</template>
<template v-slot:item.1.owned="{ item }">
<v-text-field
density="compact"
hide-details="auto"
v-model.number="item[1].owned"
@update:model-value="usePowerItems().updateOwned(item[0], item[1].owned)"
></v-text-field>
</template>
<template v-slot:item.1.minTotalPower="{ item }">
{{ item[1].minItemPower * item[1].owned }}
</template>
<template v-slot:item.1.maxTotalPower="{ item }">
{{ item[1].maxItemPower * item[1].owned }}
</template>
<template v-slot:item.1.aveTotalPower="{ item }">
{{ ((item[1].minItemPower + item[1].maxItemPower) / 2) * item[1].owned }}
</template>
<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>
<td></td>
<td class="px-0 text-right font-weight-bold d-none d-lg-table-cell">
{{ specialBlessingItemsMinTotal }}
</td>
<td class="px-0 text-right font-weight-bold d-none d-lg-table-cell">
{{ specialBlessingItemsMaxTotal }}
</td>
<td class="px-0 text-right font-weight-bold">{{ specialBlessingItemsAveTotal }}</td>
</tr>
</tfoot>
</template>
</v-data-table>
</v-card-item>
</v-card>
</template>
<style lang="scss" scoped>
:global(.custom-tooltip) {
padding: 0 !important;
}
</style>

View file

@ -1,107 +0,0 @@
<script setup lang="ts">
import { usePowerItems } from '@/stores/powerItems'
import { storeToRefs } from 'pinia'
import { computed, ref } from 'vue'
const { standardFellowItems, standardFellowItemTotal } = storeToRefs(usePowerItems())
const headers = ref([
{
title: 'Name',
align: 'start',
sortable: true,
value: '1.itemName'
},
{
title: 'Power',
align: ' d-none d-lg-table-cell',
sortable: true,
key: '1.minItemPower'
},
{
title: 'Owned',
align: 'end',
sortable: true,
key: `1.owned`
},
{
title: 'Total Power',
align: 'end',
sortable: false,
key: `1.totalPower`
}
])
const sortBy = ref([
{
key: '1.minItemPower',
order: 'asc'
}
])
const getColor = computed(() => (rarity: number): string => {
if (rarity === 5) {
return 'red'
} else if (rarity === 4) {
return 'amber'
} else if (rarity === 3) {
return 'purple'
} else if (rarity === 2) {
return 'blue'
} else {
return 'green'
}
})
</script>
<template>
<v-card>
<v-card-title>Standard Items</v-card-title>
<v-card-subtitle>Items that exist all the time</v-card-subtitle>
<v-card-item>
<v-data-table
density="compact"
v-model:sort-by="sortBy"
:items="[...standardFellowItems.entries()]"
:headers="headers"
>
<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">
<v-card-title class="px-2">Origin: {{ item[1].origin }}</v-card-title>
<v-card-text class="px-2" v-if="item[1].tooltip !== ''">{{ item[1].tooltip }}</v-card-text>
</v-card>
</v-tooltip>
<v-chip :color="`${getColor(item[1].rarity)}`">
{{ item[1].itemName }}
</v-chip>
</template>
<template v-slot:item.1.owned="{ item }">
<v-text-field
density="compact"
hide-details="auto"
v-model.number="item[1].owned"
@update:model-value="usePowerItems().updateOwned(item[0], item[1].owned)"
></v-text-field>
</template>
<template v-slot:item.1.totalPower="{ item }">
{{ item[1].minItemPower * item[1].owned }}
</template>
<template v-slot:tfoot>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td class="px-0 text-right font-weight-bold">{{ standardFellowItemTotal }}</td>
</tr>
</tfoot>
</template>
</v-data-table>
</v-card-item>
</v-card>
</template>
<style lang="scss" scoped>
:global(.custom-tooltip) {
padding: 0 !important;
}
</style>

View file

@ -1,30 +0,0 @@
<script setup lang="ts">
import { usePowerItems } from '@/stores/powerItems';
import { storeToRefs } from 'pinia';
import { computed } from 'vue';
const { standardFellowItemTotal, specialFellowItemsMinTotal, specialFellowItemsMaxTotal, specialFellowItemsAveTotal} = storeToRefs(usePowerItems())
const minIncrease = computed(() => standardFellowItemTotal.value + specialFellowItemsMinTotal.value)
const maxIncrease = computed(() => standardFellowItemTotal.value + specialFellowItemsMaxTotal.value)
const aveIncrease = computed(() => standardFellowItemTotal.value + specialFellowItemsAveTotal.value)
</script>
<template>
<v-card>
<v-card-title>Overall Fellow Power Increase</v-card-title>
<v-card-item>
<v-list density="compact">
<v-list-item>
<v-list-item-title>Minimum: {{ minIncrease }}</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-title>Maximum: {{ maxIncrease }}</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-title>Mean: {{ aveIncrease }}</v-list-item-title>
</v-list-item>
</v-list>
</v-card-item>
</v-card>
</template>

View file

@ -1,183 +0,0 @@
<script setup lang="ts">
import { usePowerItems } from '@/stores/powerItems'
import { storeToRefs } from 'pinia'
import { computed, ref, type Ref } from 'vue'
const {
specialIntimacyItems,
specialIntimacyItemsMinTotal,
specialIntimacyItemsMaxTotal,
specialIntimacyItemsAveTotal
} = storeToRefs(usePowerItems())
const headers = ref([
{
title: "Event",
align: ' d-none d-lg-table-cell start',
sortable: true,
value: '1.origin'
},
{
title: 'Name',
align: 'start',
sortable: true,
value: '1.itemName'
},
{
title: 'Min.',
align: ' d-none d-lg-table-cell',
sortable: true,
key: '1.minItemPower'
},
{
title: 'Max.',
align: ' d-none d-lg-table-cell',
sortable: true,
key: '1.maxItemPower'
},
{
title: 'Owned',
align: 'end',
sortable: true,
key: `1.owned`
},
{
title: 'Min. Total',
align: ' d-none d-lg-table-cell',
sortable: false,
key: `1.minTotalPower`
},
{
title: 'Max. Total',
align: ' d-none d-lg-table-cell',
sortable: false,
key: `1.maxTotalPower`
},
{
title: 'Mean Total',
align: 'end',
sortable: false,
key: `1.aveTotalPower`
}
])
const sortBy = ref([
{
key: '1.minItemPower',
order: 'asc'
}
])
const selectedEvents: Ref<string[]> = ref(['All'])
const getEventImageUrl = function(eventName: string): string {
return eventName !== undefined ? "/images/" + eventName.replace(/\s/g, '_').toLocaleLowerCase() + ".png" : ''
}
const events = computed(() =>
[...specialIntimacyItems.value.values()]
.map((cur) => cur.origin)
.filter((value: string, idx: number, arr: string[]) => arr.indexOf(value) === idx)
.concat('All')
)
const filteredItems = computed(() =>
[...specialIntimacyItems.value.entries()]
.map((value) =>
selectedEvents.value.indexOf('All') !== -1 ||
selectedEvents.value.indexOf(value[1].origin) !== -1
? value
: undefined
)
.filter((value) => value !== undefined)
)
const getColor = computed(() => (rarity: number): string => {
if (rarity === 5) {
return 'red'
} else if (rarity === 4) {
return 'amber'
} else if (rarity === 3) {
return 'purple'
} else if (rarity === 2) {
return 'blue'
} else {
return 'green'
}
})
</script>
<template>
<v-card fluid>
<v-card-title>Special Items</v-card-title>
<v-card-subtitle>Items from events</v-card-subtitle>
<v-card-item>
<v-select
clearable
chips
label="Event"
:items="events"
multiple
density="compact"
v-model="selectedEvents"
></v-select>
<v-data-table
density="compact"
v-model:sort-by="sortBy"
:items="filteredItems"
: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">
<v-card-title class="px-2">Origin: {{ item[1].origin }}</v-card-title>
<v-card-text class="px-2" v-if="item[1].tooltip !== ''">{{ item[1].tooltip }}</v-card-text>
</v-card>
</v-tooltip>
<v-chip :color="`${getColor(item[1].rarity)}`">
{{ item[1].itemName }}
</v-chip>
</template>
<template v-slot:item.1.owned="{ item }">
<v-text-field
reverse
density="compact"
hide-details="auto"
v-model.number="item[1].owned"
@update:model-value="usePowerItems().updateOwned(item[0], item[1].owned)"
></v-text-field>
</template>
<template v-slot:item.1.minTotalPower="{ item }">
{{ item[1].minItemPower * item[1].owned }}
</template>
<template v-slot:item.1.maxTotalPower="{ item }">
{{ item[1].maxItemPower * item[1].owned }}
</template>
<template v-slot:item.1.aveTotalPower="{ item }">
{{ ((item[1].minItemPower + item[1].maxItemPower) / 2) * item[1].owned }}
</template>
<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>
<td></td>
<td class="px-0 text-right font-weight-bold d-none d-lg-table-cell">{{ specialIntimacyItemsMinTotal }}</td>
<td class="px-0 text-right font-weight-bold d-none d-lg-table-cell">{{ specialIntimacyItemsMaxTotal }}</td>
<td class="px-0 text-right font-weight-bold">{{ specialIntimacyItemsAveTotal }}</td>
</tr>
</tfoot>
</template>
</v-data-table>
</v-card-item>
</v-card>
</template>
<style lang="scss" scoped>
:global(.custom-tooltip) {
padding: 0 !important;
}
</style>

View file

@ -1,107 +0,0 @@
<script setup lang="ts">
import { usePowerItems } from '@/stores/powerItems'
import { storeToRefs } from 'pinia'
import { computed, ref } from 'vue'
const { standardIntimacyItems, standardIntimacyItemTotal } = storeToRefs(usePowerItems())
const headers = ref([
{
title: 'Name',
align: 'start',
sortable: true,
value: '1.itemName'
},
{
title: 'Power',
align: ' d-none d-lg-table-cell',
sortable: true,
key: '1.minItemPower'
},
{
title: 'Owned',
align: 'end',
sortable: true,
key: `1.owned`
},
{
title: 'Total Power',
align: 'end',
sortable: false,
key: `1.totalPower`
}
])
const sortBy = ref([
{
key: '1.minItemPower',
order: 'asc'
}
])
const getColor = computed(() => (rarity: number): string => {
if (rarity === 5) {
return 'red'
} else if (rarity === 4) {
return 'amber'
} else if (rarity === 3) {
return 'purple'
} else if (rarity === 2) {
return 'blue'
} else {
return 'green'
}
})
</script>
<template>
<v-card>
<v-card-title>Standard Items</v-card-title>
<v-card-subtitle>Items that exist all the time</v-card-subtitle>
<v-card-item>
<v-data-table
density="compact"
v-model:sort-by="sortBy"
:items="[...standardIntimacyItems.entries()]"
:headers="headers"
>
<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">
<v-card-title class="px-2">Origin: {{ item[1].origin }}</v-card-title>
<v-card-text class="px-2" v-if="item[1].tooltip !== ''">{{ item[1].tooltip }}</v-card-text>
</v-card>
</v-tooltip>
<v-chip :color="`${getColor(item[1].rarity)}`">
{{ item[1].itemName }}
</v-chip>
</template>
<template v-slot:item.1.owned="{ item }">
<v-text-field
density="compact"
hide-details="auto"
v-model.number="item[1].owned"
@update:model-value="usePowerItems().updateOwned(item[0], item[1].owned)"
></v-text-field>
</template>
<template v-slot:item.1.totalPower="{ item }">
{{ item[1].minItemPower * item[1].owned }}
</template>
<template v-slot:tfoot>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td class="px-0 text-right font-weight-bold">{{ standardIntimacyItemTotal }}</td>
</tr>
</tfoot>
</template>
</v-data-table>
</v-card-item>
</v-card>
</template>
<style scoped lang="scss">
:global(.custom-tooltip) {
padding: 0 !important;
}
</style>

View file

@ -1,30 +0,0 @@
<script setup lang="ts">
import { usePowerItems } from '@/stores/powerItems';
import { storeToRefs } from 'pinia';
import { computed } from 'vue';
const { standardIntimacyItemTotal, specialIntimacyItemsMinTotal, specialIntimacyItemsMaxTotal, specialIntimacyItemsAveTotal} = storeToRefs(usePowerItems())
const minIncrease = computed(() => standardIntimacyItemTotal.value + specialIntimacyItemsMinTotal.value)
const maxIncrease = computed(() => standardIntimacyItemTotal.value + specialIntimacyItemsMaxTotal.value)
const aveIncrease = computed(() => standardIntimacyItemTotal.value + specialIntimacyItemsAveTotal.value)
</script>
<template>
<v-card>
<v-card-title>Overall Intimacy Power Increase</v-card-title>
<v-card-item>
<v-list density="compact">
<v-list-item>
<v-list-item-title>Minimum: {{ minIncrease }}</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-title>Maximum: {{ maxIncrease }}</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-title>Mean: {{ aveIncrease }}</v-list-item-title>
</v-list-item>
</v-list>
</v-card-item>
</v-card>
</template>

View file

@ -1,16 +1,19 @@
<script setup lang="ts">
import { usePowerItems } from '@/stores/powerItems'
import type { PowerItem } from '@/types/PowerItem'
import { storeToRefs } from 'pinia'
import type { PowerItem } from '@/types/PowerItem';
import type { Ref } from 'vue'
import { computed, ref } from 'vue'
const {
specialFellowItems,
specialFellowItemsMinTotal,
specialFellowItemsMaxTotal,
specialFellowItemsAveTotal
} = storeToRefs(usePowerItems())
export interface Props {
items: Map<string, PowerItem>
minimumTotal: number
maximumTotal: number
averageTotal: number
}
const props = withDefaults(defineProps<Props>(), {
items: () => new Map<string, PowerItem>
})
const headers = ref([
{
@ -56,7 +59,7 @@ const headers = ref([
key: `1.maxTotalPower`
},
{
title: 'Mean Total',
title: 'Mean Total Power',
align: 'end',
sortable: false,
key: `1.aveTotalPower`
@ -68,22 +71,28 @@ const sortBy = ref([
order: 'asc'
}
])
const selectedEvents: Ref<string[]> = ref(['All'])
const selectedEvents: Ref<string[]> = ref([])
const getEventImageUrl = function (eventName: string): string {
return eventName !== undefined
? '/images/' + eventName.replace(/\s/g, '_').toLocaleLowerCase() + '.png'
: ''
}
const toggle = function () {
if (allSelected.value) {
selectedEvents.value = []
} else {
selectedEvents.value = events.value.slice()
}
}
const events = computed(() =>
[...specialFellowItems.value.values()]
[...props.items.values()]
.map((cur) => cur.origin)
.filter((value: string, idx: number, arr: string[]) => arr.indexOf(value) === idx)
.concat('All')
)
const filteredItems = computed(() =>
[...specialFellowItems.value.entries()]
[...props.items.entries()]
.map((value) =>
selectedEvents.value.indexOf('All') !== -1 ||
selectedEvents.value.indexOf(value[1].origin) !== -1
@ -105,6 +114,9 @@ const getColor = computed(() => (rarity: number): string => {
return 'green'
}
})
const allSelected = computed(() => events.value.length === selectedEvents.value.length)
const partialSelected = computed(() => selectedEvents.value.length > 0)
toggle()
</script>
<template>
@ -120,7 +132,19 @@ const getColor = computed(() => (rarity: number): string => {
multiple
density="compact"
v-model="selectedEvents"
></v-select>
>
<template v-slot:prepend-item>
<v-list-item title="Select All" @click="toggle">
<template v-slot:prepend>
<v-checkbox-btn
:color="partialSelected ? 'indigo-darken-2' : undefined"
:indeterminate="partialSelected && !allSelected"
:model-value="partialSelected"
></v-checkbox-btn>
</template>
</v-list-item>
</template>
</v-select>
<v-data-table
density="compact"
v-model:sort-by="sortBy"
@ -137,6 +161,7 @@ const getColor = computed(() => (rarity: number): string => {
color="transparent"
>
<v-img :src="getEventImageUrl(item[1].origin)"></v-img>
<v-tooltip activator="parent">{{ item?.[1].origin }}</v-tooltip>
</v-card>
</template>
<template v-slot:item.1.itemName="{ item }">
@ -182,12 +207,12 @@ const getColor = computed(() => (rarity: number): string => {
<td class="d-none d-lg-table-cell"></td>
<td></td>
<td class="px-0 text-right font-weight-bold d-none d-lg-table-cell">
{{ specialFellowItemsMinTotal }}
{{ minimumTotal }}
</td>
<td class="px-0 text-right font-weight-bold d-none d-lg-table-cell">
{{ specialFellowItemsMaxTotal }}
{{ maximumTotal }}
</td>
<td class="px-0 text-right font-weight-bold">{{ specialFellowItemsAveTotal }}</td>
<td class="px-0 text-right font-weight-bold">{{ averageTotal }}</td>
</tr>
</tfoot>
</template>

View file

@ -1,9 +1,17 @@
<script setup lang="ts">
import { usePowerItems } from '@/stores/powerItems'
import { storeToRefs } from 'pinia'
import type { PowerItem } from '@/types/PowerItem'
import { computed, ref } from 'vue'
const { standardBlessingItems, standardBlessingItemTotal } = storeToRefs(usePowerItems())
export interface Props {
items: Map<string, PowerItem>
total: number
}
const props = withDefaults(defineProps<Props>(), {
items: () => new Map<string, PowerItem>
})
const headers = ref([
{
title: '',
@ -66,7 +74,7 @@ const getColor = computed(() => (rarity: number): string => {
<v-data-table
density="compact"
v-model:sort-by="sortBy"
:items="[...standardBlessingItems.entries()]"
:items="[...items.entries()]"
:headers="headers"
>
<template v-slot:item.1.iconURL="{ item }">
@ -109,7 +117,7 @@ const getColor = computed(() => (rarity: number): string => {
<td class="d-none d-lg-table-cell"></td>
<td></td>
<td></td>
<td class="px-0 text-right font-weight-bold">{{ standardBlessingItemTotal }}</td>
<td class="px-0 text-right font-weight-bold">{{ total }}</td>
</tr>
</tfoot>
</template>

View file

@ -1,13 +1,18 @@
<script setup lang="ts">
import { usePowerItems } from '@/stores/powerItems';
import { storeToRefs } from 'pinia';
import { computed } from 'vue';
const { standardBlessingItemTotal, specialBlessingItemsMinTotal, specialBlessingItemsMaxTotal, specialBlessingItemsAveTotal} = storeToRefs(usePowerItems())
export interface Props {
standardTotal: number
minimumTotal: number
maximumTotal: number
averageTotal: number
}
const minIncrease = computed(() => standardBlessingItemTotal.value + specialBlessingItemsMinTotal.value)
const maxIncrease = computed(() => standardBlessingItemTotal.value + specialBlessingItemsMaxTotal.value)
const aveIncrease = computed(() => standardBlessingItemTotal.value + specialBlessingItemsAveTotal.value)
const props = defineProps<Props>()
const minIncrease = computed(() => props.standardTotal + props.minimumTotal)
const maxIncrease = computed(() => props.standardTotal + props.maximumTotal)
const aveIncrease = computed(() => props.standardTotal + props.averageTotal)
</script>
<template>

View file

@ -23,6 +23,11 @@ const router = createRouter({
path: "/intimacy-power",
name: "intimacy-power",
component: () => import('@/views/IntimacyPowerView.vue')
},
{
path: "/test",
name: "test",
component: () => import('@/views/Test.vue')
}
]
})

View file

@ -10,6 +10,7 @@ export const usePowerItems = defineStore('powerItems', () => {
const blessingPowerItems = ref(new Map<string, PowerItem>())
const fellowPowerItems = ref(new Map<string, PowerItem>())
const intimacyPowerItems = ref(new Map<string, PowerItem>())
const isLoadComplete = ref(false)
async function fetchPowerItems() {
axios
@ -78,6 +79,7 @@ export const usePowerItems = defineStore('powerItems', () => {
.catch((err) => {
console.log(err)
})
isLoadComplete.value = true
}
function updateOwned(key: string, newOwned: number) {
@ -134,12 +136,7 @@ export const usePowerItems = defineStore('powerItems', () => {
)
const standardBlessingItems = computed(
() =>
new Map(
[...blessingPowerItems.value.entries()].filter(
(cur) => !(cur[1].isEventItem)
)
)
() => new Map([...blessingPowerItems.value.entries()].filter((cur) => !cur[1].isEventItem))
)
const standardBlessingItemTotal = computed(() =>
@ -154,12 +151,7 @@ export const usePowerItems = defineStore('powerItems', () => {
)
const specialBlessingItems = computed(
() =>
new Map(
[...blessingPowerItems.value.entries()].filter(
(cur) => (cur[1].isEventItem)
)
)
() => new Map([...blessingPowerItems.value.entries()].filter((cur) => cur[1].isEventItem))
)
const specialBlessingItemsMinTotal = computed(() =>
@ -203,12 +195,7 @@ export const usePowerItems = defineStore('powerItems', () => {
)
const standardFellowItems = computed(
() =>
new Map(
[...fellowPowerItems.value.entries()].filter(
(cur) => !(cur[1].isEventItem)
)
)
() => new Map([...fellowPowerItems.value.entries()].filter((cur) => !cur[1].isEventItem))
)
const standardFellowItemTotal = computed(() =>
@ -223,12 +210,7 @@ export const usePowerItems = defineStore('powerItems', () => {
)
const specialFellowItems = computed(
() =>
new Map(
[...fellowPowerItems.value.entries()].filter(
(cur) => (cur[1].isEventItem)
)
)
() => new Map([...fellowPowerItems.value.entries()].filter((cur) => cur[1].isEventItem))
)
const specialFellowItemsMinTotal = computed(() =>
@ -275,12 +257,7 @@ export const usePowerItems = defineStore('powerItems', () => {
)
const standardIntimacyItems = computed(
() =>
new Map(
[...intimacyPowerItems.value.entries()].filter(
(cur) => !(cur[1].isEventItem)
)
)
() => new Map([...intimacyPowerItems.value.entries()].filter((cur) => !cur[1].isEventItem))
)
const standardIntimacyItemTotal = computed(() =>
@ -295,12 +272,7 @@ export const usePowerItems = defineStore('powerItems', () => {
)
const specialIntimacyItems = computed(
() =>
new Map(
[...intimacyPowerItems.value.entries()].filter(
(cur) => (cur[1].isEventItem)
)
)
() => new Map([...intimacyPowerItems.value.entries()].filter((cur) => cur[1].isEventItem))
)
const specialIntimacyItemsMinTotal = computed(() =>
@ -338,6 +310,9 @@ export const usePowerItems = defineStore('powerItems', () => {
return {
blessingPowerItems,
fellowPowerItems,
intimacyPowerItems,
isLoadComplete,
fetchPowerItems,
updateOwned,
totalBlessingPower,

View file

@ -1,15 +1,47 @@
<script setup lang="ts">
import SpecialItemsCard from '@/components/BlessingPower/SpecialItemsCard.vue'
import StandardItemsCard from '@/components/BlessingPower/StandardItemsCard.vue'
import SummaryCard from '@/components/BlessingPower/SummaryCard.vue'
import SpecialItemsCard from '@/components/SpecialItemsCard.vue'
import StandardItemsCard from '@/components/StandardItemsCard.vue'
import SummaryCard from '@/components/SummaryCard.vue'
import { storeToRefs } from 'pinia'
import { usePowerItems } from '@/stores/powerItems'
const {
standardBlessingItems,
standardBlessingItemTotal,
specialBlessingItems,
specialBlessingItemsMinTotal,
specialBlessingItemsMaxTotal,
specialBlessingItemsAveTotal
} = storeToRefs(usePowerItems())
</script>
<template>
<v-sheet class="d-flex flex-wrap flex-fill">
<StandardItemsCard class="ma-2 align-self-start" />
<SpecialItemsCard class="ma-2 align-self-start" />
<SummaryCard class="ma-2 align-self-start" />
</v-sheet>
<v-card>
<v-card-title>Blessing Power</v-card-title>
<v-card-text>
<v-sheet class="d-flex flex-wrap flex-fill">
<StandardItemsCard
class="ma-2 align-self-start"
:items="standardBlessingItems"
:total="standardBlessingItemTotal"
/>
<SpecialItemsCard
class="ma-2 align-self-start"
:items="specialBlessingItems"
:minimum-total="specialBlessingItemsMinTotal"
:maximum-total="specialBlessingItemsMaxTotal"
:average-total="specialBlessingItemsAveTotal"
/>
<SummaryCard
class="ma-2 align-self-start"
:standard-total="standardBlessingItemTotal"
:minimum-total="specialBlessingItemsMinTotal"
:maximum-total="specialBlessingItemsMaxTotal"
:average-total="specialBlessingItemsAveTotal"
/>
</v-sheet>
</v-card-text>
</v-card>
</template>
<style lang="scss" scoped>

View file

@ -1,19 +1,51 @@
<script setup lang="ts">
import SpecialItemsCard from '@/components/FellowPower/SpecialItemsCard.vue'
import StandardItemsCard from '@/components/FellowPower/StandardItemsCard.vue'
import SummaryCard from '@/components/FellowPower/SummaryCard.vue'
import SpecialItemsCard from '@/components/SpecialItemsCard.vue'
import StandardItemsCard from '@/components/StandardItemsCard.vue'
import SummaryCard from '@/components/SummaryCard.vue'
import { storeToRefs } from 'pinia'
import { usePowerItems } from '@/stores/powerItems'
const {
standardFellowItems,
standardFellowItemTotal,
specialFellowItems,
specialFellowItemsMinTotal,
specialFellowItemsMaxTotal,
specialFellowItemsAveTotal
} = storeToRefs(usePowerItems())
</script>
<template>
<v-sheet class="d-flex flex-wrap flex-fill">
<StandardItemsCard class="ma-2 align-self-start"/>
<SpecialItemsCard class="ma-2 align-self-start"/>
<SummaryCard class="ma-2 align-self-start" />
</v-sheet>
<v-card>
<v-card-title>Fellow Power</v-card-title>
<v-card-text>
<v-sheet class="d-flex flex-wrap flex-fill">
<StandardItemsCard
class="ma-2 align-self-start"
:items="standardFellowItems"
:total="standardFellowItemTotal"
/>
<SpecialItemsCard
class="ma-2 align-self-start"
:items="specialFellowItems"
:minimum-total="specialFellowItemsMinTotal"
:maximum-total="specialFellowItemsMaxTotal"
:average-total="specialFellowItemsAveTotal"
/>
<SummaryCard
class="ma-2 align-self-start"
:standard-total="standardFellowItemTotal"
:minimum-total="specialFellowItemsMinTotal"
:maximum-total="specialFellowItemsMaxTotal"
:average-total="specialFellowItemsAveTotal"
/>
</v-sheet>
</v-card-text>
</v-card>
</template>
<style lang="scss" scoped>
@use "@/styles/settings.scss";
@use '@/styles/settings.scss';
:deep(tbody) tr:nth-of-type(even) {
background-color: rgba(var(--v-theme-primary-darken-1), 0.25);
}

View file

@ -13,6 +13,11 @@ const entries20240121 = ref([
'Added event icon display',
'Added filters, looks ugly, maybe works'
])
const entries20240122 = ref([
'Added a better "Select All" to event filters',
'Added a default image so there aren\'t random blank spots',
'Did a bunch of code cleanup',
])
</script>
<template>
@ -84,6 +89,7 @@ const entries20240121 = ref([
</v-list-item>
<ChangeLogEntry date="2024-01-20" :entries="entries20240120"></ChangeLogEntry>
<ChangeLogEntry date="2024-01-21" :entries="entries20240121"></ChangeLogEntry>
<ChangeLogEntry date="2024-01-22" :entries="entries20240122"></ChangeLogEntry>
</v-list>
</v-sheet>
<v-sheet :elevation="1" class="ma-2 my-4">
@ -95,7 +101,7 @@ const entries20240121 = ref([
</p>
<p>
Thanks to <span class="font-weight-bold">@kathinja</span> for her assistance with flavor
text and proof reading.
text and proofreading.
</p>
<p>
Thanks <span class="font-weight-bold">@werewaffle</span> for all of his help with

View file

@ -1,19 +1,51 @@
<script setup lang="ts">
import SpecialItemsCard from '@/components/IntimacyPower/SpecialItemsCard.vue'
import StandardItemsCard from '@/components/IntimacyPower/StandardItemsCard.vue'
import SummaryCard from '@/components/IntimacyPower/SummaryCard.vue'
import SpecialItemsCard from '@/components/SpecialItemsCard.vue'
import StandardItemsCard from '@/components/StandardItemsCard.vue'
import SummaryCard from '@/components/SummaryCard.vue'
import { storeToRefs } from 'pinia'
import { usePowerItems } from '@/stores/powerItems'
const {
standardIntimacyItems,
standardIntimacyItemTotal,
specialIntimacyItems,
specialIntimacyItemsMinTotal,
specialIntimacyItemsMaxTotal,
specialIntimacyItemsAveTotal
} = storeToRefs(usePowerItems())
</script>
<template>
<v-sheet class="d-flex flex-wrap flex-fill">
<StandardItemsCard class="ma-2 align-self-start"/>
<SpecialItemsCard class="ma-2 align-self-start"/>
<SummaryCard class="ma-2 align-self-start" />
</v-sheet>
<v-card>
<v-card-title>Intimacy Power</v-card-title>
<v-card-text>
<v-sheet class="d-flex flex-wrap flex-fill">
<StandardItemsCard
class="ma-2 align-self-start"
:items="standardIntimacyItems"
:total="standardIntimacyItemTotal"
/>
<SpecialItemsCard
class="ma-2 align-self-start"
:items="specialIntimacyItems"
:minimum-total="specialIntimacyItemsMinTotal"
:maximum-total="specialIntimacyItemsMaxTotal"
:average-total="specialIntimacyItemsAveTotal"
/>
<SummaryCard
class="ma-2 align-self-start"
:standard-total="standardIntimacyItemTotal"
:minimum-total="specialIntimacyItemsMinTotal"
:maximum-total="specialIntimacyItemsMaxTotal"
:average-total="specialIntimacyItemsAveTotal"
/>
</v-sheet>
</v-card-text>
</v-card>
</template>
<style lang="scss" scoped>
@use "@/styles/settings.scss";
@use '@/styles/settings.scss';
:deep(tbody) tr:nth-of-type(even) {
background-color: rgba(var(--v-theme-primary-darken-1), 0.25);
}

52
src/views/Test.vue Normal file
View file

@ -0,0 +1,52 @@
<script setup lang="ts">
import SpecialItemsCard from '@/components/SpecialItemsCard.vue'
import StandardItemsCard from '@/components/StandardItemsCard.vue'
import SummaryCard from '@/components/SummaryCard.vue'
import { storeToRefs } from 'pinia'
import { usePowerItems } from '@/stores/powerItems'
const {
standardBlessingItems,
standardBlessingItemTotal,
specialBlessingItems,
specialBlessingItemsMinTotal,
specialBlessingItemsMaxTotal,
specialBlessingItemsAveTotal
} = storeToRefs(usePowerItems())
</script>
<template>
<v-card>
<v-card-title>Intimacy Power</v-card-title>
<v-card-text>
<v-sheet class="d-flex flex-wrap flex-fill">
<StandardItemsCard
class="ma-2 align-self-start"
:items="standardBlessingItems"
:total="standardBlessingItemTotal"
/>
<SpecialItemsCard
class="ma-2 align-self-start"
:items="specialBlessingItems"
:minimum-total="specialBlessingItemsMinTotal"
:maximum-total="specialBlessingItemsMaxTotal"
:average-total="specialBlessingItemsAveTotal"
/>
<SummaryCard
class="ma-2 align-self-start"
:standard-total="standardBlessingItemTotal"
:minimum-total="specialBlessingItemsMinTotal"
:maximum-total="specialBlessingItemsMaxTotal"
:average-total="specialBlessingItemsAveTotal"
/>
</v-sheet>
</v-card-text>
</v-card>
</template>
<style lang="scss" scoped>
@use '@/styles/settings.scss';
:deep(tbody) tr:nth-of-type(even) {
background-color: rgba(var(--v-theme-primary-darken-1), 0.25);
}
</style>