Merge branch 'hotfix-0.0.2'

CHANGELOG.md

@@ -5,6 +5,33 @@ Changelog
 ------------
 -
 
+[v0.0.2] - 2020-05-19
+---------------------
+[GitHub Release Page](https://github.com/ToranSharma/Xporcle-Extension/releases/tag/v0.0.2)
+### Added
+- Gecko browser specific settings extension ID for future Firefox storage API
+  support.
+- Sending of a connection closed message from the background script to the
+  content script.
+- Corresponding connection close message handing in the content script.
+- Handling of quiz finished message to update internal state of the background
+  script.
+
+### Fixed
+- Handling of changing page while a quiz is being played.
+- Resetting of internal state variables in background script.
+- Missing declaration of interfaceContainer.
+- Width of interfaceBox to account for differing scroll bar size in Firefox.
+- Handling of start quiz messages when quiz is already running. This only really
+  affects the host of a room.
+- Clipboard writing to support Firefox.
+
+### Changed
+- Content script renamed from script.js to xporcle.js.
+
+### Removed
+- Debugging console messages from content and background scripts.
+
 [v0.0.1] - 2020-05-18
 ---------------------
 [GitHub Release Page](https://github.com/ToranSharma/Xporcle-Extension/releases/tag/v0.0.1)
@@ -20,4 +47,5 @@ Changelog
 - Options page popup placeholder.
 
 [Unreleased]: https://github.com/ToranSharma/Xporcle-Extension/compare/master...develop
-[v0.0.1]: https://github.com/ToranSharma/Xporcle-Extension/releases/tag/v1.0.0
+[v0.0.2]: https://github.com/ToranSharma/Xporcle-Extension/compare/v0.0.1...v0.0.2
+[v0.0.1]: https://github.com/ToranSharma/Xporcle-Extension/releases/tag/v0.0.1

background.js

@@ -39,18 +39,14 @@ let playing = null;
 chrome.runtime.onConnect.addListener(
 	(port) =>
 	{
-		console.log("Page connecting");
 		if (port.name === "messageRelay")
 		{
 			messagePort = port;
 			port.onMessage.addListener(
 				(message) =>
 				{
-					console.log("Page sent a message");
-					console.log(message);
 					if (message.type === "connectionStatus")
 					{
-						console.log("Page is asking about the connection status");
 						// Request to see if we are still connected to a room
 						if (ws !== null)
 						{
@@ -84,7 +80,7 @@ chrome.runtime.onConnect.addListener(
 
 						if (message.type === "live_scores_update")
 						{
-							playing = message["playing"]
+							playing = !message["finished"]
 						}
 					}
 				}
@@ -94,7 +90,6 @@ chrome.runtime.onConnect.addListener(
 			port.onDisconnect.addListener(
 				() =>
 				{
-					console.log("page disconnected");
 					messagePort = null;
 
 					if (playing)
@@ -112,8 +107,6 @@ chrome.runtime.onConnect.addListener(
 
 function startConnection(initialMessage)
 {
-	console.log("Connecting to server");
-
 	username = initialMessage.username;
 
 	if (initialMessage["code"] !== undefined)
@@ -129,7 +122,8 @@ function startConnection(initialMessage)
 	};
 	ws.onclose = (event) =>
 	{
-		console.log("connection closed");
+		if (messagePort != null)
+			messagePort.postMessage({type: "connection_closed"});
 		reset();
 	};
 	ws.onopen = (event) =>
@@ -143,7 +137,6 @@ function startConnection(initialMessage)
 function forwardMessage(event)
 {
 	const message = JSON.parse(event.data);
-	console.log(message);
 
 	messageType = message["type"];
 
@@ -159,13 +152,16 @@ function forwardMessage(event)
 	}
 	else if (messageType === "scores_update")
 	{
-		playing = false;
-		Object.assign(scores, message["scores"]);
+		scores = message["scores"];
 	}
 	else if (messageType === "start_quiz")
 	{
 		playing = true;
 	}
+	else if (messageType === "quiz_finished")
+	{
+		playing = false;
+	}
 	else if (messageType === "url_update")
 	{
 		urls[message["username"]] = message["url"];
@@ -195,4 +191,8 @@ function reset()
 	ws = null;
 	username = null;
 	roomCode = null;
+	host = null;
+	scores = {};
+	urls = {};
+	playing = null;
 }

manifest.json

@@ -1,7 +1,7 @@
 {
 	"name"				:	"Xporcle",
 	"description"		:	"Adds real-time multiplayer abilities to Sporcle.com",
-	"version"			:	"0.0.1",
+	"version"			:	"0.0.2",
 	"manifest_version"	:	2,
 
 	"icons"				: 	{
@@ -32,7 +32,7 @@
 	"content_scripts"	:	[
 		{
 			"matches"	:	["https://www.sporcle.com/*"],
-			"js"		: 	["script.js"]
+			"js"		: 	["xporcle.js"]
 		}
 	],
 
@@ -42,4 +42,12 @@
 		"page"			:	"options.html",
 		"open_in_tab"	:	false
 	}
+	,
+	"browser_specific_settings":
+	{
+		"gecko":
+		{
+			"id": "[email protected]"
+		}
+	}
 }

options.html

@@ -5,7 +5,7 @@
 	<title>Xporcle Options</title>
 </head>
 <body>
-	<h1>Xporcle <span id="version">v0.0.1</span></h1>
+	<h1>Xporcle <span id="version">v0.0.2</span></h1>
 	<h2>Enable or Disable Features Here</h2>
 </body>
 </html>

script.js → xporcle.js

@@ -117,9 +117,10 @@ function addInterfaceBox()
 	const gameHeader = document.querySelector(`.game-header`);
 	const staffPicks = document.querySelector(`#staff-picks-wrapper`);
 
-	if (document.querySelector(`#interfaceContainer`) === null)
+	let interfaceContainer = document.querySelector(`#interfaceContainer`);
+	if (interfaceContainer === null)
 	{
-		const interfaceContainer = document.createElement("div");
+		interfaceContainer = document.createElement("div");
 		interfaceContainer.id = "interfaceContainer";
 		interfaceContainer.style =
 		`
@@ -152,7 +153,7 @@ function addInterfaceBox()
 		interfaceBox.id = "interfaceBox";
 		interfaceBox.style =
 		`
-			width: calc(((100vw - 960px) / 2 - 4px));
+			width: calc(((100vw - 960px) / 2 - 10px));
 			padding: 0.5em;
 			box-sizing: border-box;
 			max-width: 400px;
@@ -193,8 +194,6 @@ function resetInterface()
 
 function processMessage(message)
 {
-	console.log(message);
-
 	messageType = message["type"];
 
 	switch (messageType)
@@ -203,18 +202,16 @@ function processMessage(message)
 			updateLeaderboard(message["scores"]);
 			break;
 		case "room_closed":
-			console.log("room closed");
 			resetInterface();
 			break;
-		case "rooms_list":
-			console.log(message["rooms"]);
+		case "connection_closed":
+			resetInterface();
 			break;
 		case "error":
 			console.error(message["error"]);
 			break;
 		case "removed_from_room":
 			const removedUser = message["username"];
-			console.log(`${removedUser} removed from room`);
 			if (removedUser === username)
 			{
 				resetInterface();
@@ -227,9 +224,12 @@ function processMessage(message)
 		case "start_quiz":
 			// Start the quiz!
 
-			// First remove the quiz start provention
-			toggleQuizStartProvention(false);
-			document.querySelector(`#button-play`).click();
+			if (!quizRunning)
+			{
+				// First remove the quiz start provention
+				toggleQuizStartProvention(false);
+				document.querySelector(`#button-play`).click();
+			}
 			break;
 		case "live_scores_update":
 			updateLiveScores(message["live_scores"]);
@@ -293,8 +293,16 @@ async function createRoom(event, form)
 		return;
 	}
 
-	console.log("connection established.");
+	try
+	{
+		await navigator.clipboard.writeText(roomCode);
+	}
+	catch (error)
+	{
+		console.error("Clipboard write failure: ", error);
+	}
 
+	/* clipboard-write permissions query is only available in chrome
 	await navigator.permissions.query({name: "clipboard-write"}).then(
 		(result) =>
 		{
@@ -305,6 +313,7 @@ async function createRoom(event, form)
 			}
 		}
 	);
+	*/
 
 	interfaceBox.querySelectorAll(`form`).forEach(
 		(form) => form.remove()
@@ -326,8 +335,6 @@ async function joinRoom(event, form)
 	button.disabled = true;
 	button.value = "...";
 
-	console.log(`Trying to join room ${roomCode}`);
-
 	const message = {
 		type: "join_room",
 		username: username,
@@ -372,7 +379,6 @@ async function joinRoom(event, form)
 		return;
 	}
 
-	console.log("connection established");
 	onRoomConnect();
 }
 
@@ -547,9 +553,6 @@ function updateLeaderboardUrls()
 
 	if (onQuizPage)
 	{
-		const playButton = document.querySelector("#button-play");
-		const playButtonContainer = playButton.parentNode.parentNode;
-
 		const allPlayersOnSamePage = ! Object.entries(urls).some(entry => entry[1] !== window.location.href);
 
 		toggleQuizStartProvention(allPlayersOnSamePage === false)
@@ -559,6 +562,12 @@ function updateLeaderboardUrls()
 function toggleQuizStartProvention(prevent)
 {
 	const playPadding = document.querySelector(`#playPadding`);
+	if (document.querySelector(`#button-play`) === null)
+	{
+		// No play button so no need to stop it being clicked, we have probably finished a quiz now.
+		return false;
+	}
+
 	if (prevent)
 	{
 		playPadding.addEventListener("click", stopQuizStart, true);
@@ -798,7 +807,6 @@ function quizStarted(mutationList)
 			{
 				// Quiz started
 				quizStartObserver.disconnect();
-				console.log("Quiz started");
 
 				quizRunning = true;
 				quizStartTime = new Date();
@@ -830,7 +838,6 @@ function quizFinished(mutationList)
 			if (mutation.target.getAttribute("style") !== null)
 			{
 				// Quiz finished
-				console.log("Quiz finished");
 
 				quizFinishObserver.disconnect();
 				scoreObserver.disconnect();