Limited hackmaster support, system switching

README.md

@@ -1,6 +1,13 @@
-# My Spells (5e)
+# My Spells
 ...is a user friendly mobile responsive app designed to do one thing well: _View Spells_.
 
+## Systems Supported
+* Dungeons & Dragons 5e
+* Hackmaster 4e (WIP)
+
+### Will you support _X_ system?
+Anyone who wishes to write up spells for a system in json format matching the same syntax used by the existing systems in this repo is welcome to add their system of choice.
+
 [Check it out on github.io](https://sharpshark28.github.io/my_spells/)!
 
 ## For Developers

dist/app.js

@@ -23,8 +23,23 @@ const clone = obj => JSON.parse(JSON.stringify(obj));
 /**
  * Global store and view holders
  */
-let store = {};
 let view = {};
+let store = {
+    systems: {
+        data: [{
+            friendly: 'Dungeons & Dragons 5e',
+            value: 'dnd5e'
+        }, {
+            friendly: 'HackMaster 4e (WIP)',
+            value: 'hackmaster4e'
+        }]
+    }
+};
+
+/**
+ * See Matching System Friendly and Value
+ */
+const matchingSystemProp = (system, requested) => store.systems.data.find(d => d[requested === 'value' ? 'friendly' : 'value'] === system)[requested];
 
 /**
  * Init Local Storage
@@ -35,11 +50,17 @@ const localStorageDefault = (key, val) => {
 let defaults = {
     tableSortName: 'name',
     tableSortRev: false,
+    system: 'dnd5e',
     classes: [],
     search: ''
 };
 for (let cur in defaults) localStorageDefault(cur, defaults[cur]);
 
+if (window.location.hash) {
+    let urlSystem = window.location.hash.substr(1).split('/')[0];
+    localStorage.setItem('system', store.systems.data.find(d => d.value === urlSystem).value);
+}
+
 /**
  * Render Table Sort
  */
@@ -51,11 +72,18 @@ store.tableSort = {
 view.table_sort = Monkberry.render(table_sort, el('table-sort'));
 view.table_sort.update(store.tableSort);
 
+/**
+ * Render Systems
+ */
+store.systems.current = matchingSystemProp(localStorage.getItem('system'), 'friendly');
+view.systems_list = Monkberry.render(system_list, el('system-list'));
+view.systems_list.update(store.systems);
+
 /**
  * Render Spell List
  */
 view.spell_list = Monkberry.render(spell_list, el('spell-list'));
-view.spell_list.update({});
+view.spell_list.update({ data: false });
 
 /**
  * Render Spell Print List
@@ -77,7 +105,7 @@ store.classes = {
     current: localStorage.getItem('classes') ? localStorage.getItem('classes').split(',') : []
 };
 view.class_list = Monkberry.render(class_list, el('class-list'));
-view.class_list.update(store.classes);
+view.class_list.update({ data: false });
 
 /**
  * Render Search
@@ -314,7 +342,11 @@ $('body')
 // Listen for click on spells to open details
 .on('click', '[data-action-details]', e => {
     let name = $(e.currentTarget).attr('data-action-details');
-    window.location.hash = name;
+    if (name) {
+        window.location.hash = matchingSystemProp(store.systems.current, 'value') + '/' + name;
+    } else {
+        window.location.hash = '';
+    }
     spellDetails(name);
 })
 // Stop propogation if dontprop clicked
@@ -336,15 +368,29 @@ $('.mdl-layout__content').on('scroll', debounce(() => {
     let distance = $('.mdl-layout__content')[0].scrollTop;
     $('[data-template=spell-details]').css('margin-top', distance);
 }, 10));
+// System changed
+$('[data-action=system]').on('change', e => {
+    let system = $(e.currentTarget).val();
+    let systemValue = matchingSystemProp(system, 'value');
+    window.location.hash = '';
+    spellDetails('');
+    store.systems.current = system;
+    localStorage.setItem('system', systemValue);
+    view.spell_list.update({ data: false });
+    view.class_list.update({ data: false });
+    fetchSpells(systemValue);
+});
 
 /**
  * Fetch Spells
  */
-fetch('./spells.json').then(response => response.json()).then(spells => initSpells(spells)).then(spells => {
+const fetchSpells = (system = matchingSystemProp(store.systems.current, 'value')) => fetch(`./systems/${ system }.json`).then(response => response.json()).then(spells => initSpells(spells)).then(spells => {
     store.spells = spells;
     store.classes.data = discoverClasses(spells);
     view.spell_list.update({ data: applyFilters() });
     view.class_list.update(store.classes);
     componentHandler.upgradeDom();
-    if (window.location.hash) spellDetails(window.location.hash.substr(1));
+    if (window.location.hash) spellDetails(window.location.hash.substr(1).split('/')[1]);
+    return spells;
 }).catch(reason => console.error('Unable to retrieve spells list:', reason));
+fetchSpells();

dist/getmdl-select.min.css

@@ -0,0 +1,3 @@
+.getmdl-select .mdl-icon-toggle__label{float:right;margin-top:-30px;color:rgba(0,0,0,0.4)}.getmdl-select.is-focused .mdl-icon-toggle__label{color:#3f51b5}.getmdl-select .mdl-menu__container{width:100% !important}.getmdl-select .mdl-menu__container .mdl-menu{width:100%}
+
+/*# sourceMappingURL=getmdl-select.min.css.map */

dist/getmdl-select.min.js

@@ -0,0 +1,2 @@
+"use strict";window.onload=function(){getmdlSelect.init(".getmdl-select"),document.addEventListener("DOMNodeInserted",function(e){componentHandler.upgradeDom()},!1)};var getmdlSelect={addEventListeners:function(e){var t=e.querySelector("input"),n=e.querySelectorAll("li");[].forEach.call(n,function(e){e.onclick=function(){if(t.value=e.textContent,"createEvent"in document){var n=document.createEvent("HTMLEvents");n.initEvent("change",!1,!0),t.dispatchEvent(n)}else t.fireEvent("onchange")}})},init:function(e){var t=document.querySelectorAll(e);[].forEach.call(t,function(e){getmdlSelect.addEventListeners(e)})}};
+//# sourceMappingURL=getmdl-select.min.js.map

dist/view.js

@@ -988,6 +988,145 @@ spell_list_else1_else1.prototype.update = function (__data__) {
 
 window.spell_list = spell_list;
 
+/**
+ * @class
+ */
+function system_list() {
+  Monkberry.call(this);
+  var _this = this;
+
+  // Create elements
+  var for0 = document.createComment('if');
+  var child0 = {};
+
+  // Update functions
+  this.__update__ = {
+    data: function (data) {
+      Monkberry.cond(_this, for0, child0, system_list_if0, data);
+    }
+  };
+
+  // On update actions
+  this.onUpdate = function (__data__) {
+    if (child0.ref) {
+      child0.ref.update(__data__);
+    }
+  };
+
+  // Set root nodes
+  this.nodes = [for0];
+}
+system_list.prototype = Object.create(Monkberry.prototype);
+system_list.prototype.constructor = system_list;
+system_list.pool = [];
+system_list.prototype.update = function (__data__) {
+  if (__data__.data !== undefined) {
+    this.__update__.data(__data__.data);
+  }
+  this.onUpdate(__data__);
+};
+
+/**
+ * @class
+ */
+function system_list_if0() {
+  Monkberry.call(this);
+  var _this = this;
+
+  // Create elements
+  var div0 = document.createElement('div');
+  var input1 = document.createElement('input');
+  var label2 = document.createElement('label');
+  var ul3 = document.createElement('ul');
+  var children0 = new Monkberry.Map();
+
+  // Construct dom
+  input1.setAttribute("class", "mdl-textfield__input");
+  input1.setAttribute("data-action", "system");
+  input1.setAttribute("type", "text");
+  input1.id = "system";
+  input1.setAttribute("readonly", "");
+  input1.setAttribute("tabIndex", "-1");
+  label2.appendChild(document.createTextNode("System"));
+  label2.setAttribute("class", "mdl-textfield__label mdl-color-text--white");
+  label2.setAttribute("for", "system");
+  ul3.setAttribute("class", "mdl-menu mdl-menu--bottom-left mdl-js-menu");
+  ul3.setAttribute("for", "system");
+  div0.appendChild(input1);
+  div0.appendChild(label2);
+  div0.appendChild(ul3);
+  div0.setAttribute("class", "mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select");
+
+  // Update functions
+  this.__update__ = {
+    current: function (current) {
+      input1.value = current;;
+    },
+    data: function (data) {
+      Monkberry.loop(_this, ul3, children0, system_list_if0_for0, data, {"value":"system"});
+    }
+  };
+
+  // On update actions
+  this.onUpdate = function (__data__) {
+    children0.forEach(function (view) {
+      view.update(__data__);
+      view.update(view.__state__);
+    });
+  };
+
+  // Set root nodes
+  this.nodes = [div0];
+}
+system_list_if0.prototype = Object.create(Monkberry.prototype);
+system_list_if0.prototype.constructor = system_list_if0;
+system_list_if0.pool = [];
+system_list_if0.prototype.update = function (__data__) {
+  if (__data__.current !== undefined) {
+    this.__update__.current(__data__.current);
+  }
+  if (__data__.data !== undefined) {
+    this.__update__.data(__data__.data);
+  }
+  this.onUpdate(__data__);
+};
+
+/**
+ * @class
+ */
+function system_list_if0_for0() {
+  Monkberry.call(this);
+  this.__state__ = {};
+
+  // Create elements
+  var li0 = document.createElement('li');
+  var text1 = document.createTextNode('');
+
+  // Construct dom
+  li0.appendChild(text1);
+  li0.setAttribute("class", "mdl-menu__item");
+
+  // Update functions
+  this.__update__ = {
+    system: function (system) {
+      text1.textContent = system.friendly;
+    }
+  };
+
+  // Set root nodes
+  this.nodes = [li0];
+}
+system_list_if0_for0.prototype = Object.create(Monkberry.prototype);
+system_list_if0_for0.prototype.constructor = system_list_if0_for0;
+system_list_if0_for0.pool = [];
+system_list_if0_for0.prototype.update = function (__data__) {
+  if (__data__.system !== undefined && __data__.__index__ !== undefined) {
+    this.__update__.system(__data__.system);
+  }
+};
+
+window.system_list = system_list;
+
 /**
  * @class
  */

dist/view.js.map

@@ -1 +1 @@
-{"version":3,"sources":["class-list.monk","search-field.monk","spell-details.monk","spell-list-print.monk","spell-list.monk","table-sort.monk"],"names":[],"mappings":"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","file":"view.js"}
+{"version":3,"sources":["class-list.monk","search-field.monk","spell-details.monk","spell-list-print.monk","spell-list.monk","system-list.monk","table-sort.monk"],"names":[],"mappings":"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","file":"view.js"}

index.html

@@ -1,12 +1,13 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <title>My Spells 5e</title>
+        <title>My Spells</title>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.teal-pink.min.css" />
+        <link rel="stylesheet" href="./dist/getmdl-select.min.css" />
         <link rel="stylesheet" href="./assets/app.css" />
         <link rel="stylesheet" href="./assets/print.css" />
     </head>
@@ -14,6 +15,7 @@
         <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
             <header class="mdl-layout__header">
                 <div class="mdl-layout__header-row">
+                    <div data-template="system-list"></div>
                     <div class="mdl-layout-spacer"></div>
                     <button data-action="print" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--white">
                         <span class="mdl-badge" data-badge="0">
@@ -103,6 +105,7 @@
         </table>
 
         <script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
+        <script src="./dist/getmdl-select.min.js"></script>
         <script src="./dist/jquery.min.js"></script>
         <script src="./dist/monkberry.js"></script>
         <script src="./dist/remarkable.min.js"></script>

package.json

@@ -7,7 +7,7 @@
     "views": "views/*.monk"
   },
   "scripts": {
-    "postinstall": "cp node_modules/clipboard/dist/clipboard.min.js dist && cp node_modules/jquery/dist/jquery.min.js dist && cp node_modules/monkberry/monkberry.js dist && cp node_modules/remarkable/dist/remarkable.min.js dist",
+    "postinstall": "mkdir -p dist && cp node_modules/clipboard/dist/clipboard.min.js dist && cp node_modules/jquery/dist/jquery.min.js dist && cp node_modules/monkberry/monkberry.js dist && cp node_modules/remarkable/dist/remarkable.min.js dist && cp node_modules/getmdl-select/getmdl-select.min.css dist && cp node_modules/getmdl-select/getmdl-select.min.js dist",
     "views": "monkberry src/views/*.monk --source-map --output dist/view.js",
     "js": "babel src/app.js --out-file dist/app.js",
     "develop": "nodemon --watch src -e monk,js --exec 'npm run views && npm run js'"
@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "clipboard": "^1.5.12",
+    "getmdl-select": "^1.0.4",
     "jquery": "^3.1.0",
     "monkberry": "^4.0.7",
     "remarkable": "^1.6.2"

src/app.js

@@ -24,8 +24,23 @@ const clone = obj => JSON.parse(JSON.stringify(obj));
 /**
  * Global store and view holders
  */
-let store = {};
 let view = {};
+let store = {
+    systems: {
+        data: [{
+            friendly: 'Dungeons & Dragons 5e',
+            value: 'dnd5e'
+        }, {
+            friendly: 'HackMaster 4e (WIP)',
+            value: 'hackmaster4e'
+        }]
+    }
+};
+
+/**
+ * See Matching System Friendly and Value
+ */
+const matchingSystemProp = (system, requested) => store.systems.data.find(d => d[requested === 'value' ? 'friendly' : 'value'] === system)[requested];
 
 /**
  * Init Local Storage
@@ -36,11 +51,17 @@ const localStorageDefault = (key, val) => {
 let defaults = {
     tableSortName: 'name',
     tableSortRev: false,
+    system: 'dnd5e',
     classes: [],
     search: ''
 };
 for (let cur in defaults) localStorageDefault(cur, defaults[cur]);
 
+if (window.location.hash) {
+    let urlSystem = window.location.hash.substr(1).split('/')[0];
+    localStorage.setItem('system', store.systems.data.find(d => d.value === urlSystem).value);
+}
+
 /**
  * Render Table Sort
  */
@@ -52,11 +73,18 @@ store.tableSort = {
 view.table_sort = Monkberry.render(table_sort, el('table-sort'));
 view.table_sort.update(store.tableSort);
 
+/**
+ * Render Systems
+ */
+store.systems.current = matchingSystemProp(localStorage.getItem('system'), 'friendly');
+view.systems_list = Monkberry.render(system_list, el('system-list'));
+view.systems_list.update(store.systems);
+
 /**
  * Render Spell List
  */
 view.spell_list = Monkberry.render(spell_list, el('spell-list'));
-view.spell_list.update({});
+view.spell_list.update({data: false});
 
 /**
  * Render Spell Print List
@@ -78,7 +106,7 @@ store.classes = {
     current: localStorage.getItem('classes') ? localStorage.getItem('classes').split(',') : []
 };
 view.class_list = Monkberry.render(class_list, el('class-list'));
-view.class_list.update(store.classes);
+view.class_list.update({data: false});
 
 /**
  * Render Search
@@ -324,7 +352,11 @@ $('body')
 // Listen for click on spells to open details
 .on('click', '[data-action-details]', e => {
     let name = $(e.currentTarget).attr('data-action-details');
-    window.location.hash = name;
+    if (name) {
+        window.location.hash = matchingSystemProp(store.systems.current, 'value') + '/' + name;
+    } else {
+        window.location.hash = '';
+    }
     spellDetails(name);
 })
 // Stop propogation if dontprop clicked
@@ -349,11 +381,23 @@ $('.mdl-layout__content').on('scroll', debounce(() => {
     let distance = $('.mdl-layout__content')[0].scrollTop;
     $('[data-template=spell-details]').css('margin-top', distance);
 }, 10));
+// System changed
+$('[data-action=system]').on('change', e => {
+    let system = $(e.currentTarget).val();
+    let systemValue = matchingSystemProp(system, 'value');
+    window.location.hash = '';
+    spellDetails('');
+    store.systems.current = system;
+    localStorage.setItem('system', systemValue);
+    view.spell_list.update({data: false});
+    view.class_list.update({data: false});
+    fetchSpells(systemValue);
+})
 
 /**
  * Fetch Spells
  */
-fetch('./spells.json')
+const fetchSpells = (system = matchingSystemProp(store.systems.current, 'value')) => fetch(`./systems/${system}.json`)
     .then(response => response.json())
     .then(spells => initSpells(spells))
     .then(spells => {
@@ -362,6 +406,8 @@ fetch('./spells.json')
         view.spell_list.update({data: applyFilters()});
         view.class_list.update(store.classes);
         componentHandler.upgradeDom();
-        if (window.location.hash) spellDetails(window.location.hash.substr(1));
+        if (window.location.hash) spellDetails(window.location.hash.substr(1).split('/')[1]);
+        return spells;
     })
     .catch(reason => console.error('Unable to retrieve spells list:', reason));
+fetchSpells();

src/views/system-list.monk

@@ -0,0 +1,11 @@
+{% if data %}
+    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select">
+        <input class="mdl-textfield__input" data-action="system" value="{{ current }}" type="text" id="system" readonly tabIndex="-1"/>
+        <label class="mdl-textfield__label mdl-color-text--white" for="system">System</label>
+        <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu" for="system">
+            {% for system of data %}
+                <li class="mdl-menu__item">{{ system.friendly }}</li>
+            {% endfor %}
+        </ul>
+    </div>
+{% endif %}