From 5cbfb55ee42e82d30c4a9117a61105f16ad08db7 Mon Sep 17 00:00:00 2001
From: Sapphyre Gervais <sapphyre.gervais@gmail.com>
Date: Thu, 27 Oct 2016 23:37:51 -0700
Subject: [PATCH] Added mouse controls - Pressing the mouse / holding finger
 down should move forward - Dragging the mouse / finger should rotate - State
 transitions between forward and rotate could be handled better Also, added
 side panel with debug info, but hid it for now...

---
 server/static/client.js  | 78 +++++++++++++++++++++++++++++++++++++---
 server/static/index.html |  1 +
 server/static/style.css  | 12 +++++++
 server/static/vector.js  |  4 +++
 4 files changed, 91 insertions(+), 4 deletions(-)

diff --git a/server/static/client.js b/server/static/client.js
index feb4199..be1f16c 100644
--- a/server/static/client.js
+++ b/server/static/client.js
@@ -12,6 +12,10 @@ var cameraDirection = new Vector(0, 1, 0);
 var lastRenderDirection = new Vector(0, 1, 0);
 var upDirection = new Vector(0, 0, 1);
 var keys = new Array();
+var draggingCanvas = false;
+var dragVector = {x: null, y: null};
+var pressForward = false;
+var activeDrag = false;
 
 function initKeys() {
     for (var i = 0; i < 256; ++i) {
@@ -22,10 +26,73 @@ function initKeys() {
 window.onkeyup = function(event) {
     keys[event.keyCode] = 0;
 };
-
 window.onkeydown = function(event) {
     keys[event.keyCode] = 1;
 };
+window.ontouchstart = function(event) {
+	startDrag(event.touches[0].clientX,event.touches[0].clientY);
+};
+window.onmousedown = function(event) {
+	startDrag(event.clientX,event.clientY);
+};
+window.ontouchmove = function(event) {
+	dragCanvas(event.touches[0].clientX,event.touches[0].clientY);
+};
+window.onmousemove = function(event) {
+	dragCanvas(event.clientX,event.clientY);
+};
+window.ontouchend = function(event) {
+	endDrag();
+};
+window.onmouseup = function(event) {
+	endDrag();
+};
+
+function startDrag(x,y) {
+	draggingCanvas = true;
+	pressForward = false;
+	activeDrag = false;
+	dragVector = {x: x, y: y};
+    	setTimeout(function(){if(draggingCanvas && !activeDrag){pressForward = true;}}, 500);
+};
+
+function endDrag() {
+	draggingCanvas = false;
+	pressForward = false;
+	activeDrag = false;
+	dragVector = {x: null, y: null};
+};
+
+function dragCanvas(x,y) {
+	if(dragVector.x == null || dragVector.y == null) {
+		dragVector.x = x;
+		dragVector.y = y;
+	}
+	if(draggingCanvas && Math.abs(x-dragVector.x) > 2 && Math.abs(y-dragVector.y) > 2) {
+		pressForward = false;
+		activeDrag = true;
+		var right = Vector.crossProduct(cameraDirection, upDirection);
+		if(y < dragVector.y) {
+			cameraDirection = cameraDirection.rotate(right, turnRate*((dragVector.y-y)/10));
+			upDirection = upDirection.rotate(right, turnRate*((dragVector.y-y)/10));
+
+		} else if(y > dragVector.y) {
+			cameraDirection = cameraDirection.rotate(right, -turnRate*((y-dragVector.y)/10));
+			upDirection = upDirection.rotate(right, -turnRate*((y-dragVector.y)/10));
+		}
+		if(x < dragVector.x) {
+			cameraDirection = cameraDirection.rotate(upDirection, -turnRate*((dragVector.x-x)/10));
+		} else if(x > dragVector.x) {
+			cameraDirection = cameraDirection.rotate(upDirection, turnRate*((x-dragVector.x)/10));
+		}
+		dragVector.x = x;
+		dragVector.y = y;
+	} else if(draggingCanvas) {
+		activeDrag = false;
+    		setTimeout(function(){if(draggingCanvas && !activeDrag){pressForward = true;}}, 1000);
+	}
+	
+};
 
 function renderStar(context, screenX, screenY, area, color) {
     var radius = Math.sqrt(area / Math.PI);
@@ -46,7 +113,8 @@ function renderStar(context, screenX, screenY, area, color) {
 }
 
 function doOneFrame() {
-    if (keys[87]) {
+    //if (keys[87] ) {
+    if (keys[87] || pressForward) {
 	cameraPosition.addInPlace(cameraDirection.multiplyScalar(speed));
     }
     if (keys[83]) {
@@ -60,8 +128,8 @@ function doOneFrame() {
 	cameraPosition.addInPlace(right.multiplyScalar(speed));
     }
     if (keys[38]) {
-	cameraDirection = cameraDirection.rotate(right, -turnRate);
-	upDirection = upDirection.rotate(right, -turnRate);
+	cameradirection = cameradirection.rotate(right, -turnrate);
+	updirection = updirection.rotate(right, -turnrate);
     }
     if (keys[40]) {
 	cameraDirection = cameraDirection.rotate(right, turnRate);
@@ -81,6 +149,8 @@ function doOneFrame() {
     }
     lastRenderPosition.copyFrom(cameraPosition);
     lastRenderDirection.copyFrom(cameraDirection);
+    document.getElementById('controlsBody').innerHTML = "Position: "
+	+cameraPosition.print()+"<br>Direction: "+cameraDirection.print();    
     starsUpdated = false;
     
     var canvas = document.getElementById('stars');
diff --git a/server/static/index.html b/server/static/index.html
index eda69ab..b8c602f 100644
--- a/server/static/index.html
+++ b/server/static/index.html
@@ -5,6 +5,7 @@
   </head>
   <body>
     <canvas id="stars" width="100" height="100"></canvas>
+    <div id="controls"><div id="controlsBody">test test test</div></div>
     <script src="StarMap.js"></script>
     <script src="colorMap.js"></script>
     <script src="vector.js"></script>
diff --git a/server/static/style.css b/server/static/style.css
index 1c9a331..f3ae491 100644
--- a/server/static/style.css
+++ b/server/static/style.css
@@ -3,3 +3,15 @@ html, body {
     height: 100%;
     margin: 0px;
 }
+#controls {
+    position: absolute;
+    z-index: 2;
+    top: 0px;
+    right: 0px;
+    width: 310px;
+    height: 100%;
+    padding: 5px;
+    margin: 0px;
+    background-color:rgba(255,255,255,0.5);
+    display:none;
+}
diff --git a/server/static/vector.js b/server/static/vector.js
index ef7c575..a80f042 100644
--- a/server/static/vector.js
+++ b/server/static/vector.js
@@ -6,6 +6,10 @@ function Vector(x, y, z) {
     this.z = z;
 }
 
+Vector.prototype.print = function() {
+    return "X: "+this.x+" Y: "+this.y+" Z: "+this.z;
+}
+
 Vector.prototype.copyFrom = function(v) {
     this.x = v.x;
     this.y = v.y;