Item info modal;

concept.md

@@ -27,17 +27,18 @@
 - [x] Stores
   - [ ] Each store has tabs [buy / sell]
   - [ ] Depending on store-itemtype, sell-price is 100% or 70%
-  - [ ] Crop-Store
+  - [x] Crop-Store
   - [ ] Animal Store
   - [ ] Machine Store (crafting machines)
   - [ ] Different operation hours for each store
   - [ ] Pixel-art counters / storefronts with shopkeepers
-    - [ ] purchases and failed purchases (no $) trigger emotions on the shopkeepers
+    - [ ] purchases and failed purchases (no $) trigger emotion-bubbles on the shopkeepers
     - [ ] text-boxes for greetings
 - [x] Inventory system
   - [x] Sorting
   - [x] Grouping
   - [ ] Trash items
+  - [ ] Display item-info
 - [ ] Way to sell harvested goods
 - [ ] Quests
   - [ ] Item-quests

src/components/CropField.vue

@@ -14,7 +14,7 @@
 
         <div class="modal fade" id="cropInventoryModal" tabindex="-1" aria-labelledby="cropInventoryModalLabel"
              aria-hidden="true">
-            <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-dialog modal-dialog-centered modal-sm">
                 <div class="modal-content steel-border">
                     <div class="modal-body">
                         <div class="row">
@@ -49,9 +49,15 @@
 <script>
 import Modal from 'bootstrap/js/src/modal'
 import ItemService from "@/services/ItemService";
