Web Dev Solutions

-function isEven(n) {

- return n % 2 === 0;

-}

-

-function radToDeg(radians) {

- return radians * 180 / Math.PI;

-}

-

-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 edgePoint(x1, y1, x2, y2, maxX, maxY) {

- let pointCoords,

- xDiff = x2 - x1,

- yDiff = y2 - y1,

- xIntercept = y => (y - y1) * xDiff / yDiff + x1,

- yIntercept = x => (x - x1) * yDiff / xDiff + y1;

-

- 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 >= 0 ? [maxX, y] : [xIntercept(0), 0];

- } else if (xDiff < 0 && yDiff < 0) {

- let x = xIntercept(0);

-

- pointCoords = x >= 0 ? [x, 0] : [0, yIntercept(0)];

- } else {

- let y = yIntercept(0);

-

- pointCoords = y <= maxY ? [0, y] : [xIntercept(maxY), maxY];

- }

-

- return pointCoords;

-}

-

-let getPointCoords = (x, y) => {

- let point = document.querySelector(`[data-x="${x}"][data-y="${y}"]`);

-

- return [point.x.baseVal.value, point.y.baseVal.value]

-};

-

-function positionFiringArc(e) {

- let activeFiringArc = document.querySelector('polygon.firing-arc.active');

-

- // TODO: handle exactly horizontal and vertical lines

-

- if (activeFiringArc) {

- let activeFiringArcOutline = document.querySelector(`#lines polygon[data-troop-number="${activeFiringArc.dataset.troopNumber}"][data-troop-allegiance="${activeFiringArc.dataset.troopAllegiance}"]`);

- board = document.getElementById('image-maps'),

- { width, height } = board.getBBox(),

- pt = new DOMPoint(e.clientX, e.clientY),

- { x: pointerX, y: pointerY } = pt.matrixTransform(board.getScreenCTM().inverse()),

- [maxXpx, maxYpx] = [width, height],

- {x: x1px, y: y1px} = activeFiringArc.points[0];

-

- let [x2px, y2px] = [

- pointerX / width * maxXpx,

- pointerY / height * maxYpx

- ];

-

- let xDiff = x2px - x1px;

- let yDiff = y2px - y1px;

- let angle = calculateAngle(xDiff, yDiff);

-

- let arcAngle = FIRING_ARC_SIZE[activeFiringArc.dataset.size];

- let distance = Math.sqrt((x2px - x1px)**2 + (y2px - y1px)**2);

- let yDelta = distance * Math.cos(angle) * Math.tan(arcAngle);

- let xDelta = distance * Math.sin(angle) * Math.tan(arcAngle);

-

- let [newY1, newX1] = [y2px + yDelta, x2px + xDelta];

- let [newY2, newX2] = [y2px - yDelta, x2px - xDelta];

-

- [newX1, newY1] = edgePoint(x1px, y1px, newX1, newY1, maxXpx, maxYpx);

- [newX2, newY2] = edgePoint(x1px, y1px, newX2, newY2, maxXpx, maxYpx);

-

- let oppositeEdgeConditions = [

- newX1 == 0 && newX2 == maxXpx,

- newX2 == 0 && newX1 == maxXpx,

- newY1 == 0 && newY2 == maxYpx,

- newY2 == 0 && newY1 == maxYpx

- ]

-

- let orthogonalEdgeConditions = [

- (newX1 == 0 || newX1 == maxXpx) && (newY2 == 0 || newY2 == maxYpx),

- (newX2 == 0 || newX2 == maxXpx) && (newY1 == 0 || newY1 == maxYpx),

- ]

-

- let points;

-

- if (oppositeEdgeConditions.some(e => e)) {

- let cornerPoints;

-

- if (xDiff > 0 && yDiff > 0) {

- if ((newY1 == 0 && newY2 == maxYpx) || (newY1 == maxYpx && newY2 == 0)) {

- cornerPoints = [[maxXpx, 0], [maxXpx, maxYpx]];

- } else {

- cornerPoints = [[maxXpx, maxYpx], [0, maxYpx]];

- }

- } else if (xDiff > 0 && yDiff < 0) {

- if ((newY1 == 0 && newY2 == maxYpx) || (newY1 == maxYpx && newY2 == 0)) {

- cornerPoints = [[maxXpx, 0], [maxXpx, maxYpx]];

- } else {

- cornerPoints = [[0, 0], [maxXpx, 0]];

- }

-

- } else if (xDiff < 0 && yDiff > 0) {

- if ((newY1 == 0 && newY2 == maxYpx) || (newY1 == maxYpx && newY2 == 0)) {

- cornerPoints = [[0, maxYpx], [0, 0]];

- } else {

- cornerPoints = [[maxXpx, maxYpx], [0, maxYpx]];

- }

-

- } else {

- if ((newY1 == 0 && newY2 == maxYpx) || (newY1 == maxYpx && newY2 == 0)) {

- cornerPoints = [[0, maxYpx], [0, 0]];

- } else {

- cornerPoints = [[0, 0], [maxXpx, 0]];

- }

-

- }

- points = `${x1px},${y1px} ${newX1},${newY1} ${cornerPoints[1]} ${cornerPoints[0]} ${newX2},${newY2}`;

- } else if (orthogonalEdgeConditions.some(e => e)) {

- let cornerPoints = [];

- let cp1, cp2;

-

- if (newX1 == 0 || newX1 == maxXpx) {

- cp1 = [newX1, yDiff > 0 ? maxYpx : 0];

- } else {

- cp1 = [xDiff > 0 ? maxXpx : 0, newY1];

- }

-

- if (newX2 == 0 || newX2 == maxXpx) {

- cp2 = [newX2, yDiff > 0 ? maxYpx : 0];

- } else {

- cp2 = [xDiff > 0 ? maxXpx : 0, newY2];

- }

-

- if (cp1[0] == cp2[0] && cp1[1] == cp2[1]) {

- cornerPoints.push(cp1);

- } else {

- cornerPoints.push(cp1);

- cornerPoints.push([xDiff > 0 ? maxXpx : 0, yDiff > 0 ? maxYpx : 0])

- cornerPoints.push(cp2);

- }

-

- points = `${x1px},${y1px} ${newX1},${newY1} ${cornerPoints.join(' ')} ${newX2},${newY2}`;

- } else {

- points = `${x1px},${y1px} ${newX1},${newY1} ${newX2},${newY2}`;

- }

-

- activeFiringArcOutline.setAttributeNS(null, 'points', points);

- activeFiringArc.setAttributeNS(null, 'points', points);

- }

-}

