Redesign common parts of site

[Zomis]

Redesign Login page

• The field to choose server is huge.
• Make this page more clean, similar to Minesweeper Flags Extreme.

Redesign Lobby

• A lot of the games are probably uninteresting. Make it easier to find the game you are looking for, and then you can show the AIs or online users. Right now the list of available AIs take up a lot of space.
• Also combine with Display rules for games #57 by showing a summary / description of each game.
• Possibly show a random view of an example game in progress? (a bunch of more or less random moves into the game, but before the game is over at least). Show only the most important parts of the game, maybe don't show a header if any displaying all players - could be solvable by passing a prop (use context prop)

Redesign Create Invite Screen

• Current options is way too wide.
• Clarify the difference between common game settings (database, player order, public invite, time limit...) and specific game settings (Hanabi: Use rainbow color, allow empty clues, etc.)

Redesign Send Invites Screen

• Currently takes up entire width
• Looks bad when inviting the same AI multiple times
• Use reordering list animations as shown in https://vuejs.org/v2/guide/transitions.html#List-Move-Transitions
  • Show available players that can be invited at the top, waiting for response in the middle or at the same place as those who have accepted: At the bottom, in the order they have accepted.
  • Use a single list or multiple lists?
  • If the same player/AI is in the game multiple times, show multiple rows.

[Zomis]

I think for the future the process should be something like:

1. Login

2. See a list of all games with summary (name, description, number of players, expected duration, an example of how the game looks like - either a picture or a real Vue component with a random game state provided by server). Also link to board game rules.

3. Choose a game, see more information about it - a list of AIs (and players?) also show a "See example game" where you can watch a game being played between two AIs or you watch an old replay. Also explain the rules in more detail.

4. Either click a "Customize" button which allows you to select rules for the game (like the current "New game" button) or a "Quick invite" button next to the player names (similar to how it is today)

[Zomis]

Things that should exist for each game:

Header
Summary
Player count (from server)
Time it takes
Picture or example game

Try it / Create game / Customize

[Zomis]

An idea that occurred to me recently would be to filter games in other ways as well. Like tags on Board Game Geek.

Also, for dev-purposes, filtering by API style could potentially be useful (Action-style, Game Flow, Context, ECS...)

[Zomis]

Regarding Board Game Geek, they have an API to get information from: https://boardgamegeek.com/wiki/page/BGG_XML_API#