Merge pull request #2825 from chavaenc/issue-1976

feat: Golden Wyrm's Executioner Axe icon bounce to indicate bonus, closes #1976

Author: DreadKnight

src/abilities/Golden-Wyrm.ts

@@ -128,6 +128,8 @@ export default (G: Game) => {
 			activate: function (target: Creature) {
 				this.end();
 				G.Phaser.camera.shake(0.02, 200, true, G.Phaser.camera.SHAKE_BOTH, true);
+				// Removes bounce after use
+				G.UI.abilitiesButtons[1].$button.removeClass('bounce');
 
 				if (target.health <= this._executeHealthThreshold) {
 					const executeDamage = new Damage(
@@ -290,6 +292,8 @@ export default (G: Game) => {
 					this.game,
 				);
 				ability.creature.addEffect(offenseBuffEffect);
+
+				G.UI.abilitiesButtons[1].$button.addClass('bounce');
 			},
 		},
 

src/style/styles.less

@@ -1568,6 +1568,27 @@ span.pure {
 	animation-iteration-count: 1;
 }
 
+@keyframes button-bounce-right {
+	0% {
+		transform: translateX(0);
+	}
+	50% {
+		transform: translateX(10px);
+	}
+	100% {
+		transform: translateX(0);
+	}
+}
+
+// Bounce only when ability is usable (slideIn) and not selected (active)
+.ability.bounce.slideIn:not(.active) {
+	animation: button-bounce-right 1s ease-in-out infinite;
+}
+
+.ability.bounce.slideIn:not(.active):hover {
+	animation-iteration-count: 1;
+}
+
 /*--------------Framed Modal------------------*/
 /* Modal window with graphical border and close button. */
 .framed-modal {

src/ui/interface.ts

@@ -1906,6 +1906,7 @@ export class UI {
 			$desc.find('span.title').text(ab.title);
 			$desc.find('p.description').html(ab.desc);
 			$desc.find('p.full-info').html(ab.info);
+			btn.$button.removeClass('bounce');
 			btn.changeState(); // Apply changes
 		});
 	}