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

WIP: use scenario template to build scenarios client-side

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc
2025-06-16 22:41:31 -07:00
parent d4974c74de
commit dac61e6121
7 changed files with 300 additions and 2143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
public/assets/images/scenario-dragon_hunting.svg
View File

@@ -1,69 +1,12 @@
<?xml version="1.0" standalone="no"?>
<svg viewBox="-10 -10 200 300" xmlns="http://www.w3.org/2000/svg">
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/map.css" type="text/css" />
<style>
g[data-edge="north"] { --i: -2; }
g[data-edge="south"] { --i: 78; }
#background {
stroke: #304b75;
fill: #bacae3;
}
pattern use {
stroke: black;
stroke-width: 0.3px;
}
.cw-60-deg {
transform: rotate(60deg);
}
.ccw-60-deg {
transform: rotate(-60deg);
}
</style>
<defs>
<polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
<line id="ast-line" x1="-1.2" y1="0" x2="1.2" y2="0"/>
<pattern id="asterisk" viewBox="-8.66 -15 17.32 30" width="17.32" height="30" patternUnits="userSpaceOnUse">
<use y="-15" href="#ast-line"/>
<use y="-15" style="transform-origin: 0 -15px;" class="cw-60-deg" href="#ast-line"/>
<use y="-15" style="transform-origin: 0 -15px;" class="ccw-60-deg" href="#ast-line"/>
<use y="15" href="#ast-line"/>
<use y="15" style="transform-origin: 0 15px;" class="cw-60-deg" href="#ast-line"/>
<use y="15" style="transform-origin: 0 15px;" class="ccw-60-deg" href="#ast-line"/>
<use x="8.66" href="#ast-line"/>
<use x="8.66" style="transform-origin: 8.66px 0;" class="cw-60-deg" href="#ast-line"/>
<use x="8.66" style="transform-origin: 8.66px 0;" class="ccw-60-deg" href="#ast-line"/>
<use x="-8.66" href="#ast-line"/>
<use x="-8.66" style="transform-origin: -8.66px 0;" class="cw-60-deg" href="#ast-line"/>
<use x="-8.66" style="transform-origin: -8.66px 0;" class="ccw-60-deg" href="#ast-line"/>
</pattern>
<image id="counter-prone" href="counter_prone.jpg" width="10"/>
<image id="counter-grenade" href="counter_grenade.jpg" width="10"/>
</defs>
<rect id="background"/>
<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 200 300">
<g class="gameboard">
<use href="mapsheets.svg#map2"/>
<use href="mapsheets.svg#map1" style="transform: translate(0, 390.25px);"/>
<use href="mapsheets.svg#map3" style="transform: translate(0, 780.5px);"/>
<rect id="dots" fill="url(#asterisk)"/>
<g id="firing-arcs">
<g id="shapes"/>
<g id="lines"/>
</g>
<use class="mapsheet" href="mapsheets.svg#map2"/>
<use class="mapsheet" href="mapsheets.svg#map1" style="transform: translate(0, 390.25px);"/>
<use class="mapsheet" href="mapsheets.svg#map3" style="transform: translate(0, 780.5px);"/>
<g class="start-locations" data-attacker-name="liao" data-defender-name="davion">
<g data-edge="north">
<g data-edge="north" style="--i: -2">
<g data-x="13">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#blazer"/>
@@ -114,7 +57,7 @@
</g>
</g>
</g>
<g data-edge="south">
<g data-edge="south" style="--i: 78">
<g data-x="13">
<g class="counter" data-allegiance="defender" data-number="1">
<use class="primary-weapon" href="#blazer"/>
@@ -166,9 +109,7 @@
</g>
</g>
</g>
<g class="grid"/>
</g>
<script data-cols="33" data-rows="77" href="../../map.js"/>
<script data-cols="33" data-rows="77"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.0 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

71
public/assets/images/scenario-race_against_time.svg
View File

