From 3473a93fbb19846453d901505a720c2ccacb08d7 Mon Sep 17 00:00:00 2001
From: David Vazgenovich Shakaryan <dvshakaryan@gmail.com>
Date: Sun, 24 Apr 2022 01:52:28 -0700
Subject: web: minor style updates
---
web/dartboat_wasm.c | 22 +++++++++-------------
web/static/dartboat.js | 12 ++++++++----
web/static/style.css | 26 +++++++++++++++-----------
3 files changed, 32 insertions(+), 28 deletions(-)
diff --git a/web/dartboat_wasm.c b/web/dartboat_wasm.c
index 836c87f..1f81b1c 100644
--- a/web/dartboat_wasm.c
+++ b/web/dartboat_wasm.c
@@ -90,13 +90,16 @@ EMSCRIPTEN_KEEPALIVE void draw_match() {
struct leg *l2 = state->l2;
char visit_no[10], u_pts[10], u_rem[10], b_pts[10], b_rem[10], b_darts[100];
- visit_no[0] = u_pts[0] = u_rem[0] = b_pts[0] = b_rem[0] = b_darts[0] = 0;
+ sprintf(u_rem, "%d", l1->start);
+ sprintf(b_rem, "%d", l2->start);
EM_ASM({drawVisit($0, $1, $2, $3, $4, $5)},
- "0", "", "501", "", "501", "");
+ "0", "", u_rem, "", state->mode == M_P ? "" : b_rem, "");
int n_visits = l1->n_visits > l2->n_visits ? l1->n_visits : l2->n_visits;
for (int i = 0; i < n_visits; ++i) {
+ visit_no[0] = u_pts[0] = u_rem[0] = b_pts[0] = b_rem[0] = b_darts[0] = 0;
+
sprintf(visit_no, "%d", i + 1);
struct visit *v = l1->visits + i;
@@ -117,13 +120,6 @@ EMSCRIPTEN_KEEPALIVE void draw_match() {
EM_ASM({drawVisit($0, $1, $2, $3, $4, $5)},
visit_no, u_pts, u_rem, b_pts, b_rem, b_darts);
-
- visit_no[0] = 0;
- u_pts[0] = 0;
- u_rem[0] = 0;
- b_pts[0] = 0;
- b_rem[0] = 0;
- b_darts[0] = 0;
}
if (l1->rem <= 0) {
@@ -367,6 +363,7 @@ EMSCRIPTEN_KEEPALIVE void free_match() {
EMSCRIPTEN_KEEPALIVE void match_init() {
for (int i = 1; i < 3; ++i) {
+ EM_ASM({hidePlayerInfo($0)}, i);
EM_ASM({updatePlayerName($0, $1)}, i, "");
EM_ASM({updatePlayerRem($0, $1)}, i, "");
EM_ASM({updatePlayerSugg($0, $1)}, i, "");
@@ -397,10 +394,9 @@ EMSCRIPTEN_KEEPALIVE void start_match(int mode) {
state->l1 = leg_init(501, "Player 1");
state->l2 = leg_init(501, "Player 2");
}
- if (mode == M_P)
- EM_ASM(hidePlayer2());
- else
- EM_ASM(unhidePlayer2());
+ EM_ASM({showPlayerInfo($0)}, 1);
+ if (mode != M_P)
+ EM_ASM({showPlayerInfo($0)}, 2);
state->active_p = 1;
state->active_l = state->l1;
diff --git a/web/static/dartboat.js b/web/static/dartboat.js
index 4967f18..35dac17 100644
--- a/web/static/dartboat.js
+++ b/web/static/dartboat.js
@@ -163,12 +163,16 @@ function setPlayerActive(n) {
e.classList[n && e.id == `p${n}-info` ? 'add' : 'remove']('active'));
}
-function hidePlayer2(n) {
- document.getElementById('p2-info').style.visibility = 'hidden';
+function hidePlayerInfo(n) {
+ let elems = document.getElementById(`p${n}-info`).children;
+ for (let i = 0; i < elems.length; ++i)
+ elems[i].style.visibility = 'hidden';
}
-function unhidePlayer2(n) {
- document.getElementById('p2-info').style.removeProperty('visibility');
+function showPlayerInfo(n) {
+ let elems = document.getElementById(`p${n}-info`).children;
+ for (let i = 0; i < elems.length; ++i)
+ elems[i].style.removeProperty('visibility');
}
function updatePlayerRem(n, ptr) {
diff --git a/web/static/style.css b/web/static/style.css
index dc017f6..63d8e3b 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -30,10 +30,13 @@ div#controls {
font-size: clamp(1.5vh, 2vw, 2vh);
+ margin-top: 2px;
+
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: minmax(5em, auto);
grid-auto-rows: 1fr;
+ gap: 2px;
}
div#controls .keypad {
@@ -56,7 +59,7 @@ div#oi {
height: 1.2em;
width: 3ch;
- outline: #1a1a1a solid 4px;
+ outline: #1a1a1a solid 2px;
position: absolute;
left: 50%;
@@ -76,6 +79,8 @@ div#info {
font-size: clamp(1.5vh, 2vw, 2vh);
+ margin: 2px 0;
+
display: grid;
grid-template-columns: repeat(2, 1fr);
}
@@ -84,7 +89,6 @@ div#p1-info, div#p2-info {
background-color: #222;
font-size: 1.5em;
- margin: 2px;
padding: 0.4rem;
flex-direction: column;
@@ -92,6 +96,14 @@ div#p1-info, div#p2-info {
align-items: center;
}
+div#p1-info {
+ margin-right: 1px;
+}
+
+div#p2-info {
+ margin-left: 1px;
+}
+
div#p1-info.active, div#p2-info.active {
background-color: #2a390a;
}
@@ -131,8 +143,6 @@ div#prompt-container {
background-color: #222;
- margin: 2px;
-
display: flex;
align-items: center;
justify-content: center;
@@ -167,8 +177,6 @@ div.key {
background-color: #282828;
font-size: 1.5em;
- margin: 2px;
-
display: flex;
align-items: center;
justify-content: center;
@@ -212,10 +220,8 @@ div.key.ok {
div#settings-bar {
grid-area: settings-bar;
- background-color: #222;
font-size: clamp(1.5vh, 2vw, 2vh);
- margin: 2px;
padding: 0.4rem;
display: flex;
@@ -233,7 +239,7 @@ div#settings-bar div.input.first {
}
div#settings-bar div.input {
- background-color: #333;
+ background-color: #222;
display: flex;
flex-wrap: wrap;
@@ -288,12 +294,10 @@ div#settings-bar div.help-button:active {
div#visits {
grid-area: visits;
- background-color: #222;
font-size: clamp(1.5vh, 2vw, 2vh);
overflow: auto;
scrollbar-gutter: stable both-edges;
- margin: 2px;
padding: 0.4rem;
display: grid;
--
cgit v1.2.3-70-g09d2