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();
|
const board = this.getBoard();
|
||||||
|
|
||||||
this.firingArc = new FiringArc(svg, board);
|
this.firingArc = FiringArc(svg, board);
|
||||||
this.sightLine = SightLine(svg, board);
|
this.sightLine = SightLine(svg, board);
|
||||||
|
|
||||||
console.log(this.sightLine);
|
|
||||||
|
|
||||||
this.counter = new Counter(svg);
|
this.counter = new Counter(svg);
|
||||||
|
|
||||||
this.setUpCells();
|
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
|
// Horizontal distance between hex centers is sqrt(3) * size. The vertical
|
||||||
// distance is 3 / 2 * size. When we calculate horzDist / vertDist, the size
|
// 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
|
// 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;
|
clippedFiringArcRadius = 25;
|
||||||
|
|
||||||
let svg;
|
|
||||||
|
|
||||||
class Point {
|
class Point {
|
||||||
constructor(x = 0, y = 0) {
|
constructor(x = 0, y = 0) {
|
||||||
this.x = +x;
|
this.x = +x;
|
||||||
@ -156,16 +153,16 @@ function selectCornerPoints(aimPt, arcPt1, arcPt2, bounds) {
|
|||||||
return points;
|
return points;
|
||||||
}
|
}
|
||||||
|
|
||||||
function orderPoints(arcPoints, cornerPoints) {
|
function orderPoints(arcPoints, cornerPts) {
|
||||||
if (cornerPoints.length === 0) {
|
if (cornerPts.length === 0) {
|
||||||
return arcPoints;
|
return arcPoints;
|
||||||
}
|
}
|
||||||
|
|
||||||
const index = cornerPoints.findIndex(cp => shareValue(cp, arcPoints.at(0)));
|
const index = cornerPts.findIndex(cp => shareValue(cp, arcPoints.at(0)));
|
||||||
return cornerPoints.slice(0, index + 1).concat(arcPoints).concat(cornerPoints.slice(index + 1));
|
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),
|
const angle = calculateAngle(aimPt.x - pivotPt.x, aimPt.y - pivotPt.y),
|
||||||
arcAngle = arcSize[size],
|
arcAngle = arcSize[size],
|
||||||
distance = Math.sqrt((aimPt.x - pivotPt.x) ** 2 + (aimPt.y - pivotPt.y) ** 2),
|
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 };
|
return { xDelta, yDelta };
|
||||||
}
|
}
|
||||||
|
|
||||||
function position(e, firingArc, firingArcOutline, aimLine, grid) {
|
function calcPoints(e, aimLine, grid, size) {
|
||||||
// TODO: handle exactly horizontal and vertical lines?
|
|
||||||
|
|
||||||
const pointer = new DOMPoint(e.clientX, e.clientY),
|
const pointer = new DOMPoint(e.clientX, e.clientY),
|
||||||
pointerPt = pointer.matrixTransform(grid.getScreenCTM().inverse()),
|
pointerPt = pointer.matrixTransform(grid.getScreenCTM().inverse()),
|
||||||
pivotPt = new Point(aimLine.getAttribute('x1'), aimLine.getAttribute('y1')),
|
pivotPt = new Point(aimLine.getAttribute('x1'), aimLine.getAttribute('y1')),
|
||||||
@ -185,7 +180,7 @@ function position(e, firingArc, firingArcOutline, aimLine, grid) {
|
|||||||
bounds = getBounds(grid.getBBox()),
|
bounds = getBounds(grid.getBBox()),
|
||||||
aimPt = calcEdgePt(pivotPt, pointerPt, bounds),
|
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),
|
arcPt1 = calcEdgePt(pivotPt, new Point(aimPt.x - xDelta, aimPt.y - yDelta), bounds),
|
||||||
arcPt2 = 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),
|
cornerPoints = selectCornerPoints(aimPt, arcPt1, arcPt2, bounds),
|
||||||
arcPoints = orderPoints(outlinePoints, cornerPoints);
|
arcPoints = orderPoints(outlinePoints, cornerPoints);
|
||||||
|
|
||||||
aimLine.setAttributeNS(null, 'x2', aimPt.x);
|
return { aimPt, outlinePoints, arcPoints };
|
||||||
aimLine.setAttributeNS(null, 'y2', aimPt.y);
|
|
||||||
|
|
||||||
firingArcOutline.setAttributeNS(null, 'points', outlinePoints.join(' '));
|
|
||||||
firingArc.setAttributeNS(null, 'points', arcPoints.join(' '));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function setDataAttrs({ dataset: { allegiance, number }}, el) {
|
function setDataAttrs({ dataset: { allegiance, number }}, el) {
|
||||||
@ -209,7 +200,7 @@ function getClipPathId({ dataset: { allegiance, number }}) {
|
|||||||
return `clip-path-${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])');
|
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) {
|
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, 'cx', x);
|
||||||
clipShape.setAttributeNS(null, 'cy', y);
|
clipShape.setAttributeNS(null, 'cy', y);
|
||||||
clipShape.setAttributeNS(null, 'r', clippedFiringArcRadius);
|
clipShape.setAttributeNS(null, 'r', clippedFiringArcRadius);
|
||||||
|
|
||||||
const clipPath = document.createElementNS(svgns, 'clipPath');
|
|
||||||
clipPath.setAttributeNS(null, 'id', id);
|
clipPath.setAttributeNS(null, 'id', id);
|
||||||
clipPath.appendChild(clipShape);
|
clipPath.appendChild(clipShape);
|
||||||
|
|
||||||
container.appendChild(clipPath);
|
container.appendChild(clipPath);
|
||||||
|
|
||||||
return clipPath;
|
return clipPath;
|
||||||
@ -257,18 +248,17 @@ function createFiringArcOutline(x, y, container) {
|
|||||||
return firingArcOutline;
|
return firingArcOutline;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function (el) {
|
function queryContainers(svg) {
|
||||||
svg = el;
|
|
||||||
|
|
||||||
this.set = function (size, counter, { x, y }) {
|
|
||||||
this.get(counter).forEach(fa => fa.remove());
|
|
||||||
|
|
||||||
const grid = svg.querySelector('.grid'),
|
const grid = svg.querySelector('.grid'),
|
||||||
arcContainer = svg.querySelector('#firing-arcs'),
|
arcContainer = svg.querySelector('#firing-arcs'),
|
||||||
arcLayer = arcContainer.querySelector('#shapes'),
|
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),
|
firingArc = createFiringArc(x, y, size, arcLayer),
|
||||||
firingArcOutline = createFiringArcOutline(x, y, outlineLayer),
|
firingArcOutline = createFiringArcOutline(x, y, outlineLayer),
|
||||||
clipPath = createClipPath(x, y, getClipPathId(counter), arcContainer);
|
clipPath = createClipPath(x, y, getClipPathId(counter), arcContainer);
|
||||||
@ -277,8 +267,23 @@ export default function (el) {
|
|||||||
setDataAttrs(counter, firingArcOutline);
|
setDataAttrs(counter, firingArcOutline);
|
||||||
setDataAttrs(counter, clipPath);
|
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) {
|
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() {
|
function placementListener() {
|
||||||
@ -288,13 +293,13 @@ export default function (el) {
|
|||||||
svg.removeEventListener('mousemove', positionListener);
|
svg.removeEventListener('mousemove', positionListener);
|
||||||
}
|
}
|
||||||
|
|
||||||
let cancelPlacementListener = e => {
|
function cancelPlacementListener(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
this.get(counter).forEach(fa => fa.remove());
|
get(counter).forEach(fa => fa.remove());
|
||||||
grid.removeAttribute('style');
|
grid.removeAttribute('style');
|
||||||
svg.removeEventListener('mousemove', positionListener);
|
svg.removeEventListener('mousemove', positionListener);
|
||||||
};
|
}
|
||||||
|
|
||||||
grid.style.pointerEvents = 'none';
|
grid.style.pointerEvents = 'none';
|
||||||
firingArc.addEventListener('click', placementListener, { once: true });
|
firingArc.addEventListener('click', placementListener, { once: true });
|
||||||
@ -302,16 +307,16 @@ export default function (el) {
|
|||||||
svg.addEventListener('mousemove', positionListener);
|
svg.addEventListener('mousemove', positionListener);
|
||||||
};
|
};
|
||||||
|
|
||||||
this.clear = function (allegiance) {
|
function clear(allegiance) {
|
||||||
const selector = `#firing-arcs [data-allegiance="${allegiance}"]`;
|
const selector = `#firing-arcs [data-allegiance="${allegiance}"]`;
|
||||||
svg.querySelectorAll(selector).forEach(el => el.remove());
|
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`);
|
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],
|
const vis = firingArcVisibility[allegiance],
|
||||||
clipPaths = svg.querySelectorAll(`clipPath[data-allegiance="${allegiance}"]`);
|
clipPaths = svg.querySelectorAll(`clipPath[data-allegiance="${allegiance}"]`);
|
||||||
|
|
||||||
@ -319,7 +324,7 @@ export default function (el) {
|
|||||||
firingArcVisibility[allegiance] = !vis;
|
firingArcVisibility[allegiance] = !vis;
|
||||||
};
|
};
|
||||||
|
|
||||||
this.toggleCounterVisibility = function ({ dataset: { number, allegiance }}, vis) {
|
function toggleCounterVisibility({ dataset: { number, allegiance }}, vis) {
|
||||||
const cp = svg.querySelector(`#clip-path-${allegiance}-${number}`),
|
const cp = svg.querySelector(`#clip-path-${allegiance}-${number}`),
|
||||||
display = vis ? 'none' : '';
|
display = vis ? 'none' : '';
|
||||||
|
|
||||||
@ -328,8 +333,8 @@ export default function (el) {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
this.clipAll = function () {
|
function clipAll() {
|
||||||
let unclipped = getUnclipped();
|
const unclipped = getUnclipped(svg);
|
||||||
|
|
||||||
unclipped.forEach(el => {
|
unclipped.forEach(el => {
|
||||||
const { number, allegiance } = el.dataset,
|
const { number, allegiance } = el.dataset,
|
||||||
@ -343,4 +348,6 @@ export default function (el) {
|
|||||||
el.setAttributeNS(null, 'clip-path', `url(#${clipPathId})`);
|
el.setAttributeNS(null, 'clip-path', `url(#${clipPathId})`);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
return { set, clear, get, toggleVisibility, toggleCounterVisibility, clipAll };
|
||||||
}
|
}
|
||||||
|
@ -167,10 +167,10 @@ export default function(svg, board) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
draw: draw,
|
draw,
|
||||||
clear: clear,
|
clear,
|
||||||
update: update,
|
update,
|
||||||
toggleLock: toggleLock,
|
toggleLock,
|
||||||
|
|
||||||
get sightLine() {
|
get sightLine() {
|
||||||
return sightLine;
|
return sightLine;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user