From d31ecfbf0e16069163e82ee33f815174de2391f6 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen@syndamia.com>
Date: Sun, 27 Aug 2023 16:24:25 +0300
Subject: [WGL/P] Added coordinates in the top left corner

---
 Year 2/Computer Graphics with WebGL/Project/Project.html |  8 ++++++++
 Year 2/Computer Graphics with WebGL/Project/menu.js      | 11 +++++++++++
 Year 2/Computer Graphics with WebGL/Project/spaceship.js |  5 +++++
 3 files changed, 24 insertions(+)

diff --git a/Year 2/Computer Graphics with WebGL/Project/Project.html b/Year 2/Computer Graphics with WebGL/Project/Project.html
index c4d090c..b4463df 100644
--- a/Year 2/Computer Graphics with WebGL/Project/Project.html	
+++ b/Year 2/Computer Graphics with WebGL/Project/Project.html	
@@ -58,6 +58,12 @@ h2 {
 	padding: 0.5em;
 	max-width: 24em;
 	max-height: calc(100vh - 0.5em);
+}
+#coordinates {
+	left: 0;
+	top: 0;
+	color: white;
+	position: absolute;
 }
 	</style>
 
@@ -165,10 +171,12 @@ h2 {
 			<h2>Settings</h2>
 			<p>
 				Debug mode: <input type="checkbox" id="debug-mode"><br>
+				Toggle coordinates: <input type="checkbox" id="coordinates-cb"><br>
 				Only horizontal mouse movement: <input type="checkbox" id="only-horizontal"><br>
 				Only vertical mouse movement: <input type="checkbox" id="only-vertical">
 			</p>
 		</div>
 	</div>
+	<div id="coordinates"></div>
 	<script src="menu.js"></script>
 </body>
diff --git a/Year 2/Computer Graphics with WebGL/Project/menu.js b/Year 2/Computer Graphics with WebGL/Project/menu.js
index 9b61ef7..0b56d2b 100644
--- a/Year 2/Computer Graphics with WebGL/Project/menu.js	
+++ b/Year 2/Computer Graphics with WebGL/Project/menu.js	
@@ -30,6 +30,17 @@ function verChange() {
 verChange.call(onlyVerticalCB);
 onlyVerticalCB.addEventListener('change', verChange);
 
+coordsElem = document.getElementById('coordinates');
+const coordsCB = document.getElementById('coordinates-cb');
+function coordscbChange() {
+	if (this.checked)
+		coordsElem.classList.remove('hide');
+	else
+		coordsElem.classList.add('hide');
+}
+coordscbChange.call(coordsCB);
+coordsCB.addEventListener('change', coordscbChange);
+
 /* Levels */
 
 const levelSelect = document.getElementById('level-select');
diff --git a/Year 2/Computer Graphics with WebGL/Project/spaceship.js b/Year 2/Computer Graphics with WebGL/Project/spaceship.js
index 5b98229..a50f2fc 100644
--- a/Year 2/Computer Graphics with WebGL/Project/spaceship.js	
+++ b/Year 2/Computer Graphics with WebGL/Project/spaceship.js	
@@ -150,8 +150,13 @@ function mouseInit() {
 /*
  * On every draw
  */
+coordsElem = undefined;
+
 function updateCamera() {
 	for (var i = 0; i < pressedKeys.length; i++)
 		if (pressedKeys[i]) keyAction[i]();
 	lookAt(pos, vecSum(pos, forward.toCartesian()), up.toCartesian());
+	if (coordsElem) {
+		coordsElem.innerText = 'X: '+pos[0]+' Y: '+pos[1]+' Z: '+pos[2];
+	}
 }
-- 
cgit v1.3.1-26-gb76a