web: support ending ongoing match; ui/colour tweaks

Ending a match while the computer is throwing currently results in data being written to the prompt because any scheduled C calls are not being cleared yet.
author: David Vazgenovich Shakaryan <dvshakaryan@gmail.com> 2022-05-16 01:34:54 -0700
committer: David Vazgenovich Shakaryan <dvshakaryan@gmail.com> 2022-05-16 01:36:56 -0700
commit: 6a5cc149d373354941d046d3b3d851901fb4caf3 (patch)
tree: 773e7fd7135c50cd126eef34d720dcfe64f3a4e7
parent: 72fa8e2849ab618fa66b776fd4af6d18d025fd51 (diff)
download: dartboat-6a5cc149d373354941d046d3b3d851901fb4caf3.tar.gz
dartboat-6a5cc149d373354941d046d3b3d851901fb4caf3.tar.xz
10 files changed, 127 insertions, 65 deletions
diff --git a/web/static/dartboat.js b/web/static/dartboat.js
index 6051b7e..9e97dfc 100644
--- a/web/static/dartboat.js
+++ b/web/static/dartboat.js
@@ -158,6 +158,7 @@ document.addEventListener('DOMContentLoaded', () => {
 		command.split(';').forEach(x =>
 			promptHandle(...x.split(':', 2)));
 	});
+	$('#key-exit').addEventListener('click', () => promptHandle('exit'));
 
 	f = e => _set_opt(toCString(e.target.dataset.opt),
 		toCString(e.target.value));
diff --git a/web/static/dartboat.webmanifest b/web/static/dartboat.webmanifest
index f6023bd..7c7ff6d 100644
--- a/web/static/dartboat.webmanifest
+++ b/web/static/dartboat.webmanifest
@@ -5,7 +5,7 @@
 
 	"display": "standalone",
 	"background_color": "#1a1a1a",
-	"theme_color": "#311d52",
+	"theme_color": "#583a90",
 
 	"icons": [
 		{ "src": "icons/dartboat_16.png", "sizes": "16x16", "type": "image/png" },
diff --git a/web/static/fonts/bootstrap-icons-sub.woff2 b/web/static/fonts/bootstrap-icons-sub.woff2
index 0d765be..391919f 100644
--- a/web/static/fonts/bootstrap-icons-sub.woff2
+++ b/web/static/fonts/bootstrap-icons-sub.woff2
diff --git a/web/static/icons/dartboat_192_mask.png b/web/static/icons/dartboat_192_mask.png
index c1bc8cd..b84efec 100644
--- a/web/static/icons/dartboat_192_mask.png
+++ b/web/static/icons/dartboat_192_mask.png
diff --git a/web/static/icons/dartboat_512_mask.png b/web/static/icons/dartboat_512_mask.png
index 47a7f50..4734e76 100644
--- a/web/static/icons/dartboat_512_mask.png
+++ b/web/static/icons/dartboat_512_mask.png
diff --git a/web/static/index.html b/web/static/index.html
index 472247d..609161a 100644
--- a/web/static/index.html
+++ b/web/static/index.html
@@ -5,7 +5,7 @@
 		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<meta name="description" content="Darts opponent for when you've got no friends.">
-		<meta name="theme-color" content="#311d52">
+		<meta name="theme-color" content="#583a90">
 		<link rel="stylesheet" type="text/css" href="style.css">
 		<link rel="manifest" href="dartboat.webmanifest">
 		<link rel="icon" type="image/png" sizes="48x48" href="icons/dartboat_48.png">
@@ -15,11 +15,12 @@
 	<body>
 		<div id="main">
 			<div id="titlebar">
-				<div>dartboat™</div>
-				<div title="Delay between computer's darts (ms)" class="input first"><label for="delay" class="icon">&#xf597;</label><input id="delay" data-opt="delay" maxlength="4" value=""></div>
-				<div title="Difficulty (precision of computer's throws)" class="input"><label for="difficulty" class="icon">&#xf1de;</label><input id="difficulty" data-opt="difficulty" maxlength="2" value=""></div>
+				<div title="End match" class="button icon" id="key-exit">&#xf659;</div>
+				<div class="name">dartboat™</div>
+				<div title="Delay between computer's darts (ms)" class="opt-input first"><label for="delay" class="icon">&#xf597;</label><input id="delay" data-opt="delay" maxlength="4" value=""></div>
+				<div title="Difficulty (precision of computer's throws)" class="opt-input"><label for="difficulty" class="icon">&#xf1de;</label><input id="difficulty" data-opt="difficulty" maxlength="2" value=""></div>
 				<div title="Toggle controls side" class="button icon" id="flip-controls-button">&#xf1c3;</div>
-				<div title="Help and info" class="button icon" data-modal="help-modal">&#xf50b;</div>
+				<div title="Help and info" class="button icon" data-modal="help-modal">&#xf50c;</div>
 			</div>
 			<div id="info">
 				<div id="oi">oi!</div>
diff --git a/web/static/style.css b/web/static/style.css
index f0f4b2f..64ae4df 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -47,6 +47,8 @@
 }
 
 html {
+	font-size: clamp(1.5vh, 2.5vw, 2vh);
+
 	height: 100vh;
 }
 
