question about coordinating two components

[jvsteiner]

In my use case, I would like to have an interactive Chessboard in one part of the component tree, and a MoveText in another part. I would like them to share the same Game state: ie. the user might interact with either of them, and I want the other one to be synchronized. Is this something that this library is designed for/capable of? If so, would it be possible to offer a few hints about how to do it?

[jvsteiner]

I ended up using redux based on the POJO's you provided. I had to reimplement game navigation login in the reducer, and also add support for adding new variations, etc. - good learning exercise. I appreciate your decision to make the POJO representation available, that was a very farsighted design choice.

[yo35]

Hi,
Sorry for the late reply.

If you just need to synchronize a NavigationBoard and Movetext, it should not be that complex. A minimal example could be like:

function NavBoardWithMoveText({ game }) {

  const [nodeId, setNodeId] = useState('start');
  
  function onSelectedInMovetext(n) {
      if (n !== undefined) {
          setNodeId(n);
      }
  }

  return (
    <>
        <NavigationBoard game={game} nodeId={nodeId} onNodeIdChanged={setNodeId} />
        <Movetext game={game} selection={nodeId} interactionMode="selectMove"
            onMoveSelected={onSelectedInMovetext} />
    </>
  );

}

Of course, in a real-life code, you may want to lift the nodeId higher in the component tree, possibly persisting it with redux or any other persistency mechanism, but the key points regarding component synchronization are here.

[jvsteiner]

Yes, you are right - I have about three consumers of the state stretched from one end of the tree to the other, so I went with redux, since I had been meaning to learn how to use it anyway.