Started hooking things up to the GrimoireJS library. Thinks work!

app.js

@@ -5,9 +5,16 @@
         //'ngRoute',
         'ui.bootstrap',
         'ui.slimscroll',
+        'zeroclipboard',
         'grimoire.controller',
         ]);
 
+    app.config(['uiZeroclipConfigProvider', function(uiZeroclipConfigProvider) {
+        uiZeroclipConfigProvider.setZcConf({
+        swfPath: 'bower_components/zeroclipboard/dist/ZeroClipboard.swf'
+        });
+    }]);
+
 /*
     app.config(['$routeProvider', function($routeProvider) {
         $routeProvider.when('/grimoire', {

bower.json

@@ -25,6 +25,11 @@
     "lodash": "~3.0.0",
     "angular-route": "~1.3.10",
     "slimscroll": "~1.3.3",
-    "angular-slimscroll": "~1.1.2"
+    "angular-slimscroll": "~1.1.2",
+    "zeroclipboard": "~2.2.0",
+    "angular-zeroclipboard": "~0.4.0"
+  },
+  "resolutions": {
+    "angular": ">=1 <1.3.0"
   }
 }

grimoire-controller.js

@@ -1,3 +1,6 @@
+/*global _:false */
+/*global Grimoire:false, Weapons:false, Potions:false, Rings:false, Scrolls:false, Wands:false, Rods:false, Staves:false, WondrousItems:false, Intelligence:false*/
+/*jshint forin: false */
 (function (angular) {
     'use strict';
 
@@ -5,68 +8,134 @@
 
     function GrimoireController() {
         /*jshint validthis: true */
+        var self = this;
         this.welcome = 'Welcome to the Grimoire App!';
+        this.itemCount = [1,1,1];
+
         this.sources = [
         {
             'name': 'Core Rule Book',
-            'sources': ['Armor', 'Weapons', 'Wondrous Items'],
+            'shortName': 'CRB',
+            'sources': ['Armors and Shields', 'Weapons', 'Potions', 'Rings', 'Rods', 'Scrolls', 'Staves', 'Wands', 'Wondrous Items'],
+            'selected': true,
         },
         {
             'name': 'Advanced Player\'s Guide',
-            'sources': ['Armor', 'Weapons', 'Wondrous Items'],
-        },
-        {
-            'name': 'Core Rule Book',
-            'sources': ['Armor', 'Weapons', 'Wondrous Items'],
-        },
-        {
-            'name': 'Advanced Player\'s Guide',
-            'sources': ['Armor', 'Weapons', 'Wondrous Items'],
-        },
-        {
-            'name': 'Core Rule Book',
-            'sources': ['Armor', 'Weapons', 'Wondrous Items'],
-        },
-        {
-            'name': 'Advanced Player\'s Guide',
-            'sources': ['Armor', 'Weapons', 'Wondrous Items'],
+            'shortName': 'APG',
+            'sources': ['Wondrous Items'],
+            'selected': true,
         },
         ];
-        this.itemLists = [
-        {
-            'timestamp': new Date() - 100000,
-            'items': [
-            {
-                'name': '+2 super cool sword',
-                'worth': 5000,
-                'url': 'http://www.google.com'
-            },
-            {
-                'name': 'nifty hat',
-                'worth': 2000,
-                'url': ''
+        this.selected = false;
+        this.checkSource = function(source) {
+            if(source.selected === true) {
+                //uncheck the radio button
+                self.radio = false;
             }
-            ],
-        },
-        {
-            'timestamp': new Date(),
-            'items': [
-            {
-                'name': '+3 super cool sword',
-                'worth': 5000,
-                'url': 'http://www.google.com'
-            },
-            {
-                'name': 'nifty boots',
-                'worth': 2000,
-                'url': ''
+        };
+        this.radio = 0;
+        this.checkRadio = function() {
+            //uncheck all the source checkboxes
+            for( var idx in self.sources) {
+                var source = self.sources[idx];
+                source.selected = false;
             }
-            ],
-        }];
+        };
+
+        this.itemLists = [];
 
         this.copyToClipboard = function(list) {
-            console.log(list);
-        }
+            var text = "~~" + new Date(list.timestamp).toJSON() + "~~<br>";
+            for(var idx in list.items) {
+                text += "* " + list.items[idx].name + "," + list.items[idx].cost + "," + list.items[idx].url + "\n";
+            }
+            text += "----\n" + list.items.notes;
+
+            return text;
+        };
+
+        this.generateItem = function(type, quality, source) {
+            var item;
+            switch(type) { //the radio selected type
+                case "Armors and Shields": item = Grimoire.getArmorOrShield(quality); break;
+                case "Weapons": item = Weapons.getWeapon(quality); break;
+                case "Potions": item = Potions.getPotion(quality); break;
+                case "Rings": item = Rings.getRing(quality); break;
+                case "Scrolls": item = Scrolls.getScroll(quality); break;
+                case "Wands": item = Wands.getWand(quality); break;
+                case "Wondrous Items": item = WondrousItems.getItem(quality, source); break;
+                case "Rods": item = Rods.getRod(quality); break;
+                case "Staves": item = Staves.getStaff(quality); break;
+            }
+            if(item === undefined) {
+                item = {
+                    'name': "ERROR in generating " + String(quality) + " " + String(type),
+                };
+            }
+            return item;
+        };
+
+        this.generateItems = function() {
+            var itemList = {};
+            itemList.items = [];
+
+            if(self.radio) {
+                //console.log("Generating item from " + self.radio);
+                var source = self.radio.split("|");
+                var types = ["minor", "medium", "major"];
+                for(var idx in types) { //for each item level
+                    for(var i = 0; i < self.itemCount[idx]; i++) {
+                        itemList.items.push(self.generateItem(source[1], types[idx]));
+                        }
+                    }
+                }
+            else {
+                var ss = "";
+                for( var idx in self.sources) {
+                    var source = self.sources[idx];
+                    if(source.selected) {
+                        ss += source.shortName + " ";
+                    }
+                }
+                if(ss) {
+                    //console.log("Generating items from " + ss);
+                    itemList.items = Grimoire.getItems(self.itemCount[0], self.itemCount[1], self.itemCount[2]);
+                }
+                else {
+                    console.log("Error: No sources selected");
+                }
+            }
+            itemList.timestamp = new Date();
+            self.addItemList(itemList);
+        };
+
+        this.generateIntelligence = function(cost) {
+            var list = {};
+            var stats = Intelligence.getItemIntelligence(cost).print().split(";");
+            list.notes = "";
+            for(var s in stats) {
+                var stat = stats[s].split(":");
+                //list.notes += "<strong>" + stat[0] + ":</strong> " + stat[1] + "<br>";
+                list.notes += stat[0] + ": " + stat[1] + "\n";
+            }
+
+            list.timestamp = new Date();
+            self.itemLists.push(list);
+        };
+
+        this.addItemList = function(list) {
+            self.itemLists.push(list);
+            self.scrollItemsBottom();
+        };
+
+        this.scrollItemsBottom = function() {
+            //BAD BAD ANGULAR FORM!
+            //The slimscroll item didn't allow for a way to bind to an object
+            //I'm not sure how to do this correctly
+            $('#itemScroll').slimScroll({ scrollBy: 99999}); //just all the way
+            //I couldn't get {start: 'bottom'} to work right
+        };
+
     }
 
     angular

grimoire.css

@@ -14,9 +14,36 @@
 }
 
 .copy {
-    font-size: smaller;
+    font-size: x-small;
 }
 
 .big {
     font-size: 200%;
+}
+
+.sidebar {
+    height: 30em;
+}
+
+.itembar {
+    height: 40em;
+}
+
+.header {
+    height: 2em;
+}
+
+.footer {
+    height: 4em;
+    white-space:nowrap;
+    margin-top: 1em;
+}
+
+.list-header {
+    width: 100%;
+}
+
+input.numberbox {
+    width: 4em;
+    display:inline-block;
 }

index.html

@@ -12,35 +12,49 @@
 </head>
 <body ng-controller="GrimoireController as grimoire">
 
-<div class="col-md-12 menu">{{grimoire.welcome}}</div>
+<div class="col-md-12 big menu header">{{grimoire.welcome}}</div>
 <div class="col-md-12">
-<div class="col-md-3 menu">
-<div slimscroll="{height: '200px', alwaysVisible:true, railVisible:true}">
+<!--LIST OF ITEM SOURCES-->
+<div class="col-md-3 sidebar">
+<div class="list-title menu">Sources:</div>
+<div slimscroll="{height:'auto', alwaysVisible:true, railVisible:true}" id="sourceScroll" class="menu">
     <ul>
-        <li ng-repeat="source in grimoire.sources"><input type="checkbox" value={{source}}>{{source.name}}
+        <li ng-repeat="source in grimoire.sources"><input type="checkbox" value={{source}} ng-model="source.selected" ng-change="grimoire.checkSource(source)">{{source.name}}
             <ul>
-            <li ng-repeat="item in source.sources"><input type="radio" name="source" value={{item}}>{{item}}</li>
+            <li ng-repeat="item in source.sources"><input type="radio" name="source" ng-model="grimoire.radio" value={{source.shortName+'|'+item}} ng-change="grimoire.checkRadio()">{{item}}</li>
             </ul>
         </li>
     </ul>
     </div>
+    <div class="menu">
+    QUICK BUTTONS
+    Get Deity
+    Get Energy Type
+    Get Spell (level)
+    Generate Spell Book (caster level)
+    Generate Item Intelligence (price)
+    </div>
 </div>
-<div class="col-md-9 menu">
-    <div slimscroll="{height: '500px', alwaysVisible:true, railVisible:true}">
+<!--LIST OF ITEM LISTS-->
+<div class="col-md-9 itembar">
+    <div class="menu">History:</div>
+    <div slimscroll="{height:'auto', alwaysVisible:true, railVisible:true, start:'bottom'}" id="itemScroll" class="menu">
     <div class="item-list" ng-repeat="list in grimoire.itemLists">
-        <span><strong>~~{{list.timestamp|date:'medium'}}~~</strong> <input class="copy" type="button" ng-click="grimoire.copyToClipboard(list)" value="Copy to clipboard"></span>
+        <span><strong>~~{{list.timestamp|date:'medium'}}~~</strong> <button ui-zeroclip zeroclip-text="grimoire.copyToClipboard(list)" class="copy" type="button">Copy to clipboard</button></span>
         <ul>
-        <li ng-repeat="item in list.items">{{item.name}} {{item.worth}}gp <a class="super" ng-if="item.url && item.url != ''" href={{item.url}}>link</a></li>
+        <li ng-repeat="item in list.items track by $index">{{item.name}}<span ng-if="item.description"> {{item.description}}</span><span ng-if="item.cost > 0"> {{item.cost|number}}gp</span><a class="super" target="_blank" ng-if="item.url" href={{item.url}}>link</a>
+        <ul ng-if="item.intelligence"><li>{{item.intelligence.print()}}</li></ul></li>
         </ul>
+        {{list.notes}}
     </div>
     </div>
 </div>
 </div>
-<div class="col-md-12 big">
-<div class="col-md-3 menu">Minor Item <input type="number" class="form-control"></div>
-<div class="col-md-3 menu">Medium Item <input type="number" class="form-control"></div>
-<div class="col-md-3 menu">Major Item <input type="number" class="form-control"></div>
-<div class="col-md-3 menu"><input type="button" value="GO"></div>
+<div class="col-md-12 big footer">
+<div class="col-md-3 menu">Minor Item <input type="number" class="numberbox form-control" ng-model="grimoire.itemCount[0]"></div>
+<div class="col-md-3 menu">Medium Item <input type="number" class="numberbox form-control" ng-model="grimoire.itemCount[1]"></div>
+<div class="col-md-3 menu">Major Item <input type="number" class="numberbox form-control" ng-model="grimoire.itemCount[2]"></div>
+<div class="col-md-3 menu"><input type="button" value="GO" ng-click="grimoire.generateItems()"></div>
 </div>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
@@ -67,6 +81,8 @@
 <script type="application/javascript" src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
 <script type="application/javascript" src="bower_components/slimscroll/jquery.slimscroll.js"></script>
 <script type="application/javascript" src="bower_components/angular-slimscroll/angular-slimscroll.js"></script>
+<script type="application/javascript" src="bower_components/zeroclipboard/dist/ZeroClipboard.js"></script>
+<script type="application/javascript" src="bower_components/angular-zeroclipboard/src/angular-zeroclipboard.js"></script>
 
 <script type="application/javascript" src="app.js"></script>
 <script type="application/javascript" src="grimoire-controller.js"></script>