Remove random props on map resource window object

This commit is contained in:
Catalin Constantin Mititiuc 2024-08-09 20:22:43 -07:00
parent 518693844d
commit a7925db494
5 changed files with 12 additions and 44 deletions

View File

@ -87,8 +87,6 @@ async function buildScenario(req) {
const mapRect = mapResourceEl.getBoundingClientRect(); const mapRect = mapResourceEl.getBoundingClientRect();
console.log('map viewport center', mapRect.width / 2, mapRect.height / 2, mapRect);
const [horz1, horz2] = document.querySelectorAll('.horz'); const [horz1, horz2] = document.querySelectorAll('.horz');
const [vert1, vert2] = document.querySelectorAll('.vert'); const [vert1, vert2] = document.querySelectorAll('.vert');

View File

@ -1,16 +1,8 @@
const svgns = "http://www.w3.org/2000/svg";
const dataset = document.currentScript.dataset;
const svg = document.querySelector('svg'); const svg = document.querySelector('svg');
const gb = svg.querySelector('.gameboard'); const gb = svg.querySelector('.gameboard');
const bg = svg.querySelector('#background'); const bg = svg.querySelector('#background');
const imageMaps = svg.querySelector('#image-maps');
const grid = gb.querySelector('.grid'); const grid = gb.querySelector('.grid');
const dots = gb.querySelector('#dots'); const dots = gb.querySelector('#dots');
const sequence = getComputedStyle(gb).transform.match(/-?\d+\.?\d*/g);
const mtx = new DOMMatrix(sequence || '');
bg.style.transform = mtx;
const bbox = grid.getBBox(); const bbox = grid.getBBox();
setElAttrs(bg, bbox); setElAttrs(bg, bbox);
@ -18,7 +10,7 @@ setElAttrs(dots, bbox)
svg.setAttribute('viewBox', formatForViewBox(calcComputedBboxFor(gb))); svg.setAttribute('viewBox', formatForViewBox(calcComputedBboxFor(gb)));
function setElAttrs(el, attrs) { function setElAttrs(el, attrs) {
for (key in attrs) { for (const key in attrs) {
el.setAttributeNS(null, key, attrs[key]); el.setAttributeNS(null, key, attrs[key]);
} }
} }
@ -40,23 +32,3 @@ function calcComputedBboxFor(el) {
return { x: originPtX, y: originPtY, width: maxPtX - originPtX, height: maxPtY - originPtY }; 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);
}
}

View File

@ -405,14 +405,14 @@ export function start(el) {
//cell2.classList.add('hover'); //cell2.classList.add('hover');
// //
const trooper1 = soldier.createCounter({ dataset: { allegiance: 'attacker', number: 1, squad: 1 }}, 'blazer'); //const trooper1 = soldier.createCounter({ dataset: { allegiance: 'attacker', number: 1, squad: 1 }}, 'blazer');
soldier.place(svg, trooper1, getCell(-3, 9, -6, 0)); //soldier.place(svg, trooper1, getCell(-3, 9, -6, 0));
//
soldier.place( //soldier.place(
svg, // svg,
soldier.createCounter({ dataset: { allegiance: 'defender', number: 1, squad: 1 }}, 'blazer'), // soldier.createCounter({ dataset: { allegiance: 'defender', number: 1, squad: 1 }}, 'blazer'),
getCell(1, -8, 7, 0) // getCell(1, -8, 7, 0)
); //);
// Add some counters in an unoccupied cell // Add some counters in an unoccupied cell
//const countersCell = getCell(-1, 1, 0, 0); //const countersCell = getCell(-1, 1, 0, 0);

View File

@ -91,8 +91,6 @@ export async function build(svg, request) {
}); });
}); });
//if (startLocs) grid.before(svg.ownerDocument.importNode(startLocs, true));
const scenarioGrid = scenario.querySelector('.grid'); const scenarioGrid = scenario.querySelector('.grid');
const scenarioBuildings = scenario.querySelector('.gameboard .buildings'); const scenarioBuildings = scenario.querySelector('.gameboard .buildings');

View File

@ -79,7 +79,7 @@ function radialToScreenCoords({ q, r, s }) {
} }
function drawHexes(el, list, renderText = false) { function drawHexes(el, list, renderText = false) {
for ([key, v] of list) { for (const [key, v] of list) {
const { q, r, s, t } = fromKey(key); const { q, r, s, t } = fromKey(key);
const { x, y } = radialToScreenCoords({ q, r, s }); const { x, y } = radialToScreenCoords({ q, r, s });
@ -146,7 +146,7 @@ function generateRadialCoords(l, { q, r, s, t = 0 } = {}, { left, top, right, bo
function translateCoords(map, translator) { function translateCoords(map, translator) {
const translated = new Map(); const translated = new Map();
for ([key, val] of map) { for (const [key, val] of map) {
const { q, r, s, t } = fromKey(key); const { q, r, s, t } = fromKey(key);
translated.set(toKey(translator({ q, r, s, t })), val); translated.set(toKey(translator({ q, r, s, t })), val);
} }
@ -271,7 +271,7 @@ function drawMapsheet(placementMarker, mapsheet, position) {
({ q: q + position.q, r: r + position.r, s: s + position.s }) ({ q: q + position.q, r: r + position.r, s: s + position.s })
); );
for ([coords, v] of buildingHexes) grid.delete(coords); for (const [coords, v] of buildingHexes) grid.delete(coords);
drawHexes(gridContainer, grid); drawHexes(gridContainer, grid);
(mapsheet.features || []).forEach(feature => { (mapsheet.features || []).forEach(feature => {