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

Complete military symbols and add a map

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc
2025-08-28 10:45:28 -07:00
parent f98df324ac
commit 8fa7958ba0
6 changed files with 404 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -238,6 +238,10 @@ pattern use {
--y-step: calc((3 / 2) * var(--circumradius));
}
g.start-locations {
display: none;
}
g[data-y], g.start-locations > g {
--translateX: 0;
transform: translate(var(--translateX), calc(var(--y-step) * var(--i)));

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

@@ -1,6 +1,5 @@
<?xml version="1.0" standalone="no"?>
<svg viewBox="-6 -6 12 24"
xmlns="http://www.w3.org/2000/svg">
<svg viewBox="-6 -6 12 24" xmlns="http://www.w3.org/2000/svg">
<defs>
<circle id="counter-base" style="r: inherit;" cx="0" cy="0" />
@@ -34,18 +33,27 @@
</g>
<g id="semi-auto">
<line x1="-2" y1="0" x2="2" y2="0"/>
<line x1="-2" y1="1" x2="2" y2="1"/>
<line x1="-2" y1="2" x2="2" y2="2"/>
</g>
<g id="auto">
<line x1="-2" y1="0" x2="2" y2="0"/>
<line x1="-2" y1="1" x2="2" y2="1"/>
<line x1="-2" y1="2" x2="2" y2="2"/>
<line x1="-2" y1="-0.5" x2="2" y2="-0.5"/>
<line x1="-2" y1="0.5" x2="2" y2="0.5"/>
<line x1="-2" y1="1.5" x2="2" y2="1.5"/>
</g>
<g id="laser">
<polyline points="0,-5 0,-3 -3,-2.5 3,-1.5 0,-1 0,2.5 0,5"/>
<polyline points="0,-5 0,-3 -3,-2.5 3,-1.5 0,-1 0,2 -3,2.5 3,3.5 0,4 0,5"/>
</g>
<g id="nonlethalhand">
<line x1="-2" y1="-4.25" x2="2" y2="-4.25"/>
<line x1="0" y1="-4.25" x2="0" y2="5"/>
</g>
<g id="lethalhand" style="r: inherit;">
<line x1="0" y1="-5" x2="0" y2="5"/>
</g>
</defs>
@@ -145,28 +153,67 @@
<!--Hand-to-Hand Weapons-->
<g id="nonlethalhand" style="r: inherit;" class="weapon-symbol">
<g id="fist" style="r: inherit;">
<use style="r: inherit;" href="#counter-base"/>
</g>
<g id="blackjack" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<line x1="-2" y1="-4.25" x2="2" y2="-4.25"/>
<line x1="0" y1="-4.25" x2="0" y2="5"/>
<use style="r: inherit;" href="#nonlethalhand"/>
</g>
</g>
<g id="lethalhand" style="r: inherit;" class="weapon-symbol">
<g id="stunstick" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<line x1="0" y1="-5" x2="0" y2="5"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none; stroke-linejoin: bevel">
<use style="r: inherit;" href="#nonlethalhand"/>
<polyline points="-1.5,-2.5 1.5,-2.5 -1.5,0.5 1.5,0.5"/>
</g>
</g>
<g id="bayonetknife" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<use style="r: inherit;" href="#lethalhand"/>
</g>
</g>
<g id="club" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<use style="r: inherit;" href="#lethalhand"/>
</g>
</g>
<g id="neuralwhip" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<use style="r: inherit;" href="#lethalhand"/>
</g>
</g>
<g id="sword" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<use style="r: inherit;" href="#lethalhand"/>
</g>
</g>
<g id="vibroblade" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<use style="r: inherit;" href="#lethalhand"/>
</g>
</g>
<!--Area-Effect Weapons-->
<g id="srm" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<line x1="0" y1="-4.75" x2="0" y2="5"/>
<line x1="-2" y1="0.5" x2="2" y2="0.5"/>
<path d="M -2,4.75 V -2.5 C -2,-5.5 2,-5.5 2,-2.5 V 4.75"/>
</g>
</g>
@@ -230,7 +277,8 @@
<g id="satchelcharge" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<rect x="-1" y="-3.25" width="2" height="2" />
<line x1="-1" y1="-3.25" x2="1" y2="-1.25"/>
<line x1="1" y1="-3.25" x2="-1" y2="-1.25"/>
<line x1="0" y1="-5" x2="0" y2="5"/>
</g>
</g>
@@ -245,7 +293,7 @@
<g id="hflamer" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<line x1="-2" y1="1" x2="2" y2="1"/>
<use href="#auto" />
<path d="M -1,5 V -3.5 c 0,-1.5 2,-1.5 2,0"/>
</g>
</g>
@@ -253,7 +301,6 @@
<g id="inferno" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<line x1="-2" y1="0.5" x2="2" y2="0.5"/>
<path d="M -1,5 V -2.5 c 0,-1.5 2,-1.5 2,0"/>
<path d="M -2,4.75 V -2.5 C -2,-5.5 2,-5.5 2,-2.5 V 4.75"/>
</g>
@@ -295,9 +342,10 @@
<use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<line x1="-2" y1="4.5" x2="2" y2="4.5"/>
<line x1="-2" y1="1" x2="2" y2="1"/>
<polyline points="0,-5 0,-3 -3,-2.5 3,-1.5 0,-1 0,2.5 0,4.5"/>
<polyline points="0,-5 0,-3 -3,-2.5 3,-1.5 0,-1
0,2 -3,2.5 3,3.5 0,4 0,4.5"/>
<polyline points="-2,-3.5 0,-5 2,-3.5"/>
</g>
</g>
@@ -306,7 +354,8 @@
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<line x1="-2" y1="4.5" x2="2" y2="4.5"/>
<use href="#auto"/>
<polyline points="0,-5 0,-3 -3,-2.5 3,-1.5 0,-1 0,2.5 0,4.5"/>
<polyline points="0,-5 0,-3 -3,-2.5 3,-1.5 0,-1
0,2 -3,2.5 3,3.5 0,4 0,4.5"/>
<polyline points="-2,-3.5 0,-5 2,-3.5"/>
</g>
</g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 21 KiB

275
public/assets/images/map5.svg Normal file
View File

@@ -0,0 +1,275 @@
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 200 300">
<defs>
<g id="mapsheet" class="mapsheet"></g>
</defs>
<g class="gameboard">
<g class="grid">
<g class="mapsheets"></g>
</g>
<g style="display: unset;" class="start-locations" data-attacker-name="liao" data-defender-name="davion">
<g data-edge="north" data-y="1">
<g data-x="1">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#pistol"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="2">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#rifle"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="3">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#riflegl"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="4">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#laserpistol"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="5">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#laserrifle"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="6">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#gyrojetrifle"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
</g>
<g data-edge="north" data-y="2">
<g data-x="1">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#blazer"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="2">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#autopistol"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="3">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="4">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smggl"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
</g>
<g data-edge="north" data-y="3">
<g data-x="1">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#fist"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="2">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#blackjack"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="3">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#stunstick"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="4">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#club"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="5">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#neuralwhip"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="6">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#bayonetknife"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="7">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#sword"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="8">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#vibroblade"/>
<use class="troop-number" href="counters.svg#number-7"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
</g>
<g data-edge="north" data-y="4">
<g data-x="1">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#srm"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="2">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#hsrm"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="3">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#law"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="4">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#grenade"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="5">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#gl"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="6">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#autogl"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="7">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#lrrifle"/>
<use class="troop-number" href="counters.svg#number-7"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="8">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#satchelcharge"/>
<use class="troop-number" href="counters.svg#number-8"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="9">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#flamer"/>
<use class="troop-number" href="counters.svg#number-9"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="10">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#hflamer"/>
<use class="troop-number" href="counters.svg#number-10"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="11">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#inferno"/>
<use class="troop-number" href="counters.svg#number-11"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
</g>
<g data-edge="north" data-y="5">
<g data-x="1">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#lmg"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-5"/>
</g>
</g>
<g data-x="2">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#mmg"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-5"/>
</g>
</g>
<g data-x="3">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#hmg"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-5"/>
</g>
</g>
<g data-x="4">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#splaser"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-5"/>
</g>
</g>
<g data-x="5">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#hsplaser"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-5"/>
</g>
</g>
<g data-x="6">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#mpppc"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-5"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB