web: use targeted event listeners

1 files changed, 22 insertions, 29 deletions

diff --git a/web/static/dartboat.js b/web/static/dartboat.js
index 0f01507..23c7a8d 100644
--- a/web/static/dartboat.js
+++ b/web/static/dartboat.js
@@ -136,54 +136,47 @@ function drawVisit(visit_no, p1_pts, p1_rem, p2_pts, p2_rem, p2_darts) {
 	e.scrollTop = e.scrollHeight;
 }
 
-function setDelay(val, update_opts = true) {
-	if (update_opts) localStorage.setItem('dartboat_delay', val);
-	_set_delay(Number(val));
-}
-
 function updateDelay(val) {
 	$('#delay').value = val;
 }
 
-function setStdev(val, update_opts = true) {
-	if (update_opts) localStorage.setItem('dartboat_stdev', val);
-	_set_stdev(Number(val), Number(val));
-}
-
 function updateStdev(val) {
 	$('#stdev').value = parseFloat(val.toFixed(2).slice(0, 4));
 }
 
+function setOpt(opt, val, update_opts = true) {
+	if (update_opts) localStorage.setItem(`dartboat_${opt}`, val);
+
+	if (opt === 'delay')
+		_set_delay(Number(val));
+	else if (opt === 'stdev')
+		_set_stdev(Number(val), Number(val));
+}
+
 function readOpts() {
 	let val;
 
 	if ((val = localStorage.getItem('dartboat_delay')))
-		setDelay(val, false);
+		setOpt('delay', val, false);
 
 	if ((val = localStorage.getItem('dartboat_stdev')))
-		setStdev(val, false);
+		setOpt('stdev', val, false);
 }
 
-document.addEventListener('click', e => {
-	const modal = e.target.dataset.modal;
-	if (modal) $(`#${modal}`).style.display = 'block';
+document.addEventListener('DOMContentLoaded', () => {
+	let f;
 
-	if (e.target.classList.contains('modal'))
-		e.target.style.display = 'none';
-});
+	f = e => e.target.dataset.command.split(';').forEach(x =>
+		promptHandle(...x.split(':', 2)));
+	$$('[data-command]').forEach(x => x.addEventListener('click', f));
 
-document.addEventListener('click', e => {
-	const command = e.target.dataset.command;
-	if (command)
-		command.split(';').forEach(x => promptHandle(...x.split(':', 2)));
-});
+	f = e => setOpt(e.target.dataset.setting, e.target.value);
+	$$('[data-setting]').forEach(x => x.addEventListener('change', f));
 
-document.addEventListener('change', e => {
-	const setting = e.target.dataset.setting;
-	if (setting === 'delay')
-		setDelay(e.target.value);
-	else if (setting === 'stdev')
-		setStdev(e.target.value);
+	f = e => $(`#${e.target.dataset.modal}`).style.display = 'block';
+	$$('[data-modal]').forEach(x => x.addEventListener('click', f));
+	f = e => e.target.style.display = 'none';
+	$$('.modal').forEach(x => x.addEventListener('click', f));
 });
 
 document.addEventListener('keydown', e => {