summaryrefslogtreecommitdiff
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/dartboat_wasm.c31
-rw-r--r--web/static/dartboat.js30
-rw-r--r--web/static/index.html26
-rw-r--r--web/static/style.css35
4 files changed, 90 insertions, 32 deletions
diff --git a/web/dartboat_wasm.c b/web/dartboat_wasm.c
index 4eaa6ce..b2c306c 100644
--- a/web/dartboat_wasm.c
+++ b/web/dartboat_wasm.c
@@ -63,6 +63,9 @@ EMSCRIPTEN_KEEPALIVE bool user_visit(struct match_state *state, int points) {
v->rem = l->rem;
EM_ASM({updateUserRem($0)}, l->rem);
+ if (v->rem > 0)
+ EM_ASM({updateUserAvg($0)}, (double)(l->start-l->rem)/l->n_visits);
+
return true;
}
@@ -85,11 +88,17 @@ EMSCRIPTEN_KEEPALIVE void boat_visit(struct match_state *state) {
*s2 = v->n_darts > 1 ? segment_name(v->darts[1]) : NULL,
*s3 = v->n_darts > 2 ? segment_name(v->darts[2]) : NULL;
- EM_ASM({boatVisitRes($0, $1, $2, $3, $4, $5, $6, $7)},
+ double avg;
+ if (v->rem > 0)
+ avg = (double)(l->start - l->rem) / l->n_visits;
+ else
+ avg = ((double)l->start / (((l->n_visits - 1) * 3) + v->n_darts)) * 3;
+
+ EM_ASM({boatVisitRes($0, $1, $2, $3, $4, $5, $6, $7, $8)},
l->rem, v->n_darts, segment_points(v->darts[0]),
v->n_darts > 1 ? segment_points(v->darts[1]) : 0,
v->n_darts > 2 ? segment_points(v->darts[2]) : 0,
- s1, s2, s3);
+ s1, s2, s3, avg);
free(s1);
free(s2);
@@ -138,15 +147,29 @@ EMSCRIPTEN_KEEPALIVE void draw_match(struct match_state *state) {
}
if (l1->rem <= 0) {
- EM_ASM({promptMsg($0)}, "You win! :)");
- EM_ASM(matchOver());
+ EM_ASM(promptNumDarts());
+ //EM_ASM({promptMsg($0)}, "You win! :)");
+ //EM_ASM(matchOver());
} else if (l2->rem <= 0) {
EM_ASM({promptMsg($0)}, "Bot wins. :(");
EM_ASM(matchOver());
} else {
EM_ASM({promptMsg($0)}, "Enter points:");
}
+}
+
+EMSCRIPTEN_KEEPALIVE int resp_numdarts(struct match_state *state, int n_darts) {
+ if (n_darts < 1 || n_darts > 4)
+ return 0;
+
+ struct leg *l = state->l1;
+
+ EM_ASM({updateUserAvg($0)},
+ ((double)l->start / (((l->n_visits - 1) * 3) + n_darts)) * 3);
+ EM_ASM({promptMsg($0)}, "You win! :)");
+ EM_ASM(matchOver());
+ return 1;
}
void init_boat() {
diff --git a/web/static/dartboat.js b/web/static/dartboat.js
index 015c541..c1a197a 100644
--- a/web/static/dartboat.js
+++ b/web/static/dartboat.js
@@ -1,5 +1,6 @@
let match_active = false;
let prompt_disable = false;
+let prompt_num_darts = false;
let match_state, user_rem, boat_rem;
let oi_timeout;
let delay_ms = 1000;
@@ -80,6 +81,14 @@ function updateBoatStateRem(rem) {
Module.ccall('get_suggested', null, ['number', 'number'], [rem, 2]);
}
+function updateUserAvg(avg) {
+ document.getElementById('user-avg').textContent = avg.toFixed(2);
+}
+
+function updateBoatAvg(avg) {
+ document.getElementById('boat-avg').textContent = avg.toFixed(2);
+}
+
function promptUpdateRem() {
let elem = document.getElementById('user-rem');
let pts = document.getElementById('prompt').textContent;
@@ -100,7 +109,8 @@ function promptAppend(val) {
let elem = document.getElementById('prompt');
if (elem.textContent.length < 3) {
elem.textContent += val;
- promptUpdateRem();
+ if (!prompt_num_darts)
+ promptUpdateRem();
}
}
@@ -121,6 +131,11 @@ function promptBackspace() {
promptUpdateRem();
}
+function promptNumDarts() {
+ promptMsgStr('Darts needed?');
+ prompt_num_darts = true;
+}
+
function setBoatActive() {
document.getElementById('user-state').className = '';
document.getElementById('boat-state').className = 'active';
@@ -147,6 +162,15 @@ function promptSubmit(remaining) {
if (!p_user) return;
promptClear();
+ if (prompt_num_darts) {
+ if (!stcall('resp_numdarts', null, ['number'], [p_user])) {
+ oi();
+ return;
+ }
+ prompt_num_darts = false;
+ return;
+ }
+
if (remaining)
p_user = user_rem - p_user;
@@ -165,7 +189,7 @@ function promptSubmit(remaining) {
}
}
-function boatVisitRes(rem, n, p1, p2, p3, ptr1, ptr2, ptr3) {
+function boatVisitRes(rem, n, p1, p2, p3, ptr1, ptr2, ptr3, avg) {
// cannot convert in timeout func because strings are freed in c func
let s1 = UTF8ToString(ptr1);
let s2 = UTF8ToString(ptr2);
@@ -173,6 +197,7 @@ function boatVisitRes(rem, n, p1, p2, p3, ptr1, ptr2, ptr3) {
if (delay_ms == 0) {
updateBoatRem(rem);
+ updateBoatAvg(avg);
document.getElementById('match').textContent = '';
stcall('draw_match');
setUserActive();
@@ -189,6 +214,7 @@ function boatVisitRes(rem, n, p1, p2, p3, ptr1, ptr2, ptr3) {
setTimeout(function() {
updateBoatRem(rem);
+ updateBoatAvg(avg);
document.getElementById('prompt').textContent = '';
document.getElementById('match').textContent = '';
stcall('draw_match');
diff --git a/web/static/index.html b/web/static/index.html
index a5863ca..7f3e5fc 100644
--- a/web/static/index.html
+++ b/web/static/index.html
@@ -10,19 +10,21 @@
</head>
<body>
<div id="main">
- <div id="rem-bar">
- <div id="oi">oi!</div>
- <div id="user-state">
- <div id="user-name">User</div>
- <div id="user-rem"></div>
- <div id="user-sugg"></div>
- </div>
- <div id="boat-state">
- <div id="boat-name">Bot</div>
- <div id="boat-rem"></div>
- <div id="boat-sugg"></div>
- </div>
+ <div id="rem-bar">
+ <div id="oi">oi!</div>
+ <div id="user-state">
+ <div id="user-name">User</div>
+ <div id="user-rem"></div>
+ <div id="user-sugg"></div>
+ <div id="user-avg"></div>
</div>
+ <div id="boat-state">
+ <div id="boat-name">Bot</div>
+ <div id="boat-rem"></div>
+ <div id="boat-sugg"></div>
+ <div id="boat-avg"></div>
+ </div>
+ </div>
<div id="keypad">
<div id="prompt-container">
<div id="prompt-msg"></div>
diff --git a/web/static/style.css b/web/static/style.css
index 5287cfc..e099f86 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -2,8 +2,8 @@
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400;0,700;1,400&display=swap');
body {
- color: #ddd;
- background-color: #000;
+ color: #eee;
+ background-color: #111;
font-family: 'Lato', sans-serif;
user-select: none;
@@ -39,7 +39,7 @@ div#keypad {
div#oi {
visibility: hidden;
- background-color: #1a1a1a;
+ background-color: #6c0d0d;
font-size: 2em;
height: 1.2em;
width: 3ch;
@@ -79,7 +79,7 @@ div#user-state, div#boat-state {
}
div#user-state.active, div#boat-state.active {
- background-color: #240;
+ background-color: #2a390a;
}
div#user-rem, div#boat-rem {
@@ -87,10 +87,6 @@ div#user-rem, div#boat-rem {
font-weight: bold;
}
-div#boat-rem {
- justify-content: right;
-}
-
div#user-name, div#boat-name {
color: #aaa;
}
@@ -104,6 +100,16 @@ div#user-sugg:after, div#boat-sugg:after {
content: '\200b';
}
+div#user-avg, div#boat-avg {
+ font-size: 0.8em;
+ align-self: left;
+ width: 100%;
+}
+
+div#user-avg:before, div#boat-avg:before {
+ content: 'avg: ';
+}
+
div#prompt-container {
grid-column: 1 / span 3;
@@ -153,13 +159,13 @@ div.key {
@media (hover: hover) and (pointer: fine) {
div.key:hover {
- background-color: #240;
+ background-color: #2a390a;
}
}
div.key:active {
color: #fff;
- background-color: #360;
+ background-color: #3b500e;
}
div.key.num {
@@ -235,7 +241,7 @@ div#settings-bar div.help-button {
div#settings-bar input:focus {
color: #fff;
background-color: #6e41b8;
- outline: #5a0 solid 3px;
+ outline: #7eab1e solid 2px;
}
div#settings-bar div.help-button:active {
@@ -299,12 +305,13 @@ div#match .visit-col6 { color: #888; justify-content: left; font-family: monospa
background-color: #222;
font-size: 1.4em;
font-family: 'Source Serif Pro', serif;
+ user-select: text;
width: calc(min(40em, 90vw) - 4em);
max-height: calc(calc(100vh - 10vw) - 4em);
margin: 5vw auto;
padding: 2em;
- outline: #5a0 solid 3px;
+ outline: #7eab1e solid 2px;
overflow: scroll;
}
@@ -323,11 +330,11 @@ div#match .visit-col6 { color: #888; justify-content: left; font-family: monospa
}
a {
- color: #5a0;
+ color: #7eab1e;
}
a:hover {
- color: #7d0;
+ color: #a8e428;
}
@media (max-aspect-ratio: 9/20) {
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-25 14:55:16 +0000