Added tab support to allow for multiple sheets

- Cleaned up the watch code - Moved the character sheet includes into a single include
LupusUmbrae · Mar 11, 2016 · e28c68b · e28c68b
1 parent c9f6af2
commit e28c68b
Show file tree

Hide file tree

Showing 14 changed files with 196 additions and 211 deletions.
diff --git a/kdm.py b/kdm.py
@@ -13,4 +13,4 @@ def show_entries():
   return render_template('index.html')
 
 if __name__ == "__main__":
-  app.run()
+  app.run(host='0.0.0.0')
diff --git a/static/javascript/kdm.js b/static/javascript/kdm.js
@@ -13,32 +13,94 @@
     .module('kdm')
     .run(run);
 
-    run.$inject = ['$rootScope'];
-    jsonify.$inject = ['$rootScope'];
+    run.$inject = ['$rootScope', '$parse'];
 
     function jsonify(scope) {
-        console.log(scope.kdm);
-        return JSON.stringify(scope.kdm);
+        console.log(scope.tabs);
+        return JSON.stringify(scope.tabs);
     }
 
     function load(scope, json) {
         var parsed = JSON.parse(json);
-        scope.kdm = parsed;
+        scope.tabs = parsed;
         scope.$apply();
     }
 
-    function run($rootScope) {
+    function run($rootScope, $parse) {
         $rootScope.jsonify = function() {
             return jsonify($rootScope);
         }
 
         $rootScope.load = function(json) {
             load($rootScope, json);
         }
+
+        $rootScope.addChar = function(json) {
+            addNewChar($rootScope);
+        }
 
-        // TODO: Can we make this nicer? too many lines :(
+        $rootScope.tabs = [];
+
+        addToTabs($rootScope, createEmptyCharSheet("tab-0"));
+
+    }
+
+    function addNewChar(scope) {
+        var id = "tab-" + scope.tabs.length;
+        addToTabs(scope, createEmptyCharSheet(id));
+    }
+
+    function addToTabs(scope, kdm) {
+        var tabs = scope.tabs;
+        tabs.push(kdm);
+        var lastIndex = tabs.length - 1;
+
+        if (kdm.type === "char") {
+            scope.$watch('tabs[' + lastIndex + '].courage.levels', watchCheckboxArray, true);
+            scope.$watch('tabs[' + lastIndex + '].understanding.levels', watchCheckboxArray, true);
+            scope.$watch('tabs[' + lastIndex + '].age', watchCheckboxArray, true);
+            scope.$watch('tabs[' + lastIndex + '].weapon.levels', watchCheckboxArray, true);
+        }
+    }
+
+    function watchCheckboxArray(newVal, oldVal) {
+        if (newVal !== oldVal) 
+        {
+            // find the changed index
+            var index = -1;
+            for (var i = 0; i < newVal.length; i++) 
+            {
+                if (oldVal[i].value !== newVal[i].value) {
+                    index = i;
+                    break;
+                }
+            }
+
+            if (index === -1) {
+                return;
+            }
+
+            var value = newVal[index].value;
+            if (value) {
+                for (var i = 0; i < index; i++) {
+                    newVal[i].value = true;
+                }
+            } else {
+                for (var i = newVal.length - 1; i > index; i--) {
+                    newVal[i].value = false;
+                }
+            }
+        }
+    }
+
+    function createEmptyCharSheet(id) {
 
         var kdm = {};
+        kdm.id = id;
+        kdm.type = "char";
+        kdm.template = "static/templates/char.html"
+
+        // TODO: Can we make this nicer? too many lines :(
 
         // NAME
         var name = {};
@@ -215,107 +277,6 @@
         records.push(abilitiesImpairments);
 
         kdm.records = records;
-
-        $rootScope.kdm = kdm;
-
-        $rootScope.$watch('kdm.courage.levels', function(newVal, oldVal) {
-            if (newVal !== oldVal) 
-            {
-                // find the changed index
-                var index = -1;
-                for (var i = 0; i < newVal.length; i++) 
-                {
-                    if (oldVal[i].value !== newVal[i].value) {
-                        index = i;
-                        break;
-                    }
-                }
-                var value = newVal[index].value;
-                if (value) {
-                    for (var i = 0; i < index; i++) {
-                        $rootScope.kdm.courage.levels[i].value = true;
-                    }
-                } else {
-                    for (var i = newVal.length - 1; i > index; i--) {
-                        $rootScope.kdm.courage.levels[i].value = false;
-                    }
-                }
-            }
-        }, true);
-
-        $rootScope.$watch('kdm.understanding.levels', function(newVal, oldVal) {
-            if (newVal !== oldVal) 
-            {
-                // find the changed index
-                var index = -1;
-                for (var i = 0; i < newVal.length; i++) 
-                {
-                    if (oldVal[i].value !== newVal[i].value) {
-                        index = i;
-                        break;
-                    }
-                }
-                var value = newVal[index].value;
-                if (value) {
-                    for (var i = 0; i < index; i++) {
-                        $rootScope.kdm.understanding.levels[i].value = true;
-                    }
-                } else {
-                    for (var i = newVal.length - 1; i > index; i--) {
-                        $rootScope.kdm.understanding.levels[i].value = false;
-                    }
-                }
-            }
-        }, true);
-
-        $rootScope.$watch('kdm.age', function(newVal, oldVal) {
-            if (newVal !== oldVal) 
-            {
-                // find the changed index
-                var index = -1;
-                for (var i = 0; i < newVal.length; i++) 
-                {
-                    if (oldVal[i].value !== newVal[i].value) {
-                        index = i;
-                        break;
-                    }
-                }
-                var value = newVal[index].value;
-                if (value) {
-                    for (var i = 0; i < index; i++) {
-                        $rootScope.kdm.age[i].value = true;
-                    }
-                } else {
-                    for (var i = newVal.length - 1; i > index; i--) {
-                        $rootScope.kdm.age[i].value = false;
-                    }
-                }
-            }
-        }, true);
-
-        $rootScope.$watch('kdm.weapon.levels', function(newVal, oldVal) {
-            if (newVal !== oldVal) 
-            {
-                // find the changed index
-                var index = -1;
-                for (var i = 0; i < newVal.length; i++) 
-                {
-                    if (oldVal[i].value !== newVal[i].value) {
-                        index = i;
-                        break;
-                    }
-                }
-                var value = newVal[index].value;
-                if (value) {
-                    for (var i = 0; i < index; i++) {
-                        $rootScope.kdm.weapon.levels[i].value = true;
-                    }
-                } else {
-                    for (var i = newVal.length - 1; i > index; i--) {
-                        $rootScope.kdm.weapon.levels[i].value = false;
-                    }
-                }
-            }
-        }, true);
+        return kdm;
     }
 })();
