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/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()

src/modules/Items.js

@@ -0,0 +1,12 @@
+export default {
+  'wood': {
+    craftable: true,
+    weight: 1,
+    description: 'Wood'
+  },
+  'metal': {
+    craftable: true,
+    weight: 5,
+    description: 'Metal'
+  }
+}

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
+  }
 })

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}`)
+      }
+    }
+  }
+}

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
+      })
+    }
+  }
+}

src/App.vue → src/view/App.vue

@@ -1,21 +1,31 @@
 <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
 export default {
   name: 'App',
   components: {
     Market,
-    ResourceList
+    Player
+  },
+  computed: {
+    ...mapState({
+      markets: state => Object.keys(state)
+    })
   }
 }
 </script>