Select and change hex properties

[Yury Boichuk]

I successfully created the hex map. Now my task is to select a random hex in a field, change its color, as well as to select all the neighboring hexs and they also change the color (fields where you can move in the game).

Here is my code:

let n = 1;
const draw = SVG(document.body)
const Hex = Honeycomb.extendHex({
    size: 50,
    //orientation: 'flat',	// default: 'pointy'
    //offset: 1,						// default: -1
    render(draw) {
        const position = this.toPoint()
        const centerPosition = this.center().add(position)

        this.draw = draw

        // draw the hex
        this.draw
            .polygon(this.corners().map(({ x, y }) => `${x},${y}`))
            .fill('none')
            .stroke({ width: 1, color: '#999' })
            .translate(position.x, position.y)

        const fontSize = 12

        // draw x and y coordinates
        this.draw
            .text(`${n} (${this.x},${this.y})`)
            .font({
                size: fontSize,
                anchor: 'middle',
                leading: 1.4,
                fill: '#69c'
            })
            .translate(centerPosition.x, centerPosition.y - fontSize)
        n++;
    }
})
const Grid = Honeycomb.defineGrid(Hex)
const grid = Grid.hexagon({
    radius: 5,
    center: [5, 5],
    onCreate: renderHex
})

function renderHex(hex) {
    hex.render(draw)
}

I'd be grateful for your help.

[Yury Boichuk]

Solved:

const draw = SVG(document.body)
        const Hex = Honeycomb.extendHex({
            size: 30,

            render(draw) {
                const { x, y } = this.toPoint()
                const corners = this.corners()

                this.draw = draw
                    .polygon(corners.map(({ x, y }) => `${x},${y}`))
                    .fill('none')
                    .stroke({ width: 1, color: '#999' })
                    .translate(x, y)
            },

            highlight() {
                this.draw
                    // stop running animation
                    .stop(true, true)
                    .fill({ opacity: 1, color: 'aquamarine' })
                    .animate(1000)
                    .fill({ opacity: 0, color: 'none' })
            }
        })
        const Grid = Honeycomb.defineGrid(Hex)
        const grid = Grid.hexagon({
            radius: 5,
            center: [5, 5],
            onCreate(hex) {
                hex.render(draw)
            }
        })
        grid.get(Grid.Hex(3, 1)).draw.fill({ color: 'red' });
        grid.hexesInRange(Grid.Hex(3, 1), 1, 0).forEach(function(hex){
            hex.draw.fill({ color: 'green' })
        });

        document.addEventListener('click', ({ offsetX, offsetY }) => {
            const hexCoordinates = Grid.pointToHex([offsetX, offsetY])
            const hex = grid.get(hexCoordinates)

            if (hex) {
                hex.highlight()
            }
        })