diff --git a/public/assets/css/radial.css b/public/assets/css/radial.css index 9bb0126..e4217b7 100644 --- a/public/assets/css/radial.css +++ b/public/assets/css/radial.css @@ -333,3 +333,7 @@ input:checked+label { .part-6 use { fill: lightgreen; } + +.furniture { + fill: violet; +} diff --git a/public/radial.html b/public/radial.html index ee6dd4b..9e96d10 100644 --- a/public/radial.html +++ b/public/radial.html @@ -7,8 +7,8 @@ - - + + @@ -26,84 +26,127 @@ - - - - - + + + + + - + - - - - - - + + + + + + - + - - + + - + - - - - + + + + - + - - - - - + + + + + - + - - + + - + - - - - - - + + + + + + - + - - - - - - - - + + + + + + + + @@ -168,6 +211,364 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/radial.js b/src/radial.js index 4dc90f9..41dbe67 100644 --- a/src/radial.js +++ b/src/radial.js @@ -215,8 +215,8 @@ const buildingHexes = {}; buildingHexes.bld1 = generateRadialCoords( new Map(), { q: 0, r: 0, s: 0 }, - { left: 3, top: 5, right: 3, bottom: 5 }, - 'both' + { left: 2, top: 4, right: 3, bottom: 5 }, + 'left' ); buildingHexes.bld2 = [ @@ -386,7 +386,7 @@ let mapsheet2 = { type: 'building1', elevationLevels: range(0, 1), grid: new Map(buildingHexes.bld1), - position: ({ q, r, s }) => ({ q: q, r: r + 7, s: s - 7 }) + position: ({ q, r, s }) => ({ q: q + 1, r: r + 6, s: s - 7 }) }, { type: 'building2', @@ -435,7 +435,7 @@ let mapsheet3 = { type: 'building1', elevationLevels: range(0, 1), grid: new Map(buildingHexes.bld1), - position: ({ q, r, s }) => ({ q: q - 2, r: r - 5, s: s + 7 }) + position: ({ q, r, s }) => ({ q: q - 1, r: r - 6, s: s + 7 }) }, { type: 'building2', @@ -504,8 +504,8 @@ function rotate180(coords) { }; } -function drawBuildings(mapsheet, container, { q: pq, r: pr, s: ps }) { - return mapsheet.buildings.reduce((acc, building) => { +function drawBuildings(buildings, container, { q: pq, r: pr, s: ps }, furniture) { + return buildings.reduce((acc, building) => { const buildingContainer = document.createElementNS(xmlns, 'g'); buildingContainer.classList.add(`building`); buildingContainer.classList.add(building.type); @@ -540,6 +540,9 @@ function drawBuildings(mapsheet, container, { q: pq, r: pr, s: ps }) { buildingStructure.appendChild(use); } + const furnitureEl = furniture && furniture.querySelector(`.${building.type} .furniture`); + if (furnitureEl) buildingStructure.appendChild(furnitureEl); + return acc; }, new Map()); } @@ -553,7 +556,7 @@ function drawMapsheet(gameboard, mapsheet, position) { gridContainer.classList.add('elevation-0'); container.appendChild(gridContainer); - const buildingHexes = drawBuildings(mapsheet, container, position); + const buildingHexes = drawBuildings(mapsheet.buildings, container, position, document.querySelector(`defs .${mapsheet.id}`)); const grid = translateCoords(mapsheet.grid, ({ q, r, s }) => ({ q: q + position.q, r: r + position.r, s: s + position.s }) @@ -634,14 +637,24 @@ function findScalar(arr) { let sheets = []; // sheets = [[mapsheet1]]; -sheets = [[mapsheet4]]; +// sheets = [[mapsheet2]]; // sheets = [[mapsheet2], [mapsheet3]]; // sheets = [[mapsheet2], [mapsheet1], [mapsheet3]]; -// sheets = [ -// [mapsheet2, mapsheet1], -// [mapsheet3, mapsheet4] -// ]; +sheets = [ + [mapsheet2, mapsheet1], + [mapsheet3, mapsheet4] +]; + +// drawBuildings([{ +// type: 'building2', +// elevationLevels: range(-1, 2), +// grid: new Map(buildingHexes.bld2), +// position: coords => coords +// }], gameboard, { q: 0, r: 0, s: 0 }); + +// const map1building2furniture = document.querySelector('defs .mapsheet2 .building2 .furniture'); +// document.querySelector('.gameboard .building2 .structure').appendChild(map1building2furniture); findScalar(findMult(sheets)).forEach(([vscalar, row]) => { const vertMapVect = function(coords) {