-

-function evenr_to_axial(x, y) {

- return {q: x - (y + (y & 1)) / 2, r: y};

-}

-

-function axial_to_evenr(q, r) {

- return {x: q + (r + (r & 1)) / 2, y: r};

-}

-

-function axial_distance(q1, r1, q2, r2) {

- return (Math.abs(q1 - q2) + Math.abs(q1 + r1 - q2 - r2) + Math.abs(r1 - r2)) / 2;

-}

-

-function offset_distance(x1, y1, x2, y2) {

- let { q: q1, r: r1 } = evenr_to_axial(x1, y1),

- { q: q2, r: r2 } = evenr_to_axial(x2, y2);

-

- return axial_distance(q1, r1, q2, r2);

-}

-

-function cube_to_axial(q, r, s) {

- return { q: q, r: r };

-}

-

-function axial_to_cube(q, r) {

- return { q: q, r: r, s: -q - r};

-}

-

-function cube_round(q, r, s) {

- rQ = Math.round(q);

- rR = Math.round(r);

- rS = Math.round(s);

-

- let q_diff = Math.abs(rQ - q),

- r_diff = Math.abs(rR - r),

- s_diff = Math.abs(rS - s);

-

- if (q_diff > r_diff && q_diff > s_diff) {

- rQ = -rR - rS;

- } else if (r_diff > s_diff) {

- rR = -rQ - rS;

- } else {

- rS = -rQ - rR;

- }

-

- return {q: rQ, r: rR, s: rS};

-}

-

-function axial_round(q, r) {

- let cube = axial_to_cube(q, r),

- round = cube_round(cube.q, cube.r, cube.s),

- axial = cube_to_axial(round.q, round.r, round.s);

-

- return {q: axial.q, r: axial.r};

-}

-

-function lerp(a, b, t) {

- return a + (b - a) * t;

-}

-

-function axial_lerp(q1, r1, q2, r2, t) {

- return { q: lerp(q1, q2, t), r: lerp(r1, r2, t) };

-}

-

-function linedraw(x1, y1, x2, y2) {

- let axial1 = evenr_to_axial(x1, y1),

- axial2 = evenr_to_axial(x2, y2),

- n = offset_distance(x1, y1, x2, y2),

- results = [];

-

- for (let i = 0; i <= n; i++) {

- let lerp = axial_lerp(axial1.q, axial1.r, axial2.q, axial2.r, 1.0 / n * i),

- round = axial_round(lerp.q, lerp.r),

- { x, y } = axial_to_evenr(round.q, round.r);

-

- results.push([x, y]);

- }

-

- return results;

-}

-

-const svgns = "http://www.w3.org/2000/svg",

- svg = document.querySelector('svg'),

- hex = document.getElementById('point'),

- ptGrp = document.getElementById('points'),

- cntrGrp = document.getElementById('counters'),

- settingsPanel = document.getElementById('panel'),

- recordSheetVisibility = document.querySelector('#content input[type="checkbox"].visible');

-

-const q = s => document.querySelector(s),

- qA = s => document.querySelectorAll(s);

-

-const { x: VIEWBOX_X, y: VIEWBOX_Y, width: VIEWBOX_WIDTH, height: VIEWBOX_HEIGHT } =

- svg.viewBox.baseVal;

-

-const COLUMN_COUNT = 33,

- ROW_COUNT = 51,

-// const COLUMN_COUNT = 20,

-// ROW_COUNT = 20,

- HORZ_POINT_DISTANCE = 1.005,

- VERT_POINT_DISTANCE = Math.sqrt(3) * HORZ_POINT_DISTANCE / 2,

- ALTERNATING_OFFSET = HORZ_POINT_DISTANCE / 2,

- CIRCUMRADIUS = Math.max(...[...new Set(Object.values(hex.points).flatMap(({x, y}) => [x, y]))]),

- INRADIUS = CIRCUMRADIUS * Math.sqrt(3) / 2,

- [COLUMNS, ROWS] = [COLUMN_COUNT, ROW_COUNT].map(n => [...Array(n).keys()]),

- POINTS = ROWS.map(y => COLUMNS.map(x => [x, y]));

-

-const FIRING_ARC_SIZE = {

- 'small': Math.atan(HORZ_POINT_DISTANCE / (6 * VERT_POINT_DISTANCE)),

- 'medium': Math.atan((HORZ_POINT_DISTANCE / 2) / VERT_POINT_DISTANCE),

- 'large': Math.atan((21 * HORZ_POINT_DISTANCE) / (6 * VERT_POINT_DISTANCE))

- }

