Remove calling firing arc module with 'new'
This commit is contained in:
parent
ea3341323a
commit
bcd34e76db
@ -13,11 +13,8 @@ export default class Game {
|
||||
|
||||
const board = this.getBoard();
|
||||
|
||||
this.firingArc = new FiringArc(svg, board);
|
||||
this.firingArc = FiringArc(svg, board);
|
||||
this.sightLine = SightLine(svg, board);
|
||||
|
||||
console.log(this.sightLine);
|
||||
|
||||
this.counter = new Counter(svg);
|
||||
|
||||
this.setUpCells();
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
// https://www.redblobgames.com/grids/hexagons/
|
||||
|
||||
// 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
|
||||
@ -21,8 +20,6 @@ const svgns = "http://www.w3.org/2000/svg",
|
||||
|
||||
clippedFiringArcRadius = 25;
|
||||
|
||||
let svg;
|
||||
|
||||
class Point {
|
||||
constructor(x = 0, y = 0) {
|
||||
this.x = +x;
|
||||
@ -156,16 +153,16 @@ function selectCornerPoints(aimPt, arcPt1, arcPt2, bounds) {
|
||||
return points;
|
||||
}
|
||||
|
||||
function orderPoints(arcPoints, cornerPoints) {
|
||||
if (cornerPoints.length === 0) {
|
||||
function orderPoints(arcPoints, cornerPts) {
|
||||
if (cornerPts.length === 0) {
|
||||
return arcPoints;
|
||||
}
|
||||
|
||||
const index = cornerPoints.findIndex(cp => shareValue(cp, arcPoints.at(0)));
|
||||
return cornerPoints.slice(0, index + 1).concat(arcPoints).concat(cornerPoints.slice(index + 1));
|
||||
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, { dataset: { size }}) {
|
||||
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),
|
||||
@ -175,9 +172,7 @@ function calcArcLinePtDeltas(aimPt, pivotPt, { dataset: { size }}) {
|
||||
return { xDelta, yDelta };
|
||||
}
|
||||
|
||||
function position(e, firingArc, firingArcOutline, aimLine, grid) {
|
||||
// TODO: handle exactly horizontal and vertical lines?
|
||||
|
||||
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')),
|
||||
@ -185,7 +180,7 @@ function position(e, firingArc, firingArcOutline, aimLine, grid) {
|
||||
bounds = getBounds(grid.getBBox()),
|
||||
aimPt = calcEdgePt(pivotPt, pointerPt, bounds),
|
||||
|
||||
{ xDelta, yDelta } = calcArcLinePtDeltas(aimPt, pivotPt, firingArc),
|
||||
{ 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),
|
||||
|
||||
@ -193,11 +188,7 @@ function position(e, firingArc, firingArcOutline, aimLine, grid) {
|
||||
cornerPoints = selectCornerPoints(aimPt, arcPt1, arcPt2, bounds),
|
||||
arcPoints = orderPoints(outlinePoints, cornerPoints);
|
||||
|
||||
aimLine.setAttributeNS(null, 'x2', aimPt.x);
|
||||
aimLine.setAttributeNS(null, 'y2', aimPt.y);
|
||||
|
||||
firingArcOutline.setAttributeNS(null, 'points', outlinePoints.join(' '));
|
||||
firingArc.setAttributeNS(null, 'points', arcPoints.join(' '));
|
||||
return { aimPt, outlinePoints, arcPoints };
|
||||
}
|
||||
|
||||
function setDataAttrs({ dataset: { allegiance, number }}, el) {
|
||||
@ -209,7 +200,7 @@ function getClipPathId({ dataset: { allegiance, number }}) {
|
||||
return `clip-path-${allegiance}-${number}`;
|
||||
}
|
||||
|
||||
function getUnclipped() {
|
||||
function getUnclipped(svg) {
|
||||
return svg.querySelectorAll('#firing-arcs #shapes polygon:not([clip-path]), #firing-arcs #lines polyline:not([clip-path])');
|
||||
};
|
||||
|
||||
@ -225,15 +216,15 @@ function createAimLine(x, y, container) {
|
||||
}
|
||||
|
||||
function createClipPath(x, y, id, container) {
|
||||
const clipShape = document.createElementNS(svgns, 'circle');
|
||||
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);
|
||||
|
||||
const clipPath = document.createElementNS(svgns, 'clipPath');
|
||||
clipPath.setAttributeNS(null, 'id', id);
|
||||
clipPath.appendChild(clipShape);
|
||||
|
||||
container.appendChild(clipPath);
|
||||
|
||||
return clipPath;
|
||||
@ -257,18 +248,17 @@ function createFiringArcOutline(x, y, container) {
|
||||
return firingArcOutline;
|
||||
}
|
||||
|
||||
export default function (el) {
|
||||
svg = el;
|
||||
|
||||
this.set = function (size, counter, { x, y }) {
|
||||
this.get(counter).forEach(fa => fa.remove());
|
||||
|
||||
function queryContainers(svg) {
|
||||
const grid = svg.querySelector('.grid'),
|
||||
arcContainer = svg.querySelector('#firing-arcs'),
|
||||
arcLayer = arcContainer.querySelector('#shapes'),
|
||||
outlineLayer = arcContainer.querySelector('#lines'),
|
||||
outlineLayer = arcContainer.querySelector('#lines');
|
||||
|
||||
aimLine = createAimLine(x, y, outlineLayer),
|
||||
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);
|
||||
@ -277,8 +267,23 @@ export default function (el) {
|
||||
setDataAttrs(counter, firingArcOutline);
|
||||
setDataAttrs(counter, clipPath);
|
||||
|
||||
return { aimLine, firingArc, firingArcOutline };
|
||||
}
|
||||
|
||||
export default function (svg) {
|
||||
function set(size, counter, { x, y }) {
|
||||
get(counter).forEach(fa => fa.remove());
|
||||
|
||||
const { grid, containers } = queryContainers(svg),
|
||||
{ aimLine, firingArc, firingArcOutline } = create(x, y, size, counter, containers);
|
||||
|
||||
function positionListener(e) {
|
||||
position(e, firingArc, firingArcOutline, aimLine, grid);
|
||||
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() {
|
||||
@ -288,13 +293,13 @@ export default function (el) {
|
||||
svg.removeEventListener('mousemove', positionListener);
|
||||
}
|
||||
|
||||
let cancelPlacementListener = e => {
|
||||
function cancelPlacementListener(e) {
|
||||
e.preventDefault();
|
||||
|
||||
this.get(counter).forEach(fa => fa.remove());
|
||||
get(counter).forEach(fa => fa.remove());
|
||||
grid.removeAttribute('style');
|
||||
svg.removeEventListener('mousemove', positionListener);
|
||||
};
|
||||
}
|
||||
|
||||
grid.style.pointerEvents = 'none';
|
||||
firingArc.addEventListener('click', placementListener, { once: true });
|
||||
@ -302,16 +307,16 @@ export default function (el) {
|
||||
svg.addEventListener('mousemove', positionListener);
|
||||
};
|
||||
|
||||
this.clear = function (allegiance) {
|
||||
function clear(allegiance) {
|
||||
const selector = `#firing-arcs [data-allegiance="${allegiance}"]`;
|
||||
svg.querySelectorAll(selector).forEach(el => el.remove());
|
||||
};
|
||||
|
||||
this.get = function ({ dataset: { allegiance, number }}) {
|
||||
function get({ dataset: { allegiance, number }}) {
|
||||
return svg.querySelectorAll(`#firing-arcs [data-number="${number}"][data-allegiance="${allegiance}"], #firing-arcs line`);
|
||||
};
|
||||
|
||||
this.toggleVisibility = function (allegiance) {
|
||||
function toggleVisibility(allegiance) {
|
||||
const vis = firingArcVisibility[allegiance],
|
||||
clipPaths = svg.querySelectorAll(`clipPath[data-allegiance="${allegiance}"]`);
|
||||
|
||||
@ -319,7 +324,7 @@ export default function (el) {
|
||||
firingArcVisibility[allegiance] = !vis;
|
||||
};
|
||||
|
||||
this.toggleCounterVisibility = function ({ dataset: { number, allegiance }}, vis) {
|
||||
function toggleCounterVisibility({ dataset: { number, allegiance }}, vis) {
|
||||
const cp = svg.querySelector(`#clip-path-${allegiance}-${number}`),
|
||||
display = vis ? 'none' : '';
|
||||
|
||||
@ -328,8 +333,8 @@ export default function (el) {
|
||||
}
|
||||
};
|
||||
|
||||
this.clipAll = function () {
|
||||
let unclipped = getUnclipped();
|
||||
function clipAll() {
|
||||
const unclipped = getUnclipped(svg);
|
||||
|
||||
unclipped.forEach(el => {
|
||||
const { number, allegiance } = el.dataset,
|
||||
@ -343,4 +348,6 @@ export default function (el) {
|
||||
el.setAttributeNS(null, 'clip-path', `url(#${clipPathId})`);
|
||||
});
|
||||
};
|
||||
|
||||
return { set, clear, get, toggleVisibility, toggleCounterVisibility, clipAll };
|
||||
}
|
||||
|
||||
@ -167,10 +167,10 @@ export default function(svg, board) {
|
||||
}
|
||||
|
||||
return {
|
||||
draw: draw,
|
||||
clear: clear,
|
||||
update: update,
|
||||
toggleLock: toggleLock,
|
||||
draw,
|
||||
clear,
|
||||
update,
|
||||
toggleLock,
|
||||
|
||||
get sightLine() {
|
||||
return sightLine;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user