From 8f59abbd1e35e2237f47bd2f7a5ddc72f16fe098 Mon Sep 17 00:00:00 2001
From: Nero Ignis <neroignis@gmail.com>
Date: Sat, 21 May 2022 19:49:17 +0200
Subject: [PATCH] crop-inventory onclick on field;

---
 package-lock.json                | 41 ++++++++++++++++++++++++++++++++
 package.json                     |  1 +
 src/components/CropField.vue     |  8 +++++--
 src/components/CropInventory.vue |  4 +++-
 src/store/index.js               |  9 ++++++-
 src/views/GameView.vue           |  4 +++-
 6 files changed, 62 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 08bc155..9b02767 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 001593b..85aa112 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/CropField.vue b/src/components/CropField.vue
index 20fd2ae..b09bf2d 100644
--- a/src/components/CropField.vue
+++ b/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;
         }
     }
 }
diff --git a/src/components/CropInventory.vue b/src/components/CropInventory.vue
index f130763..0ee92d8 100644
--- a/src/components/CropInventory.vue
+++ b/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>
diff --git a/src/store/index.js b/src/store/index.js
index b07e9ab..b3921c3 100644
--- a/src/store/index.js
+++ b/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: {},
diff --git a/src/views/GameView.vue b/src/views/GameView.vue
index 1bffc6f..c009faa 100644
--- a/src/views/GameView.vue
+++ b/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,