-

-let prevVb = localStorage.getItem('viewBox');

-

-if (prevVb) {

- svg.setAttributeNS(null, 'viewBox', prevVb);

-}

-

-let info = document.getElementById('status');

-

-Object.values(settingsPanel.querySelectorAll('fieldset')).forEach(fieldset => {

-// [].forEach(fieldset => {

- const identityMtx = [1, 0, 0, 1, 0, 0];

- const target = document.getElementById(fieldset.name);

- const transform = getComputedStyle(target).transform.match(/-?\d+\.?\d*/g) || identityMtx;

- const inputs = fieldset.querySelectorAll('input');

-

- if (transform) {

- const [a, b, c, d, e, f] = transform.map(n => parseFloat(n));

-

- // a c e

- // b d f

-

- const scaleX = Math.sqrt(a**2 + c**2);

- const scaleY = Math.sqrt(b**2 + d**2);

-

- let values = {

- scaleX: Math.round(scaleX * 1000) / 1000,

- scaleY: Math.round(scaleY * 1000) / 1000,

- translateX: e,

- translateY: f,

- rotate: Math.round(radToDeg((Math.acos(a / scaleX) + Math.asin(b / scaleY)) / 2) * 10) / 10

- }

-

- inputs.forEach(input => input.value = values[input.name]);

- }

-

- inputs.forEach(input => {

- input.addEventListener('pointerenter', e => e.target.focus());

-

- input.addEventListener('input', e => {

- let { translateX, translateY, rotate, scaleX, scaleY } =

- Object.values(inputs).reduce((acc, input) => {

- acc[input.name] = input.value;

- return acc;

- }, {});

-

- let transform = `translate(${translateX}px, ${translateY}px) rotate(${rotate}deg) scale(${scaleX}, ${scaleY})`;

- target.style.transform = transform;

- });

-

- input.addEventListener('pointerleave', () => document.activeElement.blur());

- });

-});

-

-function ptGrpToSvgPt(x, y) {

- let transProp = getComputedStyle(ptGrp).transform.match(/-?\d+\.?\d*/g),

- mtx = new DOMMatrix(transProp || ''),

- pt = new DOMPoint(x, y),

- svgP = pt.matrixTransform(mtx);

-

- return svgP;

-}

-

-const grid = document.getElementById('grid');

-

