diff options
Diffstat (limited to 'web/static')
| -rw-r--r-- | web/static/dartboat.js | 27 | ||||
| -rw-r--r-- | web/static/index.html | 40 |
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> |