diff --git a/src/creature.ts b/src/creature.ts index 5ee529d4d..2203a60a1 100644 --- 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 index ea89dc73c..40f9ec51e 100644 --- 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; } -} \ No newline at end of file +} 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'); } }, },