diff --git a/public/radial.html b/public/radial.html index 26aa032..7c7e31b 100644 --- a/public/radial.html +++ b/public/radial.html @@ -197,6 +197,22 @@ /* opacity: 0.2 */ } + #tree .trunk { + fill: brown; + } + + #tree .branches { + fill: rgb(141, 202, 141); + stroke: green; + } + + #bush { + fill: rgb(141, 202, 141); + stroke: green; + stroke-width: 0.5px; + transform: scale(0.9); + } + .select-elevation { position: fixed; right: 0; @@ -260,7 +276,7 @@ - + @@ -304,14 +320,6 @@ 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" /> - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/radial.js b/src/radial.js index 281c1b4..33b8408 100644 --- a/src/radial.js +++ b/src/radial.js @@ -327,12 +327,6 @@ mapsheet4BuildingCoords.forEach(building => { const gameboard = svg.querySelector('.gameboard'); let mapsheet1 = { - id: 'mapsheet1', - grid: new Map(mapsheetHexCoords), - buildings: mapsheet1BuildingCoords -}; - -let mapsheet10 = { id: 'mapsheet1', grid: new Map(mapsheetHexCoords), buildings: [ @@ -366,10 +360,19 @@ let mapsheet10 = { grid: new Map(buildingHexes.bld6), position: rotate180({ q: -13, r: 7, s: 6 }) }, + { + type: 'terrain', + grid: generateRadialCoords( + new Map(), + { q: 0, r: 0, s: 0 }, + { left: 3, top: 5, right: 3, bottom: 5 } + ), + position: ({ q, r, s }) => ({ q: q, r: r, s: s }) + } ] }; -let mapsheet20 = { +let mapsheet2 = { id: 'mapsheet2', grid: new Map(mapsheetHexCoords), buildings: [ @@ -411,7 +414,7 @@ let mapsheet20 = { ] }; -let mapsheet30 = { +let mapsheet3 = { id: 'mapsheet3', grid: new Map(mapsheetHexCoords), buildings: [ @@ -453,7 +456,7 @@ let mapsheet30 = { ] }; -let mapsheet40 = { +let mapsheet4 = { id: 'mapsheet4', grid: new Map(mapsheetHexCoords), buildings: [ @@ -476,24 +479,6 @@ function rotate180(coords) { }; } -let mapsheet2 = { - id: 'mapsheet2', - grid: mapsheet2hexCoords, - buildings: mapsheet2BuildingCoords -}; - -let mapsheet3 = { - id: 'mapsheet3', - grid: mapsheet3hexCoords, - buildings: mapsheet3BuildingCoords -}; - -let mapsheet4 = { - id: 'mapsheet4', - grid: mapsheet4hexCoords, - buildings: mapsheet4BuildingCoords -}; - function drawMapsheet(gameboard, { id, grid, buildings }, { q: pq, r: pr, s: ps }) { const container = document.createElementNS(xmlns, 'g'); container.id = id; @@ -603,41 +588,17 @@ function findScalar(arr) { }); } -// mapsheet10 = drawMapsheet(gameboard, mapsheet10, { q: -1, r: 0, s: 1 }); - let sheets = []; -// sheets = [[mapsheet30]]; +// sheets = [[mapsheet1]]; +// sheets = [[mapsheet3]]; +// sheets = [[mapsheet2], [mapsheet3]]; +sheets = [[mapsheet2], [mapsheet1], [mapsheet3]]; -// drawHexes(gameboard, buildingHexes.bld8, 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 }); - -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]]; -// sheets = [[mapsheet20], [mapsheet10], [mapsheet30]]; -// sheets = [[mapsheet10]]; - -sheets = [ - [mapsheet20, mapsheet10], - [mapsheet30, mapsheet40] -]; +// sheets = [ +// [mapsheet2, mapsheet1], +// [mapsheet3, mapsheet4] +// ]; findScalar(findMult(sheets)).forEach(([vscalar, row]) => { const vertMapVect = function(coords) {