diff --git a/public/radial.html b/public/radial.html index 784040e..5398186 100644 --- a/public/radial.html +++ b/public/radial.html @@ -5,7 +5,7 @@ - + + + + + + + + + + + + + + + - - - - - - + + + + + + + + + + + + + + + + diff --git a/src/radial.js b/src/radial.js index 5a9f875..dd00232 100644 --- a/src/radial.js +++ b/src/radial.js @@ -140,40 +140,51 @@ function drawHexes(el, list) { }); } -const grid = generateRadialCoordsRect({ rows: 25, columns: 33 }, { q: 22, r: -12, s: -10 }); +function translateRadialCoords({ q, r, s }, direction, distance) { + return { + q: q + direction.q * distance, + r: r + direction.r * distance, + s: s + direction.s * distance + }; +} + +// const grid = generateRadialCoordsRect({ rows: 26, columns: 33 }, { q: 22, r: -12, s: -10 }); + +const grid = generateRadialCoordsRect({ rows: 52, columns: 33 }, translateRadialCoords({ q: 22, r: -12, s: -10 }, { q: 1, r: -2, s: 1 }, 7)); + 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); -// 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 buildingData = [ + [{ rows: 4, columns: 8, equal: false }, { q: 18, r: -8, s: -10 }], + [{ rows: 8, columns: 2, equal: false }, { q: 9, r: -10, s: 1 }], + [{ rows: 6, columns: 13, odd: true }, { q: 2, r: -8, s: 6 }], + [{ rows: 1, columns: 10 }, { q: -1, r: -9, s: 10 }], + [{ rows: 1, columns: 2 }, { q: -1, r: -2, s: 3 }], + [{ rows: 1, columns: 6 }, { q: -8, r: -2, s: 10 }], + [{ rows: 8, columns: 4, odd: true }, { q: -5, r: 3, s: 2 }], + [{ rows: 6, columns: 3, equal: false }, { q: -12, r: 3, s: 9 }], +].map(([size, start]) => [size, translateRadialCoords(start, { q: 1, r: -2, s: 1 }, 7)]); -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 }), +const buildingCoords = buildingData.map(([size, start]) => generateRadialCoordsRect(size, start)); - // hex building - // 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 }), -] +// 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 }), + +// // hex building +// // 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))); @@ -194,51 +205,115 @@ buildingCoords.forEach(building => building.forEach(coords => grid.delete(coords // 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 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 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 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 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); +// buildings.appendChild(bldElevationBasement); +// buildings.appendChild(bldElevation1); +// buildings.appendChild(bldElevation2); const buildingBlah = svg.querySelector('#building2'); const bld2grid = document.createElementNS(xmlns, 'g'); -drawHexes(bld2grid, generateRadialCoordsRect({ rows: 9, columns: 4, odd: true, equal: false }, { q: 4, r: -4, s: 0 })); -drawHexes(bld2grid, generateRadialCoordsRect({ rows: 5, columns: 1 }, { q: 3, r: -1, s: -2 })); -drawHexes(bld2grid, generateRadialCoordsRect({ rows: 5, columns: 1, odd: true }, { q: -2, r: -1, s: 3 })); + +const bld2hexes = [ + generateRadialCoordsRect({ rows: 9, columns: 4, odd: true, equal: false }, { q: 11, r: 3, s: -14 }), + generateRadialCoordsRect({ rows: 5, columns: 1 }, { q: 10, r: 6, s: -16 }), + generateRadialCoordsRect({ rows: 5, columns: 1, odd: true }, { q: 5, r: 6, s: -11 }), +] + +// bld2hexes.forEach(list => drawHexes(bld2grid, list)); const bld2elvBasement = bld2grid.cloneNode(true); bld2elvBasement.classList.add('elevation-basement'); -buildingBlah.querySelector('.floor').after(bld2elvBasement); +buildingBlah.appendChild(bld2elvBasement); const bld2elv1 = bld2grid.cloneNode(true); bld2elv1.classList.add('elevation-1'); -bld2elvBasement.after(bld2elv1); +buildingBlah.appendChild(bld2elv1); const bld2elv2 = bld2grid.cloneNode(true); bld2elv2.classList.add('elevation-2'); -bld2elv1.after(bld2elv2); +buildingBlah.appendChild(bld2elv2); const bld2elvRoof = bld2grid.cloneNode(true); bld2elvRoof.classList.add('elevation-roof'); -bld2elv2.after(bld2elvRoof); +buildingBlah.appendChild(bld2elvRoof); -buildingBlah.before(elevation1); -buildingBlah.before(buildings); + +const bld1 = svg.querySelector('#building1'); + +const bld1grid = document.createElementNS(xmlns, 'g'); +const bld1hexes = generateRadialCoordsRect({ rows: 9, columns: 4, odd: true, equal: false }, { q: 4, r: 3, s: -7 }); +// drawHexes(bld1grid, bld1hexes); + +const bld1elv1 = bld1grid.cloneNode(true); +bld1elv1.classList.add('elevation-1'); +bld1.appendChild(bld1elv1); + +bld1hexes.forEach(coords => grid.delete(coords)) +bld2hexes.forEach(list => list.forEach(coords => grid.delete(coords))); + +// drawHexes(elevation1, grid); + + + +function generateRadialCoords2(l, { q, r, s }, radius) { + const origin = toKey(q, r, s); + const list = new Set(l); + const neighbors = new Set(); + + let next = new Set(); + + list.add(origin); + next.add(origin); + + for (let i = 0; i < radius; i++) { + next.forEach(coords => { + getNeighbors(coords).forEach(n => { + const [q, r, s] = n.split(',').map(n => +n); + + const height = 7; + const width = 3; + const mod = (Math.abs(r) - height % 2) / 2; + + if (Math.abs(r) < height && Math.abs(q) - mod < width && Math.abs(s) - mod < width) { + list.add(n); + neighbors.add(n); + } + }); + }); + + next = new Set(neighbors); + neighbors.clear(); + } + + return list; +} + +const elevation2 = document.createElementNS(xmlns, 'g'); +elevation2.classList.add('elevation-2'); + + +drawHexes(elevation2, generateRadialCoords(new Map(), { q: 0, r: 0, s: 0 }, 10)); +drawHexes(elevation1, generateRadialCoords2(new Map(), { q: 0, r: 0, s: 0 }, 10)); + + +const defs = svg.querySelector('defs'); +defs.after(elevation2); +elevation2.after(elevation1);