From c56eea3b4974287b3adf72bf744a4f4784c0d6b6 Mon Sep 17 00:00:00 2001
From: spaciecat <5057054+spaciecat@users.noreply.github.com>
Date: Thu, 12 Sep 2019 15:58:12 +1000
Subject: [PATCH] dialogue animation + debugger

refactored all the dialogue text animations to use css animation and transforms rather than frame by frame positioning

this causes some issues and the code isnt the cleanest, but its already feels smoother so thats a good start!

using the devtools for debugging was getting annoying so I added a `Game.debug()` method that toggles a custom debugger that includes a drawer containing links to all points in the script
---
 index.html           |  6 +++-
 scripts/game/Game.js | 76 +++++++++++++++++++++++++++++++++++---------
 styles/game.css      | 51 +++++++++++++++++++++++------
 3 files changed, 108 insertions(+), 25 deletions(-)

diff --git a/index.html b/index.html
index c6bf657..e41af11 100644
--- a/index.html
+++ b/index.html
@@ -206,8 +206,12 @@
 		</div>
 	</div>
 
+	<!-- Dialogue position debugging elements -->
+	<div class='debug' style='position: absolute; width: 5px; height: 250px; background: red;'></div>
+	<div class='debug' style='position: absolute; width: 5px; height: 80px; background: white;'></div>
+
 </div>
-	
+<div class="debug" id="section_debug_list"></div>
 </body>
 </html>
 
diff --git a/scripts/game/Game.js b/scripts/game/Game.js
index 62c0b4f..3b3c522 100644
--- a/scripts/game/Game.js
+++ b/scripts/game/Game.js
@@ -29,12 +29,22 @@ window.attackBB = function(damage, type){
 // Init
 Game.init = function(){
 
+	// Create the section debug menu
+	Object.keys(Game.sections).forEach(function(key){
+		const link = document.createElement('div');
+		link.className = "section_link";
+		link.innerText = key;
+		link.addEventListener('click', function() {
+			Game.goto(key);
+		});
+		document.getElementById("section_debug_list").appendChild(link);
+	})
+
 	// HP!
 	window.HP = new HitPoints();
 
 	// Animation!
 	console.log("init");
-	Game.wordsDOM.style.top = "80px";
 	var animloop = function(){
 		Game.update();
 		requestAnimationFrame(animloop);
@@ -43,6 +53,11 @@ Game.init = function(){
 
 };
 
+// Call to toggle debug rendering
+Game.debug = function(){
+	document.body.classList.toggle('show_debug');
+}
+
 // Parse scene markdown!
 Game.parseSceneMarkdown = function(md){
 
@@ -293,20 +308,51 @@ Game.immediatePromise = function(){
 
 // Move the text DOM to latest
 Game.FORCE_TEXT_Y = -1;
-Game.WORDS_HEIGHT_BOTTOM = 250;
-Game.updateText = function(instant){
-	if(Game.WORDS_HEIGHT_BOTTOM<0) Game.WORDS_HEIGHT_BOTTOM=250; // back to default
-	if(Game.FORCE_TEXT_Y<0){
-		var wordsHeight = 80 + Game.wordsDOM.getBoundingClientRect().height;
-		var currentY = Game.wordsDOM.style.top=="" ? 80 : parseFloat(Game.wordsDOM.style.top);
-		var gotoY = (wordsHeight<Game.WORDS_HEIGHT_BOTTOM) ? 0 : wordsHeight-Game.WORDS_HEIGHT_BOTTOM;
-		gotoY = 80 - gotoY;
-		var nextY = instant ? gotoY : currentY*0.9 + gotoY*0.1;
-		Game.wordsDOM.style.top = (Math.round(nextY*10)/10)+"px";
-	}else{
-		Game.wordsDOM.style.top = Game.FORCE_TEXT_Y+"px";
-	}
-};
+Game.WORDS_HEIGHT_BOTTOM = -1;
+(function(){
+    const offset = 80
+    let lastCount = 0
+    let lastBottom = -1
+    Game.updateText = function(instant) {
+
+        if(Game.WORDS_HEIGHT_BOTTOM < 0) Game.WORDS_HEIGHT_BOTTOM = 250;
+    
+        let updated = false
+        function updateTransform(){
+            if(updated) return
+			updated = true
+			
+			if(Game.FORCE_TEXT_Y != -1){
+				Game.wordsDOM.style.transform = `translateY(${Game.FORCE_TEXT_Y}px)`;
+				return
+			}
+
+            const wordsHeight = Game.wordsDOM.clientHeight;
+            let diff = wordsHeight - (Game.WORDS_HEIGHT_BOTTOM - offset)
+			if(diff < 0) diff = 0
+			
+			Game.wordsDOM.style.transform = `translateY(${offset - diff}px)`;
+        }
+
+        if(Game.wordsDOM.children.length != lastCount){
+            updateTransform()
+            lastCount = Game.wordsDOM.children.length;
+        }
+        
+        if(Game.WORDS_HEIGHT_BOTTOM != lastBottom){
+            updateTransform()
+            lastBottom = Game.WORDS_HEIGHT_BOTTOM;
+        }  
+    
+        if(instant || Game.FORCE_TEXT_Y != -1){
+            updateTransform()
+            Game.wordsDOM.classList.add("clear_transition");
+            Game.wordsDOM.clientHeight;
+            Game.wordsDOM.classList.remove("clear_transition");
+        }
+        
+    };
+})()
 
 // CLEAR TEXT
 Game.clearText = function(){
diff --git a/styles/game.css b/styles/game.css
index b4abe53..dfe9da7 100644
--- a/styles/game.css
+++ b/styles/game.css
@@ -13,6 +13,41 @@ body {
 	overflow: hidden;
 	margin:0;
 	background: #111;
+	font-size: 20px;
+	font-family: Helvetica, Arial, sans-serif;
+	font-weight: 100;
+	line-height: 1.3em;
+}
+
+/******************************************************************************************************
+
+DEBUGGING
+
+******************************************************************************************************/
+
+body:not(.show_debug) .debug {
+	display: none;
+}
+
+body.show_debug #game_container  * {
+	outline: 1px solid red;
+}
+
+#section_debug_list {
+	position: absolute;
+	background: #fff;
+	padding: 20px;
+	height: 500px;
+	overflow-y: scroll;
+	transition: all 0.2s;
+	font-family: monospace;
+	opacity: 0.2;
+	transform: translateX(-95%);
+}
+
+#section_debug_list:hover {
+	transform: none;
+	opacity: 1;
 }
 
 /******************************************************************************************************
@@ -27,20 +62,18 @@ MAIN GAME
 	width: 360px;
 	height: 600px;
 	background: #000;
-
-	font-size: 20px;
-	font-family: Helvetica, Arial, sans-serif;
-	font-weight: 100;
-	line-height: 1.3em;
-
 	overflow: hidden;
 
 }
+
 #game_words{
-	width: auto;
-	position: relative;
-	top: 80px;
+	width: 100%;
+	position: absolute;
 	overflow: hidden;
+	transition: transform 0.3s;
+}
+#game_words.clear_transition {
+	transition: none !important;
 }
 
 #game_words, #game_hp, #click_to_advance{