From 50a878963ce9c0b4e376c395982e6912857f500b Mon Sep 17 00:00:00 2001
From: gbrochar <gaetanbrochard@protonmail.com>
Date: Fri, 27 Nov 2020 12:13:53 +0100
Subject: [PATCH] proper mouse camera support

---
 src/client/init.ts |  4 ----
 src/client/main.ts |  3 +--
 src/client/ux.ts   | 32 ++++++++++++++++++--------------
 views/index.ejs    |  3 +++
 4 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/client/init.ts b/src/client/init.ts
index 764d2f2..d22dfc7 100644
--- a/src/client/init.ts
+++ b/src/client/init.ts
@@ -34,10 +34,6 @@ export function initParams(context: any) {
 			y: 0,
 			z: 0,
 		},
-		mousePrev: {
-			x: null,
-			y: null,
-		},
 		keyboard: {
 			w: false,
 			a: false,
diff --git a/src/client/main.ts b/src/client/main.ts
index 8dc19e2..8a2e792 100644
--- a/src/client/main.ts
+++ b/src/client/main.ts
@@ -41,7 +41,6 @@ async function main() {
 
 	const data = await fetchObj('/static/objs/racer.obj');
 	initParams(context);
-	console.log(context.params);
 	updateObj(context, data, true);
 	initShaderProgram(context, vsSource, fsSource4);
 	setProgramInfo(context);
@@ -84,6 +83,6 @@ async function main() {
 	uiUpdateTexture(context);
 	uiUpdateObject(context);
 	uiUpdateShader(context);
-	initUX(context);
+	initUX(context, canvas);
 	requestAnimationFrame(render);
 }
diff --git a/src/client/ux.ts b/src/client/ux.ts
index 06b1446..0639700 100644
--- a/src/client/ux.ts
+++ b/src/client/ux.ts
@@ -3,23 +3,27 @@ import $ from 'jquery';
 /**
  * UI block to update object
  * @param {any} context the program context
+ * @param {any} canvas the HTML canvas
  */
-export function initUX(context: any) {
-	$('#glCanvas').mousemove((event) => {
-		if (context.params.mousePrev.x == null) {
-			context.params.mousePrev.x = event.pageX;
-			context.params.mousePrev.y = event.pageY;
+export function initUX(context: any, canvas: any) {
+	window.addEventListener('mousemove', (e) => {
+		if (document.pointerLockElement === canvas) {
+			context.params.camRot.x += 0.01 * e.movementY;
+			context.params.camRot.y += 0.01 * e.movementX;
+
+			context.params.camRot.x = Math.max(-Math.PI * 0.5,
+				Math.min(context.params.camRot.x, Math.PI * 0.5));
+			context.params.camRot.y += context.params.camRot.y > Math.PI ?
+				-Math.PI * 2 : context.params.camRot.y < -Math.PI ?
+					Math.PI * 2 : 0;
 		}
-		context.params.camRot.y +=
-			(context.params.mousePrev.x - event.pageX) / 100;
-		context.params.camRot.x +=
-			(context.params.mousePrev.y - event.pageY) / 100;
-		context.params.mousePrev.x = event.pageX;
-		context.params.mousePrev.y = event.pageY;
 	});
-	$('#glCanvas').mouseenter((event) => {
-		context.params.mousePrev.x = event.pageX;
-		context.params.mousePrev.y = event.pageY;
+	$('#glCanvas').click(() => {
+		if (document.pointerLockElement === canvas) {
+			document.exitPointerLock();
+		} else {
+			canvas.requestPointerLock();
+		}
 	});
 	$(document).keydown((event) => {
 		if (event.key == 'Shift') {
diff --git a/views/index.ejs b/views/index.ejs
index 43e655a..62838ea 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -14,6 +14,9 @@
 		<div id="root">
 			<canvas id='glCanvas' width='640' height='640'></canvas>
 			<div id='ui'>
+				<div class='ui-block'>
+					To control the camera with mouse, click in the canvas, to exit, click again.
+				</div>
 				<div class='ui-block'>
 					<div style='display: inline;'>Change shader: </div>
 					<button id='s_blackandwhite'>Black & White</button>