web: rid HTML of inline JS

Maybe I'll change this to use targeted event listeners when I'm not
lazy.

2 files changed, 41 insertions, 26 deletions

diff --git a/web/static/dartboat.js b/web/static/dartboat.js
index 428ff85..285a98e 100644
--- a/web/static/dartboat.js
+++ b/web/static/dartboat.js
@@ -54,8 +54,8 @@ function promptMsgR(p) {
 	document.getElementById('prompt-msg-r').textContent = UTF8ToString(p);
 }
 
-function promptHandle(action, data) {
-	Module.ccall('prompt_handle', null, ['string', 'string'], [action, data]);
+function promptHandle(command, data) {
+	Module.ccall('prompt_handle', null, ['string', 'string'], [command, data]);
 }
 
 function setKeypad(keypad) {
@@ -169,12 +169,27 @@ function readOpts() {
 		setStdev(val, false);
 }
 
-function modal(id) {
-	document.getElementById(id).style.display = 'block';
-}
+document.addEventListener('click', e => {
+	const modal = e.target.dataset.modal;
+	if (modal)
+		document.getElementById(modal).style.display = 'block';
+
+	if (e.target.classList.contains('modal'))
+		e.target.style.display = 'none';
+});
 
 document.addEventListener('click', e => {
-	if (e.target.classList.contains('modal')) e.target.style.display = 'none';
+	const command = e.target.dataset.command;
+	if (command)
+		command.split(';').forEach(x => promptHandle(...x.split(':', 2)));
+});
+
+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);
 });
 
 document.addEventListener('keydown', e => {
diff --git a/web/static/index.html b/web/static/index.html
index 2af1f35..2bc1275 100644
--- a/web/static/index.html
+++ b/web/static/index.html
@@ -36,32 +36,32 @@
 					<div id="prompt-msg-r"></div>
 				</div>
 				<div id="keypad-default" class="keypad" style="display: none">
-					<div onclick="promptHandle('append', '1')" class="key num">1</div>
-					<div onclick="promptHandle('append', '2')" class="key num">2</div>
-					<div onclick="promptHandle('append', '3')" class="key num">3</div>
-					<div onclick="promptHandle('append', '4')" class="key num">4</div>
-					<div onclick="promptHandle('append', '5')" class="key num">5</div>
-					<div onclick="promptHandle('append', '6')" class="key num">6</div>
-					<div onclick="promptHandle('append', '7')" class="key num">7</div>
-					<div onclick="promptHandle('append', '8')" class="key num">8</div>
-					<div onclick="promptHandle('append', '9')" class="key num">9</div>
-					<div onclick="promptHandle('clear')" class="key">CLEAR</div>
-					<div onclick="promptHandle('append', '0')" class="key num">0</div>
-					<div onclick="promptHandle('submit')" class="key" id="key-submit">OK</div>
-					<div onclick="promptHandle('undo')" class="key" id="key-undo">UNDO</div>
-					<div onclick="promptHandle('rem')" class="key" id="key-rem">REMAINING</div>
+					<div data-command="append:1" class="key num">1</div>
+					<div data-command="append:2" class="key num">2</div>
+					<div data-command="append:3" class="key num">3</div>
+					<div data-command="append:4" class="key num">4</div>
+					<div data-command="append:5" class="key num">5</div>
+					<div data-command="append:6" class="key num">6</div>
+					<div data-command="append:7" class="key num">7</div>
+					<div data-command="append:8" class="key num">8</div>
+					<div data-command="append:9" class="key num">9</div>
+					<div data-command="clear" class="key">CLEAR</div>
+					<div data-command="append:0" class="key num">0</div>
+					<div data-command="submit" class="key" id="key-submit">OK</div>
+					<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 onclick="promptHandle('append', '1'); promptHandle('submit')" class="key"><span class="keyboard-val">[1]</span> Play against bot</div>
-					<div onclick="promptHandle('append', '2'); promptHandle('submit')" class="key"><span class="keyboard-val">[2]</span> One-player scoreboard</div>
-					<div onclick="promptHandle('append', '3'); promptHandle('submit')" class="key"><span class="keyboard-val">[3]</span> Two-player scoreboard</div>
+					<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>
 			<div id="settings-bar">
 				<div>dartboat™</div>
-				<div class="input first"><span>delay</span><input id="delay" onchange="setDelay(this.value)" maxlength="4" value=""></div>
-				<div class="input"><span>stdev</span><input id="stdev" onchange="setStdev(this.value)" maxlength="4" value=""></div>
-				<div class="help-button" onclick="modal('help-modal')">?</div>
+				<div class="input first"><span>delay</span><input id="delay" data-setting="delay" maxlength="4" value=""></div>
+				<div class="input"><span>stdev</span><input id="stdev" data-setting="stdev" maxlength="4" value=""></div>
+				<div class="help-button" data-modal="help-modal">?</div>
 			</div>
 			<div id="visits"></div>
 		</div>