[FIX]: Spells now identified by IDs, fixes #17

.eslintignore

@@ -1,3 +1,4 @@
 build/*.js
 config/*.js
 dist/*.js
+tmp/*.js

.gitignore

@@ -1,6 +1,8 @@
 .DS_Store
+tmp/
 node_modules/
 dist/
+src/statics/spells.json
 npm-debug.log
 npm-debug.log.*
 selenium-debug.log

build/generate_index.js

@@ -0,0 +1,38 @@
+'use strict'
+
+const fs = require('fs')
+const spells = require('../src/spells_original.json')
+
+const hashCode = function (str) {
+  let hash = 0, i, chr
+  if (str.length === 0) return hash
+  for (i = 0; i < str.length; i++) {
+    chr = str.charCodeAt(i)
+    hash = ((hash << 5) - hash) + chr
+    hash |= 0
+  }
+  return hash
+}
+
+let spellsWithIDs = spells.map(spell => {
+  spell.id = hashCode(spell.name).toString()
+  return spell
+})
+
+let indexedSpells = spellsWithIDs.map(spell => {
+  return {
+    id: spell.id,
+    name: spell.name,
+    classes: spell.classes,
+    level: spell.level
+  }
+})
+
+let dirs = ['tmp']
+dirs.forEach(dir => {
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir)
+  }
+})
+fs.writeFileSync('./src/statics/spells.json', JSON.stringify(spellsWithIDs))
+fs.writeFileSync('./tmp/spells_index.js', `export default ${JSON.stringify(indexedSpells)};`)

build/script.clean.js

@@ -2,5 +2,5 @@ var
   shell = require('shelljs'),
   path = require('path')
 
-shell.rm('-rf', path.resolve(__dirname, '../dist'))
+shell.rm('-rf', path.resolve(__dirname, '../dist ../tmp'))
 console.log(' Cleaned build artifacts.\n')

build/script.dev.js

@@ -1,5 +1,6 @@
 process.env.NODE_ENV = 'development'
 
+require('./generate_index')
 require('colors')
 
 var

package.json

@@ -47,6 +47,7 @@
     "extract-text-webpack-plugin": "^2.0.0-beta.4",
     "file-loader": "^0.11.1",
     "friendly-errors-webpack-plugin": "^1.1.3",
+    "fs": "0.0.1-security",
     "html-webpack-plugin": "^2.8.1",
     "http-proxy-middleware": "^0.17.0",
     "json-loader": "^0.5.4",

src/App.vue

@@ -37,10 +37,6 @@ function fetchSuccess (data) {
       loaded: true
     }
   })
-  dispatch({
-    type: 'SPELLS_CREATE_INDEX',
-    data
-  })
 }
 
 function fetchFailure (reason) {
@@ -54,7 +50,7 @@ function fetchFailure (reason) {
 }
 
 function fetchSpells () {
-  fetch('./statics/dnd5e.json')
+  fetch('./statics/spells.json')
   .then(response => response.json())
   .then(fetchSuccess)
   .catch(fetchFailure)
@@ -71,8 +67,6 @@ export default {
     }
 
     if (!this.state.spells.loaded) {
-      Loading.show()
-
       fetchSpells()
     }
   }

src/components/Myspells.vue

@@ -35,7 +35,7 @@ export default {
 
       return this.state.chosen.map(chosen => {
         return this.state.indexedSpells.find(spell => {
-          return spell.name === chosen
+          return spell.id === chosen
         })
       })
     }

src/components/Spell.vue

@@ -82,6 +82,7 @@
 </template>
 
 <script>
+import { Loading } from 'quasar'
 import { dispatch, state } from '../store'
 import { capitalize } from '../utils'
 import Marked from 'marked'
@@ -91,14 +92,17 @@ export default {
     return { state }
   },
   mounted () {
-    this.state.lastSpell = this.spell.name
+    if (this.state.spells.loaded === false) {
+      Loading.show()
+    }
+    this.state.lastSpell = this.spell.id
   },
   computed: {
     checked () {
-      return this.state.chosen.indexOf(this.spell.name) >= 0
+      return this.state.chosen.indexOf(this.spell.id) >= 0
     },
     spell () {
-      return this.state.spells.data.find(spell => spell.name === this.$route.params.name)
+      return this.state.spells.data.find(spell => spell.id === this.$route.params.id)
     },
     level () {
       return this.spell.level.toLowerCase() === 'cantrip' ? 'C' : this.spell.level
@@ -124,7 +128,7 @@ export default {
         type: 'CHANGE_CHOSEN',
         data: {
           want,
-          name: this.spell.name
+          id: this.spell.id
         }
       })
     }

src/components/Spellitem.vue

@@ -40,7 +40,7 @@ export default {
       return this.spell.classes.map(cla => capitalize(cla)).join(', ')
     },
     checked () {
-      return this.state.chosen.indexOf(this.spell.name) >= 0
+      return this.state.chosen.indexOf(this.spell.id) >= 0
     }
   },
   data () {
@@ -51,14 +51,14 @@ export default {
   ],
   methods: {
     openSpell (event) {
-      this.$router.push('/spell/' + this.spell.name)
+      this.$router.push('/spell/' + this.spell.id)
     },
     toggle () {
       dispatch({
         type: 'CHANGE_CHOSEN',
         data: {
           want: !this.checked,
-          name: this.spell.name
+          id: this.spell.id
         }
       })
     }

src/components/Spelllist.vue

@@ -9,8 +9,8 @@
         is="spell-item"
         class="item two-lines item-link"
         v-for="spell in filteredSpells"
-        :key="spell.name"
+        :key="spell.id"
-        :ref="spell.name"
+        :ref="spell.id"
         :spell="spell"
       >
       </label>

src/router.js

@@ -23,7 +23,7 @@ export default new VueRouter({
   routes: [
     { path: '/', component: load('Index') }, // Default
     { path: '/my', component: load('Myspells') },
-    { path: '/spell/:name', component: load('Spell') },
+    { path: '/spell/:id', component: load('Spell') },
     { path: '/about', component: load('About') },
     { path: '*', component: load('Error404') } // Not found
   ]

src/store.js

@@ -1,11 +1,12 @@
 import { LocalStorage } from 'quasar'
+import indexedSpells from '../tmp/spells_index'
 
 export let state = {
+  indexedSpells,
   spells: {
     loaded: false,
     data: []
   },
-  indexedSpells: [],
   chosen: [],
   search: '',
   sortBy: 'name',
@@ -18,15 +19,6 @@ export function dispatch (action) {
     case 'SPELLS_RESOLVED':
       state.spells = action.data
       break
-    case 'SPELLS_CREATE_INDEX':
-      state.indexedSpells = action.data.map(spell => {
-        return {
-          name: spell.name,
-          classes: spell.classes,
-          level: spell.level
-        }
-      })
-      break
     case 'LOAD_LOCAL_CHOSEN' :
       state.chosen = LocalStorage.get.item('chosen').split(',')
       break
@@ -36,10 +28,10 @@ export function dispatch (action) {
       break
     case 'CHANGE_CHOSEN':
       if (action.data.want) {
-        state.chosen.push(action.data.name)
+        state.chosen.push(action.data.id)
       }
       else {
-        let index = state.chosen.indexOf(action.data.name)
+        let index = state.chosen.indexOf(action.data.id)
         if (index >= 0) state.chosen.splice(index, 1)
       }
 

src/utils.js

@@ -1 +1 @@
-export let capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
+export const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)