ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: firing arcs

Browse Source
This commit is contained in:
Catalin Mititiuc 2024-03-20 09:33:58 -07:00
parent 5bc7849aaa
commit 8ebaacfbf6
3 changed files with 100 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
index.html
View File

@ -23,11 +23,6 @@
<circle id="point" cx="0" cy="0" r="0.5in" />
<polygon id="hex" fill="url('#gradient')" points="0,121.32 184.152,15.544 368.312,121.32 368.312,332.864 184.152,438.64 0,332.864 "/>
<text id="asterisk" x="-0.06in" y="0.22in">*</text>
<g id="counter">
<circle cx="0" cy="0" r="0.25in" />
<text x="0" y="0.25in" text-anchor="middle">1</text>
</g>
</defs>
<line x1="0" y1="-0.25in" x2="34in" y2="-0.25in" stroke="url(#inch-mark)" />
@ -37,13 +32,15 @@
<rect id="map" x="0" y="0" width="34in" height="23in" />
</svg>
<button id="set-firing-arc">Set Firing Arc</button>
<div id="record-sheet">
<div>
<img class="logo" src="logo-davion.png" />
<!-- <img class="logo" src="logo-davion.png" /> -->
<p>
Davion<br>
1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br>
17th Kestral Mechanized Infantry
<!-- 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br>
17th Kestral Mechanized Infantry -->
</p>
<div class="soldier-record" data-troop-number="1" data-troop-allegiance="davion">
Troop Number: 1<br>
@ -62,11 +59,11 @@
</div>
</div>
<div>
<img class="logo" src="logo-liao.png" />
<!-- <img class="logo" src="logo-liao.png" /> -->
<p>
Liao<br>
2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br>
Aldebaran Home Guard
<!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br>
Aldebaran Home Guard -->
</p>
<div class="soldier-record" data-troop-number="1" data-troop-allegiance="liao">
Troop Number: 1<br>

89
index.js
View File

@ -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);
}));
}));
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);

16
style.css
View File

@ -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;
}