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

@@ -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>
 

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.WORDS_HEIGHT_BOTTOM = -1;
-Game.updateText = function(instant){
+(function(){
-	if(Game.WORDS_HEIGHT_BOTTOM<0) Game.WORDS_HEIGHT_BOTTOM=250; // back to default
+    const offset = 80
-	if(Game.FORCE_TEXT_Y<0){
+    let lastCount = 0
-		var wordsHeight = 80 + Game.wordsDOM.getBoundingClientRect().height;
+    let lastBottom = -1
-		var currentY = Game.wordsDOM.style.top=="" ? 80 : parseFloat(Game.wordsDOM.style.top);
+    Game.updateText = function(instant) {
-		var gotoY = (wordsHeight<Game.WORDS_HEIGHT_BOTTOM) ? 0 : wordsHeight-Game.WORDS_HEIGHT_BOTTOM;
+
-		gotoY = 80 - gotoY;
+        if(Game.WORDS_HEIGHT_BOTTOM < 0) Game.WORDS_HEIGHT_BOTTOM = 250;
-		var nextY = instant ? gotoY : currentY*0.9 + gotoY*0.1;
+    
-		Game.wordsDOM.style.top = (Math.round(nextY*10)/10)+"px";
+        let updated = false
-	}else{
+        function updateTransform(){
-		Game.wordsDOM.style.top = Game.FORCE_TEXT_Y+"px";
+            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(){

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;
+	width: 100%;
-	position: relative;
+	position: absolute;
-	top: 80px;
 	overflow: hidden;
+	transition: transform 0.3s;
+}
+#game_words.clear_transition {
+	transition: none !important;
 }
 
 #game_words, #game_hp, #click_to_advance{