From 0033209e87684e483ca0322911e930cf1841d3b2 Mon Sep 17 00:00:00 2001
From: Nathan Sweet <nathan.sweet@gmail.com>
Date: Mon, 11 Sep 2017 23:23:24 +0200
Subject: [PATCH] Aim and shoot buttons for hoverboard demo.

---
 spine-ts/webgl/demos/hoverboard.html |  4 +++-
 spine-ts/webgl/demos/hoverboard.js   | 27 +++++++++++++++++++++++----
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/spine-ts/webgl/demos/hoverboard.html b/spine-ts/webgl/demos/hoverboard.html
index 92b7fa1b7..b2a2a473e 100644
--- a/spine-ts/webgl/demos/hoverboard.html
+++ b/spine-ts/webgl/demos/hoverboard.html
@@ -10,7 +10,9 @@
 
 <center>
 <div class="aspect"><div><canvas id="hoverboard-canvas"></canvas></div></div>
-<input id="hoverboard-drawbones" type="checkbox"></input> Display Bones
+<input id="hoverboard-drawbones" type="checkbox"></input> Display Bones<br>
+<input id="hoverboard-aim" type="checkbox"></input> Aim<br>
+<button id="hoverboard-shoot">Shoot</button>
 </center>
 
 <script>
diff --git a/spine-ts/webgl/demos/hoverboard.js b/spine-ts/webgl/demos/hoverboard.js
index 643d7559f..d6fdea972 100644
--- a/spine-ts/webgl/demos/hoverboard.js
+++ b/spine-ts/webgl/demos/hoverboard.js
@@ -9,7 +9,7 @@ var hoverboardDemo = function(loadingComplete, bgColor) {
 	var timeKeeper, loadingScreen;
 	var target = null;
 	var hoverTargets = [];
-	var controlBones = ["hoverboard controller", "hip controller", "board target"];
+	var controlBones = ["hoverboard controller", "hip controller", "board target", "crosshair"];
 	var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.webgl.Vector3();
 	var isPlaying = true;
 
@@ -74,7 +74,7 @@ var hoverboardDemo = function(loadingComplete, bgColor) {
 		}
 	}
 
-	function setupUI() {
+	function setupUI () {
 		var checkbox = $("#hoverboard-drawbones");
 		renderer.skeletonDebugRenderer.drawRegionAttachments = false;
 		renderer.skeletonDebugRenderer.drawPaths = false;
@@ -83,9 +83,28 @@ var hoverboardDemo = function(loadingComplete, bgColor) {
 			renderer.skeletonDebugRenderer.drawPaths = this.checked;
 			renderer.skeletonDebugRenderer.drawBones = this.checked;
 		});
-	}
 
-	function setupInput (){
+		$("#hoverboard-aim").change(function () {
+			if (!this.checked)
+				state.setEmptyAnimation(1, 0.2);
+			else {
+				state.setEmptyAnimation(1, 0);
+				state.addAnimation(1, "aim", true, 0).mixDuration = 0.2;
+			}
+		});
+
+		$("#hoverboard-shoot").click(function () {
+			state.setAnimation(2, "aim", true);
+			state.setAnimation(3, "shoot", false).listener = {
+				complete: function (trackIndex) {
+					state.setEmptyAnimation(2, 0.2);
+					state.clearTrack(3);
+				}
+			};
+		});
+	}
+	
+	function setupInput () {
 		input.addListener({
 			down: function(x, y) {
 				isPlaying = false;