From e8227537bac84822edf0edf8c10f49c3300b3b66 Mon Sep 17 00:00:00 2001
From: NathanSweet <nathan.sweet@gmail.com>
Date: Sun, 4 Sep 2016 17:14:12 +0200
Subject: [PATCH] [ts] Various demo improvements.

---
 spine-ts/webgl/demos/skins.html       |  3 ++-
 spine-ts/webgl/demos/skins.js         | 18 ++++++++++--------
 spine-ts/webgl/demos/spritesheet.html |  4 +++-
 spine-ts/webgl/demos/spritesheet.js   | 10 +++++++++-
 spine-ts/webgl/demos/tank.js          |  3 +--
 5 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/spine-ts/webgl/demos/skins.html b/spine-ts/webgl/demos/skins.html
index e8c4f24da..37a4d2970 100644
--- a/spine-ts/webgl/demos/skins.html
+++ b/spine-ts/webgl/demos/skins.html
@@ -10,7 +10,8 @@
 <center>
 <div style="position: fixed; top: 0; width: 100%">
 	<select id="skinsdemo-active-skin"></select></br>
-	<button id="skinsdemo-randomizeattachments" value="Random Skin">Random Attachments</button>						
+	<button id="skinsdemo-randomizeattachments">Random Attachments</button>						
+	<button id="skinsdemo-swingsword">Swing Sword</button>						
 	<div><input id="skinsdemo-randomizeskins" type="checkbox" checked=true></input> Randomize skin</div>	
 </div>
 </center>
diff --git a/spine-ts/webgl/demos/skins.js b/spine-ts/webgl/demos/skins.js
index 19849644e..90b08c76e 100644
--- a/spine-ts/webgl/demos/skins.js
+++ b/spine-ts/webgl/demos/skins.js
@@ -3,7 +3,7 @@ var skinsDemo = function(loadingComplete, bgColor) {
 	var skeleton, state, offset, bounds;		
 	var timeKeeper, loadingScreen;
 	var playButton, timeLine, isPlaying = true, playTime = 0;
-	var randomizeSkins, lastSkinChange = Date.now() / 1000;
+	var randomizeSkins, lastSkinChange = Date.now() / 1000, clickAnim = 0;
 
 	var DEMO_NAME = "SkinsDemo";
 
@@ -61,7 +61,7 @@ var skinsDemo = function(loadingComplete, bgColor) {
 	function setupInput (){
 		input.addListener({
 			down: function(x, y) {
-				state.setAnimation(5, Math.random() > 0.5 ? "meleeSwing1" : "meleeSwing2", false, 0);				
+				swingSword();
 			},
 			up: function(x, y) { },
 			dragged: function(x, y) { },
@@ -133,10 +133,8 @@ var skinsDemo = function(loadingComplete, bgColor) {
 			randomizeSkins.checked = false;
 		});
 
-		var randomAttachments = $("#skinsdemo-randomizeattachments");
-		randomAttachments.click(function() {
-			randomizeAttachments();		
-		});
+		$("#skinsdemo-randomizeattachments").click(randomizeAttachments);
+		$("#skinsdemo-swingsword").click(swingSword);
 		randomizeSkins = document.getElementById("skinsdemo-randomizeskins");
 	}
 
@@ -148,7 +146,11 @@ var skinsDemo = function(loadingComplete, bgColor) {
 		slot.setAttachment(weapon);
 	}
 	
-	function randomizeSkin() {
+	function swingSword () {
+		state.setAnimation(5, (clickAnim++ % 2 == 0) ? "meleeSwing2" : "meleeSwing1", false, 0);				
+	}
+	
+	function randomizeSkin () {
 		var result;
 		var count = 0;
 		for (var skin in skeleton.data.skins) {
@@ -163,7 +165,7 @@ var skinsDemo = function(loadingComplete, bgColor) {
 		}).prop("selected", true);		
 	}
 
-	function randomizeAttachments() {
+	function randomizeAttachments () {
 		var skins = [];
 		for (var skin in skeleton.data.skins) {
 			skin = skeleton.data.skins[skin];
diff --git a/spine-ts/webgl/demos/spritesheet.html b/spine-ts/webgl/demos/spritesheet.html
index cca6e6bfb..bc3ee8cee 100644
--- a/spine-ts/webgl/demos/spritesheet.html
+++ b/spine-ts/webgl/demos/spritesheet.html
@@ -9,7 +9,9 @@
 <canvas id="spritesheetdemo-canvas"></canvas>
 <center>
 <div style="position: fixed; top: 0; width: 100%">
-	Time multiplier
+	<button id="spritesheetdemo-roar">Roar</button>						
+	<button id="spritesheetdemo-jump">Jump</button>			
+	<br>Time multiplier
 	<div id="spritesheetdemo-timeslider" class="slider"></div></br>
 </div>
 </center>
diff --git a/spine-ts/webgl/demos/spritesheet.js b/spine-ts/webgl/demos/spritesheet.js
index d8a8c74a8..6485caf6d 100644
--- a/spine-ts/webgl/demos/spritesheet.js
+++ b/spine-ts/webgl/demos/spritesheet.js
@@ -81,7 +81,7 @@ var spritesheetDemo = function(loadingComplete, bgColor) {
 
 	function setupInput() {
 		input.addListener({
-			down: function(x, y) { 
+			down: function(x, y) {
 				animationState.setAnimation(0, (clickAnim++ % 2 == 0) ? "jump" : "roar", false);
 				animationState.addAnimation(0, "walk", true, 0);
 			},
@@ -89,6 +89,14 @@ var spritesheetDemo = function(loadingComplete, bgColor) {
 			moved: function(x, y) {	},
 			dragged: function(x, y) { }
 		});
+		$("#spritesheetdemo-roar").click(function () {
+			animationState.setAnimation(0, "roar", false);
+			animationState.addAnimation(0, "walk", true, 0);
+		});
+		$("#spritesheetdemo-jump").click(function () {
+			animationState.setAnimation(0, "jump", false);
+			animationState.addAnimation(0, "walk", true, 0);
+		});
 	}
 
 	function resize () {
diff --git a/spine-ts/webgl/demos/tank.js b/spine-ts/webgl/demos/tank.js
index e48e3a8e4..9624a0797 100644
--- a/spine-ts/webgl/demos/tank.js
+++ b/spine-ts/webgl/demos/tank.js
@@ -86,10 +86,9 @@ var tankDemo = function(loadingComplete, bgColor) {
 			}
 		};
 
-		var checkbox = $("#tankdemo-drawbones");
 		renderer.skeletonDebugRenderer.drawPaths = false;
 		renderer.skeletonDebugRenderer.drawBones = false;
-		checkbox.change(function() {
+		$("#tankdemo-drawbones").change(function() {
 			renderer.skeletonDebugRenderer.drawPaths = this.checked;
 			renderer.skeletonDebugRenderer.drawBones = this.checked;			
 		});