From cd0de901898039a0153ac88dc34fe58a5f363a86 Mon Sep 17 00:00:00 2001
From: pemcne <pemcneill8@gmail.com>
Date: Wed, 4 Jul 2018 16:16:37 -0400
Subject: [PATCH] Market and Player inventory (#2)

* WIP for store layout and two markets

* More wip

* View components are working

* Initial layout for market buys and player inventory

* Added store items and stub functions for buy and sell

* Buy operations working

* Sell functionality working

* Put store inventories in a separate module

* Namespaced the store and refactored to match

* Removed old components

* Reorganized the files to make more sense
---
 src/components/Market.vue               | 44 -------------
 src/components/ResourceItem.vue         | 21 ------
 src/components/ResourceList.vue         | 43 -------------
 src/main.js                             |  9 ++-
 src/modules/Items.js                    | 12 ++++
 src/store/index.js                      | 86 +++----------------------
 src/store/modules/inventory.js          | 50 ++++++++++++++
 src/store/modules/market.js             | 33 ++++++++++
 src/{ => view}/App.vue                  | 18 ++++--
 src/view/components/Inventory.vue       | 51 +++++++++++++++
 src/view/components/Market.vue          | 37 +++++++++++
 src/view/components/MarketInventory.vue | 63 ++++++++++++++++++
 src/view/components/Player.vue          | 25 +++++++
 13 files changed, 297 insertions(+), 195 deletions(-)
 delete mode 100644 src/components/Market.vue
 delete mode 100644 src/components/ResourceItem.vue
 delete mode 100644 src/components/ResourceList.vue
 create mode 100644 src/modules/Items.js
 create mode 100644 src/store/modules/inventory.js
 create mode 100644 src/store/modules/market.js
 rename src/{ => view}/App.vue (54%)
 create mode 100644 src/view/components/Inventory.vue
 create mode 100644 src/view/components/Market.vue
 create mode 100644 src/view/components/MarketInventory.vue
 create mode 100644 src/view/components/Player.vue

diff --git a/src/components/Market.vue b/src/components/Market.vue
deleted file mode 100644
index b38da71..0000000
--- a/src/components/Market.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <div id="market">
-    <button v-on:click="buyWorker" shortCode="worker">Buy worker - ${{workerCost}}</button>
-  </div>
-</template>
-
-<script>
-import {mapGetters} from 'vuex'
-import Engine from '@/Engine.js'
-
-export default {
-  name: 'Market',
-  data () {
-    // Initial state for the component
-    return {
-      workerBaseCost: 10,
-      workerBaseRate: 0.2
-    }
-  },
-  computed: {
-    ...mapGetters({
-      money: 'money',
-      workers: 'workers'
-    }),
-    // Dynamically calculate worker cost based on data and worker count
-    workerCost () {
-      const workerRate = Math.floor(this.workerBaseCost * this.workerBaseRate * this.workers)
-      return this.workerBaseCost + workerRate
-    }
-  },
-  methods: {
-    buyWorker (event) {
-      // Call the external engine method for buyItem
-      Engine.buyItem('worker', 1, this.workerCost)
-    }
-  }
-}
-</script>
-
-<style>
-#market {
-  border: 1px black solid;
-}
-</style>
diff --git a/src/components/ResourceItem.vue b/src/components/ResourceItem.vue
deleted file mode 100644
index 0841bae..0000000
--- a/src/components/ResourceItem.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <tr>
-    <td>{{resource.name}}</td>
-    <td>{{amount}}</td>
-  </tr>
-</template>
-
-<script>
-export default {
-  name: 'ResourceItem',
-  props: ['shortCode', 'amount'],
-  computed: {
-    resource () {
-      return this.$store.getters.resource(this.shortCode)
-    }
-  }
-}
-</script>
-
-<style>
-</style>
diff --git a/src/components/ResourceList.vue b/src/components/ResourceList.vue
deleted file mode 100644
index f26fd40..0000000
--- a/src/components/ResourceList.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-  <div id="resources">
-    Total funds: ${{money}}
-    <table>
-      <tr>
-        <th>Resource</th>
-        <th>Amount</th>
-      </tr>
-      <ResourceItem
-        v-for="(amount, code) in inventory"
-        :key="code"
-        v-bind:short-code="code"
-        v-bind:amount="amount"
-      />
-    </table>
-  </div>
-</template>
-
-<script>
-import {mapGetters} from 'vuex'
-import ResourceItem from './ResourceItem'
-
-// Displays the inventory or resources
-export default {
-  name: 'ResourceList',
-  components: {
-    ResourceItem
-  },
-  // Map the getters from the store
-  computed: {
-    ...mapGetters({
-      money: 'money',
-      inventory: 'inventory'
-    })
-  }
-}
-</script>
-
-<style>
-#resources {
-  border: 1px black solid;
-}
-</style>
diff --git a/src/main.js b/src/main.js
index 01cf5de..96c5c6f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,9 +1,8 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
-import App from './App'
-import store from './store'
-// import EventBus from './EventBus.js'
+import App from './view/App'
+import store from '@/store'
 import Engine from '@/Engine.js'
 
 Vue.config.productionTip = false
