Set the inventory key binding to letter "I" and set Inventory button to be unfocusable

Hi, @ASteinheiser. Forwarding my usability concerns from Reddit: https://www.reddit.com/r/reactjs/comments/aylp2p/i_wrote_a_post_on_making_an_rpg_with_react_redux/ei4lcjt

On desktop, when I want to read my Inventory, I use the mouse & click on the button, then I have to close it with the same controls, but the Inventory button does not lose focus. Here, [Space] and [Enter] are used as attack action keys, but by browser design, they also mean a “click” user action on <button> elements, so, when I close the Inventory, then attack a monster on my next move, the Inventory comes up. It’s really annoying.

There really needs to be something to tackle this:

• Set the Inventory button’s tabIndex to -1. https://github.com/ASteinheiser/react-rpg.com/blob/master/src/features/inventory/index.js#L54

class Inventory extends Component {
  // ... other component class methods

  render() {
    const { newItemIndicator } = this.state;
    const { disabled, dialog, sideMenu } = this.props;
    const { inventory: open } = dialog;

    return (
      <div className='flex-row inventory__container'>
        {
          !disabled &&
            <Button
              ...otherButtonProps
              tabIndex={-1} // unfocusable button
            />
        }
      </div>
    );
  }
}

• Set the Inventory key binding to [I], https://github.com/ASteinheiser/react-rpg.com/blob/master/src/features/player/controls.js#L120

// ... other module imports

import isGamePaused    from '../dialog-manager/actions/is-game-paused';
import toggleInventory from '../dialog-manager/actions/toggle-inventory';
// inventory visibility is controlled by the global app state; good for us!

import { ANIMATION_SPEED } from '../../config/constants';

const Controls = ({ isGamePaused, attackMonster, movePlayer }) => {
  // ... other component constants & functions

  function handleKeyDown(event) {
    event.preventDefault();
    // move with 'WASD' or Arrow keys
    switch(event.keyCode) {
      case 37:
      case 65:
        return movePlayer('WEST');

      // ...
      // ... other `event.keyCode` case handlers
      // ...

      case 73:
        return toggleInventory(); // "I" => show / hide the inventory!

      default:
        // some console.log comment I couldn't be bothered to copy! :)
    }
  }

  return null;
}

const actions = {
  attackMonster,
  movePlayer,
  toggleInventory, // controls should be able to modify Inventory visibility, too!
  isGamePaused,
};

export default connect(null, actions)(Controls);

I’m sure that this will open up more questions from the audience about key binding usability, but I think it’s a reasonable place to start.

[ASteinheiser]

Alright, I will wait for @KajiTetsushi to make a PR, then I’ll close @Alaricus PR and merge the new PR in. Thanks guys!

[Alaricus]

I’m about to go to sleep, so I’ve no problem with this. 😃 In fact, if you want to, feel free to just copy/paste my PR and add whatever you were going to.