From 2886add52aeed172289f3bddd995eda0b0c92a67 Mon Sep 17 00:00:00 2001 From: David Vazgenovich Shakaryan Date: Thu, 19 May 2022 15:24:06 -0700 Subject: web: display darts for comp as player 1 --- web/static/dartboat.js | 9 +++++++++ web/static/style.css | 52 ++++++++++++++++++++++++++++++++++++-------------- web/static/sw.js | 2 +- web/web_dom.c | 5 +++++ web/web_dom.h | 1 + web/web_scoreboard.c | 29 ++++++++++++++++++++-------- 6 files changed, 75 insertions(+), 23 deletions(-) diff --git a/web/static/dartboat.js b/web/static/dartboat.js index a46ffc9..54cb29b 100644 --- a/web/static/dartboat.js +++ b/web/static/dartboat.js @@ -55,6 +55,15 @@ function elemScrollToBottom(sel) { e.scrollTop = e.scrollHeight; } +function elemScrollToCenterChild(sel, sel_child) { + const e = $(UTF8ToString(sel)); + const child = $(UTF8ToString(sel_child)); + if (!child) return; + + e.scrollLeft = child.offsetLeft + child.offsetWidth/2 - + e.offsetLeft - e.offsetWidth/2; +} + function targetAppendElemv(target, elemc, elemv, off_type, off_ns, off_name, off_content, off_n_attrs, off_attr_names, off_attr_vals, diff --git a/web/static/style.css b/web/static/style.css index 6256709..5131eab 100644 --- a/web/static/style.css +++ b/web/static/style.css @@ -539,19 +539,30 @@ body { padding: 0.4rem; display: grid; - grid-template-columns: repeat(5, min(calc(calc(100% - 2ch) / 5), 5ch)) min-content; + grid-template-columns: + min-content + repeat(5, min(calc(calc(100% - 2ch) / 5), 5ch)) + min-content; grid-auto-rows: min-content; row-gap: 0.2em; } #visits > * { - min-width: 0; - display: flex; align-items: center; justify-content: center; } +#visits .visit-p1-name { grid-column: 2 / span 2; } +#visits .visit-p2-name { grid-column: 5 / span 2; } +#visits .visit-p1-darts { grid-column: 1; } +#visits .visit-p1-pts { grid-column: 2; } +#visits .visit-p1-rem { grid-column: 3; } +#visits .visit-n { grid-column: 4; } +#visits .visit-p2-rem { grid-column: 5; } +#visits .visit-p2-pts { grid-column: 6; } +#visits .visit-p2-darts { grid-column: 7; } + #visits .p0 { color: #e00018; } #visits .p20 { color: #e06000; } #visits .p40 { color: #e09800; } @@ -561,14 +572,7 @@ body { #visits .p180 { color: #20e018; font-weight: bold; } #visits .throws-first { color: #999; } #visits .throws-first:before { content: '\f151'; font-size: 0.6em; } -#visits .visit-p1-name { grid-column: 1 / span 2; } -#visits .visit-p2-name { grid-column: 4 / span 2; } -#visits .visit-p1-pts { grid-column: 1; } -#visits .visit-p1-rem { grid-column: 2; } -#visits .visit-n { grid-column: 3; } -#visits .visit-p2-rem { grid-column: 4; } -#visits .visit-p2-pts { grid-column: 5; } -#visits .visit-p2-darts { grid-column: 6; } + #visits .visit-p1-name, #visits .visit-p2-name { color: #555; border-bottom: 2px solid #555; @@ -576,29 +580,49 @@ body { #visits .visit-n { color: #555; } -#visits .visit-p2-darts { +#visits .visit-p1-darts, #visits .visit-p2-darts { color: #555; font-size: 0.75em; - justify-content: left; white-space: nowrap; } +#visits .visit-p1-darts { + justify-content: right; +} +#visits .visit-p1-darts:not(:empty):after { + content: '\2003'; +} +#visits .visit-p2-darts { + justify-content: left; +} #visits .visit-p2-darts:not(:empty):before { content: '\2003'; } @media (max-aspect-ratio: 8/5) { #visits { - grid-template-columns: 1ch 1fr repeat(5, min(calc(calc(100% - 2ch) / 5), 5ch)) 1fr 1ch; + grid-template-columns: + min-content + calc(calc(100% - 27ch) / 2) + repeat(5, min(calc(calc(100% - 2ch) / 5), 5ch)) + calc(calc(100% - 27ch) / 2) + min-content; } #visits .visit-p1-name, #visits .visit-p2-name { display: none; } + #visits .visit-p1-spacer { grid-column: 1; width: 1ch } + #visits .visit-p2-spacer { grid-column: 9; width: 1ch } + #visits .visit-p1-darts { grid-column: 1; } #visits .visit-p1-pts { grid-column: 3; } #visits .visit-p1-rem { grid-column: 4; } #visits .visit-n { grid-column: 5; } #visits .visit-p2-rem { grid-column: 6; } #visits .visit-p2-pts { grid-column: 7; } #visits .visit-p2-darts { grid-column: 9; } + + #visits .visit-p1-darts:not(:empty):after { + content: '\2003…'; + } #visits .visit-p2-darts:not(:empty):before { content: '…\2003'; } diff --git a/web/static/sw.js b/web/static/sw.js index b9a92e6..4a207b8 100644 --- a/web/static/sw.js +++ b/web/static/sw.js @@ -1,5 +1,5 @@ const CACHE_PREFIX = 'dartboat-' -const CACHE_VERSION = '18'; +const CACHE_VERSION = '19'; const CACHE_NAME = `${CACHE_PREFIX}${CACHE_VERSION}`; const CACHE_FILES = [ diff --git a/web/web_dom.c b/web/web_dom.c index 07602f8..162684a 100644 --- a/web/web_dom.c +++ b/web/web_dom.c @@ -149,6 +149,11 @@ inline void dom_scroll_to_bottom(char *sel) EM_ASM({elemScrollToBottom($0)}, sel); } +inline void dom_scroll_to_center_child(char *sel, char *sel_child) +{ + EM_ASM({elemScrollToCenterChild($0, $1)}, sel, sel_child); +} + inline void dom_enable_exit_dialogue(bool enable) { EM_ASM({enableExitDialogue($0)}, enable); diff --git a/web/web_dom.h b/web/web_dom.h index 12d173d..8813d1a 100644 --- a/web/web_dom.h +++ b/web/web_dom.h @@ -31,6 +31,7 @@ void dom_toggle_class(char *sel, char *class); void dom_set_uniq_class(char *sel, char *class, char *sel_set); void dom_scroll_to_bottom(char *sel); +void dom_scroll_to_center_child(char *sel, char *sel_child); void dom_enable_exit_dialogue(bool enable); diff --git a/web/web_scoreboard.c b/web/web_scoreboard.c index d1bfa7e..fa1a672 100644 --- a/web/web_scoreboard.c +++ b/web/web_scoreboard.c @@ -167,6 +167,17 @@ static const char *points_class(int pts) "p0"; } +static void buf_darts(char *buf, size_t size, struct visit *v) +{ + char *ptr = buf; + for (int j = 0; j < v->n_darts; ++j) { + char *n = segment_name(v->darts[j]); + ptr += snprintf(ptr, size - (ptr - buf), + j == 0 ? "%s" : "-%s", n); + free(n); + } +} + void draw_visits() { dom_set_content("#visits", NULL); @@ -174,13 +185,15 @@ void draw_visits() int n_visits = state->legs[0]->n_visits > state->legs[1]->n_visits ? state->legs[0]->n_visits : state->legs[1]->n_visits; - struct dom_elem **elemv = malloc(6 * (n_visits + 1) * sizeof(*elemv)); + struct dom_elem **elemv = malloc(7 * (n_visits + 1) * sizeof(*elemv)); int elemc = 0; + elemv[elemc++] = create_div("", "visit-p1-spacer"); elemv[elemc++] = create_div(state->legs[0]->name, "visit-p1-name"); if (match_num_players() != 1) elemv[elemc++] = create_div(state->legs[1]->name, "visit-p2-name"); + elemv[elemc++] = create_div("", "visit-p2-spacer"); char buf[32], buf2[32]; snprintf(buf, sizeof(buf), "%d", state->legs[0]->start); @@ -204,6 +217,11 @@ void draw_visits() goto p2; v = state->legs[0]->visits + i; + if (v->n_darts) { + buf_darts(buf, sizeof(buf), v); + elemv[elemc++] = create_div(buf, "visit-p1-darts"); + } + snprintf(buf, sizeof(buf), "%d", v->points); snprintf(buf2, sizeof(buf2), "%s %s", "visit-p1-pts", points_class(v->points)); @@ -229,13 +247,7 @@ p2: elemv[elemc++] = create_div(buf, buf2); if (v->n_darts) { - char *ptr = buf; - for (int j = 0; j < v->n_darts; ++j) { - char *n = segment_name(v->darts[j]); - ptr += snprintf(ptr, sizeof(buf) - (ptr - buf), - j == 0 ? "%s" : "-%s", n); - free(n); - } + buf_darts(buf, sizeof(buf), v); elemv[elemc++] = create_div(buf, "visit-p2-darts"); } } @@ -246,4 +258,5 @@ p2: free(elemv); dom_scroll_to_bottom("#visits"); + dom_scroll_to_center_child("#visits", ".visit-n"); } -- cgit v1.2.3-70-g09d2