ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rectangle algo can offset origin

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2024-06-18 18:52:07 -07:00
parent 6192367671
commit 1574631834
2 changed files with 58 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/radial.html
View File

@ -117,8 +117,8 @@
use[href="#hex"] {
stroke: #666;
/* fill: wheat; */
fill: url(#asterisk);
fill: wheat;
/* fill: url(#asterisk); */
}
.building [class*="elevation"] use {

86
src/radial.js
View File

@ -38,18 +38,18 @@ function getNeighbors(coords) {
function generateRadialCoords(l, { q, r, s }, radius) {
const origin = toKey(q, r, s);
const list = new Set(l);
const list = new Map(l);
const neighbors = new Set();
let next = new Set();
list.add(origin);
list.set(origin);
next.add(origin);
for (let i = 0; i < radius; i++) {
next.forEach(coords => {
getNeighbors(coords).forEach(n => {
list.add(n);
list.set(n, null);
neighbors.add(n);
});
});
@ -99,7 +99,7 @@ function generateRadialCoordsRect({ rows, columns, odd = false, equal = true } =
}
function drawHexes(el, list) {
list.forEach(key => {
for ([key, v] of list) {
const [q, r, s] = key.split(',').map(n => +n);
let x;
@ -133,11 +133,17 @@ function drawHexes(el, list) {
const sText = document.createElementNS(xmlns, 'text');
sText.textContent = s;
sText.setAttributeNS(null, 'x', -3);
sText.setAttributeNS(null, 'y', + 5);
sText.setAttributeNS(null, 'y', 5);
[use, qText, rText, sText].forEach(el => g.appendChild(el));
const vText = document.createElementNS(xmlns, 'text');
vText.textContent = v;
vText.style.fill = 'red';
vText.setAttributeNS(null, 'y', 1);
vText.setAttributeNS(null, 'x', -2);
[use, qText, rText, sText, vText].forEach(el => g.appendChild(el));
el.appendChild(g);
});
}
}
function translateRadialCoords({ q, r, s }, direction, distance) {
@ -271,36 +277,38 @@ bld2hexes.forEach(list => list.forEach(coords => grid.delete(coords)));
// drawHexes(elevation1, grid);
function generateRadialCoords2(l, { q, r, s }, radius) {
function generateRadialCoords2(l, { q, r, s }) {
const origin = toKey(q, r, s);
const list = new Set(l);
const neighbors = new Set();
const list = new Map(l);
let level = 0;
let next = new Set();
list.set(origin, level);
let queue = [origin];
list.add(origin);
next.add(origin);
const top = 5;
const bottom = 5;
for (let i = 0; i < radius; i++) {
next.forEach(coords => {
getNeighbors(coords).forEach(n => {
const [q, r, s] = n.split(',').map(n => +n);
const left = 1;
const right = 1;
const height = 7;
const width = 3;
const mod = (Math.abs(r) - height % 2) / 2;
while (queue.length > 0) {
level++;
const v = queue.shift();
getNeighbors(v).forEach(w => {
const [wq, wr, ws] = w.split(',').map(n => +n);
const rDist = Math.abs(wr - r);
const dr = (rDist + rDist % 2) / 2;
if (Math.abs(r) < height && Math.abs(q) - mod < width && Math.abs(s) - mod < width) {
list.add(n);
neighbors.add(n);
if ([
!list.has(w),
wr < bottom + r && wr > -top + r,
wq > -right + q - dr && wq < left + q + dr,
ws > -left + s - dr && ws < right + s + dr,
].every(v => v)) {
list.set(w, dr);
queue.push(w);
}
});
});
next = new Set(neighbors);
neighbors.clear();
}
return list;
@ -309,10 +317,26 @@ function generateRadialCoords2(l, { q, r, s }, radius) {
const elevation2 = document.createElementNS(xmlns, 'g');
elevation2.classList.add('elevation-2');
const list = generateRadialCoords2(new Map(), { q: 0, r: 0, s: 0 });
// const list = generateRadialCoords2(new Map(), { q: -5, r: 5, s: 0 });
// q [3, -3]
// s [-3, 3]
// const list = generateRadialCoords2(new Map(), { q: -2, r: 0, s: 2 });
// q [1, -5]
// s [-1, 5]
// const list = generateRadialCoords2(new Map(), { q: -1, r: 2, s: -1 });
// q [2, -4]
// s [-4, 2]
// const list = generateRadialCoords2(new Map(), { q: -5, r: 4, s: 1 });
// q [-2, -8]
// s [-2, 4]
drawHexes(elevation2, generateRadialCoords(new Map(), { q: 0, r: 0, s: 0 }, 10));
drawHexes(elevation1, generateRadialCoords2(new Map(), { q: 0, r: 0, s: 0 }, 10));
drawHexes(elevation1, list);
const defs = svg.querySelector('defs');
defs.after(elevation2);