Add a little playback UI.

wtaysom · May 6, 2012 · ac67d53 · ac67d53
1 parent 8c7bb6c
commit ac67d53
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 3 deletions.
diff --git a/game/game06-reinit.html b/game/game06-reinit.html
@@ -6,8 +6,19 @@
 </head>
 <body onload="start(); animate();">
 	<canvas id="canvas" width="480" height="320" 
-		style="background-color: black;"></canvas>
+		style="background-color: black; float: left; margin-right: 10px;"></canvas>
+	<div id="instructions">
+		WASD &dash; Move Player<br>
+		P &dash; Playback<br>
+		O &dash; Reset<br>
+		L &dash; Save State<br>
+		K &dash; Clear Saved State<br>
+		left arrow &dash; Rewind One Step<br>
+		right arrow &dash; Replay One Step<br>
+	</div>
+	<div style="clear: both;"></div>
 	<div id="info">Reinit</div>
+	<div id="controller"></div>
 	<script src="keymaster.js"></script>
 	<script src="isHoldingKey.js"></script>
 	<script src="game01-player.js"></script>

diff --git a/game/game06-reinit.js b/game/game06-reinit.js
@@ -15,4 +15,40 @@ playback.restore = function() {
 
 	journal[0].state = initialState;
 	this.reset();
+}
+
+/* UI */
+
+playback.updateControllerHTML = function() {
+	var c = document.getElementById('controller');
+	c.innerHTML = controller === this ? this.time+"/"+journal.time : "";
+}
+
+playback.animate = function() {
+	++this.time;
+
+	if (this.time >= journal.time) {
+		controller = playController;
+		pause();
+	} else {
+		journal.updateHeldKeys(this.time);
+		update();
+		redraw();
+	}
+
+	this.updateControllerHTML();
+}
+
+playback.reset = function(time) {
+	if (time === undefined) {
+		time = 0;
+	}
+
+	journal.reset(time);
+
+	this.time = time;
+	controller = this;
+	this.updateControllerHTML();
+
+	resume();
 }
diff --git a/notes.md b/notes.md
@@ -198,12 +198,11 @@ How to refactor:
 
 # Sunday May 6
 
-!! add some UI
 !! multiple baddies, weapons, powerups
 
 ## Tools
 
-* Improve replay to reinit state on each run.
+* Improve replay to reinit state on each run.  Add a little playback UI.
 
 # Fun For Later