Web Dev Solutions

Catalin Mititiuc

From ccb1cb2c7573364732a277f0c7c770de611aeca3 Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Wed, 10 Jul 2024 22:41:28 -0700 Subject: Allow generic maps to be still generated --- public/assets/images/map4.svg | 30 ++++++++++++++++++++++++++++++ src/index.js | 1 - src/map.js | 8 -------- src/modules/scenario.js | 6 +----- src/modules/scenarios.js | 5 +++++ src/radial.js | 13 +++++++++++++ 6 files changed, 49 insertions(+), 14 deletions(-) create mode 100644 public/assets/images/map4.svg 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 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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), diff --git a/src/map.js b/src/map.js index 5d0bf6a..803608e 100644 --- a/src/map.js +++ b/src/map.js @@ -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); +} -- cgit v1.2.3