-const Counter = new function() {

- let container = ptGrp,

- selectedClass = 'selected',

-

- dataSelector = function(troopNumber, allegiance) {

- return `[data-troop-number="${troopNumber}"][data-troop-allegiance="${allegiance}"]`;

- },

-

- selector = function(troopNumber, allegiance) {

- return `use.counter${dataSelector(troopNumber, allegiance)}`;

- },

-

- position = function(x, y) {

- return `g[data-x="${x}"][data-y="${y}"]`;

- },

-

- counterPosition = function(x, y) {

- return `use.counter[data-x="${x}"][data-x="${y}"]`;

- },

-

- traceSelector = function(troopNumber, allegiance) {

- return `polyline.move-trace${dataSelector(troopNumber, allegiance)}`;

- },

-

- clickClone = function() {

- let { troopNumber, troopAllegiance, x, y } = this.dataset,

- [xAttr, yAttr] = this.parentElement.getAttribute('transform').match(/-?\d+\.?\d*/g);

-

- if (Counter.isSelected(troopNumber, troopAllegiance)) {

- let trace = grid.querySelector(traceSelector(troopNumber, troopAllegiance)),

- points = trace.getAttribute('points').split(' ');

-

- if (`${xAttr},${yAttr}` == points.at(0)) {

- let counter = Counter.get(troopNumber, troopAllegiance);

- counter.setAttributeNS(null, 'x', 0);

- counter.setAttributeNS(null, 'y', 0);

- counter.dataset.x = x;

- counter.dataset.y = y;

- container.querySelector(`g[data-x="${x}"][data-y="${y}"]`).appendChild(counter);

-

- Counter.removeClones(this);

- trace.remove();

- } else {

- points = points.filter(p => p != `${xAttr},${yAttr}`).join(' ');

-

- trace.setAttributeNS(null, 'points', points);

- }

-

- this.remove();

- }

- },

-

- pointerOver = function() {

- let { troopNumber, troopAllegiance } = this.dataset;

- cp = document.getElementById(`clip-path-${troopAllegiance}-${troopNumber}`);

-

- if (cp) {

- cp.style.display = 'none';

- }

- },

-

- pointerOut = function() {

- let { troopNumber, troopAllegiance } = this.dataset;

- cp = document.getElementById(`clip-path-${troopAllegiance}-${troopNumber}`);

-

- if (cp) {

- let isVisible =

- document

- .getElementById('toggle-firing-arc-vis')

- .querySelector(`input[data-allegiance="${troopAllegiance}"]`)

- .checked;

-

- cp.style.display = isVisible ? 'none' : '';

- }

- },

-

- click = function() {

- if (this.classList.contains(selectedClass)) {

- let { troopNumber, troopAllegiance } = this.dataset,

- trace = grid.querySelector(traceSelector(troopNumber, troopAllegiance));

-

- if (trace) {

- let points = trace.getAttribute('points').split(' '),

- [xAttr, yAttr] = points.at(-2).split(','),

- clone = container.querySelector(`g[transform="translate(${xAttr} ${yAttr})"] ${dataSelector(troopNumber, troopAllegiance)}.clone`);

-

- points.pop();

-

- if (points.length >= 2) {

- trace.setAttributeNS(null, 'points', points.join(' '));

- } else {

- trace.remove();

- }

-

- this.setAttributeNS(null, 'x', clone.getAttribute('x'));

- this.setAttributeNS(null, 'y', clone.getAttribute('y'));

- this.dataset.x = clone.dataset.x;

- this.dataset.y = clone.dataset.y;

-

- container.querySelector(`g[data-x="${this.dataset.x}"][data-y="${this.dataset.y}"]`).appendChild(this);

-

- clone.remove();

- }

- }

- },

-

- dblClick = function() {

- if (this.classList.contains(selectedClass)) {

- let { troopNumber, troopAllegiance } = this.dataset,

- trace = grid.querySelector(traceSelector(troopNumber, troopAllegiance));

-

- if (!trace) {

- Counter.remove(this);

- document.querySelectorAll(`#firing-arcs ${dataSelector(troopNumber, troopAllegiance)}`).forEach(el => el.remove());

- }

- }

- };

-

- this.get = function(troopNumber, allegiance) {

- return container.querySelector(`${selector(troopNumber, allegiance)}:not(.clone)`);

- };

-

- this.getAt = function(x, y) {

- return container.querySelector(`${counterPosition(x, y)}:not(.clone)`);

- };

-

- this.select = function({ dataset: { troopNumber, troopAllegiance }}) {

- this.unSelect();

-

- let counter = container.querySelector(`${selector(troopNumber, troopAllegiance)}:not(.clone)`);

-

- if (counter) {

- counter.classList.add(selectedClass);

- }

- };

-

- this.unSelect = function() {

- let selected = container.querySelector(`.${selectedClass}`);

-

- if (selected) {

- let { troopNumber, troopAllegiance } = selected.dataset;

-

- selected.classList.remove(selectedClass);

- selected.removeAttribute('style');

-

- container

- .querySelectorAll(`${selector(troopNumber, troopAllegiance)}.clone`)

- .forEach(el => el.removeAttribute('style'));

- }

- };

-

- this.isSelected = function(troopNumber, allegiance) {

- return container.querySelector(`${selector(troopNumber, allegiance)}.${selectedClass}`) !== null;

- };

-

- this.place = function({ dataset: { troopNumber, troopAllegiance }}, point) {

- let counter, points,

- counterNodeList = container.querySelectorAll(selector(troopNumber, troopAllegiance));

-

- if (counterNodeList.length > 0) {

- let counters = Array.from(counterNodeList),

- original = counters.find(el => !el.classList.contains('clone')),

- trace = grid.querySelector(traceSelector(troopNumber, troopAllegiance));

-

- // let ptContainers = counters.map(c => ptGrp.querySelector(position(c.dataset.x, c.dataset.y)));

-

- let current = {

- x: point.dataset.x,

- y: point.dataset.y,

- // xAttr: point.getAttribute('x'),

- // yAttr: point.getAttribute('y'),

- transform: container.querySelector(position(point.dataset.x, point.dataset.y)).getAttribute('transform')

- },

- previous = {

- x: original.dataset.x,

- y: original.dataset.y,

- // xAttr: original.getAttribute('x'),

- // yAttr: original.getAttribute('y'),

- transform: container.querySelector(position(original.dataset.x, original.dataset.y)).getAttribute('transform')

- };

-

- [current.xAttr, current.yAttr] = current.transform.match(/-?\d+\.?\d*/g);

- [previous.xAttr, previous.yAttr] = previous.transform.match(/-?\d+\.?\d*/g);

-

- counter = original.cloneNode();

- counter.setAttributeNS(null, 'x', 0);

- counter.setAttributeNS(null, 'y', 0);

- counter.dataset.x = previous.x;

- counter.dataset.y = previous.y;

- counter.classList.remove(selectedClass);

- counter.classList.add('clone');

-

- original.setAttributeNS(null, 'x', 0);

- original.setAttributeNS(null, 'y', 0);

- original.dataset.x = current.x;

- original.dataset.y = current.y;

-

- container.querySelector(`g[data-x="${current.x}"][data-y="${current.y}"]`).appendChild(original);

-

- if (!trace) {

- trace = document.createElementNS(svgns, 'polyline');

- points = `${previous.xAttr},${previous.yAttr} ${current.xAttr},${current.yAttr}`;

-

- trace.dataset.troopNumber = troopNumber;

- trace.dataset.troopAllegiance = troopAllegiance;

- trace.classList.add('move-trace');

-

- grid.prepend(trace)

- // container.prepend(trace);

- } else {

- points = `${trace.getAttribute('points')} ${current.xAttr},${current.yAttr}`;

- }

-

- trace.setAttributeNS(null, 'points', points);

- counter.addEventListener('click', clickClone);

- } else {

- counter = document.createElementNS(svgns, 'use'),

-

- counter.setAttributeNS(null, 'href', `#${troopAllegiance}-${troopNumber}`);

- counter.classList.add('counter', 'selected');

- counter.setAttributeNS(null, 'x', point.getAttribute('x'));

- counter.setAttributeNS(null, 'y', point.getAttribute('y'));

- counter.dataset.troopNumber = troopNumber;

- counter.dataset.troopAllegiance = troopAllegiance;

- counter.dataset.x = point.dataset.x;

- counter.dataset.y = point.dataset.y;

- counter.style.pointerEvents = 'auto';

-

- counter.addEventListener('pointerover', pointerOver);

- counter.addEventListener('pointerout', pointerOut);

- counter.addEventListener('click', click);

- counter.addEventListener('dblclick', dblClick);

- }

-

- container.querySelector(`g[data-x="${counter.dataset.x}"][data-y="${counter.dataset.y}"]`).appendChild(counter);

-

- // container.appendChild(counter);

- };

-

- this.remove = function({ dataset: { troopNumber, troopAllegiance }}) {

- container

- .querySelectorAll(dataSelector(troopNumber, troopAllegiance))

- .forEach(el => el.remove());

- };

-

- this.removeClones = function({ dataset: { troopNumber, troopAllegiance }}) {

- container

- .querySelectorAll(`${selector(troopNumber, troopAllegiance)}.clone`)

- .forEach(el => el.remove());

- };

-

- this.endMove = function(el) {

- let { troopNumber, troopAllegiance } = el.dataset;

- let trace = grid.querySelector(traceSelector(troopNumber, troopAllegiance));

-

- if (trace) {

- trace.remove();

- }

-

- Counter.removeClones(el);

- };

-

- this.hasProne = function(troopNumber, troopAllegiance) {

- let selector = `g#${troopAllegiance}-${troopNumber} use[href="#counter-prone"]`;

-

- return !!document.querySelector(selector);

- };

-};