@@ -1,67 +1,10 @@
<?xml version="1.0" standalone="no"?>
<svg viewBox="-10 -10 200 300" xmlns="http://www.w3.org/2000/svg">
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/map.css" type="text/css" />
<style>
g[data-edge="north"] { --i: -2; }
g[data-edge="south"] { --i: 26; }
#background {
stroke: #304b75;
fill: #bacae3;
}
pattern use {
stroke: black;
stroke-width: 0.3px;
}
.cw-60-deg {
transform: rotate(60deg);
}
.ccw-60-deg {
transform: rotate(-60deg);
}
</style>
<defs>
<polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
<line id="ast-line" x1="-1.2" y1="0" x2="1.2" y2="0"/>
<pattern id="asterisk" viewBox="-8.66 -15 17.32 30" width="17.32" height="30" patternUnits="userSpaceOnUse">
<use y="-15" href="#ast-line"/>
<use y="-15" style="transform-origin: 0 -15px;" class="cw-60-deg" href="#ast-line"/>
<use y="-15" style="transform-origin: 0 -15px;" class="ccw-60-deg" href="#ast-line"/>
<use y="15" href="#ast-line"/>
<use y="15" style="transform-origin: 0 15px;" class="cw-60-deg" href="#ast-line"/>
<use y="15" style="transform-origin: 0 15px;" class="ccw-60-deg" href="#ast-line"/>
<use x="8.66" href="#ast-line"/>
<use x="8.66" style="transform-origin: 8.66px 0;" class="cw-60-deg" href="#ast-line"/>
<use x="8.66" style="transform-origin: 8.66px 0;" class="ccw-60-deg" href="#ast-line"/>
<use x="-8.66" href="#ast-line"/>
<use x="-8.66" style="transform-origin: -8.66px 0;" class="cw-60-deg" href="#ast-line"/>
<use x="-8.66" style="transform-origin: -8.66px 0;" class="ccw-60-deg" href="#ast-line"/>
</pattern>
<image id="counter-prone" href="counter_prone.jpg" width="10"/>
<image id="counter-grenade" href="counter_grenade.jpg" width="10"/>
</defs>
<rect id="background"/>
<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 200 300">
<g class="gameboard">
<use href="mapsheets.svg#map4"/>
<rect id="dots" fill="url(#asterisk)"/>
<g id="firing-arcs">
<g id="shapes"/>
<g id="lines"/>
</g>
<use class="mapsheet" href="mapsheets.svg#map4"/>
<g class="start-locations" data-attacker-name="liao" data-defender-name="davion">
<g data-edge="north">
<g data-edge="north" style="--i: -2">
<g data-x="13">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#blazer"/>
@@ -112,7 +55,7 @@
</g>
</g>
</g>
<g data-edge="south">
<g data-edge="south" style="--i: 26">
<g data-x="13">
<g class="counter" data-allegiance="defender" data-number="1">
<use class="primary-weapon" href="#blazer"/>
@@ -164,9 +107,7 @@
</g>
</g>
</g>
<g class="grid"/>
</g>
<script data-cols="33" data-rows="25" href="../../map.js"/>
<script data-cols="33" data-rows="25"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.8 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

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

File diff suppressed because it is too large Load Diff
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 84 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB

60
public/assets/images/scenario_template.svg Normal file
View File

@@ -0,0 +1,60 @@
<?xml version="1.0" standalone="no"?>
<svg viewBox="-10 -10 200 300" xmlns="http://www.w3.org/2000/svg">
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/map.css" type="text/css" />
<style>
#background {
stroke: #304b75;
fill: #bacae3;
}
pattern use {
stroke: black;
stroke-width: 0.3px;
}
.cw-60-deg {
transform: rotate(60deg);
}
.ccw-60-deg {
transform: rotate(-60deg);
}
</style>
<defs>
<polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
<line id="ast-line" x1="-1.2" y1="0" x2="1.2" y2="0"/>
<pattern id="asterisk" viewBox="-8.66 -15 17.32 30" width="17.32" height="30" patternUnits="userSpaceOnUse">
<use y="-15" href="#ast-line"/>
<use y="-15" style="transform-origin: 0 -15px;" class="cw-60-deg" href="#ast-line"/>
<use y="-15" style="transform-origin: 0 -15px;" class="ccw-60-deg" href="#ast-line"/>
<use y="15" href="#ast-line"/>
<use y="15" style="transform-origin: 0 15px;" class="cw-60-deg" href="#ast-line"/>
<use y="15" style="transform-origin: 0 15px;" class="ccw-60-deg" href="#ast-line"/>
<use x="8.66" href="#ast-line"/>
<use x="8.66" style="transform-origin: 8.66px 0;" class="cw-60-deg" href="#ast-line"/>
<use x="8.66" style="transform-origin: 8.66px 0;" class="ccw-60-deg" href="#ast-line"/>
<use x="-8.66" href="#ast-line"/>
<use x="-8.66" style="transform-origin: -8.66px 0;" class="cw-60-deg" href="#ast-line"/>
<use x="-8.66" style="transform-origin: -8.66px 0;" class="ccw-60-deg" href="#ast-line"/>
</pattern>
<image id="counter-prone" href="counter_prone.jpg" width="10"/>
<image id="counter-grenade" href="counter_grenade.jpg" width="10"/>
</defs>
<rect id="background"/>
<g class="gameboard">
<rect id="dots" fill="url(#asterisk)"/>
<g id="firing-arcs">
<g id="shapes"/>
<g id="lines"/>
</g>
<g class="grid"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB