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

WIP: render radial coord hexes/maps

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:32 -07:00
parent 8dd62a5459
commit fdb3840564
13 changed files with 113 additions and 215 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
esbuild-server.mjs
View File

@ -222,7 +222,7 @@ const externalSvgToInternal = {
} }
const buildOptions = { const buildOptions = {
entryPoints: ['src/index.js', 'src/soldier_record_block.js', 'src/map.js'], entryPoints: ['src/index.js', 'src/soldier_record_block.js', 'src/map.js', 'src/radial.js'],
bundle: true, bundle: true,
outdir: 'build', outdir: 'build',
plugins: [ plugins: [

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

@ -15,7 +15,7 @@ text {
} }
use[href="#hex"] { use[href="#hex"] {
opacity: 0; opacity: 0.5;
fill: transparent; fill: transparent;
fill-opacity: 0.5; fill-opacity: 0.5;
stroke-width: 0.5px; stroke-width: 0.5px;
@ -60,6 +60,10 @@ g.weapon-symbol :not(use[href="#counter-base"]) {
stroke-width: 0.5px; stroke-width: 0.5px;
} }
/* g.weapon-symbol {
r: 5px;
} */
g.troop-counter-template text { g.troop-counter-template text {
fill: white; fill: white;
font-size: 12px; font-size: 12px;
@ -425,7 +429,7 @@ g[data-y="76"] { --i: 76; }
.building .doors { .building .doors {
stroke: white; stroke: white;
stroke-width: 2.25 stroke-width: 2.25px
} }
#test-arcs line, #test-arcs polyline { #test-arcs line, #test-arcs polyline {

5
public/assets/css/radial.css
View File

@ -21,7 +21,7 @@ text {
use[href="#hex"] { use[href="#hex"] {
stroke: #666; stroke: #666;
/* fill: wheat; */ /* fill: wheat; */
fill: navajowhite; /* fill: navajowhite; */
/* fill: url(#asterisk); */ /* fill: url(#asterisk); */
} }
@ -334,6 +334,3 @@ input:checked+label {
fill: lightgreen; fill: lightgreen;
} }
.furniture {
fill: violet;
}

36
public/assets/css/style.css
View File

@ -173,6 +173,10 @@ polygon.firing-arc[data-allegiance="attacker"] {
fill: blue; fill: blue;
} }
.weapon-symbol polyline {
fill: none;
}
.soldier-record[data-allegiance="defender"] svg { .soldier-record[data-allegiance="defender"] svg {
fill: red; fill: red;
} }
@ -191,6 +195,14 @@ polygon.firing-arc[data-allegiance="attacker"] {
stroke-width: 0.5px; stroke-width: 0.5px;
} }
.weapon-symbol {
stroke: none;
}
[href="#counter-base"] {
stroke: none;
}
.soldier-record svg { .soldier-record svg {
width: 20px; width: 20px;
height: 20px; height: 20px;
@ -400,6 +412,30 @@ div#dice {
animation: roll-out 0.125s linear 1; animation: roll-out 0.125s linear 1;
} }
.select-elevation {
position: fixed;
right: 0;
top: 50%;
margin-right: 10px;
background-color: #FFFFFF99;
border: 1px solid gray;
padding: 2px;
font-family: sans-serif;
font-size: 10pt;
}
.select-elevation label {
display: block;
margin: 2px 0;
text-align: center;
border: 1px solid transparent;
user-select: none;
}
.select-elevation input {
display: none;
}
@keyframes roll-out { @keyframes roll-out {
0% { 0% {
transform: scaleX(1); transform: scaleX(1);

31
public/assets/images/counters-test.svg
View File

@ -1,31 +0,0 @@
<?xml version="1.0" standalone="no"?>
<svg viewBox="-6 -6 12 24" xmlns="http://www.w3.org/2000/svg">
<defs>
<circle id="counter-base" cx="0" cy="0" r="5"/>
<g id="semi-auto">
<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"/>
</g>
</defs>
<g id="rifle" class="weapon-symbol">
</g>
<g id="smg" class="weapon-symbol">
</g>
<g id="blazer" class="weapon-symbol">
<use href="#counter-base"/>
<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>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 778 B

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

@ -1,7 +1,7 @@
<?xml version="1.0" standalone="no"?> <?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> <defs>
<circle id="counter-base" style="r: inherit;" cx="0" cy="0" r="5"/> <circle id="counter-base" style="r: inherit;" cx="0" cy="0" />
<g style="r: inherit;" id="number-1"> <g style="r: inherit;" id="number-1">
<use style="r: inherit;" href="#counter-base"/> <use style="r: inherit;" href="#counter-base"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

64
public/radial.html → public/assets/images/radial.svg
View File

@ -1,29 +1,26 @@
<!DOCTYPE html> <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<html>
<head>
<link rel="stylesheet" href="assets/css/radial.css">
</head>
<body>
<!-- <svg viewBox="-150 -130 300 260" xmlns="http://www.w3.org/2000/svg"> -->
<!-- <svg viewBox="-300 -250 600 500" xmlns="http://www.w3.org/2000/svg"> -->
<svg viewBox="-900 -600 1800 1200" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="-900 -600 1800 1200" xmlns="http://www.w3.org/2000/svg">
<defs> <defs>
<polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5" /> <polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5" />
<line id="ast-line" stroke="#000000" stroke-width="0.3" x1="-1.2" y1="0" x2="1.2" y2="0" /> <line id="ast-line" x1="-1.2" y1="0" x2="1.2" y2="0"/>
<pattern id="asterisk" viewBox="-15 -15 30 30" width="30" height="30" patternUnits="userSpaceOnUse">
<rect x="-15" y="-15" width="30" height="30" fill="wheat" />
<use y="-15" x="-15" href="#ast-line" />
<use y="-15" x="15" href="#ast-line" />
<use y="15" x="-15" href="#ast-line" />
<use y="15" x="15" href="#ast-line" />
<use y="-15" x="-15" transform="rotate(60, -15, -15)" href="#ast-line" /> <pattern id="asterisk" viewBox="-8.66 -15 17.32 30" width="17.32" height="30" patternUnits="userSpaceOnUse">
<use y="15" x="15" transform="rotate(60, 15, 15)" href="#ast-line" /> <use href="#ast-line"/>
<use y="-15" x="15" transform="rotate(-60, 15, -15)" href="#ast-line" /> <use class="cw-60-deg" href="#ast-line"/>
<use y="15" x="-15" transform="rotate(-60, -15, 15)" href="#ast-line" /> <use class="ccw-60-deg" href="#ast-line"/>
</pattern>
<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>
<g id="building8" class="building"> <g id="building8" class="building">
<path id="building8-floor" class="floor" <path id="building8-floor" class="floor"
@ -150,7 +147,7 @@
</g> </g>
<g id="terrain" class="terrain"> <g id="terrain" class="terrain">
<rect id="terrain-floor" class="floor" x="-52.75" y="-68" width="105.5" height="136" id="rect3415" /> <rect id="terrain-floor" class="floor" x="-52.75" y="-68" width="105.5" height="136" />
<g id="terrain-trees"> <g id="terrain-trees">
<use href="#tree" transform="translate(-27,-45.25)" /> <use href="#tree" transform="translate(-27,-45.25)" />
<use href="#tree" transform="translate(-40.25,-38)" /> <use href="#tree" transform="translate(-40.25,-38)" />
@ -570,25 +567,4 @@
</g> </g>
</g> </g>
</defs> </defs>
<g class="gameboard" data-view-elevation="0"></g>
</svg> </svg>
<div class="select-elevation">
<button>🡅</button>
<input type="radio" id="select-elevation-3" name="select-elevation" value="3" />
<label for="select-elevation-3">3</label>
<input type="radio" id="select-elevation-2" name="select-elevation" value="2" />
<label for="select-elevation-2">2</label>
<input type="radio" id="select-elevation-1" name="select-elevation" value="1" />
<label for="select-elevation-1">1</label>
<input type="radio" id="select-elevation-0" name="select-elevation" value="0" checked />
<label for="select-elevation-0">0</label>
<input type="radio" id="select-elevation-basement" name="select-elevation" value="-1" />
<label for="select-elevation-basement">-1</label>
<button>🡇</button>
</div>
<script src="radial.js"></script>
</body>
</html>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 41 KiB

3
public/assets/images/scenario_template.svg
View File

@ -1,6 +1,7 @@
<?xml version="1.0" standalone="no"?> <?xml version="1.0" standalone="no"?>
<svg viewBox="-10 -10 200 300" xmlns="http://www.w3.org/2000/svg"> <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" /> <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/map.css" type="text/css" />
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/radial.css" type="text/css" />
<style> <style>
#background { #background {
stroke: #304b75; stroke: #304b75;
@ -45,7 +46,7 @@
<image id="counter-grenade" href="counter_grenade.jpg" width="10"/> <image id="counter-grenade" href="counter_grenade.jpg" width="10"/>
</defs> </defs>
<g class="gameboard"> <g class="gameboard" data-view-elevation="0">
<rect id="background"/> <rect id="background"/>
<rect id="dots" fill="url(#asterisk)"/> <rect id="dots" fill="url(#asterisk)"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

19
public/index.html
View File

@ -103,6 +103,21 @@
<input type="checkbox" data-allegiance="attacker"/> <input type="checkbox" data-allegiance="attacker"/>
</div> </div>
<div class="select-elevation">
<button>🡅</button>
<input type="radio" id="select-elevation-3" name="select-elevation" value="3" />
<label for="select-elevation-3">3</label>
<input type="radio" id="select-elevation-2" name="select-elevation" value="2" />
<label for="select-elevation-2">2</label>
<input type="radio" id="select-elevation-1" name="select-elevation" value="1" />
<label for="select-elevation-1">1</label>
<input type="radio" id="select-elevation-0" name="select-elevation" value="0" checked />
<label for="select-elevation-0">0</label>
<input type="radio" id="select-elevation-basement" name="select-elevation" value="-1" />
<label for="select-elevation-basement">-1</label>
<button>🡇</button>
</div>
<div id="dice"> <div id="dice">
<button type="button" id="roll-dice">Roll</button> <button type="button" id="roll-dice">Roll</button>
<div class="die"> <div class="die">
@ -227,10 +242,6 @@
<label> <label>
Load scenario: Load scenario:
<select> <select>
<option value="map4">Test</option>
<option value="contour-lines">Contour Lines</option>
<option value="pendle">Pendle</option>
<option value="10-simplex_t03">10-simplex family polytope graph, in A10 Coxeter plane</option>
</select> </select>
</label> </label>
</p> </p>

12
src/index.js
View File

@ -18,7 +18,8 @@ const mapPlaceholder = document.querySelector('.map-placeholder'),
distanceOutput = document.getElementById('status'), distanceOutput = document.getElementById('status'),
proneToggle = document.getElementById('toggle-prone-counter'), proneToggle = document.getElementById('toggle-prone-counter'),
contentVisToggleEl = document.querySelector('#content input[type="checkbox"].visible'), contentVisToggleEl = document.querySelector('#content input[type="checkbox"].visible'),
fileName = localStorage.getItem('map') || 'scenario-side_show', // fileName = localStorage.getItem('map') || 'scenario-side_show',
fileName = localStorage.getItem('map') || 'radial',
map = scenarios[fileName]?.hashed || `assets/images/${fileName}.svg`, map = scenarios[fileName]?.hashed || `assets/images/${fileName}.svg`,
fileInputEl = document.querySelector('input[type="file"]'), fileInputEl = document.querySelector('input[type="file"]'),
dice = document.querySelectorAll('.die'), dice = document.querySelectorAll('.die'),
@ -64,6 +65,7 @@ async function buildScenario(req) {
panzoom.start(svg); panzoom.start(svg);
gameboard.start(svg); gameboard.start(svg);
recordSheet.start(svg.querySelector('.start-locations'), gameboard.getUnits()); recordSheet.start(svg.querySelector('.start-locations'), gameboard.getUnits());
} }
@ -206,6 +208,14 @@ document.querySelector('#roll-dice').addEventListener('click', () => {
}); });
}); });
// document.querySelectorAll('[name="select-elevation"]').forEach(el => {
// const gameboard = document.querySelector('.gameboard');
// el.addEventListener('change', function (e) {
// gameboard.dataset.viewElevation = this.value
// });
// });
contentVisToggleEl.addEventListener('input', toggleContentVis); contentVisToggleEl.addEventListener('input', toggleContentVis);
contentVisToggleEl.checked = (localStorage.getItem('content-visibility') !== 'false'); contentVisToggleEl.checked = (localStorage.getItem('content-visibility') !== 'false');
toggleContentVis(); toggleContentVis();

8
src/modules/record_sheet.js
View File

@ -180,11 +180,11 @@ export function start(startLoc, units) {
for (const affiliation in forces) { for (const affiliation in forces) {
const container = document.querySelector(`#${affiliation}-record`); const container = document.querySelector(`#${affiliation}-record`);
const records = container.querySelector('.records'); const records = container.querySelector('.records');
const name = startLoc?.dataset[`${affiliation}Name`]; // const name = startLoc?.dataset[`${affiliation}Name`];
if (name) { // if (name) {
container.querySelector('.name').textContent = name; // container.querySelector('.name').textContent = name;
} // }
forces[affiliation].forEach(r => records.appendChild(r)); forces[affiliation].forEach(r => records.appendChild(r));
} }

15
src/modules/scenario.js
View File

@ -1,4 +1,4 @@
async function loadScript(scenario, svg) { async function loadScript(scenario, svg, script) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const scriptEl = document.createElementNS("http://www.w3.org/2000/svg", 'script'); const scriptEl = document.createElementNS("http://www.w3.org/2000/svg", 'script');
@ -11,14 +11,15 @@ async function loadScript(scenario, svg) {
reject(Error('Script failed to load.')); reject(Error('Script failed to load.'));
}; };
const dataset = scenario.querySelector('script').dataset; const dataset = scenario.querySelector('script')?.dataset || {};
if ('cols' in dataset && 'rows' in dataset) { if ('cols' in dataset && 'rows' in dataset) {
scriptEl.dataset.rows = dataset.rows; scriptEl.dataset.rows = dataset.rows;
scriptEl.dataset.cols = dataset.cols; scriptEl.dataset.cols = dataset.cols;
} }
scriptEl.setAttributeNS(null, 'href', '../../map.js'); // scriptEl.setAttributeNS(null, 'href', '../../map.js');
scriptEl.setAttributeNS(null, 'href', `../../${script}.js`);
svg.append(scriptEl); svg.append(scriptEl);
}); });
} }
@ -46,6 +47,7 @@ export async function requestResource(url) {
} }
export async function build(svg, request) { export async function build(svg, request) {
const defs = svg.querySelector('defs');
const gb = svg.querySelector('.gameboard'); const gb = svg.querySelector('.gameboard');
const grid = svg.querySelector('.grid'); const grid = svg.querySelector('.grid');
@ -67,8 +69,6 @@ export async function build(svg, request) {
await Promise.all( await Promise.all(
Object.keys(refs).map(filename => requestResource(`assets/images/${filename}`)) Object.keys(refs).map(filename => requestResource(`assets/images/${filename}`))
).then(result => { ).then(result => {
const defs = svg.querySelector('defs');
Object.keys(refs).forEach((filename, index) => { Object.keys(refs).forEach((filename, index) => {
const external = result[index]; const external = result[index];
@ -98,5 +98,8 @@ export async function build(svg, request) {
grid.replaceWith(svg.ownerDocument.importNode(scenarioGrid, true)); grid.replaceWith(svg.ownerDocument.importNode(scenarioGrid, true));
} }
return loadScript(scenario, svg); defs.replaceWith(scenario.querySelector('defs'));
await loadScript(scenario, svg, 'radial')
return loadScript(scenario, svg, 'map');
} }

123
src/radial.js
View File

@ -1,7 +1,7 @@
if (window.IS_DEV) { // if (window.IS_DEV) {
const source = new EventSource('/esbuild'); // const source = new EventSource('/esbuild');
source.addEventListener('change', () => location.reload()); // source.addEventListener('change', () => location.reload());
} // }
const xmlns = 'http://www.w3.org/2000/svg'; const xmlns = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg'); const svg = document.querySelector('svg');
@ -94,7 +94,7 @@ function drawHexes(el, list, renderText = false) {
use.setAttributeNS(null, 'href', '#hex'); use.setAttributeNS(null, 'href', '#hex');
cell.appendChild(use); cell.appendChild(use);
if (renderText) addHexText(q, r, s, t).forEach(txt => cell.appendChild(txt)); if (false) addHexText(q, r, s, t).forEach(txt => cell.appendChild(txt));
list.set(key, cell); list.set(key, cell);
el.appendChild(cell); el.appendChild(cell);
@ -154,62 +154,6 @@ function translateCoords(map, translator) {
return translated; return translated;
} }
document.querySelectorAll('[name="select-elevation"]').forEach(el => {
const gameboard = document.querySelector('.gameboard');
el.addEventListener('change', function (e) {
gameboard.dataset.viewElevation = this.value
});
});
// function placeBuilding(buildingSelector, mapsheetSelector) {
// const building = svg.querySelector(buildingSelector);
// const bld2grid = document.createElementNS(xmlns, 'g');
// const bld2origin = { q: 0, r: 0, s: 0 };
// const bld2map2 = svg.querySelector(`${mapsheetSelector} ${buildingSelector}`);
// const [q, r, s] = bld2map2.dataset.placement.split(',').map(n => +n);
// const map2bld2place = { q, r, s };
// bld2hexes = building.querySelector('[data-grid-footprint]').dataset.gridFootprint.split(':').map(coords => {
// const [q, r, s] = coords.split(',').map(n => +n);
// const { q: tq, r: tr, s: ts } = translateRadialCoords({ q, r, s }, map2bld2place);
// return [toKey({ q: tq, r: tr, s: ts }), null];
// });
// const bld2screenCoords = radialToScreenCoords(translateRadialCoords(bld2origin, map2bld2place));
// const bld2structure = document.createElementNS(xmlns, 'g');
// bld2structure.setAttributeNS(null, 'transform', `translate(${bld2screenCoords.x}, ${bld2screenCoords.y})`)
// building.querySelectorAll('[data-grid-footprint] > *').forEach(el => {
// const use = document.createElementNS(xmlns, 'use');
// use.setAttributeNS(null, 'href', `#${el.id}`);
// el.classList.forEach(className => use.classList.add(className));
// bld2structure.appendChild(use);
// });
// drawHexes(bld2grid, new Map(bld2hexes), true);
// const bld2elvBasement = bld2grid.cloneNode(true);
// bld2elvBasement.classList.add('elevation-basement');
// bld2map2.appendChild(bld2elvBasement);
// const bld2elv1 = bld2grid.cloneNode(true);
// bld2elv1.classList.add('elevation-0');
// bld2map2.appendChild(bld2elv1);
// const bld2elv2 = bld2grid.cloneNode(true);
// bld2elv2.classList.add('elevation-1');
// bld2map2.appendChild(bld2elv2);
// const bld2elvRoof = bld2grid.cloneNode(true);
// bld2elvRoof.classList.add('elevation-roof');
// bld2map2.appendChild(bld2elvRoof);
// bld2map2.appendChild(bld2structure);
// }
const buildingHexes = {}; const buildingHexes = {};
buildingHexes.bld1 = generateRadialCoords( buildingHexes.bld1 = generateRadialCoords(
@ -269,62 +213,9 @@ buildingHexes.bld8 = [
[{ q: -7, r: 4, s: 3 }, { left: 1, top: 1, right: 1, bottom: 1 }] [{ q: -7, r: 4, s: 3 }, { left: 1, top: 1, right: 1, bottom: 1 }]
].reduce((acc, args) => new Map([...generateRadialCoords(acc, ...args)]), new Map()); ].reduce((acc, args) => new Map([...generateRadialCoords(acc, ...args)]), new Map());
const mapsheet1BuildingCoords = [
translateCoords(buildingHexes.bld2, ({ q, r, s }) => ({ q: q + 7, r: r + 7, s: s - 14 })),
translateCoords(buildingHexes.bld4, ({ q, r, s }) => ({ q: -s + 14, r: -r - 6, s: -q - 8 })),
translateCoords(buildingHexes.bld3, ({ q, r, s }) => ({ q: q - 6, r: r - 6, s: s + 12 })),
translateCoords(buildingHexes.bld6, ({ q, r, s }) => ({ q: -s - 12, r: -r + 7, s: -q + 5 })),
generateRadialCoords(new Map(), { q: 0, r: 0, s: 0 }, { left: 4, top: 5, right: 3, bottom: 5 }),
];
const mapsheet2BuildingCoords = [
translateCoords(buildingHexes.bld1, ({ q, r, s }) => ({ q: q, r: r + 7, s: s - 7 })),
translateCoords(buildingHexes.bld2, ({ q, r, s }) => ({ q: q + 7, r: r + 7, s: s - 14 })),
translateCoords(buildingHexes.bld3, ({ q, r, s }) => ({ q: q - 14, r: r + 5, s: s + 9 })),
translateCoords(buildingHexes.bld4, ({ q, r, s }) => ({ q: q - 8, r: r + 6, s: s + 2 })),
translateCoords(buildingHexes.bld5, ({ q, r, s }) => ({ q: q + 13, r: r - 6, s: s - 7 })),
translateCoords(buildingHexes.bld6, ({ q, r, s }) => ({ q: q + 7, r: r - 6, s: s - 1 })),
translateCoords(buildingHexes.bld7, ({ q, r, s }) => ({ q: q - 6, r: r - 5, s: s + 11 })),
];
const mapsheet3BuildingCoords = [
translateCoords(buildingHexes.bld1, ({ q, r, s }) => ({ q: q - 2, r: r - 5, s: s + 7 })),
translateCoords(buildingHexes.bld2, ({ q, r, s }) => ({ q: -s + 9, r: -r - 6, s: -q - 3 })),
translateCoords(buildingHexes.bld3, ({ q, r, s }) => ({ q: -s + 17, r: -r - 7, s: -q - 10 })),
translateCoords(buildingHexes.bld4, ({ q, r, s }) => ({ q: q - 9, r: r - 6, s: s + 15 })),
translateCoords(buildingHexes.bld5, ({ q, r, s }) => ({ q: q + 6, r: r + 8, s: s - 14 })),
translateCoords(buildingHexes.bld6, ({ q, r, s }) => ({ q: -s + 1, r: -r + 6, s: -q - 7 })),
translateCoords(buildingHexes.bld7, ({ q, r, s }) => ({ q: q - 12, r: r + 8, s: s + 4 })),
]
const mapsheet4BuildingCoords = [
translateCoords(buildingHexes.bld8, ({ q, r, s }) => ({ q: q + 1, r: r + 1, s: s - 2 })),
]
const mapsheetHexCoords = generateRadialCoords(new Map(), { q: 0, r: 0, s: 0 }, { left: 17, top: 13, right: 17, bottom: 14 }, 'left'); const mapsheetHexCoords = generateRadialCoords(new Map(), { q: 0, r: 0, s: 0 }, { left: 17, top: 13, right: 17, bottom: 14 }, 'left');
const mapsheet1hexCoords = new Map(mapsheetHexCoords);
const mapsheet2hexCoords = new Map(mapsheetHexCoords);
const mapsheet3hexCoords = new Map(mapsheetHexCoords);
const mapsheet4hexCoords = new Map(mapsheetHexCoords);
mapsheet1BuildingCoords.forEach(building => {
for ([coords, v] of building) mapsheet1hexCoords.delete(coords);
});
mapsheet2BuildingCoords.forEach(building => {
for ([coords, v] of building) mapsheet2hexCoords.delete(coords);
});
mapsheet3BuildingCoords.forEach(building => {
for ([coords, v] of building) mapsheet3hexCoords.delete(coords);
});
mapsheet4BuildingCoords.forEach(building => {
for ([coords, v] of building) mapsheet4hexCoords.delete(coords);
});
const gameboard = svg.querySelector('.gameboard'); const gameboard = svg.querySelector('.gameboard');
const grid = svg.querySelector('.grid');
const mapsheet1 = { const mapsheet1 = {
id: 'mapsheet1', id: 'mapsheet1',
@ -666,7 +557,7 @@ findScalar(findMult(sheets)).forEach(([vscalar, row]) => {
return vectorAdd(coords, { q: 1, r: 0, s: -1 }, hscalar); return vectorAdd(coords, { q: 1, r: 0, s: -1 }, hscalar);
} }
ms = drawMapsheet(gameboard, ms, horzMapVect(vertMapVect({ q: 0, r: 0, s: 0 }))); ms = drawMapsheet(grid, ms, horzMapVect(vertMapVect({ q: 0, r: 0, s: 0 })));
}) })
}); });