MVP1 - Navbar - Map Settings bar

[bryansamuel1]

Before starting the functionality the canvas component needs to be completed first

Add the following options to the bar as shown by the image below.
Functionality

• Transparent button with an upload icon (no text) (MVP2)

  • Once clicked a dropdown appears presenting the user with the option to select a file from the computer
  • Before starting the functionality the back end upload image functionality needs to be completed first

• Transparent button with an export icon (no text)

  • Once clicked a dropdown appears presenting the user with the option to export the canvas as png

• Input with a placeholder "Select map"

  • Once clicked a dropdown appears showing all the maps available for that game
  • A user can type in the input to filter the list
  • A user can select a map on the dropdown and this populates the input with the value.
  • When a map option is hovered for 2 seconds or more, the map's picture is layered onto the canvas
  • When a map option is clicked the map's picture is layered onto the canvas

• Transparent button with an minus icon

  • Once clicked it is activated and allows the user to click on the map to zoom out

• Transparent button with an plus icon

  • Once clicked it is activated and allows the user to click on the map to zoom in

• Transparent input appended with a K

  • Once clicked a user can input an decimal value to set the width of the canvas

• Transparent input appended with a K

  • Once clicked a user can input an decimal value to set the height of the canvas