Web Dev Solutions

Catalin Mititiuc

if (window.IS_DEV) { const source = new EventSource('/esbuild'); source.addEventListener('change', () => location.reload()); } function toKey(q, r, s) { return `${[q, r, s]}`; } 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({ q, r, s }, radius) { const origin = toKey(q, r, s); const list = new Set(); 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; } const hex = { inradius: 8.66, circumradius: 10, } const horzSpacing = hex.inradius; const vertSpacing = hex.circumradius * 3 / 2; const list = generateRadialCoords({ q: 0, r: 0, s: 0 }, 5); const svg = document.querySelector('svg'); const xmlns = 'http://www.w3.org/2000/svg'; list.forEach(key => { const [q, r, s] = key.split(',').map(n => +n); let x; if (q === s) x = 0; else if (q > -1 && s > -1 || q < 0 && s < 0) x = Math.abs(q - s); else x = Math.abs(q) + Math.abs(s); x = (q > s ? -1 : 1) * x * horzSpacing; y = r * vertSpacing; const use = document.createElementNS(xmlns, 'use'); use.setAttributeNS(null, 'href', '#hex'); use.setAttributeNS(null, 'x', x); use.setAttributeNS(null, 'y', y); const qText = document.createElementNS(xmlns, 'text'); qText.textContent = q; qText.setAttributeNS(null, 'x', x - 3); qText.setAttributeNS(null, 'y', y - 3); const rText = document.createElementNS(xmlns, 'text'); rText.textContent = r; rText.setAttributeNS(null, 'x', x + 5); rText.setAttributeNS(null, 'y', y + 1.5); const sText = document.createElementNS(xmlns, 'text'); sText.textContent = s; sText.setAttributeNS(null, 'x', x - 3); sText.setAttributeNS(null, 'y', y + 5); [use, qText, rText, sText].forEach(el => svg.appendChild(el)); });