Merge pull request #1 from pemcne/eventbus

EventBus and Engine overhaul

src/Engine.js

@@ -1,9 +1,40 @@
-const buyItem = (store, item, count, cost) => {
-  store.dispatch('buy', {
-    item: item,
-    amount: count,
-    cost: cost
-  })
-}
+// Set up the event bus
+import EventBus from '@/modules/EventBus.js'
+
+export default {
+  store: null,
+  eventBus: EventBus,
+  buyItem (item, amount, cost) {
+    this.store.dispatch('buy', {
+      item,
+      amount,
+      cost
+    })
+  },
+  tick () {
+    const timestamp = Math.floor(new Date() / 1000)
+    EventBus.emit('tick', {current: timestamp, previous: this.store.getters.timestamp})
+    this.store.dispatch('setTime', {timestamp})
+  },
+  start () {
+    this.interval = setInterval(() => this.tick(), 1000)
 
-export {buyItem}
+    // Set up the other listeners
+    EventBus.on('tick', () => this.income())
+  },
+  stop () {
+    clearInterval(this.interval)
+    EventBus.reset()
+  },
+  income () {
+    let income = 0
+    for (const key in this.store.getters.inventory) {
+      const resource = this.store.getters.resource(key)
+      const amount = this.store.getters.inventory[key]
+      income += amount * resource.income
+    }
+    this.store.dispatch('income', {
+      amount: income
+    })
+  }
+}

src/components/Market.vue

@@ -1,12 +1,12 @@
 <template>
   <div id="market">
-    <button v-on:click="buyWorker()">Buy worker - ${{workerCost}}</button>
+    <button v-on:click="buyWorker" shortCode="worker">Buy worker - ${{workerCost}}</button>
   </div>
 </template>
 
 <script>
 import {mapGetters} from 'vuex'
-import {buyItem} from '@/Engine.js'
+import Engine from '@/Engine.js'
 
 export default {
   name: 'Market',
@@ -29,9 +29,9 @@ export default {
     }
   },
   methods: {
-    buyWorker () {
+    buyWorker (event) {
       // Call the external engine method for buyItem
-      buyItem(this.$store, 'worker', 1, this.workerCost)
+      Engine.buyItem('worker', 1, this.workerCost)
     }
   }
 }

src/components/ResourceList.vue

@@ -19,7 +19,6 @@
 <script>
 import {mapGetters} from 'vuex'
 import ResourceItem from './ResourceItem'
-import EventBus from '../EventBus.js'
 
 // Displays the inventory or resources
 export default {
@@ -33,39 +32,6 @@ export default {
       money: 'money',
       inventory: 'inventory'
     })
-  },
-  methods: {
-    getResource (shortCode) {
-      return this.$store.getters.resource(shortCode)
-    }
-  },
-  mounted () {
-    EventBus.$on('tick', (timestamp) => {
-      // Total income
-      let income = 0
-
-      // Loop through every item in the inventory and compute income
-      for (const key in this.inventory) {
-        // Get the resource object with the information
-        const resource = this.getResource(key)
-        // Get the amount from the inventory
-        const amount = this.inventory[key]
-        // Run the income calculatations
-        income += amount * resource.income
-      }
-      // Placeholder to account for drift when persistent storage is online
-      // let rate = timestamp - this.$store.getters.timestamp
-      // if (rate < 2) {
-      //   // Only get half income while away
-      //   income = income * (rate / 2)
-      // }
-
-      console.log('income', income)
-      // Call the store action for income and pass the amount
-      this.$store.dispatch('income', {
-        amount: income
-      })
-    })
   }
 }
 </script>

src/main.js

@@ -3,7 +3,8 @@
 import Vue from 'vue'
 import App from './App'
 import store from './store'
-import EventBus from './EventBus.js'
+// import EventBus from './EventBus.js'
+import Engine from '@/Engine.js'
 
 Vue.config.productionTip = false
 
@@ -17,20 +18,12 @@ new Vue({
     counter: 0
   },
   mounted () {
-    // Call tick first for inital state
-    this.tick()
-    // Now start the clock
-    this.$options.interval = setInterval(this.tick, 1000)
+    Engine.store = this.$store
+    Engine.start()
   },
   beforeDestroy () {
-    clearInterval(this.$options.interval)
+    Engine.stop()
   },
   methods: {
-    // This fires an event on the EventBus every second
-    // Primary driver for the game, should probably move to Engine.js
-    tick () {
-      const timestamp = new Date() / 1000
-      EventBus.$emit('tick', timestamp)
-    }
   }
 })

src/modules/EventBus.js

@@ -0,0 +1,82 @@
+// Originally borrowed from https://gist.github.com/zangue/7384f593df908d4a7ee2
+
+class EventBus {
+  constructor () {
+    this.listeners = {}
+  }
+
+  _getListenerIdx (eventName, callback, scope) {
+    let eventListeners = this.listeners[eventName]
+    let i
+    let idx = -1
+
+    if (!eventListeners || eventListeners.length === 0) {
+      return idx
+    }
+    for (i = 0; i < eventListeners.length; i++) {
+      if (eventListeners[i].callback === callback &&
+        (!scope || scope === eventListeners[i].scope)) {
+        idx = i
+        break
+      }
+    }
+    return idx
+  }
+
+  on (eventName, callback, scope) {
+    let listener,
+      idx
+
+    if (!eventName) {
+      throw new Error('Event name cannot be null or undefined')
+    }
+
+    if (!callback || typeof (callback) !== 'function') {
+      throw new Error('Listener must be of type function.')
+    }
+
+    idx = this._getListenerIdx(eventName, callback, scope)
+
+    if (idx >= 0) return
+
+    listener = {
+      callback: callback,
+      scope: scope
+    }
+
+    this.listeners[eventName] = this.listeners[eventName] || []
+    this.listeners[eventName].push(listener)
+  }
+
+  unsubscribe (eventName, callback, scope) {
+    let idx
+    if (!eventName || !callback || !this.listeners[eventName]) {
+      return
+    }
+    idx = this._getListenerIdx(eventName, callback, scope)
+    if (idx === -1) return
+    this.listeners[eventName].splice(idx, 1)
+  }
+
+  emit (eventName, args) {
+    let eventListeners = this.listeners[eventName]
+
+    if (!eventName || !this.listeners[eventName]) {
+      return
+    }
+
+    args = args || {}
+
+    eventListeners.forEach((listener) => {
+      listener.callback.call(listener.scope, args)
+    })
+  }
+
+  reset () {
+    this.listeners = {}
+  }
+}
+
+// Singleton
+let eventBus = new EventBus()
+export default eventBus

src/store/index.js

@@ -25,7 +25,7 @@ const state = {
     cost: 10,
     rate: 0.2
   }],
-  timestamp: new Date() / 1000
+  timestamp: Math.floor(new Date() / 1000)
 }
 
 // Define getters here
@@ -56,6 +56,9 @@ const actions = {
   },
   income ({commit}, {amount}) {
     commit('INCOME', {amount})
+  },
+  setTime ({commit}, {timestamp}) {
+    commit('SETTIME', {timestamp})
   }
 }
 
@@ -73,6 +76,9 @@ const mutations = {
   },
   INCOME (state, {amount}) {
     state.money += amount
+  },
+  SETTIME (state, {timestamp}) {
+    state.timestamp = timestamp
   }
 }