Add keyboard Controls

[soggybag]

The game would be improved if the keyboard could be used. Currently you must click the buttons at the bottom of the grid.

Goal: add listeners for keyboard events.

• left arrow: move left
• right arrow: move right
• up/down: arrow rotate
• space bar: move down.

The event listeners will need to issue actions to the Redux dispatcher. The existing actions should work. Where you add the listeners could use some thought. Two places stand out.

The Controls component. This might be nice since the keyboard actions will be in the same place as the button actions and they do the same things. The actions are here and this component is connected to Redux already.

The second option is to add the keyboard actions to the App component. You'll need to connect this to Redux and import the actions.

In either case you should probably add listeners for keyboard events in componentDidMount and remove them in componentWillUnmount.

Here is some info on keyboard events in react:

• https://reactjs.org/docs/events.html#keyboard-events
• https://javascript.info/keyboard-events

Possible issues:

• There may be problems with the app getting focus. You may have to click the screen to give the app focus before it starts registering keyboard events.

[andrescalco]

@soggybag May I get this one?

[soggybag]

Sure go for it. I put these up for my students but they will not do them all.