@@ -66,7 +68,6 @@ body {
 
 #main {
 	background-color: #111;
-	font-size: clamp(1.5vh, 2.5vw, 2vh);
 
 	height: 100%;
 	margin: 0 auto;
@@ -115,12 +116,65 @@ body {
 	gap: 0.4rem;
 }
 
-#titlebar div.input.first {
+#titlebar .name {
+	font-family: 'Source Serif 4', serif;
+	line-height: 1em;
+
+	margin-top: 0.05em;
+}
+
+#titlebar .button {
+	color: #eee;
+	background-color: #583a90;
+	border-radius: 0.4rem;
+	text-align: center;
+
+	height: 100%;
+	padding: 0 0.4rem;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+#titlebar #key-exit {
+	display: none;
+}
+
+#titlebar #key-exit.visible {
+	display: flex;
+}
+
+#titlebar #key-exit.active {
+	background-color: #680018;
+}
+
+@media (hover: hover) and (pointer: fine) {
+	#titlebar .button:hover {
+		color: #fff;
+		background-color: #6e49b4;
+	}
+
+	#titlebar #key-exit.active:hover {
+		background-color: #82001e;
+	}
+}
+
+#titlebar .button:active {
+	color: #fff;
+	background-color: #7b51ca;
+}
+
+#titlebar #key-exit.active:active {
+	background-color: #920022;
+}
+
+#titlebar .opt-input.first {
 	margin-left: auto;
 }
 
-#titlebar div.input {
-	background-color: #222;
+#titlebar .opt-input {
+	height: 100%;
 
 	display: flex;
 	flex-wrap: wrap;
@@ -128,13 +182,22 @@ body {
 	justify-content: center;
 }
 
-#titlebar label {
+#titlebar .opt-input label {
+	color: #ccc;
+	background-color: #282828;
+	border-radius: 0.4rem 0 0 0.4rem;
+
+	height: 100%;
 	padding: 0 0.4rem;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
-#titlebar input {
+#titlebar .opt-input input {
 	color: #eee;
-	background-color: #3d2466;
+	background-color: #583a90;
 	font-family: inherit;
 	font-size: 1em;
 	text-align: right;
@@ -142,57 +205,34 @@ body {
 	width: 4ch;
 	padding: 0 0.4rem;
 	border: 0;
+	border-radius: 0 0.4rem 0.4rem 0;
 }
 
-#titlebar input#difficulty {
+#titlebar .opt-input input#difficulty {
 	width: 2ch;
 }
 
-#titlebar div.button {
-	background-color: #3d2466;
-	font-weight: 700;
-
-	height: 100%;
-	padding: 0em 0.2em;
-
-	display: flex;
-	align-items: center;
-}
-
 @media (hover: hover) and (pointer: fine) {
-	#titlebar input:hover {
-		background-color: #5c3699;
+	#titlebar .opt-input:hover label {
+		color: #ddd;
+		background-color: #323232;
 	}
 
-	#titlebar div.button:hover {
-		background-color: #5c3699;
+	#titlebar .opt-input input:hover {
+		color: #fff;
+		background-color: #6e49b4;
 	}
 }
 
-#titlebar input:focus {
-	color: #fff;
-	background-color: #6e41b8;
-	outline: #7eab1e solid 2px;
+#titlebar .opt-input:focus-within label {
+	color: #eee;
+	background-color: #383838;
 }
 
-#titlebar div.button:active {
+#titlebar .opt-input:focus-within input {
 	color: #fff;
-	background-color: #6e41b8;
-}
-
-@media (max-aspect-ratio: 9/20) {
-	#titlebar div.input {
-		display: flex;
-		flex-direction: column;
-	}
-
-	#titlebar label {
-		padding: 0 0.4rem;
-	}
-
-	#titlebar .button {
-		font-size: 2em;
-	}
+	background-color: #7b51ca;
+	outline: 0;
 }
 
 @media (max-aspect-ratio: 8/5) {
@@ -224,7 +264,7 @@ body {
 }
 
 #controls #prompt.active {
-	background-color: #311d52;
+	background-color: #352356;
 }
 
 #controls #prompt-msg-l, #controls #prompt-input, #controls #prompt-msg-r {
@@ -235,7 +275,7 @@ body {
 	align-items: center;
 }
 
-#controls #prompt-msg-l, #prompt-msg-r {
+#controls #prompt-msg-l, #controls #prompt-msg-r {
 	flex: 1;
 	color: #ccc;
 	padding: 0 0.4rem;
@@ -328,29 +368,31 @@ body {
 
 @media (hover: hover) and (pointer: fine) {
 	#controls .key:hover {
-		background-color: #304010;
+		color: #fff;
+		background-color: #35481d;
 	}
 }
 
 #controls .key:active {
 	color: #fff;
-	background-color: #384810;
+	background-color: #3b5120;
 }
 
 #controls .key.active {
