Mapping Scenes
Keep track of current scene
Now letβs move the spotlight on the Duck game! We want to be able to substitute the Duck with the userβs selected NFT, so letβs keep this in mind. To switch to the game, we should split the MainMenu
into two main states. The first state will be the MainMenu
we had until now. The second one will be the Game
itself. To switch between these two, we will use a state inside MainMenu
component to contain the current state:
Change current scene
Initially, it has the 'MainMenu'
value and we will switch it to 'Game'
using a PlayGame button
inside MainMenu
. This will help us moving forward to the game using the selected NFT
. This button will need an event handler, too. Initially, we want the PlayGame buttonβs onClick
to console.log()
the selected NFT
which is going to pass through to the game and saving it using localstorage
.
We will insert the button right after the MainMenu
NFTs interface
.
Initialize Play Game Component
Now we are set. Letβs create a PlayGame
component inside components
directory:
Map the scene using a dictionary
At this point, we have a constant menuPage
which memorizes the state. Letβs use it to literally map these two states. As said, we will use a dictionary and name it menuPageMapping
that should look like this:
As it is clear to observe, for the MainMenu
state it returns the content we used to return until now inside MainMenu
, but for the Game
it returns the PlayGame
component. Letβs make menuPageMapping
useful and return it instead of the previous returned content:
Now, when the user clicks the Play button
, you can see the state was switched and now we can see the message from the <div>
returned inside PlayGame
component previously implemented.
This is the branch with the changes done:
You can check the exact changes in this commit referring to them
Last updated