+import iziToast from "izitoast";
 
 export default {
     name: "CropField",
+    data() {
+        return {
+            selectedItem: null
+        }
+    },
     computed: {
         fields() {
             return this.$store.state.cropField;
@@ -63,6 +69,13 @@ export default {
                 this.selectSeed(field.id);
             } else if (field.data.readyForHarvest) {
                 this.harvestField(field);
+            } else if (!field.data.readyForHarvest) {
+                let seed = ItemService.getItemByID(field.data.crop_id)
+                console.log(seed)
+
+                iziToast.info({
+                    title: 'KUCHEN'
+                })
             }
         },
         selectSeed(id) {

src/components/CropShopView.vue

@@ -186,9 +186,4 @@ export default {
     margin: 0 0.1em;
     display: inline-block;
 }
-
-.number-marker {
-    color: green;
-    text-decoration: underline;
-}
 </style>

src/components/InventoryView.vue

@@ -4,24 +4,30 @@
             <div class="col-12">
                 <div class="float-end" id="sort-buttons">
                     <div class="pixel-border-static" v-on:click="$store.commit('toggleGrouping')">
-                        Group by category
+                        {{ $store.state.groupInventory ? 'Group by category' : 'List all'}}
                     </div>
 
                     <div class="pixel-border-static" v-on:click="$store.commit('sortInventory')">
-                        Sort {{ $store.state.inventorySortDesc ? 'Z-A' : 'A-Z' }}
+                        {{ $store.state.inventorySortDesc ? 'A-Z' : 'Z-A' }}
+                    </div>
+
+                    <div class="pixel-border-static" v-on:click="$store.commit('sortInventoryByQuantity')">
+                        QNTY
                     </div>
                 </div>
             </div>
             <template v-if="$store.state.groupInventory">
-                <template v-if="$store.getters.getSeedsInInventory.length > 0">
+                <template v-for="category in categories" v-bind:key="category.name">
+                    <template v-if="category.items.length > 0">
                         <div class="col-12 inventory-header">
-                        <h5>Seeds</h5>
+                            <h5>{{ category.name }}</h5>
                         </div>
+
                         <div class="col-6"
-                         v-for="item in $store.getters.getSeedsInInventory"
+                             v-for="item in category.items"
                              v-bind:key="item"
                              data-bs-dismiss="modal">
-                        <div :class="'inventory-item ' + getFrameClass(item.type)">
+                            <div :class="'inventory-item ' + getFrameClass(item.type)" v-on:click="showItemInfo(item)">
                                 <div class="float-end">
                                     <img :src="item.icon" :alt="item.name" class="item-icon">
                                 </div>
@@ -30,15 +36,14 @@
                             </div>
                         </div>
                     </template>
-                <template v-if="$store.getters.getFieldProductsInInventory.length > 0">
+                </template>
-                    <div class="col-12 inventory-header">
+            </template>
-                        <h5>Field products</h5>
+            <template v-else>
-                    </div>
                 <div class="col-6"
-                         v-for="item in $store.getters.getFieldProductsInInventory"
+                     v-for="item in $store.getters.getInventoryWithItemData"
                      v-bind:key="item"
                      data-bs-dismiss="modal">
-                        <div :class="'inventory-item ' + getFrameClass(item.type)">
+                    <div :class="'inventory-item ' + getFrameClass(item.type)" v-on:click="showItemInfo(item)">
                         <div class="float-end">
                             <img :src="item.icon" :alt="item.name" class="item-icon">
                         </div>
@@ -47,53 +52,102 @@
                     </div>
                 </div>
             </template>
-                <template v-if="$store.getters.getAnimalProductsInInventory.length > 0">
+            <div v-if="$store.state.inventory.length === 0">
-                    <div class="col-12 inventory-header">
+                Your inventory is empty.
-                        <h5>Animal products</h5>
             </div>
-                    <div class="col-6"
+        </div>
-                         v-for="item in $store.getters.getAnimalProductsInInventory"
+
-                         v-bind:key="item"
+        <div class="modal fade" id="itemInfoModal" tabindex="-1" aria-labelledby="itemInfoModalLabel" aria-hidden="true">
-                         data-bs-dismiss="modal">
+            <div class="modal-dialog modal-dialog-centered">
-                        <div :class="'inventory-item ' + getFrameClass(item.type)">
+                <div class="modal-content steel-border" v-if="selectedItem">
+                    <div class="modal-header">
+                        <div class="float-start">
+                            <img :src="selectedItem.icon" :alt="selectedItem.name" class="item-icon">
+                            {{ selectedItem.name }}
+                        </div>
+                    </div>
+                    <div class="modal-body" v-if="selectedItem">
+                        <div class="row">
+                            <div class="col-12" v-if="selectedItem.description" v-html="selectedItem.description">
+
+                            </div>
+                            <div class="col-12" v-if="selectedItem.cropData">
                                 <div class="float-end">
-                                <img :src="item.icon" :alt="item.name" class="item-icon">
+                                    <img :src="selectedSeedFieldProductIcon" alt="">
                                 </div>
-                            {{ item.name }}<br/>
+                                <small class="text-muted">Seed info</small><br/>
-                            x{{ item.quantity }}
+                                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.
+                                <hr>
                             </div>
+                            <div class="col-12" v-if="selectedItem.cropData">
+                                <div class="float-end">
+                                    <img :src="selectedSeedFieldProductIcon" alt="">
                                 </div>
-                </template>
+                                <small class="text-muted">Seed info</small><br/>
-            </template>
+                                Sells for <span class="number-marker">{{ selectedItem.economy.sell }}$</span> when harvested.<br/>
-            <template v-else>
+                                Takes <span class="number-marker">{{ selectedItem.cropData.timeToGrow }}</span> minutes to grow.
-                <div class="col-6"
+                            </div>
-                     v-for="item in $store.getters.getInventoryWithItemData"
+                        </div>
-                     v-bind:key="item"
+                    </div>
-                     data-bs-dismiss="modal">
+                    <div class="modal-footer">
-                    <div :class="'inventory-item ' + getFrameClass(item.type)">
                         <div class="float-end">
-                            <img :src="item.icon" :alt="item.name" class="item-icon">
+                            <div class="btn-pixel" data-bs-dismiss="modal">
+                                Close
+                            </div>
                         </div>
-                        {{ item.name }}<br/>
-                        x{{ item.quantity }}
                     </div>
                 </div>
-            </template>
-            <div v-if="$store.state.inventory.length === 0">
-                Your inventory is empty.
             </div>
         </div>
     </div>
 </template>
 
 <script>
-import {ItemTypeFrameClasses} from "@/data/ItemTypes";
+import {ItemTypeFrameClasses, ItemTypes} from "@/data/ItemTypes";
+import {openModal} from "@/helpers";
+import ItemService from "@/services/ItemService";
 
 export default {
     name: "InventoryView",
+    data() {
+        return {
+            selectedItem: null,
+        }
+    },
+    computed: {
+        categories() {
+            return [
+                {
+                    name: 'Seeds',
+                    type: ItemTypes.Seeds,
+                    items: this.$store.getters.getSeedsInInventory
+                },
+                {
+                    name: 'Field products',
+                    type: ItemTypes.FieldProducts,
+                    items: this.$store.getters.getFieldProductsInInventory
+                },
+                {
+                    name: 'Animal products',
+                    type: ItemTypes.AnimalProducts,
+                    items: this.$store.getters.getAnimalProductsInInventory
+                }
+            ]
+        },
+        selectedSeedFieldProductIcon() {
+            let product = ItemService.getItemByID(this.selectedItem.cropData.product_id);
+            return product.icon;
+        }
+    },
     methods: {
         getFrameClass(type) {
             return ItemTypeFrameClasses[type];
+        },
+        showItemInfo(item) {
+            this.selectedItem = item;
+            openModal('itemInfoModal');
+            console.log(item);
         }
     }
 }
@@ -129,7 +183,7 @@ export default {
     color: white;
 }
 
-.pixel-border-static {
+#sort-buttons .pixel-border-static, #sort-buttons .pixel-border-red, #sort-buttons .pixel-border-green {
     margin-left: 0.3em;
     display: inline-block;
     background-color: white;

src/data/Items.js

@@ -559,7 +559,12 @@ export default [
         id: AnimalProducts.Egg,
         name: 'Egg',
         type: ItemTypes.AnimalProducts,
-        description: '',
+        description: '<iframe\n' +
+            '    src="https://player.twitch.tv/?channel=mobula_birostris&parent=stingl.dev"\n' +
+            '    height="300px"\n' +
+            '    width="100%"\n' +
+            '    allowfullscreen>\n' +
+            '</iframe>',
         assetsFolder: FoodAssets + 'egg_whole_brown.png',
         icon: FoodAssets + 'egg_whole_brown.png',
         economy: {

src/helpers.js

@@ -1,6 +1,6 @@
 import Modal from "bootstrap/js/src/modal";
 
 export const openModal = (modalName) => {
-    const modal = new Modal(document.getElementById(modalName))
+    let modal = new Modal(document.getElementById(modalName))
     modal.toggle();
 }

src/store/index.js

@@ -27,6 +27,7 @@ export default createStore({
         },
         inventory: [],
         inventorySortDesc: true,
+        inventorySortQntyDesc: true,
         groupInventory: false,
         cropField: [],
         selections: {
@@ -240,6 +241,17 @@ export default createStore({
 
             state.inventorySortDesc = !state.inventorySortDesc;
         },
+        sortInventoryByQuantity(state) {
+            state.inventory = state.inventory.sort((a, b) => {
+                if (state.inventorySortQntyDesc === true) {
+                    return (b.quantity > a.quantity) ? 1 : -1;
+                } else {
+                    return (a.quantity < b.quantity) ? -1 : 1;
+                }
+            });
+
+            state.inventorySortQntyDesc = !state.inventorySortQntyDesc;
+        },
         toggleGrouping(state) {
             state.groupInventory = !state.groupInventory;
         }

src/style/app.scss

@@ -14,3 +14,8 @@ body {
 .text-right {
     text-align: right;
 }
+
+.number-marker {
+    color: green;
+    text-decoration: underline;
+}