web: add (incomplete) support for 3+ player matches

4 files changed, 57 insertions, 0 deletions

diff --git a/web/static/dartboat.js b/web/static/dartboat.js
index 54cb29b..5c7f011 100644
--- a/web/static/dartboat.js
+++ b/web/static/dartboat.js
@@ -185,6 +185,11 @@ document.addEventListener('DOMContentLoaded', () => {
 			e.currentTarget.style.display = 'none';
 	};
 	$$('.modal').forEach(x => x.addEventListener('click', f));
+
+	$('#info-slot-prev').addEventListener('click', () =>
+		_scoreboard_prev_slot());
+	$('#info-slot-next').addEventListener('click', () =>
+		_scoreboard_next_slot());
 });
 
 document.addEventListener('keydown', e => {
diff --git a/web/static/fonts/bootstrap-icons-sub.woff2 b/web/static/fonts/bootstrap-icons-sub.woff2
index 391919f..116a249 100644
--- a/web/static/fonts/bootstrap-icons-sub.woff2
+++ b/web/static/fonts/bootstrap-icons-sub.woff2
diff --git a/web/static/index.html b/web/static/index.html
index 8da5baa..196db91 100644
--- a/web/static/index.html
+++ b/web/static/index.html
@@ -24,6 +24,8 @@
 			</div>
 			<div id="info">
 				<div id="oi">oi!</div>
+				<div id="info-slot-prev" class="icon">&#xf27f;</div>
+				<div id="info-slot-next" class="icon">&#xf280;</div>
 				<div id="p1-info">
 					<div id="p1-info-inner">
 						<div id="p1-name"></div>
diff --git a/web/static/style.css b/web/static/style.css
index 5131eab..f8b6ea0 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -473,6 +473,56 @@ body {
 	visibility: visible;
 }
 
+#info #info-slot-prev, #info #info-slot-next {
+	visibility: hidden;
+
+	color: #eee;
+	background-color: #583a90;
+	font-size: 2em;
+	height: 1.6em;
+	width: 1em;
+
+	outline: #111 solid 2px;
+
+	position: absolute;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+#info #info-slot-prev {
+	left: 0%;
+	right: 100%;
+	top: 50%;
+	bottom: 50%;
+	transform: translate(0%, -50%);
+}
+
+#info #info-slot-next {
+	left: 100%;
+	right: 0%;
+	top: 50%;
+	bottom: 50%;
+	transform: translate(-100%, -50%);
+}
+
+#info #info-slot-prev.visible, #info #info-slot-next.visible {
+	visibility: visible;
+}
+
+@media (hover: hover) and (pointer: fine) {
+	#info #info-slot-prev:hover, #info #info-slot-next:hover {
+		color: #fff;
+		background-color: #6e49b4;
+	}
+}
+
+#info #info-slot-prev:active, #info #info-slot-next:active {
+	color: #fff;
+	background-color: #7b51ca;
+}
+
 #info #p1-info, #info #p2-info {
 	background-color: #222;
 	font-size: 1.5em;