mirror of
https://github.com/kihashi/stardew_community_checklist.git
synced 2025-10-19 08:03:17 +00:00
Bundles page now working fully
This commit is contained in:
lachie-underhill
parent
55b0ab00f1
commit
7eab79409c
30
src/App.vue
30
src/App.vue
@ -1,32 +1,14 @@
|
||||
<script>
|
||||
import HeaderBar from './components/HeaderBar.vue'
|
||||
<script setup lang="ts">
|
||||
import AppFooter from './components/AppFooter.vue'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
HeaderBar,
|
||||
AppFooter
|
||||
},
|
||||
created() {
|
||||
this.$store.commit('initState')
|
||||
var v1data = localStorage.getItem('user_data')
|
||||
if (v1data !== null && v1data !== '') {
|
||||
this.$store.dispatch('LoadV1State', JSON.parse(atob(v1data)))
|
||||
localStorage.removeItem('user_data')
|
||||
localStorage.setItem('v1data', v1data)
|
||||
}
|
||||
}
|
||||
}
|
||||
import HeaderBar from './components/HeaderBar.vue'
|
||||
import { RouterView } from 'vue-router'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="app">
|
||||
<header-bar />
|
||||
<transition name="fade" mode="out-in">
|
||||
<router-view />
|
||||
</transition>
|
||||
<app-footer />
|
||||
<HeaderBar />
|
||||
<RouterView />
|
||||
<AppFooter />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,3 +1,12 @@
|
||||
<script setup>
|
||||
import router from '@/router'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const menuActive = ref(false)
|
||||
|
||||
const named_routes = router.options.routes.filter((route) => route.name)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="hero is-info is-bold">
|
||||
<nav class="navbar">
|
||||
@ -11,21 +20,21 @@
|
||||
</a>
|
||||
<div
|
||||
class="navbar-burger"
|
||||
v-bind:class="{ 'is-active': menu_active }"
|
||||
@click="menu_active = !menu_active"
|
||||
v-bind:class="{ 'is-active': menuActive }"
|
||||
@click="menuActive = !menuActive"
|
||||
>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-menu" v-bind:class="{ 'is-active': menu_active }">
|
||||
<div class="navbar-menu" v-bind:class="{ 'is-active': menuActive }">
|
||||
<div class="navbar-end">
|
||||
<router-link
|
||||
v-for="route in named_routes"
|
||||
:key="route.order"
|
||||
class="navbar-item"
|
||||
@click.native="menu_active = false"
|
||||
@click="menuActive = false"
|
||||
:to="route"
|
||||
>
|
||||
{{ route.name }}
|
||||
@ -37,20 +46,4 @@
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'header-bar',
|
||||
data: function () {
|
||||
return {
|
||||
menu_active: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
named_routes: function () {
|
||||
return this.$router.options.routes.filter((route) => route.hasOwnProperty('name'))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<span class="icon" v-bind:data-season="season.id">
|
||||
<mdicon name="flower" v-if="season.id === 'spring'" />
|
||||
<mdicon name="sun" v-if="season.id === 'summer'" />
|
||||
<mdicon name="leaf" v-if="season.id === 'fall'" />
|
||||
<mdicon name="snowflake" v-if="season.id === 'winter'" />
|
||||
<mdicon name="flower" v-if="season === 'spring'" />
|
||||
<mdicon name="white-balance-sunny" v-if="season === 'summer'" />
|
||||
<mdicon name="leaf" v-if="season === 'fall'" />
|
||||
<mdicon name="snowflake" v-if="season === 'winter'" />
|
||||
</span>
|
||||
</template>
|
||||
|
||||
@ -12,13 +12,10 @@ export default {
|
||||
name: 'season-icon',
|
||||
props: {
|
||||
season: {
|
||||
type: Object,
|
||||
type: String,
|
||||
required: true,
|
||||
default: function () {
|
||||
return {
|
||||
id: 'spring',
|
||||
name: 'Spring'
|
||||
}
|
||||
return 'spring'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -133,10 +133,7 @@ export default {
|
||||
name: 'Settings',
|
||||
components: {
|
||||
ButtonCheckbox,
|
||||
FontAwesomeIcon,
|
||||
faCopy,
|
||||
faCloudUploadAlt,
|
||||
faTrash
|
||||
FontAwesomeIcon
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<span class="icon" v-bind:data-skill="skill.id">
|
||||
<mdicon name="cow" v-if="skill.id === 'farming'" />
|
||||
<mdicon name="diamond" v-if="skill.id === 'mining'" />
|
||||
<mdicon name="mushroom" v-if="skill.id === 'foraging'" />
|
||||
<mdicon name="fish" v-if="skill.id === 'fishing'" />
|
||||
<mdicon name="sword" v-if="skill.id === 'combat'" />
|
||||
<mdicon name="cow" v-if="skill === 'farming'" />
|
||||
<mdicon name="diamond" v-if="skill === 'mining'" />
|
||||
<mdicon name="mushroom" v-if="skill === 'foraging'" />
|
||||
<mdicon name="fish" v-if="skill === 'fishing'" />
|
||||
<mdicon name="sword" v-if="skill === 'combat'" />
|
||||
</span>
|
||||
</template>
|
||||
|
||||
@ -13,13 +13,10 @@ export default {
|
||||
name: 'skill-icon',
|
||||
props: {
|
||||
skill: {
|
||||
type: Object,
|
||||
type: String,
|
||||
required: true,
|
||||
default: function () {
|
||||
return {
|
||||
id: 'farming',
|
||||
name: 'Farming'
|
||||
}
|
||||
return 'farming'
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -35,7 +32,7 @@ export default {
|
||||
content: attr(data-skill);
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -1.85rem;
|
||||
bottom: -0.85rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.75rem;
|
||||
background-color: #209cee;
|
||||
|
||||
@ -1,12 +1,38 @@
|
||||
<script setup lang="ts">
|
||||
import ItemCard from '@/components/item_card/ItemCard.vue'
|
||||
import ItemTable from '@/components/item_table/ItemTable.vue'
|
||||
import { useGeneralStore } from '@/store'
|
||||
import { computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
const route = useRoute()
|
||||
const store = useGeneralStore()
|
||||
const bundleId = computed(() =>
|
||||
Number.parseInt(Array.isArray(route.params.id) ? route.params.id[0] : route.params.id)
|
||||
)
|
||||
|
||||
const bundle = computed(() => store.getBundleById(bundleId.value))
|
||||
const bundleItems = computed(() =>
|
||||
bundle.value ? store.getBundleItemsInBundle(bundle.value.id) : []
|
||||
)
|
||||
const items = computed(() =>
|
||||
bundleItems.value.map((i) => store.getItemById(i.item_id)).filter((v, i, a) => a.indexOf(v) === i)
|
||||
)
|
||||
const room = computed(() => (bundle.value ? store.getRoomById(bundle.value.room) : undefined))
|
||||
|
||||
const hideBundleItems = computed(() => store.HideSpoilers && store.BundleRewardsSpoilers)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="bundle-items">
|
||||
<section class="container">
|
||||
<section class="container" v-if="bundle">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<h3 class="title is-4">
|
||||
{{ bundle.name }}
|
||||
<span class="is-pulled-right"
|
||||
>{{ GetBundleItemsRedeemed(bundle) }} / {{ bundle.items_required }}</span
|
||||
>{{ store.getNumberOfBundleItemsStoredInBundle(bundle.id) }} /
|
||||
{{ bundle.items_required }}</span
|
||||
>
|
||||
</h3>
|
||||
<h5 class="subtitle bundle-reward" v-if="!hideBundleItems">
|
||||
@ -14,77 +40,39 @@
|
||||
</h5>
|
||||
<progress
|
||||
class="progress is-info"
|
||||
:value="GetBundleItemsRedeemed(bundle)"
|
||||
:value="store.getNumberOfBundleItemsStoredInBundle(bundle.id)"
|
||||
:max="bundle.items_required"
|
||||
/>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="column" v-if="room">
|
||||
<h3 class="title is-4">
|
||||
{{ bundle.room.name }}
|
||||
{{ room.name }}
|
||||
<span class="is-pulled-right"
|
||||
>{{ GetRoomItemsRedeemed(bundle.room) }} / {{ bundle.room.items_required }}</span
|
||||
>{{ store.getNumberOfRoomItemsStored(bundle.room) }} /
|
||||
{{ store.getTotalRoomRequired(bundle.room) }}</span
|
||||
>
|
||||
</h3>
|
||||
<h5 class="subtitle" v-if="!hideBundleItems">
|
||||
{{ bundle.room.reward }}
|
||||
{{ room.reward }}
|
||||
</h5>
|
||||
<progress
|
||||
class="progress is-info"
|
||||
:value="GetRoomItemsRedeemed(bundle.room)"
|
||||
:max="bundle.room.items_required"
|
||||
:value="store.getNumberOfRoomItemsStored(bundle.room)"
|
||||
:max="store.getTotalRoomRequired(room.id)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns is-multiline">
|
||||
<item-table v-if="CompactView" :items="bundleItems.map((i) => i.item)" />
|
||||
<item-table v-if="store.CompactView" :items="items" />
|
||||
<div
|
||||
v-else
|
||||
class="column is-3-widescreen is-4-desktop is-12-mobile is-6-tablet is-flex"
|
||||
v-for="bundleitem in bundleItems"
|
||||
:key="bundleitem.id"
|
||||
v-for="item in items"
|
||||
:key="item?.id"
|
||||
>
|
||||
<item-card :item="bundleitem.item"></item-card>
|
||||
<item-card :item="item"></item-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ItemCard from '@/components/item_card/ItemCard.vue'
|
||||
import ItemTable from '@/components/item_table/ItemTable.vue'
|
||||
export default {
|
||||
name: 'bundle-items',
|
||||
computed: {
|
||||
bundle: function () {
|
||||
return this.$store.getters.GetBundleById(this.$route.params.id)
|
||||
},
|
||||
hideBundleItems: function () {
|
||||
return this.$store.state.HideSpoilers && this.$store.state.BundleRewardsSpoilers
|
||||
},
|
||||
bundleItems: function () {
|
||||
return this.bundle.items.filter(
|
||||
(item) => !(this.$store.state.HideCompleted && this.isItemComplete(item))
|
||||
)
|
||||
},
|
||||
CompactView() {
|
||||
return this.$store.state.CompactView
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isItemComplete: function (item) {
|
||||
return item.item.bundles.every(this.$store.getters.IsBundleItemRedeemed)
|
||||
},
|
||||
GetBundleItemsRedeemed: function (bundle) {
|
||||
return this.$store.getters.GetBundleItemsRedeemed(bundle)
|
||||
},
|
||||
GetRoomItemsRedeemed: function (room) {
|
||||
return this.$store.getters.GetRoomItemsRedeemed(room)
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ItemCard,
|
||||
ItemTable
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,3 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
import { useGeneralStore } from '@/store'
|
||||
import { ref } from 'vue'
|
||||
import { RouterLink } from 'vue-router'
|
||||
|
||||
const store = useGeneralStore()
|
||||
|
||||
const menuActive = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="container">
|
||||
<nav class="navbar">
|
||||
@ -7,8 +18,8 @@
|
||||
</div>
|
||||
<div
|
||||
class="navbar-burger burger"
|
||||
v-bind:class="{ 'is-active': menu_active }"
|
||||
@click="menu_active = !menu_active"
|
||||
v-bind:class="{ 'is-active': menuActive }"
|
||||
@click="menuActive = !menuActive"
|
||||
>
|
||||
<span></span>
|
||||
<span></span>
|
||||
@ -16,28 +27,32 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-menu" v-bind:class="{ 'is-active': menu_active }">
|
||||
<div class="navbar-menu" v-bind:class="{ 'is-active': menuActive }">
|
||||
<div class="navbar-start">
|
||||
<div class="navbar-item has-dropdown is-hoverable" v-for="room in rooms" :key="room.id">
|
||||
<div
|
||||
class="navbar-item has-dropdown is-hoverable"
|
||||
v-for="room in store.rooms"
|
||||
:key="room.id"
|
||||
>
|
||||
<a class="navbar-link">
|
||||
<span class="icon has-text-success" v-if="IsRoomComplete(room)"
|
||||
<span class="icon has-text-success" v-if="store.isRoomComplete(room.id)"
|
||||
><font-awesome-icon icon="check-circle"
|
||||
/></span>
|
||||
<span>{{ room.name }}</span>
|
||||
</a>
|
||||
<div class="navbar-dropdown">
|
||||
<router-link
|
||||
<RouterLink
|
||||
class="navbar-item"
|
||||
v-for="bundle in room.bundles"
|
||||
v-for="bundle in store.getBundlesInRoom(room.id)"
|
||||
:key="bundle.id"
|
||||
@click.native="menu_active = false"
|
||||
@click="menuActive = false"
|
||||
:to="{ name: 'bundle-items', params: { id: bundle.id } }"
|
||||
>
|
||||
<span class="icon has-text-success" v-if="IsBundleComplete(bundle)"
|
||||
<span class="icon has-text-success" v-if="store.isBundleComplete(bundle.id)"
|
||||
><font-awesome-icon icon="check-circle"
|
||||
/></span>
|
||||
<span>{{ bundle.name }}</span>
|
||||
</router-link>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -45,32 +60,3 @@
|
||||
</nav>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
import { faCheckCircle } from '@fortawesome/fontawesome-free-solid'
|
||||
export default {
|
||||
name: 'bundle_nav',
|
||||
components: {
|
||||
FontAwesomeIcon,
|
||||
faCheckCircle
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
menu_active: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['rooms'])
|
||||
},
|
||||
methods: {
|
||||
IsBundleComplete: function (bundle) {
|
||||
return this.$store.getters.IsBundleComplete(bundle)
|
||||
},
|
||||
IsRoomComplete: function (room) {
|
||||
return this.$store.getters.IsRoomComplete(room)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,19 +1,58 @@
|
||||
<script setup lang="ts">
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
import { faCheckSquare, faSquare } from '@fortawesome/fontawesome-free-regular'
|
||||
import { useGeneralStore, type BundleItem } from '@/store'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const store = useGeneralStore()
|
||||
|
||||
interface Props {
|
||||
bundleItem: BundleItem
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const bundle = store.getBundleById(props.bundleItem.bundle_id)
|
||||
|
||||
const itemInBundle = computed(() => store.isBundleItemStored(props.bundleItem.id))
|
||||
console.log(itemInBundle)
|
||||
const buttonClass = computed(() => {
|
||||
if (itemInBundle.value) {
|
||||
return 'is-success'
|
||||
} else if (store.isBundleComplete(props.bundleItem.bundle_id)) {
|
||||
return ''
|
||||
} else {
|
||||
return 'is-danger'
|
||||
}
|
||||
})
|
||||
const numberInBundle = computed(() => {
|
||||
return props.bundleItem.count > 1 ? ` (${props.bundleItem.count})` : ''
|
||||
})
|
||||
|
||||
function toggleItemInBundle() {
|
||||
console.log(itemInBundle.value)
|
||||
if (!itemInBundle.value) {
|
||||
store.storeItem(props.bundleItem.id)
|
||||
} else {
|
||||
store.unstoreItem(props.bundleItem.id)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="field has-addons">
|
||||
<div class="control is-expanded">
|
||||
<a class="button is-rounded is-fullwidth" :class="ButtonClass" @click="ToggleItemInBundle">
|
||||
<a class="button is-rounded is-fullwidth" :class="buttonClass" @click="toggleItemInBundle">
|
||||
<span class="icon">
|
||||
<font-awesome-icon
|
||||
:icon="ItemInBundle ? InBundleIcon : NotInBundleIcon"
|
||||
></font-awesome-icon>
|
||||
<font-awesome-icon :icon="itemInBundle ? faCheckSquare : faSquare"></font-awesome-icon>
|
||||
</span>
|
||||
<span class="is-size-7">{{ bundleItem.bundle.name }}{{ numberInBundle }}</span>
|
||||
<span class="is-size-7" v-if="bundle">{{ bundle.name }}{{ numberInBundle }}</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="control">
|
||||
<router-link
|
||||
class="button is-rounded is-light"
|
||||
:to="{ name: 'bundle-items', params: { id: bundleItem.bundle.id } }"
|
||||
:to="{ name: 'bundle-items', params: { id: bundleItem.bundle_id } }"
|
||||
>
|
||||
<span class="icon is-small">
|
||||
<font-awesome-icon icon="link"></font-awesome-icon>
|
||||
@ -22,59 +61,3 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
import { faCheckSquare, faSquare } from '@fortawesome/fontawesome-free-regular'
|
||||
import { faLink } from '@fortawesome/fontawesome-free-solid'
|
||||
export default {
|
||||
name: 'bundle-button',
|
||||
components: {
|
||||
'font-awesome-icon': FontAwesomeIcon,
|
||||
faLink
|
||||
},
|
||||
props: {
|
||||
bundleItem: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
ItemInBundle: function () {
|
||||
return this.$store.getters.IsBundleItemRedeemed(this.bundleItem)
|
||||
},
|
||||
InBundleIcon() {
|
||||
return faCheckSquare
|
||||
},
|
||||
NotInBundleIcon() {
|
||||
return faSquare
|
||||
},
|
||||
ButtonClass() {
|
||||
if (this.ItemInBundle) {
|
||||
return 'is-success'
|
||||
} else if (this.IsBundleComplete(this.bundleItem.bundle)) {
|
||||
return ''
|
||||
} else {
|
||||
return 'is-danger'
|
||||
}
|
||||
},
|
||||
numberInBundle() {
|
||||
return this.bundleItem.count > 1 ? ` (${this.bundleItem.count})` : ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
ToggleItemInBundle() {
|
||||
if (!this.ItemInBundle) {
|
||||
this.$store.commit('RedeemItem', this.bundleItem)
|
||||
} else {
|
||||
this.$store.commit('UndoRedeemItem', this.bundleItem)
|
||||
}
|
||||
},
|
||||
IsBundleComplete(bundle) {
|
||||
return this.$store.getters.IsBundleComplete(bundle)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@ -1,5 +1,44 @@
|
||||
<script setup lang="ts">
|
||||
import SeasonList from './SeasonList.vue'
|
||||
import SkillList from './SkillList.vue'
|
||||
import BundleButton from './BundleButton.vue'
|
||||
import { useGeneralStore, type Item } from '@/store'
|
||||
|
||||
const store = useGeneralStore()
|
||||
|
||||
const showItemDesc = !(store.HideSpoilers && store.ItemInfoSpoilers)
|
||||
const showSeasonList = !(store.HideSpoilers && store.SeasonsSpoilers)
|
||||
const showSkillList = !(store.HideSpoilers && store.SkillsSpoilers)
|
||||
|
||||
interface Props {
|
||||
item?: Item
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
item: () => ({
|
||||
id: 22,
|
||||
name: 'Purple Mushroom',
|
||||
source: 'Can be found in the mines or in the farm cave if you selected the mushroom perk.',
|
||||
seasons: ['spring', 'summer', 'fall', 'winter'],
|
||||
skills: ['mining', 'foraging'],
|
||||
bundles: [
|
||||
{
|
||||
count: 1,
|
||||
bundle_id: 5,
|
||||
id: 24
|
||||
},
|
||||
{
|
||||
count: 1,
|
||||
bundle_id: 23,
|
||||
id: 25
|
||||
}
|
||||
]
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="card" v-if="item">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title">
|
||||
{{ item.name }}
|
||||
@ -11,7 +50,7 @@
|
||||
</div>
|
||||
<div class="content">
|
||||
<bundle-button
|
||||
v-for="bundleItem in item.bundles"
|
||||
v-for="bundleItem in store.getBundleItemsForItem(item.id)"
|
||||
:key="bundleItem.id"
|
||||
:bundle-item="bundleItem"
|
||||
:item="item"
|
||||
@ -29,101 +68,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SeasonList from './SeasonList.vue'
|
||||
import SkillList from './SkillList.vue'
|
||||
import BundleButton from './BundleButton.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BundleButton,
|
||||
SkillList,
|
||||
SeasonList
|
||||
},
|
||||
name: 'item-card',
|
||||
computed: {
|
||||
showItemDesc: function () {
|
||||
return !(this.$store.state.HideSpoilers && this.$store.state.ItemInfoSpoilers)
|
||||
},
|
||||
showSeasonList: function () {
|
||||
return !(this.$store.state.HideSpoilers && this.$store.state.SeasonsSpoilers)
|
||||
},
|
||||
showSkillList: function () {
|
||||
return !(this.$store.state.HideSpoilers && this.$store.state.SkillsSpoilers)
|
||||
}
|
||||
},
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {
|
||||
id: 22,
|
||||
name: 'Purple Mushroom',
|
||||
source:
|
||||
'Can be found in the mines or in the farm cave if you selected the mushroom perk.',
|
||||
seasons: [
|
||||
{
|
||||
id: 'spring',
|
||||
order: 0,
|
||||
name: 'Spring'
|
||||
},
|
||||
{
|
||||
id: 'summer',
|
||||
order: 1,
|
||||
name: 'Summer'
|
||||
},
|
||||
{
|
||||
id: 'fall',
|
||||
order: 2,
|
||||
name: 'Fall'
|
||||
},
|
||||
{
|
||||
id: 'winter',
|
||||
order: 3,
|
||||
name: 'Winter'
|
||||
}
|
||||
],
|
||||
skills: [
|
||||
{
|
||||
id: 'mining',
|
||||
order: 1,
|
||||
name: 'Mining'
|
||||
},
|
||||
{
|
||||
id: 'foraging',
|
||||
order: 2,
|
||||
name: 'Foraging'
|
||||
}
|
||||
],
|
||||
bundles: [
|
||||
{
|
||||
count: 1,
|
||||
bundle: {
|
||||
id: 5,
|
||||
name: 'Exotic Foraging Bundle',
|
||||
room: 0,
|
||||
reward: "Autumn's Bounty (5)"
|
||||
},
|
||||
id: 24
|
||||
},
|
||||
{
|
||||
count: 1,
|
||||
bundle: {
|
||||
id: 23,
|
||||
name: 'Field Research Bundle',
|
||||
room: 4,
|
||||
reward: 'Recycling Machine'
|
||||
},
|
||||
id: 25
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card {
|
||||
width: 100%;
|
||||
|
||||
@ -10,13 +10,10 @@ export default {
|
||||
name: 'season-tag',
|
||||
props: {
|
||||
season: {
|
||||
type: Object,
|
||||
type: String,
|
||||
required: true,
|
||||
default: function () {
|
||||
return {
|
||||
id: 'spring',
|
||||
name: 'Spring'
|
||||
}
|
||||
return 'spring'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -6,17 +6,15 @@
|
||||
|
||||
<script>
|
||||
import SkillIcon from '@/components/SkillIcon.vue'
|
||||
|
||||
export default {
|
||||
name: 'skill-tag',
|
||||
props: {
|
||||
skill: {
|
||||
type: Object,
|
||||
type: String,
|
||||
required: true,
|
||||
default: function () {
|
||||
return {
|
||||
id: 'farming',
|
||||
name: 'Farming'
|
||||
}
|
||||
return 'farming'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import '../node_modules/bulma/bulma.sass'
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
// import store from './store'
|
||||
import mdiVue from 'mdi-vue/v3'
|
||||
import * as mdijs from '@mdi/js'
|
||||
|
||||
@ -14,6 +14,8 @@ app.use(router)
|
||||
app.use(mdiVue, {
|
||||
icons: mdijs
|
||||
})
|
||||
// app.use(store)
|
||||
|
||||
const pinia = createPinia()
|
||||
app.use(pinia)
|
||||
|
||||
app.mount('#app')
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
|
||||
import Welcome from '@/components/Welcome.vue'
|
||||
import Bundles from '@/components/bundles/Bundles.vue'
|
||||
import Bundles from '@/views/BundlesView.vue'
|
||||
import BundleItems from '@/components/bundles/BundleItems.vue'
|
||||
import Search from '@/components/search/Search.vue'
|
||||
import Settings from '@/components/Settings.vue'
|
||||
import Changelog from '@/components/changelog/Changelog.vue'
|
||||
import ChangeLog from '@/components/changelog/ChangeLog.vue'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
@ -49,7 +49,7 @@ const router = createRouter({
|
||||
},
|
||||
{
|
||||
path: '/changelog',
|
||||
component: Changelog
|
||||
component: ChangeLog
|
||||
}
|
||||
],
|
||||
linkActiveClass: 'is-active'
|
||||
|
||||
@ -19,12 +19,12 @@ const skills = SkillJson.skills
|
||||
const rooms = RoomJson.rooms
|
||||
const seasons = SeasonJson.seasons
|
||||
|
||||
type Bundle = (typeof bundles)[0]
|
||||
type Item = (typeof items)[0]
|
||||
type BundleItem = (typeof bundleItems)[0]
|
||||
type Room = (typeof rooms)[0]
|
||||
type Season = (typeof seasons)[0]
|
||||
type Skill = (typeof skills)[0]
|
||||
export type Bundle = (typeof bundles)[0]
|
||||
export type Item = (typeof items)[0]
|
||||
export type BundleItem = (typeof bundleItems)[0]
|
||||
export type Room = (typeof rooms)[0]
|
||||
export type Season = (typeof seasons)[0]
|
||||
export type Skill = (typeof skills)[0]
|
||||
|
||||
export const useGeneralStore = defineStore('general', {
|
||||
state: () => ({
|
||||
@ -47,19 +47,32 @@ export const useGeneralStore = defineStore('general', {
|
||||
getItemById:
|
||||
(state) =>
|
||||
(itemId: number): Item | undefined =>
|
||||
state.items.find((item) => item.id === itemId),
|
||||
getById(state.items, itemId),
|
||||
getBundleById:
|
||||
(state) =>
|
||||
(bundleId: number): Bundle | undefined => {
|
||||
return getById(state.bundles, bundleId)
|
||||
},
|
||||
(bundleId: number): Bundle | undefined =>
|
||||
getById(state.bundles, bundleId),
|
||||
getRoomById(state) {
|
||||
return (roomId: number): Room[] => state.rooms.filter((room) => room.id === roomId)
|
||||
return (roomId: number): Room | undefined => getById(state.rooms, roomId)
|
||||
},
|
||||
getBundleItemsForItem(state) {
|
||||
return (itemId: number): BundleItem[] =>
|
||||
state.bundleItems.filter((bundleItem) => bundleItem.item_id === itemId)
|
||||
},
|
||||
getBundleItemsInBundle(state) {
|
||||
return (bundleId: number): BundleItem[] =>
|
||||
state.bundleItems.filter((bundleItem) => bundleItem.bundle_id === bundleId)
|
||||
},
|
||||
getBundleItemsInRoom() {
|
||||
return (roomId: number): BundleItem[] =>
|
||||
this.getBundlesInRoom(roomId).flatMap((bundle) => this.getBundleItemsInBundle(bundle.id))
|
||||
},
|
||||
getTotalRoomRequired() {
|
||||
return (roomId: number): number =>
|
||||
this.getBundlesInRoom(roomId)
|
||||
.flatMap((bundle) => bundle.items_required)
|
||||
.reduce((room_required, bundle_required) => room_required + bundle_required, 0)
|
||||
},
|
||||
getBundlesInRoom(state) {
|
||||
return (roomId: number): Bundle[] => state.bundles.filter((bundle) => bundle.room === roomId)
|
||||
},
|
||||
@ -73,11 +86,18 @@ export const useGeneralStore = defineStore('general', {
|
||||
},
|
||||
getNumberOfBundleItemsStoredInBundle(state) {
|
||||
return (bundleId: number): number => {
|
||||
return state.StoredBundleItemIds.filter((id) =>
|
||||
// FIXME: Need to find a better way of handling undefined here instead of just assigning an arbitrary value
|
||||
// Shouldn't even be undefined, but just in case
|
||||
const bundleItemsRequired = this.getBundleById(bundleId)?.items_required ?? 100
|
||||
|
||||
return Math.min(
|
||||
state.StoredBundleItemIds.filter((id) =>
|
||||
this.getBundleItemsInBundle(bundleId)
|
||||
.map((item) => item.id)
|
||||
.includes(id)
|
||||
).length
|
||||
).length,
|
||||
bundleItemsRequired
|
||||
)
|
||||
}
|
||||
},
|
||||
getNumberOfRoomItemsStored() {
|
||||
@ -93,7 +113,7 @@ export const useGeneralStore = defineStore('general', {
|
||||
return (bundleId: number): boolean => {
|
||||
return (
|
||||
this.getNumberOfBundleItemsStoredInBundle(bundleId) >=
|
||||
this.getBundleItemsInBundle(bundleId).length
|
||||
(this.getBundleById(bundleId)?.items_required ?? 0)
|
||||
)
|
||||
}
|
||||
},
|
||||
@ -113,7 +133,7 @@ export const useGeneralStore = defineStore('general', {
|
||||
this.StoredBundleItemIds.push(bundleItemId)
|
||||
},
|
||||
unstoreItem(bundleItemId: number) {
|
||||
this.StoredBundleItemIds.filter((item) => item !== bundleItemId)
|
||||
this.StoredBundleItemIds = this.StoredBundleItemIds.filter((item) => item !== bundleItemId)
|
||||
},
|
||||
toggleSpoilers() {
|
||||
this.HideSpoilers = !this.HideSpoilers
|
||||
@ -138,32 +158,32 @@ export const useGeneralStore = defineStore('general', {
|
||||
},
|
||||
resetData() {
|
||||
this.StoredBundleItemIds = []
|
||||
},
|
||||
loadV1State(v1state: { item: number }[][]) {
|
||||
for (let i = 0; i < v1state.length; i++) {
|
||||
for (let j = 0; j < v1state[i].length; j++) {
|
||||
let itemId = v1state[i][j].item
|
||||
// Patch for duplicate oak
|
||||
if (itemId === 116) {
|
||||
itemId = 24
|
||||
}
|
||||
// Patch for parsnip
|
||||
if (itemId === 26 && i === 6) {
|
||||
itemId = 27
|
||||
}
|
||||
// loadV1State(v1state: { item: number }[][]) {
|
||||
// for (let i = 0; i < v1state.length; i++) {
|
||||
// for (let j = 0; j < v1state[i].length; j++) {
|
||||
// let itemId = v1state[i][j].item
|
||||
// // Patch for duplicate oak
|
||||
// if (itemId === 116) {
|
||||
// itemId = 24
|
||||
// }
|
||||
// // Patch for parsnip
|
||||
// if (itemId === 26 && i === 6) {
|
||||
// itemId = 27
|
||||
// }
|
||||
|
||||
const bundleItems = this.getOpenBundleItems(i, itemId)
|
||||
// const bundleItems = this.getOpenBundleItems(i, itemId)
|
||||
|
||||
if (bundleItems.length > 0) {
|
||||
this.storeItem(bundleItems[0])
|
||||
} else {
|
||||
console.log(
|
||||
`Tried to redeem bundle ${i} item ${itemId}, but no open bundle items were found`
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// if (bundleItems.length > 0) {
|
||||
// this.storeItem(bundleItems[0])
|
||||
// } else {
|
||||
// console.log(
|
||||
// `Tried to redeem bundle ${i} item ${itemId}, but no open bundle items were found`
|
||||
// )
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@ -1,27 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
import BundleNav from '@/components/bundles/BundleNav.vue'
|
||||
import router from '@/router'
|
||||
import { useGeneralStore } from '@/store'
|
||||
|
||||
const bundle = useGeneralStore().getBundleById(Number(router.currentRoute.value.params.id))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<BundleNav />
|
||||
<section class="section">
|
||||
<transition name="fade" mode="out-in">
|
||||
<router-view :key="bundle"></router-view>
|
||||
</transition>
|
||||
<router-view :key="bundle?.id"></router-view>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BundleNav from '@/components/bundles/BundleNav.vue'
|
||||
export default {
|
||||
components: { BundleNav },
|
||||
name: 'bundles',
|
||||
computed: {
|
||||
bundle: function () {
|
||||
return this.$store.getters.GetBundleById(this.$route.params.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
Loading…
Reference in New Issue
Block a user