animate HP canvas with css transforms

switched the hp canvas from setting position to a css transform

i also added a lil fade in to the choice buttons here, makes it look less janky because they dont pop in and out of reality as much

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

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

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

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