Implement router; fix status bar to top;

package-lock.json

@@ -2584,16 +2584,6 @@
       "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
       "dev": true
     },
-    "node_modules/@popperjs/core": {
-      "version": "2.11.5",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
-      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==",
-      "peer": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
     "node_modules/@sideway/address": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.3.tgz",
@@ -3337,12 +3327,12 @@
       }
     },
     "node_modules/@vue/cli-plugin-router": {
-      "version": "5.0.1",
+      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-router/-/cli-plugin-router-5.0.1.tgz",
+      "resolved": "https://registry.npmmirror.com/@vue/cli-plugin-router/-/cli-plugin-router-5.0.4.tgz",
-      "integrity": "sha512-Eu56AQUEK0uULgIQotZwi5eijYNBS3+znMc0u/kaI1puW3+f/qP3YCtffp5CeVcG2Kxwrx66XBI6PMHg8hPdmA==",
+      "integrity": "sha512-lylzCuH3Br0BcTz5IxxSffpyoF9dQ2k4jTdK8QlWrnRanWGw7P9C0kYMr9rohHaXpvAlu6bio392gbNIWpEepg==",
       "dev": true,
       "dependencies": {
-        "@vue/cli-shared-utils": "^5.0.1"
+        "@vue/cli-shared-utils": "^5.0.4"
       },
       "peerDependencies": {
         "@vue/cli-service": "^3.0.0 || ^4.0.0 || ^5.0.0-0"
@@ -18123,12 +18113,6 @@
       "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
       "dev": true
     },
-    "@popperjs/core": {
-      "version": "2.11.5",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
-      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==",
-      "peer": true
-    },
     "@sideway/address": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.3.tgz",
@@ -18790,12 +18774,12 @@
       }
     },
     "@vue/cli-plugin-router": {
-      "version": "5.0.1",
+      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-router/-/cli-plugin-router-5.0.1.tgz",
+      "resolved": "https://registry.npmmirror.com/@vue/cli-plugin-router/-/cli-plugin-router-5.0.4.tgz",
-      "integrity": "sha512-Eu56AQUEK0uULgIQotZwi5eijYNBS3+znMc0u/kaI1puW3+f/qP3YCtffp5CeVcG2Kxwrx66XBI6PMHg8hPdmA==",
+      "integrity": "sha512-lylzCuH3Br0BcTz5IxxSffpyoF9dQ2k4jTdK8QlWrnRanWGw7P9C0kYMr9rohHaXpvAlu6bio392gbNIWpEepg==",
       "dev": true,
       "requires": {
-        "@vue/cli-shared-utils": "^5.0.1"
+        "@vue/cli-shared-utils": "^5.0.4"
       }
     },
     "@vue/cli-plugin-unit-jest": {
@@ -18828,8 +18812,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-5.0.1.tgz",
       "integrity": "sha512-5J/n+Ht4r2eVuncwCXcZPHzYCz/2haktle4WcggWiKeg3jSQVUJbjviPBs6sOo3y/LG3CEfZMP9bPJjVDbexpQ==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "@vue/cli-service": {
       "version": "5.0.1",
@@ -19159,8 +19142,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/@vue/test-utils/-/test-utils-2.0.0.tgz",
       "integrity": "sha512-zL5kygNq7hONrO1CzaUGprEAklAX+pH8J1MPMCU3Rd2xtSYkZ+PmKU3oEDRg8VAGdL5lNJHzDgrud5amFPtirw==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "@vue/vue-loader-v15": {
       "version": "npm:vue-loader@15.9.8",
@@ -19441,15 +19423,13 @@
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
       "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "acorn-walk": {
       "version": "8.2.0",
@@ -19527,8 +19507,7 @@
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "ansi-colors": {
       "version": "4.1.1",
@@ -19939,8 +19918,7 @@
     "bootstrap": {
       "version": "5.2.0-beta1",
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.0-beta1.tgz",
-      "integrity": "sha512-6qbgs177WZEFY4SLQUq3tEHayYG80nfDmyTpdKi0MJqRMdS+HAoq24+YKfx6wf+nHY0rx8zrh477J1lFu4WzOA==",
+      "integrity": "sha512-6qbgs177WZEFY4SLQUq3tEHayYG80nfDmyTpdKi0MJqRMdS+HAoq24+YKfx6wf+nHY0rx8zrh477J1lFu4WzOA=="
-      "requires": {}
     },
     "bootswatch": {
       "version": "5.1.3",
@@ -20768,8 +20746,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
       "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "csso": {
       "version": "4.2.0",
@@ -22519,8 +22496,7 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
       "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "ieee754": {
       "version": "1.2.1",
@@ -23680,8 +23656,7 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmmirror.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz",
       "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "jest-regex-util": {
       "version": "27.5.1",
@@ -25982,29 +25957,25 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.0.tgz",
       "integrity": "sha512-L0IKF4jAshRyn03SkEO6ar/Ipz2oLywVbg2THf2EqqdNkBwmVMxuTR/RoAltOw4piiaLt3gCAdrbAqmTBInmhg==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "postcss-discard-duplicates": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
       "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "postcss-discard-empty": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.0.tgz",
       "integrity": "sha512-782T/buGgb3HOuHOJAHpdyKzAAKsv/BxWqsutnZ+QsiHEcDkY7v+6WWdturuBiSal6XMOO1p1aJvwXdqLD5vhA==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "postcss-discard-overridden": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
       "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "postcss-loader": {
       "version": "6.2.1",
@@ -26094,8 +26065,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
       "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.0",
@@ -26130,8 +26100,7 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
       "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "postcss-normalize-display-values": {
       "version": "5.1.0",
@@ -28332,8 +28301,7 @@
           "version": "8.5.0",
           "resolved": "https://registry.npmjs.org/ws/-/ws-8.5.0.tgz",
           "integrity": "sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==",
-          "dev": true,
+          "dev": true
-          "requires": {}
         }
       }
     },
