From 9dcad34fc0abded07645f4e9871563d4c1821c81 Mon Sep 17 00:00:00 2001
From: Michael Chekin <mchekin@gmail.com>
Date: Sun, 19 Dec 2021 14:42:52 +0100
Subject: [PATCH] Enforce sell-only stores: does not allow selling to sell-only
 stores (character stores)

---
 app/Modules/Trade/Domain/Store.php            |   5 +
 .../Domain/Store/StoreDoesNotBuyItems.php     |  11 +
 app/Modules/Trade/Domain/StoreType.php        |   5 +-
 resources/js/components/StoreManagement.vue   | 767 +++++++++---------
 resources/js/components/StoreTrade.vue        | 696 ++++++++--------
 5 files changed, 756 insertions(+), 728 deletions(-)
 create mode 100644 app/Modules/Trade/Domain/Store/StoreDoesNotBuyItems.php

diff --git a/app/Modules/Trade/Domain/Store.php b/app/Modules/Trade/Domain/Store.php
index 2a743bc0..cd0490c0 100644
--- a/app/Modules/Trade/Domain/Store.php
+++ b/app/Modules/Trade/Domain/Store.php
@@ -12,6 +12,7 @@
 use App\Modules\Generic\Domain\Container\ContainerSlotOutOfRangeException;
 use App\Modules\Generic\Domain\Container\ItemNotInContainer;
 use App\Modules\Generic\Domain\Container\NotEnoughSpaceInContainerException;
+use App\Modules\Trade\Domain\Store\StoreDoesNotBuyItems;
 use Illuminate\Support\Collection;
 
 class Store
@@ -145,6 +146,10 @@ public function putMoneyIn(Money $money): void
 
     public function takeMoneyOut(Money $money): Money
     {
+        if ($this->type->isSellOnly()) {
+            throw new StoreDoesNotBuyItems('Store does not buy items');
+        }
+
         $this->money = $this->money->remove($money);
 
         return $money;
diff --git a/app/Modules/Trade/Domain/Store/StoreDoesNotBuyItems.php b/app/Modules/Trade/Domain/Store/StoreDoesNotBuyItems.php
new file mode 100644
index 00000000..0a47c7df
--- /dev/null
+++ b/app/Modules/Trade/Domain/Store/StoreDoesNotBuyItems.php
@@ -0,0 +1,11 @@
+<?php declare(strict_types=1);
+
+
+namespace App\Modules\Trade\Domain\Store;
+
+
+use RuntimeException;
+
+class StoreDoesNotBuyItems extends RuntimeException
+{
+}
diff --git a/app/Modules/Trade/Domain/StoreType.php b/app/Modules/Trade/Domain/StoreType.php
index a798ff5b..7be23c9b 100644
--- a/app/Modules/Trade/Domain/StoreType.php
+++ b/app/Modules/Trade/Domain/StoreType.php
@@ -2,7 +2,6 @@
 
 namespace App\Modules\Trade\Domain;
 
-use App\Modules\Equipment\Domain\ItemType;
 use InvalidArgumentException;
 
 class StoreType
@@ -49,8 +48,8 @@ public function toString(): string
         return $this->type;
     }
 
-    public function equals(ItemType $type): bool
+    public function isSellOnly(): bool
     {
-        return $this->type === $type->toString();
+        return $this->type === self::SELL_ONLY;
     }
 }
diff --git a/resources/js/components/StoreManagement.vue b/resources/js/components/StoreManagement.vue
index 17c5656c..786fbd25 100644
--- a/resources/js/components/StoreManagement.vue
+++ b/resources/js/components/StoreManagement.vue
@@ -1,146 +1,147 @@
 <template>
-  <div>
-
-    <div class="row">
-      <popup-modal v-if="showModal" @closeModal="showModal = false">
-
-        <div slot="body">
-
-          <div class="font-weight-bold">
-            {{ itemToDisplay.name }}
-
-            <button type="submit"
-                    class="close"
-                    @click.stop.prevent="showModal = false">
-              x
-            </button>
-          </div>
-
-          <div class="modal-item-price-image">
-            <img :src="'/' + itemToDisplay.image_file_path" :alt="itemToDisplay.name">
-          </div>
-
-          <table class="table model-item-attributes-table">
-            <caption class="caption-top">Attributes</caption>
-            <tr>
-              <th scope="row">Sell price</th>
-              <td>
-                <form>
-                  <label for="set-item-price"></label>
-                  <input type="number"
-                         name="money_amount"
-                         id="set-item-price"
-                         class="w-100"
-                         v-model.number="itemToDisplay.price"
-                         @change.stop.prevent="changeItemPrice(itemToDisplay)"
-                         min="0"
-                         aria-label="Set item price">
-                </form>
-              </td>
-            </tr>
-            <tr>
-              <th scope="row">Type</th>
-              <td>{{ itemToDisplay.type | underscoreToWhitespace | capitalize }}</td>
-            </tr>
-            <tr>
-              <th scope="row">Effects</th>
-              <td>
-                <ul class="list-unstyled modal-item-effects">
-                  <li v-for="effect in itemToDisplay.effects" class="" :key="effect.type">
-                    {{ effect.type | capitalize }}: {{ effect.quantity | plusForPositiveNumber }}
-                  </li>
-                </ul>
-              </td>
-            </tr>
-          </table>
+    <div>
+
+        <div class="row">
+            <popup-modal v-if="showModal" @closeModal="showModal = false">
+
+                <div slot="body">
+
+                    <div class="font-weight-bold">
+                        {{ itemToDisplay.name }}
+
+                        <button type="submit"
+                                class="close"
+                                @click.stop.prevent="showModal = false">
+                            x
+                        </button>
+                    </div>
+
+                    <div class="modal-item-price-image">
+                        <img :src="'/' + itemToDisplay.image_file_path" :alt="itemToDisplay.name">
+                    </div>
+
+                    <table class="table model-item-attributes-table">
+                        <caption class="caption-top">Attributes</caption>
+                        <tr>
+                            <th scope="row">Sell price</th>
+                            <td>
+                                <form>
+                                    <label for="set-item-price"></label>
+                                    <input type="number"
+                                           name="money_amount"
+                                           id="set-item-price"
+                                           class="w-100"
+                                           v-model.number="itemToDisplay.price"
+                                           @change.stop.prevent="changeItemPrice(itemToDisplay)"
+                                           min="0"
+                                           aria-label="Set item price">
+                                </form>
+                            </td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Type</th>
+                            <td>{{ itemToDisplay.type | underscoreToWhitespace | capitalize }}</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Effects</th>
+                            <td>
+                                <ul class="list-unstyled modal-item-effects">
+                                    <li v-for="effect in itemToDisplay.effects" class="" :key="effect.type">
+                                        {{ effect.type | capitalize }}: {{ effect.quantity | plusForPositiveNumber }}
+                                    </li>
+                                </ul>
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+
+            </popup-modal>
         </div>
 