diff --git a/static/templates/char.html b/static/templates/char.html
@@ -0,0 +1,22 @@
+<div class="row">
+  <div class="col-xs-5">
+    <ng-include src="'static/templates/char/name.html'"></ng-include>
+    <ng-include src="'static/templates/char/survival.html'"></ng-include>
+    <ng-include src="'static/templates/char/attributes.html'"></ng-include>
+    <ng-include src="'static/templates/char/brain.html'"></ng-include>
+    <ng-include src="'static/templates/char/armour.html'"></ng-include>
+  </div>
+  <div class="col-xs-5 col-xs-offset-1">
+    <ng-include src="'static/templates/char/age.html'"></ng-include>
+    <ng-include src="'static/templates/char/weapons.html'"></ng-include>
+    <div class="row element bordered" style="padding: 0px;">
+      <div class="col-xs-6" style="padding: 0px;">
+        <ng-include src="'static/templates/char/courage.html'"></ng-include>
+      </div>
+      <div class="col-xs-6" style="border-left: 1px solid black; padding: 0px">
+        <ng-include src="'static/templates/char/understanding.html'"></ng-include>
+      </div>
+    </div>
+    <ng-include src="'static/templates/char/record.html'"></ng-include>
+  </div>
+</div>
diff --git a/static/templates/age.html → static/templates/char/age.html b/static/templates/age.html → static/templates/char/age.html
@@ -1,16 +1,16 @@
 <div class="row element">
-  <div class="col-md-4">
+  <div class="col-xs-4">
     Hunt XP
   </div>
-  <div class="col-md-8">
-    <label ng-repeat="agebox in kdm.age track by $index"  for="age-{{$index}}">
-      <input type="checkbox" ng-class="{level: agebox.level, retire: agebox.retire}" ng-model="agebox.value" id="age-{{$index}}"><span></span>
+  <div class="col-xs-8">
+    <label ng-repeat="agebox in kdm.age">
+      <input type="checkbox" ng-class="{level: agebox.level, retire: agebox.retire}" ng-model="agebox.value"><span></span>
     </label>
   </div>
 </div>
 <div class="row">
   <hr style="margin: 0px">
