From 35495207c7caf731d6e7afef066107e5d57670f0 Mon Sep 17 00:00:00 2001
From: spaciecat <5057054+spaciecat@users.noreply.github.com>
Date: Thu, 12 Sep 2019 17:51:08 +1000
Subject: [PATCH] animate choices with css transitions

---
 scripts/game/Game.js | 10 +++++-----
 styles/game.css      | 15 +++++++++------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/scripts/game/Game.js b/scripts/game/Game.js
index 4f29a34..3e86516 100644
--- a/scripts/game/Game.js
+++ b/scripts/game/Game.js
@@ -344,7 +344,7 @@ Game.WORDS_HEIGHT_BOTTOM = -1;
 	wordsObserver.watch(function(){ return Game.FORCE_TEXT_Y });
 	wordsObserver.watch(function(){ return Game.WORDS_HEIGHT_BOTTOM });
 	wordsObserver.watch(function(){ return Game.wordsDOM.children.length });
-    Game.updateText = function() { wordsObserver.tick() };
+	Game.updateText = function() { wordsObserver.tick() };
 })()
 
 // CLEAR TEXT
@@ -811,12 +811,12 @@ Game.executeChoice = function(line){
 	}
 
 	// Add choice, animated!
-	div.style.top = "150px";
+	div.classList.add("hidden");
 	Game.choicesDOM.appendChild(div);
-	setTimeout(function(){
-		div.style.top = "0px";
+	requestAnimationFrame(function(){
+		div.classList.remove("hidden");
 		sfx("ui_show_choice", {volume:0.4});
-	},10);
+	});
 
 	// Or... FORCE
 	if(Game.OVERRIDE_FONT_SIZE){
diff --git a/styles/game.css b/styles/game.css
index 2a7f810..1e7bc76 100644
--- a/styles/game.css
+++ b/styles/game.css
@@ -973,7 +973,7 @@ DIALOGUEZ
 	text-align: center;
 
 }
-#game_choices > div{
+#game_choices > div {
 
 	width: 310px;
     margin: 0 auto 5px auto;
@@ -985,11 +985,11 @@ DIALOGUEZ
 	border-radius: 20px;
 
 	/* Spring OUT only */
-	-webkit-transition: top 500ms cubic-bezier(0.350, 0.005, 0.370, 1); /* older webkit */
-	-webkit-transition: top 500ms cubic-bezier(0.350, 0.005, 0.370, 1.390); 
-	   -moz-transition: top 500ms cubic-bezier(0.350, 0.005, 0.370, 1.390); 
-	     -o-transition: top 500ms cubic-bezier(0.350, 0.005, 0.370, 1.390); 
-	        transition: top 500ms cubic-bezier(0.350, 0.005, 0.370, 1.390); /* custom */
+	-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); 
@@ -997,6 +997,9 @@ DIALOGUEZ
 	     -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 */
 }
+#game_choices > div.hidden {
+	transform: translateY(150px);
+}
 #game_choices > div > * {
 	pointer-events: none; /* so italics and stuff doesn't trigger sound */
 }