[UX/UI] Gameplay view

[pmrukot]

Type
Enhancement

Motivation / use case
It's probably the most important views of all and it requires a lot of improvements.

• Change general layout
  Proposal 1: Question displayed at the top of the page, just under navbar to drag attention. Bigger input field just below that takes 3/5 of the page and the picture takes rest 2/5 of the space. Scoreboard and event logger should be below.
  Proposal 2: Question takes 3/5 space at the top, picture takes 2/5, input below 100% width, scoreboard and event logger below.
  Will try to provide some mockups

• Make it clear what is a static content and what is an input
  Current version definitely has a lot of ambiguity which may be really confusing, maybe even discouraging to a user.

• Expose question input filed
  It should be clear where user should put his answer.

• Submit button should be more subtle
  In most cases it will not be used, but should be there to indicate where is an input and that you can submit it.

• Headings should be more subtle / smaller
  When user is in the room playing, he does not need a big indicators how room is called like it's done now. I can be smaller label and should not be that significant part of UX.

• Make scoreboard more compact and distinct
  Currently it's easy to take scoreboard as some kind of input field which may be confusing and misleading.

• Get some inspiration from modern online quiz pages

[mrapacz]

Proposal 1 doesn't make much sense imho in case of questions like "Who is the actress on the picture?" As long as the image is not a vital part of the question and just an addition it's okay (but it isn't the case quite often).

[mrapacz]

• there is no autocomplete "off" option in Bootstrap.Input. If there's no reason for using bootstrap here, I think we could switch back to generic elm input to get rid of the input history.

EDIT actually there is and I've already fixed that in #191