-

-const RecordSheet = new function() {

- let clipUnclippedFiringArcs = function() {

- let unclipped = document.querySelectorAll('#firing-arcs polygon:not([clip-path])');

-

- unclipped.forEach(el => {

- let { troopNumber, troopAllegiance } = el.dataset,

- clipPathId = `clip-path-${troopAllegiance}-${troopNumber}`;

-

- let isVisible =

- document

- .getElementById('toggle-firing-arc-vis')

- .querySelector(`input[data-allegiance="${troopAllegiance}"]`)

- .checked;

-

- if (isVisible) {

- document.getElementById(clipPathId).style.display = 'none';

- }

-

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

- });

- };

-

- this.unSelect = function() {

- let selected = this.getSelected();

-

- if (selected) {

- selected.classList.remove('selected');

- document.getElementById('toggle-prone-counter').checked = false;

- }

-

- clipUnclippedFiringArcs();

- Counter.unSelect();

- };

-

- this.getSelected = function() {

- return document.querySelector('.soldier-record.selected');

- };

-

- this.select = function(el) {

- let { troopNumber, troopAllegiance } = el.dataset,

- proneStatus = Counter.hasProne(troopNumber, troopAllegiance);

-

- RecordSheet.unSelect();

- document.querySelector(`#record-sheet .soldier-record[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`).classList.add('selected');

- document.getElementById('toggle-prone-counter').checked = proneStatus;

- existingArcs = document.querySelectorAll(`#firing-arcs polygon[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`);

- existingArcs.forEach(el => el.removeAttribute('clip-path'));

- };

-};

-

-const SightLine = new function() {

- this.clear = function() {

- let sl = grid.querySelector('line.sight-line');

- let target = grid.querySelector(`use[href="#point"].sight-line-target`);

-

- if (sl) {

- sl.remove();

- }

-

- if (target) {

- target.classList.remove('sight-line-target');

- }

-

- this.clearHexes();

- };

-

- this.clearHexes = function() {

- ptGrp.querySelectorAll('use[href="#point"].active').forEach(el => el.classList.remove('active'));

- };

-

- this.draw = function(x1, y1, x2, y2) {

- let source = ptGrp.querySelector(`g[data-x="${x1}"][data-y="${y1}"]`),

- target = ptGrp.querySelector(`g[data-x="${x2}"][data-y="${y2}"]`),

-

- [slX1, slY1] = source.getAttribute('transform').match(/-?\d+\.?\d*/g),

- [slX2, slY2] = target.getAttribute('transform').match(/-?\d+\.?\d*/g),

-

- sightLine = document.createElementNS(svgns, 'line');

-

- sightLine.classList.add('sight-line');

- sightLine.classList.add('active');

- sightLine.setAttributeNS(null, 'x1', slX1);

- sightLine.setAttributeNS(null, 'y1', slY1);

- sightLine.setAttributeNS(null, 'x2', slX2);

- sightLine.setAttributeNS(null, 'y2', slY2);

-

- grid.appendChild(sightLine);

-

- let coords = [x1, y1, x2, y2];

- this.drawHexes(...coords);

- };

-

- this.drawHexes = function(...coords) {

- this.clearHexes()

-

- info.querySelector('#hex-count').textContent = offset_distance(...coords);

- info.style.display = 'block';

-

- let lineCoords = linedraw(...coords);

- lineCoords.shift();

- let s = lineCoords.map(([x, y]) => `use[href="#point"][data-x="${x}"][data-y="${y}"]`).join(', ');

-

- ptGrp.querySelectorAll(s).forEach(p => p.classList.add('active'));

- };

-}

-

