Bunker 21 — ActionPad.js

On this week’s blogpost, We’ll take a look at the approach I took at the most interactive part of Bunker 21: the ActionPad.

On the ActionPad is where the player makes gameplay choices and ultimately I want that container component to be easy to navigate and simple to understand.

ActionPad.js

Now let’s break it down.

Switch Components

As soon as the component loads the state contains:

state = {
     compDisplayed: 0,
     buttonText: 'TERMINAL'
}

compDisplayed determines which component is currently displayed on the ActionPad, while buttonText is the text on the button that ‘allows’ the different components to be displayed.

On the return statement we see that when the button is clicked it clicked we call the switchComponents() function and the displayed text on the button is whatever the state.buttonText contains as a string

<button id='action-pad-button' onClick={switchComponents}>{this.state.buttonText}</button>

When the button (will change from a button to something else in the future, that’s just a placeholder) is clicked, switchComponents() makes use of a handy switch statement to cycle to the different components, so when we click it for the first time, the current value of state.compDisplayed is 0, setState then proceeds to update the state with 1 for compDisplayed, and ‘INVENTORY’ for buttonText. The default case should never trigger unless something goes horrible wrong, in which case it’ll just display a message to the console.

Ok so that switches whatever the button says and whatever the state contains, but what about displaying the actual component? I’m glad you ask!

Actually Switching Components

Right below the button we sneakily call…

{actuallySwitchComponents()}

which takes care of displaying the components below the button.

Here we use another switch statement so that based on which number compDisplayed contains in the state a different component is displayed. I could have accomplished something similar with React Router but I’m not interested in routes, or displaying different URLs.

Conclusion

Two switch statements is all it took to move components around in my single page application game. Up next, I’m getting those components to actually do something.

Components cycling