Merge branch 'release-2.3.0'

ToranSharma · Aug 19, 2021 · afd78a8 · afd78a8
2 parents 64f83ef + 95c6f20
commit afd78a8
Show file tree

Hide file tree

Showing 8 changed files with 507 additions and 57 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,23 @@ Changelog
 ------------
 -
 
+[v2.3.0] - 2021-08-16
+---------------------
+[GitHub Release Page](https://github.com/ToranSharma/Xporcle-Extension/releases/tag/v2.3.0)
+### Added
+- Quiz Queue
+  - Button for hosts to add the quiz they are on to the queue.
+  - Draggable (for hosts) list of quizzes in the queue.
+  - Remove button for hosts to remove quizzes from the queue.
+  - Go to quiz button for hosts to visit the page of quizzes in the queue.
+  - Controls for hosts to toggle and customise interval for auto changing to
+    next quiz.
+	- Option to set default interval for auto chaning.
+    - Countdown under leaderboard displaying time left until change to next
+    quiz.
+    - Button to cancel the countdown for hosts.
+- Option to set default duration for next quiz polls.
+
 [v2.2.0] - 2021-08-16
 ---------------------
 [GitHub Release Page](https://github.com/ToranSharma/Xporcle-Extension/releases/tag/v2.2.0)
@@ -15,7 +32,6 @@ Changelog
 ### Changed
 - Xporcle interface now scrollable if longer than available space.
 
-
 [v2.1.0] - 2021-08-14
 ---------------------
 [GitHub Release Page](https://github.com/ToranSharma/Xporcle-Extension/releases/tag/v2.1.0)
@@ -149,6 +165,7 @@ Changelog
 - Options page popup placeholder.
 
 [Unreleased]: https://github.com/ToranSharma/Xporcle-Extension/compare/master...develop
+[v2.3.0]: https://github.com/ToranSharma/Xporcle-Extension/compare/v2.2.0...v2.3.0
 [v2.2.0]: https://github.com/ToranSharma/Xporcle-Extension/compare/v2.1.0...v2.2.0
 [v2.1.0]: https://github.com/ToranSharma/Xporcle-Extension/compare/v2.0.0...v2.1.0
 [v2.0.0]: https://github.com/ToranSharma/Xporcle-Extension/compare/v1.2.1...v2.0.0

diff --git a/background.js b/background.js
@@ -41,6 +41,8 @@ let pollData = {};
 let voteData = {};
 let voted = false;
 let saveName = null;
+let queue = [];
+let queueInterval;
 
 chrome.runtime.onConnect.addListener(
 	(port) =>
@@ -70,7 +72,9 @@ chrome.runtime.onConnect.addListener(
 									poll_data: pollData,
 									vote_data: voteData,
 									saveName: saveName,
-									voted: voted
+									voted: voted,
+									queue: queue,
+									queue_interval: queueInterval
 								}
 							);
 							ws.send(JSON.stringify({type: "url_update", url: message["url"]}))
@@ -212,6 +216,8 @@ function forwardMessage(event)
 		if (message["success"])
 		{
 			hosts = message["hosts"];
+			queue = message["queue"];
+			queueInterval = message["queue_interval"];
 		}
 		else
 		{
@@ -241,7 +247,9 @@ function forwardMessage(event)
 	{
 		host = true;
 		urls = message["urls"];
-		poll_data = message["poll_data"] ?? {}
+		poll_data = message["poll_data"] ?? {};
+		queue = message["queue"];
+		queueInterval = message["queue_interval"];
 	}
 	else if (
 		messageType === "users_update"
@@ -319,6 +327,11 @@ function forwardMessage(event)
 	{
 		voteData = message["vote_data"];
 	}
+	else if (messageType === "queue_update")
+	{
+		queue = message["queue"];
+		queueInterval = message["queue_interval"];
+	}
 
 	if (messagePort !== null)
 	{
@@ -340,4 +353,6 @@ function reset()
 	voteData = {};
 	saveName = null;
 	voted = false;
+	queue = [];
+	queueInterval = null;
 }
diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
 	"name"				:	"Xporcle",
 	"description"		:	"Adds real-time multiplayer abilities to Sporcle.com",
-	"version"			:	"2.2.0",
+	"version"			:	"2.3.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">v2.2.0</span></h1>
+	<h1>Xporcle <span id="version">v2.3.0</span></h1>
 	<h2>Enable or Disable Features Here</h2>
 	<ul id="optionTree">
 		<li>
@@ -24,6 +24,14 @@ <h2>Enable or Disable Features Here</h2>
 			<input class="option" id="blurRoomCode" type="checkbox" />
 			<label for="blurRoomCode">Blur Room Code</label>
 		</li>
+		<li class="labelFirst containsTime">
+			<label for="defaultPollDuration containsTime">Default Poll Duration</label>
+			<input class="option" id="defaultPollDuration" type="number" value="30" min="10" max="60" />
+		</li>
+		<li class="labelFirst containsTime">
+			<label for="defaultQuizQueueInterval">Default Quiz Queue Interval</label>
+			<input class="option" id="defaultQuizQueueInterval" type="number" value="60" min="10" max="300" />
+		</li>
 	</ul>
 	<button id="enableAll">Enable all</button>
 	<button id="disableAll">Disable all</button>

diff --git a/options.js b/options.js
@@ -101,6 +101,7 @@ function getOptions(firstLoad=false)
 					document.getElementById(option).checked = options[option];
 					break;
 				case "string":
+				case "number":
 					document.getElementById(option).value = options[option];
 					break;
 			}
@@ -120,6 +121,10 @@ function saveOptions()
 		{
 			options[element.id] = element.checked;
 		}
+		else if (element.type === "number")
+		{
+			options[element.id] = Number(element.value);
+		}
 		else
 		{
 			options[element.id] = element.value;

diff --git a/stylesheets/interface.css b/stylesheets/interface.css
@@ -15,20 +15,6 @@
 		max-width: 400px;
 		overflow: auto;
 	}
-	#interfaceContainer form
-	{
-		display: flex;
-		flex-direction: column;
-	}
-		#interfaceContainer form input,
-		#interfaceContainer form button,
-		#interfaceContainer form select
-		{
-			width: min(100%, 10em);
-			box-sizing: border-box;
-			margin: 0 auto;
-
-		}
 
 .interfaceSection
 {
@@ -52,6 +38,31 @@
 		margin: 0;
 	}
 
+#interfaceBox .toggle
+{
+	top: 0.5rem;
+}
+#interfaceBox form
+{
+	display: flex;
+	flex-direction: column;
+}
+	#interfaceBox form input,
+	#interfaceBox form button,
+	#interfaceBox form select
+	{
+		width: min(100%, 10em);
+		box-sizing: border-box;
+		margin: 0 auto;
+
+	}
+#interfaceBox #changeQuizCountdown
+{
+	display: flex;
+	flex-direction: row;
+	justify-content: space-evenly;
+	flex-wrap: wrap;
+}
 
 #leaderboard,
 #liveScores
@@ -328,7 +339,7 @@
 	margin: 0;
 	border: 0;
 	position: absolute;
-	right: 2rem;
+	right: 1rem;
 	top: 1rem;
 	color: grey;
 	cursor: pointer;
@@ -338,6 +349,10 @@
 	transform: rotate(0deg);
 	transition: transform 0.5s;
 }
+.closeButton ~ .toggle
+{
+	right: 2rem;
+}
 .toggle::after
 {
 	content: "\02228";
@@ -349,8 +364,8 @@
 }
 .toggle:checked ~ *
 {
-	display: none;
-	visibility: hidden;
+	display: none !important;
+	visibility: hidden !important;
 }
 
 .closeButton::after,
@@ -366,3 +381,82 @@
 	text-align: center;
 }
 
+.goTo
+{		
+	appearance: none;
+	border: none;
+	padding: 0;
+	position: absolute;
+	top: 0;
+	right: 2rem;
+	width: 1rem;
+	height: 1rem;
+	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48cGF0aCBkPSJNOSAyTDkgMyAxMi4zIDMgNiA5LjMgNi43IDEwIDEzIDMuNyAxMyA3IDE0IDcgMTQgMlpNNCA0QzIuOSA0IDIgNC45IDIgNkwyIDEyQzIgMTMuMSAyLjkgMTQgNCAxNEwxMCAxNEMxMS4xIDE0IDEyIDEzLjEgMTIgMTJMMTIgNyAxMSA4IDExIDEyQzExIDEyLjYgMTAuNiAxMyAxMCAxM0w0IDEzQzMuNCAxMyAzIDEyLjYgMyAxMkwzIDZDMyA1LjQgMy40IDUgNCA1TDggNSA5IDRaIi8+PC9zdmc+) no-repeat;
+	background-size: contain;
+	cursor: pointer;
+}
+
+#quizQueueBox ol
+{
+	display: grid;
+	grid-auto-rows: 1fr;
+	margin: 0;
+}
+	#quizQueueBox li[draggable="true"]
+	{
+		cursor: move;
+		position: relative;
+		padding-right: 3rem;
+	}
+	#quizQueueBox li.moving
+	{
+		color: transparent;
+	}
+	#quizQueueBox li.moving::marker
+	{
+		color: black;
+	}
+		#quizQueueBox li .closeButton,
+		#quizQueueBox li .goTo
+		{
+			display: none;
+			visibility: hidden;
+			top: 0;
+		}
+		#quizQueueBox li:hover .closeButton,
+		#quizQueueBox li:hover .goTo
+		{
+			display: unset;
+			visibility: visible;
+		}
+		#quizQueueBox li:active .closeButton,
+		#quizQueueBox li.moving .closeButton,
+		#quizQueueBox li.moving:hover .closeButton,
+		#quizQueueBox li.moving ~ li .closeButton,
+		#quizQueueBox li:active .goTo,
+		#quizQueueBox li.moving .goTo,
+		#quizQueueBox li.moving:hover .goTo,
+		#quizQueueBox li.moving ~ li .goTo
+		{
+			display: none;
+			visibility: hidden;
+		}
+		#quizQueueBox li .closeButton:hover,
+		#quizQueueBox li .goTo:hover
+		{
+			display: unset;
+			visibility: visible;
+		}
+#quizQueueBox form
+{
+	display: block;
+}
+	#quizQueueBox form input
+	{
+		display: inline;
+		vertical-align: baseline;
+	}
+	#quizQueueBox form input[type="number"]
+	{
+		width: 3.5em;
+	}
diff --git a/stylesheets/options.css b/stylesheets/options.css
@@ -78,17 +78,21 @@ ul
 {
 	color: grey;
 }
-#optionTree .labelFirst
+#optionTree li.labelFirst
+{
+	grid-template-columns: max-content 4em;
+}
+#optionTree ul li.labelFirst
 {
 	grid-template-columns: 3em max-content 3em;
 }
-	#optionTree .labelFirst > label
-	{
-		padding-left: 0;
-		padding-right: 0.5em;
-		z-index: 3;
-		background-color: white;
-	}
+#optionTree .labelFirst > label
+{
+	padding-left: 0;
+	padding-right: 0.5em;
+	z-index: 3;
+	background-color: white;
+}
 
 #optionTree .labelFirst.containsTextInput
 {
@@ -119,6 +123,17 @@ ul
 	line-height: 1.5em;
 }
 
+#optionTree .containsTime::after
+{
+	content:"s";
+	height: 1.5em;
+	line-height: 1.5em;
+}
+#optionTree > li.labelFirst.containsTime
+{
+	grid-template-columns: max-content 4em auto;
+}
+
 button
 {
 	width: 6em;