Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCatalin Mititiuc <Catalin.Mititiuc@gmail.com>2024-03-20 09:33:58 -0700
committerCatalin Mititiuc <Catalin.Mititiuc@gmail.com>2024-03-20 11:47:29 -0700
commit8ebaacfbf6fcf9f4e21dcfb8a516d94ff3410405 (patch)
tree1cb66ed76b0219ae7cf5bd35ad4ff0949fbd6989
parent5bc7849aaa307338d62bd77967ab4afff13b6e4f (diff)
WIP: firing arcs
Diffstat
-rw-r--r--index.html19
-rw-r--r--index.js89
-rw-r--r--style.css16
3 files changed, 100 insertions, 24 deletions
diff --git a/index.html b/index.html
index 8e17c5f..00f3387 100644
--- a/index.html
+++ b/index.html
@@ -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>
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;
}