-	color: #eee;
+	color: #fff;
 	background-color: #3d2466;
 }
 
 @media (hover: hover) and (pointer: fine) {
 	#controls .key.active:hover {
-		background-color: #5c3699;
+		color: #fff;
+		background-color: #4c2d80;
 	}
 }
 
 #controls .key.active:active {
 	color: #fff;
-	background-color: #6e41b8;
+	background-color: #55328f;
 }
 
 #controls .key span.keyboard-val {
@@ -380,7 +422,8 @@ body {
 #info #oi {
 	visibility: hidden;
 
-	background-color: #640016;
+	color: #fff;
+	background-color: #680018;
 	font-size: 3em;
 	height: 1.2em;
 	width: 3ch;
@@ -415,7 +458,7 @@ body {
 }
 
 #info #p1-info.active, #info #p2-info.active {
-	background-color: #304010;
+	background-color: #35481d;
 }
 
 #info #p1-info-inner, #info #p2-info-inner {
@@ -551,7 +594,7 @@ body {
 
 .modal-content {
 	background-color: #222;
-	font-size: 1.4em;
+	font-size: 1.2em;
 	font-family: 'Source Serif 4', serif;
 	user-select: text;
 
@@ -559,7 +602,7 @@ body {
 	max-height: calc(100% - 8em);
 	margin: 2em auto;
 	padding: 2em;
-	outline: #7eab1e solid 2px;
+	outline: #94ca51 solid 2px;
 	overflow: auto;
 }
 
@@ -578,11 +621,11 @@ body {
 }
 
 .modal-content a, .modal-content .modal-close {
-	color: #7eab1e;
+	color: #94ca51;
 }
 
 .modal-content a:hover, .modal-content .modal-close:hover {
-	color: #a8e428;
+	color: #b9fd65;
 }
 
 .modal-content .modal-close {
diff --git a/web/static/sw.js b/web/static/sw.js
index 172cf0d..5510e3f 100644
--- a/web/static/sw.js
+++ b/web/static/sw.js
@@ -1,5 +1,5 @@
 const CACHE_PREFIX = 'dartboat-'
-const CACHE_VERSION = '7';
+const CACHE_VERSION = '8';
 const CACHE_NAME = `${CACHE_PREFIX}${CACHE_VERSION}`;
 
 const CACHE_FILES = [
diff --git a/web/web_control.c b/web/web_control.c
index 6d61f5c..8148e89 100644
--- a/web/web_control.c
+++ b/web/web_control.c
@@ -289,12 +289,14 @@ void start_match()
 	}
 
 	dom_enable_exit_dialogue(true);
+	dom_add_class("#key-exit", "visible");
 	draw_visits();
 	handle_next();
 }
 
 void end_match()
 {
+	dom_remove_class("#key-exit", "visible");
 	dom_enable_exit_dialogue(false);
 	if (state) free_state();
 	handle_next();
diff --git a/web/web_prompt.c b/web/web_prompt.c
index f2aaa68..edb9f99 100644
--- a/web/web_prompt.c
+++ b/web/web_prompt.c
@@ -166,7 +166,7 @@ void prompt_num_darts()
 
 void prompt_end_match()
 {
-	scoreboard_set_player_active(-1); // sets all inactive
+	scoreboard_set_player_active(-1);
 
 	set_prompt_mode(PM_END_MATCH);
 	prompt_set_msgl(
@@ -346,6 +346,9 @@ void prompt_handle_pre(char *command)
 
 	if (pm == PM_END_MATCH && strcmp(command, "submit"))
 		deactivate_key("submit");
+
+	if (strcmp(command, "exit"))
+		deactivate_key("exit");
 }
 
 void prompt_handle_on_change()
@@ -473,6 +476,16 @@ void prompt_handle_undo()
 	toggle_key("undo");
 }
 
+void prompt_handle_exit()
+{
+	if (key_is_active("exit")) {
+		// FIXME clear scheduled c calls (comp throwing)
+		scoreboard_set_player_active(-1);
+		end_match();
+	}
+	toggle_key("exit");
+}
+
 EMSCRIPTEN_KEEPALIVE
 void prompt_handle(char *command, char *data)
 {
@@ -490,4 +503,6 @@ void prompt_handle(char *command, char *data)
 		prompt_handle_rem();
 	else if (!strcmp(command, "undo"))
 		prompt_handle_undo();
+	else if (!strcmp(command, "exit"))
+		prompt_handle_exit();
 }
author	David Vazgenovich Shakaryan <dvshakaryan@gmail.com>	2022-05-16 01:34:54 -0700
committer	David Vazgenovich Shakaryan <dvshakaryan@gmail.com>	2022-05-16 01:36:56 -0700
commit	6a5cc149d373354941d046d3b3d851901fb4caf3 (patch)
tree	773e7fd7135c50cd126eef34d720dcfe64f3a4e7
parent	72fa8e2849ab618fa66b776fd4af6d18d025fd51 (diff)
download	dartboat-6a5cc149d373354941d046d3b3d851901fb4caf3.tar.gz dartboat-6a5cc149d373354941d046d3b3d851901fb4caf3.tar.xz