Merge branch 'release-2.0.0'

ToranSharma · Mar 22, 2021 · c064c27 · c064c27
2 parents 3dd302c + e86314e
commit c064c27
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 35 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,15 @@ Changelog
 ------------
 -
 
+[v2.0.0] - 2021-03-22
+---------------------
+[GitHub Release Page](https://github.com/ToranSharma/Xporcle-Extension/releases/tag/v2.0.0)
+### Added
+- Remove player option in leaderboard right click menu.
+
+### Changed
+- Updated server communications to work with new Quart-WebSocketRooms based API.
+
 [v1.2.1] - 2020-12-24
 ---------------------
 [GitHub Release Page](https://github.com/ToranSharma/Xporcle-Extension/releases/tag/v1.2.1)
@@ -27,7 +36,7 @@ Changelog
 
 ### Changed
 - Link with room code in hash is put in clipboard rather than just the room
-code on creating a room.
+  code on creating a room.
 
 [v1.1.1] - 2020-05-29
 ---------------------
@@ -61,7 +70,7 @@ code on creating a room.
 ### Added
 - Options to the options page and page action popout window.
   - Option to auto fill a custom default username in the create and join room
-  forms.
+    forms.
   - Option to blur out the room code, maybe useful if streaming a private room.
   - Options script to handle the changing and saving of the options.
   - Options page stylesheet.
@@ -117,6 +126,7 @@ code on creating a room.
 - Options page popup placeholder.
 
 [Unreleased]: https://github.com/ToranSharma/Xporcle-Extension/compare/master...develop
+[v2.0.0]: https://github.com/ToranSharma/Xporcle-Extension/compare/v1.2.1...v2.0.0
 [v1.2.1]: https://github.com/ToranSharma/Xporcle-Extension/compare/v1.2.0...v1.2.1
 [v1.2.0]: https://github.com/ToranSharma/Xporcle-Extension/compare/v1.1.1...v1.2.0
 [v1.1.1]: https://github.com/ToranSharma/Xporcle-Extension/compare/v1.1.0...v1.1.1

diff --git a/background.js b/background.js
@@ -138,11 +138,11 @@ function startConnection(initialMessage)
 		roomCode = initialMessage["code"];
 	}
 
-	if (initialMessage["saveName"] !== undefined)
+	if (initialMessage["type"] == "load_room")
 	{
 		// We are loading from a save.
 		saveName = initialMessage["saveName"];
-		delete initialMessage["saveName"]; // This doesn't need to be send to the sever.
+		delete initialMessage["saveName"]; // This doesn't need to be sent to the sever.
 		scores = initialMessage["scores"];
 	}
 
@@ -172,7 +172,10 @@ function forwardMessage(event)
 
 	messageType = message["type"];
 
-	if (messageType === "new_room_code")
+	if (
+		messageType === "create_room"
+		|| messageType == "load_room"
+	)
 	{
 		host = true;
 		hosts = [username];
@@ -192,7 +195,14 @@ function forwardMessage(event)
 	}
 	else if (messageType === "hosts_update")
 	{
-		hosts = message["hosts"];
+		if (message["added"] !== undefined)
+		{
+			hosts.push(message["added"]);
+		}
+		else
+		{
+			hosts = hosts.filter(username => username !== message["removed"]);
+		}
 		if (!hosts.includes(username))
 		{
 			host = false;
@@ -203,8 +213,12 @@ function forwardMessage(event)
 	else if (messageType === "host_promotion")
 	{
 		host = true;
+		urls = message["urls"];
 	}
-	else if (messageType === "scores_update")
+	else if (
+		messageType === "users_update"
+		|| messageType === "scores_update"
+	)
 	{
 		scores = message["scores"];
 	}

diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
 	"name"				:	"Xporcle",
 	"description"		:	"Adds real-time multiplayer abilities to Sporcle.com",
-	"version"			:	"1.2.1",
+	"version"			:	"2.0.0",
 	"manifest_version"	:	2,
 
 	"icons"				: 	{

diff --git a/options.html b/options.html
@@ -6,7 +6,7 @@
 	<link href="stylesheets/options.css" rel="stylesheet" />
 </head>
 <body>
-	<h1>Xporcle <span id="version">v1.2.1</span></h1>
+	<h1>Xporcle <span id="version">v2.0.0</span></h1>
 	<h2>Enable or Disable Features Here</h2>
 	<ul id="optionTree">
 		<li>

diff --git a/xporcle.js b/xporcle.js
@@ -72,7 +72,7 @@ function run()
 							{
 								storedSaveNames = Object.keys(data.saves);
 							}
-							
+
 							loadRoomForm.remove();
 							addLoadRoomForm(storedSaveNames);
 						}
@@ -134,6 +134,7 @@ async function init()
 		suggestions = statusResponse["suggestions"];
 		saveName = statusResponse["saveName"];
 
+
 		onRoomConnect(statusResponse["scores"]);
 	}
 	else
@@ -371,6 +372,8 @@ function processMessage(message)
 
 	switch (messageType)
 	{
+		case "users_update":
+			hosts = Object.entries(message["users"]).filter(entry => entry[1].host === true).map(entry => entry[0]);
 		case "scores_update":
 			updateLeaderboard(message["scores"]);
 			break;
@@ -395,19 +398,23 @@ function processMessage(message)
 				delete hosts[removedUser];
 			}
 			break;
-		case "save_data":
+		case "save_room":
 			if (confirmSaveDataRecieved !== null)
 			{
-				saveData =
-				{
-					scores: message["data"],
-					me: username
-				}
+				saveData = message["save_data"];
+				saveData["me"] = username;
 				confirmSaveDataRecieved();
 			}
 			break;
 		case "hosts_update":
-			hosts = message["hosts"];
+			if (message["added"] !== undefined)
+			{
+				hosts.push(message["added"]);
+			}
+			else
+			{
+				hosts = hosts.filter(username => username !== message["removed"]);
+			}
 			if (host && !hosts.includes(username))
 			{
 				// Not a host anymore
@@ -508,7 +515,6 @@ async function createRoom(event)
 	const message = {
 		type: "create_room",
 		username: username,
-		url: window.location.pathname
 	}
 	try
 	{
@@ -520,9 +526,17 @@ async function createRoom(event)
 				connectListener = (message) =>
 				{
 					port.onMessage.removeListener(connectListener);
-					if (message.type === "new_room_code")
+					if (message.type === "create_room")
 					{
-						roomCode = message.room_code;
+						host = true;
+						hosts = [username];
+						roomCode = message["room_code"];
+
+						port.postMessage({type: "url_update", url: window.location.pathname});
+
+						// Set up message handing
+						port.onMessage.addListener(processMessage);
+
 						resolve();
 					}
 					else
@@ -565,9 +579,6 @@ async function createRoom(event)
 		(form) => form.remove()
 	);
 
-	host = true;
-	hosts = [username];
-
 	onRoomConnect();
 }
 
@@ -587,7 +598,6 @@ async function joinRoom(event)
 		type: "join_room",
 		username: username,
 		code: roomCode,
-		url: window.location.pathname
 	};
 
 	try
@@ -605,6 +615,11 @@ async function joinRoom(event)
 						if (message.success)
 						{
 							hosts = message["hosts"];
+							port.postMessage({type: "url_update", url: window.location.pathname})
+
+							// Set up message handing
+							port.onMessage.addListener(processMessage);
+
 							resolve();
 						}
 						else
@@ -667,7 +682,9 @@ async function loadRoom(event, form)
 		username: username,
 		url: window.location.pathname,
 		saveName: saveName,
-		scores: saveData.scores
+		save_data: {
+			scores: saveData.scores
+		}
 	};
 
 	try
@@ -680,11 +697,15 @@ async function loadRoom(event, form)
 				connectListener = (message) =>
 				{
 					port.onMessage.removeListener(connectListener);
-					if (message.type === "new_room_code")
+					if (message.type === "load_room")
 					{
 						host = true;
 						hosts = [username];
 						roomCode = message["room_code"];
+
+						// Set up message handing
+						port.onMessage.addListener(processMessage);
+
 						resolve();
 					}
 					else
@@ -716,7 +737,7 @@ async function loadRoom(event, form)
 
 	try
 	{
-		await navigator.clipboard.writeText(roomCode);
+		await navigator.clipboard.writeText(`https://sporcle.com/#xporcle:${roomCode}`);
 	}
 	catch (error)
 	{
@@ -727,8 +748,11 @@ async function loadRoom(event, form)
 }
 function onRoomConnect(existingScores)
 {
-	// Set up message handing
-	port.onMessage.addListener(processMessage);
+	// Set up message handing if not done already.
+	if (!port.onMessage.hasListener(processMessage))
+	{
+		port.onMessage.addListener(processMessage);
+	}
 
 	// Clear the interface box of the forms
 	interfaceBox.querySelectorAll(`form`).forEach(
@@ -746,7 +770,7 @@ function onRoomConnect(existingScores)
 	{
 		roomCodeHeader.lastChild.style.filter = "blur(0.4em)";
 	}
-	interfaceBox.appendChild(roomCodeHeader);
+	interfaceBox.insertBefore(roomCodeHeader, interfaceBox.firstElementChild);
 
 	// If the user is a host and is on a quiz,
 	// add a button to send the quiz to the rest of the room
@@ -771,7 +795,7 @@ function onRoomConnect(existingScores)
 		scores[username] = {score: 0, wins: 0};
 	}
 
-	updateLeaderboard(scores);
+	addLeaderboard(scores);
 
 	// Add a button to leave the room
 	interfaceBox.appendChild(document.createElement("button"));
@@ -1002,7 +1026,10 @@ function updateLeaderboard(scores)
 	const scoresCopy = JSON.parse(JSON.stringify(scores));
 	let leaderboard = interfaceBox.querySelector(`#leaderboard`);
 	if (leaderboard === null)
-		leaderboard = addLeaderboard(scores);
+	{
+		addLeaderboard(scores);
+		return null;
+	}
 
 	const rows = leaderboard.querySelectorAll(`li`);
 	rows.forEach(
@@ -1034,7 +1061,6 @@ function updateLeaderboard(scores)
 		leaderboard.appendChild(row);
 	}
 
-	updateContextMenuHandling();
 
 	// Now sort the by score, falling back to alphabetically
 	// First restart scores back to it's unmodified state
@@ -1088,6 +1114,8 @@ function updateLeaderboard(scores)
 			leaderboard.appendChild(row);
 		}
 	);
+
+	updateContextMenuHandling();
 }
 
 function updateContextMenuHandling()
