diff --git a/public/radial.html b/public/radial.html index 16907fb..1fe2bd6 100644 --- a/public/radial.html +++ b/public/radial.html @@ -260,7 +260,7 @@ - + @@ -278,8 +278,7 @@ - + - - - - - - + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + diff --git a/src/radial.js b/src/radial.js index 5a8ae5a..9978b14 100644 --- a/src/radial.js +++ b/src/radial.js @@ -77,7 +77,7 @@ function radialToScreenCoords({ q, r, s }) { x = Math.abs(q) + Math.abs(s); x = (q > s ? -1 : 1) * x * horzSpacing; - y = r * vertSpacing; + const y = r * vertSpacing; return { x, y }; } @@ -408,7 +408,7 @@ let mapsheet30 = { { type: 'building4', grid: new Map(buildingHexes.bld4), - position: ({ q, r, s }) => ({ q: q - 9, r: r - 6, s: s + 15 }) + position: reflectR({ q: -10, r: -5, s: 15 }) }, { type: 'building5', @@ -418,7 +418,7 @@ let mapsheet30 = { { type: 'building6', grid: new Map(buildingHexes.bld6), - position: reflectR({ q: 1, r: 6, s: -7 }) + position: reflectR({ q: 0, r: 6, s: -6 }) }, { type: 'building7', @@ -431,10 +431,10 @@ let mapsheet30 = { function reflectR(coords) { return function ({ q, r, s }) { return { - q: -s + coords.q, + q: -q + coords.q, r: -r + coords.r, - s: -q + coords.s, - transform: "scale(1 -1)" + s: -s + coords.s, + transform: "rotate(180)" }; }; } @@ -487,11 +487,20 @@ function drawMapsheet(gameboard, { id, grid, buildings }, { q: pq, r: pr, s: ps const buildingTemplate = document.querySelector(`defs #${building.type}`); const origin = building.position({ q: 0, r: 0, s: 0 }); + const { x: rx, y: ry } = radialToScreenCoords(origin); const { x, y } = radialToScreenCoords({ q: origin.q + pq, r: origin.r + pr, s: origin.s + ps }); + console.log(x, y); + const buildingStructure = document.createElementNS(xmlns, 'g'); buildingStructure.classList.add('structure'); - buildingStructure.setAttributeNS(null, 'transform', `translate(${x}, ${y}) ${origin.transform ? origin.transform : ''}`); + + if (origin.transform) { + buildingStructure.setAttributeNS(null, 'transform', `rotate(180 ${x}, ${y}) translate(${x}, ${y})`); + } else { + buildingStructure.setAttributeNS(null, 'transform', `translate(${x}, ${y})`); + } + buildingContainer.appendChild(buildingStructure); for (let child of buildingTemplate.children) { @@ -568,15 +577,34 @@ function findScalar(arr) { // mapsheet10 = drawMapsheet(gameboard, mapsheet10, { q: -1, r: 0, s: 1 }); -// const sheets = [[mapsheet10]]; +let sheets = []; -// drawHexes(gameboard, buildingHexes.bld7, true); +// sheets = [[mapsheet30]]; -// drawHexes(addGroup(gameboard, 'part-1'), bld8, true); +// drawHexes(gameboard, buildingHexes.bld4, true); +// drawHexes(gameboard, translateCoords(buildingHexes.bld4, reflectR({ q: -9, r: -6, s: 15 })), true); +// drawHexes(gameboard, translateCoords(buildingHexes.bld4, reflectR({ q: 0, r: 0, s: 0 })), true); -const sheets = [[mapsheet20], [mapsheet30]]; -// const sheets = [[mapsheet2], [mapsheet10], [mapsheet3]]; -// const sheets = [[mapsheet4]]; +const buildingTemplate = document.querySelector(`defs #building4`); +const { x, y } = radialToScreenCoords({ q: 0, r: 0, s: 0 }); + +const buildingStructure = document.createElementNS(xmlns, 'g'); +buildingStructure.classList.add('structure'); +buildingStructure.classList.add('building'); +buildingStructure.setAttributeNS(null, 'transform', `translate(${x}, ${y}) rotate(180)`); +// gameboard.appendChild(buildingStructure); + +for (let child of buildingTemplate.children) { + const use = document.createElementNS(xmlns, 'use'); + use.setAttributeNS(null, 'href', `#${child.id}`); + child.classList.forEach(className => use.classList.add(className)); + buildingStructure.appendChild(use); +} + + +sheets = [[mapsheet20], [mapsheet30]]; +// const sheets = [[mapsheet20], [mapsheet10], [mapsheet30]]; +// const sheets = [[mapsheet30]]; // const sheets = [ // [mapsheet2, mapsheet1],