| index : btroops | |
| Virtual board game-aid for BattleTroops, an infantry combat simulator wargame published by FASA in 1989. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <Catalin.Mititiuc@gmail.com> | 2024-03-20 09:33:58 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <Catalin.Mititiuc@gmail.com> | 2024-03-20 11:47:29 -0700 |
| commit | 8ebaacfbf6fcf9f4e21dcfb8a516d94ff3410405 (patch) | |
| tree | 1cb66ed76b0219ae7cf5bd35ad4ff0949fbd6989 /index.js | |
| parent | 5bc7849aaa307338d62bd77967ab4afff13b6e4f (diff) | |
WIP: firing arcs
Diffstat (limited to 'index.js')
| -rw-r--r-- | index.js | 89 |
1 files changed, 78 insertions, 11 deletions
@@ -1,6 +1,9 @@ var rect = document.querySelector('rect#map'); var toFixed = n => Number.parseFloat(n).toFixed(2); +var svgns = "http://www.w3.org/2000/svg", + svg = document.querySelector('svg'); + rect.addEventListener('mousemove', e => { var rect = e.target.getBoundingClientRect(); var x = e.clientX - rect.left; // x position within the element @@ -10,12 +13,17 @@ rect.addEventListener('mousemove', e => { 'x: ' + toFixed(x / rect.width * e.target.width.baseVal.valueInSpecifiedUnits) + '"', 'y: ' + toFixed(y / rect.height * e.target.height.baseVal.valueInSpecifiedUnits) + '"' ); + + let aim = document.querySelector('.firing-arc.active'); + + if (aim) { + aim.setAttributeNS(null, 'x2', `${x / rect.width * e.target.width.baseVal.valueInSpecifiedUnits}in`); + aim.setAttributeNS(null, 'y2', `${y / rect.height * e.target.height.baseVal.valueInSpecifiedUnits}in`); + } }); document.querySelectorAll('.soldier-record').forEach(el => el.addEventListener('click', e => { - // console.log(e.target.dataset.troopNumber); - if (e.target.classList.contains('selected')) { e.target.classList.remove('selected'); } else { @@ -27,8 +35,42 @@ document.querySelectorAll('.soldier-record').forEach(el => }) ); -var svgns = "http://www.w3.org/2000/svg", - svg = document.querySelector('svg'); +document.querySelector('#set-firing-arc').addEventListener('click', e => { + let selectedSoldier = document.querySelector('.soldier-record.selected'); + + if (selectedSoldier) { + let {troopNumber, troopAllegiance} = selectedSoldier.dataset; + + let firingArc = document.querySelector( + `.firing-arc[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]` + ); + + if (firingArc) { firingArc.remove() } + + let counter = document.querySelector( + `circle.counter[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]` + ); + + let aim = document.createElementNS(svgns, 'line'); + + aim.classList.add('firing-arc', 'active'); + aim.dataset.troopNumber = troopNumber; + aim.dataset.troopAllegiance = troopAllegiance; + aim.setAttributeNS(null, 'x1', counter.cx.baseVal.valueAsString); + aim.setAttributeNS(null, 'y1', counter.cy.baseVal.valueAsString); + aim.setAttributeNS(null, 'x2', counter.cx.baseVal.valueAsString); + aim.setAttributeNS(null, 'y2', counter.cy.baseVal.valueAsString); + + svg.appendChild(aim); + + aim.addEventListener('click', e => { + e.target.classList.remove('active'); + document.querySelector('circle#point').style.display = ''; + }); + + document.querySelector('circle#point').style.display = 'none'; + } +}); var columnCount = 33, rowCount = 25, @@ -38,23 +80,23 @@ var isEven = n => n % 2 === 0; var columns = [...Array(columnCount).keys()], rows = [...Array(rowCount).keys()], - columnCoords = columns.map(x => x * pointDistanceInInches), - rowCoords = rows.map(y => y * pointDistanceInInches), - pointCoords = rowCoords.map(y => columnCoords.map(x => [x, y])); + points = rows.map(y => columns.map(x => [x, y])); var xOffset = 0.25, yOffset = 0.45; calcY = Math.sqrt(3) * pointDistanceInInches / 2, alternatingOffset = pointDistanceInInches / 2; -pointCoords.forEach((row, index) => row.forEach(([x, y]) => { - var cx = x + xOffset + (isEven(index) ? alternatingOffset : 0), - cy = calcY * y + yOffset, +points.forEach((row, index) => row.forEach(([x, y]) => { + var cx = x * pointDistanceInInches + xOffset + (isEven(index) ? alternatingOffset : 0), + cy = y * pointDistanceInInches * calcY + yOffset, point = document.createElementNS(svgns, 'use'); point.setAttributeNS(null, 'href', `#point`); point.setAttributeNS(null, 'x', `${cx}in`); point.setAttributeNS(null, 'y', `${cy}in`); + point.dataset.x = x; + point.dataset.y = y; point.addEventListener('click', e => { let selectedSoldier = document.querySelector('.soldier-record.selected'); @@ -88,4 +130,29 @@ pointCoords.forEach((row, index) => row.forEach(([x, y]) => { }); svg.appendChild(point); -}));
\ No newline at end of file +})); + +let getPointCoords = (x, y) => { + let point = document.querySelector(`[data-x="${x}"][data-y="${y}"]`); + + return [point.x.baseVal.value, point.y.baseVal.value] +}; + + +let smallArc = document.createElementNS(svgns, 'polygon'); +let smallArcPoints = `${getPointCoords(1, 24)} ${getPointCoords(1, 21)} ${getPointCoords(2, 21)}`; +smallArc.setAttributeNS(null, 'points', smallArcPoints); + +svg.appendChild(smallArc); + +let medArc = document.createElementNS(svgns, 'polygon'); +let medArcPoints = `${getPointCoords(4, 24)} ${getPointCoords(3, 21)} ${getPointCoords(6, 21)}`; +medArc.setAttributeNS(null, 'points', medArcPoints); + +svg.appendChild(medArc); + +let lrgArc = document.createElementNS(svgns, 'polygon'); +let lrgArcPoints = `${getPointCoords(19, 24)} ${getPointCoords(9, 21)} ${getPointCoords(30, 21)}`; +lrgArc.setAttributeNS(null, 'points', lrgArcPoints); + +svg.appendChild(lrgArc);
\ No newline at end of file |