Merge pull request #2593 from prateeksingh19/feature/bounceSkipButton

[Feature] Added bounce animation on skip button, fixes #2535
FreezingMoon · Aug 8, 2024 · 3473b78 · 3473b78
2 parents 46e31a7 + 723a04b
commit 3473b78
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 2 deletions.
diff --git a/src/creature.ts b/src/creature.ts
@@ -722,6 +722,9 @@ export class Creature {
 		const select = o.noPath || this.movementType() === 'flying' ? selectFlying : selectNormal;
 
 		if (this.noActionPossible) {
+			const buttonElement = game.UI.btnSkipTurn.$button;
+
+			buttonElement.addClass('bounce');
 			game.grid.querySelf({
 				fnOnConfirm: function () {
 					game.UI.btnSkipTurn.click();

diff --git a/src/style/styles.less b/src/style/styles.less
@@ -1439,6 +1439,30 @@ span.pure {
 	}
 }
 
+@keyframes button-bounce-left {
+	0% {
+		transform: translateX(0);
+	}
+	50% {
+		transform: translateX(-10px);
+	}
+	100% {
+		transform: translateX(0);
+	}
+}
+
+#skip.button {
+	transition: transform 1s ease-in-out;
+}
+
+#skip.button.bounce {
+	animation: button-bounce-left 1s ease-in-out infinite;
+}
+
+#skip.button.bounce:hover {
+	animation-iteration-count: 1;
+}
+
 /*--------------Framed Modal------------------*/
 /* Modal window with graphical border and close button. */
 .framed-modal {
@@ -2062,7 +2086,7 @@ input {
 	z-index: 1;
 	position: absolute;
 	top: 105px;
-	transition: opacity 300ms cubic-bezier(.39,.58,.57,1);;
+	transition: opacity 300ms cubic-bezier(0.39, 0.58, 0.57, 1);
 
 	div {
 		height: 125px;
@@ -2083,4 +2107,4 @@ input {
 	#brandlogo {
 		display: none;
 	}
-}
+}
diff --git a/src/ui/interface.js b/src/ui/interface.js
@@ -157,6 +157,9 @@ export class UI {
 						game.skipTurn();
 						this.lastViewedCreature = '';
 						this.queryUnit = '';
+						const buttonElement = this.btnSkipTurn.$button;
+
+						buttonElement.removeClass('bounce');
 					}
 				},
 			},