Web Dev Solutions

Catalin Mititiuc

From 5465a0741a075de714053e7196adf8492272877c Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Fri, 12 Jul 2024 18:27:18 -0700 Subject: Build scenarios from data in SVG files --- public/assets/css/radial.css | 15 +- public/assets/images/map4.svg | 52 +- public/assets/images/mapsheets.svg | 797 +++++---------------- public/assets/images/radial.svg | 2 +- public/assets/images/scenario-dragon_hunting.svg | 10 +- .../assets/images/scenario-race_against_time.svg | 6 +- public/assets/images/scenario-side_show.svg | 8 +- public/assets/images/scenario_template.svg | 1 + src/radial.js | 88 ++- test/integration/fixtures/scenario.svg | 2 +- test/integration/helpers.cjs | 2 +- 11 files changed, 324 insertions(+), 659 deletions(-) diff --git a/public/assets/css/radial.css b/public/assets/css/radial.css index cdf6231..5a6ef41 100644 --- a/public/assets/css/radial.css +++ b/public/assets/css/radial.css @@ -36,9 +36,6 @@ use[href="#hex"] { .terrain .floor { display: inline; opacity: 1; - /* fill: #ffffff; */ - /* fill-opacity: 0.5; */ - /* fill: url(#asterisk); */ stroke: none; } @@ -67,6 +64,10 @@ use[href="#hex"] { display: inline; } +.terrain use.floor { + fill: white; +} + [data-view-elevation="-1"] [class*="elevation"] { display: none; } @@ -84,10 +85,6 @@ use[href="#hex"] { display: none; } -[data-view-elevation="0"] .building .elevation-0 { - display: inline; -} - [data-view-elevation="-1"] .building use.floor { display: none; } @@ -97,6 +94,10 @@ use[href="#hex"] { display: inline; } +[data-view-elevation="0"] .building .elevation-0 { + display: inline; +} + [data-view-elevation="0"] .building use.floor.elevation-0 { fill: white; } diff --git a/public/assets/images/map4.svg b/public/assets/images/map4.svg index 3ce2dd9..ec57ad4 100644 --- a/public/assets/images/map4.svg +++ b/public/assets/images/map4.svg @@ -1,7 +1,55 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 1 + + + + - + + + + + @@ -17,7 +65,7 @@ - + diff --git a/public/assets/images/mapsheets.svg b/public/assets/images/mapsheets.svg index b01999c..52c024c 100644 --- a/public/assets/images/mapsheets.svg +++ b/public/assets/images/mapsheets.svg @@ -26,134 +26,192 @@ - - - - - - - - + + + + + + + + + + + + + + + + + + + + + - - - - - - - - + + + + + + + + + + + + + + + + - - - - - - - - + + + + + + + + + + + + + - - - - - - - - + + + + + + + + + + + + + - - - - - - - - + + + + + + + + + + + + + - - - - - - - - + + + + + + + + + + + + + - - - - - - - - + + + + + + + + + + + + + + + + - - - - - - - - + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -173,7 +231,12 @@ - + + + + + + @@ -191,7 +254,8 @@ 1 - + + @@ -205,7 +269,9 @@ 2 - + + + @@ -223,7 +289,8 @@ 1 - + + @@ -237,7 +304,7 @@ - + @@ -254,7 +321,7 @@ 1 - + @@ -273,7 +340,7 @@ 1 - + @@ -288,7 +355,7 @@ 1 - + @@ -307,7 +374,7 @@ 1 - + @@ -326,7 +393,7 @@ 3 - + @@ -339,7 +406,7 @@ 1 - + @@ -372,7 +439,7 @@ - + @@ -389,7 +456,7 @@ 1 - + @@ -409,7 +476,7 @@ 3 - + @@ -423,7 +490,7 @@ 1 - + @@ -442,7 +509,7 @@ 1 - + @@ -461,7 +528,7 @@ 2 - + @@ -476,7 +543,7 @@ 1 - + @@ -509,7 +576,7 @@ - + @@ -554,474 +621,4 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1 - - - - - - - - - - - - - - 2 - - - - - - - - - - - - - - - - - - 1 - - - - - - - - - - - - 1 - - - - - - - - - - - - - - - - - - - 1 - - - - - - - - - - - - - - - - - - 1 - - - - - - - - - - - - - - 1 - - - - - - - - - - - - - - - - - - 1 - - - - - - - - - - - - - - - - - - 3 - - - - - - - - - - - - 1 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 3 - - - - - - - - - - - - - - - - - - - 1 - - - - - - - - - - - - - - - - - - - - - - 3 - - - - - - - - - - - - - 1 - - - - - - - - - - - - - - - - - - 1 - - - - - - - - - - - - - - - - - - 2 - - - - - - - - - - - - - - 1 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 2 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 2 - - diff --git a/public/assets/images/radial.svg b/public/assets/images/radial.svg index 537bc6d..d3a4100 100644 --- a/public/assets/images/radial.svg +++ b/public/assets/images/radial.svg @@ -1,4 +1,4 @@ - + diff --git a/public/assets/images/scenario-dragon_hunting.svg b/public/assets/images/scenario-dragon_hunting.svg index 8a2186e..5298b74 100644 --- a/public/assets/images/scenario-dragon_hunting.svg +++ b/public/assets/images/scenario-dragon_hunting.svg @@ -1,10 +1,12 @@ - + - - - + + + + + diff --git a/public/assets/images/scenario-race_against_time.svg b/public/assets/images/scenario-race_against_time.svg index c663003..2aef61c 100644 --- a/public/assets/images/scenario-race_against_time.svg +++ b/public/assets/images/scenario-race_against_time.svg @@ -1,8 +1,10 @@ - + - + + + diff --git a/public/assets/images/scenario-side_show.svg b/public/assets/images/scenario-side_show.svg index c5a9c78..1769146 100644 --- a/public/assets/images/scenario-side_show.svg +++ b/public/assets/images/scenario-side_show.svg @@ -1,9 +1,11 @@ - + - - + + + + diff --git a/public/assets/images/scenario_template.svg b/public/assets/images/scenario_template.svg index 48c6dfc..01fb328 100644 --- a/public/assets/images/scenario_template.svg +++ b/public/assets/images/scenario_template.svg @@ -2,6 +2,7 @@ + diff --git a/src/radial.js b/src/radial.js index bf02933..6ad04b0 100644 --- a/src/radial.js +++ b/src/radial.js @@ -438,7 +438,7 @@ function drawBuildings(buildings, container, { q: pq, r: pr, s: ps }, features) acc = new Map([...acc, ...buildingGrid]); }); - for (let child of buildingTemplate.children) { + for (let child of buildingTemplate.querySelector('.structure').children) { const use = document.createElementNS(xmlns, 'use'); use.setAttributeNS(null, 'href', `#${child.id}`); child.classList.forEach(className => use.classList.add(className)); @@ -559,27 +559,29 @@ function findMult(arr) { }).map(([m, v]) => [m > -1 ? m + 1 : m, v]); } -function findScalar(arr) { +function findScalar(arr, width, height) { let pos; let neg; if (arr.length % 2) { - pos = -13; - neg = -13; + pos = -height; + neg = -height; } else { - pos = -7; - neg = -6; + const vert = Math.floor(height / 2); + pos = -vert - height % 2; + neg = -vert; } return arr.map(([mult, v]) => { let hpos, hneg; if (v.length % 2) { - hpos = 33; - hneg = 33; + hpos = width; + hneg = width; } else { - hpos = 16; - hneg = 17; + const horz = Math.floor(width / 2); + hpos = horz; + hneg = horz + width % 2; } const row = v.map(([hmult, hv]) => [hmult < 0 ? hmult * hneg : hmult * hpos, hv]); @@ -594,38 +596,48 @@ const mapsheets = [mapsheet1, mapsheet2, mapsheet3, mapsheet4].reduce((acc, ms) let sheets = []; -const msGrps = [...document.querySelectorAll('.grid .mapsheets > *')].map(g => [...g.querySelectorAll('[class^="mapsheet"]')]); +const mapsheetsContainer = document.querySelector('.grid .mapsheets'); +let { width, height } = mapsheetsContainer.dataset; +width = width ? +width - 1 : 33; +height = height ? +height : 13; + +const mapRect = { + left: width ? Math.floor(+width / 2) : 17, + right: width ? Math.floor(+width / 2) + +width % 2 : 17, + top: height ? height - 1: 13, + bottom: height ? height : 14 +}; + +const msGrps = [...document.querySelectorAll('.grid .mapsheets > *')].map(g => + [...g.querySelectorAll('[class^="mapsheet"]')] +); sheets = msGrps.map(msG => { return msG.map(mapsheetEl => { const mapsheetDef = document.querySelector(`defs #${mapsheetEl.getAttributeNS(null, 'class')}`); - const buildings = mapsheetDef.querySelectorAll('[class^="building"]'); + const buildings = mapsheetDef.children; + const offset = height % 2 ? 'left' : 'right'; const mapsheet = { id: mapsheetDef.id, - grid: generateRadialCoords( - new Map(), - { q: 0, r: 0, s: 0 }, - 'left' in mapsheetDef.dataset ? toRect(mapsheetDef.dataset) : { left: 17, top: 13, right: 17, bottom: 14 }, - 'left' - ), + grid: generateRadialCoords(new Map(), { q: 0, r: 0, s: 0 }, mapRect, offset), buildings: [...buildings].map(bld => { const bldId = bld.getAttributeNS(null, 'class'); const bldDef = document.querySelector(`defs #${bldId}`); + const grid = [...bldDef.querySelectorAll('.footprint g')].reduce((acc, coordEl) => { + acc = generateRadialCoords(acc, toRad(coordEl.dataset), toRect(coordEl.dataset), coordEl.dataset.offset); + return acc; + }, new Map()); + + const { q: dq, r: dr, s: ds } = toRad(bld.dataset); + const position = bld.dataset.rotate ? rotate180({ q: +dq, r: +dr, s: +ds }) : ({ q, r, s }) => ({ q: q + +dq, r: r + +dr, s: s + +ds }); + return { type: bld.getAttributeNS(null, 'class'), - elevationLevels: range(0, 1), - grid: generateRadialCoords( - new Map(), - { q: 0, r: 0, s: 0 }, - toRect(bldDef.dataset), - 'left' - ), - position: ({ q, r, s }) => { - const { q: dq, r: dr, s: ds } = toRad(bld.dataset); - return { q: q + +dq, r: r + +dr, s: s + +ds }; - } + elevationLevels: bld.dataset.el ? range(...bld.dataset.el?.split(',').map(n => +n)) : range(0, 1), + grid: grid, + position: position } }) } @@ -634,7 +646,7 @@ sheets = msGrps.map(msG => { }); }); -sheets = [] +// sheets = [] const scenarioMapsheets = document.querySelectorAll('.grid [class^="mapsheet"]'); @@ -671,7 +683,7 @@ document.querySelectorAll('use[href^="#building"]').forEach(el => el.remove()); let finalGrid = new Map(); -findScalar(findMult(sheets)).forEach(([vscalar, row]) => { +findScalar(findMult(sheets), +width + 1, +height).forEach(([vscalar, row]) => { const vertMapVect = function (coords) { return vectorAdd(coords, { q: 1, r: -2, s: 1 }, vscalar); } @@ -714,12 +726,12 @@ function toRad({ q, r, s }) { return { q: +q, r: +r, s: +s }; } -const mapsheetEls = document.querySelectorAll('.grid .mapsheet'); +// const mapsheetEls = document.querySelectorAll('.grid .mapsheet'); -drawHexes(addGroup(grid, 'elevation-0'), translateCoords(generateRadialCoords( - new Map(), - { q: 5, r: -4, s: -1 }, - { left: 2, top: 4, right: 3, bottom: 5 } - , 'both' -), ({ q, r, s }) => ({ q, r, s })), true); +// drawHexes(addGroup(grid, 'elevation-0'), translateCoords(generateRadialCoords( +// new Map(), +// { q: 5, r: -4, s: -1 }, +// { left: 2, top: 4, right: 3, bottom: 5 } +// , 'both' +// ), ({ q, r, s }) => ({ q, r, s })), true); // ), ({ q, r, s }) => ({ q: -r, r: -s, s: -q })), true); diff --git a/test/integration/fixtures/scenario.svg b/test/integration/fixtures/scenario.svg index 522c431..d05052e 100644 --- a/test/integration/fixtures/scenario.svg +++ b/test/integration/fixtures/scenario.svg @@ -1,4 +1,4 @@ - + diff --git a/test/integration/helpers.cjs b/test/integration/helpers.cjs index dc03aba..62c2d27 100644 --- a/test/integration/helpers.cjs +++ b/test/integration/helpers.cjs @@ -88,5 +88,5 @@ global.selectCounter = function (counter) { } global.svgDocument = function (document) { - return `\n` + document.querySelector('svg').outerHTML; + return `\n` + document.querySelector('svg').outerHTML; } -- cgit v1.2.3