-POINTS.forEach((row, index) => row.forEach(([x, y]) => {

- var cx = x * INRADIUS * 2 + (isEven(index) ? INRADIUS : 0),

- cy = y * 3 / 2 * CIRCUMRADIUS,

- point = document.createElementNS(svgns, 'use'),

- group = document.createElementNS(svgns, 'g');

-

- cx = parseFloat(cx.toFixed(1));

- cy = parseFloat(cy.toFixed(1));

-

- point.setAttributeNS(null, 'href', `#point`);

- // point.setAttributeNS(null, 'x', cx);

- // point.setAttributeNS(null, 'y', cy);

-

- point.setAttributeNS(null, 'x', 0);

- point.setAttributeNS(null, 'y', 0);

-

- point.dataset.x = x;

- point.dataset.y = y;

-

- group.setAttributeNS(null, 'transform', `translate(${cx} ${cy})`);

- group.dataset.x = x;

- group.dataset.y = y;

-

- group.appendChild(point);

-

- group.addEventListener('pointerout', e => {

- group.classList.remove('hover');

- });

-

- group.addEventListener('click', e => {

- let cl = e.target.classList,

- sl = grid.querySelector('line.sight-line'),

- targetIsSomeOtherUnitCounter = cl.contains('counter') && !cl.contains('clone'),

- selected = RecordSheet.getSelected();

-

- // maybe we should start with, "are we clicking on a counter?"

-

-

- if (sl) {

- let { troopNumber: sTn, troopAllegiance: sTa} = selected.dataset,

- { troopNumber: tTn, troopAllegiance: tTa} = e.target.dataset,

- sightLineInLockedPosition = !sl.classList.contains('active'),

- targetIsCounterOrCloneOfSelected = cl.contains('counter') && sTn == tTn && sTa == tTa;

-

- if (sightLineInLockedPosition && targetIsCounterOrCloneOfSelected) {

- let counterParent = Counter.get(tTn, tTa).parentElement,

- [x, y] = counterParent.getAttribute('transform').match(/-?\d+\.?\d*/g),

- target = ptGrp.querySelector(`g[transform="translate(${sl.getAttribute('x2')} ${sl.getAttribute('y2')})"]`),

- { x: x1, y: y1 } = counterParent.dataset,

- { x: x2, y: y2 } = target.dataset;

-

- sl.setAttributeNS(null, 'x1', x);

- sl.setAttributeNS(null, 'y1', y);

-

- SightLine.drawHexes(...[x1, y1, x2, y2].map(n => parseInt(n)));

- } else if (targetIsCounterOrCloneOfSelected || targetIsSomeOtherUnitCounter) {

- if (targetIsSomeOtherUnitCounter) {

- RecordSheet.select(e.target);

- Counter.select(e.target);

- }

-

- SightLine.clear();

- }

- } else if (targetIsSomeOtherUnitCounter) {

- RecordSheet.select(e.target);

- Counter.select(e.target);

- }

- });

-

- point.addEventListener('click', e => {

- let selectedSoldier = document.querySelector('.soldier-record.selected');

- let existingOccupant =

- svg.querySelector(`.counter[data-x="${point.dataset.x}"][data-y="${point.dataset.y}"]`);

-

- if (selectedSoldier && !existingOccupant) {

- let sl = svg.querySelector('.sight-line');

-

- Counter.place(selectedSoldier, point);

-

- if (sl) {

- if (sl.classList.contains('active')) {

- SightLine.clear();

- } else {

- let [x, y] = point.parentElement.getAttribute('transform').match(/-?\d+\.?\d*/g),

- target = ptGrp.querySelector(`g[transform="translate(${sl.getAttribute('x2')} ${sl.getAttribute('y2')})"]`),

- { x: x1, y: y1 } = point.dataset,

- { x: x2, y: y2 } = target.dataset;

-

- sl.setAttributeNS(null, 'x1', x);

- sl.setAttributeNS(null, 'y1', y);

-

- SightLine.drawHexes(...[x1, y1, x2, y2].map(n => parseInt(n)));

- }

- }

- }

- });

-

- group.addEventListener('contextmenu', e => {

- e.preventDefault();

-

- let sl = svg.querySelector('.sight-line');

-

- if (sl) {

- sl.classList.toggle('active');

-

- if (sl.classList.contains('active')) {

- SightLine.clear();

- } else {

- group.querySelector(`use[href="#point"]`).classList.add('sight-line-target');

- }

-

- group.dispatchEvent(new MouseEvent('pointerover'));

- }

- });

-

- group.addEventListener('pointerover', e => {

- group.classList.add('hover');

-

- let selected = RecordSheet.getSelected();

-

- if (selected) {

- let { troopNumber: tn, troopAllegiance: ta } = selected.dataset,

- counter = Counter.get(tn, ta),

- sl = document.querySelector('line.sight-line');

-

- if (counter && (!sl || sl.classList.contains('active'))) {

- if (counter.dataset.x !== e.target.dataset.x || counter.dataset.y !== e.target.dataset.y) {

- let coords = [

- counter.dataset.x,

- counter.dataset.y,

- e.target.dataset.x,

- e.target.dataset.y

- ].map(n => parseInt(n));

-

- SightLine.draw(...coords);

- }

- }

- }

- });

-

- group.addEventListener('pointerout', e => {

- let sl = svg.querySelector('.sight-line.active');

-

- if (sl && sl.classList.contains('active')) {

- SightLine.clear();

- }

- });

-

- ptGrp.appendChild(group);

-}));

-

-document.querySelectorAll('.soldier-record').forEach(el =>

- el.addEventListener('click', e => {

- if (el.classList.contains('selected')) {

- el.classList.remove('selected');

- RecordSheet.unSelect();

- Counter.unSelect();

- } else {

- RecordSheet.select(el);

- Counter.select(el);

- }

-

- SightLine.clear();

- })

-);

-

-// document.querySelector('#grid').addEventListener('click', e => {

-// let point = ptGrp.querySelector(`[data-x="${e.target.dataset.x}"][data-y="${e.target.dataset.y}"]`),

-// sl = svg.querySelector('.sight-line');

-

-// if (sl) {

-// sl.classList.add('active');

-// point.dispatchEvent(new MouseEvent('mouseout'));

