# 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:

```jsx
const [menuPage, setMenuPage] = useState('MainMenu');
```

### 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`.

```jsx
const handlePlayGame = (id) => {
  console.log('selectedNFT', id);
  localStorage.setItem('selectedNFT', id);
  setMenuPage('Game');
};
```

We will insert the button right after the `MainMenu` `NFTs interface`.

```jsx
<button className="Connect" disabled={selectedNFT == ''} onClick={() => handlePlayGame(selectedNFT)}>
  {`Play with NFT#${selectedNFT}`}
</button>
```

### Initialize Play Game Component

Now we are set. Let’s create a `PlayGame` component inside `components` directory:

```jsx
export const PlayGame = (props) =>{
  return(
    <div>Game State</div>
  )
}
```

### 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:

```jsx
const menuPageMapping = {
  MainMenu: (
    <div>
      <header className="App-header">
        <h1>Integrate NFTs Into GameFi</h1>
        <h6>{`Current user address: ${userAddress}`}</h6>
        {!hasRespondedNFTs && <h1> Loading NFTs... </h1>}
        {hasRespondedNFTs && NFTsOwned.length == 0 && <h1> No NFTs available </h1>}
        {hasRespondedNFTs && NFTsOwned.length > 0 && (
          <div>
            <h2>Pick your NFT!</h2>
            {NFTsOwned.map((nftId) => (
              <span id={`nft${nftId}`} key={nftId} className="characterContainer">
                <img
                  className="characterImg"
                  src={`https://stacksgamefi.mypinata.cloud/ipfs/QmNz74TN66hgi9X4wZ1ch9hXKxaywG5soEQPMfDqEMLVsd/${nftId}.png`}
                  alt={`character ${nftId}`}
                  onClick={() => handleClickNFT(nftId)}
                ></img>
                {`NFT#${nftId}`}
              </span>
            ))}
          </div>
        )}
        <br />
        <br />
        <button className="Connect" disabled={selectedNFT == ''} onClick={() => handlePlayGame(selectedNFT)}>
          {`Play with NFT#${selectedNFT}`}
        </button>
        <br />
        <button className="Connect" onClick={disconnect}>
          Disconnect Wallet
        </button>
        <br />
        <a className="App-link" href="<https://stacksdegens.com/>" target="_blank">
          Build by Stacks Degens
        </a>
      </header>
    </div>
  ),
  Game: <PlayGame menuPage={menuPage} setMenuPage={setMenuPage} />,
};
```

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:

```jsx
return menuPageMapping[menuPage];
```

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:

{% embed url="<https://github.com/BowTiedDeployer/workshop-nft-integration/tree/dapp/5-mapping-scenes>" %}
branch dapp/5-mapping-scenes
{% endembed %}

You can check the exact changes in this commit referring to them

{% embed url="<https://github.com/BowTiedDeployer/workshop-nft-integration/commit/5328913fa91be1c14638b46ffb280b0ddc2e8b12>" %}
commit 5328913fa91be1c14638b46ffb280b0ddc2e8b12
{% endembed %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.degenlab.io/gamefistacks/workshop/nft-web-app-integration/mapping-scenes.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.