From 860fed5d03faa3e88ddd2357803e6b5a440efc8f Mon Sep 17 00:00:00 2001 From: David Vazgenovich Shakaryan Date: Sun, 24 Apr 2022 19:44:43 -0700 Subject: web: enforce double out; hide suggested for bot; ui updates --- web/static/dartboat.js | 98 +++++++++++++++++++++++++------------------------- web/static/index.html | 25 +++++++------ web/static/style.css | 22 ++++++------ 3 files changed, 75 insertions(+), 70 deletions(-) (limited to 'web/static') diff --git a/web/static/dartboat.js b/web/static/dartboat.js index e03151d..f3c5849 100644 --- a/web/static/dartboat.js +++ b/web/static/dartboat.js @@ -29,54 +29,48 @@ function scheduleCCall(f, ms, ...args) { let prompt_handler; let prompt_handlers = { default: { + _get() { + return document.getElementById('prompt-input').textContent; + }, + + _get_and_clear() { + let val = this._get(); + this.clear(); + return val; + }, + + _pre(action) { + clearOi(); + }, + append(val) { let e = document.getElementById('prompt-input'); if (e.textContent.length < 3) { - e.textContent += val; - this._on_change?.(); + let tc = e.textContent += val; + this._on_change?.(tc); } }, backspace() { let e = document.getElementById('prompt-input'); - e.textContent = e.textContent.slice(0, -1); - this._on_change?.(); + let tc = e.textContent = e.textContent.slice(0, -1); + this._on_change?.(tc); }, clear() { - document.getElementById('prompt-input').textContent = ''; - this._on_change?.(); - }, - - pre(action) { - clearOi(); - }, - - _get() { - return document.getElementById('prompt-input').textContent; - }, - - _get_and_clear() { - let val = this._get(); - this.clear(); - return val; + let tc = document.getElementById('prompt-input').textContent = ''; + this._on_change?.(tc); } } } -prompt_handlers.visit = { +prompt_handlers.default_with_undo = { __proto__: prompt_handlers.default, - submit() { - let pts = this._get_and_clear(); - if (pts) - Module.ccall('user_visit', 'number', ['number'], [pts]); - }, - - submit_rem() { - let rem = this._get_and_clear(); - if (rem) - Module.ccall('user_visit_to_rem', 'number', ['number'], [rem]); + _pre(action) { + super._pre(action); + if (action != 'undo') + document.getElementById('key_undo').classList.remove('active'); }, undo() { @@ -85,22 +79,32 @@ prompt_handlers.visit = { if (cl.contains('active')) Module.ccall('user_undo'); cl.toggle('active'); - }, + } +} - pre(action) { - super.pre(action); - if (action != 'undo') - document.getElementById('key_undo').classList.remove('active'); - }, +prompt_handlers.visit = { + __proto__: prompt_handlers.default_with_undo, _on_change(val) { Module.ccall('update_user_rem_from_pts', null, ['number'], [val || this._get()]); + }, + + submit() { + let pts = this._get_and_clear(); + if (pts) + Module.ccall('user_visit', 'number', ['number'], [pts]); + }, + + submit_rem() { + let rem = this._get_and_clear(); + if (rem) + Module.ccall('user_visit_to_rem', 'number', ['number'], [rem]); } }; prompt_handlers.num_darts = { - __proto__: prompt_handlers.default, + __proto__: prompt_handlers.default_with_undo, submit() { let n = this._get_and_clear(); @@ -110,13 +114,10 @@ prompt_handlers.num_darts = { }; prompt_handlers.match_over = { - __proto__: prompt_handlers.default, + __proto__: prompt_handlers.default_with_undo, append() {}, - undo() { prompt_handlers.visit.undo(); }, - pre(action) { prompt_handlers.visit.pre(action); }, - submit() { Module.ccall('match_init'); } @@ -124,6 +125,7 @@ prompt_handlers.match_over = { prompt_handlers.init = { __proto__: prompt_handlers.default, + _keypad: 'init', submit() { let v = this._get_and_clear(); @@ -133,18 +135,18 @@ prompt_handlers.init = { }; function setPromptHandler(ptr) { - let str = UTF8ToString(ptr); - prompt_handler = prompt_handlers[str]; + prompt_handler = prompt_handlers[UTF8ToString(ptr)]; document.getElementById('prompt').classList[ prompt_handler ? 'add' : 'remove']('active'); - document.querySelectorAll('.keypad').forEach(e => e.style.display = 'none'); - document.getElementById(`keypad-${str === 'init' ? 'init' : 'default'}`) - .style.removeProperty('display'); + let keypad_id = `keypad-${prompt_handler?._keypad || 'default'}`; + document.querySelectorAll('.keypad').forEach(e => { + e.style.display = e.id === keypad_id ? '' : 'none'; + }); } function promptHandle(action, ...args) { - prompt_handler?.pre?.(action); + prompt_handler?._pre?.(action); prompt_handler?.[action]?.(...args); } diff --git a/web/static/index.html b/web/static/index.html index f84afa1..5fb11a8 100644 --- a/web/static/index.html +++ b/web/static/index.html @@ -2,9 +2,9 @@ dartboat™ - - - + + + @@ -48,14 +48,14 @@
REMAINING
-
[1] One-player scoreboard
-
[2] Two-player scoreboard
-
[3] Play against bot
+
[1] Play against bot
+
[2] One-player scoreboard
+
[3] Two-player scoreboard
dartboat™
-
delay
+
delay
stdev
?
@@ -63,10 +63,13 @@ diff --git a/web/static/style.css b/web/static/style.css index a4572d8..2a3d60b 100644 --- a/web/static/style.css +++ b/web/static/style.css @@ -104,7 +104,7 @@ div#p2-info { } div#p1-info.active, div#p2-info.active { - background-color: #2d3d0b; + background-color: #304010; } div#p1-rem, div#p2-rem { @@ -187,13 +187,13 @@ div.key { @media (hover: hover) and (pointer: fine) { div.key:hover { - background-color: #32440c; + background-color: #304010; } } div.key:active { color: #fff; - background-color: #3b500e; + background-color: #384810; } div.key.active { @@ -329,17 +329,17 @@ div#visits div { div#visits .visit-col1 { grid-column: 2; } div#visits .visit-col3 { color: #666; grid-column: 4; } -div#visits .p0 { color: #ee0016; } -div#visits .p20 { color: #ee6400; } -div#visits .p40 { color: #ee9600; } -div#visits .p60 { color: #cccc16; } -div#visits .p100 { color: #64cc16; } -div#visits .p140 { color: #64ee16; } -div#visits .p180 { color: #64ee16; font-weight: bold; } +div#visits .p0 { color: #e00018; } +div#visits .p20 { color: #e06000; } +div#visits .p40 { color: #e09800; } +div#visits .p60 { color: #e0e018; } +div#visits .p100 { color: #78c018; } +div#visits .p140 { color: #20e018; } +div#visits .p180 { color: #20e018; font-weight: bold; } div#visits .visit-col6 { color: #666; justify-content: left; font-family: monospace; white-space: pre; } .modal { - background-color: rgba(0, 0, 0, 0.6); + background-color: #000a; width: 100%; height: 100%; -- cgit v1.2.3-70-g09d2