From 7eab79409c091ecfa82bfe19cb8aa388c7ca8eef Mon Sep 17 00:00:00 2001
From: lachie-underhill <lachlanu@gmail.com>
Date: Fri, 2 Jun 2023 14:35:48 +1000
Subject: [PATCH] Bundles page now working fully

---
 src/App.vue                                   |  30 +---
 src/components/HeaderBar.vue                  |  33 ++---
 src/components/SeasonIcon.vue                 |  15 +-
 src/components/Settings.vue                   |   5 +-
 src/components/SkillIcon.vue                  |  19 +--
 src/components/bundles/BundleItems.vue        |  92 +++++-------
 src/components/bundles/BundleNav.vue          |  64 ++++----
 src/components/item_card/BundleButton.vue     | 107 ++++++--------
 src/components/item_card/ItemCard.vue         | 138 ++++++------------
 src/components/item_card/SeasonTag.vue        |   7 +-
 src/components/item_card/SkillTag.vue         |   8 +-
 src/main.ts                                   |   6 +-
 src/router/index.ts                           |   6 +-
 src/store/index.ts                            | 106 ++++++++------
 .../Bundles.vue => views/BundlesView.vue}     |  25 ++--
 15 files changed, 269 insertions(+), 392 deletions(-)
 rename src/{components/bundles/Bundles.vue => views/BundlesView.vue} (52%)

diff --git a/src/App.vue b/src/App.vue
index 700199c..ad5b650 100644
--- a/src/App.vue
+++ b/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>
 
diff --git a/src/components/HeaderBar.vue b/src/components/HeaderBar.vue
index 1bc71e7..9a70be5 100644
--- a/src/components/HeaderBar.vue
+++ b/src/components/HeaderBar.vue
@@ -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>
diff --git a/src/components/SeasonIcon.vue b/src/components/SeasonIcon.vue
index b86cff3..9d0fda2 100644
--- a/src/components/SeasonIcon.vue
+++ b/src/components/SeasonIcon.vue
@@ -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'
       }
     }
   }
diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index 4d38c6d..d318c10 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -133,10 +133,7 @@ export default {
   name: 'Settings',
   components: {
     ButtonCheckbox,
-    FontAwesomeIcon,
-    faCopy,
-    faCloudUploadAlt,
-    faTrash
+    FontAwesomeIcon
   },
   data: function () {
     return {
diff --git a/src/components/SkillIcon.vue b/src/components/SkillIcon.vue
index b8e67f2..4deb6a2 100644
--- a/src/components/SkillIcon.vue
+++ b/src/components/SkillIcon.vue
@@ -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;
diff --git a/src/components/bundles/BundleItems.vue b/src/components/bundles/BundleItems.vue
index 171a421..7ec817b 100644
--- a/src/components/bundles/BundleItems.vue
+++ b/src/components/bundles/BundleItems.vue
@@ -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>
diff --git a/src/components/bundles/BundleNav.vue b/src/components/bundles/BundleNav.vue
index 0a8050c..eed6f06 100644
--- a/src/components/bundles/BundleNav.vue
+++ b/src/components/bundles/BundleNav.vue
@@ -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>
diff --git a/src/components/item_card/BundleButton.vue b/src/components/item_card/BundleButton.vue
index 42bb5d1..235c707 100644
--- a/src/components/item_card/BundleButton.vue
+++ b/src/components/item_card/BundleButton.vue
@@ -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>
diff --git a/src/components/item_card/ItemCard.vue b/src/components/item_card/ItemCard.vue
index b5b098a..db38218 100644
--- a/src/components/item_card/ItemCard.vue
+++ b/src/components/item_card/ItemCard.vue
@@ -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%;
diff --git a/src/components/item_card/SeasonTag.vue b/src/components/item_card/SeasonTag.vue
index bb74855..7f55aaf 100644
--- a/src/components/item_card/SeasonTag.vue
+++ b/src/components/item_card/SeasonTag.vue
@@ -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'
       }
     }
   },
diff --git a/src/components/item_card/SkillTag.vue b/src/components/item_card/SkillTag.vue
index 7f70317..f504fc4 100644
--- a/src/components/item_card/SkillTag.vue
+++ b/src/components/item_card/SkillTag.vue
@@ -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'
       }
     }
   },
diff --git a/src/main.ts b/src/main.ts
index 219bc3c..b54ca43 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -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')
diff --git a/src/router/index.ts b/src/router/index.ts
index 884c4a6..bf71a6d 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -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'
diff --git a/src/store/index.ts b/src/store/index.ts
index af23aa2..6839dc1 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -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) =>
-          this.getBundleItemsInBundle(bundleId)
-            .map((item) => item.id)
-            .includes(id)
-        ).length
+        // 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,
+          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
-          }
-
-          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`
-            )
-          }
-        }
-      }
     }
+    // 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)
+
+    //       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`
+    //         )
+    //       }
+    //     }
+    //   }
+    // }
   }
 })
 
diff --git a/src/components/bundles/Bundles.vue b/src/views/BundlesView.vue
similarity index 52%
rename from src/components/bundles/Bundles.vue
rename to src/views/BundlesView.vue
index 0bcd857..4671e27 100644
--- a/src/components/bundles/Bundles.vue
+++ b/src/views/BundlesView.vue
@@ -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 {