Thoughts on adding a metadata field to class Hex?

[tansanDOTeth]

I created a custom traverser which essentially creates a ring spiral from the center, and I wanted to preserve the levels aka the radius of the ring. Subsequently, having this data would save me a lot of time during the render or animation portion.

Here is an example to better illustrate what my coordinates might look like with my metadata:

{ q: 0, r: 0, metadata: { level: 0 } }
{ q: 0, r: -1, metadata: { level: 1 } }
{ q: 1, r: -1, metadata: { level: 1 } }
{ q: 1, r: 0, metadata: { level: 1 } }
{ q: 0, r: 1, metadata: { level: 1 } }
{ q: -1, r: 1, metadata: { level: 1 } }
{ q: -1, r: 0, metadata: { level: 1 } }
{ q: 0, r: -2, metadata: { level: 2 } }
{ q: 1, r: -2, metadata: { level: 2 } }
{ q: 2, r: -2, metadata: { level: 2 } }
{ q: 2, r: -1, metadata: { level: 2 } }
{ q: 2, r: 0, metadata: { level: 2 } }
{ q: 1, r: 1, metadata: { level: 2 } }
{ q: 0, r: 2, metadata: { level: 2 } }
{ q: -1, r: 2, metadata: { level: 2 } }
{ q: -2, r: 2, metadata: { level: 2 } }
{ q: -2, r: 1, metadata: { level: 2 } }
{ q: -2, r: 0, metadata: { level: 2 } }
{ q: -1, r: -1, metadata: { level: 2 } }

More broadly speaking, I think it makes sense to have a metadata field to allow users of this library to preserve data. I believe this is especially useful to people who are deriving a set of hexagons based on other data. I hacked this together locally by extending a few classes, and ignoring a few typescript errors, but wanted to see if there was interest in such a feature. If so, I could clean up what I have and put it into a PR.

[flauwekeul]

Could you share some code that shows how you expect the API to look like? So how you would use honeycomb if this feature already existed. Submitting that PR is fine too.

I'm don't understand quite yet why you need this.

Thanks.

[tansanDOTeth]

Here are two examples of a custom traverser that would allow me to pass some metadata and be able to retain it in the following grid:

const spiralUntil = ({ maxHexCount }): Traverser<HexWithMetadata> => {
  return function spiralTraverser(createHex, _) {
    const hexes = []
    ...

    while(true) {
      const radius = 1;
      for(...) {
        for(var i=0; i < radius; i++)) {
          hexes.push(createHex({
            q: ...,
            r: ...,
            metadata: {
              radius
            }
          }))

          if(hexes.length === maxHexCount) {
            return hexes
          }
        }
      }
      radius++;
    }
  };
};

const grid = new Grid(Tile, spiralUntil({ maxHexCount: 50 })));
const points = grid.forEach((hex) => hexToPoint(hex));

const response = await fetch(...);

const spiralUntil = (): Traverser<HexWithMetadata> => {
  return function spiralTraverser(createHex, _) {
    ...
    return response.data.map({id, borderColor, imageUrl} => createHex({
      q: ..., 
      r: ..., 
      metadata: {
        id, 
        borderColor, 
        imageUrl
      }
    }))
  };
};

const grid = new Grid(Tile, spiralUntil()));
const points = grid.forEach((hex) => hexToPoint(hex));

// Some render function to use with the points

[flauwekeul]

Thanks for the examples. It's already possible to add custom properties to hexes, see https://abbekeultjes.nl/honeycomb/guide/custom-hexes.html#custom-properties https://abbekeultjes.nl/honeycomb/guide/custom-hex-creation.html. If you want, I can rewrite your examples with this existing functionality. Or have you tried this already?

[flauwekeul]

With this Tile class you should be able to implement both your examples:

interface TileRadius {
  radius: number
}

interface TileRenderData {
  id: string
  borderColor: string
  imageUrl: string
}

interface TileWithMetadata {
  metadata?: TileRadius | TileRenderData
}

class Tile extends defineHex({ dimensions: 30, orientation: Orientation.FLAT }) implements TileWithMetadata {
  static createWithRadius(coordinates: HexCoordinates, radius: number) {
    const tile = new Tile(coordinates)
    tile.metadata = { radius }
    return tile
  }

  static createWithRenderData(coordinates: HexCoordinates, renderData: TileRenderData) {
    const tile = new Tile(coordinates)
    tile.metadata = { ...renderData }
    return tile
  }

  metadata?: TileRadius | TileRenderData
}

Both your examples rewritten using the above Tile:

const spiralUntil = ({ maxHexCount }): Traverser<Tile> => {
  return function spiralTraverser() {
    const hexes = []
    ...

    while(true) {
      const radius = 1;
      for(...) {
        for(var i=0; i < radius; i++)) {
          hexes.push(Tile.createWithRadius({ q: ..., r: ... }, radius))

          if(hexes.length === maxHexCount) {
            return hexes
          }
        }
      }
      radius++;
    }
  };
};

const grid = new Grid(Tile, spiralUntil({ maxHexCount: 50 })));
const points = grid.forEach((hex) => hexToPoint(hex));

const response = await fetch(...);

const spiralUntil = (): Traverser<Tile> => {
  return function spiralTraverser() {
    ...
    return response.data.map(({ id, borderColor, imageUrl }) => Tile.createWithRadius(
      { q: ..., r: ... },
      { id, borderColor, imageUrl }
    ))
  };
};

const grid = new Grid(Tile, spiralUntil()));
const points = grid.forEach((hex) => hexToPoint(hex));

// Some render function to use with the points

Note that there are some issues with your code. The while loop could cause an infinite loop. And ignoring the cursor parameter passed to the custom traverser makes it impossible to compose with other traversers. See: https://abbekeultjes.nl/honeycomb/guide/custom-traverser.html#creating-your-own-traverser

[tansanDOTeth]

Tile.createWithRadius({ q: ..., r: ... }, radius))

Wow! Thank you for taking the time to write this up. It's nice to see it re-written in the idiosyncrasies of the library!

[kirkbushell]

I created a custom traverser which essentially creates a ring spiral from the center, and I wanted to preserve the levels aka the radius of the ring. Subsequently, having this data would save me a lot of time during the render or animation portion.

Would you be able to share said spiral from center? I'm trying to utilise the cube examples from redblob games, but really struggling (it's important in my case that 0,0 is in fact, the center).