Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
path: root/src/modules/game/firing_arc.js
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-04-27 15:58:11 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-04-27 15:58:11 -0700
commitce98e325656b8419b80d8c248e0469f3a9708322 (patch)
tree293c5e23601195be80161912275277554fcfb07e /src/modules/game/firing_arc.js
parent75a0c37ea5e5a9fa395690984c373536e8efccfa (diff)
Rename some files
Diffstat (limited to 'src/modules/game/firing_arc.js')
-rw-r--r--src/modules/game/firing_arc.js348
1 files changed, 348 insertions, 0 deletions
diff --git a/src/modules/game/firing_arc.js b/src/modules/game/firing_arc.js
new file mode 100644
index 0000000..817bc44
--- /dev/null
+++ b/src/modules/game/firing_arc.js
@@ -0,0 +1,348 @@
+// source: https://www.redblobgames.com/grids/hexagons/
+// Horizontal distance between hex centers is sqrt(3) * size. The vertical
+// distance is 3 / 2 * size. When we calculate horzDist / vertDist, the size
+// cancels out, leaving us with a unitless ratio of sqrt(3) / (3 / 2), or
+// 2 * sqrt(3) / 3.
+
+const horzToVertDistRatio = 2 * Math.sqrt(3) / 3,
+
+ arcSize = {
+ 'small': Math.atan(horzToVertDistRatio / 6),
+ 'medium': Math.atan(horzToVertDistRatio / 2),
+ 'large': Math.atan(7 * horzToVertDistRatio / 2)
+ },
+
+ firingArcVisibility = {
+ davion: false,
+ liao: false
+ },
+
+ clippedFiringArcRadius = 25;
+
+class Point {
+ constructor(x = 0, y = 0) {
+ this.x = +x;
+ this.y = +y;
+ }
+
+ toString() {
+ return `${this.x},${this.y}`;
+ }
+}
+
+function calculateAngle(xDiff, yDiff) {
+ yDiff = -yDiff;
+ let angle = Math.abs(Math.atan(yDiff / xDiff));
+
+ if (xDiff < 0 && yDiff > 0) {
+ angle = Math.PI - angle;
+ } else if (xDiff < 0 && yDiff < 0) {
+ angle = Math.PI + angle;
+ } else if (xDiff > 0 && yDiff < 0) {
+ angle = 2 * Math.PI - angle;
+ }
+
+ return angle;
+}
+
+function calcEdgePt({ x: x1, y: y1 }, { x: x2, y: y2 }, { x: [minX, maxX], y: [minY, maxY] }) {
+ const xDiff = x2 - x1,
+ yDiff = y2 - y1,
+ xIntercept = y => (y - y1) * xDiff / yDiff + x1,
+ yIntercept = x => (x - x1) * yDiff / xDiff + y1;
+
+ let pointCoords;
+
+ if (xDiff > 0 && yDiff > 0) {
+ let x = xIntercept(maxY);
+
+ pointCoords = x <= maxX ? [x, maxY] : [maxX, yIntercept(maxX)];
+ } else if (xDiff > 0 && yDiff < 0) {
+ let y = yIntercept(maxX);
+
+ pointCoords = y >= minY ? [maxX, y] : [xIntercept(minY), minY];
+ } else if (xDiff < 0 && yDiff < 0) {
+ let x = xIntercept(minY);
+
+ pointCoords = x >= minX ? [x, minY] : [minX, yIntercept(minX)];
+ } else {
+ let y = yIntercept(minX);
+
+ pointCoords = y <= maxY ? [minX, y] : [xIntercept(maxY), maxY];
+ }
+
+ return new Point(...pointCoords);
+}
+
+function touchSameEdge({ x: x1, y: y1 }, { x: x2, y: y2 }) {
+ return x1 === x2 || y1 === y2;
+}
+
+function shareValue({ x: x1, y: y1 }, { x: x2, y: y2 }) {
+ return x1 === x2 || y1 === y2;
+}
+
+function touchOrthogonalEdges({ x: x1, y: y1 }, { x: x2, y: y2 }, bounds) {
+ return (bounds.x.includes(x1) && bounds.y.includes(y2)) || (bounds.y.includes(y1) && bounds.x.includes(x2));
+}
+
+function getCornerPts({ x: [xMin, xMax], y: [yMin, yMax] }) {
+ const corners = [[xMin, yMin], [xMax, yMin], [xMax, yMax], [xMin, yMax]];
+ return corners.map(([x, y]) => new Point(x, y));
+}
+
+function getBounds({ x, y, width, height }) {
+ return {
+ x: [x, x + width],
+ y: [y, y + height]
+ };
+}
+
+// which arcpt does aimpt share a value with?
+// if they share an x value, we will look for corner y value
+// if they share a y value, we will look for corner x value
+// is aim pt non-shared value greater or less than arcpt non-shared value?
+function findWhichTwoCorners(pt, bounds, ...pts) {
+ const ptVals = Object.values(pt),
+ sharedValPt = pts.find(({ x, y }) => ptVals.includes(x) || ptVals.includes(y));
+
+ if (!sharedValPt) {
+ return;
+ }
+
+ const nonSharedValKey = pt.x === sharedValPt.x ? 'y' : 'x';
+ let cornerVal;
+
+ if (pt[nonSharedValKey] < sharedValPt[nonSharedValKey]) {
+ cornerVal = Math.min(...bounds[nonSharedValKey]);
+ } else {
+ cornerVal = Math.max(...bounds[nonSharedValKey]);
+ }
+
+ return getCornerPts(bounds).filter(cp => cp[nonSharedValKey] === cornerVal);
+}
+
+function selectCornerPoints(aimPt, arcPt1, arcPt2, bounds) {
+ const cornerPts = getCornerPts(bounds);
+
+ let points;
+
+ if (touchSameEdge(arcPt1, arcPt2)) {
+ // 0-corner case
+ points = [];
+ } else if (touchOrthogonalEdges(arcPt1, arcPt2, bounds)) {
+ if (touchSameEdge(aimPt, arcPt1) || touchSameEdge(aimPt, arcPt2)) {
+ // 1-corner case
+ let cp = cornerPts.find(cp => shareValue(cp, arcPt1) && shareValue(cp, arcPt2));
+ points = [cp];
+ } else {
+ // 3-corner case
+ points = cornerPts.filter(cp => !shareValue(cp, arcPt1) || !shareValue(cp, arcPt2));
+ }
+ } else {
+ if (touchSameEdge(aimPt, arcPt1) || touchSameEdge(aimPt, arcPt2)) {
+ // 2-corner case, aim and an arc point touch the same edge
+ points = findWhichTwoCorners(aimPt, bounds, arcPt1, arcPt2);
+ } else {
+ // 2-corner case, aim and both arc points all touch different edges
+ points = cornerPts.filter(cp => shareValue(cp, aimPt) || shareValue(cp, aimPt));
+ }
+ }
+
+ return points;
+}
+
+function orderPoints(arcPoints, cornerPts) {
+ if (cornerPts.length === 0) {
+ return arcPoints;
+ }
+
+ const index = cornerPts.findIndex(cp => shareValue(cp, arcPoints.at(0)));
+ return cornerPts.slice(0, index + 1).concat(arcPoints).concat(cornerPts.slice(index + 1));
+}
+
+function calcArcLinePtDeltas(aimPt, pivotPt, size) {
+ const angle = calculateAngle(aimPt.x - pivotPt.x, aimPt.y - pivotPt.y),
+ arcAngle = arcSize[size],
+ distance = Math.sqrt((aimPt.x - pivotPt.x) ** 2 + (aimPt.y - pivotPt.y) ** 2),
+ yDelta = distance * Math.cos(angle) * Math.tan(arcAngle),
+ xDelta = distance * Math.sin(angle) * Math.tan(arcAngle);
+
+ return { xDelta, yDelta };
+}
+
+function calcPoints(e, aimLine, grid, size) {
+ const pointer = new DOMPoint(e.clientX, e.clientY),
+ pointerPt = pointer.matrixTransform(grid.getScreenCTM().inverse()),
+ pivotPt = new Point(aimLine.getAttribute('x1'), aimLine.getAttribute('y1')),
+
+ bounds = getBounds(grid.getBBox()),
+ aimPt = calcEdgePt(pivotPt, pointerPt, bounds),
+
+ { xDelta, yDelta } = calcArcLinePtDeltas(aimPt, pivotPt, size),
+ arcPt1 = calcEdgePt(pivotPt, new Point(aimPt.x - xDelta, aimPt.y - yDelta), bounds),
+ arcPt2 = calcEdgePt(pivotPt, new Point(aimPt.x + xDelta, aimPt.y + yDelta), bounds),
+
+ outlinePoints = [arcPt2, pivotPt, arcPt1],
+ cornerPoints = selectCornerPoints(aimPt, arcPt1, arcPt2, bounds),
+ arcPoints = orderPoints(outlinePoints, cornerPoints);
+
+ return { aimPt, outlinePoints, arcPoints };
+}
+
+function setDataAttrs({ dataset: { allegiance, number }}, el) {
+ el.dataset.allegiance = allegiance;
+ el.dataset.number = number;
+}
+
+function getClipPathId({ dataset: { allegiance, number }}) {
+ return `clip-path-${allegiance}-${number}`;
+}
+
+function getUnclipped(svg) {
+ return svg.querySelectorAll('#firing-arcs #shapes polygon:not([clip-path]), #firing-arcs #lines polyline:not([clip-path])');
+};
+
+function createAimLine(x, y, container) {
+ const aimLine = document.createElementNS(svgns, 'line');
+ aimLine.setAttributeNS(null, 'x1', x);
+ aimLine.setAttributeNS(null, 'y1', y);
+ aimLine.setAttributeNS(null, 'x2', x);
+ aimLine.setAttributeNS(null, 'y2', y);
+ container.appendChild(aimLine);
+
+ return aimLine;
+}
+
+function createClipPath(x, y, id, container) {
+ const clipShape = document.createElementNS(svgns, 'circle'),
+ clipPath = document.createElementNS(svgns, 'clipPath');
+
+ clipShape.setAttributeNS(null, 'cx', x);
+ clipShape.setAttributeNS(null, 'cy', y);
+ clipShape.setAttributeNS(null, 'r', clippedFiringArcRadius);
+
+ clipPath.setAttributeNS(null, 'id', id);
+ clipPath.appendChild(clipShape);
+ container.appendChild(clipPath);
+
+ return clipPath;
+}
+
+function createFiringArc(x, y, size, container) {
+ const firingArc = document.createElementNS(svgns, 'polygon');
+ firingArc.setAttributeNS(null, 'points', `${x},${y}`);
+ firingArc.dataset.size = size;
+ firingArc.classList.add('firing-arc', 'active');
+ container.appendChild(firingArc);
+
+ return firingArc;
+}
+
+function createFiringArcOutline(x, y, container) {
+ const firingArcOutline = document.createElementNS(svgns, 'polyline');
+ firingArcOutline.setAttributeNS(null, 'points', `${x},${y}`);
+ container.appendChild(firingArcOutline);
+
+ return firingArcOutline;
+}
+
+function queryContainers(svg) {
+ const grid = svg.querySelector('.grid'),
+ arcContainer = svg.querySelector('#firing-arcs'),
+ arcLayer = arcContainer.querySelector('#shapes'),
+ outlineLayer = arcContainer.querySelector('#lines');
+
+ return { grid, containers: { arcContainer, arcLayer, outlineLayer }};
+}
+
+function create(x, y, size, counter, { arcContainer, arcLayer, outlineLayer }) {
+ const aimLine = createAimLine(x, y, outlineLayer),
+ firingArc = createFiringArc(x, y, size, arcLayer),
+ firingArcOutline = createFiringArcOutline(x, y, outlineLayer),
+ clipPath = createClipPath(x, y, getClipPathId(counter), arcContainer);
+
+ setDataAttrs(counter, firingArc);
+ setDataAttrs(counter, firingArcOutline);
+ setDataAttrs(counter, clipPath);
+
+ return { aimLine, firingArc, firingArcOutline };
+}
+
+function set(svg, size, counter, { x, y }) {
+ get(svg, counter).forEach(el => el.remove());
+
+ const { grid, containers } = queryContainers(svg),
+ { aimLine, firingArc, firingArcOutline } = create(x, y, size, counter, containers);
+
+ function positionListener(e) {
+ const { aimPt, outlinePoints, arcPoints } = calcPoints(e, aimLine, grid, size);
+
+ aimLine.setAttributeNS(null, 'x2', aimPt.x);
+ aimLine.setAttributeNS(null, 'y2', aimPt.y);
+ firingArcOutline.setAttributeNS(null, 'points', outlinePoints.join(' '));
+ firingArc.setAttributeNS(null, 'points', arcPoints.join(' '));
+ }
+
+ function placementListener() {
+ aimLine.remove();
+ firingArc.classList.remove('active');
+ grid.removeAttribute('style');
+ svg.removeEventListener('mousemove', positionListener);
+ }
+
+ function cancelPlacementListener(e) {
+ e.preventDefault();
+
+ get(counter).forEach(el => el.remove());
+ grid.removeAttribute('style');
+ svg.removeEventListener('mousemove', positionListener);
+ }
+
+ grid.style.pointerEvents = 'none';
+ firingArc.addEventListener('click', placementListener, { once: true });
+ firingArc.addEventListener('contextmenu', cancelPlacementListener, { once: true });
+ svg.addEventListener('mousemove', positionListener);
+}
+
+function clear(svg, allegiance) {
+ const selector = `#firing-arcs [data-allegiance="${allegiance}"]`;
+ svg.querySelectorAll(selector).forEach(el => el.remove());
+}
+
+function get(svg, { dataset: { allegiance, number }}) {
+ return svg.querySelectorAll(`#firing-arcs [data-number="${number}"][data-allegiance="${allegiance}"], #firing-arcs line`);
+}
+
+function toggleVisibility(svg, allegiance) {
+ const vis = firingArcVisibility[allegiance],
+ clipPaths = svg.querySelectorAll(`clipPath[data-allegiance="${allegiance}"]`);
+
+ clipPaths.forEach(cp => cp.style.display = !vis ? 'none' : '');
+ firingArcVisibility[allegiance] = !vis;
+}
+
+function toggleCounterVisibility(svg, { dataset: { number, allegiance }}, vis) {
+ const cp = svg.querySelector(`#clip-path-${allegiance}-${number}`),
+ display = vis ? 'none' : '';
+
+ if (cp) {
+ cp.style.display = firingArcVisibility[allegiance] ? 'none' : display;
+ }
+}
+
+function clipAll(svg) {
+ getUnclipped(svg).forEach(el => {
+ const { number, allegiance } = el.dataset,
+ clipPathId = `clip-path-${allegiance}-${number}`,
+ isVisible = firingArcVisibility[allegiance];
+
+ if (isVisible) {
+ svg.querySelector(`#${clipPathId}`).style.display = 'none';
+ }
+
+ el.setAttributeNS(null, 'clip-path', `url(#${clipPathId})`);
+ });
+}
+
+export { set, clear, get, toggleVisibility, toggleCounterVisibility, clipAll };