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

Try to simplify trooper counter

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2024-05-29 18:02:18 -07:00
parent fdf9e0145e
commit 187faec2df
8 changed files with 185 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
public/assets/css/map.css
View File

@ -47,10 +47,6 @@ polyline.move-trace {
/* fill: #bacae3; */
}
#counter-base {
r: inherit;
}
g.troop-counter, g.counter, g.troop-counter use {
r: inherit;
}
@ -59,7 +55,7 @@ g.troop-counter-template, g.troop-counter-template use {
r: inherit;
}
g.weapon-symbol {
g.weapon-symbol :not(use[href="#counter-base"]) {
stroke: white;
stroke-width: 0.5px;
}
@ -107,18 +103,27 @@ g[data-allegiance="attacker"].clone {
fill: rgb(126, 126, 255);
}
text.counter, #troop-counter text {
.counter, #troop-counter text {
/* transform: translateY(4px); */
}
g.counter use.troop-number, g.counter use.squad-number {
font-size: 12px;
font-weight: bold;
fill: white;
font-family: sans-serif;
font-family: monospace;
cursor: default;
text-anchor: middle;
transform: translateY(4px);
pointer-events: none;
user-select: none;
--text-fill: white;
--translateY: 4px;
}
/* .primary-weapon {
stroke: white;
stroke-width: 0.5px;
} */
polygon.firing-arc[data-allegiance="defender"] {
fill: red;
}
@ -167,17 +172,6 @@ g.counter use {
r: 5px;
}
g.counter text.troop-number, g.counter text.squad-number {
fill: black;
font-size: 6px;
font-family: monospace;
font-weight: bold;
cursor: default;
text-anchor: middle;
pointer-events: none;
user-select: none;
}
g.counter use.troop-number, g.counter use.squad-number {
--scale: 0.4;
}
@ -194,7 +188,7 @@ g.counter .troop-number, g.counter .squad-number {
transform: translate(var(--translateX), 0) scale(var(--scale));
}
g.selected use[href="#counter-base"] {
g.selected use.primary-weapon {
animation: 1s selected 0.25s linear infinite;
stroke-width: 2px;
stroke: yellow;

15
public/assets/css/style.css
View File

@ -181,11 +181,18 @@ polygon.firing-arc[data-allegiance="attacker"] {
fill: blue;
}
.weapon-icon {
.soldier-record svg use {
r: 5px;
stroke: none;
}
.soldier-record svg.weapon-icon use {
stroke: white;
stroke-width: 0.5px;
}
.soldier-record svg {
width: 20px;
height: 20px;
@ -210,12 +217,6 @@ polygon.firing-arc[data-allegiance="attacker"] {
font-family: monospace;
}
.weapon-symbol :not(use[href="#counter-base"]) {
stroke: white;
stroke-width: 0.5;
fill: none;
}
.soldier-record.selected {
background-color: khaki;
}

43
public/assets/images/counters.svg
View File

@ -1,7 +1,36 @@
<?xml version="1.0" standalone="no"?>
<svg viewBox="-6 -6 12 24" xmlns="http://www.w3.org/2000/svg">
<defs>
<circle id="counter-base" style="stroke: none;" cx="0" cy="0" r="5"/>
<circle id="counter-base" style="r: inherit; stroke: none;" cx="0" cy="0" r="5"/>
<g style="r: inherit;" id="number-1">
<use style="r: inherit;" href="#counter-base"/>
<text style="fill: var(--text-fill); transform: translateY(var(--translateY))">1</text>
</g>
<g id="number-2">
<use href="#counter-base"/>
<text style="fill: var(--text-fill); transform: translateY(var(--translateY))">2</text>
</g>
<g id="number-3">
<use href="#counter-base"/>
<text style="fill: var(--text-fill); transform: translateY(var(--translateY))">3</text>
</g>
<g id="number-4">
<use href="#counter-base"/>
<text style="fill: var(--text-fill); transform: translateY(var(--translateY))">4</text>
</g>
<g id="number-5">
<use href="#counter-base"/>
<text style="fill: var(--text-fill); transform: translateY(var(--translateY))">5</text>
</g>
<g id="number-6">
<use href="#counter-base"/>
<text style="fill: var(--text-fill); transform: translateY(var(--translateY))">6</text>
</g>
<g id="number-7">
<use href="#counter-base"/>
<text style="fill: var(--text-fill); transform: translateY(var(--translateY))">7</text>
</g>
<g id="semi-auto">
<line x1="-2" y1="1" x2="2" y2="1"/>
@ -15,22 +44,22 @@
</g>
</defs>
<g id="rifle" class="weapon-symbol">
<use href="#counter-base"/>
<g id="rifle" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<use href="#semi-auto"/>
<line x1="0" y1="-5" x2="0" y2="5"/>
<polyline style="fill: none;" points="-2,-3.5 0,-5 2,-3.5"/>
</g>
<g id="smg" class="weapon-symbol">
<use href="#counter-base"/>
<g id="smg" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<use href="#auto"/>
<line x1="0" y1="-5" x2="0" y2="4.5"/>
<line x1="-2" y1="4.5" x2="2" y2="4.5"/>
</g>
<g id="blazer" class="weapon-symbol">
<use href="#counter-base"/>
<g id="blazer" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<use href="#auto"/>
<polyline points="0,-5 0,-3 -3,-2.5 3,-1.5 0,-1 0,2.5 -3,3, 3,4 0,4.5 0,5"/>
<polyline points="-2,-3.5 0,-5 2,-3.5"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

136
public/assets/images/scenario-side_show.svg
View File

@ -25,7 +25,6 @@
</style>
<defs>
<polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
<circle id="counter-base" cx="0" cy="0" r="5"/>
<line id="ast-line" x1="-1.2" y1="0" x2="1.2" y2="0"/>
@ -45,13 +44,36 @@
<use x="-8.66" style="transform-origin: -8.66px 0;" class="ccw-60-deg" href="#ast-line"/>
</pattern>
<g id="t-1" class="troop-counter-template"><use href="#counter-base"/><text>1</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-template"><use href="#counter-base"/><text>3</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-template"><use href="#counter-base"/><text>5</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-template"><use href="#counter-base"/><text>7</text></g>
<circle id="counter-base" style="r: inherit;" cx="0" cy="0" r="5"/>
<g style="r: inherit;" id="number-1">
<use style="r: inherit;" href="#counter-base"/>
<text style="fill: var(--text-fill); transform: translateY(var(--translateY))">1</text>
</g>
<g style="r: inherit;" id="number-2">
<use style="r: inherit;" href="#counter-base"/>
<text style="fill: var(--text-fill); transform: translateY(var(--translateY))">2</text>
</g>
<g style="r: inherit;" id="number-3">
<use style="r: inherit;" href="#counter-base"/>
<text style="fill: var(--text-fill); transform: translateY(var(--translateY))">3</text>
</g>
<g style="r: inherit;" id="number-4">
<use style="r: inherit;" href="#counter-base"/>
<text style="fill: var(--text-fill); transform: translateY(var(--translateY))">4</text>
</g>
<g style="r: inherit;" id="number-5">
<use style="r: inherit;" href="#counter-base"/>
<text style="fill: var(--text-fill); transform: translateY(var(--translateY))">5</text>
</g>
<g style="r: inherit;" id="number-6">
<use style="r: inherit;" href="#counter-base"/>
<text style="fill: var(--text-fill); transform: translateY(var(--translateY))">6</text>
</g>
<g style="r: inherit;" id="number-7">
<use style="r: inherit;" href="#counter-base"/>
<text style="fill: var(--text-fill); transform: translateY(var(--translateY))">7</text>
</g>
<g id="semi-auto">
<line x1="-2" y1="1" x2="2" y2="1"/>
@ -64,19 +86,22 @@
<line x1="-2" y1="2" x2="2" y2="2"/>
</g>
<g id="rifle" class="weapon-symbol">
<g id="rifle" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<use href="#semi-auto"/>
<line x1="0" y1="-5" x2="0" y2="5"/>
<polyline points="-2,-3.5 0,-5 2,-3.5"/>
<polyline style="fill: none;" points="-2,-3.5 0,-5 2,-3.5"/>
</g>
<g id="smg" class="weapon-symbol">
<g id="smg" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<use href="#auto"/>
<line x1="0" y1="-5" x2="0" y2="4.5"/>
<line x1="-2" y1="4.5" x2="2" y2="4.5"/>
</g>
<g id="blazer" class="weapon-symbol">
<g id="blazer" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<use href="#auto"/>
<polyline points="0,-5 0,-3 -3,-2.5 3,-1.5 0,-1 0,2.5 -3,3, 3,4 0,4.5 0,5"/>
<polyline points="-2,-3.5 0,-5 2,-3.5"/>
@ -114,51 +139,104 @@
<g class="start-locations" data-attacker-name="liao" data-defender-name="davion">
<g data-edge="north">
<g data-x="13">
<g class="counter" data-allegiance="attacker" data-number="1">
<use href="#counter-base"/><use class="troop-number" href="#t-1"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#rifle"/>
<!-- <use data-href="counters.svg#rifle"/><use class="troop-number" href="#t-1"/><use class="squad-number" href="#t-1"/> -->
<g class="counter selected" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="#blazer"/>
<use class="troop-number" href="#number-1"/>
<use class="squad-number" href="#number-1"/>
</g>
</g>
<g data-x="14">
<g class="counter" data-allegiance="attacker" data-number="2"><use href="#counter-base"/><use class="troop-number" href="#t-2"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#rifle"/></g>
<g class="counter" data-allegiance="attacker" data-number="2">
<use class="primary-weapon" href="#rifle"/>
<use class="troop-number" href="#number-2"/>
<use class="squad-number" href="#number-1"/>
</g>
</g>
<g data-x="15">
<g class="counter" data-allegiance="attacker" data-number="3"><use href="#counter-base"/><use class="troop-number" href="#t-3"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#smg"/></g>
<g class="counter" data-allegiance="attacker" data-number="3">
<use class="primary-weapon" href="#rifle"/>
<use class="troop-number" href="#number-3"/>
<use class="squad-number" href="#number-1"/>
</g>
</g>
<g data-x="16">
<g class="counter" data-allegiance="attacker" data-number="4"><use href="#counter-base"/><use class="troop-number" href="#t-4"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#smg"/></g>
<g class="counter" data-allegiance="attacker" data-number="4">
<use class="primary-weapon" href="#smg"/>
<use class="troop-number" href="#number-4"/>
<use class="squad-number" href="#number-1"/>
</g>
</g>
<g data-x="17">
<g class="counter" data-allegiance="attacker" data-number="5"><use href="#counter-base"/><use class="troop-number" href="#t-5"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#smg"/></g>
<g class="counter" data-allegiance="attacker" data-number="5">
<use class="primary-weapon" href="#smg"/>
<use class="troop-number" href="#number-5"/>
<use class="squad-number" href="#number-1"/>
</g>
</g>
<g data-x="18">
<g class="counter" data-allegiance="attacker" data-number="6"><use href="#counter-base"/><use class="troop-number" href="#t-6"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#smg"/></g>
<g class="counter" data-allegiance="attacker" data-number="6">
<use class="primary-weapon" href="#smg"/>
<use class="troop-number" href="#number-6"/>
<use class="squad-number" href="#number-1"/>
</g>
</g>
<g data-x="19">
<g class="counter" data-allegiance="attacker" data-number="7"><use href="#counter-base"/><use class="troop-number" href="#t-7"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#blazer"/></g>
<g class="counter" data-allegiance="attacker" data-number="7">
<use class="primary-weapon" href="#smg"/>
<use class="troop-number" href="#number-7"/>
<use class="squad-number" href="#number-1"/>
</g>
</g>
</g>
<g data-edge="south">
<g data-x="13">
<g class="counter" data-allegiance="defender" data-number="1"><use href="#counter-base"/><use class="troop-number" href="#t-1"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#rifle"/></g>
<g class="counter" data-allegiance="defender" data-number="1">
<use class="primary-weapon" href="#blazer"/>
<use class="troop-number" href="#number-1"/>
<use class="squad-number" href="#number-1"/>
</g>
</g>
<g data-x="14">
<g class="counter" data-allegiance="defender" data-number="2"><use href="#counter-base"/><use class="troop-number" href="#t-2"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#rifle"/></g>
<g class="counter" data-allegiance="defender" data-number="2">
<use class="primary-weapon" href="#rifle"/>
<use class="troop-number" href="#number-2"/>
<use class="squad-number" href="#number-1"/>
</g>
</g>
<g data-x="15">
<g class="counter" data-allegiance="defender" data-number="3"><use href="#counter-base"/><use class="troop-number" href="#t-3"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#smg"/></g>
<g class="counter" data-allegiance="defender" data-number="3">
<use class="primary-weapon" href="#rifle"/>
<use class="troop-number" href="#number-3"/>
<use class="squad-number" href="#number-1"/>
</g>
</g>
<g data-x="16">
<g class="counter" data-allegiance="defender" data-number="4"><use href="#counter-base"/><use class="troop-number" href="#t-4"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#smg"/></g>
<g class="counter" data-allegiance="defender" data-number="4">
<use class="primary-weapon" href="#smg"/>
<use class="troop-number" href="#number-4"/>
<use class="squad-number" href="#number-1"/>
</g>
</g>
<g data-x="17">
<g class="counter" data-allegiance="defender" data-number="5"><use href="#counter-base"/><use class="troop-number" href="#t-5"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#smg"/></g>
<g class="counter" data-allegiance="defender" data-number="5">
<use class="primary-weapon" href="#smg"/>
<use class="troop-number" href="#number-5"/>
<use class="squad-number" href="#number-1"/>
</g>
</g>
<g data-x="18">
<g class="counter" data-allegiance="defender" data-number="6"><use href="#counter-base"/><use class="troop-number" href="#t-6"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#smg"/></g>
<g class="counter" data-allegiance="defender" data-number="6">
<use class="primary-weapon" href="#smg"/>
<use class="troop-number" href="#number-6"/>
<use class="squad-number" href="#number-1"/>
</g>
</g>
<g data-x="19">
<g class="counter" data-allegiance="defender" data-number="7"><use href="#counter-base"/><use class="troop-number" href="#t-7"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#blazer"/></g>
<g class="counter" data-allegiance="defender" data-number="7">
<use class="primary-weapon" href="#smg"/>
<use class="troop-number" href="#number-7"/>
<use class="squad-number" href="#number-1"/>
</g>
</g>
</g>
</g>
@ -1952,6 +2030,6 @@
</g>
</g>
<!-- <script href="http://localhost:8080/map.js"/> -->
<script href="../../import_mapsheets.js"/>
<script href="../../import_external_resources.js"/>
<script href="../../map.js"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 86 KiB

After

Width:  |  Height:  |  Size: 87 KiB

2
public/index.html
View File

@ -247,7 +247,7 @@
<input type="file" accept="image/svg+xml"/>
<script>
// new EventSource('/esbuild').addEventListener('change', () => location.reload());
new EventSource('/esbuild').addEventListener('change', () => location.reload());
</script>
<script src="index.js"></script>
<script src="soldier_record_block.js"></script>

15
src/import_external_resources.js Normal file
View File

@ -0,0 +1,15 @@
import mapsheets from './assets/images/mapsheets.svg';
import counters from './assets/images/counters.svg';
const files = {
'mapsheets.svg': mapsheets,
'counters.svg': counters
}
document.querySelectorAll('use[data-href*=".svg"').forEach(el => {
const [filename] = el.dataset.href.match(/.+\.svg/g)
, href = el.dataset.href.replace(filename, files[filename].split('/').pop())
;
el.setAttributeNS(null, 'href', href);
});

8
src/import_mapsheets.js
View File

@ -1,8 +0,0 @@
import mapsheets from './assets/images/mapsheets.svg';
const useEls = document.querySelectorAll('svg use[data-href*="mapsheets.svg"');
useEls.forEach(el => {
const href = el.dataset.href.replace('mapsheets.svg', mapsheets.split('/').pop());
el.setAttributeNS(null, 'href', href);
});

5
src/modules/record_sheet.js
View File

@ -81,12 +81,13 @@ function createWeaponIcon(type) {
function createRecord(unit) {
const { dataset: { allegiance, number, squad }} = unit,
primaryWeapon = unit.querySelector('.primary-weapon'),
pw = primaryWeapon?.getAttribute('href').replace('#', '') || 'rifle',
pw = primaryWeapon.getAttributeNS(null, 'href').split('#').pop() || 'rifle',
div = document.createElement('div', { is: 'soldier-record-block' }),
spans = Array(6).fill('span').map(t => document.createElement(t)),
[tn, sn, pwt, pwd, pwrs, pwrl] = spans;
div.setAttribute('class', 'soldier-record');
div.classList.add('soldier-record');
if (unit.classList.contains('selected')) div.classList.add('selected');
div.dataset.number = number;
div.dataset.allegiance = allegiance;