Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCatalin Mititiuc <Catalin.Mititiuc@gmail.com>2024-03-31 12:33:29 -0700
committerCatalin Mititiuc <Catalin.Mititiuc@gmail.com>2024-03-31 12:41:28 -0700
commit7fa416ee1a173be523eecdeaf2cfa2eb4c0d1531 (patch)
treedab50a55b17226274ac9abcdf8def39030f3eacd
parent8332ce9bea0c6977ebd2a13396fb6cf4013167b4 (diff)
WIP: sight line, distance
Diffstat
-rw-r--r--index.html38
-rw-r--r--index.js57
-rw-r--r--style.css25
3 files changed, 82 insertions, 38 deletions
diff --git a/index.html b/index.html
index 9a8e33d..aec11da 100644
--- a/index.html
+++ b/index.html
@@ -140,23 +140,29 @@
</fieldset>
</div>
- <svg viewbox="-49 -40 2390 3163" xmlns="http://www.w3.org/2000/svg">
- <defs>
- <!-- <circle id="point" cx="0" cy="0" r="0.07in" /> -->
- <!-- <circle id="point" cx="0" cy="0" r="50" /> -->
- <!-- <polygon id="point" points="0,100 86.6,50 86.6,-50 0,-100 -86.6,-50 -86.6,50" /> -->
- <polygon id="point" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5" />
- <!-- <text id="asterisk" x="-0.06in" y="0.22in">*</text> -->
- </defs>
+ <div id="map-container">
+ <svg viewbox="-49 -40 2390 3163" xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <!-- <circle id="point" cx="0" cy="0" r="0.07in" /> -->
+ <!-- <circle id="point" cx="0" cy="0" r="50" /> -->
+ <!-- <polygon id="point" points="0,100 86.6,50 86.6,-50 0,-100 -86.6,-50 -86.6,50" /> -->
+ <polygon id="point" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5" />
+ <!-- <text id="asterisk" x="-0.06in" y="0.22in">*</text> -->
+ </defs>
- <rect id="background" x="-1" y="-1" width="2287" height="3087" />
- <image id="map2" class="map-scans" href="scans/map2.jpg" width="2284" height="1518" x="2" y="2" />
- <image id="map3" class="map-scans" href="scans/map3.jpg" width="2284" height="1518" x="4" y="1564" />
- <g id="firing-arcs"></g>
- <rect id="map" x="-1" y="-1" width="2287" height="3087" />
- <g id="points"></g>
- <!-- <rect id="debug-view-box" x="-100" y="-100" width="3400" height="4500" /> -->
- </svg>
+ <rect id="background" x="-1" y="-1" width="2287" height="3087" />
+ <image id="map2" class="map-scans" href="scans/map2.jpg" width="2284" height="1518" x="2" y="2" />
+ <image id="map3" class="map-scans" href="scans/map3.jpg" width="2284" height="1518" x="4" y="1564" />
+ <g id="firing-arcs"></g>
+ <rect id="map" x="-1" y="-1" width="2287" height="3087" />
+ <g id="points"></g>
+ <!-- <rect id="debug-view-box" x="-100" y="-100" width="3400" height="4500" /> -->
+ </svg>
+
+ <div id="status">
+ <span id="hex-counter">Hex count: <span id="hex-count">-</span></span>
+ </div>
+ </div>
<div id="content">
<input type="checkbox" class="visible" checked />
diff --git a/index.js b/index.js
index a0f63a3..33d78c3 100644
--- a/index.js
+++ b/index.js
@@ -99,6 +99,8 @@ if (recVis == 'false') {
recordSheetVisibility.checked = false;
}
+let info = document.getElementById('status');
+
// Object.values(settingsPanel.querySelectorAll('fieldset')).forEach(fieldset => {
[].forEach(fieldset => {
const target = document.getElementById(fieldset.name);
@@ -166,8 +168,10 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
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) {
+ if (selectedSoldier && !existingOccupant) {
let counter = document.createElementNS(svgns, 'circle'),
text = document.createElementNS(svgns, 'text'),
{troopNumber, troopAllegiance} = selectedSoldier.dataset,
@@ -178,6 +182,11 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
pt = new DOMPoint(point.x.baseVal.value, point.y.baseVal.value),
svgP = pt.matrixTransform(mtx);
+ info.querySelector('#hex-count').textContent = '-';
+ info.style.display = 'none';
+ ptGrp.querySelectorAll('.active').forEach(el => el.removeAttribute('class'));
+ svg.querySelectorAll('.sight-line').forEach(el => el.remove());
+
counter.setAttributeNS(null, 'cx', svgP.x);
counter.setAttributeNS(null, 'cy', svgP.y);
counter.setAttributeNS(null, 'r', '0.25in');
@@ -264,37 +273,43 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
let source = ptGrp.querySelector(`use[data-x="${counter.dataset.x}"][data-y="${counter.dataset.y}"]`);
let [x1, y1] = [source.x.baseVal.value, source.y.baseVal.value];
let [x2, y2] = [e.target.x.baseVal.value, e.target.y.baseVal.value];
- let { x: svgX1, y: svgY1 } = ptGrpToSvgPt(x1, y1);
- let { x: svgX2, y: svgY2 } = ptGrpToSvgPt(x2, y2);
- let sightLine = document.createElementNS(svgns, 'line');
+ if (x1 !== x2 || y1 !== y2) {
+ let { x: svgX1, y: svgY1 } = ptGrpToSvgPt(x1, y1);
+ let { x: svgX2, y: svgY2 } = ptGrpToSvgPt(x2, y2);
- sightLine.classList.add('sight-line');
- sightLine.setAttributeNS(null, 'x1', svgX1);
- sightLine.setAttributeNS(null, 'y1', svgY1);
- sightLine.setAttributeNS(null, 'x2', svgX2);
- sightLine.setAttributeNS(null, 'y2', svgY2);
+ let sightLine = document.createElementNS(svgns, 'line');
- svg.appendChild(sightLine);
+ sightLine.classList.add('sight-line');
+ sightLine.setAttributeNS(null, 'x1', svgX1);
+ sightLine.setAttributeNS(null, 'y1', svgY1);
+ sightLine.setAttributeNS(null, 'x2', svgX2);
+ sightLine.setAttributeNS(null, 'y2', svgY2);
- let coords = [
- counter.dataset.x,
- counter.dataset.y,
- e.target.dataset.x,
- e.target.dataset.y
- ].map(n => parseInt(n));
+ svg.insertBefore(sightLine, ptGrp);
- console.log(offset_distance(...coords))
+ let coords = [
+ counter.dataset.x,
+ counter.dataset.y,
+ e.target.dataset.x,
+ e.target.dataset.y
+ ].map(n => parseInt(n));
- let lineCoords = linedraw(...coords);
- lineCoords.shift();
- let s = lineCoords.map(([x, y]) => `use[data-x="${x}"][data-y="${y}"]`).join(', ');
- ptGrp.querySelectorAll(s).forEach(p => p.classList.add('active'));
+ 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[data-x="${x}"][data-y="${y}"]`).join(', ');
+ ptGrp.querySelectorAll(s).forEach(p => p.classList.add('active'));
+ }
}
}
});
point.addEventListener('mouseout', e => {
+ info.querySelector('#hex-count').textContent = '-';
+ info.style.display = 'none';
ptGrp.querySelectorAll('.active').forEach(el => el.removeAttribute('class'));
svg.querySelectorAll('.sight-line').forEach(el => el.remove());
});
diff --git a/style.css b/style.css
index 7aa10e2..08a997a 100644
--- a/style.css
+++ b/style.css
@@ -5,9 +5,14 @@ body {
overflow: hidden;
}
+#map-container {
+ flex-basis: 100%;
+ position: relative;
+}
+
svg {
background-color: darkgray;
- flex-basis: 100%;
+ /* flex-basis: 100%; */
/* max-height: 50vh; */
/* max-height: 100vw; */
}
@@ -25,6 +30,24 @@ svg text {
/* display: none; */
}
+div#status {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ margin: 3px;
+ display: none;
+}
+
+#hex-counter {
+ padding: 2px;
+ background-color: rgba(255, 255, 255, 0.5);
+ border-radius: 2px;
+}
+
+#hex-count {
+ font-family: monospace;
+}
+
div#content {
display: flex;
/* display: none; */