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

Add prone counters

Browse Source
This commit is contained in:
Catalin Mititiuc 2024-04-04 09:04:05 -07:00
parent adc67da606
commit 9e653d0681
3 changed files with 75 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
index.html
View File

@ -151,18 +151,35 @@
<defs> <defs>
<polygon id="point" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5" /> <polygon id="point" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5" />
<symbol id="counter-base" viewBox="-5 -5 10 10" width="10" height="10"> <symbol id="counter-base" viewBox="-6 -6 12 12" width="12" height="12">
<circle cx="0" cy="0" r="5" /> <circle cx="0" cy="0" r="5" />
</symbol> </symbol>
<g id="t-1" class="troop-counter"><use href="#counter-base" /><text>1</text></g> <g id="t-1" class="troop-counter-template"><use href="#counter-base" /><text>1</text></g>
<g id="t-2" class="troop-counter"><use href="#counter-base" /><text>2</text></g> <g id="t-2" class="troop-counter-template"><use href="#counter-base" /><text>2</text></g>
<g id="t-3" class="troop-counter"><use href="#counter-base" /><text>3</text></g> <g id="t-3" class="troop-counter-template"><use href="#counter-base" /><text>3</text></g>
<g id="t-4" class="troop-counter"><use href="#counter-base" /><text>4</text></g> <g id="t-4" class="troop-counter-template"><use href="#counter-base" /><text>4</text></g>
<g id="t-5" class="troop-counter"><use href="#counter-base" /><text>5</text></g> <g id="t-5" class="troop-counter-template"><use href="#counter-base" /><text>5</text></g>
<g id="t-6" class="troop-counter"><use href="#counter-base" /><text>6</text></g> <g id="t-6" class="troop-counter-template"><use href="#counter-base" /><text>6</text></g>
<g id="t-7" class="troop-counter"><use href="#counter-base" /><text>7</text></g> <g id="t-7" class="troop-counter-template"><use href="#counter-base" /><text>7</text></g>
<g id="davion-1" class="troop-counter"><use href="#t-1" /></g>
<g id="davion-2" class="troop-counter"><use href="#t-2" /></g>
<g id="davion-3" class="troop-counter"><use href="#t-3" /></g>
<g id="davion-4" class="troop-counter"><use href="#t-4" /></g>
<g id="davion-5" class="troop-counter"><use href="#t-5" /></g>
<g id="davion-6" class="troop-counter"><use href="#t-6" /></g>
<g id="davion-7" class="troop-counter"><use href="#t-7" /></g>
<g id="liao-1" class="troop-counter"><use href="#t-1" /></g>
<g id="liao-2" class="troop-counter"><use href="#t-2" /></g>
<g id="liao-3" class="troop-counter"><use href="#t-3" /></g>
<g id="liao-4" class="troop-counter"><use href="#t-4" /></g>
<g id="liao-5" class="troop-counter"><use href="#t-5" /></g>
<g id="liao-6" class="troop-counter"><use href="#t-6" /></g>
<g id="liao-7" class="troop-counter"><use href="#t-7" /></g>
<image id="counter-prone" href="counter_prone.jpg" width="10px" />
<image id="numbers" href="rendered_numbers.png" width="182" height="22" /> <image id="numbers" href="rendered_numbers.png" width="182" height="22" />
<symbol id="n1" viewBox="1 0 17 22" width="17" height="22"><use href="#numbers" /></symbol> <symbol id="n1" viewBox="1 0 17 22" width="17" height="22"><use href="#numbers" /></symbol>
@ -194,7 +211,7 @@
<g id="counters"></g> <g id="counters"></g>
</g> </g>
<image style="image-rendering: pixelated" href="rendered_numbers.png" x="0" y="-46" width="182" height="22" opacity="0.5" /> <image href="rendered_numbers.png" x="0" y="-46" width="182" height="22" opacity="0.5" />
<use href="#n1" x="1" y="-40" opacity="0.5" /> <use href="#n1" x="1" y="-40" opacity="0.5" />
<use href="#n2" x="19" y="-40" opacity="0.5" /> <use href="#n2" x="19" y="-40" opacity="0.5" />
@ -222,6 +239,8 @@
<button type="button" class="set-firing-arc" data-size="large"> <button type="button" class="set-firing-arc" data-size="large">
<img src="firing_arc_large.png" height="12" /> 6 MP <img src="firing_arc_large.png" height="12" /> 6 MP
</button> </button>
<br>
Prone: <input type="checkbox" id="toggle-prone-counter" />
</div> </div>
<div id="record-sheet"> <div id="record-sheet">

43
index.js
View File

