Putting It All Together

The <Board> component will render the <Canvas> representing the puzzle board shape, along with the <Palette> we just built. The <Board> will also manage the state of the game based on user interactions. It will be a stateful component that knows how to receive events and update the game’s state in response to a user selecting, moving, and placing pentominoes.

Rendering the Board component

Before we dive into the code for our component, let’s take a look at how GameLive will render it. We start by updating the aliases and mount/3 function in GameLive like this: