| 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-04-28 16:18:34 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-04-28 16:18:34 -0700 |
| commit | 1d5d5a2cda8ea462f1ed60757b8d2622522486b8 (patch) | |
| tree | 94855b47648c128b3b35c8c1ee455cfa69c2a15b | |
| parent | 0c1f7e2fde7ed6e05271c8aeb8d4babbf4f2188d (diff) | |
Add a map.js
| -rw-r--r-- | .gitignore | 1 | ||||
| -rw-r--r-- | dev-server.cjs | 3 | ||||
| -rw-r--r-- | src/map.js | 58 |
3 files changed, 61 insertions, 1 deletions
@@ -2,3 +2,4 @@ *.tgz dist node_modules +build diff --git a/dev-server.cjs b/dev-server.cjs index 4406514..2e7c2ec 100644 --- a/dev-server.cjs +++ b/dev-server.cjs @@ -2,7 +2,8 @@ const { createServer } = require('esbuild-server'); const server = createServer( { bundle: true, - entryPoints: ['src/index.js'] + entryPoints: ['src/index.js', 'src/map.js'], + outdir: 'build' }, { static: 'public', diff --git a/src/map.js b/src/map.js new file mode 100644 index 0000000..7a04626 --- /dev/null +++ b/src/map.js @@ -0,0 +1,58 @@ +const svgns = "http://www.w3.org/2000/svg"; +const svg = document.querySelector('svg'); +const cellTemplate = svg.querySelector('#hex'); +const gb = svg.querySelector('.gameboard'); +const bg = svg.querySelector('#background'); +const imageMaps = svg.querySelector('#image-maps'); +const grid = gb.querySelector('.grid'); +const dataset = document.currentScript.dataset; + +if ('cols' in dataset && 'rows' in dataset) { + createCells(grid, dataset, cellTemplate.id); + setElAttrs(bg, calcComputedBboxFor(imageMaps)); + svg.setAttribute('viewBox', formatForViewBox(calcComputedBboxFor(gb))); +} + +function setElAttrs(el, attrs) { + for (key in attrs) { + el.setAttributeNS(null, key, attrs[key]); + } +} + +function formatForViewBox({ x, y, width, height }) { + return `${x} ${y} ${width} ${height}`; +} + +function calcComputedBboxFor(el) { + const { x, y, width, height } = el.getBBox(); + const originPt = new DOMPoint(x, y); + const maxPt = new DOMPoint(width + x, height + y); + + const sequence = getComputedStyle(el).transform.match(/-?\d+\.?\d*/g); + const mtx = new DOMMatrix(sequence || ''); + + const { x: originPtX, y: originPtY } = originPt.matrixTransform(mtx); + const { x: maxPtX, y: maxPtY } = maxPt.matrixTransform(mtx); + + return { x: originPtX, y: originPtY, width: maxPtX - originPtX, height: maxPtY - originPtY }; +} + +function createCells(container, { cols, rows }, templateId) { + for (let rowNum = 0; rowNum < +rows; rowNum++) { + const row = document.createElementNS(svgns, 'g'); + row.dataset.y = rowNum; + + for (let colNum = 0; colNum < +cols; colNum++) { + const cell = document.createElementNS(svgns, 'g'); + cell.dataset.x = colNum; + + const cellShape = document.createElementNS(svgns, 'use'); + cellShape.setAttribute('href', `#${templateId}`); + + cell.appendChild(cellShape); + row.appendChild(cell); + } + + container.appendChild(row); + } +} |