From bee6e71f2e0af29f846f61646311850a0256463a Mon Sep 17 00:00:00 2001 From: David Vazgenovich Shakaryan Date: Wed, 27 Apr 2022 13:09:52 -0700 Subject: web: use short alias for selectors; make key label function generic --- web/static/dartboat.js | 91 +++++++++++++++++++++++--------------------------- 1 file changed, 42 insertions(+), 49 deletions(-) (limited to 'web/static') diff --git a/web/static/dartboat.js b/web/static/dartboat.js index 4c2be26..0f01507 100644 --- a/web/static/dartboat.js +++ b/web/static/dartboat.js @@ -1,12 +1,15 @@ +const $ = document.querySelector.bind(document); +const $$ = document.querySelectorAll.bind(document); + let oi_timeout; function oi() { - document.getElementById('oi').style.visibility = 'visible'; + $('#oi').style.visibility = 'visible'; oi_timeout = setTimeout(() => { oi_timeout = null; clearOi(); }, 3000); } function clearOi() { - document.getElementById('oi').style.visibility = 'hidden'; + $('#oi').style.visibility = 'hidden'; if (oi_timeout) { clearTimeout(oi_timeout); @@ -27,104 +30,96 @@ function toCString(str) { // caller must free } function promptGet() { // caller must free - return toCString(document.getElementById('prompt-input').textContent); + return toCString($('#prompt-input').textContent); +} + +function promptHandle(command, data) { + const str_c = toCString(command); + const str_d = data && toCString(data); + _prompt_handle(str_c, str_d); + + _free(str_c); + if (str_d) _free(str_d); } function setPromptActive() { - document.getElementById('prompt').classList.add('active') + $('#prompt').classList.add('active') } function setPromptInactive() { - document.getElementById('prompt').classList.remove('active') + $('#prompt').classList.remove('active') } function setPromptInput(ptr) { - document.getElementById('prompt-input').textContent = UTF8ToString(ptr); + $('#prompt-input').textContent = UTF8ToString(ptr); } -function promptMsgL(p) { - document.getElementById('prompt-msg-l').textContent = UTF8ToString(p); +function promptMsgL(ptr) { + $('#prompt-msg-l').textContent = UTF8ToString(ptr); } -function promptMsgR(p) { - document.getElementById('prompt-msg-r').textContent = UTF8ToString(p); -} - -function promptHandle(command, data) { - const str_c = toCString(command); - const str_d = data && toCString(data); - _prompt_handle(str_c, str_d); - - _free(str_c); - if (str_d) _free(str_d); +function promptMsgR(ptr) { + $('#prompt-msg-r').textContent = UTF8ToString(ptr); } function setKeypad(keypad) { - let keypad_id = `keypad-${UTF8ToString(keypad)}`; - document.querySelectorAll('.keypad').forEach(e => { - e.style.display = e.id === keypad_id ? '' : 'none'; - }); + const keypad_id = `keypad-${UTF8ToString(keypad)}`; + $$('.keypad').forEach(e => { + e.style.display = e.id === keypad_id ? '' : 'none'; }); } function isKeyActive(k) { - return document.getElementById(`key-${UTF8ToString(k)}`).classList - .contains('active'); + return $(`#key-${UTF8ToString(k)}`).classList.contains('active'); } function toggleKey(k) { - document.getElementById(`key-${UTF8ToString(k)}`).classList - .toggle('active'); + $(`#key-${UTF8ToString(k)}`).classList.toggle('active'); } function deactivateKey(k) { - document.getElementById(`key-${UTF8ToString(k)}`).classList - .remove('active'); -} - -function setKeyLabelSubmit(ptr) { - document.getElementById('key-submit').textContent = UTF8ToString(ptr); + $(`#key-${UTF8ToString(k)}`).classList.remove('active'); } -function setKeyLabelRem(ptr) { - document.getElementById('key-rem').textContent = UTF8ToString(ptr); +function setKeyLabel(k, ptr) { + $(`#key-${UTF8ToString(k)}`).textContent = UTF8ToString(ptr); } function setPlayerActive(n) { - document.querySelectorAll('[id$=-info]').forEach(e => + $$('[id$=-info]').forEach(e => e.classList[n && e.id == `p${n}-info` ? 'add' : 'remove']('active')); } function showPlayerInfo(n) { - document.getElementById(`p${n}-info-inner`).style.visibility = 'visible'; + $(`#p${n}-info-inner`).style.visibility = 'visible'; } function hidePlayerInfo(n) { - document.getElementById(`p${n}-info-inner`).style.visibility = 'hidden'; + $(`#p${n}-info-inner`).style.visibility = 'hidden'; } function updatePlayerName(n, ptr) { - document.getElementById(`p${n}-name`).textContent = UTF8ToString(ptr); + $(`#p${n}-name`).textContent = UTF8ToString(ptr); } function updatePlayerRem(n, ptr) { - document.getElementById(`p${n}-rem`).textContent = UTF8ToString(ptr); + $(`#p${n}-rem`).textContent = UTF8ToString(ptr); } function updatePlayerSugg(n, ptr) { - document.getElementById(`p${n}-sugg`).textContent = UTF8ToString(ptr); + $(`#p${n}-sugg`).textContent = UTF8ToString(ptr); } function updatePlayerAvg(n, avg) { - document.getElementById(`p${n}-avg`).textContent = avg.toFixed(2); + $(`#p${n}-avg`).textContent = avg.toFixed(2); } function clearVisits() { - document.getElementById('visits').textContent = ''; + $('#visits').textContent = ''; } const POINT_CLASSES = [180, 140, 100, 60, 40, 20, 0]; function drawVisit(visit_no, p1_pts, p1_rem, p2_pts, p2_rem, p2_darts) { - let e = document.getElementById('visits'); + let e = $('#visits'); for (let [i, ptr] of [ p1_pts, p1_rem, visit_no, p2_rem, p2_pts, p2_darts].entries()) { @@ -147,7 +142,7 @@ function setDelay(val, update_opts = true) { } function updateDelay(val) { - document.getElementById('delay').value = val; + $('#delay').value = val; } function setStdev(val, update_opts = true) { @@ -156,8 +151,7 @@ function setStdev(val, update_opts = true) { } function updateStdev(val) { - document.getElementById('stdev').value = parseFloat( - val.toFixed(2).slice(0, 4)); + $('#stdev').value = parseFloat(val.toFixed(2).slice(0, 4)); } function readOpts() { @@ -172,8 +166,7 @@ function readOpts() { document.addEventListener('click', e => { const modal = e.target.dataset.modal; - if (modal) - document.getElementById(modal).style.display = 'block'; + if (modal) $(`#${modal}`).style.display = 'block'; if (e.target.classList.contains('modal')) e.target.style.display = 'none'; -- cgit v1.2.3-70-g09d2