From 8f443d97b05a4bca9eee55c6f3eb5aafce11e3a3 Mon Sep 17 00:00:00 2001 From: Prateek Singh Date: Wed, 7 Aug 2024 01:23:31 +0530 Subject: [PATCH 1/4] added bounce animation for skip button --- src/creature.ts | 8 ++++++++ src/style/styles.less | 24 ++++++++++++++++++++++-- 2 files changed, 30 insertions(+), 2 deletions(-) diff --git a/src/creature.ts b/src/creature.ts index 5ee529d4d..1e5d41608 100644 --- a/src/creature.ts +++ b/src/creature.ts @@ -725,6 +725,14 @@ export class Creature { game.grid.querySelf({ fnOnConfirm: function () { game.UI.btnSkipTurn.click(); + + const buttonElement = game.UI.btnSkipTurn.$button; + + buttonElement.addClass('bounce'); + + setTimeout(() => { + buttonElement.removeClass('bounce'); + }, 1000); }, fnOnCancel: function () {}, confirmText: 'Skip turn', diff --git a/src/style/styles.less b/src/style/styles.less index ea89dc73c..70dc95e94 100644 --- a/src/style/styles.less +++ b/src/style/styles.less @@ -1439,6 +1439,26 @@ 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; +} + /*--------------Framed Modal------------------*/ /* Modal window with graphical border and close button. */ .framed-modal { @@ -2062,7 +2082,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 +2103,4 @@ input { #brandlogo { display: none; } -} \ No newline at end of file +} From 323d3c15d8a9b5acab2f17f65ebb64e886097ce0 Mon Sep 17 00:00:00 2001 From: Prateek Singh Date: Thu, 8 Aug 2024 20:19:44 +0530 Subject: [PATCH 2/4] bounce infinte until skip is clicked --- src/creature.ts | 11 +++-------- src/style/styles.less | 2 +- src/ui/interface.js | 3 +++ 3 files changed, 7 insertions(+), 9 deletions(-) diff --git a/src/creature.ts b/src/creature.ts index 1e5d41608..2203a60a1 100644 --- a/src/creature.ts +++ b/src/creature.ts @@ -722,17 +722,12 @@ 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(); - - const buttonElement = game.UI.btnSkipTurn.$button; - - buttonElement.addClass('bounce'); - - setTimeout(() => { - buttonElement.removeClass('bounce'); - }, 1000); }, fnOnCancel: function () {}, confirmText: 'Skip turn', diff --git a/src/style/styles.less b/src/style/styles.less index 70dc95e94..92f393f9e 100644 --- a/src/style/styles.less +++ b/src/style/styles.less @@ -1456,7 +1456,7 @@ span.pure { } #skip.button.bounce { - animation: button-bounce-left 1s ease-in-out; + animation: button-bounce-left 1s ease-in-out infinite; } /*--------------Framed Modal------------------*/ diff --git a/src/ui/interface.js b/src/ui/interface.js index 9b5bc2c7d..526b7d5eb 100644 --- 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'); } }, }, From 33d5069d9dbcfbf1836021cb7f0f667ec9548431 Mon Sep 17 00:00:00 2001 From: Prateek Singh Date: Thu, 8 Aug 2024 20:30:42 +0530 Subject: [PATCH 3/4] bounce should stop when hovering over skip button --- src/style/styles.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/style/styles.less b/src/style/styles.less index 92f393f9e..d3a6df05a 100644 --- a/src/style/styles.less +++ b/src/style/styles.less @@ -1459,6 +1459,10 @@ span.pure { animation: button-bounce-left 1s ease-in-out infinite; } +#skip.button.bounce:hover { + animation: none; +} + /*--------------Framed Modal------------------*/ /* Modal window with graphical border and close button. */ .framed-modal { From 723a04b72c29d996c56e6872e3f5e340d4639d1d Mon Sep 17 00:00:00 2001 From: Dread Knight Date: Thu, 8 Aug 2024 18:22:57 +0300 Subject: [PATCH 4/4] hopefully avoiding button snapping this is a test to avoid a small visual glitch; might revert --- src/style/styles.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/style/styles.less b/src/style/styles.less index d3a6df05a..40f9ec51e 100644 --- a/src/style/styles.less +++ b/src/style/styles.less @@ -1460,7 +1460,7 @@ span.pure { } #skip.button.bounce:hover { - animation: none; + animation-iteration-count: 1; } /*--------------Framed Modal------------------*/