-// point.dispatchEvent(new MouseEvent('pointerover'));

-// }

-// });

-

-document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click', e => {

- let selected = RecordSheet.getSelected();

-

- if (selected) {

- Counter.endMove(selected);

- RecordSheet.unSelect();

- selected.classList.toggle('movement-ended');

- }

-}));

-

-document.querySelectorAll('.end-turn').forEach(el =>

- el.addEventListener('click', ({ target: { dataset: { allegiance }}}) => {

- let dataSelector = `[data-troop-allegiance="${allegiance}"]`,

- records = Array.from(qA(`.soldier-record${dataSelector}`)),

- turnCounter = document.getElementById('turn-count'),

- { textContent: count, dataset: { update }} = turnCounter;

-

- el.setAttribute('disabled', '');

-

- document

- .querySelector(`button.end-turn:not([data-allegiance="${allegiance}"])`)

- .removeAttribute('disabled');

-

- if (update == '1') {

- turnCounter.children.namedItem('count').textContent++

- turnCounter.dataset.update = '0';

- } else {

- turnCounter.dataset.update = '1';

- }

-

- qA(`#firing-arcs ${dataSelector}`).forEach(el => el.remove());

-

- records

- .sort((el1, el2) => el1.dataset.troopNumber > el2.dataset.troopNumber)

- .forEach(el => el.classList.remove('movement-ended'));

-

- RecordSheet.select(records.at(0));

- Counter.select(records.at(0));

- })

-);

-

-document.querySelectorAll('.set-firing-arc').forEach(el => el.addEventListener('click', e => {

- let selectedSoldier = document.querySelector('.soldier-record.selected');

-

- if (selectedSoldier) {

- let {troopNumber, troopAllegiance} = selectedSoldier.dataset,

- counter = Counter.get(troopNumber, troopAllegiance);

-

- let existingArcs = document.querySelectorAll(

- `#firing-arcs [data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`

- );

-

- existingArcs.forEach(el => el.remove());

-

- if (counter) {

- let arcLayer = document.getElementById('shapes');

- let outlineLayer = document.getElementById('lines');

- let arcContainer = document.getElementById('firing-arcs');

-

- let [x, y] = counter.parentElement.getAttribute('transform').match(/-?\d+\.?\d*/g);

-

- let grid = document.getElementById('grid');

- const transform = getComputedStyle(grid).transform.match(/-?\d+\.?\d*/g);

- const pt = new DOMPoint(x, y);

- const mtx = new DOMMatrix(transform);

- let tPt = pt.matrixTransform(mtx);

-

- let pivotPoint = [tPt.x, tPt.y];

- let firingArc = document.createElementNS(svgns, 'polygon');

- let firingArcOutline = document.createElementNS(svgns, 'polygon');

-

- firingArc.classList.add('firing-arc', 'active');

- firingArc.dataset.troopNumber = troopNumber;

- firingArc.dataset.troopAllegiance = troopAllegiance;

- firingArc.dataset.size = e.target.dataset.size;

- firingArc.setAttributeNS(null, 'points', `${pivotPoint} ${pivotPoint} ${pivotPoint}`);

-

- firingArcOutline.dataset.troopNumber = troopNumber;

- firingArcOutline.dataset.troopAllegiance = troopAllegiance;

- firingArcOutline.setAttributeNS(null, 'points', `${pivotPoint} ${pivotPoint} ${pivotPoint}`);

-

- let clipShape = document.createElementNS(svgns, 'circle');

- clipShape.setAttributeNS(null, 'cx', tPt.x);

- clipShape.setAttributeNS(null, 'cy', tPt.y);

- clipShape.setAttributeNS(null, 'r', 100);

-

- let clipPath = document.createElementNS(svgns, 'clipPath');

- clipPath.setAttributeNS(null, 'id', `clip-path-${troopAllegiance}-${troopNumber}`);

- clipPath.dataset.troopNumber = troopNumber;

- clipPath.dataset.troopAllegiance = troopAllegiance;

- clipPath.appendChild(clipShape);

-

- arcContainer.appendChild(clipPath);

- arcLayer.appendChild(firingArc);

- outlineLayer.appendChild(firingArcOutline);

-

- let firingArcPlacementListener = e => {

- document.querySelectorAll('.firing-arc.active').forEach(el => el.classList.remove('active'));

- ptGrp.removeAttribute('style');

- svg.removeEventListener('mousemove', positionFiringArc);

- firingArc.removeEventListener('click', firingArcPlacementListener);

- firingArc.removeEventListener('contextmenu', cancelFiringArcPlacement);

- };

-

- let cancelFiringArcPlacement = e => {

- e.preventDefault();

-

- firingArc.removeEventListener('click', firingArcPlacementListener);

- firingArc.removeEventListener('contextmenu', cancelFiringArcPlacement);

-

- let existingArcs = document.querySelectorAll(

- `#firing-arcs [data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`

- );

-

- existingArcs.forEach(el => el.remove());

-

- ptGrp.removeAttribute('style');

- svg.removeEventListener('mousemove', positionFiringArc);

- };

-

- ptGrp.style.pointerEvents = 'none';

- svg.addEventListener('mousemove', positionFiringArc);

- firingArc.addEventListener('click', firingArcPlacementListener);

- firingArc.addEventListener('contextmenu', cancelFiringArcPlacement);

- }

- }

-}));

-