-  <div class="col-md-12" style="padding-left: 5px; padding-right: 5px;">
+  <div class="col-xs-12" style="padding-left: 5px; padding-right: 5px;">
     <img class="filled-square" src="static/images/filled-square.svg" width="10" height="10">
     <img src="static/images/book-open.svg" width="15" height="15" ng-show="kdm.age[1].value">
     <img src="static/images/book-closed.svg" width="15" height="15" ng-hide="kdm.age[1].value">

diff --git a/static/templates/armour.html → static/templates/char/armour.html b/static/templates/armour.html → static/templates/char/armour.html
@@ -1,47 +1,47 @@
 <div class="row element" ng-repeat="area in kdm.armour">
-  <div class="col-md-12">
+  <div class="col-xs-12">
     <div class="row fill-vertical">
-      <div class="col-md-2">
+      <div class="col-xs-2">
         <div class="sheild">
           <input type="text" size="1" placeholder="0" ng-model="area.value" maxlength="2" size="2">
         </div>
       </div>
 
-      <div class="col-md-8">
+      <div class="col-xs-8">
         <div class="row">
-          <div class="col-md-12">
+          <div class="col-xs-12">
           <img src="static/images/{{area.name | lowercase}}.svg" width="20" height="20">
             <big><strong>{{area.name}}</strong></big>
           </div>
         </div>
         <div class="row">
-          <div class="col-md-12">
+          <div class="col-xs-12">
             <img class="filled-square" src="static/images/filled-square.svg" width="10" height="10">
             Heavy Injury: Knocked Down
           </div>
         </div>
       </div>
 
-      <div class="col-md-2">
+      <div class="col-xs-2">
         <div class="row">
-          <div class="col-md-6">
+          <div class="col-xs-6">
             <label ng-show="area.light != undefined" >
               <input type="checkbox" ng-model="area.light">
               <span></span>
             </label>
           </div>
-          <div class="col-md-6">
+          <div class="col-xs-6">
             <label>
               <input type="checkbox" ng-model="area.heavy" class="level">
               <span></span>
             </label>
           </div>
         </div>
         <div class="row">
-          <div class="col-md-6">
+          <div class="col-xs-6">
             <p ng-show="area.light != undefined">L</p>
           </div>
-          <div class="col-md-6">
+          <div class="col-xs-6">
             H
           </div>
         </div>

diff --git a/static/templates/attributes.html → static/templates/char/attributes.html b/static/templates/attributes.html → static/templates/char/attributes.html
@@ -1,12 +1,12 @@
 <div class="row bordered element" style="padding: 0px;">
-  <div class="col-md-2" ng-repeat="attr in kdm.attrs" style="padding: 5px" ng-class="{attr:!$first}">
+  <div class="col-xs-2" ng-repeat="attr in kdm.attrs" style="padding: 5px" ng-class="{attr:!$first}">
     <div class="row">
-      <div class="col-md-12 attr-val">
+      <div class="col-xs-12 attr-val">
         <input type="text" size="1" ng-model="attr.value">
       </div>
     </div>
     <div class="row">
-      <div class="col-md-12 attr-name">
+      <div class="col-xs-12 attr-name">
         <small>{{attr.name}}</small>
       </div>
     </div>

diff --git a/static/templates/brain.html → static/templates/char/brain.html b/static/templates/brain.html → static/templates/char/brain.html
@@ -1,31 +1,32 @@
 <div class="row bordered element" style="padding: 0px;">
-  <div class="col-md-2">
+  <div class="col-xs-2">
     <div class="row">
-      <div class="col-md-12">
+      <div class="col-xs-12">
+        <br />
         <input type="text" size="1" placeholder="0" ng-model="kdm.brain.value">
       </div>
     </div>
     <div class="row">
-      <div class="col-md-12">
+      <div class="col-xs-12">
         <small>Insanity</small>
       </div>
     </div>
   </div>
 
-  <div class="col-md-9"  style="border-left: 1px solid black; padding: 5px">
+  <div class="col-xs-9"  style="border-left: 1px solid black; padding: 5px">
     <div class="row">
-      <div class="col-md-12">
-        <h3>Brain</h3>
+      <div class="col-xs-12">
+        <big><strong>Brain</strong></big>
       </div>
     </div>
     <div class="row">
-      <div class="col-md-12">
+      <div class="col-xs-12">
         If your insanity is 3+, you are <b>insane</b>
       </div>
     </div>
   </div>
 
-  <div class="col-md-1">
+  <div class="col-xs-1">
     <label>
       <input type="checkbox" ng-model="kdm.brain.wound">
       <span></span>