diff --git a/html/skillData.js b/html/skillData.js index 838739b..e7e8a2f 100644 --- a/html/skillData.js +++ b/html/skillData.js @@ -1,38 +1,82 @@ -var skillList = angular.module('SkillsList', ['ui.bootstrap', 'ngSanitize']) -.controller('SkillListControl', function ($scope, $http) { +var SkillData = angular.module('SkillsList', ['ui.bootstrap', 'ngSanitize', 'angularBootstrapNavTree']); +SkillData.controller('SkillMainDataController', ['$scope', '$http', function ($scope, $http) { $scope.skills = [] - $scope.currentPage=1 - $scope.numPerPage=10 - $scope.maxSize=5 $scope.rawSkills = [] - - $scope.$watch("currentPage + numPerPage", function() { - var begin = (($scope.currentPage - 1) * $scope.numPerPage), - end = begin + $scope.numPerPage; - $scope.skills = $scope.rawSkills.slice(begin, end); - }) + $scope.rawLineData = {} + $scope.rawSkillData = {} + $scope.skillNames = [] $scope.buildSkillList = function(skillTable) { + $scope.rawSkillData = skillTable; $scope.rawSkills = []; for( v in skillTable) { $scope.rawSkills.push(skillTable[v]); } - $scope.skills = $scope.rawSkills.slice(0, $scope.numPerPage); + } + + $scope.setSkills = function() { + $scope.skillNames = this.data.skills } $http.get('skilldata.json') .then(function(res) { $scope.buildSkillList(res.data.skills); - $scope.lines = res.data.lines; + $scope.rawLineData = res.data.lines; }); -}) -.filter('info', function() { - return function(input, label, suffix) { - if(input == '' || input == 0) { return ''; } - return "<div class='info'><b>" + label + "</b> " + input + suffix + "</div>"; - }; -}) -.filter('fitQualityClass', function() { +}]); +SkillData.controller('SkillListController', ['$scope', function($scope) { + $scope.currentPage=1 + $scope.numPerPage=5 + $scope.maxSize=5 + $scope.$watch("currentPage + numPerPage", function() { + var begin = (($scope.currentPage - 1) * $scope.numPerPage), + end = begin + $scope.numPerPage; + $scope.skills = $scope.rawSkills.slice(begin, end); + }); + + $scope.$watch("skillNames", function(names) { + if(names.length == 0) return; + var skillObjs = [] + var obj + for(k in names) { + skillObjs.push($scope.rawSkillData[names[k]]); + } + $scope.skills = skillObjs; + }); +}]); +SkillData.controller('SkillLineController', ['$scope', function ($scope) { + $scope.skillLineTree = [] + $scope.linesTree = {}; + $scope.$watch("rawLineData", function() { + var data = $scope.rawLineData + $scope.skillLineTree = [] + for(i in data) { + var skillLines = data[i] + line = { + onSelect: $scope.openBranch, + label: i, + children: [] + } + for(j in skillLines) { + line.children.push({ + label: j.replace("'",""), + onSelect: $scope.setSkills, + data: { skills: skillLines[j] } + }) + } + $scope.skillLineTree.push(line) + } + }); + + $scope.openBranch = function(branch) { + $scope.linesTree.collapse_all() + branch.expanded = true + } +}]); +SkillData.controller('LoadoutController', ['$scope', function ($scope) { + +}]); +SkillData.filter('fitQualityClass', function() { return function(input) { input == input || 0 if(input > 0.999) { @@ -42,9 +86,9 @@ var skillList = angular.module('SkillsList', ['ui.bootstrap', 'ngSanitize']) } else { return 'label-danger'; } - }; -}) -.filter('resource',function() { + } +}); +SkillData.filter('resource',function() { return function(input, label, suffix) { if(input == '' || input == 0) { return ''; } switch(input) { @@ -59,35 +103,60 @@ var skillList = angular.module('SkillsList', ['ui.bootstrap', 'ngSanitize']) default: return input; } - }; -}) -.filter('fID', function() { + } +}); +SkillData.filter('fID', function() { return function(input) { input = input || ''; - return input.replace(/(##f[0-9]+##)/,'<span class="formulaID">$1</span>'); + return input.replace(/(##f[0-9]+##)/g,'<span class="formulaID">$1</span>'); } -}) -.filter('nl2br', function() { +}); +SkillData.filter('divide', function() { + return function(input, amount) { + return Number(input) / Number(amount); + } +}); +SkillData.filter('nl2br', function() { return function(input) { input = input || ''; - return input.replace(/\n/,'<br />'); - } -}) -.directive("skill-desc", function() { - function sanitize(scope, element, attrs) { - element.html(attrs.skill-desc.replace(/\n/,'<br />')) + return input.replace(/\n/g,'<br />'); } +}); +SkillData.directive('skillDesc', function() { return { - transclude: true, - link: sanitize + restrict: 'E', + scope: true, + link: function(scope, element, attrs) { + var desc = scope.skill.description.replace(/\n/g,'<br />') + desc = desc.replace(/Flame Damage/g, '<span class="label dmg-flame">Flame Damage</span>') + desc = desc.replace(/Magic Damage/g, '<span class="label dmg-magic">Magic Damage</span>') + desc = desc.replace(/Ice Damage/g, '<span class="label dmg-ice">Ice Damage</span>') + desc = desc.replace(/Cold Damage/g, '<span class="label dmg-ice">Cold Damage</span>') + desc = desc.replace(/Shock Damage/g, '<span class="label dmg-shock">Shock Damage</span>') + desc = desc.replace(/Poison Damage/g, '<span class="label dmg-poison">Poison Damage</span>') + desc = desc.replace(/Disease Damage/g, '<span class="label dmg-disease">Disease Damage</span>') + desc = desc.replace(/Physical Damage/g, '<span class="label dmg-physical">Physical Damage</span>') + element.html(desc.replace(/(##f[0-9]+##)/g,'<span class="formulaID">$1</span>')) + } }; -}) -.directive("rsq", function() { +}); +SkillData.directive("rsq", function() { return { scope: { rsqValue: '=value', }, template: '<span class="rsq label {{fitQualityClass}}">{{rsqValue|number:4}}</span>' } -}) -; \ No newline at end of file +}); + +SkillData.directive('skillInfo', function() { + return { + restrict: 'E', + scope: { + label: '@', + value: '@', + suffix: '@' + }, + template: '<div class="info" ng-show="{{value}} > 0"><b>{{label}}:</b> {{value}}{{suffix}}</div>' + } +}) \ No newline at end of file diff --git a/html/skillFormulas.html b/html/skillFormulas.html index 7e7577b..e9b172a 100644 --- a/html/skillFormulas.html +++ b/html/skillFormulas.html @@ -5,16 +5,31 @@ <script src="ui-bootstrap-tpls-0.12.1.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.0/angular-sanitize.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> + <script src="abn_tree_directive.js"></script> <script src="skillData.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"> + <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> + <link rel="stylesheet" href="abn_tree.css"> <link rel="stylesheet" href="style.css"> </head> -<body ng-controller="SkillListControl"> +<body ng-controller="SkillMainDataController"> <h1>Skill data</h1> -<div class="col"> - <div id="mainSkillList" id="skill-list"> - <div class="paginateContain"> + +<div class="row container center-block" id="root"> +<div class="col-md-2" ng-controller="SkillLineController" id="skillLineSelect"> +<br /><br /> + <abn-tree + tree-control="linesTree" + tree-data="skillLineTree" + icon-leaf="" + icon-collapse="" + on-select="toggleBranch(branch)"> + </abn-tree> +</div> +<div class="col-md-5" ng-controller="SkillListController"> + <div id="mainSkillList" class="skill-list"> + <!--<div class="paginateContain"> <pagination ng-model="currentPage" total-items="rawSkills.length" @@ -22,13 +37,20 @@ max-size="maxSize" boundary-links="true"> </pagination> - </div> - <div class="skill" ng-repeat="skill in skills"> + </div>--> + <div class="skill" ng-repeat="skill in skills | orderBy:'name'"> <h2>{{skill.name}}</h2> <div class="cost"><b>Base Cost:</b> {{skill.cost}} <span ng-bind-html="skill.mechanic | resource"></span></div> - - <p ng-bind-html="skill.description|nl2br|fID"></p> - <h3 ng-show="skill.fit.length>0">Formulas</h3> + <skill-info label="Target" value="{{skill.target}}" suffix=""></skill-info> + <skill-info label="Cast" value="{{skill.castTime | divide:1000}}" suffix="sec"></skill-info> + <div class="info" ng-show="{{skill.castTime==0 && skill.channelTime==0}}" suffix=""><b>Cast:</b> Instant</div> + <skill-info label="Channel" value="{{skill.channelTime | divide:1000}}" suffix="sec"></skill-info> + <skill-info label="Duration" value="{{skill.durationMS | divide:1000}}" suffix="sec"></skill-info> + <skill-info label="Distance" value="{{skill.distance | divide:100}}" suffix="m"></skill-info> + <skill-info label="Range" value="{{skill.maxRange | divide:100}}" suffix="m"></skill-info> + <skill-info label="Radius" value="{{skill.radius | divide:100}}" suffix="m"></skill-info> + <skill-desc></skill-desc> + <h3 ng-show="{{skill.fit.length}} > 0">Formulas</h3> <div class="formula" ng-repeat="(id,fit) in skill.fit"> <span class="formulaID">{{id}}</span><div class="eqn">= <span class="coef">{{fit.mainCoef|number:6}}</span> × <span class="var">MainStat</span> @@ -36,7 +58,7 @@ <span class="rsq label {{fit.rsq|fitQualityClass}}">R<sup>2</sup>: {{fit.rsq|number:4}}</span> </div> </div> - <div class="paginateContain"> + <!--<div class="paginateContain"> <pagination ng-model="currentPage" total-items="rawSkills.length" @@ -44,12 +66,80 @@ max-size="maxSize" boundary-links="true"> </pagination> - </div> + </div>--> </div> </div> +<div class="col-md-5 well" ng-controller="LoadoutController"> + <h3>Scratch</h3> + <p>Just testing designs</p> + <p>Colored damage types:</p> + <p><span class="label dmg-flame">Flame</span> + <span class="label dmg-ice">Ice</span> + <span class="label dmg-lightning">Lightning</span> + <span class="label dmg-poison">Poison</span> + <span class="label dmg-disease">Disease</span> + <span class="label dmg-physical">Physical</span> + <span class="label dmg-magic">Magic</span></p><br /> + <p>Color buffs. Would make it show information on mouseover. Will probably style +/- and major/minor</p> + <p><span class="label" style="background-color:#CFC;color:#333">Empower</span> + <span class="label" style="background-color:#CFC;color:#333">Major Expedition</span> + <span class="label" style="background-color:#FCC;color:#333">Major Fracture</span></p> -<div class="col"> - <div id="selectedSkillList"> + <p>What I'd like to go towards for skill info. Hovering over the info square would popup full text. + Might not be possible to automate extraction, though</p> + <div class="skill"> + <h2>Burning Breath <i class="fa fa-info-circle"></i></h2> + <div class="cost"><b>Base Cost:</b> 2226 <span class="stam">Stamina</span></div> + <div class="info"><b>Cast:</b> Instant</div> + <div class="info"><b>Radius:</b> 1000</div> + <div class="info"><b>Target:</b> Cone</div> + <p> + <b>Instant:</b> <span class="label" style="background-color:#900">Flame Damage</span> + <br /> + <span class="coef">0.025794</span> × <span class="var stam">Stamina</span> + + <span class="coef">0.26987</span> × <span class="var stam">Power</span> + </p> + <p> + <b>Over 8 seconds:</b> <span class="label" style="background-color:#900">Flame Damage</span> + <span class="label" style="background-color:#FCC;color:#333">Major Fracture</span><br> + <span class="coef">0.090580</span> × <span class="var stam">Stamina</span> + + <span class="coef">0.95570</span> × <span class="var stam">Power</span> + </p> + </div> + + <p>Eventually, will be able to select skills into 3rd column for skill bar. Will probably have to make this more compact though.</p> + <p>Perhaps something like this for each bar</p> + <div class="skill"> + <div style="width: 40px; height:40px; border: 1px solid black; display:inline-block; margin: 10px;"></div> + <div style="width: 40px; height:40px; border: 1px solid black; display:inline-block; margin: 10px;"></div> + <div style="width: 40px; height:40px; border: 1px solid black; display:inline-block; margin: 10px;"></div> + <div style="width: 40px; height:40px; border: 1px solid black; display:inline-block; margin: 10px;"></div> + <div style="width: 40px; height:40px; border: 1px solid black; display:inline-block; margin: 10px;"></div> + <div style="width: 40px; height:40px; border: 1px solid black; display:inline-block; margin: 10px; margin-left:50px"></div> + <h3>Burning Breath</h3> + <span class="label dmg-flame">Flame Damage</span> + <br /> + <span class="coef">0.025794</span> × <span class="var stam">Stamina</span> + + <span class="coef">0.26987</span> × <span class="var stam">Power</span> + <br> + <span class="label" style="background-color:#900">Flame Damage</span> + <span class="label" style="background-color:#FCC;color:#333">Major Fracture</span><br> + <span class="coef">0.090580</span> × <span class="var stam">Stamina</span> + + <span class="coef">0.95570</span> × <span class="var stam">Power</span> + + <h3>Degeneration</h3> + <span class="label dmg-magic">Magic Damage</span><span class="label" style="background-color:#CFC;color:#333">Major Sorcery</span> + <br /> + <span class="coef">0.025794</span> × <span class="var magk">Magicka</span> + + <span class="coef">0.26987</span> × <span class="var magk">Power</span> + <br> + <span class="label dmg-heal">Healing</span> + <br /> + <span class="coef">0.025794</span> × <span class="var magk">Magicka</span> + + <span class="coef">0.26987</span> × <span class="var magk">Power</span> + </div> +</div> </div> +<br /> </body> </html> \ No newline at end of file diff --git a/html/style.css b/html/style.css index 35c432c..58e03f9 100644 --- a/html/style.css +++ b/html/style.css @@ -1,4 +1,8 @@ /* CSS Document */ +body { + height: 100%; +} + h1 { text-align: center; } @@ -10,9 +14,10 @@ h1 { .skill h2 { display: inline-block; font-size: 1.2em; - width: 375px; + width: 60%; margin: 5px 0px 10px 10px; color:#06C; + font-weight: bold; } .skill h3 { @@ -28,7 +33,7 @@ h1 { .skill .cost { text-align: right; - width: 200px; + width: 35%; } .skill .cost b { @@ -36,14 +41,15 @@ h1 { } .skill .info { - width: 125px; - font-size: 0.8em; + display: inline-block; + font-size: 0.9em; margin: 0px 8px; } -.skill p { +.skill p, .skill skill-desc { margin: 0px; padding: 10px; + display: block; font-size: 0.95em; } @@ -52,11 +58,22 @@ h1 { .ultm { color:#666; font-weight: bold; } .health { color:#900; font-weight: bold; } +.dmg-flame { background-color:#900 } +.dmg-ice { background-color:#09F } +.dmg-lightning, .dmg-shock { background-color:#609 } +.dmg-poison { background-color:#360 } +.dmg-disease { background-color:#960 } +.dmg-physical { background-color:#C60 } +.dmg-magic { background-color:#099 } +.dmg-heal { background-color:#CC3 } + .formulaID { color:#999; font-style:italic; } .formula { padding: 2px 10px; } .eqn { font-family: "Courier New", Courier, monospace; + font-size: 0.85em; + text-align: center; display: inline-block; }