web: dynamically generate (list-mode) keypad keys

This is currently only for match mode selection, but we'll reuse it to
implement more menus.

5 files changed, 61 insertions, 22 deletions

diff --git a/web/static/dartboat.js b/web/static/dartboat.js
index 22c0728..eb1b8fa 100644
--- a/web/static/dartboat.js
+++ b/web/static/dartboat.js
@@ -122,9 +122,12 @@ function flipControls(store_opt = true) {
 document.addEventListener('DOMContentLoaded', () => {
 	let f;
 
-	f = e => e.target.dataset.command.split(';').forEach(x =>
-		promptHandle(...x.split(':', 2)));
-	$$('[data-command]').forEach(x => x.addEventListener('click', f));
+	$('#controls').addEventListener('click', e => {
+		const command = e.target.dataset.command;
+		if (!command) return;
+		command.split(';').forEach(x =>
+			promptHandle(...x.split(':', 2)));
+	});
 
 	f = e => _set_opt(toCString(e.target.dataset.opt),
 		toCString(e.target.value));
diff --git a/web/static/index.html b/web/static/index.html
index feea2d6..d9d8718 100644
--- a/web/static/index.html
+++ b/web/static/index.html
@@ -58,14 +58,9 @@
 					<div data-command="undo" class="key" id="key-undo">UNDO</div>
 					<div data-command="rem" class="key" id="key-rem">REMAINING</div>
 				</div>
-				<div id="keypad-select_mode" class="keypad">
-					<div data-command="append:1;submit" class="key"><span class="keyboard-val">[1]</span> Play against bot</div>
-					<div data-command="append:2;submit" class="key"><span class="keyboard-val">[2]</span> One-player scoreboard</div>
-					<div data-command="append:3;submit" class="key"><span class="keyboard-val">[3]</span> Two-player scoreboard</div>
-				</div>
+				<div id="keypad-list" class="keypad"></div>
 				<div id="keypad-dartboard" class="keypad">
-					<div id="dartboard-container">
-					</div>
+					<div id="dartboard-container"></div>
 				</div>
 			</div>
 			<div id="visits"></div>
diff --git a/web/static/style.css b/web/static/style.css
index 1383b5c..3df1d92 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -194,7 +194,7 @@ body {
 	display: contents;
 }
 
-#controls #keypad-select_mode .key {
+#controls #keypad-list .key {
 	grid-column: 1 / -1;
 
 	padding-left: 0.4rem;
diff --git a/web/web_prompt.c b/web/web_prompt.c
index 2ceb2d4..3b5bc68 100644
--- a/web/web_prompt.c
+++ b/web/web_prompt.c
@@ -13,8 +13,18 @@
 
 int oi_timeout;
 
+enum prompt_mode {
+	PM_DARTBOARD,
+	PM_VISIT,
+	PM_NUM_DARTS,
+	PM_END_MATCH,
+	PM_SELECT_MODE
+};
 enum prompt_mode pm;
 
+static char *list_optv[10];
+static int list_optc;
+
 static struct {
 	bufstr msgl, msgr, input;
 } bufs;
@@ -61,6 +71,42 @@ void prompt_flush()
 		dom_set_content("#prompt-input", bufstr_flush(&bufs.input));
 }
 
+static void clear_list_opts()
+{
+	for (int i = 0; i < list_optc; ++i)
+		free(list_optv[i]);
+	list_optc = 0;
+}
+
+static void add_list_opt(char *str)
+{
+	list_optv[list_optc++] = strdup(str);
+}
+
+static void flush_list_opts()
+{
+	struct dom_elem **elemv = malloc(list_optc * sizeof(*elemv));
+
+	for (int i = 0; i < list_optc; ++i) {
+		struct dom_elem *e = dom_elem_init(NULL, "div", 2);
+		asprintf(&e->content, "[%d] %s", i + 1, list_optv[i]);
+		dom_elem_add_attr(e, "class", "key");
+
+		char buf[64];
+		sprintf(buf, "append:%d;submit", i + 1);
+		dom_elem_add_attr(e, "data-command", buf);
+
+		elemv[i] = e;
+	}
+
+	dom_set_content("#keypad-list", NULL);
+	dom_append_elemv("#keypad-list", list_optc, elemv);
+
+	for (int i = 0; i < list_optc; ++i)
+		dom_elem_free(elemv[i]);
+	free(elemv);
+}
+
 void set_prompt_mode(enum prompt_mode mode)
 {
 	pm = mode;
@@ -72,7 +118,7 @@ void set_prompt_mode(enum prompt_mode mode)
 
 	dom_set_uniq_class(
 		pm == PM_DARTBOARD ? "#keypad-dartboard" :
-			pm == PM_SELECT_MODE ? "#keypad-select_mode" :
+			pm == PM_SELECT_MODE ? "#keypad-list" :
 			"#keypad-default",
 		"visible", ".keypad");
 }
@@ -121,6 +167,11 @@ void prompt_select_mode()
 		clear_player_info(pn);
 	dom_set_content("#visits", NULL);
 
+	clear_list_opts();
+	add_list_opt("Play against bot");
+	add_list_opt("One-player scoreboard");
+	add_list_opt("Two-player scoreboard");
+	flush_list_opts();
 	set_prompt_mode(PM_SELECT_MODE);
 	prompt_set_msgl("Select match mode:");
 	prompt_set_msgr(NULL);
diff --git a/web/web_prompt.h b/web/web_prompt.h
index 7d503f8..7887c34 100644
--- a/web/web_prompt.h
+++ b/web/web_prompt.h
@@ -1,16 +1,6 @@
 #ifndef WEB_PROMPT_H
 #define WEB_PROMPT_H
 
-enum prompt_mode {
-	PM_DARTBOARD,
-	PM_VISIT,
-	PM_NUM_DARTS,
-	PM_END_MATCH,
-	PM_SELECT_MODE
-};
-
-extern enum prompt_mode pm;
-
 void oi();
 
 void prompt_set_msgl(char *str);