-svg.addEventListener('wheel', e => {

- e.preventDefault();

-

- const pt = new DOMPoint(e.clientX, e.clientY),

- svgP = pt.matrixTransform(svg.getScreenCTM().inverse());

-

- let { x, y, width, height } = svg.viewBox.baseVal,

-

- widthDelta = width * 0.25,

- heightDelta = height * 0.25,

-

- xChange = (svgP.x - x) / width * widthDelta,

- yChange = (svgP.y - y) / height * heightDelta,

-

- widthChange = (1 - ((svgP.x - x) / width)) * widthDelta,

- heightChange = (1 - ((svgP.y - y) / height)) * heightDelta,

-

- newX = parseInt(e.deltaY < 0 ? x + xChange : x - xChange),

- newWidth = parseInt(e.deltaY < 0 ? width - xChange - widthChange : width + xChange + widthChange),

-

- newY = parseInt(e.deltaY < 0 ? y + yChange : y - yChange),

- newHeight = parseInt(e.deltaY < 0 ? height - yChange - heightChange : height + yChange + heightChange);

-

- let vb = `${newX} ${newY} ${newWidth} ${newHeight}`

-

- // TODO attribute change event?

- localStorage.setItem('viewBox', vb);

- svg.setAttributeNS(null, 'viewBox', vb);

-});

-

-svg.addEventListener('pointerdown', e => {

- e.preventDefault();

-

- const minPanDistanceThreshold = 5;

-

- let dist, ctm,

- pan = false,

- { x, y, width, height } = svg.viewBox.baseVal,

- startPt = new DOMPoint(e.clientX, e.clientY),

- movePt = new DOMPoint();

-

- function pointerMove(e) {

- movePt.x = e.clientX;

- movePt.y = e.clientY;

-

- if (!pan) {

- dist = Math.sqrt((movePt.x - startPt.x)**2 + (movePt.y - startPt.y)**2);

-

- if (dist >= minPanDistanceThreshold) {

- pan = true;

- svg.setPointerCapture(e.pointerId);

- startPt.x = e.clientX;

- startPt.y = e.clientY;

- }

- }

-

- if (pan) {

- ctm = svg.getScreenCTM().inverse();

-

- const [svgStartPt, svgMovePt] = [startPt, movePt].map(p => p.matrixTransform(ctm)),

- moveX = parseInt(svgStartPt.x - svgMovePt.x + x),

- moveY = parseInt(svgStartPt.y - svgMovePt.y + y);

-

- let vb = `${moveX} ${moveY} ${width} ${height}`;

-

- localStorage.setItem('viewBox', vb);

- svg.setAttributeNS(null, 'viewBox', vb);

- }

- }

-

- function pointerUp(e) {

- svg.removeEventListener('pointermove', pointerMove);

- svg.removeEventListener('pointerup', pointerUp);

- }

-

- svg.addEventListener('pointermove', pointerMove);

- svg.addEventListener('pointerup', pointerUp);

-});

-

-recordSheetVisibility.addEventListener('input', e => {

- let divs = document.querySelectorAll('#content div');

-

- divs.forEach(d => {

- if (recordSheetVisibility.checked) {

- d.style.display = d.id == 'record-sheet' ? 'flex' : 'block';

- } else {

- d.style.display = 'none';

- }

- });

-});

-

-document.querySelectorAll('#toggle-firing-arc-vis input').forEach(el => el.addEventListener('input', e => {

- let clipPaths = svg.querySelectorAll(`clipPath[data-troop-allegiance="${el.dataset.allegiance}"]`);

-

- clipPaths.forEach(cp => cp.style.display = el.checked ? 'none' : '');

-}));

-

-document.getElementById('toggle-prone-counter').addEventListener('input', function(e) {

- let selected = RecordSheet.getSelected();

-

- if (selected) {

- let template = q(`g#${selected.dataset.troopAllegiance}-${selected.dataset.troopNumber}`);

-

- if (this.checked) {

- let counter = document.createElementNS(svgns, 'use');

- counter.setAttributeNS(null, 'href', '#counter-prone');

- template.appendChild(counter);

- } else {

- template.querySelector('[href="#counter-prone"]').remove();

- }

- }

-});

-

-(function debug() {

- function drawLine(x1, y1, x2, y2) {

- let start = ptGrp.querySelector(`[data-x="${x1}"][data-y="${y1}"]`);

- let end = ptGrp.querySelector(`[data-x="${x2}"][data-y="${y2}"]`);

- let [startX, startY] = [start.x.baseVal.value, start.y.baseVal.value];

- let [endX, endY] = [end.x.baseVal.value, end.y.baseVal.value];

-

- let startP = new DOMPoint(startX, startY);

- let endP = new DOMPoint(endX, endY);

-

- let tStart = startP.matrixTransform(mtx);

- let tEnd = endP.matrixTransform(mtx);

-

- let line = document.createElementNS(svgns, 'line');

- line.setAttributeNS(null, 'x1', tStart.x);

- line.setAttributeNS(null, 'y1', tStart.y);

- line.setAttributeNS(null, 'x2', tEnd.x);

- line.setAttributeNS(null, 'y2', tEnd.y);

- line.classList.add('debug');

-

- line.setAttributeNS(null, 'stroke', 'gold');

- line.setAttributeNS(null, 'stroke-width', 2);

- svg.appendChild(line);

-

- return line;

- }

-

- let transProp = getComputedStyle(ptGrp).transform.match(/-?\d+\.?\d*/g),

- mtx = new DOMMatrix(transProp || ''),

- circR = (new DOMPoint(0, 3 * CIRCUMRADIUS / 2)).matrixTransform(mtx).y * 2 / 3;

-})(); \ No newline at end of file