WIP: sight line, distance
This commit is contained in:
Catalin Mititiuc
parent
8332ce9bea
commit
7fa416ee1a
38
index.html
38
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 />
|
||||
|
||||
57
index.js
57
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());
|
||||
});
|
||||
|
||||
25
style.css
25
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; */
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user