-      </popup-modal>
-    </div>
+        <div class="row">
 
-    <div class="row">
-
-      <!-- Left Side -->
-      <div class="col-md-6">
-
-        <h5 class="text-center">
-          {{ character.name }}'s Inventory
-        </h5>
-
-        <div class="my-3 row mx-1 table-dark align-items-center">
-
-          <div v-for="index in total_inventory_slots" :key="index"
-               :id="index-1"
-               :class="[isEquipped(index-1) ? 'inventory-item equipped' : 'inventory-item']"
-               @drop="onDrop($event, 'inventory')"
-               @dragover.prevent
-               @dragenter.prevent>
-            <button type="submit"
-                    @click.stop.prevent="openItemModal(getInventoryItem(index-1), 'inventory')"
-                    @dragstart="startDrag($event, index-1, 'inventory')"
-                    draggable="true"
-                    class="btn btn-link-thin"
-                    v-if="getInventoryItem(index-1)">
-              <img :src="asset(getInventoryItem(index-1).image_file_path)" :alt="getInventoryItem(index-1).name">
-            </button>
-          </div>
+            <!-- Left Side -->
+            <div class="col-md-6">
+
+                <h5 class="text-center">
+                    {{ character.name }}'s Inventory
+                </h5>
+
+                <div class="my-3 row mx-1 table-dark align-items-center">
+
+                    <div v-for="index in total_inventory_slots" :key="index"
+                         :id="index-1"
+                         :class="[isEquipped(index-1) ? 'inventory-item equipped' : 'inventory-item']"
+                         @drop="onDrop($event, 'inventory')"
+                         @dragover.prevent
+                         @dragenter.prevent>
+                        <button type="submit"
+                                @click.stop.prevent="openItemModal(getInventoryItem(index-1), 'inventory')"
+                                @dragstart="startDrag($event, index-1, 'inventory')"
+                                draggable="true"
+                                class="btn btn-link-thin"
+                                v-if="getInventoryItem(index-1)">
+                            <img :src="asset(getInventoryItem(index-1).image_file_path)"
+                                 :alt="getInventoryItem(index-1).name">
+                        </button>
+                    </div>
+
+                </div>
 
-        </div>
+            </div>
 
-      </div>
-
-      <!-- Right Side -->
-      <div class="col-md-6">
-
-        <h5 class="text-center">
-          {{ character.name }}'s Store
-        </h5>
-
-        <div class="my-3 row mx-1 table-dark align-items-center">
-
-          <div v-for="index in total_store_slots" :key="index"
-               :id="index-1"
-               class="inventory-item"
-               @drop="onDrop($event, 'store')"
-               @dragover.prevent
-               @dragenter.prevent>
-            <button type="submit"
-                    @click.stop.prevent="openItemModal(getStoreItem(index-1), 'store')"
-                    class="btn btn-link-thin"
-                    @dragstart="startDrag($event, index-1, 'store')"
-                    draggable="true"
-                    v-if="getStoreItem(index-1)">
-              <img :src="asset(getStoreItem(index-1).image_file_path)" :alt="getStoreItem(index-1).name">
-            </button>
-          </div>
+            <!-- Right Side -->
+            <div class="col-md-6">
+
+                <h5 class="text-center">
+                    {{ character.name }}'s Store
+                </h5>
+
+                <div class="my-3 row mx-1 table-dark align-items-center">
+
+                    <div v-for="index in total_store_slots" :key="index"
+                         :id="index-1"
+                         class="inventory-item"
+                         @drop="onDrop($event, 'store')"
+                         @dragover.prevent
+                         @dragenter.prevent>
+                        <button type="submit"
+                                @click.stop.prevent="openItemModal(getStoreItem(index-1), 'store')"
+                                class="btn btn-link-thin"
+                                @dragstart="startDrag($event, index-1, 'store')"
+                                draggable="true"
+                                v-if="getStoreItem(index-1)">
+                            <img :src="asset(getStoreItem(index-1).image_file_path)" :alt="getStoreItem(index-1).name">
+                        </button>
+                    </div>
+
+                </div>
 
+            </div>
         </div>
 
-      </div>
-    </div>
-
-    <div class="row">
-
-      <!-- Left Side -->
-      <div class="col-md-6">
         <div class="row">
-          <div class="col-md-12 text-center my-3">
-            <div class="input-group mb-3">
-              <div class="input-group-prepend">
+
+            <!-- Left Side -->
+            <div class="col-md-6">
+                <div class="row">
+                    <div class="col-md-12 text-center my-3">
+                        <div class="input-group mb-3">
+                            <div class="input-group-prepend">
                                 <span class="input-group-text font-weight-bold">
                                     Money in inventory: {{ character.inventory.money }}
                                 </span>
-              </div>
-              <label for="money-to-store"></label>
-              <input type="number"
-                     name="money_amount"
-                     id="money-to-store"
-                     class="form-control"
-                     v-model.number="money_to_store"
-                     min="0"
-                     :max=character.inventory.money
-                     aria-label="Money to move to store">
-              <div class="input-group-append">
+                            </div>
+                            <label for="money-to-store"></label>
+                            <input type="number"
+                                   name="money_amount"
+                                   id="money-to-store"
+                                   class="form-control"
+                                   v-model.number="money_to_store"
+                                   min="0"
+                                   :max=character.inventory.money
+                                   aria-label="Money to move to store">
+                            <div class="input-group-append">
                                 <span class="input-group-text">
                                     <button type="submit"
                                             class="btn btn-sm btn-secondary"
@@ -149,18 +150,18 @@
                                          <span class="fas fa-long-arrow-alt-right"></span>
                                     </button>
                                 </span>
