Add Action Skill for Vanilla Version (#6)

* Replacing action skill assets with the active one (green)

* Initial implementation of Action Skill

* Add hardcoded skill point for action skill

* Rename skill-action to actionSkill to conform with current coding style

* Implement Action Skill to other characters (Vanilla)
Also fix z-index for Action Skill description.

assassin.html

@@ -17,6 +17,12 @@
 	<h3>Level <span class="charLevel">5</span> Assassin</h3>
 </div>
 <img unselectable="on" class="portrait" src="assassinPortrait.png">
+<div>
+	<div class="actionSkill"><img src="icons/assassin-actionskill.png" />
+		<div class="description"><h2>Decepti0n</h2>Action Skill. Create a holographic decoy and vanish for a few seconds. The longer you are invisible the more Damage your next attack deals, but ending invisibility sooner causes your next Deception Cooldown to refresh faster.<br/><br/>Cooldown: 15 seconds.<br/>Up to 650% Melee Damage.<br/>Up to 200% Gun Damage.<br/>Up to 250% Gun Critical Hit Damage.</div>
+		<div class="points">1/1</div>
+	</div>
+</div>
 <div class="treeCollection">
 <div class="treewrapper green">
 	<div class="bglayer gray"></div>

commando.html

@@ -17,6 +17,12 @@
 	<h3>Level <span class="charLevel">5</span> Commando</h3>
 </div>
 <img unselectable="on" class="portrait" src="commandoPortrait.png">
+<div>
+	<div class="actionSkill"><img src="icons/commando-actionskill.png" />
+		<div class="description"><h2>Sabre Turret</h2>Action Skill. Deploy a Sabre Turret that automatically fires at enemies. When you're near the Sabre Turret you can reclaim it and refund some of your Cooldown. <br />Cooldown: 42 seconds.</div>
+		<div class="points">1/1</div>
+	</div>
+</div>
 <div class="treeCollection">
 <div class="treewrapper green">
 	<div class="bglayer gray"></div>

gunzerker.html

@@ -17,6 +17,12 @@
 	<h3>Level <span class="charLevel">5</span> Gunzerker</h3>
 </div>
 <img unselectable="on" class="portrait" src="gunzerkerPortrait.png" style="left: 30%;margin-left: -50%;">
+<div>
+	<div class="actionSkill"><img src="icons/gunzerker-actionskill.png" />
+		<div class="description"><h2>Gunzerking</h2>Action Skill. Draw a second gun and go nuts! While Gunzerking you Instantly Regain 50% of Your Total Health, gain Damage Reduction against enemy attacks, and constantly Regenerate Health and Ammo. Does not regenerate rockets. Cooldown: 42 seconds</div>
+		<div class="points">1/1</div>
+	</div>
+</div>
 <div class="treeCollection">
 <div class="treewrapper green">
 	<div class="bglayer gray"></div>

main.css

@@ -186,6 +186,12 @@ body.choicePage .wrapper {
   height: 53px;
 }
 
+.actionSkill {
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+}
+
 .points {
   visibility: hidden;
   position: absolute;
@@ -199,11 +205,16 @@ body.choicePage .wrapper {
   color: white;
 }
 
+.actionSkill .points {
+  visibility: initial;
+}
+
 .skill.partial .points {
   color: #F80;
 }
 
-.skill.full .points {
+.skill.full .points,
+.actionSkill .points {
   color: #0B0;
 }
 
@@ -243,12 +254,14 @@ legend {
   display: none;
 }
 
-.tree .description {
+.tree .description,
+.actionSkill .description
+ {
   display: none;
   position: absolute;
   top: 0;
   width: 200px;
-  z-index: 20;
+  z-index: 21;
   background-color: #111;
   color: white;
   padding: 0 0.25em 0.5em;
@@ -264,6 +277,11 @@ legend {
   right: 110%;
 }
 
+.actionSkill .description {
+  top: 10%;
+  left: 105%;
+}
+
 .tier[data-level='4'] .description {
   top: auto;
   bottom: -59px;
@@ -279,7 +297,8 @@ legend {
   bottom: 0;
 }
 
-.tree .description h2 {
+.tree .description h2,
+.actionSkill .description h2 {
   padding: 0.15em 0;
   margin-bottom: 0.15em;
   font-size: 125%;
@@ -362,6 +381,14 @@ legend {
   display: none;
 }
 
+.actionSkill:hover .description {
+  display: block;
+}
+
+.actionSkill:hover .description:hover {
+  display: none;
+}
+
 .green legend {
   color: #41974D;
 }

mechromancer.html

@@ -17,6 +17,12 @@
 	<h3>Level <span class="charLevel">5</span> Mechromancer</h3>
 </div>
 <img unselectable="on" class="portrait" src="mechromancerPortrait.png">
+<div>
+	<div class="actionSkill"><img src="icons/mechromancer-actionskill.png" />
+		<div class="description"><h2>Summon Deathtrap</h2>Action Skill. Summon Deathtrap to fight for you. Cooldown: 60 seconds</div>
+		<div class="points">1/1</div>
+	</div>
+</div>
 <div class="treeCollection">
 <div class="treewrapper green">
 	<div class="bglayer gray"></div>

psycho.html

@@ -17,6 +17,12 @@
 	<h3>Level <span class="charLevel">5</span> Psycho</h3>
 </div>
 <img unselectable="on" class="portrait" src="psychoPortrait.png">
+<div>
+	<div class="actionSkill"><img src="icons/psycho-actionskill.png" />
+		<div class="description"><h2>Buzz Axe Rampage</h2>Your Melee Damage and Movement Speed is increased. Killing an enemy instantly refills your Health. Taking damage accelerates Cooldown Recharge.<br/>Melee Damage: 500%<br/>Cooldown: 120 seconds</div>
+		<div class="points">1/1</div>
+	</div>
+</div>
 <div class="treeCollection">
 <div class="treewrapper green">
 	<div class="bglayer gray"></div>

siren.html

@@ -17,6 +17,12 @@
 	<h3>Level <span class="charLevel">5</span> Siren</h3>
 </div>
 <img unselectable="on" class="portrait" src="sirenPortrait.png">
+<div>
+	<div class="actionSkill"><img src="icons/siren-actionskill.png" />
+		<div class="description"><h2>Phaselock</h2>Action Skill. Lock an enemy in another dimension, preventing him from fighting back for a short while. Some enemies cannot be Phaselocked and instead instantly take damage. Cooldown: 13 seconds</div>
+		<div class="points">1/1</div>
+	</div>
+</div>
 <div class="treeCollection">
 <div class="treewrapper green">
 	<div class="bglayer gray"></div>