feat: Add bounce animation to Golden Wyrm's Executioner Axe after upgraded Dragon Flight (#1976)

Golden Wyrm's Executioner Axe icon now bounces to the right after landing an upgraded Dragon Flight
The bounce only shows when the ability is actually usable and stops when you hover or select it (similar to the skip button).

Fixes #1976

This fixes issue #1976

Author: chavaenc

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
 		});
 	}