-              </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
-          </div>
-        </div>
-      </div>
 
-      <!-- Right Side -->
-      <div class="col-md-6">
-        <div class="row">
-          <div class="col-md-12 text-center my-3">
-            <div class="input-group mb-3">
-              <div class="input-group-prepend">
+            <!-- Right Side -->
+            <div class="col-md-6">
+                <div class="row">
+                    <div class="col-md-12 text-center my-3">
+                        <div class="input-group mb-3">
+                            <div class="input-group-prepend">
                                 <span class="input-group-text">
                                     <button type="submit"
                                             class="btn btn-sm btn-secondary"
@@ -169,333 +170,333 @@
                                         Move to Inventory
                                     </button>
                                 </span>
-              </div>
-              <label for="money-to-inventory"></label>
-              <input type="number"
-                     name="money_amount"
-                     id="money-to-inventory"
-                     class="form-control"
-                     v-model.number="money_to_inventory"
-                     min="0"
-                     :max=character.store.money
-                     aria-label="Money to move to inventory">
-              <div class="input-group-append">
+                            </div>
+                            <label for="money-to-inventory"></label>
+                            <input type="number"
+                                   name="money_amount"
+                                   id="money-to-inventory"
+                                   class="form-control"
+                                   v-model.number="money_to_inventory"
+                                   min="0"
+                                   :max=character.store.money
+                                   aria-label="Money to move to inventory">
+                            <div class="input-group-append">
                                 <span class="input-group-text font-weight-bold">
                                     Money in store: {{ character.store.money }}
                                 </span>
-              </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
-          </div>
+
         </div>
-      </div>
 
     </div>
