add move range for token

I am adding move range for token, I suppose it is a common function for hex grid game. here is how it look like

for now, I just simply put the highlight and range calculation methods in hex. Before I wanna submit PR, I found there must be a activeId alike props to indicate which token is currently selected when it comes multi-token… I was struggling with the multi-token things.

My thought is manage the activeToken id state in hex state, add selectToken methods as follow, but I am not sure how to update activeToken id immediately.

_selectToken(target) {
   let tokens = this.props.children, index = 0;
   const coordinate = `${target.x},${target.y},${target.z}`;
   if(Array.isArray(tokens)) {
     tokens.forEach((token) => {
       const {x, y, z} = token.props;
       console.warn(`multi token, curToken xyz: ${x}, ${y}, ${z}, clicked@:${coordinate}`);
       if (x === target.x && y === target.y && z === target.z)
         this.setState({ activeId: index });
       index += 1;
     });
     // because setState is async.. activeId would be updated @nextClicked..
     console.warn(`activeToken id: ${this.state.activeId}`);
     return tokens[this.state.activeId];
   } else {
       // handle single token..
   }
}

I am not experienced in React…Any suggestion @nicolodavis , thx !

[jstacoder]

setState can also take a function As its second argument, and you are guaranteed this function will not be called until after the state update happens, I think that’s what your looking for?

[nicolodavis]

Closing this for lack of activity.