Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCatalin Mititiuc <Catalin.Mititiuc@gmail.com>2024-03-21 12:27:15 -0700
committerCatalin Mititiuc <Catalin.Mititiuc@gmail.com>2024-03-21 12:27:15 -0700
commitdf548e8425a0c751eedb10ce96d66d74acc24e83 (patch)
treef2e126b395dab42dcce5ed4eb7d57987f9956ddd
parenteb5ffc8cb55b652fb5eb89679634ce9622e987e0 (diff)
WIP: polyline firing arc
Diffstat
-rw-r--r--index.js74
-rw-r--r--style.css7
2 files changed, 76 insertions, 5 deletions
diff --git a/index.js b/index.js
index de66c79..c56f66f 100644
--- a/index.js
+++ b/index.js
@@ -30,20 +30,77 @@ rect.addEventListener('mousemove', e => {
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
let [maxX, maxY] = [e.target.width, e.target.height].map(v => v.baseVal.valueInSpecifiedUnits);
+ let [maxXpx, maxYpx] = [e.target.width, e.target.height].map(v => v.baseVal.value);
// console.log('x', `${toFixed(x / rect.width * maxX)}"`, 'y', `${toFixed(y / rect.height * maxY)}"`);
let aim = document.querySelector('.firing-arc.active');
+ let p = document.querySelector('polyline.firing-arc.active');
- if (aim) {
+ console.log(p);
+
+ // TODO: handle horizontal and vertical lines
+
+ if (aim || p) {
let xIntercept = y => (y - y1) * (x2 - x1) / (y2 - y1) + x1;
let yIntercept = x => (x - x1) * (y2 - y1) / (x2 - x1) + y1;
+ let xInterceptPx = y => (y - y1px) * (x2px - x1px) / (y2px - y1px) + x1px;
+ let yInterceptPx = x => (x - x1px) * (y2px - y1px) / (x2px - x1px) + y1px;
let newX, newY;
let [x1, y1] = [aim.x1, aim.y1].map(v => v.baseVal.valueInSpecifiedUnits);
let [x2, y2] = [x / rect.width * maxX, y / rect.height * maxY];
- // TODO: handle horizontal and vertical lines
+ let {x: x1px, y: y1px} = p.points[1];
+ let [x2px, y2px] = [x / rect.width * maxXpx, y / rect.height * maxYpx];
+
+ if (x2px - x1px > 0 && y2px - y1px > 0) {
+ let yWhenXisMax = yInterceptPx(maxXpx);
+ let xWhenYisMax = xInterceptPx(maxYpx);
+
+ if (xWhenYisMax <= maxXpx) {
+ newX = xWhenYisMax;
+ newY = maxYpx;
+ } else {
+ newX = maxXpx;
+ newY = yWhenXisMax;
+ }
+ } else if (x2px - x1px > 0 && y2px - y1px < 0) {
+ let yWhenXisMax = yInterceptPx(maxXpx);
+ let xWhenYisZero = xInterceptPx(0);
+
+ if (xWhenYisZero <= maxXpx) {
+ newX = xWhenYisZero;
+ newY = 0;
+ } else {
+ newX = maxXpx;
+ newY = yWhenXisMax;
+ }
+ } else if (x2px - x1px < 0 && y2px - y1px < 0) {
+ let yWhenXisZero = yInterceptPx(0);
+ let xWhenYisZero = xInterceptPx(0);
+
+ if (yWhenXisZero >= 0) {
+ newX = 0;
+ newY = yWhenXisZero;
+ } else {
+ newX = xWhenYisZero;
+ newY = 0;
+ }
+ } else {
+ let yWhenXisZero = yInterceptPx(0);
+ let xWhenYisMax = xInterceptPx(maxYpx);
+
+ if (yWhenXisZero <= maxYpx) {
+ newX = 0;
+ newY = yWhenXisZero;
+ } else {
+ newX = xWhenYisMax;
+ newY = maxYpx;
+ }
+ }
+
+ p.setAttributeNS(null, 'points', `${newX},${newY} ${x1px},${y1px} ${newX},${newY}`);
if (x2 - x1 > 0 && y2 - y1 > 0) {
let yWhenXisMax = yIntercept(maxX);
@@ -129,11 +186,11 @@ document.querySelector('#set-firing-arc').addEventListener('click', e => {
if (selectedSoldier) {
let {troopNumber, troopAllegiance} = selectedSoldier.dataset;
- let firingArc = document.querySelector(
+ let existingArc = document.querySelector(
`.firing-arc[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`
);
- if (firingArc) { firingArc.remove() }
+ if (existingArc) { existingArc.remove() }
let counter = document.querySelector(
`circle.counter[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`
@@ -157,6 +214,15 @@ document.querySelector('#set-firing-arc').addEventListener('click', e => {
document.querySelector('circle#point').style.display = '';
});
+ let pivotPoint = [counter.cx.baseVal.value, counter.cy.baseVal.value];
+ let firingArc = document.createElementNS(svgns, 'polyline');
+ firingArc.classList.add('firing-arc', 'active');
+ firingArc.dataset.troopNumber = troopNumber;
+ firingArc.dataset.troopAllegiance = troopAllegiance;
+ firingArc.setAttributeNS(null, 'points', `${pivotPoint} ${pivotPoint} ${pivotPoint}`);
+
+ svg.appendChild(firingArc);
+
document.querySelector('circle#point').style.display = 'none';
}
});
diff --git a/style.css b/style.css
index 5d3598c..44c44ae 100644
--- a/style.css
+++ b/style.css
@@ -38,10 +38,15 @@ polygon {
}
line.firing-arc {
- stroke: black;
+ stroke: none;
/* transform: scale(2); */
}
+polyline.firing-arc {
+ stroke: black;
+ stroke-width: 5px;
+}
+
image#img1 {
transform: scale(3.41) rotate(-0.15deg);
/* opacity: 0.33; */