diff --git a/src/assets/gui/btn_danger.png b/src/assets/gui/btn_danger.png new file mode 100644 index 0000000..de861b6 Binary files /dev/null and b/src/assets/gui/btn_danger.png differ diff --git a/src/assets/gui/btn_danger_light.png b/src/assets/gui/btn_danger_light.png new file mode 100644 index 0000000..c115490 Binary files /dev/null and b/src/assets/gui/btn_danger_light.png differ diff --git a/src/assets/gui/btn_danger_pressed.png b/src/assets/gui/btn_danger_pressed.png new file mode 100644 index 0000000..a63fd33 Binary files /dev/null and b/src/assets/gui/btn_danger_pressed.png differ diff --git a/src/components/InventoryView.vue b/src/components/InventoryView.vue index 63b08b4..9fd62b6 100644 --- a/src/components/InventoryView.vue +++ b/src/components/InventoryView.vue @@ -80,13 +80,15 @@ Takes {{ selectedItem.cropData.timeToGrow }} minutes to grow.
-
-
- +
+
+
+ +
+
+
Trash
+
- Seed info
- Sells for {{ selectedItem.economy.sell }}$ when harvested.
- Takes {{ selectedItem.cropData.timeToGrow }} minutes to grow.
@@ -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% +} \ No newline at end of file diff --git a/src/store/index.js b/src/store/index.js index 696b83a..06c6b1c 100644 --- a/src/store/index.js +++ b/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; diff --git a/src/style/_gui-elements.scss b/src/style/_gui-elements.scss index 5b081e3..2229488 100644 --- a/src/style/_gui-elements.scss +++ b/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;