Add inventory sorting / grouping; add empty button asset;

src/components/InventoryView.vue

@@ -1,20 +1,86 @@
 <template>
     <div class="container container-fluid" id="main-container">
         <div class="row">
-            <div class="col-6"
+            <div class="col-12">
-                 v-for="item in $store.getters.getInventoryWithItemData"
+                <div class="float-end" id="sort-buttons">
-                 v-bind:key="item"
+                    <div class="pixel-border-static" v-on:click="$store.commit('toggleGrouping')">
-                 data-bs-dismiss="modal">
+                        Group by category
-                <div :class="'inventory-item ' + getFrameClass(item.type)">
+                    </div>
-                    <div class="float-end">
+
-                        <img :src="item.icon" :alt="item.name" class="item-icon">
+                    <div class="pixel-border-static" v-on:click="$store.commit('sortInventory')">
-                    </div>
+                        Sort {{ $store.state.inventorySortDesc ? 'Z-A' : 'A-Z' }}
-                    {{ item.name }}<br/>
+                    </div>
-                    x{{ item.quantity }}
                 </div>
             </div>
+            <template v-if="$store.state.groupInventory">
+                <template v-if="$store.getters.getSeedsInInventory.length > 0">
+                    <div class="col-12 inventory-header">
+                        <h5>Seeds</h5>
+                    </div>
+                    <div class="col-6"
+                         v-for="item in $store.getters.getSeedsInInventory"
+                         v-bind:key="item"
+                         data-bs-dismiss="modal">
+                        <div :class="'inventory-item ' + getFrameClass(item.type)">
+                            <div class="float-end">
+                                <img :src="item.icon" :alt="item.name" class="item-icon">
+                            </div>
+                            {{ item.name }}<br/>
+                            x{{ item.quantity }}
+                        </div>
+                    </div>
+                </template>
+                <template v-if="$store.getters.getFieldProductsInInventory.length > 0">
+                    <div class="col-12 inventory-header">
+                        <h5>Field products</h5>
+                    </div>
+                    <div class="col-6"
+                         v-for="item in $store.getters.getFieldProductsInInventory"
+                         v-bind:key="item"
+                         data-bs-dismiss="modal">
+                        <div :class="'inventory-item ' + getFrameClass(item.type)">
+                            <div class="float-end">
+                                <img :src="item.icon" :alt="item.name" class="item-icon">
+                            </div>
+                            {{ item.name }}<br/>
+                            x{{ item.quantity }}
+                        </div>
+                    </div>
+                </template>
+                <template v-if="$store.getters.getAnimalProductsInInventory.length > 0">
+                    <div class="col-12 inventory-header">
+                        <h5>Animal products</h5>
+                    </div>
+                    <div class="col-6"
+                         v-for="item in $store.getters.getAnimalProductsInInventory"
+                         v-bind:key="item"
+                         data-bs-dismiss="modal">
+                        <div :class="'inventory-item ' + getFrameClass(item.type)">
+                            <div class="float-end">
+                                <img :src="item.icon" :alt="item.name" class="item-icon">
+                            </div>
+                            {{ item.name }}<br/>
+                            x{{ item.quantity }}
+                        </div>
+                    </div>
+                </template>
+            </template>
+            <template v-else>
+                <div class="col-6"
+                     v-for="item in $store.getters.getInventoryWithItemData"
+                     v-bind:key="item"
+                     data-bs-dismiss="modal">
+                    <div :class="'inventory-item ' + getFrameClass(item.type)">
+                        <div class="float-end">
+                            <img :src="item.icon" :alt="item.name" class="item-icon">
+                        </div>
+                        {{ item.name }}<br/>
+                        x{{ item.quantity }}
+                    </div>
+                </div>
+            </template>
             <div v-if="$store.state.inventory.length === 0">
-                You don't have any items yet.
+                Your inventory is empty.
             </div>
         </div>
     </div>
