summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--web/dartboat_wasm.c14
-rw-r--r--web/static/dartboat.js98
-rw-r--r--web/static/index.html25
-rw-r--r--web/static/style.css22
4 files changed, 83 insertions, 76 deletions
diff --git a/web/dartboat_wasm.c b/web/dartboat_wasm.c
index 1f81b1c..78538b5 100644
--- a/web/dartboat_wasm.c
+++ b/web/dartboat_wasm.c
@@ -8,11 +8,11 @@
#include <emscripten/emscripten.h>
-#define M_P 1
-#define M_PVP 2
-#define M_PVC 3
+#define M_PVC 1
+#define M_P 2
+#define M_PVP 3
-int delay_ms = 1000;
+int delay_ms = 500;
// TODO refactor *everything*
@@ -166,7 +166,7 @@ EMSCRIPTEN_KEEPALIVE void update_boat_rem(int rem) {
EM_ASM({updatePlayerRem($0, $1)}, 2, str);
free(str);
- get_suggested(rem, 2);
+ //get_suggested(rem, 2);
}
void end_boat_throwing(int, double); // FIXME
@@ -222,7 +222,9 @@ EMSCRIPTEN_KEEPALIVE bool user_visit(int points) {
points > state->active_l->rem || state->active_l->rem - points == 1 ||
points > 180 || points == 179 || points == 178 || points == 176 ||
points == 175 || points == 173 || points == 172 || points == 169 ||
- points == 166 || points == 163) {
+ points == 166 || points == 163 ||
+ (state->active_l->rem - points == 0 &&
+ (points == 168 || points == 165 || points == 162 || points == 159))) {
EM_ASM(oi());
return false;
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 @@
<html lang="en">
<head>
<title>dartboat™</title>
- <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
- <meta name="viewport" content="width=device-width, user-scalable=no" />
- <link rel="stylesheet" type="text/css" href="style.css" />
+ <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+ <meta name="viewport" content="width=device-width, user-scalable=no">
+ <link rel="stylesheet" type="text/css" href="style.css">
<script src="dartboat.js"></script>
<script src="dartboat_wasm.js"></script>
</head>
@@ -48,14 +48,14 @@
<div onclick="promptHandle('submit_rem')" class="key">REMAINING</div>
</div>
<div id="keypad-init" class="keypad">
- <div onclick="promptHandle('append', 1); promptHandle('submit')" class="key"><span class="keyboard-val">[1]</span> One-player scoreboard</div>
- <div onclick="promptHandle('append', 2); promptHandle('submit')" class="key"><span class="keyboard-val">[2]</span> Two-player scoreboard</div>
- <div onclick="promptHandle('append', 3); promptHandle('submit')" class="key"><span class="keyboard-val">[3]</span> Play against bot</div>
+ <div onclick="promptHandle('append', 1); promptHandle('submit')" class="key"><span class="keyboard-val">[1]</span> Play against bot</div>
+ <div onclick="promptHandle('append', 2); promptHandle('submit')" class="key"><span class="keyboard-val">[2]</span> One-player scoreboard</div>
+ <div onclick="promptHandle('append', 3); promptHandle('submit')" class="key"><span class="keyboard-val">[3]</span> Two-player scoreboard</div>
</div>
</div>
<div id="settings-bar">
<div>dartboat™</div>
- <div class="input first"><span>delay</span><input id="delay" onchange="setDelay(this.value)" maxlength="4" value="1000"></div>
+ <div class="input first"><span>delay</span><input id="delay" onchange="setDelay(this.value)" maxlength="4" value=""></div>
<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>
@@ -63,10 +63,13 @@
</div>
<div id="help-modal" class="modal">
<div class="modal-content">
- <p><strong>dartboat</strong> works using an internal representation of a specification dartboard. Upon selecting a target, the dart is thrown following a normal distribution with configurable inaccuracy. The resultant coordinates are then used to calculate the segment in which the dart landed. The idea is that this provides a more realistic opponent than picking points at random.</p>
- <p>The <em>stdev</em> setting controls the standard deviation of the bot's throws in millimetres. A value of 24 translates to a three-dart average of roughly 35. A value of 13 would be a 65 average, and a value of 8 a 95 average.</p>
- <p>The <em>delay</em> setting controls how many milliseconds it takes the bot to throw each dart.</p>
- <p>dartboat is <a href="https://retarded.software/dartbot.git/" target="_blank">free and open-source software</a>. It is written primarily in C. The web target is compiled to WebAssembly, along with some JavaScript for the interactive elements. This is a work in progress—a lot of features are missing and a lot of things will change.</p>
+ <p><strong>dartboat</strong> uses an internal representation of a specification dartboard. Darts are thrown following a normal distribution, with the resultant coordinates used to calculate the segments in which they land. The idea is that this provides a more realistic opponent than picking points at random.</p>
+ <p>
+ <h2>Settings</h2>
+ <p><em>stdev</em> — the standard deviation of the bot's throws in millimetres. A value of 24 translates to a three-dart average of roughly 35. A value of 13 would be a 65 average, and a value of 8 a 95 average.</p>
+ <p><em>delay</em> — milliseconds it takes the bot to throw each dart.</p>
+ <h2>Info</h2>
+ <p>dartboat is <a href="https://retarded.software/dartbot.git/" target="_blank">free and open-source software</a>. It is written in C and compiled to WebAssembly for the web target. JavaScript is used to handle the interactive elements.</p>
</div>
</div>
</body>
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%;
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-25 13:46:31 +0000