From bd54e83d6e21f9eaab830095663a7ddad4c70c5c Mon Sep 17 00:00:00 2001 From: David Vazgenovich Shakaryan Date: Fri, 22 Apr 2022 14:15:24 -0700 Subject: more web ui refactoring --- web/static/dartboat.js | 208 ++++++++++++++++++++++++------------------------- web/static/index.html | 24 +++--- web/static/style.css | 16 ++-- 3 files changed, 124 insertions(+), 124 deletions(-) (limited to 'web/static') diff --git a/web/static/dartboat.js b/web/static/dartboat.js index 662fd3f..292c50d 100644 --- a/web/static/dartboat.js +++ b/web/static/dartboat.js @@ -1,92 +1,85 @@ -let user_rem; -let oi_timeout; -let prompt_handler; - -const POINT_CLASSES = [180, 140, 100, 60, 40, 20, 1, 0]; - -let prompt_handler_visit = { - append(val) { - let elem = document.getElementById('prompt'); - if (elem.textContent.length < 3) { - elem.textContent += val; - promptUpdateRem(); - } - }, - - backspace() { - let elem = document.getElementById('prompt'); - elem.textContent = elem.textContent.slice(0, -1); - promptUpdateRem(); - }, - - clear() { - document.getElementById('prompt').textContent = ''; - promptUpdateRem(); - }, - - submit(pts_is_rem) { - let elem = document.getElementById('prompt'); - let pts = elem.textContent; - if (!pts) return; - promptClear(); - - if (pts_is_rem) - pts = user_rem - pts; - - Module.ccall('user_visit', 'number', ['number'], [pts]); - }, - - submit_rem() { - this.submit(true); - } +function _promptGet() { + return document.getElementById('prompt').textContent; } -let prompt_handler_num_darts = { - append(val) { - let elem = document.getElementById('prompt'); - if (elem.textContent.length < 3) - elem.textContent += val; - }, - - backspace() { - let elem = document.getElementById('prompt'); - elem.textContent = elem.textContent.slice(0, -1); - }, - - clear() { - document.getElementById('prompt').textContent = ''; - }, - - submit() { - let elem = document.getElementById('prompt'); - let val = elem.textContent; - if (!val) return; - promptClear(); - - Module.ccall('resp_numdarts', null, ['number'], [val]); - } +function _promptGetAndClear() { + let val = _promptGet(); + promptClear(); + return val; } -let prompt_handler_init = { - submit() { - initMatch(); - } +function _promptDeleteLast() { + let elem = document.getElementById('prompt'); + elem.textContent = elem.textContent.slice(0, -1); } -function setPromptHandlerVisit() { - prompt_handler = prompt_handler_visit; +function _promptClear() { + document.getElementById('prompt').textContent = ''; } -function setPromptHandlerInit() { - prompt_handler = prompt_handler_init; -} +let prompt_handler; +let prompt_handlers = { + visit: { + append(val) { + let elem = document.getElementById('prompt'); + if (elem.textContent.length < 3) { + elem.textContent += val; + promptUpdateRem(); + } + }, + + backspace() { + _promptDeleteLast(); + promptUpdateRem(); + }, -function setPromptHandlerNumDarts() { - prompt_handler = prompt_handler_num_darts; + clear() { + _promptClear(); + promptUpdateRem(); + }, + + submit() { + let pts = _promptGetAndClear(); + if (pts) + Module.ccall('user_visit', 'number', ['number'], [pts]); + }, + + submit_rem() { + let pts = _promptGetAndClear(); + if (pts) + Module.ccall('user_visit', 'number', ['number'], [user_rem - pts]); + } + }, + num_darts: { + append(val) { + let elem = document.getElementById('prompt'); + if (elem.textContent.length < 3) + elem.textContent += val; + }, + + backspace() { + _promptDeleteLast(); + }, + + clear() { + _promptClear(); + }, + + submit() { + let n = _promptGetAndClear(); + if (n) + Module.ccall('resp_numdarts', null, ['number'], [n]); + } + }, + init: { + submit() { + Module.ccall('start_match'); + } + } } -function setPromptHandlerNull() { - prompt_handler = null; +function setPromptHandler(ptr) { + prompt_handler = prompt_handlers[UTF8ToString(ptr)]; } function promptAppend(...args) { @@ -118,10 +111,7 @@ function clearMatchLog() { document.getElementById('match').textContent = ''; } -function initMatch() { - Module.ccall('start_match'); -} - +let oi_timeout; function oi() { document.getElementById('oi').style.visibility = 'visible'; @@ -137,37 +127,50 @@ function clearOi() { } } +let user_rem; function updateUserRem(rem) { user_rem = rem; updateUserStateRem(rem); } function updateUserStateRem(rem) { - let elem = document.getElementById('user-rem'); + let elem = document.getElementById('p1-rem'); elem.textContent = rem < 0 || rem == 1 ? 'BUST' : rem; Module.ccall('get_suggested', null, ['number', 'number'], [rem, 1]); } function updateBoatStateRem(rem) { - let elem = document.getElementById('boat-rem'); + let elem = document.getElementById('p2-rem'); elem.textContent = rem < 0 || rem == 1 ? 'BUST' : rem; Module.ccall('get_suggested', null, ['number', 'number'], [rem, 2]); } +function updateUserName(p) { + document.getElementById('p1-name').textContent = UTF8ToString(p); +} + +function updateBoatName(p) { + document.getElementById('p2-name').textContent = UTF8ToString(p); +} + function userSugg(p) { - document.getElementById('user-sugg').textContent = UTF8ToString(p); + document.getElementById('p1-sugg').textContent = UTF8ToString(p); } function boatSugg(p) { - document.getElementById('boat-sugg').textContent = UTF8ToString(p); + document.getElementById('p2-sugg').textContent = UTF8ToString(p); } function updateUserAvg(avg) { - document.getElementById('user-avg').textContent = avg.toFixed(2); + document.getElementById('p1-avg').textContent = avg.toFixed(2); } function updateBoatAvg(avg) { - document.getElementById('boat-avg').textContent = avg.toFixed(2); + document.getElementById('p2-avg').textContent = avg.toFixed(2); +} + +function setPromptText(ptr) { + document.getElementById('prompt').textContent = UTF8ToString(ptr); } function promptMsg(p) { @@ -179,29 +182,25 @@ function promptSugg(p) { } function promptUpdateRem() { - let elem = document.getElementById('user-rem'); - let pts = document.getElementById('prompt').textContent; + let elem = document.getElementById('p1-rem'); + let pts = _promptGet(); updateUserStateRem(pts ? user_rem - pts : user_rem); } -function setBoatActive() { - document.getElementById('user-state').classList.remove('active'); - document.getElementById('boat-state').classList.add('active'); -} - function setUserActive() { - document.getElementById('boat-state').classList.remove('active'); - document.getElementById('user-state').classList.add('active'); + document.getElementById('p2-state').classList.remove('active'); + document.getElementById('p1-state').classList.add('active'); } -function setNoOneActive() { - document.getElementById('user-state').classList.remove('active'); - document.getElementById('boat-state').classList.remove('active'); +function setBoatActive() { + document.getElementById('p1-state').classList.remove('active'); + document.getElementById('p2-state').classList.add('active'); } -function setPromptText(ptr) { - document.getElementById('prompt').textContent = UTF8ToString(ptr); +function setNoneActive() { + document.getElementById('p1-state').classList.remove('active'); + document.getElementById('p2-state').classList.remove('active'); } function scheduleBoatThrowing(pts, ptr, delay_ms) { @@ -220,6 +219,7 @@ function scheduleEndBoatThrowing(rem, avg, delay_ms) { delay_ms); } +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'); @@ -238,7 +238,7 @@ function drawVisit(visit_no, u_pts, u_rem, b_pts, b_rem, b_darts) { elem.scrollTop = elem.scrollHeight; } -function stdevChanged(val) { +function setStdev(val) { Module.ccall('change_stdev', null, ['number', 'number'], [val, val]); } @@ -246,7 +246,7 @@ function updateStdev(val) { document.getElementById('stdev').value = val; } -function delayChanged(val) { +function setDelay(val) { Module.ccall('change_delay', null, ['number'], [val]); } diff --git a/web/static/index.html b/web/static/index.html index 7f3e5fc..1db6537 100644 --- a/web/static/index.html +++ b/web/static/index.html @@ -12,17 +12,17 @@
oi!
-
-
User
-
-
-
+
+
+
+
+
-
-
Bot
-
-
-
+
+
+
+
+
@@ -46,8 +46,8 @@
dartboat™
-
delay
-
stdev
+
delay
+
stdev
?
diff --git a/web/static/style.css b/web/static/style.css index e099f86..fe686a2 100644 --- a/web/static/style.css +++ b/web/static/style.css @@ -66,7 +66,7 @@ div#rem-bar { grid-template-columns: repeat(2, 1fr); } -div#user-state, div#boat-state { +div#p1-state, div#p2-state { background-color: #222; font-size: 1.5em; @@ -78,35 +78,35 @@ div#user-state, div#boat-state { align-items: center; } -div#user-state.active, div#boat-state.active { +div#p1-state.active, div#p2-state.active { background-color: #2a390a; } -div#user-rem, div#boat-rem { +div#p1-rem, div#p2-rem { font-size: 3em; font-weight: bold; } -div#user-name, div#boat-name { +div#p1-name, div#p2-name { color: #aaa; } -div#user-sugg, div#boat-sugg { +div#p1-sugg, div#p2-sugg { color: #aaa; font-size: 0.8em; } -div#user-sugg:after, div#boat-sugg:after { +div#p1-sugg:after, div#p2-sugg:after { content: '\200b'; } -div#user-avg, div#boat-avg { +div#p1-avg, div#p2-avg { font-size: 0.8em; align-self: left; width: 100%; } -div#user-avg:before, div#boat-avg:before { +div#p1-avg:before, div#p2-avg:before { content: 'avg: '; } -- cgit v1.2.3-70-g09d2