crop-inventory onclick on field;

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "axios": "^0.26.1",
+        "bootstrap": "^5.2.0-beta1",
         "bootswatch": "^5.1.3",
         "core-js": "^3.8.3",
         "moment": "^2.29.3",
@@ -2582,6 +2583,16 @@
       "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",
@@ -4784,6 +4795,24 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "node_modules/bootstrap": {
+      "version": "5.2.0-beta1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.0-beta1.tgz",
+      "integrity": "sha512-6qbgs177WZEFY4SLQUq3tEHayYG80nfDmyTpdKi0MJqRMdS+HAoq24+YKfx6wf+nHY0rx8zrh477J1lFu4WzOA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.5"
+      }
+    },
     "node_modules/bootswatch": {
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/bootswatch/-/bootswatch-5.1.3.tgz",
@@ -18088,6 +18117,12 @@
       "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",
@@ -19895,6 +19930,12 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "bootstrap": {
+      "version": "5.2.0-beta1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.0-beta1.tgz",
+      "integrity": "sha512-6qbgs177WZEFY4SLQUq3tEHayYG80nfDmyTpdKi0MJqRMdS+HAoq24+YKfx6wf+nHY0rx8zrh477J1lFu4WzOA==",
+      "requires": {}
+    },
     "bootswatch": {
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/bootswatch/-/bootswatch-5.1.3.tgz",

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "axios": "^0.26.1",
+    "bootstrap": "^5.2.0-beta1",
     "bootswatch": "^5.1.3",
     "core-js": "^3.8.3",
     "moment": "^2.29.3",

src/components/CropField.vue

@@ -10,6 +10,8 @@
 </template>
 
 <script>
+import Modal from 'bootstrap/js/src/modal'
+
 export default {
     name: "CropField",
     computed: {
@@ -19,8 +21,10 @@ export default {
     },
     methods: {
         plant(id) {
-            id;
-
+            this.$store.commit('selectField', id);
+            const modal = new Modal(document.getElementById('cropInventoryModal'))
+            modal.toggle();
+            return modal;
         }
     }
 }

src/components/CropInventory.vue

@@ -1,14 +1,16 @@
 <template>
     <div class="modal fade" id="cropInventoryModal" tabindex="-1" aria-labelledby="cropInventoryModalLabel" aria-hidden="true">
-        <div class="modal-dialog">
+        <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title" id="cropInventoryModalLabel">Select a crop to be planted</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
+
                 <div class="modal-body">
                     No crops yet
                 </div>
+
                 <div class="modal-footer">
                     <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                     <button type="button" class="btn btn-primary">Save changes</button>

src/store/index.js

@@ -17,7 +17,11 @@ export default createStore({
             weekdayNr: null
         },
         inventory: [],
-        cropField: []
+        cropField: [],
+        selections: {
+            field: null,
+            item: null
+        }
     },
     getters: {},
     mutations: {
@@ -42,6 +46,9 @@ export default createStore({
                     id: fieldIndex
                 });
             }
+        },
+        selectField(state, id) {
+            state.selections.field = id;
         }
     },
     actions: {},

src/views/GameView.vue

@@ -4,6 +4,7 @@
         <CropField/>
     </div>
     <MenuBar/>
+    <CropInventory/>
 </template>
 
 <script>
@@ -11,10 +12,11 @@ import StatusBar from "@/components/StatusBar";
 import CropField from "@/components/CropField";
 import moment from "moment";
 import MenuBar from "@/components/MenuBar";
+import CropInventory from "@/components/CropInventory";
 
 export default {
     name: "GameView",
-    components: {MenuBar, CropField, StatusBar},
+    components: {CropInventory, MenuBar, CropField, StatusBar},
     data() {
         return {
             time: null,