From 71b2f13214405ec43cb1d4e55d32bd7786758e16 Mon Sep 17 00:00:00 2001 From: David Vazgenovich Shakaryan Date: Sat, 23 Apr 2022 03:11:48 -0700 Subject: misc web ui cleanup --- web/dartboat_wasm.c | 32 ++++----- web/static/dartboat.js | 175 +++++++++++++++++++++++++------------------------ web/static/index.html | 12 ++-- web/static/style.css | 42 ++++++------ 4 files changed, 131 insertions(+), 130 deletions(-) diff --git a/web/dartboat_wasm.c b/web/dartboat_wasm.c index 5a043d1..04d8825 100644 --- a/web/dartboat_wasm.c +++ b/web/dartboat_wasm.c @@ -68,7 +68,7 @@ EMSCRIPTEN_KEEPALIVE int is_match_over() { void match_over() { EM_ASM({setPromptHandler($0)}, "init"); - EM_ASM({promptSugg($0)}, "Press OK to play again."); + EM_ASM({promptMsgR($0)}, "Press OK to play again."); EM_ASM(setPlayerActive()); } @@ -114,13 +114,13 @@ EMSCRIPTEN_KEEPALIVE void draw_match() { } if (l1->rem <= 0) { - EM_ASM({promptMsg($0)}, "Darts needed?"); + EM_ASM({promptMsgL($0)}, "Darts needed?"); EM_ASM({setPromptHandler($0)}, "num_darts"); } else if (l2->rem <= 0) { - EM_ASM({promptMsg($0)}, "Bot wins. :("); + EM_ASM({promptMsgL($0)}, "Bot wins. :("); match_over(); } else { - EM_ASM({promptMsg($0)}, "Enter points:"); + EM_ASM({promptMsgL($0)}, "Enter points:"); } } @@ -161,7 +161,7 @@ EMSCRIPTEN_KEEPALIVE void boat_visit() { if (state->l1->rem <= 0 || state->l2->rem <= 0) return; - EM_ASM({promptMsg($0)}, "Bot is throwing…"); + EM_ASM({promptMsgL($0)}, "Bot is throwing…"); struct leg *l = state->l2; comp_visit(l); @@ -220,7 +220,7 @@ EMSCRIPTEN_KEEPALIVE bool user_visit(int points) { EM_ASM({updatePlayerAvg($0, $1)}, P_USER, (double)(l->start-l->rem)/l->n_visits); - EM_ASM({clearMatchLog()}); + EM_ASM({clearVisits()}); draw_match(); if (!is_match_over()) { @@ -243,16 +243,16 @@ EMSCRIPTEN_KEEPALIVE void draw_boat_throwing(int pts, char *str) { int rem = state->l2->n_visits > 1 ? state->l2->visits[state->l2->n_visits-2].rem : state->l2->start; update_boat_rem(rem - pts); - EM_ASM({setPromptText($0)}, buf); - EM_ASM({promptSugg($0)}, str); + EM_ASM({setPromptInput($0)}, buf); + EM_ASM({promptMsgR($0)}, str); } EMSCRIPTEN_KEEPALIVE void end_boat_throwing(int rem, int avg) { update_boat_rem(rem); EM_ASM({updatePlayerAvg($0, $1)}, P_BOAT, avg); - EM_ASM({setPromptText($0)}, ""); - EM_ASM(clearMatchLog()); - EM_ASM({promptSugg($0)}, ""); + EM_ASM({setPromptInput($0)}, ""); + EM_ASM(clearVisits()); + EM_ASM({promptMsgR($0)}, ""); draw_match(); if (!is_match_over()) @@ -269,7 +269,7 @@ EMSCRIPTEN_KEEPALIVE void resp_numdarts(int n_darts) { EM_ASM({updatePlayerAvg($0, $1)}, P_USER, ((double)l->start / (((l->n_visits - 1) * 3) + n_darts)) * 3); - EM_ASM({promptMsg($0)}, "You win! :)"); + EM_ASM({promptMsgL($0)}, "You win! :)"); match_over(); EM_ASM({setPromptHandler($0)}, "init"); } @@ -307,18 +307,18 @@ EMSCRIPTEN_KEEPALIVE void start_match() { update_user_rem(state->l1->rem); update_boat_rem(state->l2->rem); - EM_ASM(clearMatchLog()); + EM_ASM(clearVisits()); set_user_active(); - EM_ASM({promptSugg($0)}, ""); + EM_ASM({promptMsgR($0)}, ""); draw_match(); } -EMSCRIPTEN_KEEPALIVE void change_stdev(float hstdev, float vstdev) { +EMSCRIPTEN_KEEPALIVE void set_stdev(float hstdev, float vstdev) { horizontal_stdev = hstdev; vertical_stdev = vstdev; } -EMSCRIPTEN_KEEPALIVE void change_delay(int delay) { +EMSCRIPTEN_KEEPALIVE void set_delay(int delay) { delay_ms = delay; } 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(); +}); diff --git a/web/static/index.html b/web/static/index.html index 1db6537..fdfa0ee 100644 --- a/web/static/index.html +++ b/web/static/index.html @@ -12,13 +12,13 @@
oi!
-
+
-
+
@@ -27,9 +27,9 @@
-
-
-
+
+
+
1
2
@@ -50,7 +50,7 @@
stdev
?
-
+