Web Dev Solutions

Troop Number: 1
@@ -62,11 +59,11 @@

Troop Number: 1
diff --git a/index.js b/index.js index 4cab6bc..ecfba46 100644 --- a/index.js +++ b/index.js @@ -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 diff --git a/style.css b/style.css index 84993c0..c2d0db8 100644 --- a/style.css +++ b/style.css @@ -8,7 +8,7 @@ body { circle#point { fill: black; - opacity: 0; + opacity: 0.1; } circle.counter[data-troop-allegiance="liao"] { @@ -29,10 +29,18 @@ text.counter { } rect#map { - fill: none; + fill: black; + opacity: 0; +} + +polygon { opacity: 0.33; } +line.firing-arc { + stroke: black; +} + image#img1 { transform: scale(3.41) rotate(-0.15deg); /* opacity: 0.33; */ @@ -57,6 +65,10 @@ image#img2 { transform: scale(0.26) translate(-2in, -2in); } +/* use[href="#point"] { + pointer-events: none; +} */ + #asterisk { font-size: 30; } -- cgit v1.2.3