diff --git a/public/radial.html b/public/radial.html index 1fe2bd6..20b4bfb 100644 --- a/public/radial.html +++ b/public/radial.html @@ -259,8 +259,8 @@ - - + + @@ -299,11 +299,19 @@ + d="m -21.650003,3e-6 h -8.659995 m 34.640005,-37.5 v 45 m 0,30 v -15 m -8.66,30.000001 V 37.500003 m 34.64,0 h -60.620005 m 60.620005,15 v -90 h -60.620005 v 90 z" /> + d="m -21.650003,3e-6 h -8.659995 m 34.640005,-37.5 v 45 m 0,30 v -15 m -8.66,30.000001 V 37.500003 m 34.64,0 h -60.620005 m 60.620005,15 v -90 h -60.620005 v 90 z" /> + + ({ q: q + 7, r: r + 7, s: s - 14 }) - } + }, + { + type: 'building3', + grid: new Map(buildingHexes.bld3), + position: ({ q, r, s }) => ({ q: q - 6, r: r - 6, s: s + 12 }) + }, + { + type: 'building4', + grid: generateRadialCoords( + new Map(), + { q: 0, r: 0, s: 0 }, + { left: 2, top: 4, right: 3, bottom: 5 }, + 'right' + ), + position: ({ q, r, s }) => ({ + q: q + 15, + r: r - 7, + s: s - 8, + transform: (x, y) => `translate(${x + horzSpacing}, ${y})` + }) + }, + { + type: 'building6', + grid: new Map(buildingHexes.bld6), + position: rotate180({ q: -13, r: 7, s: 6 }) + }, ] }; @@ -398,17 +423,17 @@ let mapsheet30 = { { type: 'building2', grid: new Map(buildingHexes.bld2), - position: reflectR({ q: 9, r: -6, s: -3 }) + position: rotate180({ q: 9, r: -6, s: -3 }) }, { type: 'building3', grid: new Map(buildingHexes.bld3), - position: reflectR({ q: 17, r: -7, s: -10 }) + position: rotate180({ q: 17, r: -7, s: -10 }) }, { type: 'building4', grid: new Map(buildingHexes.bld4), - position: reflectR({ q: -10, r: -5, s: 15 }) + position: rotate180({ q: -10, r: -5, s: 15 }) }, { type: 'building5', @@ -418,7 +443,7 @@ let mapsheet30 = { { type: 'building6', grid: new Map(buildingHexes.bld6), - position: reflectR({ q: 0, r: 6, s: -6 }) + position: rotate180({ q: 0, r: 6, s: -6 }) }, { type: 'building7', @@ -428,13 +453,13 @@ let mapsheet30 = { ] }; -function reflectR(coords) { +function rotate180(coords) { return function ({ q, r, s }) { return { q: -q + coords.q, r: -r + coords.r, s: -s + coords.s, - transform: "rotate(180)" + transform: (x, y) => `rotate(180 ${x}, ${y}) translate(${x}, ${y})` }; }; } @@ -487,20 +512,11 @@ 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 transform = origin.transform || ((x, y) => `translate(${x}, ${y})`); const buildingStructure = document.createElementNS(xmlns, 'g'); buildingStructure.classList.add('structure'); - - if (origin.transform) { - buildingStructure.setAttributeNS(null, 'transform', `rotate(180 ${x}, ${y}) translate(${x}, ${y})`); - } else { - buildingStructure.setAttributeNS(null, 'transform', `translate(${x}, ${y})`); - } - + buildingStructure.setAttributeNS(null, 'transform', transform(x, y)); buildingContainer.appendChild(buildingStructure); for (let child of buildingTemplate.children) { @@ -582,8 +598,8 @@ let sheets = []; // sheets = [[mapsheet30]]; // 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); +// drawHexes(gameboard, translateCoords(buildingHexes.bld4, rotate180({ q: -9, r: -6, s: 15 })), true); +// drawHexes(gameboard, translateCoords(buildingHexes.bld4, rotate180({ q: 0, r: 0, s: 0 })), true); const buildingTemplate = document.querySelector(`defs #building4`); const { x, y } = radialToScreenCoords({ q: 0, r: 0, s: 0 }); @@ -602,9 +618,9 @@ for (let child of buildingTemplate.children) { } -sheets = [[mapsheet20], [mapsheet30]]; -// const sheets = [[mapsheet20], [mapsheet10], [mapsheet30]]; -// const sheets = [[mapsheet30]]; +// sheets = [[mapsheet20], [mapsheet30]]; +// sheets = [[mapsheet20], [mapsheet10], [mapsheet30]]; +sheets = [[mapsheet10]]; // const sheets = [ // [mapsheet2, mapsheet1], @@ -621,7 +637,6 @@ findScalar(findMult(sheets)).forEach(([vscalar, row]) => { return vectorAdd(coords, { q: 1, r: 0, s: -1 }, hscalar); } - console.log(horzMapVect(vertMapVect({ q: 0, r: 0, s: 0 }))); ms = drawMapsheet(gameboard, ms, horzMapVect(vertMapVect({ q: 0, r: 0, s: 0 }))); }) });