Add drag and drop. Move more repeat code into directives.

Sasky [04-24-15 - 06:18]
Add drag and drop. Move more repeat code into directives.
Filename
html/demo.html
html/skill-template.html
html/skillData.js
html/skillFormulas.html
html/style.css
diff --git a/html/demo.html b/html/demo.html
new file mode 100644
index 0000000..c1411c4
--- /dev/null
+++ b/html/demo.html
@@ -0,0 +1,113 @@
+<!doctype html>
+<html ng-app="SkillsList">
+<head>
+    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
+    <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="dragdrop/lvl-uuid.js"></script>
+    <script src="dragdrop/lvl-drag-drop.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="SkillMainDataController">
+<h1>Skill data</h1>
+
+<div class="row container center-block" id="root">
+<div class="col-md-2">
+	<div lvl-draggable='true' ng-repeat="(skill,data) in rawSkillData" data-skill="{{skill}}">{{skill}}</div>
+</div>
+
+<div class="col-md-5" ng-controller="LoadoutController">
+	<div x-lvl-drop-target='true' x-on-drop='dropped(dragEl, 0)'><skill-full info="skills[0]"></skill-full></div>
+	<div x-lvl-drop-target='true' x-on-drop='dropped(dragEl, 1)'><skill-full info="skills[1]"></skill-full></div>
+	<div x-lvl-drop-target='true' x-on-drop='dropped(dragEl, 2)'><skill-full info="skills[2]"></skill-full></div>
+	<div x-lvl-drop-target='true' x-on-drop='dropped(dragEl, 3)'><skill-full info="skills[3]"></skill-full></div>
+	<div x-lvl-drop-target='true' x-on-drop='dropped(dragEl, 4)'><skill-full info="skills[4]"></skill-full></div>
+	<div x-lvl-drop-target='true' x-on-drop='dropped(dragEl, 5)'><skill-full info="skills[5]"></skill-full></div>
+	<div x-lvl-drop-target='true' x-on-drop='dropped(dragEl, 6)'><skill-full info="skills[6]"></skill-full></div>
+	<div x-lvl-drop-target='true' x-on-drop='dropped(dragEl, 7)'><skill-full info="skills[7]"></skill-full></div>
+	<div x-lvl-drop-target='true' x-on-drop='dropped(dragEl, 8)'><skill-full info="skills[8]"></skill-full></div>
+	<div x-lvl-drop-target='true' x-on-drop='dropped(dragEl, 9)'><skill-full info="skills[9]"></skill-full></div>
+	<div x-lvl-drop-target='true' x-on-drop='dropped(dragEl, 10)'><skill-full info="skills[10]"></skill-full></div>
+	<div x-lvl-drop-target='true' x-on-drop='dropped(dragEl, 11)'><skill-full info="skills[11]"></skill-full></div>
+</div>
+<div class="col-md-5 well">
+	<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>
+
+    <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> &times; <span class="var stam">Stamina</span>
+                    + <span class="coef">0.26987</span> &times; <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> &times; <span class="var stam">Stamina</span>
+                    + <span class="coef">0.95570</span> &times; <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> &times; <span class="var stam">Stamina</span>
+            + <span class="coef">0.26987</span> &times; <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> &times; <span class="var stam">Stamina</span>
+            + <span class="coef">0.95570</span> &times; <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> &times; <span class="var magk">Magicka</span>
+            + <span class="coef">0.26987</span> &times; <span class="var magk">Power</span>
+        <br>
+        <span class="label dmg-heal">Healing</span>
+            <br />
+        	<span class="coef">0.025794</span> &times; <span class="var magk">Magicka</span>
+            + <span class="coef">0.26987</span> &times; <span class="var magk">Power</span>
+    </div>
+</div>
+</div>
+<br />
+</body>
+</html>
\ No newline at end of file
diff --git a/html/skill-template.html b/html/skill-template.html
new file mode 100644
index 0000000..a3f46b4
--- /dev/null
+++ b/html/skill-template.html
@@ -0,0 +1,25 @@
+<div ng-show="skill.name.length == 0" class="skillDrop">
+	Drag skill here
+</div>
+<div ng-show="skill.name.length > 0" lvl-draggable='true' data-skill="{{skill.name}}" class="skill">
+	<h2>{{skill.name}}</h2>
+	<div class="cost"><b>Base Cost:</b> {{skill.cost}} <span ng-bind-html="skill.mechanic | resource"></span></div>
+	<div class="info" ng-show="{{skill.castTime==0 && skill.channelTime==0}}" suffix=""><b>Cast:</b> Instant</div>
+	<skill-info label="Cast" value="{{skill.castTime | divide:1000}}" suffix="sec"></skill-info>
+	<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 value="description"></skill-desc>
+	<div class="formula" ng-repeat="(id,fit) in skill.fit">
+		<span class="formulaID">{{id}}</span>
+		<span class="rsq label {{fit.rsq|fitQualityClass}}">R<sup>2</sup>: {{fit.rsq|number:4}}</span>
+		<div class="eqn">
+			= <formula-part value="{{fit.mainCoef|number:4}}" label="MainStat"></formula-part>
+			<formula-part value="{{fit.healthCoef|number:4}}" label="Health"></formula-part>
+			<formula-part value="{{fit.powerCoef|number:5}}" label="Power"></formula-part>
+			<span class="coef">{{fit.intercept|number:2}}</span>
+		</div>
+	</div>
+</div>
diff --git a/html/skillData.js b/html/skillData.js
index 65ae6b7..e39494e 100644
--- a/html/skillData.js
+++ b/html/skillData.js
@@ -1,4 +1,4 @@
-var SkillData = angular.module('SkillsList', ['ui.bootstrap', 'ngSanitize', 'angularBootstrapNavTree']);
+var SkillData = angular.module('SkillsList', ['ui.bootstrap', 'ngSanitize', 'angularBootstrapNavTree', 'lvl.directives.dragdrop']);
 SkillData.controller('SkillMainDataController', ['$scope', '$http', function ($scope, $http) {
 	$scope.skills = []
 	$scope.rawSkills = []
@@ -17,7 +17,7 @@ SkillData.controller('SkillMainDataController', ['$scope', '$http', function ($s
 	$scope.setSkills = function() {
 		$scope.skillNames = this.data.skills
 	}
-
+
 	$http.get('skilldata.json')
 		.then(function(res) {
 			$scope.buildSkillList(res.data.skills);
@@ -74,7 +74,37 @@ SkillData.controller('SkillLineController', ['$scope', function ($scope) {
 	}
 }]);
 SkillData.controller('LoadoutController', ['$scope', function ($scope) {
-
+	$scope.emptySkill = {
+		name: "",
+		description: "",
+		cost: 0,
+		target: "",
+		mechanic: "",
+		castTime: 0,
+		channelTime: 0,
+		durationMS: 0,
+		distance: 0,
+		maxRange: 0,
+		radius: 0,
+		fit: []
+	}
+	$scope.skills = []
+	$scope.updaters = []
+	for(var i=0; i<12; ++i) {
+		$scope.skills[i] = angular.copy($scope.emptySkill)
+	}
+	$scope.dropped = function(dragID, index, dropID) {
+	  index = Number(index)
+	  var drag = angular.element(document.getElementById(dragID));
+	  var targetSkill = $scope.skills[index]
+	  angular.copy($scope.rawSkillData[drag.attr("data-skill")], targetSkill)
+	  $scope.$apply()
+	  //var scope = document.getElementById(dropID).getElementsByTagName("skill-info-full")[0].scope()
+	  //angular.copy($scope.rawSkillData[drag.text()], scope.skill)
+    };
+	$scope.defined = function(v) {
+		return v.name != ""
+	}
 }]);
 SkillData.filter('fitQualityClass', function() {
   return function(input) {
@@ -125,22 +155,38 @@ SkillData.filter('nl2br', function() {
 SkillData.directive('skillDesc', function() {
 	return {
 		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>'))
+		controller: function($scope, $element) {
+			$scope.$watch("skill.description", function(newVal) {
+				var desc = newVal
+				desc = desc.replace(/\n/g,'<br />')
+				desc = desc.replace(/(##f[0-9]+##)/g,'<span class="formulaID">$1</span>');
+				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)
+			})
 		}
 	};
 });

+SkillData.directive('skillFull', function() {
+	return {
+		restrict: 'E',
+		scope: {
+			skill: '=info'
+		},
+		templateUrl: 'skill-template.html',
+		link: function(scope) {
+			scope.description = scope.skill.description
+		}
+	}
+});
+
 SkillData.directive('formulaPart', function() {
   return {
 	  restrict: 'E',
@@ -169,6 +215,6 @@ SkillData.directive('skillInfo', function() {
 		  value: '@',
 		  suffix: '@'
 	  },
-	  template: '<div class="info" ng-show="{{value}} > 0"><b>{{label}}:</b> {{value}}{{suffix}}</div>'
+	  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 9de963c..3520d32 100644
--- a/html/skillFormulas.html
+++ b/html/skillFormulas.html
@@ -6,6 +6,8 @@
     <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="dragdrop/lvl-uuid.js"></script>
+    <script src="dragdrop/lvl-drag-drop.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">
@@ -29,117 +31,22 @@
 </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"
-              items-per-page="numPerPage"
-              max-size="maxSize"
-              boundary-links="true">
-            </pagination>
-        </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>
-            <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">=
-                	<formula-part value="{{fit.mainCoef|number:4}}" label="MainStat"></formula-part>
-                	<formula-part value="{{fit.healthCoef|number:4}}" label="Health"></formula-part>
-                	<formula-part value="{{fit.powerCoef|number:5}}" label="Power"></formula-part>
-                    <span class="coef">{{fit.intercept|number:2}}</span>
-                	<span class="rsq label {{fit.rsq|fitQualityClass}}">R<sup>2</sup>: {{fit.rsq|number:4}}</span>
-            </div>
-        </div>
-        <!--<div class="paginateContain">
-            <pagination
-              ng-model="currentPage"
-              total-items="rawSkills.length"
-              items-per-page="numPerPage"
-              max-size="maxSize"
-              boundary-links="true">
-            </pagination>
-        </div>-->
+        <skill-full info="skill" ng-repeat="skill in skills | orderBy:'name'"></skill-full>
     </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>
-
-    <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> &times; <span class="var stam">Stamina</span>
-                    + <span class="coef">0.26987</span> &times; <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> &times; <span class="var stam">Stamina</span>
-                    + <span class="coef">0.95570</span> &times; <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> &times; <span class="var stam">Stamina</span>
-            + <span class="coef">0.26987</span> &times; <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> &times; <span class="var stam">Stamina</span>
-            + <span class="coef">0.95570</span> &times; <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> &times; <span class="var magk">Magicka</span>
-            + <span class="coef">0.26987</span> &times; <span class="var magk">Power</span>
-        <br>
-        <span class="label dmg-heal">Healing</span>
-            <br />
-        	<span class="coef">0.025794</span> &times; <span class="var magk">Magicka</span>
-            + <span class="coef">0.26987</span> &times; <span class="var magk">Power</span>
+<div class="col-md-5" ng-controller="LoadoutController" id="loadout">
+    <div class="skill-list">
+    	<div x-lvl-drop-target='true' x-on-drop='dropped(dragEl, 0)'><skill-full info="skills[0]"></skill-full></div>
+    	<div x-lvl-drop-target='true' x-on-drop='dropped(dragEl, 1)'><skill-full info="skills[1]"></skill-full></div>
+    	<div x-lvl-drop-target='true' x-on-drop='dropped(dragEl, 2)'><skill-full info="skills[2]"></skill-full></div>
+    	<div x-lvl-drop-target='true' x-on-drop='dropped(dragEl, 3)'><skill-full info="skills[3]"></skill-full></div>
+    	<div x-lvl-drop-target='true' x-on-drop='dropped(dragEl, 4)'><skill-full info="skills[4]"></skill-full></div>
+    	<div x-lvl-drop-target='true' x-on-drop='dropped(dragEl, 5)'><skill-full info="skills[5]"></skill-full></div>
+    	<div x-lvl-drop-target='true' x-on-drop='dropped(dragEl, 6)'><skill-full info="skills[6]"></skill-full></div>
     </div>
+	<br /><br />
+	<hr>
+	<p><a href="demo.html">Samples of upcoming changes</a></p>
 </div>
 </div>
 <br />
diff --git a/html/style.css b/html/style.css
index 58e03f9..a1d9b17 100644
--- a/html/style.css
+++ b/html/style.css
@@ -53,6 +53,16 @@ h1 {
 	font-size: 0.95em;
 }

+.skillDrop {
+	border: 1px #777 dashed;
+	background-color:#EEE;
+	padding: 0.5em;
+	margin: 10px 0px;
+	text-align: center;
+	vertical-align: middle;
+	color: #777;
+}
+
 .stam { color:#360; font-weight: bold; }
 .magk { color:#339; font-weight: bold; }
 .ultm { color:#666; font-weight: bold; }
@@ -67,7 +77,7 @@ h1 {
 .dmg-magic { background-color:#099 }
 .dmg-heal { background-color:#CC3 }

-.formulaID { color:#999; font-style:italic; }
+.formulaID { color:#F60; font-style:italic; }

 .formula { padding: 2px 10px; }
 .eqn {
@@ -98,4 +108,12 @@ h1 {
 }

 div.paginateContain { text-align: center; }
-div.paginateContain .pagination { margin: 0px auto; }
\ No newline at end of file
+div.paginateContain .pagination { margin: 0px auto; }
+
+[draggable] {
+	cursor: move;
+}
+
+#loadout .skill .info {
+	display: none;
+}
\ No newline at end of file