items can be trashed; add danger-button;

src/components/InventoryView.vue

@@ -80,13 +80,15 @@
                                 Takes <span class="number-marker">{{ selectedItem.cropData.timeToGrow }}</span> minutes to grow.
                                 <hr>
                             </div>
-                            <div class="col-12" v-if="selectedItem.cropData">
+                            <div class="col-12 trash-section">
-                                <div class="float-end">
+                                <div class="row">
-                                    <img :src="selectedSeedFieldProductIcon" alt="">
+                                    <div class="col-8">
+                                        <input type="number" class="trash-quantity-input pixel-border-red" v-model="trashQuantity">
+                                    </div>
+                                    <div class="col-4">
+                                        <div class="btn btn-sm btn-pixel-danger col-4" v-on:click="trashItems()" data-bs-dismiss="modal">Trash</div>
+                                    </div>
                                 </div>
-                                <small class="text-muted">Seed info</small><br/>
-                                Sells for <span class="number-marker">{{ selectedItem.economy.sell }}$</span> when harvested.<br/>
-                                Takes <span class="number-marker">{{ selectedItem.cropData.timeToGrow }}</span> minutes to grow.
                             </div>
                         </div>
                     </div>
@@ -107,12 +109,14 @@
 import {ItemTypeFrameClasses, ItemTypes} from "@/data/ItemTypes";
 import {openModal} from "@/helpers";
 import ItemService from "@/services/ItemService";
+import iziToast from "izitoast";
 
 export default {
     name: "InventoryView",
     data() {
         return {
             selectedItem: null,
+            trashQuantity: 0
         }
     },
     computed: {
@@ -140,6 +144,17 @@ export default {
             return product.icon;
         }
     },
+    watch: {
+        trashQuantity() {
+            if (this.trashQuantity > this.selectedItem.quantity) {
+                this.trashQuantity = this.selectedItem.quantity;
+            }
+
+            if (this.trashQuantity < 0) {
+                this.trashQuantity = 0;
+            }
+        }
+    },
     methods: {
         getFrameClass(type) {
             return ItemTypeFrameClasses[type];
@@ -148,6 +163,14 @@ export default {
             this.selectedItem = item;
             openModal('itemInfoModal');
             console.log(item);
+        },
+        trashItems() {
+            this.$store.commit('removeItemFromInventory', {item: this.selectedItem, quantity: this.trashQuantity});
+            iziToast.success({
+                title: 'Threw away '+this.trashQuantity+' of '+this.selectedItem.name
+            });
+
+            this.trashQuantity = 0;
         }
     }
 }
@@ -190,4 +213,14 @@ export default {
     border-radius: 20px;
     color: black;
 }
+
+.trash-quantity-input {
+    text-align: right;
+    max-width: 100%;
+    height: 2.7em;
+}
+
+.trash-section .col-8 *, .trash-section .col-4 * {
+    width: 100%
+}
 </style>

src/store/index.js

@@ -196,7 +196,7 @@ export default createStore({
         removeItemFromInventory(state, props = {item: Object, quantity: Number}) {
             let itemInInventory = state.inventory.find((inventoryItem) => {
                 return inventoryItem.id === props.item.id;
-            })
+            });
 
             if (itemInInventory) {
                 itemInInventory.quantity -= props.quantity;

src/style/_gui-elements.scss

@@ -73,6 +73,24 @@
     border-image: url('@/assets/gui/btn_light_pressed.png') 15 repeat;
 }
 
+.btn-pixel-danger {
+    margin-bottom: 5px;
+    padding: 0 15px;
+
+    background-color: #C97E6A;
+    border: 12px solid transparent;
+    border-radius: 7px;
+    border-image: url('@/assets/gui/btn_danger.png') 15 repeat;
+}
+
+.btn-pixel-danger:hover {
+    border-image: url('@/assets/gui/btn_danger_light.png') 15 repeat;
+}
+
+.btn-pixel-danger:active {
+    border-image: url('@/assets/gui/btn_danger_pressed.png') 15 repeat;
+}
+
 .btn-pixel-mono {
     margin-bottom: 5px;
     padding: 0 15px;