Compare commits

..

10 Commits

33 changed files with 445 additions and 19266 deletions

View File

@ -19,13 +19,13 @@ RUN apt-get update -qq -y && \
mv chromedriver /usr/local/bin/
WORKDIR /usr/src/app
COPY package*.json .
COPY package*.json ./
ENV CHROMEDRIVER_SKIP_DOWNLOAD=true
RUN npm install --omit=dev
RUN npm install chromedriver
COPY . .
COPY ./* ./
CMD [ "npm", "start" ]

View File

@ -1,22 +1,30 @@
## Build the Docker image
## Live
<a href="http://apps.webdevcat.me/btroops/" target="_blank">Demo</a>
## Run
1. Build the Docker image
docker build -t btroops .
## Install packages
2. Install `node` packages
./npm install
## Start the dev server
3. Start development server
./npm run start
Visit `localhost:8080` to view.
4. Visit `localhost:8080` with browser to view app.
## Run integration tests
## Integration tests
### Run
./npm run test:integ
### Debugging an integration test
### Debug
1. Put `debugger` in whatever test you want to debug.
@ -94,6 +102,5 @@ debug>
### References
https://nodejs.org/en/learn/getting-started/debugging
https://nodejs.org/api/debugger.html
- [https://nodejs.org/en/learn/getting-started/debugging](https://nodejs.org/en/learn/getting-started/debugging)
- [https://nodejs.org/api/debugger.html](https://nodejs.org/api/debugger.html)

13
package-lock.json generated
View File

@ -5,7 +5,7 @@
"packages": {
"": {
"dependencies": {
"pan-zoom": "file:../pan-zoom"
"pan-zoom": "git://git.webdevcat.me/pan-zoom.git#v0.3.0"
},
"devDependencies": {
"esbuild": "^0.20.2",
@ -16,13 +16,6 @@
"selenium-webdriver": "^4.19.0"
}
},
"../pan-zoom": {
"version": "0.2.0",
"devDependencies": {
"esbuild": "^0.20.2",
"esbuild-server": "^0.3.0"
}
},
"node_modules/@ampproject/remapping": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
@ -3826,8 +3819,8 @@
"dev": true
},
"node_modules/pan-zoom": {
"resolved": "../pan-zoom",
"link": true
"version": "0.3.0",
"resolved": "git://git.webdevcat.me/pan-zoom.git#79964ead9181d69c5463777fcd2b227a14d30d32"
},
"node_modules/parent-module": {
"version": "1.0.1",

View File

@ -1,8 +1,5 @@
{
"type": "module",
"dependencies": {
"pan-zoom": "file:../pan-zoom"
},
"devDependencies": {
"esbuild": "^0.20.2",
"esbuild-server": "^0.3.0",
@ -17,5 +14,8 @@
"test:integ": "node ./node_modules/.bin/jest --detectOpenHandles --config jest.config.integ.cjs",
"test:integ:debug": "NODE_INSPECT_RESUME_ON_START=1 node inspect ./node_modules/jest/bin/jest.js --config jest.config.integ.cjs --runInBand",
"test": "jest"
},
"dependencies": {
"pan-zoom": "git://git.webdevcat.me/pan-zoom.git#v0.3.0"
}
}

File diff suppressed because it is too large Load Diff

Before

Width:  |  Height:  |  Size: 1.0 MiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 1.9 MiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 1.6 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 274 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 504 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 376 KiB

View File

@ -49,6 +49,16 @@
</g>
</defs>
<!--Semi-Automatic Firearms-->
<g id="pistol" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<use href="#semi-auto" />
<line x1="0" y1="-5" x2="0" y2="5"/>
</g>
</g>
<g id="rifle" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
@ -58,15 +68,45 @@
</g>
</g>
<g id="smg" style="r: inherit;" class="weapon-symbol">
<g id="riflegl" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<use href="#auto"/>
<line x1="0" y1="-5" x2="0" y2="4.5"/>
<line x1="-2" y1="4.5" x2="2" y2="4.5"/>
<use href="#semi-auto" />
<circle cy="-2.25" r="1"/>
<line x1="0" y1="-5" x2="0" y2="5"/>
<polyline points="-2,-3.5 0,-5 2,-3.5"/>
</g>
</g>
<g id="laserpistol" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<use href="#semi-auto"/>
<use href="#laser"/>
</g>
</g>
<g id="laserrifle" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<use href="#semi-auto"/>
<use href="#laser"/>
<polyline points="-2,-3.5 0,-5 2,-3.5"/>
</g>
</g>
<g id="gyrojetrifle" 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="3"/>
<line x1="2" y1="-1" x2="2" y2="3"/>
<line x1="0" y1="-5" x2="0" y2="5"/>
<polyline points="-2,-3.5 0,-5 2,-3.5"/>
</g>
</g>
<!--Automatic Firearms-->
<g id="blazer" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
@ -76,32 +116,20 @@
</g>
</g>
<g id="lmg" style="r: inherit;" class="weapon-symbol">
<g id="autopistol" 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.5" x2="2" y2="4.5"/>
<line x1="0" y1="-4.5" x2="0" y2="4.5"/>
<line x1="-2" y1="0.5" x2="2" y2="0.5"/>
<polyline points="-2,-3.25 0,-4.75 2,-3.25"/>
<use href="#auto" />
<line x1="0" y1="-5" x2="0" y2="5"/>
</g>
</g>
<g id="srm" style="r: inherit;" class="weapon-symbol">
<g id="smg" 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>
<g id="hsplaser" 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.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="-2,-3.5 0,-5 2,-3.5"/>
<line x1="0" y1="-5" x2="0" y2="4.5"/>
<line x1="-2" y1="4.5" x2="2" y2="4.5"/>
</g>
</g>
@ -115,16 +143,185 @@
</g>
</g>
<g id="riflegl" style="r: inherit;" class="weapon-symbol">
<!--Hand-to-Hand Weapons-->
<g id="nonlethalhand" 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"/>
</g>
</g>
<g id="lethalhand" 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>
</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>
<g id="hsrm" 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"/>
<use href="#auto" />
<path d="M -2,4.75 V -2.5 C -2,-5.5 2,-5.5 2,-2.5 V 4.75"/>
</g>
</g>
<g id="law" 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="3"/>
<polyline points="-2,-3.5 0,-5 2,-3.5"/>
<polyline points="-2,-2.5 0,-4 2,-2.5"/>
<polyline points="-2,4.5 0,3 2,4.5"/>
</g>
</g>
<g id="grenade" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<circle cy="-2.25" r="1"/>
<line x1="0" y1="-5" x2="0" y2="5"/>
</g>
</g>
<g id="gl" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<use href="#semi-auto" />
<circle cy="-2.25" r="1"/>
<line x1="0" y1="-5" x2="0" y2="5"/>
</g>
</g>
<g id="autogl" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<use href="#auto" />
<circle cy="-2.25" r="1"/>
<line x1="0" y1="-5" x2="0" y2="5"/>
</g>
</g>
<g id="lrrifle" 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"/>
<line x1="-2" y1="-1" x2="-2" y2="3"/>
<line x1="2" y1="-1" x2="2" y2="3"/>
<line x1="0" y1="-5" x2="0" y2="5"/>
<polyline points="-2,-3.5 0,-5 2,-3.5"/>
</g>
</g>
<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="0" y1="-5" x2="0" y2="5"/>
</g>
</g>
<g id="flamer" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<path d="M -1,5 V -3.5 c 0,-1.5 2,-1.5 2,0"/>
</g>
</g>
<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"/>
<path d="M -1,5 V -3.5 c 0,-1.5 2,-1.5 2,0"/>
</g>
</g>
<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>
</g>
<!--Support Weapons-->
<g id="lmg" 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.5" x2="2" y2="4.5"/>
<line x1="0" y1="-4.5" x2="0" y2="4.5"/>
<line x1="-2" y1="0.5" x2="2" y2="0.5"/>
<polyline points="-2,-3.25 0,-4.75 2,-3.25"/>
</g>
</g>
<g id="mmg" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<use href="#semi-auto" />
<line x1="-2" y1="4.5" x2="2" y2="4.5"/>
<line x1="0" y1="-4.5" x2="0" y2="4.5"/>
<polyline points="-2,-3.25 0,-4.75 2,-3.25"/>
</g>
</g>
<g id="hmg" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<use href="#auto" />
<line x1="-2" y1="4.5" x2="2" y2="4.5"/>
<line x1="0" y1="-4.5" x2="0" y2="4.5"/>
<polyline points="-2,-3.25 0,-4.75 2,-3.25"/>
</g>
</g>
<g id="splaser" 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.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="-2,-3.5 0,-5 2,-3.5"/>
</g>
</g>
<g id="hsplaser" 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.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="-2,-3.5 0,-5 2,-3.5"/>
</g>
</g>
<g id="mpppc" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<polyline points="-2,-3.5 0,-5 2,-3.5"/>
<circle cx="-1.5" cy="-2" style="fill: white;" r="0.25" />
<circle cx="1.5" cy="-2" style="fill: white;" r="0.25" />
<line x1="-2" y1="4.5" x2="2" y2="4.5"/>
<line x1="0" y1="-5" x2="0" y2="4.5"/>
</g>
</g>
<g id="mech-template" style="pointer-events: none;">
<clipPath id="mech-template-clip-path" r="36.5">
<use href="#dead-zone"/>

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

View File

@ -1,301 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-60.619998931884766 -115 147.22000122070312 245">
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/radial.css" type="text/css" />
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/map.css" type="text/css" />
<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 href="#ast-line"/>
<use href="#ast-line" transform="rotate(60)"/>
<use href="#ast-line" transform="rotate(-60)"/>
<use x="-8.66" y="-15" href="#ast-line"/>
<use x="-8.66" y="-15" transform="rotate(60 -8.66 -15)" href="#ast-line"/>
<use x="8.66" y="-15" href="#ast-line"/>
<use x="8.66" y="-15" transform="rotate(-60 8.66 -15)" href="#ast-line"/>
<use x="-8.66" y="15" href="#ast-line"/>
<use x="-8.66" y="15" transform="rotate(-60 -8.66 15)" href="#ast-line"/>
<use x="8.66" y="15" href="#ast-line"/>
<use x="8.66" y="15" transform="rotate(60 8.66 15)" href="#ast-line"/>
</pattern>
<image id="counter-prone" href="counter_prone.jpg" width="10"/>
<image id="counter-grenade" href="counter_grenade.jpg" width="10"/>
<g id="building1" class="building">
<g class="footprint">
<g data-q="0" data-r="0" data-s="0" data-left="1" data-top="3" data-right="2" data-bottom="4" data-offset="left"/>
<g data-q="0" data-r="0" data-s="0" data-left="1" data-top="3" data-right="4" data-bottom="4" data-offset="left"/>
</g>
<g class="structure">
<path id="building1-floor" class="floor" d="M -30.309999,-52.5 H 38.97 l 0,119.999999 H -30.31 Z"/>
<path id="building1-outer-wall" class="outer-wall" d="M 38.969998,-7.500001 21.65,-7.5 V 7.4999997 L 12.989997,7.5 m 0,30 25.980001,0 M 12.989997,67.5 v -60 l -17.319997,0 0,-30.0000007 M -4.330003,67.5 v -45 H -30.31 m 0,-74.999999 L 38.97,-52.5 38.969999,67.499999 -30.31,67.5 Z"/>
<path id="building1-inner-wall" class="inner-wall" d="M 38.969998,-7.500001 21.65,-7.5 V 7.4999997 L 12.989997,7.5 m 0,30 25.980001,0 M 12.989997,67.5 v -60 l -17.319997,0 0,-30.0000007 M -4.330003,67.5 v -45 H -30.31 m 0,-74.999999 L 38.97,-52.5 38.969999,67.499999 -30.31,67.5 Z"/>
<path id="building1-door-edges" class="door-edges" d="m 12.99,52.5 0,-15 M -4.33,45.000003 v -15 M 12.990002,30 l 0,-15"/>
<path id="building1-doors" class="doors" d="m 12.99,48.169997 0,-6.34 M -4.33,40.67 v -6.34 m 17.320002,-8.66 0,-6.34"/>
<path id="building1-exit-edges" class="exits door-edges" d="M 0,-52.5 H 17.32 M -30.31,8.66 V -8.66"/>
<path id="building1-exits" class="doors exits" d="M 4.3300002,-52.5 H 12.99 m -43.3,56.8300023 v -8.660003"/>
<path id="building1-windows" class="windows" d="m 32.501739,67.499994 -13.043478,0 m -49.768256,-8.478265 0,-13.043478 m 0,-69.456522 0,-13.043479"/>
</g>
</g>
<polygon id="desk" points="-1.5,-7 4.5,-7 4.5,7 -1.5,7 -2.5,6 -2.5,3 -4.5,3 -4.5,-3 -2.5,-3 -2.5,-6"/>
<rect id="couch" x="-4.25" y="-8" width="8.5" height="16"/>
<rect id="bed" x="-5" y="-9" width="10" height="18"/>
<rect id="cabinet" x="-2.5" y="-4.75" width="5" height="9.5"/>
<g id="mapsheet" class="mapsheet">
<g class="building1" data-q="1" data-r="-2" data-s="1">
</g>
</g>
<circle id="counter-base" style="r: inherit;" cx="0" cy="0"/>
<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="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="blazer" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<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"/>
</g>
</g>
</defs>
<g class="gameboard" data-view-elevation="0" style="transform: matrix(0.703125, 0, 0, 0.703125, 1.70767, 5.86088);">
<rect id="background" style="transform: matrix(1, 0, 0, 1, 0, 0);" x="-60.619998931884766" y="-115" width="147.22000122070312" height="245"/>
<g class="buildings">
<g class="mapsheet">
<g class="building building1" transform="translate(0, -30)">
<use href="#building1-floor" class="floor elevation-0 elevation-1"/>
<use href="#building1-outer-wall" class="outer-wall elevation-0"/>
<use href="#building1-inner-wall" class="inner-wall elevation-0"/>
<use href="#building1-door-edges" class="door-edges elevation-0"/>
<use href="#building1-doors" class="doors elevation-0"/>
<use href="#building1-exit-edges" class="exits door-edges elevation-0"/>
<use href="#building1-exits" class="doors exits elevation-0"/>
<use href="#building1-windows" class="windows elevation-0"/>
<g class="furniture elevation-0">
<use href="#couch" transform="rotate(90,10.34,-27.66)"/>
<use href="#bed" transform="translate(-17.32,45)"/>
<use href="#bed" transform="translate(25.98,56)"/>
<use href="#cabinet" transform="rotate(90,29.575,-7.925)"/>
<use href="#cabinet" transform="rotate(90,24.24,1.74)"/>
<use href="#cabinet" transform="translate(10.98,-5.25)"/>
<use href="#cabinet" transform="rotate(90,-8.245,-2.7450001)"/>
<use href="#cabinet" transform="rotate(90,11.865878,19.740878)"/>
<use href="#cabinet" transform="translate(32.81,22.5)"/>
<use href="#cabinet" transform="rotate(90,-43.385,20.115)"/>
</g>
<text class="elevation" x="34" y="56">1</text>
</g>
</g>
</g>
<rect id="dots" fill="url(#asterisk)" x="-60.619998931884766" y="-115" width="147.22000122070312" height="245"/>
<g id="firing-arcs">
<g id="shapes"/>
<g id="lines"/>
</g>
<g class="grid">
<g class="mapsheets" data-width="8" data-height="8">
<g>
<use class="mapsheet" href="#mapsheet"/>
</g>
</g>
<g class="mapsheet">
<g class="building building1">
<g class="elevation-0">
<g data-q="1" data-r="-2" data-s="1" data-t="0" transform="translate(0, -30)"><use href="#hex"/></g>
<g data-q="2" data-r="-2" data-s="0" data-t="0" transform="translate(-17.32, -30)"><use href="#hex"/></g>
<g data-q="0" data-r="-2" data-s="2" data-t="0" transform="translate(17.32, -30)"><use href="#hex"/></g>
<g data-q="2" data-r="-3" data-s="1" data-t="0" transform="translate(-8.66, -45)"><use href="#hex"/></g>
<g data-q="0" data-r="-1" data-s="1" data-t="0" transform="translate(8.66, -15)"><use href="#hex"/></g>
<g data-q="1" data-r="-1" data-s="0" data-t="0" transform="translate(-8.66, -15)"><use href="#hex"/></g>
<g data-q="1" data-r="-3" data-s="2" data-t="0" transform="translate(8.66, -45)"><use href="#hex"/></g>
<g data-q="3" data-r="-3" data-s="0" data-t="0" transform="translate(-25.98, -45)"><use href="#hex"/></g>
<g data-q="2" data-r="-1" data-s="-1" data-t="0" transform="translate(-25.98, -15)"><use href="#hex"/></g>
<g data-q="-1" data-r="-2" data-s="3" data-t="0" transform="translate(34.64, -30)"><use href="#hex"/></g>
<g data-q="-1" data-r="-1" data-s="2" data-t="0" transform="translate(25.98, -15)"><use href="#hex"/></g>
<g data-q="0" data-r="-3" data-s="3" data-t="0" transform="translate(25.98, -45)"><use href="#hex"/></g>
<g data-q="3" data-r="-4" data-s="1" data-t="0" transform="translate(-17.32, -60)"><use href="#hex"/></g>
<g data-q="2" data-r="-4" data-s="2" data-t="0" transform="translate(0, -60)"><use href="#hex"/></g>
<g data-q="-1" data-r="0" data-s="1" data-t="0" transform="translate(17.32, 0)"><use href="#hex"/></g>
<g data-q="0" data-r="0" data-s="0" data-t="0" transform="translate(0, 0)"><use href="#hex"/></g>
<g data-q="1" data-r="0" data-s="-1" data-t="0" transform="translate(-17.32, 0)"><use href="#hex"/></g>
<g data-q="1" data-r="-4" data-s="3" data-t="0" transform="translate(17.32, -60)"><use href="#hex"/></g>
<g data-q="-2" data-r="0" data-s="2" data-t="0" transform="translate(34.64, 0)"><use href="#hex"/></g>
<g data-q="0" data-r="-4" data-s="4" data-t="0" transform="translate(34.64, -60)"><use href="#hex"/></g>
<g data-q="4" data-r="-5" data-s="1" data-t="0" transform="translate(-25.98, -75)"><use href="#hex"/></g>
<g data-q="3" data-r="-5" data-s="2" data-t="0" transform="translate(-8.66, -75)"><use href="#hex"/></g>
<g data-q="2" data-r="-5" data-s="3" data-t="0" transform="translate(8.66, -75)"><use href="#hex"/></g>
<g data-q="-2" data-r="1" data-s="1" data-t="0" transform="translate(25.98, 15)"><use href="#hex"/></g>
<g data-q="-1" data-r="1" data-s="0" data-t="0" transform="translate(8.66, 15)"><use href="#hex"/></g>
<g data-q="0" data-r="1" data-s="-1" data-t="0" transform="translate(-8.66, 15)"><use href="#hex"/></g>
<g data-q="1" data-r="1" data-s="-2" data-t="0" transform="translate(-25.98, 15)"><use href="#hex"/></g>
<g data-q="1" data-r="-5" data-s="4" data-t="0" transform="translate(25.98, -75)"><use href="#hex"/></g>
<g data-q="-3" data-r="2" data-s="1" data-t="0" transform="translate(34.64, 30)"><use href="#hex"/></g>
<g data-q="-2" data-r="2" data-s="0" data-t="0" transform="translate(17.32, 30)"><use href="#hex"/></g>
<g data-q="-1" data-r="2" data-s="-1" data-t="0" transform="translate(0, 30)"><use href="#hex"/></g>
<g data-q="0" data-r="2" data-s="-2" data-t="0" transform="translate(-17.32, 30)"><use href="#hex"/></g>
</g>
<g class="elevation-1">
<g data-q="1" data-r="-2" data-s="1" data-t="1" transform="translate(0, -30)"><use href="#hex"/></g>
<g data-q="2" data-r="-2" data-s="0" data-t="1" transform="translate(-17.32, -30)"><use href="#hex"/></g>
<g data-q="0" data-r="-2" data-s="2" data-t="1" transform="translate(17.32, -30)"><use href="#hex"/></g>
<g data-q="2" data-r="-3" data-s="1" data-t="1" transform="translate(-8.66, -45)"><use href="#hex"/></g>
<g data-q="0" data-r="-1" data-s="1" data-t="1" transform="translate(8.66, -15)"><use href="#hex"/></g>
<g data-q="1" data-r="-1" data-s="0" data-t="1" transform="translate(-8.66, -15)"><use href="#hex"/></g>
<g data-q="1" data-r="-3" data-s="2" data-t="1" transform="translate(8.66, -45)"><use href="#hex"/></g>
<g data-q="3" data-r="-3" data-s="0" data-t="1" transform="translate(-25.98, -45)"><use href="#hex"/></g>
<g data-q="2" data-r="-1" data-s="-1" data-t="1" transform="translate(-25.98, -15)"><use href="#hex"/></g>
<g data-q="-1" data-r="-2" data-s="3" data-t="1" transform="translate(34.64, -30)"><use href="#hex"/></g>
<g data-q="-1" data-r="-1" data-s="2" data-t="1" transform="translate(25.98, -15)"><use href="#hex"/></g>
<g data-q="0" data-r="-3" data-s="3" data-t="1" transform="translate(25.98, -45)"><use href="#hex"/></g>
<g data-q="3" data-r="-4" data-s="1" data-t="1" transform="translate(-17.32, -60)"><use href="#hex"/></g>
<g data-q="2" data-r="-4" data-s="2" data-t="1" transform="translate(0, -60)"><use href="#hex"/></g>
<g data-q="-1" data-r="0" data-s="1" data-t="1" transform="translate(17.32, 0)"><use href="#hex"/></g>
<g data-q="0" data-r="0" data-s="0" data-t="1" transform="translate(0, 0)"><use href="#hex"/></g>
<g data-q="1" data-r="0" data-s="-1" data-t="1" transform="translate(-17.32, 0)"><use href="#hex"/></g>
<g data-q="1" data-r="-4" data-s="3" data-t="1" transform="translate(17.32, -60)"><use href="#hex"/></g>
<g data-q="-2" data-r="0" data-s="2" data-t="1" transform="translate(34.64, 0)"><use href="#hex"/></g>
<g data-q="0" data-r="-4" data-s="4" data-t="1" transform="translate(34.64, -60)"><use href="#hex"/></g>
<g data-q="4" data-r="-5" data-s="1" data-t="1" transform="translate(-25.98, -75)"><use href="#hex"/></g>
<g data-q="3" data-r="-5" data-s="2" data-t="1" transform="translate(-8.66, -75)"><use href="#hex"/></g>
<g data-q="2" data-r="-5" data-s="3" data-t="1" transform="translate(8.66, -75)"><use href="#hex"/></g>
<g data-q="-2" data-r="1" data-s="1" data-t="1" transform="translate(25.98, 15)"><use href="#hex"/></g>
<g data-q="-1" data-r="1" data-s="0" data-t="1" transform="translate(8.66, 15)"><use href="#hex"/></g>
<g data-q="0" data-r="1" data-s="-1" data-t="1" transform="translate(-8.66, 15)"><use href="#hex"/></g>
<g data-q="1" data-r="1" data-s="-2" data-t="1" transform="translate(-25.98, 15)"><use href="#hex"/></g>
<g data-q="1" data-r="-5" data-s="4" data-t="1" transform="translate(25.98, -75)"><use href="#hex"/></g>
<g data-q="-3" data-r="2" data-s="1" data-t="1" transform="translate(34.64, 30)"><use href="#hex"/></g>
<g data-q="-2" data-r="2" data-s="0" data-t="1" transform="translate(17.32, 30)"><use href="#hex"/></g>
<g data-q="-1" data-r="2" data-s="-1" data-t="1" transform="translate(0, 30)"><use href="#hex"/></g>
<g data-q="0" data-r="2" data-s="-2" data-t="1" transform="translate(-17.32, 30)"><use href="#hex"/></g>
</g>
</g>
<g class="elevation-0">
<g data-q="2" data-r="0" data-s="-2" data-t="0" transform="translate(-34.64, 0)"><use href="#hex"/></g>
<g data-q="3" data-r="0" data-s="-3" data-t="0" transform="translate(-51.96, 0)"><use href="#hex"/></g>
<g data-q="3" data-r="-1" data-s="-2" data-t="0" transform="translate(-43.3, -15)"><use href="#hex"/></g>
<g data-q="2" data-r="1" data-s="-3" data-t="0" transform="translate(-43.3, 15)"><use href="#hex"/></g>
<g data-q="3" data-r="-2" data-s="-1" data-t="0" transform="translate(-34.64, -30)"><use href="#hex"/></g>
<g data-q="1" data-r="2" data-s="-3" data-t="0" transform="translate(-34.64, 30)"><use href="#hex"/></g>
<g data-q="-3" data-r="0" data-s="3" data-t="0" transform="translate(51.96, 0)"><use href="#hex"/></g>
<g data-q="-3" data-r="1" data-s="2" data-t="0" transform="translate(43.3, 15)"><use href="#hex"/></g>
<g data-q="-2" data-r="-1" data-s="3" data-t="0" transform="translate(43.3, -15)"><use href="#hex"/></g>
<g data-q="-3" data-r="3" data-s="0" data-t="0" transform="translate(25.98, 45)"><use href="#hex"/></g>
<g data-q="-2" data-r="3" data-s="-1" data-t="0" transform="translate(8.66, 45)"><use href="#hex"/></g>
<g data-q="-1" data-r="3" data-s="-2" data-t="0" transform="translate(-8.66, 45)"><use href="#hex"/></g>
<g data-q="0" data-r="3" data-s="-3" data-t="0" transform="translate(-25.98, 45)"><use href="#hex"/></g>
<g data-q="4" data-r="-2" data-s="-2" data-t="0" transform="translate(-51.96, -30)"><use href="#hex"/></g>
<g data-q="2" data-r="2" data-s="-4" data-t="0" transform="translate(-51.96, 30)"><use href="#hex"/></g>
<g data-q="4" data-r="-3" data-s="-1" data-t="0" transform="translate(-43.3, -45)"><use href="#hex"/></g>
<g data-q="1" data-r="3" data-s="-4" data-t="0" transform="translate(-43.3, 45)"><use href="#hex"/></g>
<g data-q="-4" data-r="0" data-s="4" data-t="0" transform="translate(69.28, 0)"><use href="#hex"/></g>
<g data-q="-4" data-r="1" data-s="3" data-t="0" transform="translate(60.620000000000005, 15)"><use href="#hex"/></g>
<g data-q="-3" data-r="-1" data-s="4" data-t="0" transform="translate(60.620000000000005, -15)"><use href="#hex"/></g>
<g data-q="-4" data-r="2" data-s="2" data-t="0" transform="translate(51.96, 30)"><use href="#hex"/></g>
<g data-q="-2" data-r="-2" data-s="4" data-t="0" transform="translate(51.96, -30)"><use href="#hex"/></g>
<g data-q="-4" data-r="3" data-s="1" data-t="0" transform="translate(43.3, 45)"><use href="#hex"/></g>
<g data-q="-1" data-r="-3" data-s="4" data-t="0" transform="translate(43.3, -45)"><use href="#hex"/></g>
<g data-q="4" data-r="-4" data-s="0" data-t="0" transform="translate(-34.64, -60)"><use href="#hex"/></g>
<g data-q="-4" data-r="4" data-s="0" data-t="0" transform="translate(34.64, 60)"><use href="#hex"/></g>
<g data-q="-3" data-r="4" data-s="-1" data-t="0" transform="translate(17.32, 60)"><use href="#hex"/></g>
<g data-q="-2" data-r="4" data-s="-2" data-t="0" transform="translate(0, 60)"><use href="#hex"/></g>
<g data-q="-1" data-r="4" data-s="-3" data-t="0" transform="translate(-17.32, 60)"><use href="#hex"/></g>
<g data-q="0" data-r="4" data-s="-4" data-t="0" transform="translate(-34.64, 60)"><use href="#hex"/></g>
<g data-q="5" data-r="-4" data-s="-1" data-t="0" transform="translate(-51.96, -60)"><use href="#hex"/></g>
<g data-q="1" data-r="4" data-s="-5" data-t="0" transform="translate(-51.96, 60)"><use href="#hex"/></g>
<g data-q="-5" data-r="1" data-s="4" data-t="0" transform="translate(77.94, 15)"><use href="#hex"/></g>
<g data-q="-4" data-r="-1" data-s="5" data-t="0" transform="translate(77.94, -15)"><use href="#hex"/></g>
<g data-q="-5" data-r="2" data-s="3" data-t="0" transform="translate(69.28, 30)"><use href="#hex"/></g>
<g data-q="-3" data-r="-2" data-s="5" data-t="0" transform="translate(69.28, -30)"><use href="#hex"/></g>
<g data-q="-5" data-r="3" data-s="2" data-t="0" transform="translate(60.620000000000005, 45)"><use href="#hex"/></g>
<g data-q="-2" data-r="-3" data-s="5" data-t="0" transform="translate(60.620000000000005, -45)"><use href="#hex"/></g>
<g data-q="-5" data-r="4" data-s="1" data-t="0" transform="translate(51.96, 60)"><use href="#hex"/></g>
<g data-q="-1" data-r="-4" data-s="5" data-t="0" transform="translate(51.96, -60)"><use href="#hex"/></g>
<g data-q="5" data-r="-5" data-s="0" data-t="0" transform="translate(-43.3, -75)"><use href="#hex"/></g>
<g data-q="-5" data-r="5" data-s="0" data-t="0" transform="translate(43.3, 75)"><use href="#hex"/></g>
<g data-q="-4" data-r="5" data-s="-1" data-t="0" transform="translate(25.98, 75)"><use href="#hex"/></g>
<g data-q="-3" data-r="5" data-s="-2" data-t="0" transform="translate(8.66, 75)"><use href="#hex"/></g>
<g data-q="-2" data-r="5" data-s="-3" data-t="0" transform="translate(-8.66, 75)"><use href="#hex"/></g>
<g data-q="-1" data-r="5" data-s="-4" data-t="0" transform="translate(-25.98, 75)"><use href="#hex"/></g>
<g data-q="0" data-r="5" data-s="-5" data-t="0" transform="translate(-43.3, 75)"><use href="#hex"/></g>
<g data-q="0" data-r="-5" data-s="5" data-t="0" transform="translate(43.3, -75)"><use href="#hex"/></g>
<g data-q="-6" data-r="3" data-s="3" data-t="0" transform="translate(77.94, 45)"><use href="#hex"/></g>
<g data-q="-3" data-r="-3" data-s="6" data-t="0" transform="translate(77.94, -45)"><use href="#hex"/></g>
<g data-q="-6" data-r="4" data-s="2" data-t="0" transform="translate(69.28, 60)"><use href="#hex"/></g>
<g data-q="-2" data-r="-4" data-s="6" data-t="0" transform="translate(69.28, -60)"><use href="#hex"/></g>
<g data-q="-6" data-r="5" data-s="1" data-t="0" transform="translate(60.620000000000005, 75)"><use href="#hex"/></g>
<g data-q="-1" data-r="-5" data-s="6" data-t="0" transform="translate(60.620000000000005, -75)"><use href="#hex"/></g>
<g data-q="6" data-r="-6" data-s="0" data-t="0" transform="translate(-51.96, -90)"><use href="#hex"/></g>
<g data-q="5" data-r="-6" data-s="1" data-t="0" transform="translate(-34.64, -90)"><use href="#hex"/></g>
<g data-q="4" data-r="-6" data-s="2" data-t="0" transform="translate(-17.32, -90)"><use href="#hex"/></g>
<g data-q="3" data-r="-6" data-s="3" data-t="0" transform="translate(0, -90)"><use href="#hex"/></g>
<g data-q="2" data-r="-6" data-s="4" data-t="0" transform="translate(17.32, -90)"><use href="#hex"/></g>
<g data-q="1" data-r="-6" data-s="5" data-t="0" transform="translate(34.64, -90)"><use href="#hex"/></g>
<g data-q="-6" data-r="6" data-s="0" data-t="0" transform="translate(51.96, 90)"><use href="#hex"/></g>
<g data-q="-5" data-r="6" data-s="-1" data-t="0" transform="translate(34.64, 90)"><use href="#hex"/></g>
<g data-q="-4" data-r="6" data-s="-2" data-t="0" transform="translate(17.32, 90)"><use href="#hex"/></g>
<g data-q="-3" data-r="6" data-s="-3" data-t="0" transform="translate(0, 90)"><use href="#hex"/></g>
<g data-q="-2" data-r="6" data-s="-4" data-t="0" transform="translate(-17.32, 90)"><use href="#hex"/></g>
<g data-q="-1" data-r="6" data-s="-5" data-t="0" transform="translate(-34.64, 90)"><use href="#hex"/></g>
<g data-q="0" data-r="6" data-s="-6" data-t="0" transform="translate(-51.96, 90)"><use href="#hex"/></g>
<g data-q="0" data-r="-6" data-s="6" data-t="0" transform="translate(51.96, -90)"><use href="#hex"/></g>
<g data-q="-7" data-r="5" data-s="2" data-t="0" transform="translate(77.94, 75)"><use href="#hex"/></g>
<g data-q="-2" data-r="-5" data-s="7" data-t="0" transform="translate(77.94, -75)"><use href="#hex"/></g>
<g data-q="-7" data-r="6" data-s="1" data-t="0" transform="translate(69.28, 90)"><use href="#hex"/></g>
<g data-q="-1" data-r="-6" data-s="7" data-t="0" transform="translate(69.28, -90)"><use href="#hex"/></g>
<g data-q="6" data-r="-7" data-s="1" data-t="0" transform="translate(-43.3, -105)"><use href="#hex"/></g>
<g data-q="5" data-r="-7" data-s="2" data-t="0" transform="translate(-25.98, -105)"><use href="#hex"/></g>
<g data-q="4" data-r="-7" data-s="3" data-t="0" transform="translate(-8.66, -105)"><use href="#hex"/></g>
<g data-q="3" data-r="-7" data-s="4" data-t="0" transform="translate(8.66, -105)"><use href="#hex"/></g>
<g data-q="2" data-r="-7" data-s="5" data-t="0" transform="translate(25.98, -105)"><use href="#hex"/></g>
<g data-q="1" data-r="-7" data-s="6" data-t="0" transform="translate(43.3, -105)"><use href="#hex"/></g>
<g data-q="-7" data-r="7" data-s="0" data-t="0" transform="translate(60.620000000000005, 105)"><use href="#hex"/></g>
<g data-q="-6" data-r="7" data-s="-1" data-t="0" transform="translate(43.3, 105)"><use href="#hex"/></g>
<g data-q="-5" data-r="7" data-s="-2" data-t="0" transform="translate(25.98, 105)"><use href="#hex"/></g>
<g data-q="-4" data-r="7" data-s="-3" data-t="0" transform="translate(8.66, 105)"><use href="#hex"/></g>
<g data-q="-3" data-r="7" data-s="-4" data-t="0" transform="translate(-8.66, 105)"><use href="#hex"/></g>
<g data-q="-2" data-r="7" data-s="-5" data-t="0" transform="translate(-25.98, 105)"><use href="#hex"/></g>
<g data-q="-1" data-r="7" data-s="-6" data-t="0" transform="translate(-43.3, 105)"><use href="#hex"/></g>
<g data-q="0" data-r="-7" data-s="7" data-t="0" transform="translate(60.620000000000005, -105)"><use href="#hex"/></g>
<g data-q="-8" data-r="7" data-s="1" data-t="0" transform="translate(77.94, 105)"><use href="#hex"/></g>
<g data-q="-1" data-r="-7" data-s="8" data-t="0" transform="translate(77.94, -105)"><use href="#hex"/></g>
<g data-q="-8" data-r="8" data-s="0" data-t="0" transform="translate(69.28, 120)"><use href="#hex"/></g>
<g data-q="-7" data-r="8" data-s="-1" data-t="0" transform="translate(51.96, 120)"><use href="#hex"/></g>
<g data-q="-6" data-r="8" data-s="-2" data-t="0" transform="translate(34.64, 120)"><use href="#hex"/></g>
<g data-q="-5" data-r="8" data-s="-3" data-t="0" transform="translate(17.32, 120)"><use href="#hex"/></g>
<g data-q="-4" data-r="8" data-s="-4" data-t="0" transform="translate(0, 120)"><use href="#hex"/></g>
<g data-q="-3" data-r="8" data-s="-5" data-t="0" transform="translate(-17.32, 120)"><use href="#hex"/></g>
<g data-q="-2" data-r="8" data-s="-6" data-t="0" transform="translate(-34.64, 120)"><use href="#hex"/></g>
<g data-q="-1" data-r="8" data-s="-7" data-t="0" transform="translate(-51.96, 120)"><use href="#hex"/></g>
</g>
</g>
</g>
</g>
<script href="../../radial.js"/>
<script href="../../map.js"/>
</svg>

Before

Width:  |  Height:  |  Size: 25 KiB

View File

@ -1,23 +1,6 @@
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 200 300">
<defs>
<g id="building1" class="building">
<g class="footprint">
<g data-q="0" data-r="0" data-s="0" data-left="1" data-top="3" data-right="2" data-bottom="4" data-offset="left" />
</g>
<g class="structure">
<path id="building1-floor" class="floor" d="M -30.309999,-52.5 H 38.97 l 0,119.999999 H -30.31 Z" />
<path id="building1-outer-wall" class="outer-wall" d="M 38.969998,-7.500001 21.65,-7.5 V 7.4999997 L 12.989997,7.5 m 0,30 25.980001,0 M 12.989997,67.5 v -60 l -17.319997,0 0,-30.0000007 M -4.330003,67.5 v -45 H -30.31 m 0,-74.999999 L 38.97,-52.5 38.969999,67.499999 -30.31,67.5 Z" />
<path id="building1-inner-wall" class="inner-wall" d="M 38.969998,-7.500001 21.65,-7.5 V 7.4999997 L 12.989997,7.5 m 0,30 25.980001,0 M 12.989997,67.5 v -60 l -17.319997,0 0,-30.0000007 M -4.330003,67.5 v -45 H -30.31 m 0,-74.999999 L 38.97,-52.5 38.969999,67.499999 -30.31,67.5 Z" />
<path id="building1-door-edges" class="door-edges" d="m 12.99,52.5 0,-15 M -4.33,45.000003 v -15 M 12.990002,30 l 0,-15" />
<path id="building1-doors" class="doors" d="m 12.99,48.169997 0,-6.34 M -4.33,40.67 v -6.34 m 17.320002,-8.66 0,-6.34" />
<path id="building1-exit-edges" class="exits door-edges" d="M 0,-52.5 H 17.32 M -30.31,8.66 V -8.66" />
<path id="building1-exits" class="doors exits" d="M 4.3300002,-52.5 H 12.99 m -43.3,56.8300023 v -8.660003" />
<path id="building1-windows" class="windows" d="m 32.501739,67.499994 -13.043478,0 m -49.768256,-8.478265 0,-13.043478 m 0,-69.456522 0,-13.043479" />
</g>
</g>
<polygon id="desk" points="-1.5,-7 4.5,-7 4.5,7 -1.5,7 -2.5,6 -2.5,3 -4.5,3 -4.5,-3 -2.5,-3 -2.5,-6" />
<rect id="couch" x="-4.25" y="-8" width="8.5" height="16" />
<rect id="bed" x="-5" y="-9" width="10" height="18" />
@ -25,7 +8,7 @@
<g id="mapsheet" class="mapsheet">
<g class="building1" data-q="3" data-r="-5" data-s="2">
<use href="#building1"/>
<use href="mapsheets.svg#building1"/>
<g class="furniture">
<use href="#couch" transform="rotate(90,10.34,-27.66)" />
<use href="#bed" transform="translate(-17.32,45)" />
@ -56,7 +39,7 @@
<g class="start-locations" data-attacker-name="liao" data-defender-name="davion">
<g data-edge="north" style="--i: -2">
<g class="counter" data-allegiance="attacker" data-number="1" data-squad="1" data-armor="4">
<use class="primary-weapon" href="counters.svg#blazer"/>
<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>

Before

Width:  |  Height:  |  Size: 7.2 KiB

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 41 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 1.1 MiB

File diff suppressed because it is too large Load Diff

Before

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 378 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 366 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 402 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 368 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 227 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 271 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 273 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 183 KiB

View File

@ -2,7 +2,9 @@
<html>
<head>
<title>Infantry Combat Solo Basic</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BTroops - Infantry Combat, Solo Basic</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>

View File

@ -10,4 +10,4 @@ else
port=8080
fi
docker run --rm --init -it -v $PWD:/usr/src/app -v $PWD/../pan-zoom:/usr/src/pan-zoom -u $user_id:$user_id -p $port:$port $image $@
docker run --rm --init -it -v $PWD:/usr/src/app -u $user_id:$user_id -p $port:$port $image $@

View File

@ -1,10 +1,10 @@
import * as panzoom from './modules/pan-zoom.js';
import * as gameboard from './modules/gameboard.js';
import * as recordSheet from './modules/record_sheet.js';
import * as mapSelectDialog from './modules/map_select_dialog.js';
import { Observable } from './modules/observable.js';
import { requestResource, build } from './modules/scenario.js';
import { scenarios } from './modules/scenarios.js';
import { withRestore as panzoom } from 'pan-zoom';
import * as gameboard from './modules/gameboard';
import * as recordSheet from './modules/record_sheet';
import * as mapSelectDialog from './modules/map_select_dialog';
import { Observable } from './modules/observable';
import { requestResource, build } from './modules/scenario';
import { scenarios } from './modules/scenarios';
globalThis.svgns = 'http://www.w3.org/2000/svg';
@ -79,7 +79,7 @@ async function buildScenario(req) {
mapResourceEl.style.opacity = 1;
mapPlaceholder.style.opacity = 0;
panzoom.start(template);
panzoom.start(template, '.gameboard');
gameboard.start(template);
// recordSheet.start(svg.querySelector('.start-locations'), gameboard.getUnits());

View File

@ -7,9 +7,9 @@ function dataSelector({ dataset: { allegiance, number, squad }}) {
return `[data-number="${number}"][data-allegiance="${allegiance}"][data-squad="${squad}"]`;
}
function traceSelector(counter) {
return `polyline.move-trace${dataSelector(counter)}`;
}
//function traceSelector(counter) {
// return `polyline.move-trace${dataSelector(counter)}`;
//}
function getCellPosition(cell) {
const [x, y] = cell.getAttributeNS(null, 'transform').match(/-?\d+\.?\d*/g);
@ -17,44 +17,44 @@ function getCellPosition(cell) {
return { x, y };
}
function getClones(svg, counter) {
return svg.querySelectorAll(`.counter.clone${dataSelector(counter)}`);
}
//function getClones(svg, counter) {
// return svg.querySelectorAll(`.counter.clone${dataSelector(counter)}`);
//}
function addMoveToHistory(selected) {
const clone = selected.cloneNode(true);
clone.classList.remove(selectedClass);
clone.classList.add('clone');
selected.parentElement.appendChild(clone);
//function addMoveToHistory(selected) {
// const clone = selected.cloneNode(true);
// clone.classList.remove(selectedClass);
// clone.classList.add('clone');
// selected.parentElement.appendChild(clone);
//
// return clone;
//}
return clone;
}
//function updatePlacement(cell, selected, clone) {
// const { q, r, s, t } = clone.parentElement.dataset;
//
// selected.dataset.previous = [q, r, s, t];
// placeIn(cell, selected);
//
// Array.from(selected.children).forEach(n => {
// if (n.classList.contains('removed')) {
// n.remove();
// } else if ('preexisting' in n.dataset) {
// delete n.dataset.preexisting;
// }
// });
//}
function updatePlacement(cell, selected, clone) {
const { q, r, s, t } = clone.parentElement.dataset;
selected.dataset.previous = [q, r, s, t];
placeIn(cell, selected);
Array.from(selected.children).forEach(n => {
if (n.classList.contains('removed')) {
n.remove();
} else if ('preexisting' in n.dataset) {
delete n.dataset.preexisting;
}
});
}
function createTrace(previous, current, selected) {
const trace = document.createElementNS(svgns, 'polyline');
trace.dataset.number = selected.dataset.number;
trace.dataset.allegiance = selected.dataset.allegiance;
trace.classList.add('move-trace');
trace.setAttributeNS(null, 'points', `${previous.x},${previous.y} ${current.x},${current.y}`);
return trace;
}
//function createTrace(previous, current, selected) {
// const trace = document.createElementNS(svgns, 'polyline');
//
// trace.dataset.number = selected.dataset.number;
// trace.dataset.allegiance = selected.dataset.allegiance;
// trace.classList.add('move-trace');
// trace.setAttributeNS(null, 'points', `${previous.x},${previous.y} ${current.x},${current.y}`);
//
// return trace;
//}
function placeIn(location, target) {
location.querySelector('use[href="#hex"]').after(target);
@ -87,29 +87,30 @@ export function createCounter(selected, weapon = 'rifle') {
return g;
}
export function handleTrace(svg, selected, clone, current) {
let trace = getTrace(svg, selected);
if (!trace) {
trace = createTrace(getCellPosition(clone.parentElement), current, selected);
svg.querySelector('.grid').before(trace);
} else {
const points = `${trace.getAttribute('points')} ${current.x},${current.y}`;
trace.setAttributeNS(null, 'points', points);
}
}
//export function handleTrace(svg, selected, clone, current) {
// let trace = getTrace(svg, selected);
//
// if (!trace) {
// trace = createTrace(getCellPosition(clone.parentElement), current, selected);
// svg.querySelector('.grid').before(trace);
// } else {
// const points = `${trace.getAttribute('points')} ${current.x},${current.y}`;
// trace.setAttributeNS(null, 'points', points);
// }
//}
export function getAllCounters(container) {
return container.querySelectorAll('g.counter[data-allegiance][data-number]');
}
export function getCounter(svg, selected) {
return svg.querySelector(`.counter${dataSelector(selected)}:not(.clone)`);
//return svg.querySelector(`.counter${dataSelector(selected)}:not(.clone)`);
return svg.querySelector(`.counter${dataSelector(selected)}`);
}
export function getTrace(svg, counter) {
return svg.querySelector(traceSelector(counter));
}
//export function getTrace(svg, counter) {
// return svg.querySelector(traceSelector(counter));
//}
export function place(svg, selected, cell) {
//console.log(selected.parentElement);
@ -134,23 +135,23 @@ export function place(svg, selected, cell) {
//}
}
export function removeClones(svg, counter) {
getClones(svg, counter).forEach(c => c.remove());
}
//export function removeClones(svg, counter) {
// getClones(svg, counter).forEach(c => c.remove());
//}
export function endMove(svg, counter) {
Array.from(counter.children).forEach(n => {
if (n.classList.contains('removed')) {
n.remove();
} else {
n.dataset.preexisting = '';
}
});
//export function endMove(svg, counter) {
//Array.from(counter.children).forEach(n => {
// if (n.classList.contains('removed')) {
// n.remove();
// } else {
// n.dataset.preexisting = '';
// }
//});
svg.querySelector(traceSelector(counter))?.remove();
delete counter.dataset.previous;
removeClones(svg, counter);
}
//svg.querySelector(traceSelector(counter))?.remove();
//delete counter.dataset.previous;
//removeClones(svg, counter);
//}
export function getSelectedClass() {
return selectedClass;

View File

@ -46,17 +46,6 @@ function isMechTemplate(el) {
return el && el.getAttribute('class') === 'mech-template';
}
function isClone(counter) {
const isClone = counter.classList.contains('clone'),
{ allegiance: clAl, number: clNum } = counter.dataset;
return {
of: function ({ dataset: { allegiance, number }}) {
return isClone && clAl == allegiance && clNum == number;
}
};
}
function getCellPosition(cell) {
const [x, y] = cell.getAttributeNS(null, 'transform').match(/-?\d+\.?\d*/g);
@ -127,57 +116,6 @@ function drawSightLine(sourceCell, targetCell) {
svg.querySelector('.gameboard').appendChild(line);
}
function moveBackOneStepInHistory(counter) {
const trace = soldier.getTrace(svg, counter);
counter.remove();
counter = getCounterAtGridIndex(...counter.dataset.previous.split(','));
counter.classList.remove('clone');
counter.classList.add(soldier.getSelectedClass());
if (!('previous' in counter.dataset)) {
trace.remove();
} else {
const points = trace.getAttribute('points').split(' ');
points.pop();
trace.setAttributeNS(null, 'points', points.join(' '));
}
return counter;
}
function clearMoveHistory(clone, counter) {
clone.classList.remove('clone');
clone.classList.add(soldier.getSelectedClass());
counter.remove();
counter = clone;
soldier.removeClones(svg, counter);
soldier.getTrace(svg, counter).remove();
return counter;
}
function deleteClone(occupant, counter, cell) {
const index = getGridIndex(occupant),
trace = soldier.getTrace(svg, counter),
pos = getCellPosition(cell),
points = trace.getAttribute('points').split(' ').filter(p => p != `${pos.x},${pos.y}`).join(' ');;
let current = counter;
trace.setAttributeNS(null, 'points', points);
while (current.dataset.previous != `${index.q},${index.r},${index.s},${index.t}`) {
current = getCounterAtGridIndex(...current.dataset.previous.split(','));
}
current.dataset.previous = occupant.dataset.previous;
occupant.remove();
}
function hasPreviousMoveInHistory(counter) {
return 'previous' in counter.dataset;
}
function selectOffBoard() {
Observable.notify('select', this, { revealRecord: true });
}
@ -229,7 +167,6 @@ function endMove() {
const selected = getSelected();
if (selected) {
soldier.endMove(svg, selected);
deselect();
}
}
@ -242,8 +179,6 @@ export function start(el) {
// For when the pointer leaves the window
document.querySelector('object').addEventListener('pointerout', e => {
if (clearHexDialog.open) return;
//console.log('object pointerout');
//console.log('Left map... CLEARING HOVERS');
svg.querySelectorAll('.hover').forEach(el => el.classList.remove('hover'));
[...frontmost.children].forEach(child => {
@ -263,7 +198,6 @@ export function start(el) {
// Pointer moves outside the edge of the grid
if (!targetCell) {
//console.log('No target cell... CLEARING HOVERS');
svg.querySelectorAll('.hover').forEach(el => el.classList.remove('hover'));
[...frontmost.children].forEach(child => {
@ -284,7 +218,6 @@ export function start(el) {
// 's contents that is in frontmost, whose parent cell is not already highlighted
!(targetCell.classList.contains('frontmost') && frontmostStore.get(e.target.closest('.frontmost > *')).classList.contains('hover'))
].every(e => e)) {
//console.log('Target cell missing hover... CLEARING HOVERS AND ADDING TO TARGET CELL');
svg.querySelectorAll('.hover').forEach(el => el.classList.remove('hover'));
if (placing[0]?.getAttributeNS(null, 'class') === 'mech-template') {
@ -325,8 +258,6 @@ export function start(el) {
} else {
getActiveSightLine(svg) && clearSightLine();
}
//console.log('frontmost contents', frontmost.children);
});
grid.addEventListener('click', clickHandler);
@ -394,53 +325,6 @@ export function start(el) {
const selected = getSelected();
}
// debug //
// Add a trooper counter
//const defender = { dataset: { allegiance: 'defender', number: 1, squad: 2 }};
//const cell2 = getCell(-5, 10, -5, 0);
//frontmost.setAttributeNS(null, 'transform', cell2.getAttributeNS(null, 'transform'));
//const trooper2 = soldier.createCounter(defender, 'gl');
//frontmostStore.set(trooper2, cell2);
//frontmost.append(trooper2);
//cell2.classList.add('hover');
//
//const trooper1 = soldier.createCounter({ dataset: { allegiance: 'attacker', number: 1, squad: 1 }}, 'blazer');
//soldier.place(svg, trooper1, getCell(-3, 9, -6, 0));
//
//soldier.place(
// svg,
// soldier.createCounter({ dataset: { allegiance: 'defender', number: 1, squad: 1 }}, 'blazer'),
// getCell(1, -8, 7, 0)
//);
// Add some counters in an unoccupied cell
//const countersCell = getCell(-1, 1, 0, 0);
//const counter = document.createElementNS(svgns, 'use');
//const name = 'grenade';
//counter.setAttributeNS(null, 'href', `#counter-${name}`);
//counter.classList.add(`counter-${name}`);
//frontmostStore.set(counter, cell2);
//frontmost.append(counter);
//arrangeCounters(frontmost)
//counter.addEventListener('click', e => {
// e.stopPropagation()
// const container = counter.parentElement;
// counter.remove()
// arrangeCounters(container);
//});
//setCounter('grenade');
//setCounter('prone');
//setCounter('1st-floor');
//const e = new PointerEvent('click');
//countersCell.dispatchEvent(e);
//countersCell.dispatchEvent(e);
//countersCell.dispatchEvent(e);
///////////
Observable.subscribe('select', select);
Observable.subscribe('endmove', endMove);
Observable.subscribe('viewElevation', viewElevation);

View File

@ -1,33 +0,0 @@
import { pan, zoom } from 'pan-zoom';
const storageKey = 'pan-zoom';
const zoomFactor = 0.25;
function restorePanZoomVal(el) {
const storedPanZoomVal = localStorage.getItem(storageKey);
if (storedPanZoomVal) el.style.transform = storedPanZoomVal;
}
function addEventListeners(svg, el) {
svg.addEventListener('wheel', zoom(el, zoomFactor), { passive: false });
svg.addEventListener('pointerdown', pan(el), { passive: false });
}
function storePanZoomVal(transformMatrix) {
localStorage.setItem(storageKey, transformMatrix);
}
function observePanZoomChanges(el) {
const observer = new MutationObserver(() => storePanZoomVal(el.style.transform));
observer.observe(el, { attributeFilter: ['style'] });
}
export function start(svg) {
const targetEl = svg.querySelector('.gameboard');
restorePanZoomVal(targetEl);
addEventListeners(svg, targetEl);
observePanZoomChanges(targetEl);
}

View File

@ -49,7 +49,121 @@ const weapons = {
damage: '4/2/1 L',
shortRange: '1-10',
longRange: '11-24'
}
},
pistol: {
name: 'Pistol',
damage: '3L',
shortRange: '1-7',
longRange: '8-20'
},
laserpistol: {
name: 'Laser Pistol',
damage: '4L',
shortRange: '1-12',
longRange: '13-30'
},
laserrifle: {
name: 'Laser Rifle',
damage: '5L',
shortRange: '1-17',
longRange: '18-105'
},
gyrojetrifle: {
name: 'Gyrojet Rifle',
damage: '6L',
shortRange: '1-57',
longRange: '58-180'
},
autopistol: {
name: 'Auto Pistol',
damage: '2L',
shortRange: '1-7',
longRange: '8-20'
},
law: {
name: 'LAW',
damage: '7/3/1 L',
shortRange: '1-22',
longRange: '23-80'
},
hsrm: {
name: 'Heavy SRM',
damage: '13/6/3/1 L',
shortRange: '1-54',
longRange: '55-96'
},
gl: {
name: 'Grenade Launcher',
damage: '4/2/1 L',
shortRange: '1-10',
longRange: '11-24'
},
autogl: {
name: 'Auto Grenade Launcher',
damage: '3/2/1 L',
shortRange: '1-22',
longRange: '23-50'
},
lrrifle: {
name: 'Light Recoilless Rifle',
damage: '4/2/1 L',
shortRange: '1-36',
longRange: '37-70'
},
satchelcharge: {
name: 'Satchel Charge',
damage: '10/5/2 L',
shortRange: 'NA',
longRange: 'NA'
},
flamer: {
name: 'Flamer',
damage: '2/1 L',
shortRange: '1-6',
longRange: '7-12'
},
hflamer: {
name: 'Heavy Flamer',
damage: '2/2/1 L',
shortRange: '1-6',
longRange: '7-12'
},
inferno: {
name: 'Inferno',
damage: '4/2/1 L',
shortRange: '1-44',
longRange: '45-108'
},
mmg: {
name: 'Medium MG',
damage: '6L',
shortRange: '1-30',
longRange: '31-84'
},
hmg: {
name: 'Heavy MG',
damage: '7L',
shortRange: '1-36',
longRange: '37-110'
},
splaser: {
name: 'Semi-Portable Laser',
damage: '11L',
shortRange: '1-80',
longRange: '81-240'
},
mpppc: {
name: 'Man-Pack PPC',
damage: '8L',
shortRange: '1-50',
longRange: '51-110'
},
grenade: {
name: 'Grenade',
damage: '6/3/1 L',
shortRange: 'Special',
longRange: 'Special'
},
}
function createIcon(number) {