Web Dev Solutions

Catalin Mititiuc

From 5e05d00197bc617128a596c881e40c117c90055e Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Mon, 17 Jun 2024 16:09:23 -0700 Subject: Render different elevation level hex grids --- public/radial.html | 25 +++++++++++++++++++-- src/radial.js | 66 +++++++++++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 83 insertions(+), 8 deletions(-) diff --git a/public/radial.html b/public/radial.html index 8ee5ac9..9dbee63 100644 --- a/public/radial.html +++ b/public/radial.html @@ -3,13 +3,14 @@ - + diff --git a/src/radial.js b/src/radial.js index add5fe3..1b015e9 100644 --- a/src/radial.js +++ b/src/radial.js @@ -140,16 +140,45 @@ function drawHexes(el, list) { }); } -const grid = generateRadialCoordsRect({ rows: 10, columns: 14 }, { q: 9, r: -5, s: -4 }); +const grid = generateRadialCoordsRect({ rows: 25, columns: 33 }, { q: 22, r: -12, s: -10 }); const building1 = generateRadialCoordsRect({ rows: 5, columns: 3, equal: false }, { q: 7, r: -4, s: -3 }); const building2 = generateRadialCoordsRect({ rows: 4, columns: 3, odd: true }, { q: 0, r: -4, s: 4 }); const building3 = generateRadialCoords(new Map(), { q: -1, r: 2, s: -1 }, 1); -building1.forEach(coords => grid.delete(coords)); -building2.forEach(coords => grid.delete(coords)); -building3.forEach(coords => grid.delete(coords)); - -drawHexes(svg, grid); +// generateRadialCoordsRect({ rows: 4, columns: 8, equal: false }, { q: 18, r: -8, s: -10 }).forEach(coords => grid.delete(coords)); +// generateRadialCoordsRect({ rows: 8, columns: 2, equal: false }, { q: 9, r: -10, s: 1 }).forEach(coords => grid.delete(coords)); +// generateRadialCoordsRect({ rows: 6, columns: 13, odd: true }, { q: 2, r: -8, s: 6 }).forEach(coords => grid.delete(coords)); +// generateRadialCoordsRect({ rows: 1, columns: 10 }, { q: -1, r: -9, s: 10 }).forEach(coords => grid.delete(coords)); +// generateRadialCoordsRect({ rows: 1, columns: 2 }, { q: -1, r: -2, s: 3 }).forEach(coords => grid.delete(coords)); +// generateRadialCoordsRect({ rows: 1, columns: 6 }, { q: -8, r: -2, s: 10 }).forEach(coords => grid.delete(coords)); +// generateRadialCoordsRect({ rows: 8, columns: 4, odd: true }, { q: 4, r: 3, s: -7 }).forEach(coords => grid.delete(coords)); +// generateRadialCoordsRect({ rows: 8, columns: 4, odd: true }, { q: -5, r: 3, s: 2 }).forEach(coords => grid.delete(coords)); +// generateRadialCoordsRect({ rows: 6, columns: 3, equal: false }, { q: -12, r: 3, s: 9 }).forEach(coords => grid.delete(coords)); +// generateRadialCoordsRect({ rows: 8, columns: 4 }, { q: 10, r: 3, s: -13 }).forEach(coords => grid.delete(coords)); +// generateRadialCoordsRect({ rows: 3, columns: 1 }, { q: 9, r: 7, s: -16 }).forEach(coords => grid.delete(coords)); +// generateRadialCoordsRect({ rows: 5, columns: 1, odd: true }, { q: 5, r: 6, s: -11 }).forEach(coords => grid.delete(coords)); + +const buildingCoords = [ + generateRadialCoordsRect({ rows: 4, columns: 8, equal: false }, { q: 18, r: -8, s: -10 }), + generateRadialCoordsRect({ rows: 8, columns: 2, equal: false }, { q: 9, r: -10, s: 1 }), + generateRadialCoordsRect({ rows: 6, columns: 13, odd: true }, { q: 2, r: -8, s: 6 }), + generateRadialCoordsRect({ rows: 1, columns: 10 }, { q: -1, r: -9, s: 10 }), + generateRadialCoordsRect({ rows: 1, columns: 2 }, { q: -1, r: -2, s: 3 }), + generateRadialCoordsRect({ rows: 1, columns: 6 }, { q: -8, r: -2, s: 10 }), + generateRadialCoordsRect({ rows: 8, columns: 4, odd: true }, { q: 4, r: 3, s: -7 }), + generateRadialCoordsRect({ rows: 8, columns: 4, odd: true }, { q: -5, r: 3, s: 2 }), + generateRadialCoordsRect({ rows: 6, columns: 3, equal: false }, { q: -12, r: 3, s: 9 }), + generateRadialCoordsRect({ rows: 8, columns: 4 }, { q: 10, r: 3, s: -13 }), + generateRadialCoordsRect({ rows: 3, columns: 1 }, { q: 9, r: 7, s: -16 }), + generateRadialCoordsRect({ rows: 5, columns: 1, odd: true }, { q: 5, r: 6, s: -11 }), +] + +buildingCoords.forEach(building => building.forEach(coords => grid.delete(coords))); + +// building2.forEach(coords => grid.delete(coords)); +// building3.forEach(coords => grid.delete(coords)); + +// drawHexes(svg, generateRadialCoords(new Map(), { q: 0, r: 0, s: 0 }, 16)); // const rectEven = generateRadialCoordsRect({ rows: 2, columns: 2 }, { q: 9, r: -5, s: -4 }); // const rectOdd = generateRadialCoordsRect({ rows: 2, columns: 2, odd: true }, { q: 8, r: -2, s: -6 }); @@ -162,3 +191,28 @@ drawHexes(svg, grid); // drawHexes(svg, rectOddUnevenCols); // drawHexes(svg, generateRadialCoordsRect({ rows: 7, columns: 6, odd: true, equal: false }, { q: 5, r: -5, s: 0 })); + +const buildings = document.createElementNS(xmlns, 'g'); +buildings.classList.add('buildings'); + +const bldElevationBasement = document.createElementNS(xmlns, 'g'); +bldElevationBasement.classList.add('elevation-basement'); +buildingCoords.forEach(building => drawHexes(bldElevationBasement, building)); + +const bldElevation1 = document.createElementNS(xmlns, 'g'); +bldElevation1.classList.add('elevation-1'); +buildingCoords.forEach(building => drawHexes(bldElevation1, building)); + +const bldElevation2 = document.createElementNS(xmlns, 'g'); +bldElevation2.classList.add('elevation-2'); +buildingCoords.forEach(building => drawHexes(bldElevation2, building)); + +const elevation1 = document.createElementNS(xmlns, 'g'); +elevation1.classList.add('elevation-1'); +drawHexes(elevation1, grid); + +buildings.appendChild(bldElevationBasement); +buildings.appendChild(bldElevation1); +buildings.appendChild(bldElevation2); +svg.appendChild(elevation1); +svg.appendChild(buildings); -- cgit v1.2.3