Web Dev Solutions

Catalin Mititiuc

if (window.IS_DEV) { const source = new EventSource('/esbuild'); source.addEventListener('change', () => location.reload()); } const xmlns = 'http://www.w3.org/2000/svg'; const svg = document.querySelector('svg'); const hex = { inradius: 8.66, circumradius: 10, } const horzSpacing = hex.inradius; const vertSpacing = hex.circumradius * 3 / 2; function toKey(q, r, s) { return `${[q, r, s]}`; } function sameSigns(a, b) { return a > -1 && b > -1 || a < 0 && b < 0; } function getNeighbors(coords) { const [q, r, s] = coords.split(',').map(n => +n); return [ toKey(q + 1, r, s - 1), toKey(q - 1, r, s + 1), toKey(q + 1, r - 1, s), toKey(q - 1, r + 1, s), toKey(q, r + 1, s - 1), toKey(q, r - 1, s + 1), ] } function generateRadialCoords(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 => { list.add(n); neighbors.add(n); }); }); next = new Set(neighbors); neighbors.clear(); } return list; } function generateRadialCoordsRect({ rows, columns, odd = false, equal = true } = {}, { q = 0, r = 0, s = 0 } = {}) { const list = new Set(); for (let row = 0; row < rows; row++) { const alternating = row % 2; const dr = row; for (let col = 0; col < columns; col++) { let dq = -(alternating + row) / 2 + alternating - col; let ds = -(row + alternating) / 2 + col; if (odd) { dq = dq - alternating; ds = ds + alternating; } list.add(toKey(q + dq, r + dr, s + ds)); } if (!equal) { if ((odd && !(row % 2)) || (!odd && row % 2)) { let dq = -(alternating + row) / 2 + alternating - columns; let ds = -(row + alternating) / 2 + columns; if (odd) { dq = dq - alternating; ds = ds + alternating; } list.add(toKey(q + dq, r + dr, s + ds)); } } } return list; } function drawHexes(el, list) { list.forEach(key => { const [q, r, s] = key.split(',').map(n => +n); let x; if (q === s) x = 0; else if (sameSigns(q, s)) x = Math.abs(q - s); else x = Math.abs(q) + Math.abs(s); x = (q > s ? -1 : 1) * x * horzSpacing; y = r * vertSpacing; const g = document.createElementNS(xmlns, 'g'); g.setAttributeNS(null, 'transform', `translate(${x}, ${y})`); const use = document.createElementNS(xmlns, 'use'); use.setAttributeNS(null, 'href', '#hex'); const qText = document.createElementNS(xmlns, 'text'); qText.textContent = q; qText.setAttributeNS(null, 'x', -3); qText.setAttributeNS(null, 'y', -3); const rText = document.createElementNS(xmlns, 'text'); rText.textContent = r; rText.setAttributeNS(null, 'x', 5); rText.setAttributeNS(null, 'y', 1.5); const sText = document.createElementNS(xmlns, 'text'); sText.textContent = s; sText.setAttributeNS(null, 'x', -3); sText.setAttributeNS(null, 'y', + 5); [use, qText, rText, sText].forEach(el => g.appendChild(el)); el.appendChild(g); }); } 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); 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 = buildingData.map(([size, start]) => generateRadialCoordsRect(size, start)); // 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))); // 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 }); // const rectEvenUnevenCols = generateRadialCoordsRect({ rows: 2, columns: 1, equal: false}, { q: 6, r: 1, s: -7 }); // const rectOddUnevenCols = generateRadialCoordsRect({ rows: 2, columns: 1, odd: true, equal: false}, { q: 5, r: 4, s: -9 }); // drawHexes(svg, rectEven); // drawHexes(svg, rectOdd); // drawHexes(svg, rectEvenUnevenCols); // 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'); // buildings.appendChild(bldElevationBasement); // buildings.appendChild(bldElevation1); // buildings.appendChild(bldElevation2); const buildingBlah = svg.querySelector('#building2'); const bld2grid = document.createElementNS(xmlns, 'g'); 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.appendChild(bld2elvBasement); const bld2elv1 = bld2grid.cloneNode(true); bld2elv1.classList.add('elevation-1'); buildingBlah.appendChild(bld2elv1); const bld2elv2 = bld2grid.cloneNode(true); bld2elv2.classList.add('elevation-2'); buildingBlah.appendChild(bld2elv2); const bld2elvRoof = bld2grid.cloneNode(true); bld2elvRoof.classList.add('elevation-roof'); buildingBlah.appendChild(bld2elvRoof); 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);