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

Add all scenario maps

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2024-04-28 16:19:59 -07:00
parent cf190d8e7a
commit 2772333072
9 changed files with 117 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/index.html
View File

@ -112,7 +112,7 @@
</div>
<div id="content">
<input type="checkbox" class="visible" checked />
<input type="checkbox" class="visible"/>
<div>
Set firing arc:
<button type="button" class="set-firing-arc" data-size="small">
@ -143,6 +143,7 @@
<select>
<option value="map1">Map1</option>
<option value="map2">Map2</option>
<option value="map3">Map3</option>
</select>
</label>
</p>

28
public/map.css
View File

@ -199,7 +199,7 @@ g.selected use {
fill: red;
}
.board {
.board, .gameboard {
transform: translate(19px, 31px) scale(4);
}
@ -301,6 +301,32 @@ g[data-y="47"] { --i: 47; }
g[data-y="48"] { --i: 48; }
g[data-y="49"] { --i: 49; }
g[data-y="50"] { --i: 50; }
g[data-y="51"] { --i: 51; }
g[data-y="52"] { --i: 52; }
g[data-y="53"] { --i: 53; }
g[data-y="54"] { --i: 54; }
g[data-y="55"] { --i: 55; }
g[data-y="56"] { --i: 56; }
g[data-y="57"] { --i: 57; }
g[data-y="58"] { --i: 58; }
g[data-y="59"] { --i: 59; }
g[data-y="60"] { --i: 60; }
g[data-y="61"] { --i: 61; }
g[data-y="62"] { --i: 62; }
g[data-y="63"] { --i: 63; }
g[data-y="64"] { --i: 64; }
g[data-y="65"] { --i: 65; }
g[data-y="66"] { --i: 66; }
g[data-y="67"] { --i: 67; }
g[data-y="68"] { --i: 68; }
g[data-y="69"] { --i: 69; }
g[data-y="70"] { --i: 70; }
g[data-y="71"] { --i: 71; }
g[data-y="72"] { --i: 72; }
g[data-y="73"] { --i: 73; }
g[data-y="74"] { --i: 74; }
g[data-y="75"] { --i: 75; }
g[data-y="76"] { --i: 76; }
[data-x="0"] { --i: 0; }
[data-x="1"] { --i: 1; }

4
public/map1.svg
View File

@ -1857,9 +1857,5 @@
<g data-x="32"><use href="#hex"/></g>
</g>
</g>
<g class="buildings">
<rect x="205" y="305" width="170" height="140"/>
</g>
<!-- <line class="sight-line" x1="0" y1="0" x2="0" y2="0"/> -->
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 81 KiB

After

Width:  |  Height:  |  Size: 81 KiB

66
public/map2.svg
View File

@ -1,8 +1,17 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox="-25 -150 400 570" xmlns="http://www.w3.org/2000/svg">
<svg viewBox="-150 -150 600 800" xmlns="http://www.w3.org/2000/svg">
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="map.css" type="text/css"/>
<style>
use[href="#hex"] {
opacity: 0.2;
}
#image-maps image {
transform: none;
}
</style>
<defs>
<polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
@ -20,14 +29,22 @@
<image id="counter-grenade" href="counter_grenade.jpg" width="10"/>
</defs>
<rect id="background" x="-18" y="-10" width="386" height="322"/>
<rect id="background"/>
<g class="board">
<g id="image-maps">
<image id="map2" class="map-scans" href="scans/map2.jpg" width="2284" height="1518"/>
<image class="map-scans" href="row.jpg" width="2284" height="55" y="1505" />
<image id="map1" class="map-scans" href="scans/map1.jpg" width="2284" height="1518" y="1565"/>
<image class="map-scans" href="row.jpg" width="2284" height="55" y="3065" />
<image id="map3" class="map-scans" href="scans/map3.jpg" width="2284" height="1518" y="3125"/>
</g>
<g class="gameboard">
<g id="firing-arcs">
<g id="shapes"/>
<g id="lines"/>
</g>
<g class="start-locations">
<!-- <g class="start-locations">
<g data-y="-2">
<g data-x="4" class="counter" data-allegiance="liao" data-number="1"><use href="#t-1"/></g>
<g data-x="3" class="counter" data-allegiance="liao" data-number="2"><use href="#t-2"/></g>
@ -42,43 +59,8 @@
<g data-x="3" class="counter" data-allegiance="davion" data-number="4"><use href="#t-4"/></g>
<g data-x="4" class="counter" data-allegiance="davion" data-number="5"><use href="#t-5"/></g>
</g>
</g> -->
<g class="grid"/>
</g>
<g class="grid">
<g data-y="0">
<g data-x="0"><use href="#hex"/></g>
<g data-x="1"><use href="#hex"/></g>
<g data-x="2"><use href="#hex"/></g>
<g data-x="3"><use href="#hex"/></g>
<g data-x="4"><use href="#hex"/></g>
</g>
<g data-y="1">
<g data-x="0"><use href="#hex"/></g>
<g data-x="1"><use href="#hex"/></g>
<g data-x="2"><use href="#hex"/></g>
<g data-x="3"><use href="#hex"/></g>
<g data-x="4"><use href="#hex"/></g>
</g>
<g data-y="2">
<g data-x="0"><use href="#hex"/></g>
<g data-x="1"><use href="#hex"/></g>
<g data-x="2"><use href="#hex"/></g>
<g data-x="3"><use href="#hex"/></g>
<g data-x="4"><use href="#hex"/></g>
</g>
<g data-y="3">
<g data-x="0"><use href="#hex"/></g>
<g data-x="1"><use href="#hex"/></g>
<g data-x="2"><use href="#hex"/></g>
<g data-x="3"><use href="#hex"/></g>
<g data-x="4"><use href="#hex"/></g>
</g>
<g data-y="4">
<g data-x="0"><use href="#hex"/></g>
<g data-x="1"><use href="#hex"/></g>
<g data-x="2"><use href="#hex"/></g>
<g data-x="3"><use href="#hex"/></g>
<g data-x="4"><use href="#hex"/></g>
</g>
</g>
</g>
<script href="map.js" data-cols="33" data-rows="77"></script>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

