implement harvesting; fix flooring bug with max-value in shop; change shop design (again); add first finished products;

src/components/CropField.vue

@@ -1,8 +1,7 @@
 <template>
     <div class="row grass-border" id="field">
         <div :class="'crop-field '+(!field.data ? 'empty' : '')"
-             v-on:click="selectSeed(field.id)"
+             v-on:click="interactWithField(field)"
-             v-on:contextmenu="cropInformation(field.id);"
              v-for="field in fields"
              v-bind:key="field.id">
             <img v-if="field.data" class="planted-field" :src="getCropAsset(field)"/>
@@ -27,8 +26,12 @@
                              v-bind:key="seed"
                              data-bs-dismiss="modal">
                             <div v-on:click="plantSeed(seed)">
+                                <div class="float-end">
                                     <img :src="seed.assetsFolder+'/6.png'" :alt="seed.name">
-                                {{ seed.name }}
+                                </div>
+                                {{ seed.name }}<br/>
+                                {{ seed.cropData.timeToGrow }} minutes<br/>
+                                ({{ seed.quantity }} left)
                             </div>
                         </div>
                         <div v-if="!$store.getters.getSeedsInInventory.length">
@@ -56,6 +59,13 @@ export default {
         }
     },
     methods: {
+        interactWithField(field) {
+            if (!field.data) {
+                this.selectSeed(field.id);
+            } else if (field.data.readyForHarvest) {
+                this.harvestField(field);
+            }
+        },
         selectSeed(id) {
             this.$store.commit('selectField', id);
             const modal = new Modal(document.getElementById('cropInventoryModal'))
@@ -64,17 +74,20 @@ export default {
         plantSeed(seed) {
             this.$store.commit('plantSeed', seed);
         },
-        cropInformation(id) {
+        harvestField(field) {
-            this.$store.commit('selectField', id);
+            this.$store.commit('harvestSeed', field);
-
-            if (!this.$store.getters.selectedField.data) {
-                return false;
-            }
-
-            const modal = new Modal(document.getElementById('cropInformationModal'))
-            modal.toggle();
-            return false;
         },
+        // cropInformation(id) {
+        //     this.$store.commit('selectField', id);
+        //
+        //     if (!this.$store.getters.selectedField.data) {
+        //         return false;
+        //     }
+        //
+        //     const modal = new Modal(document.getElementById('cropInformationModal'))
+        //     modal.toggle();
+        //     return false;
+        // },
         getCropAsset(field) {
             let seed = this.$store.state.itemCatalogue.find((item) => {
                 return item.id === field.data.seed_id;

src/components/ItemShop.vue

@@ -7,23 +7,32 @@
                 </div>
 
                 <div class="modal-body">
-                    <div class="row">
+                    <div class="row" v-for="seed in $store.getters.getSeedsFromCatalogue" v-bind:key="seed">
-                        <div class="col-12 seed-card" v-for="seed in $store.getters.getSeedsFromCatalogue" v-bind:key="seed">
+                        <div class="col-12 seed-card">
-                            <div class="float-end">
-                                <a href="javascript:" v-on:click="$store.commit('buyItem', {item: seed, quantity: 1})" class="btn btn-sm btn-pixel-border">Buy 1</a>
-                                <a href="javascript:" v-on:click="$store.commit('buyItem', {item: seed, quantity: 5})" class="btn btn-sm btn-pixel-border">Buy 5</a>
-                            </div>
-                            <div class="row">
-                                <div class="col-12">
                             <div class="float-end">
                                 <img :src="seed.assetsFolder+'/6.png'" class="seed-icon" :alt="seed.name">
                             </div>
                             {{ seed.name }}<br/>
-                                    Costs {{ seed.economy.buy }}$<br>
+                            Costs {{ seed.economy.buy }}$, Sells for {{ seed.economy.sell }}$ when harvested<br>
-                                    Sells for {{ seed.economy.sell }}$ when harvested<br>
+                            Takes {{ seed.cropData.timeToGrow }} minutes to grow
                         </div>
+                        <div class="col-4">
+                            <a href="javascript:" data-bs-dismiss="modal"
+                               v-on:click="$store.commit('buyItem', {item: seed, quantity: 1})"
+                               class="btn btn-sm btn-pixel-border">Buy 1</a>
+
                         </div>
+                        <div class="col-4">
+                            <a href="javascript:" data-bs-dismiss="modal"
+                               v-on:click="$store.commit('buyItem', {item: seed, quantity: 5})"
+                               class="btn btn-sm btn-pixel-border">Buy 5</a>
                         </div>
+                        <div class="col-4">
+                            <a href="javascript:" data-bs-dismiss="modal"
+                               v-on:click="$store.commit('buyItem', {item: seed, quantity: getMaxQuantity(seed)})"
+                               class="btn btn-sm btn-pixel-border">Buy {{ getMaxQuantity(seed) }}</a>
+                        </div>
+                        <hr>
                     </div>
                 </div>
 
@@ -38,7 +47,12 @@
 <script>
 
 export default {
-    name: "ItemShop"
+    name: "ItemShop",
+    methods: {
+        getMaxQuantity(seed) {
+            return Math.floor(this.$store.state.player.money / seed.economy.buy).toFixed(0)
+        }
+    }
 }
 </script>
 
@@ -60,4 +74,12 @@ export default {
     padding-right: 0;
     width: 100%;
 }
+
+.buy-buttons a {
+    width: 100%;
+}
+
+hr {
+    margin-top: 1em;
+}
 </style>

src/data/Items.js

@@ -14,7 +14,19 @@ export default [
         },
         cropData: {
             timeToGrow: 1,
-            season: Seasons.Summer
+            season: Seasons.Summer,
+            product_id: 2
+        }
+    },
+    {
+        name: 'Wheat',
+        type: ItemTypes.FieldProducts,
+        description: '',
+        assetsFolder: CropAssets + 'wheat/',
+        icon: CropAssets + 'wheat/6.png',
+        economy: {
+            buy: 5,
+            sell: 10
         }
     },
     {
@@ -28,7 +40,19 @@ export default [
         },
         cropData: {
             timeToGrow: 2,
-            season: Seasons.Summer
+            season: Seasons.Summer,
+            product_id: 4
+        }
+    },
+    {
+        name: 'Rice',
+        type: ItemTypes.FieldProducts,
+        description: '',
+        assetsFolder: CropAssets + 'rice/',
+        icon: CropAssets + 'rice/6.png',
+        economy: {
+            buy: 5,
+            sell: 10,
         }
     },
     {

src/store/index.js

@@ -42,6 +42,18 @@ export default createStore({
                 return seed.id = this.getters.selectedField.data.seed_id;
             });
         },
+        getInventoryWithItemData(state) {
+            return state.inventory.filter((inventoryItem) => {
+                return inventoryItem.quantity > 0;
+            }).map((inventoryItem) => {
+                let item = state.itemCatalogue.find((item) => {
+                    return item.id === inventoryItem.id;
+                });
+
+                item.quantity = inventoryItem.quantity;
+                return item;
+            });
+        },
         getSeedsInInventory(state) {
             return state.inventory.filter((inventoryItem) => {
                 return inventoryItem.type === ItemTypes.Seeds && inventoryItem.quantity > 0;
@@ -119,6 +131,27 @@ export default createStore({
                 quantity: 1
             });
         },
+        harvestSeed(state, field) {
+            let seed = state.itemCatalogue.find((item) => {
+                return item.id === field.data.seed_id;
+            });
+
+            let productFromSeed = state.itemCatalogue.find((item) => {
+                return item.id === seed.cropData.product_id;
+            });
+
+            if (field.data.percentDone < 100 || !field.data.readyForHarvest) {
+                // bloody cheater
+                return false;
+            }
+
+            this.commit('addItemToInventory', {
+                item: productFromSeed,
+                quantity: 1
+            });
+
+            field.data = null;
+        },
         checkForSeasonChange(state) {
             let prevDate = state.initialized;
 

src/views/GameView.vue

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