Add an info button with the rules for how to use the app

[ibrand]

What Basing off of a discussion had on #85 I realized it might be nice to have instructions on how to use the app for future people curious on how to answer rebuses. This PR makes a modal for instructions on app usage and specifically calls out the rebus functionality.

Happy to make changes to this or for you to just take inspiration for it if you want to add something else.

Screenshot of functionality:

[vercel[bot]]

This pull request is being automatically deployed with ZEIT Now (learn more). To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/downforacross/downforacrosscom/6w4iwnlfo ✅ Preview: https://downforacrosscom-git-fork-ibrand-info-button-with-instructions.downforacross1.now.sh

[stevenhao]

Thanks! I'm not sure if the cursor: pointer is intentional. I'll leave some inline comments on wording / terminology as well.

This popup could also be a good place to consolidate instructions on how to use keyboard shortcuts / move around the grid. Based on https://github.com/downforacross/downforacross.com/blob/master/src/components/Player/GridControls.js#L121, I think below is a fairly comprehensive description of how keyboard controls work.

Shortcut	Description
Letter / Number	Fill in current cell and advance cursor to next unfilled cell in the same word, if any
. (period)	Toggle pencil mode on/off
Arrow keys	Either move cursor along current orientation or change orientation without moving cursor
Space bar	Flip orientation between down/across
[ and ]	Move cursor perpendicular to current orientation without changing orientation
Tab and Shift+Tab	Move cursor to first unfilled square of next or previous unfilled clue
Delete or Backspace	Clear current cell

[ibrand]

Awesome, I'll make some changes here. I'm now wondering if I should go ahead and make the whole popup a table of the shortcuts? And cut down on the text?

[ibrand]

Revisions!

[stevenhao]

awesome, thanks!