62
public/map3.svg Normal file
View File

@ -0,0 +1,62 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox="-150 -150 600 800" xmlns="http://www.w3.org/2000/svg">
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="map.css" type="text/css"/>
<style>
use[href="#hex"] {
opacity: 0.2;
}
#image-maps image {
transform: translate(-10px, 0px);
}
</style>
<defs>
<polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
<circle id="counter-base" cx="0" cy="0" r="5"/>
<g id="t-1" class="troop-counter-template"><use href="#counter-base"/><text>1</text></g>
<g id="t-2" class="troop-counter-template"><use href="#counter-base"/><text>2</text></g>
<g id="t-3" class="troop-counter-template"><use href="#counter-base"/><text>3</text></g>
<g id="t-4" class="troop-counter-template"><use href="#counter-base"/><text>4</text></g>
<g id="t-5" class="troop-counter-template"><use href="#counter-base"/><text>5</text></g>
<g id="t-6" class="troop-counter-template"><use href="#counter-base"/><text>6</text></g>
<g id="t-7" class="troop-counter-template"><use href="#counter-base"/><text>7</text></g>
<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 id="image-maps">
<image id="map4" class="map-scans" href="scans/map4.jpg" width="2284" height="1518"/>
</g>
<g class="gameboard">
<g id="firing-arcs">
<g id="shapes"/>
<g id="lines"/>
</g>
<!-- <g class="start-locations">
<g data-y="-2">
<g data-x="4" class="counter" data-allegiance="liao" data-number="1"><use href="#t-1"/></g>
<g data-x="3" class="counter" data-allegiance="liao" data-number="2"><use href="#t-2"/></g>
<g data-x="2" class="counter" data-allegiance="liao" data-number="3"><use href="#t-3"/></g>
<g data-x="1" class="counter" data-allegiance="liao" data-number="4"><use href="#t-4"/></g>
<g data-x="0" class="counter" data-allegiance="liao" data-number="5"><use href="#t-5"/></g>
</g>
<g data-y="6">
<g data-x="0" class="counter" data-allegiance="davion" data-number="1"><use href="#t-1"/></g>
<g data-x="1" class="counter" data-allegiance="davion" data-number="2"><use href="#t-2"/></g>
<g data-x="2" class="counter" data-allegiance="davion" data-number="3"><use href="#t-3"/></g>
<g data-x="3" class="counter" data-allegiance="davion" data-number="4"><use href="#t-4"/></g>
<g data-x="4" class="counter" data-allegiance="davion" data-number="5"><use href="#t-5"/></g>
</g>
</g> -->
<g class="grid"/>
</g>
<script href="map.js" data-cols="33" data-rows="25"></script>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
public/scans/map1-less-mem.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 309 KiB

BIN
public/scans/map1-photo.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 261 KiB

BIN
public/scans/map1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 992 KiB

4
src/modules/gameboard.js
View File

@ -241,7 +241,7 @@ export function start(el) {
cell.dispatchEvent(new MouseEvent('pointerover'));
});
cell.addEventListener('pointerover', e => {
cell.addEventListener('pointerover', () => {
let selected = getSelected();
if (selected) {
@ -261,7 +261,7 @@ export function start(el) {
}
});
cell.addEventListener('pointerout', e => {
cell.addEventListener('pointerout', () => {
let sl = getActiveSightLine(svg);
if (sl) {