Create a GameCharacter component which will display the current character based on the character id.

Handle character actions based on the keyboard actions. To keep things simple, we are going to ignore collision for now.

Create mobs, handle their movement, and detect collision with objects and character.

Display the correct "sprite box" based on the character state.

Ensure that we are properly capturing the keyboard actions and we can trigger side effects based on these actions.

NOTE: We need to allow multi-key presses.

Create a GameMap component which will display the current level based on the request level id.

The game assets should scale with the window height. When the user resizes the window, the assets should resize based on the new scale.

NOTE: This shouldn't affect the pixel movement. E.g.
If the character moves 10pxs, the movement should be scaled via the ui and we shouldn't have to move 10px * scale.

As the character moves to the right (and to the left - for now), the GameMap should reflect on the changes.

Detect and handle collision. This will mean:

• Prevent moving onto an object.
• Allow standing and jumping from an object.

Objects could be tiles, pipes. Mob collision will be handled in a different issue.

Handle character's state based on the keyboard actions and the latest persisted state.

Ensure that the character cannot go beyond 0 < and > maxWidth.

For this task, the MapEditor component which will handle generating (bottom, left, type) points for the selected boxes*. When the user clicks on the first bottom left-most box, and selects the type Tile (naming TBD), our MapEditor will generate the following (TBD):

{
  [leftBoxIndex]: {
    [rightBoxIndex]: {
      type: 'Tile'
    }
  }
}

NOTE:

• boxes refer to a grid item.

.
.
[0, 16], [16, 16], [32, 16] ...
[0, 0], [16, 0], [32, 0] ...