From d7d48d8cefb8d77dfe556813fa3d681241e3a462 Mon Sep 17 00:00:00 2001
From: 7ih <75285668+7ih@users.noreply.github.com>
Date: Fri, 21 May 2021 12:56:44 -0400
Subject: [PATCH 1/6] Update README.md

---
 README.md | 31 +------------------------------
 1 file changed, 1 insertion(+), 30 deletions(-)

diff --git a/README.md b/README.md
index 47a2b1b..a2e8cf1 100644
--- a/README.md
+++ b/README.md
@@ -1,30 +1 @@
-# **tether!** Swing Around a Ball of Destruction!
-
-![demo](https://tether.rayhanadev.repl.co/public/opengraphimage.png)
-
-### PLAY IT [FULLSCREEN](https://tether.rayhanadev.repl.co) NOW!
-
----
-
-**tether!** is game where you **wreck as many enemies as possible** using your tether, however if an enemy touches your ball then **you get obliterated**! This game has full mobile and offline support, designed as a progressive web application! This is my group's end-of-the-year project for our CS class.
-
-## How to Play
-**Click (or tap)** on the ball and **drag** it around! Use the motion of the ball and tether to **destroy each of the enemies**, the *Drifter*, the *Eye*, and the scariest of all... the *Twitchy*.
-
-## Features
-- **Fast** Load Times
-- Polished, Unique Graphics (no third party libs)
-- **Vibin'** Background Music
-- Full **Mobile Support**
-- **Offline Support**
-- **Custom** Made Everything
-- Progressive Web Application
-
-## Tips
-The first few levels are tutorials, after a few rounds with each character **you'll enter an endless wave** so be prepared.
-
-Keep an eye on **enemies spawning in**, they will charge at you **blazing fast** after spawning in!
-
-**Don't let your tether go wack**! If you move it around too much, it becomes **uncontrollable** and you have an awful time dealing with *Eyes*.
-
-Instead of charging a *Twitchy* head on, wait for it to **run out of fuel** and then destroy it.
\ No newline at end of file
+go away (unless ur rayhanadev)

From c852fefc03f6b28fa8453b8c1ae4980bfc96e4cf Mon Sep 17 00:00:00 2001
From: 7ih <75285668+7ih@users.noreply.github.com>
Date: Fri, 21 May 2021 13:01:09 -0400
Subject: [PATCH 2/6] Update script.js

---
 script.js | 67 ++++++++++++++++++++++++++-----------------------------
 1 file changed, 32 insertions(+), 35 deletions(-)

diff --git a/script.js b/script.js
index b6859ff..b46c0c8 100644
--- a/script.js
+++ b/script.js
@@ -798,7 +798,7 @@ function Tether() {
 
 	document.addEventListener('mousemove', function (e) {
 		self.lastInteraction = 'mouse';
-		if (e.target === canvas) {
+		if (document.pointerLockElement !== canvas) {
 			game.lastMousePosition = {x: e.layerX, y: e.layerY};
 		}
 	});
@@ -808,11 +808,18 @@ function Tether() {
 		game.lastMousePosition = {x: NaN, y: NaN};
 	});
 
-	canvas.addEventListener('mouseout', function (e) {
-		canvas.classList.remove('hidecursor');
-		self.locked = true;
-		game.lastMousePosition = {x: NaN, y: NaN};
-	});
+	function exitTether() {
+ 		if(document.pointerLockElement === canvas || document.mozPointerLockElement === canvas) 
+			self.locked = false;
+		else {
+			document.exitPointerLock();
+			self.locked = true;
+			game.lastMousePosition = {x: NaN, y: NaN};
+  		}
+	}
+
+	if ("onpointerlockchange" in document) document.addEventListener('pointerlockchange', exitTether);
+	else if ("onmozpointerlockchange" in document) document.addEventListener('mozpointerlockchange', exitTether);
 
 	function handleTouch(e) {
 		e.preventDefault();
@@ -829,16 +836,14 @@ function Tether() {
 extend(Mass, Tether);
 
 Tether.prototype.setPosition = function (position) {
-	Mass.prototype.setPosition.call(this, position);
+	if (this.lastInteraction !== 'mouse' || document.pointerLockElement === canvas) Mass.prototype.setPosition.call(this, position);
 	if (this.position !== this.positionOnPreviousFrame) {
 		this.pointsScoredSinceLastInteraction = 0;
 	}
 };
 
 Tether.prototype.step = function () {
-	var leniency;
-	if (this.lastInteraction === 'touch') leniency = 50;
-	else leniency = 30;
+	var leniency = this.lastInteraction === 'touch' ? 50 : 30;
 
 	if (
 		this.unlockable &&
@@ -846,7 +851,8 @@ Tether.prototype.step = function () {
 			forXAndY([this.position, game.lastMousePosition], forXAndY.subtract),
 		) < leniency
 	) {
-		canvas.classList.add('hidecursor');
+		canvas.requestPointerLock();
+		if (!(this.lastInteraction !== 'mouse' || document.pointerLockElement === canvas)) return;
 		this.locked = false;
 
 		if (!game.started) {
@@ -1556,7 +1562,7 @@ function Game() {
 	self.lastMousePosition = {x: NaN, y: NaN};
 
 	self.reset = function (waveIndex) {
-		canvas.classList.remove('hidecursor');
+		document.exitPointerLock();
 
 		self.background = new Background();
 		self.ended = null;
@@ -2204,7 +2210,7 @@ function Game() {
 	};
 
 	self.end = function () {
-		canvas.classList.remove('hidecursor');
+		document.exitPointerLock();
 		logScore(self.score);
 		self.ended = self.timeElapsed;
 		self.tether.locked = true;
@@ -2236,6 +2242,19 @@ function handleClick(e) {
 
 document.addEventListener('click', handleClick);
 
+	canvas.addEventListener('mousemove', function (e) {
+		if (document.pointerLockElement === canvas) {
+			game.lastMousePosition.x += e.movementX;
+			game.lastMousePosition.y += e.movementY;
+
+			if (game.lastMousePosition.x < 0) game.lastMousePosition.x = 0;
+			else if (game.lastMousePosition.x > width) game.lastMousePosition.x = width;
+
+			if (game.lastMousePosition.y < 0) game.lastMousePosition.y = 0;
+			else if (game.lastMousePosition.y > height) game.lastMousePosition.y = height;
+		}
+	});
+
 document.addEventListener('touchstart', function (e) {
 	lastTouchStart = new Date().getTime();
 });
@@ -2248,28 +2267,6 @@ document.addEventListener('touchend', function (e) {
 	}
 });
 
-var cursorPos = {x: width / 2, y: (height / 3) * 2};
-
-canvas.addEventListener('mousemove', function (e) {
-	if (document.pointerLockElement === canvas) {
-		var setPosition;
-		if (Object.values(game.lastMousePosition).every(Boolean)) {
-			setPosition = game.lastMousePosition;
-		} else {
-			setPosition = cursorPos;
-		}
-
-		setPosition.x += e.movementX;
-		setPosition.y += e.movementY;
-
-		if (setPosition.x < 0) setPosition.x = 0;
-		else if (setPosition.x > width) setPosition.x = width;
-
-		if (setPosition.y < 0) setPosition.y = 0;
-		else if (setPosition.y > height) setPosition.y = height;
-	}
-});
-
 window.requestFrame =
 	window.requestAnimationFrame ||
 	window.webkitRequestAnimationFrame ||

From 5e913864080317918b88fe996ff2d15bdb948487 Mon Sep 17 00:00:00 2001
From: 7ih <75285668+7ih@users.noreply.github.com>
Date: Fri, 21 May 2021 13:08:07 -0400
Subject: [PATCH 3/6] Update script.js


From 0e01f896b15df4b9eeb78b476c0223e5e34805f8 Mon Sep 17 00:00:00 2001
From: 7ih <75285668+7ih@users.noreply.github.com>
Date: Fri, 21 May 2021 13:49:25 -0400
Subject: [PATCH 4/6] Update script.js

---
 script.js | 42 +++++++++++++++++++++++++++---------------
 1 file changed, 27 insertions(+), 15 deletions(-)

diff --git a/script.js b/script.js
index b46c0c8..ae5efa5 100644
--- a/script.js
+++ b/script.js
@@ -23,6 +23,7 @@ var DEBUG = window.location.hash === '#DEBUG',
 	uidCookieKey = 'tetherId',
 	uid,
 	playerRGB = [20, 20, 200],
+    	hslVal = 0,
 	shouldUnmuteImmediately = false,
 	cookieExpiryDate = new Date();
 
@@ -228,6 +229,10 @@ function rgbWithOpacity(rgb, opacity) {
 	return 'rgba(' + rgbStrings.join(',') + ',' + opacity.toFixed(2) + ')';
 }
 
+function hsl(hsl) {
+	return 'hsl(' + hsl + ', 100%, 50%)';
+}
+
 function draw(opts) {
 	for (var defaultKey in draw.defaults) {
 		if (!(defaultKey in opts)) opts[defaultKey] = draw.defaults[defaultKey];
@@ -391,12 +396,13 @@ function initCanvas() {
 	) {
 		saveCookie(lastDayCookieKey, currentDate.getTime());
 		saveCookie(streakCountCookieKey, 0);
-	} else if (later48Hours > Number(Date.now()) > later24Hours) {
+	} else if (later48Hours > Number(new Date()) && Number(new Date()) > later24Hours) {
 		saveCookie(streakCountCookieKey, (streak += 1));
 		saveCookie(lastDayCookieKey, currentDate.getTime());
-	} else if (Number(Date.now()) < later24Hours) {
+	} else if (Number(new Date()) < later24Hours) {
 	} else {
 		saveCookie(streakCountCookieKey, 0);
+		saveCookie(lastDayCookieKey, currentDate.getTime());
 	}
 
 	switch (streak) {
@@ -427,7 +433,7 @@ function initCanvas() {
 			break;
 		default:
 		case 10:
-			playerRGB = [223, 41, 53];
+			playerRGB = "Rainbow";
 			console.log('Congrats on your 10 day streak!!');
 			break;
 	}
@@ -497,14 +503,18 @@ function timeToNextClaim() {
 	var deadline = lastDate.getTime() + 86400000;
 	var timeRemaining = deadline - new Date();
 	var formattedTime = new Date(timeRemaining);
-
-	return `${
-		formattedTime.getHours() > 9 ? '' : '0'
-	}${formattedTime.getHours()}:${
-		formattedTime.getMinutes() > 9 ? '' : '0'
-	}${formattedTime.getMinutes()}:${
-		formattedTime.getSeconds() > 9 ? '' : '0'
-	}${formattedTime.getSeconds()}`;
+	
+	if(formattedTime > 0) {
+		return `${
+			formattedTime.getHours() > 9 ? '' : '0'
+		}${formattedTime.getHours()}:${
+			formattedTime.getMinutes() > 9 ? '' : '0'
+		}${formattedTime.getMinutes()}:${
+			formattedTime.getSeconds() > 9 ? '' : '0'
+		}${formattedTime.getSeconds()}`;
+	} else {
+		return 'Right Now!'
+	}
 }
 
 function edgesOfCanvas() {
@@ -661,7 +671,11 @@ Mass.prototype = {
 	},
 
 	getCurrentColor: function () {
-		return rgbWithOpacity(this.rgb, this.getOpacity());
+		if(this.rgb === 'Rainbow') {
+			if(hslVal !== 360) hslVal++;
+			else hslVal = 0;
+		}
+		return this.rgb === 'Rainbow' ? hsl(hslVal) : rgbWithOpacity(this.rgb, this.getOpacity());
 	},
 
 	draw: function () {
@@ -919,9 +933,7 @@ function Cable(tether, player) {
 		draw({
 			type: 'line',
 			stroke: true,
-			strokeStyle: `rgba(${playerRGB[0] ?? 20}, ${playerRGB[1] ?? 20}, ${
-				playerRGB[2] ?? 200
-			}, 1)`,
+			strokeStyle: `${playerRGB === 'Rainbow' ? `${hsl(hslVal)}` : `rgba(${playerRGB[0] ?? 20}, ${playerRGB[1] ?? 20}, ${playerRGB[2] ?? 200}, 1)`}`,
 			linePaths: [self.line()],
 		});
 

From 0000ccffd8372bf93770cd1028001b2a3ff731b4 Mon Sep 17 00:00:00 2001
From: 7ih <75285668+7ih@users.noreply.github.com>
Date: Fri, 21 May 2021 13:50:29 -0400
Subject: [PATCH 5/6] Update README.md

---
 README.md | 31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index a2e8cf1..ddeecb2 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,30 @@
-go away (unless ur rayhanadev)
+# **tether!** Swing Around a Ball of Destruction!
+
+![demo](https://tether.rayhanadev.repl.co/public/opengraphimage.png)
+
+### PLAY IT [FULLSCREEN](https://tether.rayhanadev.repl.co) NOW!
+
+---
+
+**tether!** is game where you **wreck as many enemies as possible** using your tether, however if an enemy touches your ball then **you get obliterated**! This game has full mobile and offline support, designed as a progressive web application! This is my group's end-of-the-year project for our CS class.
+
+## How to Play
+**Click (or tap)** on the ball and **drag** it around! Use the motion of the ball and tether to **destroy each of the enemies**, the *Drifter*, the *Eye*, and the scariest of all... the *Twitchy*.
+
+## Features
+- **Fast** Load Times
+- Polished, Unique Graphics (no third party libs)
+- **Vibin'** Background Music
+- Full **Mobile Support**
+- **Offline Support**
+- **Custom** Made Everything
+- Progressive Web Application
+
+## Tips
+The first few levels are tutorials, after a few rounds with each character **you'll enter an endless wave** so be prepared.
+
+Keep an eye on **enemies spawning in**, they will charge at you **blazing fast** after spawning in!
+
+**Don't let your tether go wack**! If you move it around too much, it becomes **uncontrollable** and you have an awful time dealing with *Eyes*.
+
+Instead of charging a *Twitchy* head on, wait for it to **run out of fuel** and then destroy it.

From 746387fdb0dc2ba65dc95f95412fb80ec1667746 Mon Sep 17 00:00:00 2001
From: 7ih <75285668+7ih@users.noreply.github.com>
Date: Fri, 21 May 2021 14:00:56 -0400
Subject: [PATCH 6/6] Update script.js

---
 script.js | 42 +++++++++++++++---------------------------
 1 file changed, 15 insertions(+), 27 deletions(-)

diff --git a/script.js b/script.js
index ae5efa5..b46c0c8 100644
--- a/script.js
+++ b/script.js
@@ -23,7 +23,6 @@ var DEBUG = window.location.hash === '#DEBUG',
 	uidCookieKey = 'tetherId',
 	uid,
 	playerRGB = [20, 20, 200],
-    	hslVal = 0,
 	shouldUnmuteImmediately = false,
 	cookieExpiryDate = new Date();
 
@@ -229,10 +228,6 @@ function rgbWithOpacity(rgb, opacity) {
 	return 'rgba(' + rgbStrings.join(',') + ',' + opacity.toFixed(2) + ')';
 }
 
-function hsl(hsl) {
-	return 'hsl(' + hsl + ', 100%, 50%)';
-}
-
 function draw(opts) {
 	for (var defaultKey in draw.defaults) {
 		if (!(defaultKey in opts)) opts[defaultKey] = draw.defaults[defaultKey];
@@ -396,13 +391,12 @@ function initCanvas() {
 	) {
 		saveCookie(lastDayCookieKey, currentDate.getTime());
 		saveCookie(streakCountCookieKey, 0);
-	} else if (later48Hours > Number(new Date()) && Number(new Date()) > later24Hours) {
+	} else if (later48Hours > Number(Date.now()) > later24Hours) {
 		saveCookie(streakCountCookieKey, (streak += 1));
 		saveCookie(lastDayCookieKey, currentDate.getTime());
-	} else if (Number(new Date()) < later24Hours) {
+	} else if (Number(Date.now()) < later24Hours) {
 	} else {
 		saveCookie(streakCountCookieKey, 0);
-		saveCookie(lastDayCookieKey, currentDate.getTime());
 	}
 
 	switch (streak) {
@@ -433,7 +427,7 @@ function initCanvas() {
 			break;
 		default:
 		case 10:
-			playerRGB = "Rainbow";
+			playerRGB = [223, 41, 53];
 			console.log('Congrats on your 10 day streak!!');
 			break;
 	}
@@ -503,18 +497,14 @@ function timeToNextClaim() {
 	var deadline = lastDate.getTime() + 86400000;
 	var timeRemaining = deadline - new Date();
 	var formattedTime = new Date(timeRemaining);
-	
-	if(formattedTime > 0) {
-		return `${
-			formattedTime.getHours() > 9 ? '' : '0'
-		}${formattedTime.getHours()}:${
-			formattedTime.getMinutes() > 9 ? '' : '0'
-		}${formattedTime.getMinutes()}:${
-			formattedTime.getSeconds() > 9 ? '' : '0'
-		}${formattedTime.getSeconds()}`;
-	} else {
-		return 'Right Now!'
-	}
+
+	return `${
+		formattedTime.getHours() > 9 ? '' : '0'
+	}${formattedTime.getHours()}:${
+		formattedTime.getMinutes() > 9 ? '' : '0'
+	}${formattedTime.getMinutes()}:${
+		formattedTime.getSeconds() > 9 ? '' : '0'
+	}${formattedTime.getSeconds()}`;
 }
 
 function edgesOfCanvas() {
@@ -671,11 +661,7 @@ Mass.prototype = {
 	},
 
 	getCurrentColor: function () {
-		if(this.rgb === 'Rainbow') {
-			if(hslVal !== 360) hslVal++;
-			else hslVal = 0;
-		}
-		return this.rgb === 'Rainbow' ? hsl(hslVal) : rgbWithOpacity(this.rgb, this.getOpacity());
+		return rgbWithOpacity(this.rgb, this.getOpacity());
 	},
 
 	draw: function () {
@@ -933,7 +919,9 @@ function Cable(tether, player) {
 		draw({
 			type: 'line',
 			stroke: true,
-			strokeStyle: `${playerRGB === 'Rainbow' ? `${hsl(hslVal)}` : `rgba(${playerRGB[0] ?? 20}, ${playerRGB[1] ?? 20}, ${playerRGB[2] ?? 200}, 1)`}`,
+			strokeStyle: `rgba(${playerRGB[0] ?? 20}, ${playerRGB[1] ?? 20}, ${
+				playerRGB[2] ?? 200
+			}, 1)`,
 			linePaths: [self.line()],
 		});