Having issues with custom hexes grid

[Naniania]

Hello,

i'm working on a boardgame for a larp event. i tried to use the library to create a grid of custom hexes. i itend to store the list of units present inside the hex with the various terrain properties. i tired to make a basic prototype for now.

here is the hex class:
`import { HexCoordinates, Orientation, defineHex } from "honeycomb-grid"

export class mohajHex extends defineHex({ dimensions: 17.055, orientation: Orientation.FLAT }) {
static create(coordinates: HexCoordinates, custom: string, terrainType: string) {
const hex = new mohajHex(coordinates);
hex.terrainType = "terrainType"; //fixed value for now
hex.custom = "custom"; //fixed value for now
return hex;
}

custom!: string;
terrainType !: string;

}`

and here is the controller code:

`import { Component, OnInit } from '@angular/core';
import { defineHex, Grid, Hex, Orientation, rectangle } from 'honeycomb-grid';
import { mohajHex } from '../../classes/mohajHex.class';
const Tile = defineHex({ dimensions: 17.055, orientation: Orientation.FLAT });

@component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
grid: any;
ngOnInit(): void {
let rectangletraverser = rectangle({ width: 81, height: 60});
this.grid = new Grid(mohajHex, rectangletraverser);
this.grid = this.grid.traverse(rectangletraverser, { bail: true });
}
getPointsString(hex: any): string {
return hex.corners.map((c: { x: any; y: any; }) => ${c.x},${c.y}).join(' ');
}
onHexClick(hex: any): void {
console.log(Hex clicked: q=${hex.q}, r=${hex.r});
let hex2 = this.grid.getHex([hex.q,hex.r]);
console.log("hex properties:" + hex2.custom + " "+ hex2.terrainType);
// Here you can do whatever you need with the clicked hex
console.log(JSON.stringify(this.grid.getHex([hex.q,hex.r])));
}
}`

for now i can't get the properties of the clicked hex and custom and terraintype seems undefined. is it because we can't use traversers to create grid based on custom hexes or is there something wrong?

[Naniania]

it may come from the fact that the gris constructor don't take any additionnal arguments and therefore can't populate the hex.

or maybe gethex don't return the proper hex. which is strange for a method called gethex.

i'll try to create a mini grid with manually created hexes. just to check.

[flauwekeul]

Thanks for your question and sorry for my late reply.

It seems you followed the guide about creating custom hexes, but not quite 😅: you're not calling mohajHex.create() anywhere.

A solution is to create a grid with a rectangle traverser and then map each hex to your custom create() static method:

this.grid = new Grid(mohajHex, rectangletraverser).map((hex) => mohajHex.create(hex, 'custom', 'terrainType'))

This has a slight disadvantage that each hex is created twice: once by the rectangle traverser when it's passed as the 2nd argument to new Grid() and a second time in the map() callback. You could optimize this by updating the create() static method to accept mohaj hexes instead of coordinates and simply setting the custom and terrainType props:

static create(hex: mohajHex, custom: string, terrainType: string) {
  hex.terrainType = 'terrainType' //fixed value for now
  hex.custom = 'custom' //fixed value for now
  return hex
}

However, because you're passing the rectangle traverser as a separate variable, you need to add a generic to get the types to work:

  ngOnInit(): void {
    let rectangletraverser = rectangle<mohajHex>({ width: 81, height: 60 })
    //                                 ^^^^^^^^ pass the hex class as a generic
    this.grid = new Grid(mohajHex, rectangletraverser).map((hex) => mohajHex.create(hex, 'custom', 'terrainType'))
    this.grid = this.grid.traverse(rectangletraverser, { bail: true })
  }

Does this work for you?