diff options
author | David Vazgenovich Shakaryan <dvshakaryan@gmail.com> | 2022-04-23 03:11:48 -0700 |
---|---|---|
committer | David Vazgenovich Shakaryan <dvshakaryan@gmail.com> | 2022-04-23 03:11:48 -0700 |
commit | 71b2f13214405ec43cb1d4e55d32bd7786758e16 (patch) | |
tree | 29cec54b74af64b62e572c1ac91b7336935e87cb /web/static/dartboat.js | |
parent | 39b76b0e432077f9777e66bb1e4d3486db5edbf0 (diff) | |
download | dartboat-71b2f13214405ec43cb1d4e55d32bd7786758e16.tar.gz dartboat-71b2f13214405ec43cb1d4e55d32bd7786758e16.tar.xz |
misc web ui cleanup
Diffstat (limited to 'web/static/dartboat.js')
-rw-r--r-- | web/static/dartboat.js | 175 |
1 files changed, 88 insertions, 87 deletions
diff --git a/web/static/dartboat.js b/web/static/dartboat.js index a47b845..87c6020 100644 --- a/web/static/dartboat.js +++ b/web/static/dartboat.js @@ -1,5 +1,33 @@ +let oi_timeout; +function oi() { + document.getElementById('oi').style.visibility = 'visible'; + + oi_timeout = setTimeout(() => { oi_timeout = null; clearOi(); }, 3000); +} + +function clearOi() { + document.getElementById('oi').style.visibility = 'hidden'; + + if (oi_timeout) { + clearTimeout(oi_timeout); + oi_timeout = null; + } +} + +function scheduleCCall(f, ms, ...args) { + let types = []; + let vals = []; + + for (let i = 0; i < args.length/2; i++) + vals[i] = (types[i] = UTF8ToString(args[i*2])) == 'string' ? + UTF8ToString(args[i*2+1]) : args[i*2+1]; + + let func = UTF8ToString(f); + setTimeout(() => Module.ccall(func, null, types, vals), ms); +} + function _promptGet() { - return document.getElementById('prompt').textContent; + return document.getElementById('prompt-input').textContent; } function _promptGetAndClear() { @@ -9,33 +37,33 @@ function _promptGetAndClear() { } function _promptDeleteLast() { - let elem = document.getElementById('prompt'); - elem.textContent = elem.textContent.slice(0, -1); + let e = document.getElementById('prompt-input'); + e.textContent = e.textContent.slice(0, -1); } function _promptClear() { - document.getElementById('prompt').textContent = ''; + document.getElementById('prompt-input').textContent = ''; } let prompt_handler; let prompt_handlers = { visit: { append(val) { - let elem = document.getElementById('prompt'); - if (elem.textContent.length < 3) { - elem.textContent += val; - promptUpdateRem(); + let e = document.getElementById('prompt-input'); + if (e.textContent.length < 3) { + e.textContent += val; + this._update_rem(); } }, backspace() { _promptDeleteLast(); - promptUpdateRem(); + this._update_rem(); }, clear() { _promptClear(); - promptUpdateRem(); + this._update_rem(); }, submit() { @@ -48,13 +76,19 @@ let prompt_handlers = { let rem = _promptGetAndClear(); if (rem) Module.ccall('user_visit_to_rem', 'number', ['number'], [rem]); + }, + + _update_rem(val) { + Module.ccall('update_user_rem_from_pts', null, + ['number'], [val || _promptGet()]); } }, + num_darts: { append(val) { - let elem = document.getElementById('prompt'); - if (elem.textContent.length < 3) - elem.textContent += val; + let e = document.getElementById('prompt-input'); + if (e.textContent.length < 3) + e.textContent += val; }, backspace() { @@ -71,6 +105,7 @@ let prompt_handlers = { Module.ccall('resp_numdarts', null, ['number'], [n]); } }, + init: { submit() { Module.ccall('start_match'); @@ -107,29 +142,21 @@ function promptSubmitRem(...args) { prompt_handler?.submit_rem?.(...args); } -function clearMatchLog() { - document.getElementById('match').textContent = ''; +function setPromptInput(ptr) { + document.getElementById('prompt-input').textContent = UTF8ToString(ptr); } -let oi_timeout; -function oi() { - document.getElementById('oi').style.visibility = 'visible'; - - oi_timeout = setTimeout(function() { oi_timeout = null; clearOi() }, 3000); +function promptMsgL(p) { + document.getElementById('prompt-msg-l').textContent = UTF8ToString(p); } -function clearOi() { - document.getElementById('oi').style.visibility = 'hidden'; - - if (oi_timeout) { - clearTimeout(oi_timeout); - oi_timeout = null; - } +function promptMsgR(p) { + document.getElementById('prompt-msg-r').textContent = UTF8ToString(p); } function setPlayerActive(n) { - document.querySelectorAll('[id$=-state]').forEach(e => - e.classList[n && e.id == `p${n}-state` ? 'add' : 'remove']('active')); + document.querySelectorAll('[id$=-info]').forEach(e => + e.classList[n && e.id == `p${n}-info` ? 'add' : 'remove']('active')); } function updatePlayerRem(n, ptr) { @@ -148,89 +175,63 @@ function updatePlayerAvg(n, avg) { document.getElementById(`p${n}-avg`).textContent = avg.toFixed(2); } -function setPromptText(ptr) { - document.getElementById('prompt').textContent = UTF8ToString(ptr); -} - -function promptMsg(p) { - document.getElementById('prompt-msg').textContent = UTF8ToString(p); -} - -function promptSugg(p) { - document.getElementById('prompt-sugg').textContent = UTF8ToString(p); -} - -function promptUpdateRem() { - Module.ccall('update_user_rem_from_pts', null, ['number'], [_promptGet()]); -} - -function scheduleCCall(f, ms, ...args) { - let types = []; - let vals = []; - - for (let i = 0; i < args.length/2; i++) - vals[i] = (types[i] = UTF8ToString(args[i*2])) == 'string' ? - UTF8ToString(args[i*2+1]) : args[i*2+1]; - - let func = UTF8ToString(f); - setTimeout(function() { Module.ccall(func, null, types, vals) }, ms); +function clearVisits() { + document.getElementById('visits').textContent = ''; } const POINT_CLASSES = [180, 140, 100, 60, 40, 20, 1, 0]; -function drawVisit(visit_no, u_pts, u_rem, b_pts, b_rem, b_darts) { - let elem = document.getElementById('match'); +function drawVisit(visit_no, p1_pts, p1_rem, p2_pts, p2_rem, p2_darts) { + let e = document.getElementById('visits'); - for (let [i, ptr] of [u_pts, u_rem, visit_no, b_rem, b_pts, b_darts].entries()) { - let div = document.createElement('div'); + for (let [i, ptr] of [ + p1_pts, p1_rem, visit_no, p2_rem, p2_pts, p2_darts].entries()) { + + let div = e.appendChild(document.createElement('div')); let v = div.textContent = UTF8ToString(ptr); + div.classList.add(`visit-col${i+1}`); if (i == 0 || i == 4) - div.className = `p${POINT_CLASSES.find(x => x <= v)}`; + div.classList.add(`p${POINT_CLASSES.find(x => x <= v)}`); else if (i == 5 && v) div.textContent = `… ${v}`; - div.className += ` visit-col${i+1}`; - elem.append(div); } - elem.scrollTop = elem.scrollHeight; -} - -function setStdev(val) { - Module.ccall('change_stdev', null, ['number', 'number'], [val, val]); -} - -function updateStdev(val) { - document.getElementById('stdev').value = val; + e.scrollTop = e.scrollHeight; } function setDelay(val) { - Module.ccall('change_delay', null, ['number'], [val]); + Module.ccall('set_delay', null, ['number'], [val]); } function updateDelay(val) { document.getElementById('delay').value = val; } -function processKey(data) { - if (data.altKey || data.ctrlKey || data.metaKey || data.target.type == 'text') - return; - let key = data.key; +function setStdev(val) { + Module.ccall('set_stdev', null, ['number', 'number'], [val, val]); +} - if (isFinite(key)) - promptAppend(key); - else if (key == 'Enter') - promptSubmit(); - else if (key == 'Backspace') - promptBackspace(); - else if (key == 'r') - promptSubmitRem(); +function updateStdev(val) { + document.getElementById('stdev').value = val; } function modal(id) { document.getElementById(id).style.display = 'block'; } -window.onclick = function(e) { +document.addEventListener('click', e => { if (e.target.classList.contains('modal')) e.target.style.display = 'none'; -} +}); -document.addEventListener('keydown', processKey); +document.addEventListener('keydown', e => { + if (e.altKey || e.ctrlKey || e.metaKey || e.target.type == 'text') + return; + + if (isFinite(e.key)) + promptAppend(e.key); + else if (e.key == 'Enter') + promptSubmit(); + else if (e.key == 'Backspace') + promptBackspace(); + else if (e.key == 'r') + promptSubmitRem(); +}); |