Inventory view; Refactor;

src/components/BarnView.vue

@@ -0,0 +1,37 @@
+<template>
+    <div class="container container-fluid" id="main-container">
+        <div class="row">
+
+        </div>
+    </div>
+</template>
+
+<script>
+import {ItemTypeFrameClasses} from "@/data/ItemTypes";
+
+export default {
+    name: "BarnView",
+    methods: {
+        getFrameClass(type) {
+            return ItemTypeFrameClasses[type];
+        }
+    }
+}
+</script>
+
+<style scoped>
+#main-container {
+    margin-top: 5em;
+}
+
+.item-icon {
+    height: 2.5em;
+}
+
+.inventory-item {
+    font-size: 0.8em;
+    margin-bottom: 1em;
+    background-color: white;
+    border-radius: 20px;
+}
+</style>

src/components/InventoryDialog.vue

@@ -1,64 +0,0 @@
-<template>
-    <div class="modal fade" id="inventoryModal" tabindex="-1" aria-labelledby="inventoryModalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-dialog-centered">
-            <div class="modal-content steel-border">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="inventoryModalLabel">Inventory</h5>
-                    <div class="float-right">
-                        <a href="javascript:" data-bs-dismiss="modal">
-                            <img src="/assets/gui/close.png" alt="">
-                        </a>
-                    </div>
-                </div>
-
-                <div class="modal-body">
-                    <div class="row">
-                        <div class="col-6"
-                             v-for="item in $store.getters.getInventoryWithItemData"
-                             v-bind:key="item"
-                             data-bs-dismiss="modal">
-                            <div :class="'inventory-item ' + getFrameClass(item.type)">
-                                <div class="float-end">
-                                    <img :src="item.icon" :alt="item.name" class="item-icon">
-                                </div>
-                                {{ item.name }}<br/>
-                                x{{ item.quantity }}
-                            </div>
-                        </div>
-                        <div v-if="$store.state.inventory.length === 0">
-                            You don't have any items yet.
-                        </div>
-                    </div>
-                </div>
-
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-pixel-border" data-bs-dismiss="modal">Exit</button>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-import {ItemTypeFrameClasses} from "@/data/ItemTypes";
-
-export default {
-    name: "InventoryDialog",
-    methods: {
-        getFrameClass(type) {
-            return ItemTypeFrameClasses[type];
-        }
-    }
-}
-</script>
-
-<style scoped>
-.item-icon {
-    height: 2.5em;
-}
-
-.inventory-item {
-    font-size: 0.8em;
-    margin-bottom: 1em;
-}
-</style>

src/components/InventoryView.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="container container-fluid" id="main-container">
+        <div class="row">
+            <div class="col-6"
+                 v-for="item in $store.getters.getInventoryWithItemData"
+                 v-bind:key="item"
+                 data-bs-dismiss="modal">
+                <div :class="'inventory-item ' + getFrameClass(item.type)">
+                    <div class="float-end">
+                        <img :src="item.icon" :alt="item.name" class="item-icon">
+                    </div>
+                    {{ item.name }}<br/>
+                    x{{ item.quantity }}
+                </div>
+            </div>
+            <div v-if="$store.state.inventory.length === 0">
+                You don't have any items yet.
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {ItemTypeFrameClasses} from "@/data/ItemTypes";
+
+export default {
+    name: "InventoryView",
+    methods: {
+        getFrameClass(type) {
+            return ItemTypeFrameClasses[type];
+        }
+    }
+}
+</script>
+
+<style scoped>
+#main-container {
+    margin-top: 5em;
+}
+
+.item-icon {
+    height: 2.5em;
+}
+
+.inventory-item {
+    font-size: 0.8em;
+    margin-bottom: 1em;
+    background-color: white;
+    border-radius: 20px;
+}
+</style>

src/components/MenuBar.vue

@@ -5,7 +5,7 @@
         </div>
 
         <div class="menu-item">
-            <a href="javascript:" v-on:click="openModal('inventoryModal')">Inventory</a>
+            <router-link :to="'/inventory'">Inventory</router-link>
         </div>
 
         <div class="menu-center">
@@ -13,7 +13,7 @@
         </div>
 
         <div class="menu-item">
-            Item
+            <router-link :to="'/barn'">Barn</router-link>
         </div>
 
         <div class="menu-item">

src/components/ShopView.vue

@@ -37,7 +37,7 @@ import ItemService from "@/services/ItemService";
 import {ItemTypes} from "@/data/ItemTypes";
 
 export default {
-    name: "ItemShop",
+    name: "ShopView",
     methods: {
         getMaxQuantity(seed) {
             return Math.floor(this.$store.state.player.money / seed.economy.buy).toFixed(0)

src/components/StatusBar.vue

@@ -6,7 +6,7 @@
                 {{ $store.state.time.stamp }} | {{ weekday }}
             </div>
 
-            <div >
+            <div>
                 Money: <span @click="$store.commit('alphaAddMoney')">{{ $store.state.player.money.toLocaleString() }}$</span>
             </div>
         </div>

src/router/index.js

@@ -1,12 +1,13 @@
 import {createRouter, createWebHistory} from 'vue-router'
-import CropField from '@/components/CropField'
-import ItemShop from "@/components/ItemShop";
+import FieldView from '@/components/CropField'
+import ShopView from "@/components/ShopView";
+import InventoryView from "@/components/InventoryView";
 
 const routes = [
     {
         path: '/',
         name: 'field',
-        component: CropField,
+        component: FieldView,
         meta: {
             title: 'Field',
             background: '/assets/backgrounds/grass_summer.png'
@@ -15,12 +16,32 @@ const routes = [
     {
         path: '/shop',
         name: 'shop',
-        component: ItemShop,
+        component: ShopView,
         meta: {
             title: 'Shop',
             background: '/assets/backgrounds/planks.jpg',
             backgroundSize: '20%'
         }
+    },
+    {
+        path: '/inventory',
+        name: 'inventory',
+        component: InventoryView,
+        meta: {
+            title: 'Inventory',
+            background: '/assets/backgrounds/planks.jpg',
+            backgroundSize: '20%'
+        }
+    },
+    {
+        path: '/barn',
+        name: 'barn',
+        component: ShopView,
+        meta: {
+            title: 'Barn',
+            background: '/assets/backgrounds/planks.jpg',
+            backgroundSize: '20%'
+        }
     }
 ]
 
@@ -31,6 +52,7 @@ const router = createRouter({
 
 router.beforeEach((route) => {
     window.setBodyBackground(route.meta.background, route.meta.backgroundSize)
+    window.title = route.meta.title;
 })
 
 export default router

src/views/GameView.vue

@@ -2,18 +2,16 @@
     <StatusBar/>
     <RouterView></RouterView>
     <MenuBar/>
-    <InventoryDialog/>
 </template>
 
 <script>
 import moment from "moment";
 import StatusBar from "@/components/StatusBar";
 import MenuBar from "@/components/MenuBar";
-import InventoryDialog from "@/components/InventoryDialog"
 
 export default {
     name: "GameView",
-    components: {InventoryDialog, MenuBar, StatusBar},
+    components: {MenuBar, StatusBar},
     data() {
         return {
             time: null,