mirror of
https://forgejo.merr.is/annika/isl-vue3.git
synced 2025-12-14 12:45:38 -05:00
Lots of CSS fixing and added new items
This commit is contained in:
parent
0f37f195a9
commit
599d44a86b
27 changed files with 1211 additions and 389 deletions
16
src/App.vue
16
src/App.vue
|
|
@ -6,21 +6,11 @@ import GlobalHeader from '@/components/GlobalHeader.vue'
|
|||
<template>
|
||||
<v-app>
|
||||
<GlobalHeader />
|
||||
<v-navigation-drawer permanent absolute>
|
||||
<v-list nav dense>
|
||||
<v-list-item :to="{ name: 'blessing-power' }">
|
||||
<v-list-item-title>Blessing Power</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item :to="{ name: 'fellow-power' }">
|
||||
<v-list-item-title>Fellow Power</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
<v-main>
|
||||
<v-main class="d-flex">
|
||||
<RouterView />
|
||||
</v-main>
|
||||
<v-footer>
|
||||
<div>The footer goes here</div>
|
||||
<v-footer app>
|
||||
<div>Copyright Annika Merris 2024</div>
|
||||
</v-footer>
|
||||
</v-app>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
body {
|
||||
min-height: 100vh;
|
||||
/* min-height: 100vh; */
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
|
|
|||
BIN
src/assets/images/isl_logo.png
Normal file
BIN
src/assets/images/isl_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 196 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||
|
Before Width: | Height: | Size: 276 B |
|
|
@ -1,6 +1,6 @@
|
|||
@import './base.css';
|
||||
|
||||
#app {
|
||||
/* #app {
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
font-weight: normal;
|
||||
|
|
@ -28,4 +28,4 @@ a,
|
|||
#app {
|
||||
padding: 0 2rem;
|
||||
}
|
||||
}
|
||||
} */
|
||||
|
|
|
|||
|
|
@ -1,10 +1,77 @@
|
|||
<script setup lang="ts">
|
||||
import { usePowerItems } from '@/stores/powerItems'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import SpecialItem from '@/components/SpecialItem.vue'
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const { specialBlessingItems, specialBlessingItemsMinTotal, specialBlessingItemsMaxTotal, specialBlessingItemsAveTotal } =
|
||||
storeToRefs(usePowerItems())
|
||||
const {
|
||||
specialBlessingItems,
|
||||
specialBlessingItemsMinTotal,
|
||||
specialBlessingItemsMaxTotal,
|
||||
specialBlessingItemsAveTotal
|
||||
} = storeToRefs(usePowerItems())
|
||||
|
||||
const headers = ref([
|
||||
{
|
||||
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 getColor = computed(() => (rarity: number): string => {
|
||||
if (rarity === 4) {
|
||||
return 'amber'
|
||||
} else if (rarity === 3) {
|
||||
return 'purple'
|
||||
} else if (rarity === 2) {
|
||||
return 'blue'
|
||||
} else {
|
||||
return 'green'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -12,44 +79,52 @@ const { specialBlessingItems, specialBlessingItemsMinTotal, specialBlessingItems
|
|||
<v-card-title>Special Items</v-card-title>
|
||||
<v-card-subtitle>Items from events</v-card-subtitle>
|
||||
<v-card-item>
|
||||
<v-table density="compact">
|
||||
<thead>
|
||||
<tr>
|
||||
<!-- <th></th> -->
|
||||
<th class="text-left font-weight-bold">Name</th>
|
||||
<th class="text-left font-weight-bold">Min. Power</th>
|
||||
<th class="text-left font-weight-bold">Max. Power</th>
|
||||
<th class="text-left font-weight-bold">Owned</th>
|
||||
<th class="text-right font-weight-bold">Min. Total</th>
|
||||
<th class="text-right font-weight-bold">Max. Total</th>
|
||||
<th class="text-right font-weight-bold">Ave. Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<SpecialItem
|
||||
v-for="[key, item] in specialBlessingItems"
|
||||
:key="key"
|
||||
:itemID="key"
|
||||
:itemName="item.itemName"
|
||||
:itemIcon="'none'"
|
||||
:owned="item.owned"
|
||||
:minPower="item.minItemPower"
|
||||
:maxPower="item.maxItemPower"
|
||||
/>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<!-- <td></td> -->
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td class="px-0 text-right font-weight-bold">{{ specialBlessingItemsMinTotal }}</td>
|
||||
<td class="px-0 text-right font-weight-bold">{{ specialBlessingItemsMaxTotal }}</td>
|
||||
<td class="px-0 text-right font-weight-bold">{{ specialBlessingItemsAveTotal }}</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</v-table>
|
||||
<v-data-table
|
||||
density="compact"
|
||||
v-model:sort-by="sortBy"
|
||||
:items="[...specialBlessingItems.entries()]"
|
||||
:headers="headers"
|
||||
>
|
||||
<template v-slot:item.1.itemName="{ item }">
|
||||
<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></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>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,54 @@
|
|||
<script setup lang="ts">
|
||||
import { usePowerItems } from '@/stores/powerItems'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import StandardItem from '@/components/StandardItem.vue'
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
const { standardBlessingItems, standardBlessingItemTotal } = storeToRefs(usePowerItems())
|
||||
const headers = ref([
|
||||
{
|
||||
title: 'Name',
|
||||
align: 'start',
|
||||
sortable: true,
|
||||
value: '1.itemName'
|
||||
},
|
||||
{
|
||||
title: 'Power',
|
||||
align: 'end',
|
||||
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 => {
|
||||
console.log('getting rarity')
|
||||
if (rarity === 4) {
|
||||
return 'amber'
|
||||
} else if (rarity === 3) {
|
||||
return 'purple'
|
||||
} else if (rarity === 2) {
|
||||
return 'blue'
|
||||
} else {
|
||||
return 'green'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -11,38 +56,39 @@ const { standardBlessingItems, standardBlessingItemTotal } = storeToRefs(usePowe
|
|||
<v-card-title>Standard Items</v-card-title>
|
||||
<v-card-subtitle>Items that exist all the time</v-card-subtitle>
|
||||
<v-card-item>
|
||||
<v-table density="compact">
|
||||
<thead>
|
||||
<tr>
|
||||
<!-- <th></th> -->
|
||||
<th class="text-left font-weight-bold">Name</th>
|
||||
<th class="text-left font-weight-bold">Power</th>
|
||||
<th class="text-left font-weight-bold">Owned</th>
|
||||
<th class="text-right font-weight-bold">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<StandardItem
|
||||
v-for="[key, item] in standardBlessingItems"
|
||||
:key="key"
|
||||
:itemID="key"
|
||||
:itemName="item.itemName"
|
||||
:itemIcon="'none'"
|
||||
:owned="item.owned"
|
||||
:minPower="item.minItemPower"
|
||||
:maxPower="item.maxItemPower"
|
||||
/>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<!-- <td></td> -->
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td class="px-0 text-right font-weight-bold">{{ standardBlessingItemTotal }}</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</v-table>
|
||||
<v-data-table
|
||||
density="compact"
|
||||
v-model:sort-by="sortBy"
|
||||
:items="[...standardBlessingItems.entries()]"
|
||||
:headers="headers"
|
||||
>
|
||||
<template v-slot:item.1.itemName="{ item }">
|
||||
<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">{{ standardBlessingItemTotal }}</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,77 @@
|
|||
<script setup lang="ts">
|
||||
import { usePowerItems } from '@/stores/powerItems'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import SpecialItem from '@/components/SpecialItem.vue'
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const { specialFellowItems, specialFellowItemsMinTotal, specialFellowItemsMaxTotal, specialFellowItemsAveTotal } =
|
||||
storeToRefs(usePowerItems())
|
||||
const {
|
||||
specialFellowItems,
|
||||
specialFellowItemsMinTotal,
|
||||
specialFellowItemsMaxTotal,
|
||||
specialFellowItemsAveTotal
|
||||
} = storeToRefs(usePowerItems())
|
||||
|
||||
const headers = ref([
|
||||
{
|
||||
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 getColor = computed(() => (rarity: number): string => {
|
||||
if (rarity === 4) {
|
||||
return 'amber'
|
||||
} else if (rarity === 3) {
|
||||
return 'purple'
|
||||
} else if (rarity === 2) {
|
||||
return 'blue'
|
||||
} else {
|
||||
return 'green'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -12,44 +79,52 @@ const { specialFellowItems, specialFellowItemsMinTotal, specialFellowItemsMaxTot
|
|||
<v-card-title>Special Items</v-card-title>
|
||||
<v-card-subtitle>Items from events</v-card-subtitle>
|
||||
<v-card-item>
|
||||
<v-table density="compact">
|
||||
<thead>
|
||||
<tr>
|
||||
<!-- <th></th> -->
|
||||
<th class="text-left font-weight-bold">Name</th>
|
||||
<th class="text-left font-weight-bold">Min. Power</th>
|
||||
<th class="text-left font-weight-bold">Max. Power</th>
|
||||
<th class="text-left font-weight-bold">Owned</th>
|
||||
<th class="text-right font-weight-bold">Min. Total</th>
|
||||
<th class="text-right font-weight-bold">Max. Total</th>
|
||||
<th class="text-right font-weight-bold">Ave. Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<SpecialItem
|
||||
v-for="[key, item] in specialFellowItems"
|
||||
:key="key"
|
||||
:itemID="key"
|
||||
:itemName="item.itemName"
|
||||
:itemIcon="'none'"
|
||||
:owned="item.owned"
|
||||
:minPower="item.minItemPower"
|
||||
:maxPower="item.maxItemPower"
|
||||
/>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<!-- <td></td> -->
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td class="px-0 text-right font-weight-bold">{{ specialFellowItemsMinTotal }}</td>
|
||||
<td class="px-0 text-right font-weight-bold">{{ specialFellowItemsMaxTotal }}</td>
|
||||
<td class="px-0 text-right font-weight-bold">{{ specialFellowItemsAveTotal }}</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</v-table>
|
||||
<v-data-table
|
||||
density="compact"
|
||||
v-model:sort-by="sortBy"
|
||||
:items="[...specialFellowItems.entries()]"
|
||||
:headers="headers"
|
||||
>
|
||||
<template v-slot:item.1.itemName="{ item }">
|
||||
<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></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">
|
||||
{{ specialFellowItemsMinTotal }}
|
||||
</td>
|
||||
<td class="px-0 text-right font-weight-bold d-none d-lg-table-cell">
|
||||
{{ specialFellowItemsMaxTotal }}
|
||||
</td>
|
||||
<td class="px-0 text-right font-weight-bold">{{ specialFellowItemsAveTotal }}</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,54 @@
|
|||
<script setup lang="ts">
|
||||
import { usePowerItems } from '@/stores/powerItems'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import StandardItem from '@/components/StandardItem.vue'
|
||||
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: 'end',
|
||||
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 => {
|
||||
console.log('getting rarity')
|
||||
if (rarity === 4) {
|
||||
return 'amber'
|
||||
} else if (rarity === 3) {
|
||||
return 'purple'
|
||||
} else if (rarity === 2) {
|
||||
return 'blue'
|
||||
} else {
|
||||
return 'green'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -11,38 +56,39 @@ const { standardFellowItems, standardFellowItemTotal } = storeToRefs(usePowerIte
|
|||
<v-card-title>Standard Items</v-card-title>
|
||||
<v-card-subtitle>Items that exist all the time</v-card-subtitle>
|
||||
<v-card-item>
|
||||
<v-table density="compact">
|
||||
<thead>
|
||||
<tr>
|
||||
<!-- <th></th> -->
|
||||
<th class="text-left font-weight-bold">Name</th>
|
||||
<th class="text-left font-weight-bold">Power</th>
|
||||
<th class="text-left font-weight-bold">Owned</th>
|
||||
<th class="text-right font-weight-bold">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<StandardItem
|
||||
v-for="[key, item] in standardFellowItems"
|
||||
:key="key"
|
||||
:itemID="key"
|
||||
:itemName="item.itemName"
|
||||
:itemIcon="'none'"
|
||||
:owned="item.owned"
|
||||
:minPower="item.minItemPower"
|
||||
:maxPower="item.maxItemPower"
|
||||
/>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<!-- <td></td> -->
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td class="px-0 text-right font-weight-bold">{{ standardFellowItemTotal }}</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</v-table>
|
||||
<v-data-table
|
||||
density="compact"
|
||||
v-model:sort-by="sortBy"
|
||||
:items="[...standardFellowItems.entries()]"
|
||||
:headers="headers"
|
||||
>
|
||||
<template v-slot:item.1.itemName="{ item }">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,29 @@
|
|||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
const drawer = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-app-bar color="pink-lighten-3" scroll-behavior="elevate">
|
||||
<v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
|
||||
<v-app-bar-title>Isekai Slow Life Calculator</v-app-bar-title>
|
||||
</v-app-bar>
|
||||
<v-navigation-drawer v-model="drawer" app bottom>
|
||||
<v-list nav>
|
||||
<v-list-item :to="{ name: 'home' }">
|
||||
<v-list-item-title>Isekai: Slow Life Calc</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-list-item :to="{ name: 'blessing-power' }">
|
||||
<v-list-item-title>Blessing Power</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item :to="{ name: 'fellow-power' }">
|
||||
<v-list-item-title>Fellow Power</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item :to="{ name: 'intimacy-power' }">
|
||||
<v-list-item-title>Intimacy Power</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
</template>
|
||||
|
|
|
|||
143
src/components/IntimacyPower/SpecialItemsCard.vue
Normal file
143
src/components/IntimacyPower/SpecialItemsCard.vue
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
<script setup lang="ts">
|
||||
import { usePowerItems } from '@/stores/powerItems'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const {
|
||||
specialIntimacyItems,
|
||||
specialIntimacyItemsMinTotal,
|
||||
specialIntimacyItemsMaxTotal,
|
||||
specialIntimacyItemsAveTotal
|
||||
} = storeToRefs(usePowerItems())
|
||||
|
||||
const headers = ref([
|
||||
{
|
||||
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 getColor = computed(() => (rarity: number): string => {
|
||||
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-data-table
|
||||
density="compact"
|
||||
v-model:sort-by="sortBy"
|
||||
:items="[...specialIntimacyItems.entries()]"
|
||||
:headers="headers"
|
||||
>
|
||||
<template v-slot:item.1.itemName="{ item }">
|
||||
<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></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>
|
||||
@use '@/styles/settings.scss';
|
||||
.common {
|
||||
background-color: map-get(settings.$green, 'lighten-4');
|
||||
}
|
||||
.rare {
|
||||
background-color: map-get(settings.$blue, 'lighten-4');
|
||||
}
|
||||
.epic {
|
||||
background-color: map-get(settings.$purple, 'lighten-4');
|
||||
}
|
||||
.legendary {
|
||||
background-color: map-get(settings.$amber, 'lighten-4');
|
||||
}
|
||||
</style>
|
||||
93
src/components/IntimacyPower/StandardItemsCard.vue
Normal file
93
src/components/IntimacyPower/StandardItemsCard.vue
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
<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: 'end',
|
||||
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 === 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-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>
|
||||
30
src/components/IntimacyPower/SummaryCard.vue
Normal file
30
src/components/IntimacyPower/SummaryCard.vue
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<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>
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { computed } from 'vue';
|
||||
import { usePowerItems } from '@/stores/powerItems'
|
||||
|
||||
interface Props {
|
||||
itemID: string
|
||||
itemName: string
|
||||
itemIcon: string
|
||||
owned: number
|
||||
minPower: number
|
||||
maxPower: number
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const itemsOwned = ref(props.owned)
|
||||
const { updateOwned } = usePowerItems()
|
||||
|
||||
const minTotalValue = computed(() => itemsOwned.value * props.minPower)
|
||||
const maxTotalValue = computed(() => itemsOwned.value * props.maxPower)
|
||||
const aveTotalValue = computed(() => itemsOwned.value * ((props.minPower + props.maxPower) / 2))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<tr>
|
||||
<!-- <td>ICON</td> -->
|
||||
<td class="text-left">{{ props.itemName }}</td>
|
||||
<td class="text-right">{{ props.minPower }}</td>
|
||||
<td class="text-right">{{ props.maxPower }}</td>
|
||||
<td>
|
||||
<v-text-field density="compact" hide-details="auto" v-model.number="itemsOwned" @update:model-value="updateOwned(props.itemID, itemsOwned)"></v-text-field>
|
||||
</td>
|
||||
<td class="text-right">{{ minTotalValue }}</td>
|
||||
<td class="text-right">{{ maxTotalValue }}</td>
|
||||
<td class="text-right">{{ aveTotalValue }}</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { computed } from 'vue';
|
||||
import { usePowerItems } from '@/stores/powerItems'
|
||||
|
||||
interface Props {
|
||||
itemID: string
|
||||
itemName: string
|
||||
itemIcon: string
|
||||
owned: number
|
||||
minPower: number
|
||||
maxPower: number
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const itemsOwned = ref(props.owned)
|
||||
const { updateOwned } = usePowerItems()
|
||||
|
||||
const totalValue = computed(() => itemsOwned.value * props.maxPower)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<tr>
|
||||
<!-- <td>ICON</td> -->
|
||||
<td class="text-left">{{ props.itemName }}</td>
|
||||
<td class="text-right">{{ props.maxPower }}</td>
|
||||
<td>
|
||||
<v-text-field density="compact" hide-details="auto" v-model.number="itemsOwned" @update:model-value="updateOwned(props.itemID, itemsOwned)"></v-text-field>
|
||||
</td>
|
||||
<td class="text-right">{{ totalValue }}</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
|
|
@ -18,6 +18,9 @@ const vuetify = createVuetify({
|
|||
directives,
|
||||
icons: {
|
||||
defaultSet: 'mdi',
|
||||
},
|
||||
theme: {
|
||||
defaultTheme: 'dark'
|
||||
}
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -18,6 +18,11 @@ const router = createRouter({
|
|||
path: "/fellow-power",
|
||||
name: "fellow-power",
|
||||
component: () => import('@/views/FellowPowerView.vue')
|
||||
},
|
||||
{
|
||||
path: "/intimacy-power",
|
||||
name: "intimacy-power",
|
||||
component: () => import('@/views/IntimacyPowerView.vue')
|
||||
}
|
||||
]
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
import { ref, computed } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export const useCounterStore = defineStore('counter', () => {
|
||||
const count = ref(0)
|
||||
const doubleCount = computed(() => count.value * 2)
|
||||
function increment() {
|
||||
count.value++
|
||||
}
|
||||
|
||||
return { count, doubleCount, increment }
|
||||
})
|
||||
|
|
@ -6,12 +6,20 @@ import { computed, ref, toRaw } from 'vue'
|
|||
export const usePowerItems = defineStore('powerItems', () => {
|
||||
const BLESSING_POWER_ITEM_STORAGE = 'BLESSING_POWER_ITEM_STORAGE'
|
||||
const FELLOW_POWER_ITEM_STORAGE = 'FELLOW_POWER_ITEM_STORAGE'
|
||||
const INTIMACY_POWER_ITEM_STORAGE = 'INTIMACY_POWER_ITEM_STORAGE'
|
||||
const blessingPowerItems = ref(new Map<string, PowerItem>())
|
||||
const fellowPowerItems = ref(new Map<string, PowerItem>())
|
||||
const intimacyPowerItems = ref(new Map<string, PowerItem>())
|
||||
|
||||
async function fetchPowerItems() {
|
||||
axios
|
||||
.get('/items/blessingPowerItems.json')
|
||||
.get('/items/blessingPowerItems.json', {
|
||||
headers: {
|
||||
'Cache-Control': 'no-cache',
|
||||
Pragma: 'no-cache',
|
||||
Expires: '0'
|
||||
}
|
||||
})
|
||||
.then((resp) => {
|
||||
const plainMap = new Map<string, PowerItem>(
|
||||
Object.entries(JSON.parse(localStorage.getItem(BLESSING_POWER_ITEM_STORAGE) || '{}'))
|
||||
|
|
@ -27,7 +35,13 @@ export const usePowerItems = defineStore('powerItems', () => {
|
|||
console.log(err)
|
||||
})
|
||||
axios
|
||||
.get('/items/fellowPowerItems.json')
|
||||
.get('/items/fellowPowerItems.json', {
|
||||
headers: {
|
||||
'Cache-Control': 'no-cache',
|
||||
Pragma: 'no-cache',
|
||||
Expires: '0'
|
||||
}
|
||||
})
|
||||
.then((resp) => {
|
||||
const plainMap = new Map<string, PowerItem>(
|
||||
Object.entries(JSON.parse(localStorage.getItem(FELLOW_POWER_ITEM_STORAGE) || '{}'))
|
||||
|
|
@ -42,6 +56,28 @@ export const usePowerItems = defineStore('powerItems', () => {
|
|||
.catch((err) => {
|
||||
console.log(err)
|
||||
})
|
||||
axios
|
||||
.get('/items/intimacyPowerItems.json', {
|
||||
headers: {
|
||||
'Cache-Control': 'no-cache',
|
||||
Pragma: 'no-cache',
|
||||
Expires: '0'
|
||||
}
|
||||
})
|
||||
.then((resp) => {
|
||||
const plainMap = new Map<string, PowerItem>(
|
||||
Object.entries(JSON.parse(localStorage.getItem(INTIMACY_POWER_ITEM_STORAGE) || '{}'))
|
||||
)
|
||||
Object.keys(resp.data).map((key) => {
|
||||
const cur = resp.data[key]
|
||||
if (cur['owned'] === undefined) cur['owned'] = 0
|
||||
cur['owned'] = plainMap.get(key) !== undefined ? plainMap.get(key)?.owned : 0
|
||||
intimacyPowerItems.value.set(key, resp.data[key])
|
||||
})
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
})
|
||||
}
|
||||
|
||||
function updateOwned(key: string, newOwned: number) {
|
||||
|
|
@ -64,6 +100,15 @@ export const usePowerItems = defineStore('powerItems', () => {
|
|||
JSON.stringify(mapToObj(toRaw(fellowPowerItems.value)))
|
||||
)
|
||||
}
|
||||
cur = intimacyPowerItems.value.get(key)
|
||||
if (cur !== undefined) {
|
||||
cur.owned = newOwned
|
||||
intimacyPowerItems.value.set(key, cur)
|
||||
localStorage.setItem(
|
||||
INTIMACY_POWER_ITEM_STORAGE,
|
||||
JSON.stringify(mapToObj(toRaw(intimacyPowerItems.value)))
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
function mapToObj(map: Map<string, PowerItem>) {
|
||||
|
|
@ -217,6 +262,78 @@ export const usePowerItems = defineStore('powerItems', () => {
|
|||
)
|
||||
)
|
||||
|
||||
const totalIntimacyPower = computed(() =>
|
||||
[...intimacyPowerItems.value.values()].reduce(
|
||||
(accumulator: number, currentValue: PowerItem) => {
|
||||
return currentValue !== undefined
|
||||
? accumulator +
|
||||
((currentValue.maxItemPower + currentValue.minItemPower) / 2) * currentValue.owned
|
||||
: 0
|
||||
},
|
||||
0
|
||||
)
|
||||
)
|
||||
|
||||
const standardIntimacyItems = computed(
|
||||
() =>
|
||||
new Map(
|
||||
[...intimacyPowerItems.value.entries()].filter(
|
||||
(cur) => cur[1].maxItemPower === cur[1].minItemPower
|
||||
)
|
||||
)
|
||||
)
|
||||
|
||||
const standardIntimacyItemTotal = computed(() =>
|
||||
[...standardIntimacyItems.value.values()].reduce(
|
||||
(accumulator: number, currentValue: PowerItem) =>
|
||||
currentValue !== undefined
|
||||
? accumulator +
|
||||
((currentValue.maxItemPower + currentValue.minItemPower) / 2) * currentValue.owned
|
||||
: 0,
|
||||
0
|
||||
)
|
||||
)
|
||||
|
||||
const specialIntimacyItems = computed(
|
||||
() =>
|
||||
new Map(
|
||||
[...intimacyPowerItems.value.entries()].filter(
|
||||
(cur) => cur[1].maxItemPower !== cur[1].minItemPower
|
||||
)
|
||||
)
|
||||
)
|
||||
|
||||
const specialIntimacyItemsMinTotal = computed(() =>
|
||||
[...specialIntimacyItems.value.values()].reduce(
|
||||
(accumulator: number, currentValue: PowerItem) =>
|
||||
currentValue !== undefined
|
||||
? accumulator + currentValue.minItemPower * currentValue.owned
|
||||
: 0,
|
||||
0
|
||||
)
|
||||
)
|
||||
|
||||
const specialIntimacyItemsMaxTotal = computed(() =>
|
||||
[...specialIntimacyItems.value.values()].reduce(
|
||||
(accumulator: number, currentValue: PowerItem) =>
|
||||
currentValue !== undefined
|
||||
? accumulator + currentValue.maxItemPower * currentValue.owned
|
||||
: 0,
|
||||
0
|
||||
)
|
||||
)
|
||||
|
||||
const specialIntimacyItemsAveTotal = computed(() =>
|
||||
[...specialIntimacyItems.value.values()].reduce(
|
||||
(accumulator: number, currentValue: PowerItem) =>
|
||||
currentValue !== undefined
|
||||
? accumulator +
|
||||
((currentValue.maxItemPower + currentValue.minItemPower) / 2) * currentValue.owned
|
||||
: 0,
|
||||
0
|
||||
)
|
||||
)
|
||||
|
||||
fetchPowerItems()
|
||||
|
||||
return {
|
||||
|
|
@ -236,6 +353,13 @@ export const usePowerItems = defineStore('powerItems', () => {
|
|||
specialFellowItems,
|
||||
specialFellowItemsMinTotal,
|
||||
specialFellowItemsMaxTotal,
|
||||
specialFellowItemsAveTotal
|
||||
specialFellowItemsAveTotal,
|
||||
totalIntimacyPower,
|
||||
standardIntimacyItems,
|
||||
standardIntimacyItemTotal,
|
||||
specialIntimacyItems,
|
||||
specialIntimacyItemsMinTotal,
|
||||
specialIntimacyItemsMaxTotal,
|
||||
specialIntimacyItemsAveTotal
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -4,4 +4,5 @@ export type PowerItem = {
|
|||
minItemPower: number
|
||||
maxItemPower: number
|
||||
owned: number
|
||||
rarity: number
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,22 +5,16 @@ import SummaryCard from '@/components/BlessingPower/SummaryCard.vue'
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-row justify="center">
|
||||
<v-col><StandardItemsCard /></v-col>
|
||||
<v-col><SpecialItemsCard /></v-col>
|
||||
</v-row>
|
||||
<v-row justify="center">
|
||||
<v-col cols="6">
|
||||
<SummaryCard />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "@/styles/settings.scss";
|
||||
@use '@/styles/settings.scss';
|
||||
:deep(tbody) tr:nth-of-type(even) {
|
||||
background-color: map-get(settings.$purple, "lighten-5");
|
||||
background-color: rgba(var(--v-theme-primary-darken-1), 0.25);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,22 +5,16 @@ import SummaryCard from '@/components/FellowPower/SummaryCard.vue'
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-row justify="center">
|
||||
<v-col><StandardItemsCard /></v-col>
|
||||
<v-col><SpecialItemsCard /></v-col>
|
||||
</v-row>
|
||||
<v-row justify="center">
|
||||
<v-col cols="6">
|
||||
<SummaryCard />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "@/styles/settings.scss";
|
||||
:deep(tbody) tr:nth-of-type(even) {
|
||||
background-color: map-get(settings.$purple, "lighten-5");
|
||||
background-color: rgba(var(--v-theme-primary-darken-1), 0.25);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,91 @@
|
|||
<script setup lang="ts">
|
||||
</script>
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
<v-sheet>
|
||||
Click one of the links to the left.
|
||||
<v-sheet class="flex-fill pa-2">
|
||||
<h1 class="pa-2">ISL Item Value Calculator</h1>
|
||||
<v-sheet :elevation="1" class="ma-2 my-4">
|
||||
<h2>How to Use</h2>
|
||||
<p>
|
||||
Select the type of items you want to add up from the menu, then add how many of each item
|
||||
you have under the "owned" column. Totals will automatically be calculated for you as you
|
||||
update. This also attempts to save your values in your browser automatically.
|
||||
</p>
|
||||
</v-sheet>
|
||||
</main>
|
||||
<v-sheet :elevation="1" class="ma-2 my-4">
|
||||
<h2>Missing Features</h2>
|
||||
<v-list>
|
||||
<v-list-item>
|
||||
<v-list-item-title>Syncing</v-list-item-title>
|
||||
<v-list-item-subtitle>
|
||||
Currently all data is stored in your browser and cannot be moved to another device
|
||||
easily.
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<v-list-item-title>Refreshing Data</v-list-item-title>
|
||||
<v-list-item-subtitle>
|
||||
The list of available items is only loaded when you first access the page. If they are
|
||||
updated, you will need to manually refresh in order to fetch new items.
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<v-list-item-title>Missing Data</v-list-item-title>
|
||||
<v-list-item-subtitle>
|
||||
Some items may be missing! I'll figure out what to put to contact me with fixes soon!
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<v-list-item-title>Missing Icons</v-list-item-title>
|
||||
<v-list-item-subtitle>
|
||||
I'd love to add icons for everything
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<v-list-item-title>Sorting and Grouping</v-list-item-title>
|
||||
<v-list-item-subtitle>
|
||||
More grouping and sorting options will be added as I figure out how.
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-sheet>
|
||||
<v-sheet :elevation="1" class="ma-2 my-4">
|
||||
<h2>Changelog</h2>
|
||||
<v-list lines="two">
|
||||
<v-list-item>
|
||||
<v-list-item-title>2024-01-16</v-list-item-title>
|
||||
<v-list-item-subtitle>
|
||||
<p>The inital build, looked like hell, but mostly worked</p>
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<v-list-item-title>2024-01-17</v-list-item-title>
|
||||
<v-list-item-subtitle>
|
||||
<p>Cleaned up my build process a bit, and fixed a few bugs</p>
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<v-list-item-title>2024-01-20</v-list-item-title>
|
||||
<v-list-item-subtitle>
|
||||
<p>First pass that I'm comfortable letting other people see</p>
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<v-list-item-title>2024-01-21</v-list-item-title>
|
||||
<v-list-item-subtitle>
|
||||
<p>Added text to the landing page</p>
|
||||
<p>Cleaned up some styling across the site</p>
|
||||
<p>Added a default sort to all of the tables</p>
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-sheet>
|
||||
<v-sheet :elevation="1" class="ma-2 my-4">
|
||||
<h2>Thanks</h2>
|
||||
<p>
|
||||
Special thanks to <span class="font-weight-bold">@marstache</span> from
|
||||
<span class="font-weight-bold">S-183</span> for sharing his version of this in Google Sheets
|
||||
and inspiring me to create this.
|
||||
</p>
|
||||
</v-sheet>
|
||||
</v-sheet>
|
||||
</template>
|
||||
|
|
|
|||
20
src/views/IntimacyPowerView.vue
Normal file
20
src/views/IntimacyPowerView.vue
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<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'
|
||||
</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>
|
||||
</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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue