Web Dev Solutions

// 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 = {
    defender: false,
    attacker: 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, squad }}, el) {
  el.dataset.allegiance = allegiance;
  el.dataset.number = number;
  el.dataset.squad = squad;
}

function getClipPathId({ dataset: { allegiance, number, squad }}) {
  return `clip-path-${allegiance}-${squad}-${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(svg, 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, squad }}) {
  return svg.querySelectorAll(
    `#firing-arcs [data-number="${number}"][data-allegiance="${allegiance}"][data-squad="${squad}"],
    #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, counter, vis) {
  const cp = svg.querySelector(`#${getClipPathId(counter)}`),
    display = vis ? 'none' : '';

  if (cp) {
    cp.style.display = firingArcVisibility[counter.dataset.allegiance] ? 'none' : display;
  }
}

function clipAll(svg) {
  getUnclipped(svg).forEach(el => {
    const clipPathId = getClipPathId(el),
      isVisible = firingArcVisibility[el.dataset.allegiance];

    if (isVisible) {
      svg.querySelector(`#${clipPathId}`).style.display = 'none';
    }

    el.setAttributeNS(null, 'clip-path', `url(#${clipPathId})`);
  });
}

export { set, clear, get, toggleVisibility, toggleCounterVisibility, clipAll };