diff --git a/scripts/game/Game.js b/scripts/game/Game.js index 3e86516..b093d14 100644 --- a/scripts/game/Game.js +++ b/scripts/game/Game.js @@ -330,11 +330,7 @@ Game.WORDS_HEIGHT_BOTTOM = -1; } // "Instant mode" was only used for clearing... so lets just do it when it's clear? - if(Game.wordsDOM.children.length == 0){ - Game.wordsDOM.classList.add("clear_transition"); - Game.wordsDOM.clientHeight; - Game.wordsDOM.classList.remove("clear_transition"); - } + if(Game.wordsDOM.children.length == 0) flushElementTransitions(Game.wordsDOM); // Also, move the click_to_advance DOM $('#click_to_advance').style.transform = `translateY(${Math.round(advanceTextPosition)}px)`; diff --git a/scripts/game/HP.js b/scripts/game/HP.js index 0b1243d..4da8f19 100644 --- a/scripts/game/HP.js +++ b/scripts/game/HP.js @@ -38,16 +38,11 @@ function HitPoints(){ // Show/hide self.show = function(){ - self.dom.style.top = "0px"; + self.dom.classList.add('show'); }; self.hide = function(instant){ - if(instant){ - self.dom.style.display = "none"; - setTimeout(function(){ - self.dom.style.display = "block"; - },2000); - } - self.dom.style.top = "-100px"; + self.dom.classList.remove('show'); + if(instant) flushElementTransitions(self.dom); }; subscribe("hp_show", self.show); subscribe("hp_hide", self.hide); diff --git a/scripts/lib/helpers.js b/scripts/lib/helpers.js index cbae6bb..af19f51 100644 --- a/scripts/lib/helpers.js +++ b/scripts/lib/helpers.js @@ -4,4 +4,12 @@ Math.TAU = Math.PI*2; // The poor man's jQuery function $(query){ return document.querySelector(query); +} + +// Flush an element's transitions +function flushElementTransitions(element){ + if(typeof element == "string") element = $(element); + element.classList.add('clear_transition') + element.clientHeight; + element.classList.remove('clear_transition'); } \ No newline at end of file diff --git a/styles/game.css b/styles/game.css index 1e7bc76..ce544e4 100644 --- a/styles/game.css +++ b/styles/game.css @@ -56,6 +56,10 @@ MAIN GAME ******************************************************************************************************/ +.clear_transition { + transition: none !important; +} + #game_container{ position: relative; display: inline-block; @@ -72,9 +76,6 @@ MAIN GAME overflow: hidden; transition: transform 0.5s; } -#game_words.clear_transition { - transition: none !important; -} #game_words, #game_hp, #click_to_advance{ pointer-events: none; @@ -983,22 +984,14 @@ DIALOGUEZ position: relative; border-radius: 20px; + opacity: 1; - /* Spring OUT only */ - -webkit-transition: transform 500ms cubic-bezier(0.350, 0.005, 0.370, 1); /* older webkit */ - -webkit-transition: transform 500ms cubic-bezier(0.350, 0.005, 0.370, 1.390); - -moz-transition: transform 500ms cubic-bezier(0.350, 0.005, 0.370, 1.390); - -o-transition: transform 500ms cubic-bezier(0.350, 0.005, 0.370, 1.390); - transition: transform 500ms cubic-bezier(0.350, 0.005, 0.370, 1.390); /* custom */ - - -webkit-transition-timing-function: cubic-bezier(0.350, 0.005, 0.370, 1); /* older webkit */ - -webkit-transition-timing-function: cubic-bezier(0.350, 0.005, 0.370, 1.390); - -moz-transition-timing-function: cubic-bezier(0.350, 0.005, 0.370, 1.390); - -o-transition-timing-function: cubic-bezier(0.350, 0.005, 0.370, 1.390); - transition-timing-function: cubic-bezier(0.350, 0.005, 0.370, 1.390); /* custom */ + /* TODO: Add vendor prefixes again, just removed them while working on css animation stuff [Spacie] */ + transition: transform 500ms cubic-bezier(0.350, 0.005, 0.370, 1.390), opacity 300ms ease-in-out; } #game_choices > div.hidden { transform: translateY(150px); + opacity: 0; } #game_choices > div > * { pointer-events: none; /* so italics and stuff doesn't trigger sound */ @@ -1070,11 +1063,14 @@ canvas{ top:0; left:0; } -#game_hp{ +#game_hp { position: absolute; width: 360px; height: 100px; - top:-100px; - left:0; - transition: top 0.5s ease-in-out; + transition: transform 0.5s ease-in-out; + transform: translateY(-100px); } + +#game_hp.show { + transform: none; +} \ No newline at end of file