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

48
src/modules/record_sheet.js
View File

@@ -164,6 +164,54 @@ const weapons = {
shortRange: 'Special',
longRange: 'Special'
},
fist: {
name: 'Fist',
damage: '(curr. MP/2)B',
shortRange: 'Adj.',
longRange: '-'
},
blackjack: {
name: 'Blackjack',
damage: '5B',
shortRange: 'Adjacent',
longRange: '-'
},
stunstick: {
name: 'Stun Stick',
damage: '8B',
shortRange: 'Adjacent',
longRange: '-'
},
neuralwhip: {
name: 'Neural Whip',
damage: '8B, 3L',
shortRange: 'Adjacent',
longRange: '-'
},
sword: {
name: 'Sword',
damage: '4L',
shortRange: 'Adjacent',
longRange: '-'
},
vibroblade: {
name: 'Vibro-Blade',
damage: '5L',
shortRange: 'Adjacent',
longRange: '-'
},
bayonetknife: {
name: 'Bayonet/Knife',
damage: '3L',
shortRange: 'Adjacent',
longRange: '-'
},
club: {
name: 'Club',
damage: '4B, 1L',
shortRange: 'Adjacent',
longRange: '-'
},
}
function createIcon(number) {

3
src/modules/scenario.js
View File

@@ -102,6 +102,9 @@ export async function build(svg, request) {
if (scenarioBuildings)
svg.querySelector('.gameboard .buildings').replaceWith(svg.ownerDocument.importNode(scenarioBuildings, true));
if (startLocs)
grid.after(svg.ownerDocument.importNode(startLocs, true));
await loadScript(scenario, svg, 'radial')
return loadScript(scenario, svg, 'map');
}

5
src/modules/scenarios.js
View File

@@ -2,6 +2,7 @@ import sideShow from './assets/images/scenario-side_show.svg';
import dragonHunting from './assets/images/scenario-dragon_hunting.svg';
import raceAgainstTime from './assets/images/scenario-race_against_time.svg';
import map4 from './assets/images/map4.svg';
import map5 from './assets/images/map5.svg';
import blankMap from './assets/images/blank-map.svg';
export const scenarios = {
@@ -21,6 +22,10 @@ export const scenarios = {
hashed: map4,
title: 'Test map'
},
'map5': {
hashed: map5,
title: 'Weapon symbols'
},
'blank-map': {
hashed: blankMap,
title: 'Blank map'