From 119c70db8483b289f3072718f42b6c2f7f91002c Mon Sep 17 00:00:00 2001 From: Toran Sharma Date: Mon, 22 Mar 2021 13:49:34 +0000 Subject: [PATCH 1/4] Update server interaction to handle new Quart-WebSocketRooms API --- background.js | 24 ++++++++++++++---- xporcle.js | 69 ++++++++++++++++++++++++++++++++++++--------------- 2 files changed, 68 insertions(+), 25 deletions(-) diff --git a/background.js b/background.js index 6d6cdb6..4bc33d9 100644 --- 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/xporcle.js b/xporcle.js index e5cb836..79ebc8c 100644 --- 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[0].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,13 @@ 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; + port.postMessage({type: "url_update", url: window.location.pathname}); + // Set up message handing + port.onMessage.addListener(processMessage); + resolve(); } else @@ -587,7 +597,6 @@ async function joinRoom(event) type: "join_room", username: username, code: roomCode, - url: window.location.pathname }; try @@ -605,6 +614,10 @@ 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 +680,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 +695,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 +735,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 +746,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 +768,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 +793,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 +1024,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( @@ -1352,7 +1377,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 = ` From 1e1aaca3182ed51212a1417f73cd28bc33f6d139 Mon Sep 17 00:00:00 2001 From: Toran Sharma Date: Mon, 22 Mar 2021 18:17:08 +0000 Subject: [PATCH 2/4] Fix hosts update, context menu updatem. Add remove player context menu item --- xporcle.js | 34 +++++++++++++++++++++++++++------- 1 file changed, 27 insertions(+), 7 deletions(-) diff --git a/xporcle.js b/xporcle.js index 79ebc8c..0de0f33 100644 --- a/xporcle.js +++ b/xporcle.js @@ -373,7 +373,7 @@ function processMessage(message) switch (messageType) { case "users_update": - hosts = Object.entries(message["users"]).filter(entry => entry[0].host === true).map(entry => entry[0]); + hosts = Object.entries(message["users"]).filter(entry => entry[1].host === true).map(entry => entry[0]); case "scores_update": updateLeaderboard(message["scores"]); break; @@ -528,8 +528,12 @@ async function createRoom(event) port.onMessage.removeListener(connectListener); 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); @@ -575,9 +579,6 @@ async function createRoom(event) (form) => form.remove() ); - host = true; - hosts = [username]; - onRoomConnect(); } @@ -615,6 +616,7 @@ async function joinRoom(event) { hosts = message["hosts"]; port.postMessage({type: "url_update", url: window.location.pathname}) + // Set up message handing port.onMessage.addListener(processMessage); @@ -1059,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 @@ -1113,6 +1114,8 @@ function updateLeaderboard(scores) leaderboard.appendChild(row); } ); + + updateContextMenuHandling(); } function updateContextMenuHandling() @@ -1123,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"; } } ); @@ -1415,6 +1420,7 @@ function addLeaderboard(scores) ` display: grid; grid-template-columns: fit-content(calc(60% - 3em)) 1fr 20% 20%; + cusor: default; `; // Username @@ -1454,7 +1460,6 @@ function addLeaderboard(scores) leaderboard.appendChild(row); } - updateContextMenuHandling(); const leaderboardHeader = document.createElement("h2"); leaderboardHeader.id = "leaderboardHeader"; @@ -1463,6 +1468,8 @@ function addLeaderboard(scores) interfaceBox.appendChild(leaderboardHeader); interfaceBox.appendChild(leaderboard); + updateContextMenuHandling(); + return leaderboard; } @@ -1678,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)) From 042ce50eb19499aa153c938bf5b00c241ac14f19 Mon Sep 17 00:00:00 2001 From: Toran Sharma Date: Mon, 22 Mar 2021 18:20:07 +0000 Subject: [PATCH 3/4] Update Changelog with changes --- CHANGELOG.md | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9265966..89ded0b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,7 +3,12 @@ Changelog [Unreleased] ------------ -- +### 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 --------------------- @@ -27,7 +32,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 +66,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. From e86314ef4b0f4da4715f769b5cb86443d68841c0 Mon Sep 17 00:00:00 2001 From: Toran Sharma Date: Mon, 22 Mar 2021 18:23:05 +0000 Subject: [PATCH 4/4] Increment version number to 2.0.0 --- CHANGELOG.md | 7 ++++++- manifest.json | 2 +- options.html | 2 +- 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 89ded0b..e72169f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,13 +3,17 @@ Changelog [Unreleased] ------------ +- + +[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) @@ -122,6 +126,7 @@ Changelog - 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/manifest.json b/manifest.json index 66c6c3b..00018bf 100644 --- 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 index e519a87..6a95f14 100644 --- a/options.html +++ b/options.html @@ -6,7 +6,7 @@ -

Xporcle v1.2.1

+

Xporcle v2.0.0

Enable or Disable Features Here