summaryrefslogtreecommitdiff
path: root/web/static
diff options
context:
space:
mode:
Diffstat (limited to 'web/static')
-rw-r--r--web/static/dartboat.js175
-rw-r--r--web/static/index.html12
-rw-r--r--web/static/style.css42
3 files changed, 115 insertions, 114 deletions
diff --git a/web/static/dartboat.js b/web/static/dartboat.js
index a47b845..87c6020 100644
--- a/web/static/dartboat.js
+++ b/web/static/dartboat.js
@@ -1,5 +1,33 @@
+let oi_timeout;
+function oi() {
+ document.getElementById('oi').style.visibility = 'visible';
+
+ oi_timeout = setTimeout(() => { oi_timeout = null; clearOi(); }, 3000);
+}
+
+function clearOi() {
+ document.getElementById('oi').style.visibility = 'hidden';
+
+ if (oi_timeout) {
+ clearTimeout(oi_timeout);
+ oi_timeout = null;
+ }
+}
+
+function scheduleCCall(f, ms, ...args) {
+ let types = [];
+ let vals = [];
+
+ for (let i = 0; i < args.length/2; i++)
+ vals[i] = (types[i] = UTF8ToString(args[i*2])) == 'string' ?
+ UTF8ToString(args[i*2+1]) : args[i*2+1];
+
+ let func = UTF8ToString(f);
+ setTimeout(() => Module.ccall(func, null, types, vals), ms);
+}
+
function _promptGet() {
- return document.getElementById('prompt').textContent;
+ return document.getElementById('prompt-input').textContent;
}
function _promptGetAndClear() {
@@ -9,33 +37,33 @@ function _promptGetAndClear() {
}
function _promptDeleteLast() {
- let elem = document.getElementById('prompt');
- elem.textContent = elem.textContent.slice(0, -1);
+ let e = document.getElementById('prompt-input');
+ e.textContent = e.textContent.slice(0, -1);
}
function _promptClear() {
- document.getElementById('prompt').textContent = '';
+ document.getElementById('prompt-input').textContent = '';
}
let prompt_handler;
let prompt_handlers = {
visit: {
append(val) {
- let elem = document.getElementById('prompt');
- if (elem.textContent.length < 3) {
- elem.textContent += val;
- promptUpdateRem();
+ let e = document.getElementById('prompt-input');
+ if (e.textContent.length < 3) {
+ e.textContent += val;
+ this._update_rem();
}
},
backspace() {
_promptDeleteLast();
- promptUpdateRem();
+ this._update_rem();
},
clear() {
_promptClear();
- promptUpdateRem();
+ this._update_rem();
},
submit() {
@@ -48,13 +76,19 @@ let prompt_handlers = {
let rem = _promptGetAndClear();
if (rem)
Module.ccall('user_visit_to_rem', 'number', ['number'], [rem]);
+ },
+
+ _update_rem(val) {
+ Module.ccall('update_user_rem_from_pts', null,
+ ['number'], [val || _promptGet()]);
}
},
+
num_darts: {
append(val) {
- let elem = document.getElementById('prompt');
- if (elem.textContent.length < 3)
- elem.textContent += val;
+ let e = document.getElementById('prompt-input');
+ if (e.textContent.length < 3)
+ e.textContent += val;
},
backspace() {
@@ -71,6 +105,7 @@ let prompt_handlers = {
Module.ccall('resp_numdarts', null, ['number'], [n]);
}
},
+
init: {
submit() {
Module.ccall('start_match');
@@ -107,29 +142,21 @@ function promptSubmitRem(...args) {
prompt_handler?.submit_rem?.(...args);
}
-function clearMatchLog() {
- document.getElementById('match').textContent = '';
+function setPromptInput(ptr) {
+ document.getElementById('prompt-input').textContent = UTF8ToString(ptr);
}
-let oi_timeout;
-function oi() {
- document.getElementById('oi').style.visibility = 'visible';
-
- oi_timeout = setTimeout(function() { oi_timeout = null; clearOi() }, 3000);
+function promptMsgL(p) {
+ document.getElementById('prompt-msg-l').textContent = UTF8ToString(p);
}
-function clearOi() {
- document.getElementById('oi').style.visibility = 'hidden';
-
- if (oi_timeout) {
- clearTimeout(oi_timeout);
- oi_timeout = null;
- }
+function promptMsgR(p) {
+ document.getElementById('prompt-msg-r').textContent = UTF8ToString(p);
}
function setPlayerActive(n) {
- document.querySelectorAll('[id$=-state]').forEach(e =>
- e.classList[n && e.id == `p${n}-state` ? 'add' : 'remove']('active'));
+ document.querySelectorAll('[id$=-info]').forEach(e =>
+ e.classList[n && e.id == `p${n}-info` ? 'add' : 'remove']('active'));
}
function updatePlayerRem(n, ptr) {
@@ -148,89 +175,63 @@ function updatePlayerAvg(n, avg) {
document.getElementById(`p${n}-avg`).textContent = avg.toFixed(2);
}
-function setPromptText(ptr) {
- document.getElementById('prompt').textContent = UTF8ToString(ptr);
-}
-
-function promptMsg(p) {
- document.getElementById('prompt-msg').textContent = UTF8ToString(p);
-}
-
-function promptSugg(p) {
- document.getElementById('prompt-sugg').textContent = UTF8ToString(p);
-}
-
-function promptUpdateRem() {
- Module.ccall('update_user_rem_from_pts', null, ['number'], [_promptGet()]);
-}
-
-function scheduleCCall(f, ms, ...args) {
- let types = [];
- let vals = [];
-
- for (let i = 0; i < args.length/2; i++)
- vals[i] = (types[i] = UTF8ToString(args[i*2])) == 'string' ?
- UTF8ToString(args[i*2+1]) : args[i*2+1];
-
- let func = UTF8ToString(f);
- setTimeout(function() { Module.ccall(func, null, types, vals) }, ms);
+function clearVisits() {
+ document.getElementById('visits').textContent = '';
}
const POINT_CLASSES = [180, 140, 100, 60, 40, 20, 1, 0];
-function drawVisit(visit_no, u_pts, u_rem, b_pts, b_rem, b_darts) {
- let elem = document.getElementById('match');
+function drawVisit(visit_no, p1_pts, p1_rem, p2_pts, p2_rem, p2_darts) {
+ let e = document.getElementById('visits');
- for (let [i, ptr] of [u_pts, u_rem, visit_no, b_rem, b_pts, b_darts].entries()) {
- let div = document.createElement('div');
+ for (let [i, ptr] of [
+ p1_pts, p1_rem, visit_no, p2_rem, p2_pts, p2_darts].entries()) {
+
+ let div = e.appendChild(document.createElement('div'));
let v = div.textContent = UTF8ToString(ptr);
+ div.classList.add(`visit-col${i+1}`);
if (i == 0 || i == 4)
- div.className = `p${POINT_CLASSES.find(x => x <= v)}`;
+ div.classList.add(`p${POINT_CLASSES.find(x => x <= v)}`);
else if (i == 5 && v)
div.textContent = `… ${v}`;
- div.className += ` visit-col${i+1}`;
- elem.append(div);
}
- elem.scrollTop = elem.scrollHeight;
-}
-
-function setStdev(val) {
- Module.ccall('change_stdev', null, ['number', 'number'], [val, val]);
-}
-
-function updateStdev(val) {
- document.getElementById('stdev').value = val;
+ e.scrollTop = e.scrollHeight;
}
function setDelay(val) {
- Module.ccall('change_delay', null, ['number'], [val]);
+ Module.ccall('set_delay', null, ['number'], [val]);
}
function updateDelay(val) {
document.getElementById('delay').value = val;
}
-function processKey(data) {
- if (data.altKey || data.ctrlKey || data.metaKey || data.target.type == 'text')
- return;
- let key = data.key;
+function setStdev(val) {
+ Module.ccall('set_stdev', null, ['number', 'number'], [val, val]);
+}
- if (isFinite(key))
- promptAppend(key);
- else if (key == 'Enter')
- promptSubmit();
- else if (key == 'Backspace')
- promptBackspace();
- else if (key == 'r')
- promptSubmitRem();
+function updateStdev(val) {
+ document.getElementById('stdev').value = val;
}
function modal(id) {
document.getElementById(id).style.display = 'block';
}
-window.onclick = function(e) {
+document.addEventListener('click', e => {
if (e.target.classList.contains('modal')) e.target.style.display = 'none';
-}
+});
-document.addEventListener('keydown', processKey);
+document.addEventListener('keydown', e => {
+ if (e.altKey || e.ctrlKey || e.metaKey || e.target.type == 'text')
+ return;
+
+ if (isFinite(e.key))
+ promptAppend(e.key);
+ else if (e.key == 'Enter')
+ promptSubmit();
+ else if (e.key == 'Backspace')
+ promptBackspace();
+ else if (e.key == 'r')
+ promptSubmitRem();
+});
diff --git a/web/static/index.html b/web/static/index.html
index 1db6537..fdfa0ee 100644
--- a/web/static/index.html
+++ b/web/static/index.html
@@ -12,13 +12,13 @@
<div id="main">
<div id="rem-bar">
<div id="oi">oi!</div>
- <div id="p1-state">
+ <div id="p1-info">
<div id="p1-name"></div>
<div id="p1-rem"></div>
<div id="p1-sugg"></div>
<div id="p1-avg"></div>
</div>
- <div id="p2-state">
+ <div id="p2-info">
<div id="p2-name"></div>
<div id="p2-rem"></div>
<div id="p2-sugg"></div>
@@ -27,9 +27,9 @@
</div>
<div id="keypad">
<div id="prompt-container">
- <div id="prompt-msg"></div>
- <div id="prompt"></div>
- <div id="prompt-sugg"></div>
+ <div id="prompt-msg-l"></div>
+ <div id="prompt-input"></div>
+ <div id="prompt-msg-r"></div>
</div>
<div onclick="promptAppend(1)" class="key num">1</div>
<div onclick="promptAppend(2)" class="key num">2</div>
@@ -50,7 +50,7 @@
<div class="input"><span>stdev</span><input id="stdev" onchange="setStdev(this.value)" maxlength="4" value=""></div>
<div class="help-button" onclick="modal('help-modal')">?</div>
</div>
- <div id="match"></div>
+ <div id="visits"></div>
</div>
<div id="help-modal" class="modal">
<div class="modal-content">
diff --git a/web/static/style.css b/web/static/style.css
index fe686a2..70a0c70 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -22,7 +22,7 @@ div#main {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: min-content min-content 2fr 2fr;
- grid-template-areas: "settings-bar" "rem-bar" "match" "keypad";
+ grid-template-areas: "settings-bar" "rem-bar" "visits" "keypad";
}
div#keypad {
@@ -66,7 +66,7 @@ div#rem-bar {
grid-template-columns: repeat(2, 1fr);
}
-div#p1-state, div#p2-state {
+div#p1-info, div#p2-info {
background-color: #222;
font-size: 1.5em;
@@ -78,7 +78,7 @@ div#p1-state, div#p2-state {
align-items: center;
}
-div#p1-state.active, div#p2-state.active {
+div#p1-info.active, div#p2-info.active {
background-color: #2a390a;
}
@@ -122,24 +122,24 @@ div#prompt-container {
justify-content: center;
}
-div#prompt-msg, div#prompt, div#prompt-sugg {
+div#prompt-msg-l, div#prompt-input, div#prompt-msg-r {
font-size: 1.5em;
display: grid;
align-items: center;
}
-div#prompt-msg, div#prompt-sugg {
+div#prompt-msg-l, div#prompt-msg-r {
flex: 1;
color: #aaa;
padding: 0 0.4rem;
}
-div#prompt-sugg {
+div#prompt-msg-r {
text-align: right;
}
-div#prompt {
+div#prompt-input {
text-align: center;
font-size: 3em;
width: 4ch;
@@ -249,8 +249,8 @@ div#settings-bar div.help-button:active {
background-color: #6e41b8;
}
-div#match {
- grid-area: match;
+div#visits {
+ grid-area: visits;
background-color: #222;
font-size: clamp(1.5vh, 2vw, 2vh);
@@ -266,7 +266,7 @@ div#match {
grid-row-gap: 0.3em;
}
-div#match div {
+div#visits div {
font-size: 2em;
min-width: 0;
@@ -276,17 +276,17 @@ div#match div {
justify-content: center;
}
-div#match .visit-col1 { grid-column: 2; }
-div#match .visit-col3 { color: #888; grid-column: 4; }
-div#match .p0 { color: #f00; font-weight: bold; }
-div#match .p1 { color: #f00; }
-div#match .p20 { color: #f60; }
-div#match .p40 { color: #fa0; }
-div#match .p60 { color: #dd0; }
-div#match .p100 { color: #2c2; }
-div#match .p140 { color: #0f0; }
-div#match .p180 { color: #0f0; font-weight: bold; }
-div#match .visit-col6 { color: #888; justify-content: left; font-family: monospace; white-space: pre; }
+div#visits .visit-col1 { grid-column: 2; }
+div#visits .visit-col3 { color: #888; grid-column: 4; }
+div#visits .p0 { color: #f00; font-weight: bold; }
+div#visits .p1 { color: #f00; }
+div#visits .p20 { color: #f60; }
+div#visits .p40 { color: #fa0; }
+div#visits .p60 { color: #dd0; }
+div#visits .p100 { color: #2c2; }
+div#visits .p140 { color: #0f0; }
+div#visits .p180 { color: #0f0; font-weight: bold; }
+div#visits .visit-col6 { color: #888; justify-content: left; font-family: monospace; white-space: pre; }
.modal {
background-color: rgba(0, 0, 0, 0.6);
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-25 15:19:00 +0000