@@ -1098,10 +1126,12 @@ function updateContextMenuHandling()
 			if (host && !hosts.includes(row.firstChild.textContent))
 			{
 				row.addEventListener("contextmenu", cmEventHandle);
+				row.style.cursor = "context-menu";
 			}
 			else
 			{
 				row.removeEventListener("contextmenu", cmEventHandle);
+				row.style.cursor = "default";
 			}
 		}
 	);
@@ -1352,7 +1382,11 @@ function updateLiveScores(scores)
 
 function addLeaderboard(scores)
 {
-	const leaderboard = document.createElement("ol");
+	let leaderboard = interfaceBox.querySelector(`#leaderboard`);
+	if (leaderboard !== null)
+		return false;
+
+	leaderboard = document.createElement("ol");
 	leaderboard.id = "leaderboard";
 	leaderboard.style =
 	`
@@ -1386,6 +1420,7 @@ function addLeaderboard(scores)
 		`
 			display: grid;
 			grid-template-columns: fit-content(calc(60% - 3em)) 1fr 20% 20%;
+			cusor: default;
 		`;
 
 		// Username
@@ -1425,7 +1460,6 @@ function addLeaderboard(scores)
 		leaderboard.appendChild(row);
 	}
 
-	updateContextMenuHandling();
 
 	const leaderboardHeader = document.createElement("h2");
 	leaderboardHeader.id = "leaderboardHeader";
@@ -1434,6 +1468,8 @@ function addLeaderboard(scores)
 	interfaceBox.appendChild(leaderboardHeader);
 
 	interfaceBox.appendChild(leaderboard);
+	updateContextMenuHandling();
+
 	return leaderboard;
 }
 
@@ -1649,6 +1685,19 @@ function displayContextMenu(event)
 	);
 	menu.appendChild(menuItem);
 
+	menuItem = menuItem.cloneNode(true);
+	menuItem.textContent = `Remove ${targetUsername} from room`;
+	menuItem.addEventListener("mouseover", mOver);
+	menuItem.addEventListener("mouseout", mOut);
+	menuItem.addEventListener("click",
+		(event) =>
+		{
+			port.postMessage({type: "remove_from_room", username: targetUsername});
+			removeContextMenu();
+		}
+	);
+	menu.appendChild(menuItem);
+
 
 	target.appendChild(menu);
 	if (menu.getBoundingClientRect().right > (window.innerWidth - 10))