diff --git a/package-lock.json b/package-lock.json index 2d7e09b..176a8c6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -76,7 +76,7 @@ } }, "node_modules/svg-pan-zoom": { - "resolved": "git+ssh://git@github.com/webdevcat-me/svg-pan-zoom.git#119a1e207f0902becbf67caf30e564efb72b0b2a" + "resolved": "git+ssh://git@github.com/webdevcat-me/svg-pan-zoom.git#8ea4e018b475eac05eb7ae8a067850c9bef7c2b5" } } } diff --git a/public/index.html b/public/index.html index 063797f..6e5f522 100644 --- a/public/index.html +++ b/public/index.html @@ -267,7 +267,7 @@

-
+
1 Rifle 4L @@ -387,4 +387,4 @@ - \ No newline at end of file + diff --git a/public/map.css b/public/map.css index 04442ab..93232ba 100644 --- a/public/map.css +++ b/public/map.css @@ -11,23 +11,24 @@ text { } use[href="#hex"] { - opacity: 1; + opacity: 0; fill: transparent; fill-opacity: 0.5; stroke-width: 0.5px; - stroke: darkgray; - /* stroke-opacity: 0.2; */ + stroke: black; } -use[href="#hex"]:hover, use[href="#hex"].hover +/* use[href="#hex"]:hover, use[href="#hex"].hover { opacity: 1; fill: orange; stroke: orangered; -} +} */ use[href="#hex"].active { opacity: 0.2; + fill: teal; + stroke: black; } use[href="#hex"].sight-line-target { @@ -37,7 +38,7 @@ use[href="#hex"].sight-line-target { } polyline.move-trace { - stroke: gray; + stroke: white; stroke-dasharray: 2; fill: none; } @@ -106,17 +107,17 @@ g#points use.counter[data-troop-allegiance="liao"] { fill: green; } -g#points use.clone { +use.clone { stroke: white; stroke-width: 0.5px; stroke-dasharray: 1; } -g#points use[data-troop-allegiance="davion"].clone { +use[data-allegiance="davion"].clone { fill: rgb(255, 126, 126); } -g#points use[data-troop-allegiance="liao"].clone { +use[data-allegiance="liao"].clone { fill: rgb(130, 190, 130); } @@ -171,8 +172,23 @@ use[href*="#t-"] { r: 5px; } +use.selected { + animation: 1s selected 0.25s linear infinite; + stroke-width: 2px; + stroke: yellow; + r: 6px; +} + +@keyframes selected { + 50% { + /* stroke: yellow; */ + stroke-width: 0px; + r: 5px; + } +} + use[data-allegiance="liao"] { - fill: green; + fill: #008000; } use[data-allegiance="davion"] { @@ -184,6 +200,10 @@ use[href*="#t-"][data-x]:hover { --scale: 1.5; } +.board { + transform: translate(19px, 31px) scale(4); +} + g.start-locations g:first-child { --i: -2; } @@ -198,7 +218,6 @@ g.start-locations g:last-child { --circumradius: 10px; --x-step: calc(var(--inradius) * 2); --y-step: calc((3 / 2) * var(--circumradius)); - transform: translate(19px, 31px) scale(4); } g[data-y], g.start-locations > g { @@ -216,7 +235,8 @@ g[data-y]:nth-child(even) { } [data-x]:hover use[href="#hex"] { - --scale: 0.95; + /* --scale: 0.95; */ + opacity: 1; fill: orange; stroke: black; } @@ -315,3 +335,7 @@ g[data-y="50"] { --i: 50; } [data-x="30"] { --i: 30; } [data-x="31"] { --i: 31; } [data-x="32"] { --i: 32; } + +.buildings { + display: none; +} diff --git a/public/map.svg b/public/map.svg index 0c752c6..c56a1dd 100644 --- a/public/map.svg +++ b/public/map.svg @@ -4,6 +4,11 @@ + + @@ -33,7 +38,7 @@ - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + diff --git a/src/index.js b/src/index.js index 4106e73..9acc373 100644 --- a/src/index.js +++ b/src/index.js @@ -132,11 +132,33 @@ function linedraw(x1, y1, x2, y2) { } 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, 'viewBox', zoom(svg, e)); + svg.setAttributeNS(null, vb, zoom(svg, e)); }, { passive: false }); svg.addEventListener('pointerdown', e => { @@ -144,80 +166,843 @@ const PanZoom = new function () { pan(svg, e); }, { passive: false }); + + storeLatestViewBoxVal(svg); }; }; -const Grid = new function () { - this.setUp = function (cells) { - cells.forEach(cell => cell.addEventListener('click', e => { - let { dataset: { x }, parentElement: { dataset: { y }}} = cell; +// const Grid = new function () { +// let cells; - console.log(`Cell at index { x: ${x}, y: ${y} } clicked.`); - })); - }; -}; +// this.setUp = function (cellList) { +// cells = cellList; -const Counter = new function () { - this.setUp = function (counters) { - counters.forEach(counter => counter.addEventListener('click', e => { - e.stopPropagation(); +// cellList.forEach(cell => { +// cell.addEventListener('click', e => { +// let { dataset: { x }, parentElement: { dataset: { y }}} = cell; - const { allegiance: allegiance, number: n } = counter.dataset, - al = allegiance.charAt(0).toUpperCase() + allegiance.slice(1); +// console.log(`Cell at index { x: ${x}, y: ${y} } clicked.`); - console.log(`${al} troop #${n} clicked.`); - })); - }; -}; +// console.log(Board.getCellPosition(cell)); -const Board = new function () { - function getCells (svg) { +// 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]'); } - function getCounters (svg) { - return svg.querySelectorAll('use[href*="#t-"]'); + getCell(x, y) { + return svg.querySelector(`g[data-y="${y}"] g[data-x="${x}"]`); } - this.setUp = function (svg) { - Grid.setUp(getCells(svg)); - Counter.setUp(getCounters(svg)); - }; -}; + 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", - // svg = document.querySelector('svg'), - // hex = svg.querySelector('#point'), - svg = document.querySelector('object').contentDocument.querySelector('svg'), - hex = svg.querySelector('#hex'), ptGrp = svg.querySelector('#points'), - cntrGrp = svg.querySelector('#counters'), - settingsPanel = document.getElementById('panel'), recordSheetVisibility = document.querySelector('#content input[type="checkbox"].visible'); PanZoom.start(svg); - Board.setUp(svg); - 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, + const 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 = { + 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)) @@ -337,12 +1122,6 @@ window.addEventListener('load', () => { } } - let prevVb = localStorage.getItem('viewBox'); - - if (prevVb) { - svg.setAttributeNS(null, 'viewBox', prevVb); - } - let info = document.getElementById('status'); // Object.values(settingsPanel.querySelectorAll('fieldset')).forEach(fieldset => { @@ -391,530 +1170,6 @@ window.addEventListener('load', () => { const grid = svg.querySelector('#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 = 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 () { - 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); - svg.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 !!svg.querySelector(selector); - }; - }; - - const RecordSheet = new function () { - let clipUnclippedFiringArcs = function () { - let unclipped = svg.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) { - 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 { 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 = svg.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]) => { - [].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', 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 = svg.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(document.createTextNode('\n ')); - ptGrp.appendChild(group); - })); - document.querySelectorAll('.soldier-record').forEach(el => el.addEventListener('click', e => { if (el.classList.contains('selected')) { @@ -930,17 +1185,6 @@ window.addEventListener('load', () => { }) ); - // 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(); @@ -952,11 +1196,11 @@ window.addEventListener('load', () => { })); document.querySelectorAll('.end-turn').forEach(el => - el.addEventListener('click', ({ target: { dataset: { allegiance } } }) => { + 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; + { textContent: count, dataset: { update }} = turnCounter; el.setAttribute('disabled', '');