@@ -36,6 +102,7 @@ export default {
 <style scoped>
 #main-container {
     margin-top: 5em;
+    margin-bottom: 5em;
 }
 
 .item-icon {
@@ -48,4 +115,25 @@ export default {
     background-color: white;
     border-radius: 20px;
 }
+
+#sort-buttons {
+    color: white;
+    margin-bottom: 1em;
+}
+
+#sort-buttons img {
+    margin-left: 0.3em;
+}
+
+.inventory-header {
+    color: white;
+}
+
+.pixel-border-static {
+    margin-left: 0.3em;
+    display: inline-block;
+    background-color: white;
+    border-radius: 20px;
+    color: black;
+}
 </style>

src/store/index.js

@@ -26,6 +26,8 @@ export default createStore({
             weekdayNr: null
         },
         inventory: [],
+        inventorySortDesc: true,
+        groupInventory: false,
         cropField: [],
         selections: {
             field: null,
@@ -46,7 +48,7 @@ export default createStore({
 
                 item.quantity = inventoryItem.quantity;
                 return item;
-            });
+            }) ?? [];
         },
         getSeedsInInventory(state) {
             return state.inventory.filter((inventoryItem) => {
@@ -56,7 +58,27 @@ export default createStore({
 
                 item.quantity = inventoryItem.quantity;
                 return item;
-            });
+            }) ?? [];
+        },
+        getFieldProductsInInventory(state) {
+            return state.inventory.filter((inventoryItem) => {
+                return inventoryItem.type === ItemTypes.FieldProducts && inventoryItem.quantity > 0;
+            }).map((inventoryItem) => {
+                let item = ItemService.getItemByID(inventoryItem.id);
+
+                item.quantity = inventoryItem.quantity;
+                return item;
+            }) ?? [];
+        },
+        getAnimalProductsInInventory(state) {
+            return state.inventory.filter((inventoryItem) => {
+                return inventoryItem.type === ItemTypes.AnimalProducts && inventoryItem.quantity > 0;
+            }).map((inventoryItem) => {
+                let item = ItemService.getItemByID(inventoryItem.id);
+
+                item.quantity = inventoryItem.quantity;
+                return item;
+            }) ?? [];
         }
     },
     mutations: {
@@ -77,7 +99,7 @@ export default createStore({
         generateField(state) {
             let fieldIndex = 0;
 
-            while(state.cropField.length < state.player.unlocked.fields) {
+            while (state.cropField.length < state.player.unlocked.fields) {
                 fieldIndex++;
 
                 state.cropField.push({
@@ -86,7 +108,7 @@ export default createStore({
             }
         },
         selectField(state, id) {
-            console.debug('select field with id '+id)
+            console.debug('select field with id ' + id)
             state.selections.field = id;
         },
         plantSeed(state, seed) {
@@ -138,7 +160,7 @@ export default createStore({
 
             if (purchasePrice > state.player.money) {
                 iziToast.error({
-                    title: "Not enough money to buy "+props.quantity+" of "+props.item.name
+                    title: "Not enough money to buy " + props.quantity + " of " + props.item.name
                 });
                 return false;
             }
@@ -151,7 +173,7 @@ export default createStore({
             state.player.money -= purchasePrice;
 
             iziToast.success({
-                title: 'Purchased '+props.item.name+(props.quantity > 1 ? ' ('+props.quantity+')' : '')
+                title: 'Purchased ' + props.item.name + (props.quantity > 1 ? ' (' + props.quantity + ')' : '')
             });
         },
         addItemToInventory(state, props = {item: Object, quantity: Number}) {
@@ -203,6 +225,23 @@ export default createStore({
         },
         alphaAddMoney(state) {
             state.player.money = Number(state.player.money) + Number(1_000);
+        },
+        sortInventory(state) {
+            state.inventory = state.inventory.sort((a, b) => {
+                let aItem = ItemService.getItemByID(a.id);
+                let bItem = ItemService.getItemByID(b.id);
+
+                if (state.inventorySortDesc === true) {
+                    return (bItem.name > aItem.name) ? 1 : -1;
+                } else {
+                    return (aItem.name < bItem.name) ? -1 : 1;
+                }
+            })
+
+            state.inventorySortDesc = !state.inventorySortDesc;
+        },
+        toggleGrouping(state) {
+            state.groupInventory = !state.groupInventory;
         }
     },
     actions: {},