@@ -28487,8 +28455,7 @@
       "version": "7.5.7",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.7.tgz",
       "integrity": "sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "xml-name-validator": {
       "version": "3.0.0",

src/components/StatusBar.vue

@@ -28,8 +28,12 @@ export default {
 
 <style scoped>
 #status-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
     font-family: Pixellari, sans-serif;
-    margin: 1em 0.5em;
+    margin: 0;
 }
 
 .time-display {
@@ -37,8 +41,10 @@ export default {
 }
 
 .status-bar-inner {
+    border-top: none;
     text-align: left;
     background-color: white;
-    border-radius: 25px;
+    border-radius: 0 0 25px 25px;
+    padding-top: 0.5em;
 }
 </style>

src/data/Items.js

@@ -1,4 +1,4 @@
-import Seasons from "@/data/Seasons";
+import {Seasons} from "@/services/SeasonService";
 import ItemTypes from "@/data/ItemTypes";
 import {CropAssets} from "@/data/Paths";
 import {Seeds, FieldProducts} from "@/data/ItemsIDs";

src/main.js

@@ -2,5 +2,6 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import store from './store'
 import './style/app.scss'
+import router from './router'
 
-createApp(App).use(store).mount('#app')
+createApp(App).use(router).use(store).mount('#app')

src/router/index.js

@@ -0,0 +1,17 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import CropField from '@/components/CropField'
+
+const routes = [
+  {
+    path: '/',
+    name: 'home',
+    component: CropField
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes
+})
+
+export default router

src/views/GameView.vue

@@ -1,7 +1,7 @@
 <template>
-    <div class="container">
     <StatusBar/>
-        <CropField/>
+    <div class="container overflow-scroll" id="main-container">
+        <RouterView></RouterView>
     </div>
     <MenuBar/>
     <ItemShop/>
@@ -11,14 +11,13 @@
 <script>
 import moment from "moment";
 import StatusBar from "@/components/StatusBar";
-import CropField from "@/components/CropField";
 import MenuBar from "@/components/MenuBar";
 import ItemShop from "@/components/ItemShop";
 import InventoryDialog from "@/components/InventoryDialog"
 
 export default {
     name: "GameView",
-    components: {InventoryDialog, ItemShop, MenuBar, CropField, StatusBar},
+    components: {InventoryDialog, ItemShop, MenuBar, StatusBar},
     data() {
         return {
             time: null,
@@ -68,5 +67,7 @@ export default {
 </script>
 
 <style scoped>
-
+#main-container {
+    padding-top: 4.5em;
+}
 </style>