| index : btroops | |
| Virtual board game-aid for BattleTroops, an infantry combat simulator wargame published by FASA in 1989. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2024-07-10 22:41:28 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-07-10 22:41:28 -0700 |
| commit | ccb1cb2c7573364732a277f0c7c770de611aeca3 (patch) | |
| tree | ebbb28f5902a71bbd3028a259ce002988d3b579c | |
| parent | 9c200873d6f013fa1e8eb9f00441404cca9acc1a (diff) | |
Allow generic maps to be still generated
| -rw-r--r-- | public/assets/images/map4.svg | 30 | ||||
| -rw-r--r-- | src/index.js | 1 | ||||
| -rw-r--r-- | src/map.js | 8 | ||||
| -rw-r--r-- | src/modules/scenario.js | 6 | ||||
| -rw-r--r-- | src/modules/scenarios.js | 5 | ||||
| -rw-r--r-- | src/radial.js | 13 |
6 files changed, 49 insertions, 14 deletions
diff --git a/public/assets/images/map4.svg b/public/assets/images/map4.svg new file mode 100644 index 0000000..3ce2dd9 --- /dev/null +++ b/public/assets/images/map4.svg @@ -0,0 +1,30 @@ +<?xml version="1.0" standalone="no"?> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 200 300"> + <g class="gameboard"> + <g class="grid"></g> + + <g class="start-locations" data-attacker-name="liao" data-defender-name="davion"> + <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"/> + <use class="troop-number" href="counters.svg#number-1"/> + <use class="squad-number" href="counters.svg#number-1"/> + </g> + </g> + </g> + + <g data-edge="south" style="--i: 53"> + <g data-x="13"> + <g class="counter" data-allegiance="defender" data-number="1"> + <use class="primary-weapon" href="#blazer"/> + <use class="troop-number" href="counters.svg#number-1"/> + <use class="squad-number" href="counters.svg#number-1"/> + </g> + </g> + </g> + </g> + </g> + + <script data-left="2" data-right="2" data-top="2" data-bottom="2"></script> +</svg> diff --git a/src/index.js b/src/index.js index 84f8dd4..2da4f2f 100644 --- a/src/index.js +++ b/src/index.js @@ -18,7 +18,6 @@ const mapPlaceholder = document.querySelector('.map-placeholder'), distanceOutput = document.getElementById('status'), proneToggle = document.getElementById('toggle-prone-counter'), contentVisToggleEl = document.querySelector('#edge-inputs input[type="checkbox"].visible'), - // fileName = localStorage.getItem('map') || 'scenario-side_show', fileName = localStorage.getItem('map') || 'scenario-side_show', map = scenarios[fileName]?.hashed || `assets/images/${fileName}.svg`, scenarioRequest = requestResource(map), @@ -7,20 +7,12 @@ const imageMaps = svg.querySelector('#image-maps'); const grid = gb.querySelector('.grid'); const dots = gb.querySelector('#dots'); -if ('cols' in dataset && 'rows' in dataset) { - const cellTemplate = svg.querySelector('#hex'); - - createCells(grid, dataset, cellTemplate.id); -} - const sequence = getComputedStyle(gb).transform.match(/-?\d+\.?\d*/g); const mtx = new DOMMatrix(sequence || ''); bg.style.transform = mtx; const bbox = grid.getBBox(); -bbox.height += 5; - setElAttrs(bg, bbox); setElAttrs(dots, bbox) svg.setAttribute('viewBox', formatForViewBox(calcComputedBboxFor(gb))); diff --git a/src/modules/scenario.js b/src/modules/scenario.js index 039801d..6ab66db 100644 --- a/src/modules/scenario.js +++ b/src/modules/scenario.js @@ -15,11 +15,7 @@ async function loadScript(scenario, svg, script) { }; const dataset = scenario.querySelector('script')?.dataset || {}; - - if ('cols' in dataset && 'rows' in dataset) { - scriptEl.dataset.rows = dataset.rows; - scriptEl.dataset.cols = dataset.cols; - } + Object.entries(dataset).forEach(([k, v]) => scriptEl.dataset[k] = v); scriptEl.setAttributeNS(null, 'href', `../../${script}.js`); svg.append(scriptEl); diff --git a/src/modules/scenarios.js b/src/modules/scenarios.js index 2a4af26..a1b0052 100644 --- a/src/modules/scenarios.js +++ b/src/modules/scenarios.js @@ -1,6 +1,7 @@ import sideShow from './assets/images/scenario-side_show.svg'; import dragonHunting from './assets/images/scenario-dragon_hunting.svg'; import raceAgainstTime from './assets/images/scenario-race_against_time.svg'; +import map4 from './assets/images/map4.svg'; export const scenarios = { 'scenario-side_show': { @@ -15,4 +16,8 @@ export const scenarios = { hashed: raceAgainstTime, title: 'BattleTroops Scenario 3: Race Against Time', }, + 'map4': { + hashed: map4, + title: 'Test map' + } } diff --git a/src/radial.js b/src/radial.js index f2ed5fb..c0fbdd6 100644 --- a/src/radial.js +++ b/src/radial.js @@ -646,3 +646,16 @@ function addGroup(container, className) { container.appendChild(g); return g; } + +const { left, right, top, bottom } = document.currentScript.dataset; + +if (left && right && top && bottom) { + const map = generateRadialCoords( + new Map(), + { q: 0, r: 0, s: 0 }, + { left: +left, top: +top, right: +right, bottom: +bottom }, + 'both' + ); + + drawHexes(addGroup(grid, 'elevation-0'), map); +} |