@ -444,12 +444,15 @@ const Counter = new function() {
this.select = function({ dataset: { troopNumber, troopAllegiance }}) { this.select = function({ dataset: { troopNumber, troopAllegiance }}) {
this.unSelect(); this.unSelect();
let queriedCounter = container.querySelector(selector(troopNumber, troopAllegiance)); let counterAndClones = container.querySelectorAll(selector(troopNumber, troopAllegiance));
if (queriedCounter) { counterAndClones.forEach(el => {
queriedCounter.classList.add(selectedClass); el.style.pointerEvents = 'auto';
queriedCounter.style.pointerEvents = 'auto';
} if (!el.classList.contains('clone')) {
el.classList.add(selectedClass);
}
});
}; };
this.unSelect = function() { this.unSelect = function() {
@ -524,7 +527,7 @@ const Counter = new function() {
} else { } else {
counter = document.createElementNS(svgns, 'use'), counter = document.createElementNS(svgns, 'use'),
counter.setAttributeNS(null, 'href', `#t-${troopNumber}`); counter.setAttributeNS(null, 'href', `#${troopAllegiance}-${troopNumber}`);
counter.classList.add('counter', 'selected'); counter.classList.add('counter', 'selected');
counter.setAttributeNS(null, 'x', point.getAttribute('x')); counter.setAttributeNS(null, 'x', point.getAttribute('x'));
counter.setAttributeNS(null, 'y', point.getAttribute('y')); counter.setAttributeNS(null, 'y', point.getAttribute('y'));
@ -563,6 +566,12 @@ const Counter = new function() {
Counter.removeClones(el); Counter.removeClones(el);
}; };
this.hasProne = function(troopNumber, troopAllegiance) {
let selector = `g#${troopAllegiance}-${troopNumber} use[href="#counter-prone"]`;
return !!document.querySelector(selector);
};
}; };
const RecordSheet = new function() { const RecordSheet = new function() {
@ -580,6 +589,7 @@ const RecordSheet = new function() {
if (selected) { if (selected) {
selected.classList.remove('selected'); selected.classList.remove('selected');
document.getElementById('toggle-prone-counter').checked = false;
} }
clipUnclippedFiringArcs(); clipUnclippedFiringArcs();
@ -591,10 +601,13 @@ const RecordSheet = new function() {
}; };
this.select = function(el) { this.select = function(el) {
let { troopNumber, troopAllegiance } = el.dataset; let { troopNumber, troopAllegiance } = el.dataset,
proneStatus = Counter.hasProne(troopNumber, troopAllegiance);
this.unSelect(); this.unSelect();
el.classList.add('selected'); el.classList.add('selected');
document.getElementById('toggle-prone-counter').checked = proneStatus;
existingArcs = document.querySelectorAll(`#firing-arcs polygon[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`); existingArcs = document.querySelectorAll(`#firing-arcs polygon[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`);
existingArcs.forEach(el => el.removeAttribute('clip-path')); existingArcs.forEach(el => el.removeAttribute('clip-path'));
}; };
@ -934,6 +947,22 @@ document.querySelectorAll('#toggle-firing-arc-vis input').forEach(el => el.addEv
clipPaths.forEach(cp => cp.style.display = el.checked ? 'none' : ''); clipPaths.forEach(cp => cp.style.display = el.checked ? 'none' : '');
})); }));
document.getElementById('toggle-prone-counter').addEventListener('input', function(e) {
let selected = RecordSheet.getSelected();
if (selected) {
let template = q(`g#${selected.dataset.troopAllegiance}-${selected.dataset.troopNumber}`);
if (this.checked) {
let counter = document.createElementNS(svgns, 'use');
counter.setAttributeNS(null, 'href', '#counter-prone');
template.appendChild(counter);
} else {
template.querySelector('[href="#counter-prone"]').remove();
}
}
});
(function debug() { (function debug() {
function drawLine(x1, y1, x2, y2) { function drawLine(x1, y1, x2, y2) {
let start = ptGrp.querySelector(`[data-x="${x1}"][data-y="${y1}"]`); let start = ptGrp.querySelector(`[data-x="${x1}"][data-y="${y1}"]`);

44
style.css
View File

@ -16,22 +16,13 @@ svg {
height: 100%; height: 100%;
} }
svg image#numbers { svg image {
image-rendering: pixelated; image-rendering: pixelated;
} }
/* svg text { svg image.map-scans {
user-select: none; image-rendering: auto;
font-size: 4px; }
fill: black;
stroke: black;
stroke-width: 0.2px;
font-weight: bold;
transform: translateY(6px);
font-family: monospace;
text-anchor: middle;
display: none;
} */
div#status { div#status {
position: absolute; position: absolute;
@ -206,28 +197,11 @@ image.map-scans {
transform: rotate(180deg); transform: rotate(180deg);
} }
/* circle.counter { g.troop-counter-template use[href="#counter-base"] {
stroke: transparent; transform: translate(-6px, -6px);
stroke-width: 0.5in;
} */
use.counter.clone {
/* filter: saturate(40%) brightness(4); */
/* filter: grayscale(0.8) */
} }
g.troop-counter { g.troop-counter-template text {
/* fill: inherit; */
/* transform: translate(-7px, -7px); */
/* opacity: 0.5; */
}
g.troop-counter use[href="#counter-base"] {
/* transform: translate(-7px, -7px); */
transform: translate(-5px, -5px);
}
g.troop-counter text {
fill: white; fill: white;
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
@ -240,6 +214,10 @@ g.troop-counter text {
stroke: none; stroke: none;
} }
g.troop-counter [href="#counter-prone"] {
transform: translate(-5px, 6px);
}
g#counters { g#counters {
pointer-events: none; pointer-events: none;
} }