diff --git a/html/images/space.svg b/html/images/space.svg
index 7f30f7c..8bfe212 100644
--- a/html/images/space.svg
+++ b/html/images/space.svg
@@ -36,6 +36,13 @@
stroke: limegreen;
stroke-width: 0.5px;
}
+
+ #lines polygon {
+ fill: white;
+ stroke: teal;
+ fill-opacity: 0.2;
+ stroke-width: 0.5px;
+ }
@@ -113,14 +120,40 @@
const lineContainer = document.querySelector('#lines');
- points.forEach(([x, y]) => {
- const el = document.createElementNS(namespaceURIsvg, 'line');
- el.setAttribute('x1', x);
- el.setAttribute('y1', y);
- el.setAttribute('x2', x);
- el.setAttribute('y2', y);
- lineContainer.appendChild(el)
- });
+ // points.forEach(([x, y]) => {
+ // const el = document.createElementNS(namespaceURIsvg, 'line');
+ // el.setAttribute('x1', x);
+ // el.setAttribute('y1', y);
+ // el.setAttribute('x2', x);
+ // el.setAttribute('y2', y);
+ // lineContainer.appendChild(el)
+ // });
+
+ const triangleContainer = document.querySelector('#lines');
+ const trianglePts = points.map((pt, i) => [pt, points[(i + 1) % points.length]]);
+
+ function drawTriangles(container, pts, [positionX, positionY]) {
+ pts.forEach(([[x1, y1], [x2, y2]]) => {
+ const el = document.createElementNS(namespaceURIsvg, 'polygon');
+ const attr = `${x1},${y1} ${x2},${y2} ${positionX},${positionY}`
+ el.setAttribute('points', attr);
+ container.appendChild(el)
+ });
+ }
+
+ drawTriangles(triangleContainer, trianglePts, [0, 0]);
+ const triangles = triangleContainer.querySelectorAll('polygon');
+
+ function updateTriangles([positionX, positionY]) {
+ const delim = ' ';
+
+ triangles.forEach(triangle => {
+ const attr = triangle.getAttribute('points').split(delim)
+ attr.pop();
+ attr.push(`${positionX},${positionY}`);
+ triangle.setAttribute('points', attr.join(delim));
+ });
+ }
const lines = lineContainer.querySelectorAll('line');
@@ -278,7 +311,8 @@
let position = [positionX, positionY] = wrapPos(changeX + x, changeY + y);
updateBullets(elapsed);
- updateLines(position);
+ // updateLines(position);
+ updateTriangles(position);
pt.x = positionX;
pt.y = positionY;