-
-  </div>
 </template>
 
 <script>
 
 export default {
-  mounted() {
+    mounted() {
 
-  },
+    },
 
-  data() {
-    return {
-      itemToDisplay: {
-        pivot: {
-          inventory_slot_number: null,
-          status: ''
-        },
-        image_file_path: '',
-        price: 0,
-        type: '',
-        name: '',
-        effects: {
-          quantity: 0,
-          type: ''
-        }
-      },
-      showModal: false,
-      showContainer: 'inventory',
-      sourceContainer: 'inventory',
-      money_to_store: 0,
-      money_to_inventory: 0,
-      total_inventory_slots: 25,
-      total_store_slots: 25,
-      character: {
-        name: '',
-        inventory: {
-          items: [
-            {
-              pivot: {
-                inventory_slot_number: null,
-                status: ''
-              },
-              image_file_path: '',
-              price: 0,
-              type: '',
-              name: '',
-              effects: {
-                quantity: 0,
-                type: ''
-              }
+    data() {
+        return {
+            itemToDisplay: {
+                pivot: {
+                    inventory_slot_number: null,
+                    status: ''
+                },
+                image_file_path: '',
+                price: 0,
+                type: '',
+                name: '',
+                effects: {
+                    quantity: 0,
+                    type: ''
+                }
+            },
+            showModal: false,
+            showContainer: 'inventory',
+            sourceContainer: 'inventory',
+            money_to_store: 0,
+            money_to_inventory: 0,
+            total_inventory_slots: 25,
+            total_store_slots: 25,
+            character: {
+                name: '',
+                inventory: {
+                    items: [
+                        {
+                            pivot: {
+                                inventory_slot_number: null,
+                                status: ''
+                            },
+                            image_file_path: '',
+                            price: 0,
+                            type: '',
+                            name: '',
+                            effects: {
+                                quantity: 0,
+                                type: ''
+                            }
+                        }
+                    ],
+                    money: 0
+                },
+                store: {
+                    items: [
+                        {
+                            pivot: {
+                                inventory_slot_number: null,
+                                status: ''
+                            },
+                            image_file_path: '',
+                            price: 0,
+                            type: '',
+                            name: '',
+                            effects: {
+                                quantity: 0,
+                                type: ''
+                            }
+                        }
+                    ],
+                    money: 0
+                }
             }
-          ],
-          money: 0
-        },
-        store: {
-          items: [
-            {
-              pivot: {
-                inventory_slot_number: null,
-                status: ''
-              },
-              image_file_path: '',
-              price: 0,
-              type: '',
-              name: '',
-              effects: {
-                quantity: 0,
-                type: ''
-              }
-            }
-          ],
-          money: 0
         }
-      }
-    }
-  },
-
-  created() {
-    this.character = this.$attrs.character;
-  },
+    },
 
-  methods: {
-    findFreeStoreSlot() {
+    created() {
+        this.character = this.$attrs.character;
+    },
 
-      for (let slot = 0; slot < this.total_store_slots; slot++) {
+    methods: {
+        findFreeStoreSlot() {
 
-        if (this.getStoreItem(slot) === undefined) {
-          return slot;
-        }
-      }
+            for (let slot = 0; slot < this.total_store_slots; slot++) {
 
-      return null;
-    },
+                if (this.getStoreItem(slot) === undefined) {
+                    return slot;
+                }
+            }
 
-    findFreeInventorySlot() {
+            return null;
+        },
 
-      for (let slot = 0; slot < this.total_inventory_slots; slot++) {
+        findFreeInventorySlot() {
 
-        if (this.getInventoryItem(slot) === undefined) {
-          return slot;
-        }
-      }
+            for (let slot = 0; slot < this.total_inventory_slots; slot++) {
 
-      return null;
-    },
+                if (this.getInventoryItem(slot) === undefined) {
+                    return slot;
+                }
+            }
 
-    moveItemToStore(item) {
+            return null;
+        },
 
-      if (!item) {
-        return;
-      }
+        moveItemToStore(item) {
 
-      this.showModal = false;
+            if (!item) {
+                return;
+            }
 
-      item.pivot.inventory_slot_number = this.findFreeStoreSlot();
-      item.pivot.status = 'in_backpack';
+            this.showModal = false;
 
-      this.character.store.items.push(item);
+            item.pivot.inventory_slot_number = this.findFreeStoreSlot();
+            item.pivot.status = 'in_backpack';
 
-      let index = this.character.inventory.items.indexOf(item);
+            this.character.store.items.push(item);
 
-      if (index > -1) {
-        this.character.inventory.items.splice(index, 1);
-      }
+            let index = this.character.inventory.items.indexOf(item);
 
-      axios.post('/api/inventory/item/' + item.id + '/move-to-store')
-          .then(() => {
-            this.logSuccess('Moved: ' + item.name + ' to the store');
+            if (index > -1) {
+                this.character.inventory.items.splice(index, 1);
+            }
 
-            this.money_to_store = 0;
-          }).catch(error => {
-        this.logError('Moving item to the store failed: ' + error.message);
-      });
-    },
+            axios.post('/api/inventory/item/' + item.id + '/move-to-store')
+                .then(() => {
+                    this.logSuccess('Moved: ' + item.name + ' to the store');
 
-    moveItemToInventory(item) {
+                    this.money_to_store = 0;
+                }).catch(error => {
+                this.logError('Moving item to the store failed: ' + error.message);
+            });
+        },
 
-      if (!item) {
-        return;
-      }
+        moveItemToInventory(item) {
 
-      item.pivot.inventory_slot_number = this.findFreeInventorySlot();
+            if (!item) {
+                return;
+            }
 
-      this.character.inventory.items.push(item);
+            item.pivot.inventory_slot_number = this.findFreeInventorySlot();
 
-      let index = this.character.store.items.indexOf(item);
+            this.character.inventory.items.push(item);
 
-      if (index > -1) {
-        this.character.store.items.splice(index, 1);
-      }
+            let index = this.character.store.items.indexOf(item);
 
-      axios.post('/api/store/item/' + item.id + '/move-to-inventory')
-          .then(() => {
-            this.logSuccess('Moved: ' + item.name + ' to the inventory');
+            if (index > -1) {
+                this.character.store.items.splice(index, 1);
+            }
 
-            this.money_to_store = 0;
-          }).catch(error => {
-        this.logError('Moving item to the inventory failed: ' + error.message);
-      });
-    },
+            axios.post('/api/store/item/' + item.id + '/move-to-inventory')
+                .then(() => {
+                    this.logSuccess('Moved: ' + item.name + ' to the inventory');
 
-    openItemModal(item, container) {
+                    this.money_to_store = 0;
+                }).catch(error => {
+                this.logError('Moving item to the inventory failed: ' + error.response.data.message);
+            });
+        },
 
-      if (!item) {
-        return;
-      }
+        openItemModal(item, container) {
 
-      this.itemToDisplay = item;
-      this.showModal = true;
-      this.showContainer = container;
-    },
+            if (!item) {
+                return;
+            }
 
-    changeItemPrice(item) {
+            this.itemToDisplay = item;
+            this.showModal = true;
+            this.showContainer = container;
+        },
 
-      if (!item) {
-        return;
-      }
+        changeItemPrice(item) {
 
-      let newPrice = item.price;
+            if (!item) {
+                return;
+            }
 
-      axios.post('/api/store/item/' + item.id + '/change-price', {
-        'price': newPrice,
-        'containerType': this.showContainer
-      })
-          .then(() => {
-            this.logSuccess(item.name + ' price changed to ' + newPrice + ' coins');
-          }).catch(error => {
-        this.logError('Changing price failed: ' + error.message);
-      });
-    },
+            let newPrice = item.price;
+
+            axios.post('/api/store/item/' + item.id + '/change-price', {
+                'price': newPrice,
+                'containerType': this.showContainer
+            })
+                .then(() => {
+                    this.logSuccess(item.name + ' price changed to ' + newPrice + ' coins');
+                }).catch(error => {
+                this.logError('Changing price failed: ' + error.response.data.message);
+            });
+        },
 
-    moveMoneyToInventory() {
+        moveMoneyToInventory() {
 
-      if (this.money_to_inventory === 0) {
-        return;
-      }
+            if (this.money_to_inventory === 0) {
+                return;
+            }
 
-      this.character.inventory.money += this.money_to_inventory;
-      this.character.store.money -= this.money_to_inventory;
+            this.character.inventory.money += this.money_to_inventory;
+            this.character.store.money -= this.money_to_inventory;
 
-      axios.post('/api/store/money/move-to-inventory', {'money_amount': this.money_to_inventory})
-          .then(() => {
-            this.logSuccess('Moved: ' + this.money_to_store + ' coins to the inventory');
+            axios.post('/api/store/money/move-to-inventory', {'money_amount': this.money_to_inventory})
+                .then(() => {
+                    this.logSuccess('Moved: ' + this.money_to_store + ' coins to the inventory');
 
-            this.money_to_inventory = 0;
-          }).catch(error => {
-        this.logError('Moving coins to the store failed: ' + error.message);
-      });
-    },
+                    this.money_to_inventory = 0;
+                }).catch(error => {
+                this.logError('Moving coins to the store failed: ' + error.response.data.message);
+            });
+        },
 
-    moveMoneyToStore() {
+        moveMoneyToStore() {
 
-      if (this.money_to_store === 0) {
-        return;
-      }
+            if (this.money_to_store === 0) {
+                return;
+            }
 
-      this.character.store.money += this.money_to_store;
-      this.character.inventory.money -= this.money_to_store;
+            this.character.store.money += this.money_to_store;
+            this.character.inventory.money -= this.money_to_store;
 
-      axios.post('/api/inventory/money/move-to-store', {'money_amount': this.money_to_store})
-          .then(() => {
-            this.logSuccess('Moved: ' + this.money_to_store + ' coins to the store');
+            axios.post('/api/inventory/money/move-to-store', {'money_amount': this.money_to_store})
+                .then(() => {
+                    this.logSuccess('Moved: ' + this.money_to_store + ' coins to the store');
 
-            this.money_to_store = 0;
-          }).catch(error => {
-        this.logError('Moving coins to the store failed: ' + error.message);
-      });
-    },
+                    this.money_to_store = 0;
+                }).catch(error => {
+                this.logError('Moving coins to the store failed: ' + error.response.data.message);
+            });
+        },
 
-    asset(path) {
-      let base_path = window._asset || '';
+        asset(path) {
+            let base_path = window._asset || '';
 
-      return base_path + path;
-    },
+            return base_path + path;
+        },
 
-    getInventoryItem(index) {
-      return this.character.inventory.items.find(
-          item => parseInt(item.pivot.inventory_slot_number) === parseInt(index)
-      );
-    },
+        getInventoryItem(index) {
+            return this.character.inventory.items.find(
+                item => parseInt(item.pivot.inventory_slot_number) === parseInt(index)
+            );
+        },
 
-    getStoreItem(index) {
-      return this.character.store.items.find(
-          item => parseInt(item.pivot.inventory_slot_number) === parseInt(index)
-      );
-    },
+        getStoreItem(index) {
+            return this.character.store.items.find(
+                item => parseInt(item.pivot.inventory_slot_number) === parseInt(index)
+            );
+        },
 
-    isEquipped(index) {
-      return this.getInventoryItem(index) && this.getInventoryItem(index).pivot.status === 'equipped';
-    },
+        isEquipped(index) {
+            return this.getInventoryItem(index) && this.getInventoryItem(index).pivot.status === 'equipped';
+        },
 
-    startDrag(evt, itemIndex, container) {
-      evt.dataTransfer.dropEffect = 'move';
-      evt.dataTransfer.effectAllowed = 'move';
+        startDrag(evt, itemIndex, container) {
+            evt.dataTransfer.dropEffect = 'move';
+            evt.dataTransfer.effectAllowed = 'move';
 
-      this.sourceContainer = container;
+            this.sourceContainer = container;
 
-      evt.dataTransfer.setData('itemIndex', itemIndex);
-    },
+            evt.dataTransfer.setData('itemIndex', itemIndex);
+        },
 
-    onDrop(evt, container) {
-      const itemIndex = evt.dataTransfer.getData('itemIndex');
+        onDrop(evt, container) {
+            const itemIndex = evt.dataTransfer.getData('itemIndex');
 
-      if (container === this.sourceContainer) {
-        return;
-      }
+            if (container === this.sourceContainer) {
+                return;
+            }
 
-      if (container === 'store') {
-        let inventoryItem = this.getInventoryItem(itemIndex);
+            if (container === 'store') {
+                let inventoryItem = this.getInventoryItem(itemIndex);
 
-        this.moveItemToStore(inventoryItem);
-      } else {
+                this.moveItemToStore(inventoryItem);
+            } else {
 
-        let storeItem = this.getStoreItem(itemIndex);
+                let storeItem = this.getStoreItem(itemIndex);
 
-        this.moveItemToInventory(storeItem);
-      }
-    },
+                this.moveItemToInventory(storeItem);
+            }
+        },
 
-    logSuccess(message) {
-      this.$root.$emit('successHappened', message);
-    },
+        logSuccess(message) {
+            this.$root.$emit('successHappened', message);
+        },
 
-    logError(error) {
-      this.$root.$emit('errorHappened', error);
-    },
-  }
+        logError(error) {
+            this.$root.$emit('errorHappened', error);
+        },
+    }
 };
 </script>
 
 <style scoped>
 .modal-item-price-image img {
-  height: 210px;
-  width: 100%;
-  background-color: black;
+    height: 210px;
+    width: 100%;
+    background-color: black;
 }
 
 .modal-item-effects {
-  vertical-align: middle;
-  margin: 0;
+    vertical-align: middle;
+    margin: 0;
 }
 
 .model-item-attributes-table th, .model-item-attributes-table td {
-  vertical-align: middle;
-  font-size: small;
-  white-space: nowrap;
+    vertical-align: middle;
+    font-size: small;
+    white-space: nowrap;
 }
 </style>
diff --git a/resources/js/components/StoreTrade.vue b/resources/js/components/StoreTrade.vue
index d2edf259..e4c98819 100644
--- a/resources/js/components/StoreTrade.vue
+++ b/resources/js/components/StoreTrade.vue
@@ -1,438 +1,450 @@
 <template>
-  <div>
-
-    <div class="row">
-      <popup-modal v-if="showModal" @closeModal="showModal = false">
-
-        <div slot="body">
-
-          <div class="font-weight-bold">
-            {{ itemToDisplay.name }}
-
-            <button type="submit"
-                    class="close"
-                    @click.stop.prevent="showModal = false">
-              x
-            </button>
-          </div>
-
-          <div class="modal-item-price-image">
-            <img :src="'/' + itemToDisplay.image_file_path" :alt="itemToDisplay.name">
-          </div>
-
-          <table class="table model-item-attributes-table">
-            <caption class="caption-top">Attributes</caption>
-            <tr>
-              <th scope="row">Sell price</th>
-              <td>
-                <form>
-                  <label for="set-item-price"></label>
-                  <input type="number"
-                         name="money_amount"
-                         id="set-item-price"
-                         class="w-100"
-                         v-model.number="itemToDisplay.price"
-                         @change.stop.prevent="changeItemPrice(itemToDisplay)"
-                         min="0"
-                         aria-label="Set item price">
-                </form>
-              </td>
-            </tr>
-            <tr>
-              <th scope="row">Type</th>
-              <td>{{ itemToDisplay.type | underscoreToWhitespace | capitalize }}</td>
-            </tr>
-            <tr>
-              <th scope="row">Effects</th>
-              <td>
-                <ul class="list-unstyled modal-item-effects">
-                  <li v-for="effect in itemToDisplay.effects" class="" :key="effect.type">
-                    {{ effect.type | capitalize }}: {{ effect.quantity | plusForPositiveNumber }}
-                  </li>
-                </ul>
-              </td>
-            </tr>
-          </table>
+    <div>
+
+        <div class="row">
+            <popup-modal v-if="showModal" @closeModal="showModal = false">
+
+                <div slot="body">
+
+                    <div class="font-weight-bold">
+                        {{ itemToDisplay.name }}
+
+                        <button type="submit"
+                                class="close"
+                                @click.stop.prevent="showModal = false">
+                            x
+                        </button>
+                    </div>
+
+                    <div class="modal-item-price-image">
+                        <img :src="'/' + itemToDisplay.image_file_path" :alt="itemToDisplay.name">
+                    </div>
+
+                    <table class="table model-item-attributes-table">
+                        <caption class="caption-top">Attributes</caption>
+                        <tr>
+                            <th scope="row">Sell price</th>
+                            <td>
+                                <form>
+                                    <label for="set-item-price"></label>
+                                    <input type="number"
+                                           name="money_amount"
+                                           id="set-item-price"
+                                           class="w-100"
+                                           v-model.number="itemToDisplay.price"
+                                           @change.stop.prevent="changeItemPrice(itemToDisplay)"
+                                           min="0"
+                                           aria-label="Set item price">
+                                </form>
+                            </td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Type</th>
+                            <td>{{ itemToDisplay.type | underscoreToWhitespace | capitalize }}</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Effects</th>
+                            <td>
+                                <ul class="list-unstyled modal-item-effects">
+                                    <li v-for="effect in itemToDisplay.effects" class="" :key="effect.type">
+                                        {{ effect.type | capitalize }}: {{ effect.quantity | plusForPositiveNumber }}
+                                    </li>
+                                </ul>
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+
+            </popup-modal>
         </div>
 
-      </popup-modal>
-    </div>
+        <div class="row">
 
-    <div class="row">
-
-      <!-- Left Side -->
-      <div class="col-md-6">
-
-        <h5 class="text-center">
-          {{ customer.name }}'s Inventory
-        </h5>
-
-        <div class="my-3 row mx-1 table-dark align-items-center">
-
-          <div v-for="index in total_inventory_slots" :key="index"
-               :id="index-1"
-               :class="[isEquipped(index-1) ? 'inventory-item equipped' : 'inventory-item']"
-               @drop="onDrop($event, 'inventory')"
-               @dragover.prevent
-               @dragenter.prevent>
-            <button type="submit"
-                    @click.stop.prevent="openItemModal(getInventoryItem(index-1), 'inventory')"
-                    @dragstart="startDrag($event, index-1, 'inventory')"
-                    draggable="true"
-                    class="btn btn-link-thin"
-                    v-if="getInventoryItem(index-1)">
-              <img :src="asset(getInventoryItem(index-1).image_file_path)" :alt="getInventoryItem(index-1).name">
-            </button>
-          </div>
+            <!-- Left Side -->
+            <div class="col-md-6">
+
+                <h5 class="text-center">
+                    {{ customer.name }}'s Inventory
+                </h5>
+
+                <div class="my-3 row mx-1 table-dark align-items-center">
+
+                    <div v-for="index in total_inventory_slots" :key="index"
+                         :id="index-1"
+                         :class="[isEquipped(index-1) ? 'inventory-item equipped' : 'inventory-item']"
+                         @drop="onDrop($event, 'inventory')"
+                         @dragover.prevent
+                         @dragenter.prevent>
+                        <button type="submit"
+                                @click.stop.prevent="openItemModal(getInventoryItem(index-1), 'inventory')"
+                                @dragstart="startDrag($event, index-1, 'inventory')"
+                                draggable="true"
+                                class="btn btn-link-thin"
+                                v-if="getInventoryItem(index-1)">
+                            <img :src="asset(getInventoryItem(index-1).image_file_path)"
+                                 :alt="getInventoryItem(index-1).name">
+                        </button>
+                    </div>
+
+                </div>
 
-        </div>
+            </div>
 
-      </div>
-
-      <!-- Right Side -->
-      <div class="col-md-6">
-
-        <h5 class="text-center">
-          {{ trader.name }}'s Store
-        </h5>
-
-        <div class="my-3 row mx-1 table-dark align-items-center">
-
-          <div v-for="index in total_store_slots" :key="index"
-               :id="index-1"
-               class="inventory-item"
-               @drop="onDrop($event, 'store')"
-               @dragover.prevent
-               @dragenter.prevent>
-            <button type="submit"
-                    @click.stop.prevent="openItemModal(getStoreItem(index-1), 'store')"
-                    class="btn btn-link-thin"
-                    @dragstart="startDrag($event, index-1, 'store')"
-                    draggable="true"
-                    v-if="getStoreItem(index-1)">
-              <img :src="asset(getStoreItem(index-1).image_file_path)" :alt="getStoreItem(index-1).name">
-            </button>
-          </div>
+            <!-- Right Side -->
+            <div class="col-md-6">
+
+                <h5 class="text-center">
+                    {{ trader.name }}'s Store
+                </h5>
+
+                <div class="my-3 row mx-1 table-dark align-items-center">
+
+                    <div v-for="index in total_store_slots" :key="index"
+                         :id="index-1"
+                         class="inventory-item"
+                         @drop="onDrop($event, 'store')"
+                         @dragover.prevent
+                         @dragenter.prevent>
+                        <button type="submit"
+                                @click.stop.prevent="openItemModal(getStoreItem(index-1), 'store')"
+                                class="btn btn-link-thin"
+                                @dragstart="startDrag($event, index-1, 'store')"
+                                draggable="true"
+                                v-if="getStoreItem(index-1)">
+                            <img :src="asset(getStoreItem(index-1).image_file_path)" :alt="getStoreItem(index-1).name">
+                        </button>
+                    </div>
+
+                </div>
 
+            </div>
         </div>
 
-      </div>
-    </div>
-
-    <div class="row">
-
-      <!-- Left Side -->
-      <div class="col-md-6">
         <div class="row">
-          <div class="col-md-12 text-center my-3">
-            <div class="input-group mb-3">
-              <div class="input-group-prepend">
+
+            <!-- Left Side -->
+            <div class="col-md-6">
+                <div class="row">
+                    <div class="col-md-12 text-center my-3">
+                        <div class="input-group mb-3">
+                            <div class="input-group-prepend">
                                 <span class="input-group-text font-weight-bold">
                                     Money in inventory: {{ customer.inventory.money }}
                                 </span>
-              </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
-          </div>
-        </div>
-      </div>
 
-      <!-- Right Side -->
-      <div class="col-md-6">
-        <div class="row">
-          <div class="col-md-12 text-center my-3">
-            <div class="input-group mb-3">
-              <div class="input-group-append">
+            <!-- Right Side -->
+            <div class="col-md-6">
+                <div class="row">
+                    <div class="col-md-12 text-center my-3">
+                        <div class="input-group mb-3">
+                            <div class="input-group-append">
                                 <span class="input-group-text font-weight-bold">
                                     Money in store: {{ trader.store.money }}
                                 </span>
-              </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
-          </div>
+
         </div>
-      </div>
 
     </div>
-
-  </div>
 </template>
 
 <script>
 
 export default {
-  mounted() {
+    mounted() {
 
-  },
+    },
 
-  data() {
-    return {
-      itemToDisplay: {
-        pivot: {
-          inventory_slot_number: null,
-          status: ''
-        },
-        image_file_path: '',
-        price: 0,
-        type: '',
-        name: '',
-        effects: {
-          quantity: 0,
-          type: ''
-        }
-      },
-      showModal: false,
-      showContainer: 'inventory',
-      sourceContainer: 'inventory',
-      money_to_store: 0,
-      money_to_inventory: 0,
-      total_inventory_slots: 25,
-      total_store_slots: 25,
-      customer: {
-        name: '',
-        inventory: {
-          items: [
-            {
-              pivot: {
-                inventory_slot_number: null,
-                status: ''
-              },
-              image_file_path: '',
-              price: 0,
-              type: '',
-              name: '',
-              effects: {
-                quantity: 0,
-                type: ''
-              }
+    data() {
+        return {
+            itemToDisplay: {
+                pivot: {
+                    inventory_slot_number: null,
+                    status: ''
+                },
+                image_file_path: '',
+                price: 0,
+                type: '',
+                name: '',
+                effects: {
+                    quantity: 0,
+                    type: ''
+                }
+            },
+            showModal: false,
+            showContainer: 'inventory',
+            sourceContainer: 'inventory',
+            money_to_store: 0,
+            money_to_inventory: 0,
+            total_inventory_slots: 25,
+            total_store_slots: 25,
+            customer: {
+                name: '',
+                inventory: {
+                    items: [
+                        {
+                            pivot: {
+                                inventory_slot_number: null,
+                                status: ''
+                            },
+                            image_file_path: '',
+                            price: 0,
+                            type: '',
+                            name: '',
+                            effects: {
+                                quantity: 0,
+                                type: ''
+                            }
+                        }
+                    ],
+                    money: 0
+                },
+            },
+            trader: {
+                name: '',
+                store: {
+                    id: '',
+                    items: [
+                        {
+                            pivot: {
+                                inventory_slot_number: null,
+                                status: ''
+                            },
+                            image_file_path: '',
+                            price: 0,
+                            type: '',
+                            name: '',
+                            effects: {
+                                quantity: 0,
+                                type: ''
+                            }
+                        }
+                    ],
+                    money: 0
+                }
             }
-          ],
-          money: 0
-        },
-      },
-      trader: {
-        name: '',
-        store: {
-          id: '',
-          items: [
-            {
-              pivot: {
-                inventory_slot_number: null,
-                status: ''
-              },
-              image_file_path: '',
-              price: 0,
-              type: '',
-              name: '',
-              effects: {
-                quantity: 0,
-                type: ''
-              }
-            }
-          ],
-          money: 0
         }
-      }
-    }
-  },
+    },
 
-  created() {
-    this.customer = this.$attrs.customer;
-    this.trader = this.$attrs.trader;
-  },
+    created() {
+        this.customer = this.$attrs.customer;
+        this.trader = this.$attrs.trader;
+    },
 
-  methods: {
+    methods: {
 
-    buy(item) {
+        buy(item) {
 
-      if (!item) {
-        this.logError('Item not found');
+            if (!item) {
+                this.logError('Item not found');
 
-        return;
-      }
+                return;
+            }
 
-      if (this.customer.inventory.money < item.price) {
-        this.logError('You don\'t have ' + item.price + ' coins');
+            if (this.customer.inventory.money < item.price) {
+                this.logError('You don\'t have ' + item.price + ' coins');
 
-        return;
-      }
+                return;
+            }
 
-      item.pivot.inventory_slot_number = this.findFreeInventorySlot();
+            this.exchangeMoneyForItem(item);
 
-      this.customer.inventory.items.push(item);
+            axios.post('/api/store/' + this.trader.store.id + '/item/' + item.id + '/buy')
+                .then(() => {
+                    this.logSuccess('Bought: ' + item.name + ' for ' + item.price + ' coins');
+                }).catch(error => {
+                this.exchangeItemForMoney(item);
+                this.logError('Buying failed: ' + error.response.data.message);
+            });
+        },
 
-      let index = this.trader.store.items.indexOf(item);
+        sell(item) {
 
-      if (index > -1) {
-        this.trader.store.items.splice(index, 1);
-      }
+            if (!item || this.trader.store.money < item.price) {
+                return;
+            }
 
-      this.customer.inventory.money -= item.price;
-      this.trader.store.money += item.price
+            this.exchangeItemForMoney(item);
 
-      axios.post('/api/store/' + this.trader.store.id + '/item/' + item.id + '/buy')
-          .then(() => {
-            this.logSuccess('Bought: ' + item.name + ' for ' + item.price + ' coins');
-          }).catch(error => {
-        this.logError('Buying failed: ' + error.message);
-      });
-    },
+            axios.post('/api/store/' + this.trader.store.id + '/item/' + item.id + '/sell')
+                .then(() => {
+                    this.logSuccess('Sold: ' + item.name + ' for ' + item.price + ' coins');
+                }).catch(error => {
+                this.exchangeMoneyForItem(item);
+                this.logError('Selling failed: ' + error.response.data.message);
+            });
+        },
 
-    sell(item) {
+        exchangeMoneyForItem: function (item) {
+            item.pivot.inventory_slot_number = this.findFreeInventorySlot();
 
-      if (!item || this.trader.store.money < item.price) {
-        return;
-      }
+            this.customer.inventory.items.push(item);
 
-      item.pivot.inventory_slot_number = this.findFreeStoreSlot();
+            let index = this.trader.store.items.indexOf(item);
 
-      this.trader.store.items.push(item);
+            if (index > -1) {
+                this.trader.store.items.splice(index, 1);
+            }
 
-      let index = this.customer.inventory.items.indexOf(item);
+            this.customer.inventory.money -= item.price;
+            this.trader.store.money += item.price
+        },
 
-      if (index > -1) {
-        this.customer.inventory.items.splice(index, 1);
-      }
+        exchangeItemForMoney: function (item) {
 
-      this.trader.store.money -= item.price;
-      this.customer.inventory.money += item.price
+            item.pivot.inventory_slot_number = this.findFreeStoreSlot();
 
-      axios.post('/api/store/' + this.trader.store.id + '/item/' + item.id + '/sell')
-          .then(() => {
-            this.logSuccess('Sold: ' + item.name + ' for ' + item.price + ' coins');
-          }).catch(error => {
-        this.logError('Selling failed: ' + error.message);
-      });
-    },
+            this.trader.store.items.push(item);
 
-    findFreeStoreSlot() {
+            let index = this.customer.inventory.items.indexOf(item);
 
-      for (let slot = 0; slot < this.total_store_slots; slot++) {
+            if (index > -1) {
+                this.customer.inventory.items.splice(index, 1);
+            }
 
-        if (this.getStoreItem(slot) === undefined) {
-          return slot;
-        }
-      }
+            this.trader.store.money -= item.price;
+            this.customer.inventory.money += item.price
+        },
 
-      return null;
-    },
+        findFreeStoreSlot() {
 
-    findFreeInventorySlot() {
+            for (let slot = 0; slot < this.total_store_slots; slot++) {
 
-      for (let slot = 0; slot < this.total_inventory_slots; slot++) {
+                if (this.getStoreItem(slot) === undefined) {
+                    return slot;
+                }
+            }
 
-        if (this.getInventoryItem(slot) === undefined) {
-          return slot;
-        }
-      }
+            return null;
+        },
 
-      return null;
-    },
+        findFreeInventorySlot() {
 
-    openItemModal(item, container) {
+            for (let slot = 0; slot < this.total_inventory_slots; slot++) {
 
-      if (!item) {
-        return;
-      }
+                if (this.getInventoryItem(slot) === undefined) {
+                    return slot;
+                }
+            }
 
-      this.itemToDisplay = item;
-      this.showModal = true;
-      this.showContainer = container;
-    },
+            return null;
+        },
 
-    changeItemPrice(item) {
+        openItemModal(item, container) {
 
-      if (!item) {
-        return;
-      }
+            if (!item) {
+                return;
+            }
 
-      let newPrice = item.price;
+            this.itemToDisplay = item;
+            this.showModal = true;
+            this.showContainer = container;
+        },
 
-      axios.post('/api/store/item/' + item.id + '/change-price', {
-        'price': newPrice,
-        'containerType': this.showContainer
-      })
-          .then(() => {
-            this.logSuccess(item.name + ' price changed to ' + newPrice + ' coins');
-          }).catch(error => {
-        this.logError('Changing price failed: ' + error.message);
-      });
-    },
+        changeItemPrice(item) {
 
-    asset(path) {
-      let base_path = window._asset || '';
+            if (!item) {
+                return;
+            }
 
-      return base_path + path;
-    },
+            let newPrice = item.price;
+
+            axios.post('/api/store/item/' + item.id + '/change-price', {
+                'price': newPrice,
+                'containerType': this.showContainer
+            })
+                .then(() => {
+                    this.logSuccess(item.name + ' price changed to ' + newPrice + ' coins');
+                }).catch(error => {
+                this.logError('Changing price failed: ' + error.message);
+            });
+        },
 
-    getInventoryItem(index) {
-      return this.customer.inventory.items.find(
-          item => parseInt(item.pivot.inventory_slot_number) === parseInt(index)
-      );
-    },
+        asset(path) {
+            let base_path = window._asset || '';
 
-    getStoreItem(index) {
-      return this.trader.store.items.find(
-          item => parseInt(item.pivot.inventory_slot_number) === parseInt(index)
-      );
-    },
+            return base_path + path;
+        },
 
-    isEquipped(index) {
-      return this.getInventoryItem(index) && this.getInventoryItem(index).pivot.status === 'equipped';
-    },
+        getInventoryItem(index) {
+            return this.customer.inventory.items.find(
+                item => parseInt(item.pivot.inventory_slot_number) === parseInt(index)
+            );
+        },
 
-    startDrag(evt, itemIndex, container) {
-      evt.dataTransfer.dropEffect = 'move';
-      evt.dataTransfer.effectAllowed = 'move';
+        getStoreItem(index) {
+            return this.trader.store.items.find(
+                item => parseInt(item.pivot.inventory_slot_number) === parseInt(index)
+            );
+        },
 
-      this.sourceContainer = container;
+        isEquipped(index) {
+            return this.getInventoryItem(index) && this.getInventoryItem(index).pivot.status === 'equipped';
+        },
 
-      evt.dataTransfer.setData('itemIndex', itemIndex);
-    },
+        startDrag(evt, itemIndex, container) {
+            evt.dataTransfer.dropEffect = 'move';
+            evt.dataTransfer.effectAllowed = 'move';
 
-    onDrop(evt, container) {
-      const itemIndex = evt.dataTransfer.getData('itemIndex');
+            this.sourceContainer = container;
 
-      if (container === this.sourceContainer) {
-        return;
-      }
+            evt.dataTransfer.setData('itemIndex', itemIndex);
+        },
 
-      if (container === 'store') {
-        let inventoryItem = this.getInventoryItem(itemIndex);
+        onDrop(evt, container) {
+            const itemIndex = evt.dataTransfer.getData('itemIndex');
 
-        this.sell(inventoryItem);
-      } else {
+            if (container === this.sourceContainer) {
+                return;
+            }
 
-        let storeItem = this.getStoreItem(itemIndex);
+            if (container === 'store') {
+                let inventoryItem = this.getInventoryItem(itemIndex);
 
-        this.buy(storeItem);
-      }
-    },
+                this.sell(inventoryItem);
+            } else {
 
-    logSuccess(message) {
-      this.$root.$emit('successHappened', message);
-    },
+                let storeItem = this.getStoreItem(itemIndex);
 
-    logError(error) {
-      this.$root.$emit('errorHappened', error);
-    },
-  }
+                this.buy(storeItem);
+            }
+        },
+
+        logSuccess(message) {
+            this.$root.$emit('successHappened', message);
+        },
+
+        logError(error) {
+            this.$root.$emit('errorHappened', error);
+        },
+    }
 };
 </script>
 
 <style scoped>
 .modal-item-price-image img {
-  height: 210px;
-  width: 100%;
-  background-color: black;
+    height: 210px;
+    width: 100%;
+    background-color: black;
 }
 
 .modal-item-effects {
-  vertical-align: middle;
-  margin: 0;
+    vertical-align: middle;
+    margin: 0;
 }
 
 .model-item-attributes-table th, .model-item-attributes-table td {
-  vertical-align: middle;
-  font-size: small;
-  white-space: nowrap;
+    vertical-align: middle;
+    font-size: small;
+    white-space: nowrap;
 }
 </style>