From 0b02f05cdfa7ad6967557fa8228248ffabc515a2 Mon Sep 17 00:00:00 2001 From: David Vazgenovich Shakaryan Date: Thu, 21 Apr 2022 11:10:22 -0700 Subject: redesign web interface; minor bug fixes --- web/static/dartboat.js | 85 ++++++++++++++++++++++++++++---------------------- 1 file changed, 47 insertions(+), 38 deletions(-) (limited to 'web/static/dartboat.js') diff --git a/web/static/dartboat.js b/web/static/dartboat.js index 5eb3283..015c541 100644 --- a/web/static/dartboat.js +++ b/web/static/dartboat.js @@ -17,20 +17,20 @@ function initMatch() { updateDelay(delay_ms); match_state = stcall('start_match', 'number'); match_active = true; - document.getElementById('user-rem').className = 'active'; + document.getElementById('user-state').className = 'active'; document.getElementById('match').textContent = ''; - promptSuggStr(""); + promptSuggStr(''); stcall('draw_match'); } function oi() { - document.getElementById('oi').textContent = 'oi!'; + document.getElementById('oi').style.visibility = 'visible'; oi_timeout = setTimeout(function() { oi_timeout = null; clearOi() }, 3000); } function clearOi() { - document.getElementById('oi').textContent = ''; + document.getElementById('oi').style.visibility = 'hidden'; if (oi_timeout) { clearTimeout(oi_timeout); @@ -39,11 +39,13 @@ function clearOi() { } function updateUserRem(rem) { - user_rem = document.getElementById('user-rem').textContent = rem; + user_rem = rem; + updateUserStateRem(rem); } function updateBoatRem(rem) { - boat_rem = document.getElementById('boat-rem').textContent = rem; + boat_rem = rem; + updateBoatStateRem(rem); } function promptMsg(p) { @@ -54,32 +56,39 @@ function promptMsgStr(str) { document.getElementById('prompt-msg').textContent = str; } -function promptSugg(p) { - document.getElementById('prompt-sugg').textContent = UTF8ToString(p); +function userSugg(p) { + document.getElementById('user-sugg').textContent = UTF8ToString(p); +} + +function boatSugg(p) { + document.getElementById('boat-sugg').textContent = UTF8ToString(p); } function promptSuggStr(str) { document.getElementById('prompt-sugg').textContent = str; } +function updateUserStateRem(rem) { + let elem = document.getElementById('user-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'); + elem.textContent = rem < 0 || rem == 1 ? 'BUST' : rem; + Module.ccall('get_suggested', null, ['number', 'number'], [rem, 2]); +} + function promptUpdateRem() { let elem = document.getElementById('user-rem'); let pts = document.getElementById('prompt').textContent; - if (pts) { - let nrem = user_rem - pts; - let nrem_str = nrem < 0 || nrem == 1 ? "BUST" : nrem; - elem.textContent = `${user_rem} » ${nrem_str}`; - } else { - elem.textContent = user_rem; - } + + updateUserStateRem(pts ? user_rem - pts : user_rem); } function boatTempRem(pts, str) { - let elem = document.getElementById('boat-rem'); - let nrem = boat_rem - pts; - let nrem_str = nrem < 0 || nrem == 1 ? "BUST" : nrem; - elem.textContent = `${nrem_str} « ${boat_rem}`; - + updateBoatStateRem(boat_rem - pts); document.getElementById('prompt').textContent = pts; promptSuggStr(str); } @@ -113,19 +122,19 @@ function promptBackspace() { } function setBoatActive() { - document.getElementById('user-rem').className = ''; - document.getElementById('boat-rem').className = 'active'; - promptMsgStr("Bot is throwing…"); + document.getElementById('user-state').className = ''; + document.getElementById('boat-state').className = 'active'; + promptMsgStr('Bot is throwing…'); prompt_disable = true; } function setUserActive() { - document.getElementById('user-rem').className = 'active'; - document.getElementById('boat-rem').className = ''; + document.getElementById('user-state').className = 'active'; + document.getElementById('boat-state').className = ''; prompt_disable = false; } -function promptSubmit() { +function promptSubmit(remaining) { clearOi(); if (prompt_disable) return; if (!match_active) { @@ -138,6 +147,9 @@ function promptSubmit() { if (!p_user) return; promptClear(); + if (remaining) + p_user = user_rem - p_user; + if (!stcall('user_visit', 'number', ['number'], [p_user])) { oi(); return; @@ -165,10 +177,6 @@ function boatVisitRes(rem, n, p1, p2, p3, ptr1, ptr2, ptr3) { stcall('draw_match'); setUserActive(); } else { - // backup to restore after bot is done - let user_sugg = document.getElementById('prompt-sugg').textContent; - promptSuggStr(''); - setTimeout(function() { boatTempRem(p1, s1); }, delay_ms); if (n > 1) { @@ -183,8 +191,8 @@ function boatVisitRes(rem, n, p1, p2, p3, ptr1, ptr2, ptr3) { updateBoatRem(rem); document.getElementById('prompt').textContent = ''; document.getElementById('match').textContent = ''; - promptSuggStr(user_sugg); stcall('draw_match'); + promptSuggStr(''); setUserActive(); }, delay_ms * (n + 1)); } @@ -192,8 +200,8 @@ function boatVisitRes(rem, n, p1, p2, p3, ptr1, ptr2, ptr3) { function matchOver() { match_active = false; - promptSuggStr("Press OK to play again."); - document.getElementById('user-rem').className = ''; + promptSuggStr('Press OK to play again.'); + document.getElementById('user-state').className = ''; } function drawVisitNames(n1, n2) { @@ -209,16 +217,15 @@ function drawVisitNames(n1, n2) { function drawVisit(visit_no, u_pts, u_rem, b_pts, b_rem, b_darts) { let elem = document.getElementById('match'); - for (let [i, v] of [visit_no, u_pts, u_rem, b_rem, b_pts, b_darts].entries()) { + for (let [i, v] of [u_pts, u_rem, visit_no, b_rem, b_pts, b_darts].entries()) { let div = document.createElement('div'); let vv = div.textContent = UTF8ToString(v); - if (i == 0) { - div.className = 'visit-no'; - } else if (i == 1 || i == 4) { + if (i == 0 || i == 4) { div.className = `p${POINT_CLASSES.find(x => x <= vv)}`; } else if (i == 5) { - div.className = 'darts'; + if (vv) div.textContent = `… ${vv}`; } + div.className += ` visit-col${i+1}`; elem.append(div); } @@ -252,6 +259,8 @@ function processKey(data) { promptSubmit(); else if (key == 'Backspace') promptBackspace(); + else if (key == 'r') + promptSubmit(true); } function modal(id) { -- cgit v1.2.3-70-g09d2