From ce98e325656b8419b80d8c248e0469f3a9708322 Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Sat, 27 Apr 2024 15:58:11 -0700
Subject: Rename some files
---
src/modules/game/firingArc.js | 348 ------------------------------------------
1 file changed, 348 deletions(-)
delete mode 100644 src/modules/game/firingArc.js
(limited to 'src/modules/game/firingArc.js')
diff --git a/src/modules/game/firingArc.js b/src/modules/game/firingArc.js
deleted file mode 100644
index 817bc44..0000000
--- a/src/modules/game/firingArc.js
+++ /dev/null
@@ -1,348 +0,0 @@
-// 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 };
--
cgit v1.2.3