@@ -18,8 +17,8 @@ new Vue({
     counter: 0
   },
   mounted () {
-    Engine.store = this.$store
-    Engine.start()
+    // Engine.store = this.$store
+    // Engine.start()
   },
   beforeDestroy () {
     Engine.stop()
diff --git a/src/modules/Items.js b/src/modules/Items.js
new file mode 100644
index 0000000..9974eb6
--- /dev/null
+++ b/src/modules/Items.js
@@ -0,0 +1,12 @@
+export default {
+  'wood': {
+    craftable: true,
+    weight: 1,
+    description: 'Wood'
+  },
+  'metal': {
+    craftable: true,
+    weight: 5,
+    description: 'Metal'
+  }
+}
diff --git a/src/store/index.js b/src/store/index.js
index 43c45cf..26dd165 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,92 +1,22 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import inventory from './modules/inventory'
+import market from './modules/market'
 // import VuexPersist from 'vuex-persist'
 
 Vue.use(Vuex)
 
-// Set up persistent storage
-// Leave this commented out during development
-// const vuexlocalstorage = new VuexPersist({
-//   key: 'railway-simulator',
-//   storage: window.localStorage
-// })
-
-// The initial state of the application
 const state = {
-  money: 100,
-  inventory: {
-    worker: 0
-  },
-  resources: [{
-    shortCode: 'worker',
-    name: 'Worker',
-    description: 'Basic worker',
-    income: 2,
-    cost: 10,
-    rate: 0.2
-  }],
-  timestamp: Math.floor(new Date() / 1000)
-}
-
-// Define getters here
-// Use this.$store.getters.<foo> to access
-const getters = {
-  money: state => state.money,
-  workers: state => state.inventory.worker,
-  timestamp: state => state.timestamp,
-  inventory: state => state.inventory,
-  resource (state) {
-    // This takes a shortCode parameter and returns the item in the resources
-    // list that corresponds with the shortCode
-    return shortCode => state.resources.filter(resource => {
-      return resource.shortCode === shortCode
-    })[0]
-  }
-}
-
-// Define actions here
-// Use this.$store.dispatch('foo', {}) to access
-const actions = {
-  buy ({commit}, {item, amount, cost}) {
-    commit('BUY', {
-      item: item,
-      amount,
-      cost
-    })
-  },
-  income ({commit}, {amount}) {
-    commit('INCOME', {amount})
-  },
-  setTime ({commit}, {timestamp}) {
-    commit('SETTIME', {timestamp})
-  }
-}
-
-// Define the mutations here
-// Ideally, this is what the actions will call to actually change the state
-// Use this.$store.commit('FOO', {}) to access
-const mutations = {
-  BUY (state, {item, amount, cost}) {
-    if (item in state.inventory) {
-      state.inventory[item] += amount
-    } else {
-      state.inventory[item] = amount
-    }
-    state.money -= cost
-  },
-  INCOME (state, {amount}) {
-    state.money += amount
-  },
-  SETTIME (state, {timestamp}) {
-    state.timestamp = timestamp
+  player: {
+    inventory: 'player'
   }
 }
 
 // Export store by default
 export default new Vuex.Store({
   state,
-  getters,
-  mutations,
-  actions
-  // plugins: [vuexlocalstorage.plugin]
+  modules: {
+    inventory,
+    market
+  }
 })
diff --git a/src/store/modules/inventory.js b/src/store/modules/inventory.js
new file mode 100644
index 0000000..485e01c
--- /dev/null
+++ b/src/store/modules/inventory.js
@@ -0,0 +1,50 @@
+export default {
+  namespaced: true,
+  state: {
+    'abc': {
+      items: ['wood'],
+      quantities: {
+        'wood': 2
+      }
+    },
+    'def': {
+      items: ['metal', 'wood'],
+      quantities: {
+        'wood': 0,
+        'metal': 2
+      }
+    },
+    'player': {
+      items: ['wood'],
+      quantities: {
+        'wood': 1
+      }
+    }
+  },
+  getters: {
+    getInventory: state => id => state[id]
+  },
+  mutations: {
+    ADD_ITEM (state, {inv, item, quantity}) {
+      const inventory = state[inv]
+      // Make copy of an object
+      let quantities = Object.assign({}, inventory.quantities)
+      if (inventory.items.includes(item)) {
+        quantities[item] += quantity
+      } else {
+        inventory.items.push(item)
+        quantities[item] = quantity
+      }
+      // Set the copy back to the state
+      inventory.quantities = quantities
+    },
+    REMOVE_ITEM (state, {inv, item, quantity}) {
+      const inventory = state[inv]
+      if (inventory.quantities[item] - quantity >= 0) {
+        inventory.quantities[item] -= quantity
+      } else {
+        throw new Error(`${inv} has less than ${quantity} of ${item}`)
+      }
+    }
+  }
+}
diff --git a/src/store/modules/market.js b/src/store/modules/market.js
new file mode 100644
index 0000000..9d05e3d
--- /dev/null
+++ b/src/store/modules/market.js
@@ -0,0 +1,33 @@
+export default {
+  namespaced: true,
+  state: {
+    'market1': {
+      inventory: 'abc'
+    },
+    'market2': {
+      inventory: 'def'
+    }
+  },
+  getters: {
+    getMarket: state => id => state[id]
+  },
+  actions: {
+    // For cross module commits, put {root: true} on the commit call
+    buyItem ({commit}, {toinv, frominv, item, quantity}) {
+      commit('inventory/REMOVE_ITEM', {
+        inv: frominv,
+        item,
+        quantity
+      }, {
+        root: true
+      })
+      commit('inventory/ADD_ITEM', {
+        inv: toinv,
+        item,
+        quantity
+      }, {
+        root: true
+      })
+    }
+  }
+}
diff --git a/src/App.vue b/src/view/App.vue
similarity index 54%
rename from src/App.vue
rename to src/view/App.vue
index 53ea126..89b85d8 100644
--- a/src/App.vue
+++ b/src/view/App.vue
@@ -1,13 +1,18 @@
 <template>
   <div id="app">
-    <Market/>
-    <ResourceList/>
+    <Market v-for="market in markets" :key="market" v-bind:name="market"/>
+    <Player />
   </div>
 </template>
 
 <script>
 import Market from './components/Market'
-import ResourceList from './components/ResourceList'
+import Player from './components/Player'
+import {createNamespacedHelpers} from 'vuex'
+
+// Set up the helpers
+// TODO: move this to a MarketList
+const { mapState } = createNamespacedHelpers('market')
 
 // Parent root element for the entire application
 // Does nothing but display the children
@@ -15,7 +20,12 @@ export default {
   name: 'App',
   components: {
     Market,
-    ResourceList
+    Player
+  },
+  computed: {
+    ...mapState({
+      markets: state => Object.keys(state)
+    })
   }
 }
 </script>
diff --git a/src/view/components/Inventory.vue b/src/view/components/Inventory.vue
new file mode 100644
index 0000000..1171d3b
--- /dev/null
+++ b/src/view/components/Inventory.vue
@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <p class="invheader">Inventory - {{name}}</p>
+    <table>
+      <tr>
+        <th>Item</th>
+        <th>Quantity</th>
+      </tr>
+      <tr v-for="item in items" :key="item.id">
+        <td>{{item.id}}</td>
+        <td>{{item.quantity}}</td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+import {createNamespacedHelpers} from 'vuex'
+const { mapGetters } = createNamespacedHelpers('inventory')
+
+export default {
+  name: 'Inventory',
+  props: ['name'],
+  computed: {
+    ...mapGetters([
+      'getInventory'
+    ]),
+    inventory () {
+      return this.getInventory(this.name)
+    },
+    items () {
+      return this.inventory.items.map(itemId => {
+        return {
+          id: itemId,
+          quantity: this.getQuantity(itemId)
+        }
+      })
+    }
+  },
+  methods: {
+    getQuantity (item) {
+      return this.inventory.quantities[item]
+    }
+  }
+}
+</script>
+
+<style>
+p.invheader {
+  font-size: 1.5em;
+}
diff --git a/src/view/components/Market.vue b/src/view/components/Market.vue
new file mode 100644
index 0000000..58f471c
--- /dev/null
+++ b/src/view/components/Market.vue
@@ -0,0 +1,37 @@
+<template>
+  <div id="market">
+    <p>Market - {{name}}</p>
+    <MarketInventory v-bind:name="inventory" />
+  </div>
+</template>
+
+<script>
+import MarketInventory from './MarketInventory'
+import {createNamespacedHelpers} from 'vuex'
+
+const { mapGetters } = createNamespacedHelpers('market')
+export default {
+  name: 'Market',
+  props: ['name'],
+  components: {
+    MarketInventory
+  },
+  computed: {
+    ...mapGetters([
+      'getMarket'
+    ]),
+    market () {
+      return this.getMarket(this.name)
+    },
+    inventory () {
+      return this.market.inventory
+    }
+  }
+}
+</script>
+
+<style>
+#market {
+  border: 1px black solid;
+}
+</style>
diff --git a/src/view/components/MarketInventory.vue b/src/view/components/MarketInventory.vue
new file mode 100644
index 0000000..99f5e6f
--- /dev/null
+++ b/src/view/components/MarketInventory.vue
@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <table>
+      <tr>
+        <th>Item</th>
+        <th>Quantity</th>
+        <th>Actions</th>
+      </tr>
+      <tr v-for="item in items" :key="item.id">
+        <td>{{item.id}}</td>
+        <td>{{item.quantity}}</td>
+        <td>
+          <button
+            @click="buy"
+            :item="item.id"
+            :disabled="getQuantity(item.id) <= 0">
+            Buy
+          </button>
+          <button @click="sell" :item="item.id">Sell</button>
+        </td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+import {createNamespacedHelpers} from 'vuex'
+import Inventory from './Inventory'
+
+// Set up helpers
+const { mapActions } = createNamespacedHelpers('market')
+
+export default {
+  name: 'MarketInventory',
+  extends: Inventory,
+  methods: {
+    ...mapActions([
+      'buyItem'
+    ]),
+    getItemFromEvent (event) {
+      return event.target.attributes.getNamedItem('item').value
+    },
+    buy (event) {
+      const item = this.getItemFromEvent(event)
+      this.buyItem({
+        toinv: 'player',
+        frominv: this.name,
+        item,
+        quantity: 1
+      })
+    },
+    sell (event) {
+      const item = this.getItemFromEvent(event)
+      this.buyItem({
+        toinv: this.name,
+        frominv: 'player',
+        item,
+        quantity: 1
+      })
+    }
+  }
+}
+</script>
diff --git a/src/view/components/Player.vue b/src/view/components/Player.vue
new file mode 100644
index 0000000..cdb5c63
--- /dev/null
+++ b/src/view/components/Player.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <p>Player</p>
+    <Inventory v-bind:name="inventory"/>
+  </div>
+</template>
+
+<script>
+import Inventory from './Inventory'
+import {mapState} from 'vuex'
+export default {
+  name: 'Player',
+  components: {
+    Inventory
+  },
+  computed: {
+    ...mapState({
+      player: state => state.player
+    }),
+    inventory () {
+      return this.player.inventory
+    }
+  }
+}
+</script>