From 9ba644fd849ef7664be009e00206bf5eb1b85762 Mon Sep 17 00:00:00 2001
From: David Vazgenovich Shakaryan <dvshakaryan@gmail.com>
Date: Mon, 9 May 2022 15:56:22 -0700
Subject: web: dynamically generate (list-mode) keypad keys

This is currently only for match mode selection, but we'll reuse it to
implement more menus.
---
 web/static/dartboat.js | 9 ++++++---
 web/static/index.html  | 9 ++-------
 web/static/style.css   | 2 +-
 3 files changed, 9 insertions(+), 11 deletions(-)

(limited to 'web/static')

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;
-- 
cgit v1.2.3-70-g09d2