Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCatalin Mititiuc <Catalin.Mititiuc@gmail.com>2024-03-22 16:50:12 -0700
committerCatalin Mititiuc <Catalin.Mititiuc@gmail.com>2024-03-22 16:50:12 -0700
commite6cc5d687e29481f9bdb3423e13f77f856c41aa5 (patch)
treedabc9e96d1c2d3668275e0420c0286c4dabcb318
parent6ac0473a10cf56d361b21ce11824fa97357e7b52 (diff)
Some cleanup
Diffstat
-rw-r--r--index.js111
1 files changed, 31 insertions, 80 deletions
diff --git a/index.js b/index.js
index d3ac605..4255ca4 100644
--- a/index.js
+++ b/index.js
@@ -31,6 +31,7 @@ function edgePoint(x1, y1, x2, y2, maxX, maxY) {
let xWhenYisZero = xIntercept(0);
if (xWhenYisZero <= maxX) {
+ // yWhenXisMax
pointCoords = [xWhenYisZero, 0];
} else {
pointCoords = [maxX, yWhenXisMax];
@@ -40,6 +41,7 @@ function edgePoint(x1, y1, x2, y2, maxX, maxY) {
let xWhenYisZero = xIntercept(0);
if (yWhenXisZero >= 0) {
+ // xWhenYisZero
pointCoords = [0, yWhenXisZero];
} else {
pointCoords = [xWhenYisZero, 0];
@@ -130,25 +132,23 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
rect.addEventListener('mousemove', e => {
var rect = e.target.getBoundingClientRect();
- 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);
+ var pointerX = e.clientX - rect.left;
+ var pointerY = e.clientY - rect.top;
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('line.firing-arc.active');
- // let p = document.querySelector('polyline.firing-arc.active');
let p = document.querySelector('polygon.firing-arc.active');
- // TODO: handle horizontal and vertical lines
-
- if (aim && p) {
- 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 exactly horizontal and vertical lines
+ if (p) {
let {x: x1px, y: y1px} = p.points[1];
- let [x2px, y2px] = [x / rect.width * maxXpx, y / rect.height * maxYpx];
+
+ let [x2px, y2px] = [
+ pointerX / rect.width * maxXpx,
+ pointerY / rect.height * maxYpx
+ ];
let xDiff = x2px - x1px;
let yDiff = -(y2px - y1px);
@@ -242,14 +242,7 @@ rect.addEventListener('mousemove', e => {
points = `${newX1},${newY1} ${x1px},${y1px} ${newX2},${newY2}`;
}
- // p.setAttributeNS(null, 'points', `${newX},${newY} ${x1px},${y1px} ${newX},${newY}`);
- // p.setAttributeNS(null, 'points', `${x2px},${y2px} ${x1px},${y1px} ${x2px},${y2px}`);
p.setAttributeNS(null, 'points', points);
-
- let [newX, newY] = edgePoint(x1, y1, x2, y2, maxX, maxY);
-
- aim.setAttributeNS(null, 'x2', `${newX}in`);
- aim.setAttributeNS(null, 'y2', `${newY}in`);
}
});
@@ -284,71 +277,29 @@ document.querySelectorAll('.set-firing-arc').forEach(el => el.addEventListener('
`circle.counter[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`
);
- let arcLayer = document.getElementById('firing-arcs');
-
- let aim = document.createElementNS(svgns, 'line');
-
- aim.classList.add('firing-arc', 'active');
- aim.dataset.troopNumber = troopNumber;
- aim.dataset.troopAllegiance = troopAllegiance;
- aim.dataset.size = e.target.dataset.size;
- aim.setAttributeNS(null, 'x1', counter.cx.baseVal.valueAsString);
- aim.setAttributeNS(null, 'y1', counter.cy.baseVal.valueAsString);
- aim.setAttributeNS(null, 'x2', counter.cx.baseVal.valueAsString);
- aim.setAttributeNS(null, 'y2', counter.cy.baseVal.valueAsString);
- // aim.style.transformOrigin = `${counter.cx.baseVal.valueAsString} ${counter.cy.baseVal.valueAsString}`;
-
- // svg.appendChild(aim);
- arcLayer.prepend(aim);
-
- aim.addEventListener('click', e => {
- // e.target.classList.remove('active');
- document.querySelectorAll('.firing-arc.active').forEach(el => el.classList.remove('active'));
- document.querySelector('circle#point').style.display = '';
- });
-
- let pivotPoint = [counter.cx.baseVal.value, counter.cy.baseVal.value];
- // let firingArc = document.createElementNS(svgns, 'polyline');
- let firingArc = document.createElementNS(svgns, 'polygon');
- firingArc.classList.add('firing-arc', 'active');
- firingArc.dataset.troopNumber = troopNumber;
- firingArc.dataset.troopAllegiance = troopAllegiance;
- firingArc.dataset.size = e.target.dataset.size;
- firingArc.setAttributeNS(null, 'points', `${pivotPoint} ${pivotPoint} ${pivotPoint}`);
-
- arcLayer.prepend(firingArc);
- // svg.appendChild(firingArc);
-
- document.querySelector('circle#point').style.display = 'none';
- }
-}));
-
-let smlArc = document.createElementNS(svgns, 'polygon');
-smlArc.setAttributeNS(null, 'id', 'sml-arc');
-let smlArcPoints = `${getPointCoords(1, 24)} ${getPointCoords(1, 21)} ${getPointCoords(2, 21)}`;
-smlArc.setAttributeNS(null, 'points', smlArcPoints);
-
-svg.appendChild(smlArc);
+ if (counter) {
+ let arcLayer = document.getElementById('firing-arcs');
-let medArc = document.createElementNS(svgns, 'polygon');
-medArc.setAttributeNS(null, 'id', 'med-arc');
-let medArcPoints = `${getPointCoords(4, 24)} ${getPointCoords(3, 21)} ${getPointCoords(6, 21)}`;
-medArc.setAttributeNS(null, 'points', medArcPoints);
+ let placeFiringArcListener = e => {
+ document.querySelectorAll('.firing-arc.active').forEach(el => el.classList.remove('active'));
+ document.querySelector('circle#point').style.display = '';
+ rect.removeEventListener('click', placeFiringArcListener);
+ };
-svg.appendChild(medArc);
+ rect.addEventListener('click', placeFiringArcListener);
-let lrgArc = document.createElementNS(svgns, 'polygon');
-lrgArc.setAttributeNS(null, 'id', 'lrg-arc');
-let lrgArcPoints = `${getPointCoords(19, 24)} ${getPointCoords(9, 21)} ${getPointCoords(30, 21)}`;
-lrgArc.setAttributeNS(null, 'points', lrgArcPoints);
+ let pivotPoint = [counter.cx.baseVal.value, counter.cy.baseVal.value];
+ let firingArc = document.createElementNS(svgns, 'polygon');
-svg.appendChild(lrgArc);
+ firingArc.classList.add('firing-arc', 'active');
+ firingArc.dataset.troopNumber = troopNumber;
+ firingArc.dataset.troopAllegiance = troopAllegiance;
+ firingArc.dataset.size = e.target.dataset.size;
+ firingArc.setAttributeNS(null, 'points', `${pivotPoint} ${pivotPoint} ${pivotPoint}`);
-// arc = document.querySelector('#med-arc');
-// let [ox, oy] = getPointCoords(4, 24);
-// arc.style.transformOrigin = `${ox}px ${oy}px`;
-// arc.style.transform = 'rotate(90deg)';
+ arcLayer.prepend(firingArc);
-var smlArcAngle = radToDeg((Math.atan(HORZ_POINT_DISTANCE / (6 * VERT_POINT_DISTANCE)) * 2));
-var medArcAngle = radToDeg((Math.atan((3 * HORZ_POINT_DISTANCE) / (6 * VERT_POINT_DISTANCE)) * 2));
-var lrgArcAngle = radToDeg((Math.atan((21 * HORZ_POINT_DISTANCE) / (6 * VERT_POINT_DISTANCE)) * 2)); \ No newline at end of file
+ document.querySelector('circle#point').style.display = 'none';
+ }
+ }
+})); \ No newline at end of file