Web Dev Solutions

Catalin Mititiuc

import { pan, zoom } from 'svg-pan-zoom'; 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; } 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 PanZoom = new function () { const vb = 'viewBox'; function storeLatestViewBoxVal(svg) { const observer = new MutationObserver(mutations => { if (mutations.find(m => m.target == svg && m.attributeName == vb)) { localStorage.setItem(vb, svg.getAttribute(vb)); } }); observer.observe(svg, { attributes: true }); } function restoreViewboxVal(svg) { const storedVbVal = localStorage.getItem(vb); if (storedVbVal) { svg.setAttributeNS(null, vb, storedVbVal); } } this.start = function (svg) { restoreViewboxVal(svg); svg.addEventListener('wheel', e => { e.preventDefault(); svg.setAttributeNS(null, vb, zoom(svg, e)); }, { passive: false }); svg.addEventListener('pointerdown', e => { e.preventDefault(); pan(svg, e); }, { passive: false }); storeLatestViewBoxVal(svg); }; }; // const Grid = new function () { // let cells; // this.setUp = function (cellList) { // cells = cellList; // cellList.forEach(cell => { // cell.addEventListener('click', e => { // let { dataset: { x }, parentElement: { dataset: { y }}} = cell; // console.log(`Cell at index { x: ${x}, y: ${y} } clicked.`); // console.log(Board.getCellPosition(cell)); // if (!Counter.getCounter(cell)) { // const counter = Counter.getSelected(); // counter && Counter.place(counter, cell); // // SightLine.setSource(cell); // } // }); // cell.addEventListener('pointerover', e => { // const counter = Counter.getSelected(); // if (counter && Counter.isOnBoard(counter)) { // SightLine.setTarget(e.target.parentElement); // } // }); // }); // }; // this.drawLine = function ({ x: sourceX, y: sourceY }, { x: targetX, y: targetY }) { // let lineCoords = linedraw(sourceX, sourceY, targetX, targetY); // // lineCoords.shift(); // // let s = lineCoords.map(([x, y]) => `use[href="#point"][data-x="${x}"][data-y="${y}"]`).join(', '); // console.log(lineCoords); // // let list = cells.filter(c => c.dataset.x == ) // // ptGrp.querySelectorAll(s).forEach(p => p.classList.add('active')); // }; // }; // const Counter = new function () { // let counters; // this.setUp = function (list) { // counters = list; // counters.forEach(counter => counter.addEventListener('click', e => { // e.stopPropagation(); // const { allegiance: allegiance, number: n } = counter.dataset, // al = allegiance.charAt(0).toUpperCase() + allegiance.slice(1); // if (counter.classList.contains('selected')) { // counter.classList.toggle('selected'); // } else { // counters.forEach(c => c.classList.remove('selected')); // counter.classList.add('selected'); // if (this.isOnBoard(counter)) { // SightLine.setSource(counter.parentElement); // } else { // SightLine.reset(); // } // } // })); // }; // this.getCounter = function (cell) { // return cell.querySelector('use[href*="#t-"]'); // }; // this.getSelected = function () { // return Array.from(counters).find(c => c.classList.contains('selected')); // }; // this.place = function (counter, cell) { // counter.removeAttribute('data-x'); // cell.appendChild(counter); // SightLine.setSource(cell); // }; // this.isOnBoard = function (counter) { // return !counter.hasAttributeNS(null, 'data-x'); // }; // }; // const SightLine = new function () { // let el, source, target; // this.set = function (line) { // el = line; // } // 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.reset = function () { // el.setAttributeNS(null, 'x1', 0); // el.setAttributeNS(null, 'y1', 0); // el.setAttributeNS(null, 'x2', 0); // el.setAttributeNS(null, 'y2', 0); // }; // this.setSource = function (cell) { // source = target = cell; // const { x, y } = Board.getCellPosition(cell); // el.setAttributeNS(null, 'x1', x); // el.setAttributeNS(null, 'y1', y); // el.setAttributeNS(null, 'x2', x); // el.setAttributeNS(null, 'y2', y); // }; // this.setTarget = function (cell) { // const targetPos = Board.getCellPosition(cell); // el.setAttributeNS(null, 'x2', targetPos.x); // el.setAttributeNS(null, 'y2', targetPos.y); // let sourceCoords = { // x: parseInt(source.dataset.x), // y: parseInt(source.parentElement.dataset.y) // } // let targetCoords = { // x: parseInt(cell.dataset.x), // y: parseInt(cell.parentElement.dataset.y) // } // Grid.drawLine(sourceCoords, targetCoords); // // console.log('target cell', target, 'source cell', source); // }; // 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')); // }; // }; // const Board = new function () { // let board; // function getCells(svg) { // return svg.querySelectorAll('g[data-x]'); // } // function getCounters(svg) { // return svg.querySelectorAll('use[href*="#t-"]'); // } // this.setUp = function (svg) { // board = svg.querySelector('.board'); // Grid.setUp(getCells(svg)); // Counter.setUp(getCounters(svg)); // SightLine.set(svg.querySelector('.sight-line')); // }; // this.getCellPosition = function (cell) { // let pt = new DOMPoint(0, 0); // let transform = getComputedStyle(cell).transform.match(/-?\d+\.?\d*/g); // let mtx = new DOMMatrix(transform); // pt = pt.matrixTransform(mtx); // transform = getComputedStyle(cell.parentElement).transform.match(/-?\d+\.?\d*/g); // mtx = new DOMMatrix(transform); // pt = pt.matrixTransform(mtx); // return pt; // }; // }; class Game { constructor(svg) { this.svg = svg; this.setUpSightLine(this); this.setUpCounter(this); this.setUpRecordSheet(); this.setUpCells(); } getCells() { return svg.querySelectorAll('g[data-x]'); } getCell(x, y) { return svg.querySelector(`g[data-y="${y}"] g[data-x="${x}"]`); } getHex(cell) { return cell.querySelector('use[href="#hex"]'); } getCounters() { return svg.querySelectorAll(`use[data-allegiance][data-number]:not(.clone)`); } getCounter(al, n) { return svg.querySelector(`use[data-allegiance="${al}"][data-number="${n}"]:not(.clone)`); } getCounterAndClones(al, n) { return svg.querySelectorAll(`use[data-allegiance="${al}"][data-number="${n}"]`); } getClones(al, n) { return svg.querySelectorAll(`use[data-allegiance="${al}"][data-number="${n}"].clone`); } getSelected() { return svg.querySelector(`use[data-allegiance][data-number].selected`); } getSightLine() { return svg.querySelector('line.sight-line'); } getExistingArcs(al, n) { return svg.querySelectorAll(`#firing-arcs polygon[data-troop-number="${n}"][data-troop-allegiance="${al}"]`); } getUnclippedFiringArcs() { return svg.querySelectorAll('#firing-arcs polygon:not([clip-path])'); } getGridIndex({ parentElement }) { return { x: parentElement.dataset.x, y: parentElement.parentElement.dataset.y }; } getBoard() { return svg.querySelector('.board'); } getActiveHexes() { return svg.querySelectorAll('use[href="#hex"].active'); } getCellPosition(cell) { let pt = new DOMPoint(0, 0), transform = getComputedStyle(cell).transform.match(/-?\d+\.?\d*/g), mtx = new DOMMatrix(transform); pt = pt.matrixTransform(mtx); transform = getComputedStyle(cell.parentElement).transform.match(/-?\d+\.?\d*/g); mtx = new DOMMatrix(transform); pt = pt.matrixTransform(mtx); return pt; } setUpCells() { this.getCells().forEach(cell => { let group = cell, point = this.getHex(cell); group.addEventListener('click', e => { let cl = e.target.classList, sl = this.getSightLine(), targetIsSomeOtherUnitCounter = cl.contains('counter') && !cl.contains('clone'), selected = this.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) { this.RecordSheet.select(e.target); this.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'); this.Counter.place(selectedSoldier, point); if (sl) { if (sl.classList.contains('active')) { this.SightLine.clear(); } else { let { x, y } = this.getCellPosition(point.parentElement), target = svg.querySelector(`use[href="#hex"].sight-line-target`), { x: x2, y: y2 } = this.getGridIndex(target), { x: x1, y: y1 } = this.getGridIndex(point); sl.setAttributeNS(null, 'x1', x); sl.setAttributeNS(null, 'y1', y); this.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')) { this.SightLine.clear(); } else { group.querySelector(`use[href="#hex"]`).classList.add('sight-line-target'); } group.dispatchEvent(new MouseEvent('pointerover')); } }); group.addEventListener('pointerover', e => { // group.classList.add('hover'); let selected = this.RecordSheet.getSelected(); if (selected) { let { troopNumber: tn, troopAllegiance: ta } = selected.dataset, counter = this.Counter.get(tn, ta), sl = svg.querySelector('.sight-line'); if (counter && (!sl || sl.classList.contains('active'))) { let sourceCell = counter.parentElement; if (sourceCell != group) { this.SightLine.draw(sourceCell, group); } } } }); group.addEventListener('pointerout', e => { let sl = svg.querySelector('.sight-line.active'); if (sl && sl.classList.contains('active')) { this.SightLine.clear(); } }); }); } setUpRecordSheet() { const Counter = this.Counter, svg = this; this.RecordSheet = new function () { let clipUnclippedFiringArcs = function () { let unclipped = svg.getUnclippedFiringArcs(); 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) { svg.querySelector(`#${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 { number: troopNumber, allegiance: troopAllegiance } = el.dataset, proneStatus = Counter.hasProne(troopNumber, troopAllegiance); this.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; let existingArcs = svg.getExistingArcs(troopAllegiance, troopNumber); existingArcs.forEach(el => el.removeAttribute('clip-path')); }; }; } setUpCounter(container) { this.Counter = new function () { let selectedClass = 'selected', svgns = "http://www.w3.org/2000/svg", dataSelector = function (troopNumber, allegiance) { return `[data-number="${troopNumber}"][data-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 (e) { e.stopPropagation(); let { number: troopNumber, allegiance: troopAllegiance } = this.dataset, pos = container.getCellPosition(this.parentElement); if (container.Counter.isSelected(troopNumber, troopAllegiance)) { let trace = container.svg.querySelector(traceSelector(troopNumber, troopAllegiance)), points = trace.getAttribute('points').split(' '); if (`${pos.x},${pos.y}` == points.at(0)) { let counter = container.getCounter(troopAllegiance, troopNumber); counter.setAttributeNS(null, 'x', 0); counter.setAttributeNS(null, 'y', 0); this.parentElement.appendChild(counter); container.Counter.removeClones(counter); trace.remove(); container.SightLine.clear(); } else { points = points.filter(p => p != `${pos.x},${pos.y}`).join(' '); trace.setAttributeNS(null, 'points', points); } this.remove(); } }, pointerOver = function () { let { troopNumber, troopAllegiance } = this.dataset; cp = svg.querySelector(`#clip-path-${troopAllegiance}-${troopNumber}`); if (cp) { cp.style.display = 'none'; } }, pointerOut = function () { let { troopNumber, troopAllegiance } = this.dataset; cp = svg.querySelector(`#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 (e) { if (this.classList.contains(selectedClass)) { e.stopPropagation(); let { number: troopNumber, allegiance: troopAllegiance } = this.dataset, trace = container.svg.querySelector(traceSelector(troopNumber, troopAllegiance)); if (trace) { let points = trace.getAttribute('points').split(' '), [clonePosX, clonePosY] = points.at(-2).split(',').map(p => parseFloat(p)), { clone } = Array .from(container.getClones(troopAllegiance, troopNumber)) .map(c => { return { clone: c, pos: container.getCellPosition(c.parentElement) }}) .find(({ pos: { x, y }}) => x == clonePosX && y == clonePosY); points.pop(); if (points.length >= 2) { trace.setAttributeNS(null, 'points', points.join(' ')); } else { trace.remove(); } let sl = container.svg.querySelector('.sight-line'); if (sl) { const target = container.svg.querySelector('.sight-line-target').parentElement, { x, y } = container.getCellPosition(clone.parentElement), x1 = clone.parentElement.dataset.x, y1 = clone.parentElement.parentElement.dataset.y, x2 = target.dataset.x, y2 = target.parentElement.dataset.y; sl.setAttributeNS(null, 'x1', x); sl.setAttributeNS(null, 'y1', y); container.SightLine.drawHexes(...[x1, y1, x2, y2].map(n => parseInt(n))); } else { container.SightLine.draw(this.parentElement, clone.parentElement); } clone.parentElement.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); svg.querySelectorAll(`#firing-arcs ${dataSelector(troopNumber, troopAllegiance)}`).forEach(el => el.remove()); } } }; this.get = function (troopNumber, allegiance) { return container.getCounter(allegiance, troopNumber); }; this.getAt = function (x, y) { return container.querySelector(`${counterPosition(x, y)}:not(.clone)`); }; this.select = function ({ dataset: { allegiance, number }}) { this.unSelect(); let counter = container.getCounter(allegiance, number); if (counter) { counter.classList.add(selectedClass); } }; this.unSelect = function () { let selected = container.getSelected(); 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.svg.querySelector(`${selector(troopNumber, allegiance)}.${selectedClass}`) !== null; }; this.place = function ({ dataset: { troopNumber, troopAllegiance }}, point) { let counter, points, counterNodeList = container.getCounterAndClones(troopAllegiance, troopNumber); if (counterNodeList.length > 0) { let counters = Array.from(counterNodeList), original = counters.find(el => !el.classList.contains('clone')), trace = container.svg.querySelector(traceSelector(troopNumber, troopAllegiance)); counter = original.cloneNode(); counter.setAttributeNS(null, 'x', 0); counter.setAttributeNS(null, 'y', 0); counter.classList.remove(selectedClass); counter.classList.add('clone'); original.setAttributeNS(null, 'x', 0); original.setAttributeNS(null, 'y', 0); original.parentElement.appendChild(counter); point.parentElement.appendChild(original); let previous = container.getCellPosition(counter.parentElement), current = container.getCellPosition(original.parentElement); if (!trace) { trace = document.createElementNS(svgns, 'polyline'); points = `${previous.x},${previous.y} ${current.x},${current.y}`; trace.dataset.number = troopNumber; trace.dataset.allegiance = troopAllegiance; trace.classList.add('move-trace'); container.getBoard().prepend(trace); } else { points = `${trace.getAttribute('points')} ${current.x},${current.y}`; } 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.getCell(counter.dataset.x, counter.dataset.y).appendChild(counter); }; this.remove = function ({ dataset: { troopNumber, troopAllegiance }}) { container .querySelectorAll(dataSelector(troopNumber, troopAllegiance)) .forEach(el => el.remove()); }; this.removeClones = function ({ dataset: { allegiance, number }}) { container.getClones(allegiance, number).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 !!svg.querySelector(selector); }; this.addEventListeners = function (counter) { // counter.addEventListener('pointerover', pointerOver); // counter.addEventListener('pointerout', pointerOut); counter.addEventListener('click', click); // counter.addEventListener('dblclick', dblClick); }; }; this.getCounters().forEach(c => this.Counter.addEventListeners(c)); } setUpSightLine(ptGrp) { const svgns = "http://www.w3.org/2000/svg", grid = svg.querySelector('.board'); this.SightLine = new function() { this.clear = function() { let sl = grid.querySelector('line.sight-line'); let target = grid.querySelector(`use[href="#hex"].sight-line-target`); if (sl) { sl.remove(); } if (target) { target.classList.remove('sight-line-target'); } this.clearHexes(); }; this.clearHexes = function() { ptGrp.getActiveHexes().forEach(el => el.classList.remove('active')); }; this.draw = function(source, target) { ptGrp.SightLine.clear(); let pt = new DOMPoint(0, 0), transform = getComputedStyle(source).transform.match(/-?\d+\.?\d*/g), mtx = new DOMMatrix(transform); pt = pt.matrixTransform(mtx); transform = getComputedStyle(source.parentElement).transform.match(/-?\d+\.?\d*/g); mtx = new DOMMatrix(transform); pt = pt.matrixTransform(mtx); let slX1 = pt.x, slY1 = pt.y; pt = new DOMPoint(0, 0); transform = getComputedStyle(target).transform.match(/-?\d+\.?\d*/g); mtx = new DOMMatrix(transform); pt = pt.matrixTransform(mtx); transform = getComputedStyle(target.parentElement).transform.match(/-?\d+\.?\d*/g); mtx = new DOMMatrix(transform); pt = pt.matrixTransform(mtx); let slX2 = pt.x, slY2 = pt.y; let 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); ptGrp.getBoard().appendChild(sightLine); let coords = [ source.dataset.x, source.parentElement.dataset.y, target.dataset.x, target.parentElement.dataset.y ].map(n => parseInt(n)); 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); let s = lineCoords .map(([x, y]) => `g[data-y="${y}"] g[data-x="${x}"] use[href="#hex"]`) .join(', '); ptGrp.svg.querySelectorAll(s).forEach(p => p.classList.add('active')); }; } } } window.addEventListener('load', () => { const svg = document.querySelector('object').contentDocument.querySelector('svg'); window.svg = svg; window.G = new Game(svg); const svgns = "http://www.w3.org/2000/svg", ptGrp = svg.querySelector('#points'), recordSheetVisibility = document.querySelector('#content input[type="checkbox"].visible'); PanZoom.start(svg); const HORZ_POINT_DISTANCE = 1.005, VERT_POINT_DISTANCE = Math.sqrt(3) * HORZ_POINT_DISTANCE / 2, 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)) }; function positionFiringArc(e) { let activeFiringArc = svg.querySelector('polygon.firing-arc.active'); // TODO: handle exactly horizontal and vertical lines if (activeFiringArc) { let activeFiringArcOutline = svg.querySelector(`#lines polygon[data-troop-number="${activeFiringArc.dataset.troopNumber}"][data-troop-allegiance="${activeFiringArc.dataset.troopAllegiance}"]`); board = svg.querySelector('#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); } } let info = document.getElementById('status'); // Object.values(settingsPanel.querySelectorAll('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()); // }); // }); const grid = svg.querySelector('#grid'); 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.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 = svg.querySelectorAll( `#firing-arcs [data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]` ); existingArcs.forEach(el => el.remove()); if (counter) { let arcLayer = svg.querySelector('#shapes'); let outlineLayer = svg.querySelector('#lines'); let arcContainer = svg.querySelector('#firing-arcs'); let [x, y] = counter.parentElement.getAttribute('transform').match(/-?\d+\.?\d*/g); 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 => { svg.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 = svg.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); } } })); 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(); } } }); });