[WGL/P] Added basic UI when you aren't moving around

2 files changed, 73 insertions, 10 deletions

diff --git a/Year 2/Computer Graphics with WebGL/Project/Project.html b/Year 2/Computer Graphics with WebGL/Project/Project.html
index bd70dcc..9852ab8 100644
--- a/Year 2/Computer Graphics with WebGL/Project/Project.html
+++ b/Year 2/Computer Graphics with WebGL/Project/Project.html
@@ -11,6 +11,7 @@
 body {

 	padding: 0;

 	margin: 0;

+	font: 21px sans-serif;

 }

 canvas {

 	display: block;

@@ -21,6 +22,41 @@ canvas {
 	height: 100vh;

 	/* cursor: none; */

 }

+

+.hide {

+	display: none;

+}

+

+h2 {

+	border-bottom: 2px solid gray;

+}

+#menu {

+	position: absolute;

+	height: 100vh;

+	width: 100vw;

+	left: 0;

+	top: 0;

+	color: white;

+}

+#menu > * {

+	position: absolute;

+	margin: 0.5em;

+	padding: 0.2em;

+	border: 2px solid white;

+	width: auto;

+}

+#paused { 

+	left: 0;

+	top: 0;

+	font-size: 25px;

+	cursor: pointer;

+}

+#settings {

+	right: 0;

+	top: 0;

+	padding: 0.5em;

+	max-width: 15em;

+}

 	</style>

 

 	<script src="spaceship.js"></script>

@@ -66,7 +102,7 @@ canvas {
 						new Sphere([700,0,1000], 40),

 						new Sphere([0,0,0], 100),

 						new Sphere([1000, 0, -30], 20)];

-			planets.forEach((p) => p.color = [1,0,0]);

+			planets.forEach((p) => p.color = [0.956,0.5,0.215]);

 

 			resizeglcanvas();

 		}

@@ -98,4 +134,16 @@ canvas {
 

 <body onload="start()">

 	<canvas id="picasso"></canvas>

+	<div id="menu">

+		<div id="paused">Click here to explore</div>

+		<div id="settings">

+			<h2>About</h2>

+			<p>

+				Simulation of the light-bending effects of black holes.<br>

+				WASD to move around, space and shift for up and down, mouse cursor to look around.

+			</p>

+			<h2>Settings</h2>

+			Move speed:

+		</div>

+	</div>

 </body>

diff --git a/Year 2/Computer Graphics with WebGL/Project/spaceship.js b/Year 2/Computer Graphics with WebGL/Project/spaceship.js
index ca7de7f..075ae4d 100644
--- a/Year 2/Computer Graphics with WebGL/Project/spaceship.js
+++ b/Year 2/Computer Graphics with WebGL/Project/spaceship.js
@@ -1,3 +1,5 @@
+// This file contains navigation and "pause" menu configuration
+
 /*
  * Helpers
  */
@@ -67,6 +69,8 @@ var up      = new SphericalCoord(0, 0);
   // this vector can be calculated from forward and up, but this way we improve speed
 var left    = new SphericalCoord(Math.PI / 2,  Math.PI / 2);
 
+var isPaused = true;
+
 /*
  * Navigation keys
  */
@@ -80,7 +84,9 @@ var keyAction = [
 	() => { pos = vecSum(pos, left.toCartesian()); },    // 'a'
 	() => { pos = vecSub(pos, left.toCartesian()); },    // 'd'
 ];
-addEventListener("keydown", (event) => {
+document.addEventListener("keydown", (event) => {
+	if (isPaused) return;
+
 	switch (event.key) {
 		case ' '    : pressedKeys[0] = true; break;
 		case 'Shift': pressedKeys[1] = true; break;
@@ -90,7 +96,9 @@ addEventListener("keydown", (event) => {
 		case 'd'    : pressedKeys[5] = true; break;
 	}
 });
-addEventListener("keyup", (event) => {
+document.addEventListener("keyup", (event) => {
+	if (isPaused) return;
+
 	switch (event.key) {
 		case ' '    : pressedKeys[0] = false; break;
 		case 'Shift': pressedKeys[1] = false; break;
@@ -105,6 +113,8 @@ addEventListener("keyup", (event) => {
  * Mouse movement
  */
 function updateLookingDirection(e) {
+	if (isPaused) return;
+
 	var vertical   = (e.movementY / canvas.offsetHeight) * ROTATION_SPEED;
 	var horizontal = (-e.movementX / canvas.offsetWidth) * ROTATION_SPEED;
 
@@ -112,17 +122,22 @@ function updateLookingDirection(e) {
 	up.addAngles(vertical, horizontal);
 	left.addAngles(vertical, horizontal);
 }
+document.addEventListener('mousemove', updateLookingDirection);
+document.addEventListener('pointerlockchange', () => {
+	isPaused = document.pointerLockElement !== canvas;
+	menu.classList.toggle('hide');
+});
 
 function mouseInit() {
+	paused = document.getElementById('paused');
+
 	canvas.addEventListener('click', async () => {
-		await canvas.requestPointerLock();
+		if (isPaused)
+			await canvas.requestPointerLock();
 	});
-	document.addEventListener('pointerlockchange', () => {
-		if (document.pointerLockElement === canvas) {
-			document.addEventListener("mousemove", updateLookingDirection);
-		} else {
-			document.removeEventListener("mousemove", updateLookingDirection);
-		}
+	paused.addEventListener('click', async () => {
+		if (isPaused)
+			await canvas.requestPointerLock();
 	});
 }