diff options
Diffstat (limited to 'web/static')
| -rw-r--r-- | web/static/dartboard.js | 151 | ||||
| -rw-r--r-- | web/static/dartboat.js | 24 | ||||
| -rw-r--r-- | web/static/index.html | 5 |
3 files changed, 26 insertions, 154 deletions
diff --git a/web/static/dartboard.js b/web/static/dartboard.js deleted file mode 100644 index 46e5c4c..0000000 --- a/web/static/dartboard.js +++ /dev/null @@ -1,151 +0,0 @@ -const diameter = 451.0; -const dists = [7.13, 16.68, 97.06, 106.62, 159.66, 169.22]; -const wire_width = 1.56; -const sectors = ['20', '1', '18', '4', '13', '6', '10', '15', '2', '17', - '3', '19', '7', '16', '8', '11', '14', '9', '12', '5']; - -const c_black = '#272b2c'; -const c_white = '#fbe3ba'; -const c_red = '#f6302f'; -const c_green = '#22912d'; -const c_wire = '#909ca0'; -const c_wire_inner = '#d8e6ec'; - -const svgns = 'http://www.w3.org/2000/svg'; - -function p2c(a, r) { - const t = a * Math.PI / 180; - return [r * Math.cos(t), r * Math.sin(t)]; -} - -function gen_arc(a1, a2, r1, r2, c) { - const [x1, y1] = p2c(a1 === a2 ? 1 : a2, r1); - const [x2, y2] = p2c(a1 === a2 ? 0 : a1, r1); - const [x3, y3] = p2c(a1 === a2 ? 0 : a1, r2); - const [x4, y4] = p2c(a1 === a2 ? 1 : a2, r2); - - const elem = document.createElementNS(svgns, 'path'); - elem.setAttribute('d', - `M${x1} ${y1}` + - `A${r1} ${r1} 0 0 0 ${x2} ${y2}` + - (a1 === a2 ? `A${r1} ${r1} 0 1 0 ${x1} ${y1}` : '') + - `L${x3} ${y3}` + - `A${r2} ${r2} 0 0 1 ${x4} ${y4}` + - (a1 === a2 ? `A${r2} ${r2} 0 1 1 ${x3} ${y3}` : '') + - 'Z'); - elem.setAttribute('fill', c) - return elem; -} - -function gen_segment(a, r1, r2, c) { - return gen_arc(a - 9, a + 9, r1, r2, c); -} - -function gen_ring(r, w, c) { - return gen_arc(0, 0, r - w/2, r + w/2, c); -} - -function gen_circle(r, c) { - const elem = document.createElementNS(svgns, 'circle'); - elem.setAttribute('r', r); - elem.setAttribute('fill', c) - return elem; -} - -function gen_line(a, r1, r2, w, c) { - const [x1, y1] = p2c(a, r1); - const [x2, y2] = p2c(a, r2); - - const elem = document.createElementNS(svgns, 'line'); - elem.setAttribute('x1', x1); - elem.setAttribute('y1', y1); - elem.setAttribute('x2', x2); - elem.setAttribute('y2', y2); - elem.setAttribute('stroke', c); - elem.setAttribute('stroke-width', w); - return elem; -} - -function draw_spider(board) { - for (let i = 5; i > 1; --i) { - board.appendChild(gen_ring(dists[i], wire_width, c_wire)); - board.appendChild(gen_ring(dists[i], wire_width/2, c_wire_inner)); - } - - for (let i = 20; i > 0; --i) { - let a = 90 - (i * 18) - 9; - if (a < 0) a += 360; - board.appendChild(gen_line(a, dists[1], dists[5] + 10, - wire_width, c_wire)); - board.appendChild(gen_line(a, dists[1], dists[5] + 10 - wire_width/4, - wire_width/2, c_wire_inner)); - } - - for (let i = 1; i >= 0; --i) { - board.appendChild(gen_ring(dists[i], wire_width, c_wire)); - board.appendChild(gen_ring(dists[i], wire_width/2, c_wire_inner)); - } -} - -function draw_numbers(board) { - board.appendChild(gen_ring(diameter/2 - wire_width*4, wire_width, '#ddd')); - - const r = diameter/2 - 33/2; - for (let i = 0; i < 20; ++i) { - let a = 90 - (i * 18); - if (a < 0) a += 360; - const [x, y] = p2c(a, r); - - const elem = document.createElementNS(svgns, 'text'); - elem.textContent = sectors[i]; - elem.setAttribute('font-size', '33'); - elem.setAttribute('fill', '#fff'); - elem.setAttribute('transform', `scale(1 -1) translate(${x} ${-y}) ` + - `rotate(${a <= 180 ? 90 - a : 270 - a})`); - elem.setAttribute('text-anchor', 'middle'); - elem.setAttribute('dominant-baseline', 'central'); - board.appendChild(elem); - } -} - -function draw_board() { - const board = document.getElementById('dartboard'); - const points = document.getElementById('dartboard-points'); - - const r = diameter/2; - board.setAttribute('transform', `translate(${r} ${r}) scale(1 -1)`); - points.setAttribute('transform', `translate(${r} ${r}) scale(1 -1)`); - board.appendChild(gen_circle(r, c_black)); - - for (let i = 5; i > 1; --i) { - for (let j = 0; j < 20; ++j) { - let a = 90 - (j * 18); - if (a < 0) a += 360; - - const elem = gen_segment(a, dists[i-1], dists[i], - i%2 ? (j%2 ? c_green : c_red) : (j%2 ? c_white : c_black)); - board.appendChild(elem); - } - } - - board.appendChild(gen_circle(dists[1], c_green)); - board.appendChild(gen_circle(dists[0], c_red)); - draw_spider(board); - draw_numbers(board); -} - -function draw_point(x, y) { - const points = document.getElementById('dartboard-points'); - elem = gen_circle(8, '#33f'); - elem.setAttribute('cx', x); - elem.setAttribute('cy', y); - elem.setAttribute('stroke', '#ff0'); - elem.setAttribute('stroke-width', '2'); - points.appendChild(elem); -} - -function clear_points() { - document.getElementById('dartboard-points').textContent = ''; -} - -document.addEventListener('DOMContentLoaded', () => draw_board()); diff --git a/web/static/dartboat.js b/web/static/dartboat.js index 98bbb37..53a113a 100644 --- a/web/static/dartboat.js +++ b/web/static/dartboat.js @@ -136,6 +136,30 @@ function drawVisit(visit_no, p1_pts, p1_rem, p2_pts, p2_rem, p2_darts) { e.scrollTop = e.scrollHeight; } +function drawElem(target, name, n_attrs, attr_names, attr_vals, content) { + const e = document.createElementNS('http://www.w3.org/2000/svg', + UTF8ToString(name)); + if (content) e.textContent = UTF8ToString(content); + + for (let i = 0; i < n_attrs; ++i) + e.setAttribute(UTF8ToString(HEAP32[(attr_names + i*4)>>2]), + UTF8ToString(HEAP32[(attr_vals + i*4)>>2])); + + target.appendChild(e); +} + +function drawElemBoard(...args) { + drawElem($('#dartboard'), ...args); +} + +function drawElemPoint(...args) { + drawElem($('#dartboard-points'), ...args); +} + +function clearPoints() { + $('#dartboard-points').textContent = ''; +} + function updateDelay(val) { $('#delay').value = val; } diff --git a/web/static/index.html b/web/static/index.html index a9c5aea..c1a2fdd 100644 --- a/web/static/index.html +++ b/web/static/index.html @@ -6,7 +6,6 @@ <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="dartboard.js"></script> <script src="dartboat_wasm.js"></script> </head> <body> @@ -60,8 +59,8 @@ <div id="keypad-dartboard" class="keypad" style="display: none"> <div id="dartboard-container"> <svg viewBox="0 0 451 451"> - <g id="dartboard"></g> - <g id="dartboard-points"></g> + <g id="dartboard" transform="translate(225.5 225.5) scale(1 -1)"></g> + <g id="dartboard-points" transform="translate(225.5 225.5) scale(1 -1)"></g> </svg> </div> </div> |