We need define how will be the UI for this project, which components should be create and how the user will interact with they.
In the first moment, I think that we could create something like it:
![image](https://user-images.githubusercontent.com/9501115/54504788-d9df3100-4913-11e9-9347-216b98703ad9.png)
We already have the components 1 (Head
), 2 (Map
) and 3 (MapFooter
). The components 4 (OAMTable?
), 5 (Hexdump?
) and 6 (FloatingMapOptions?
) should be create.
The OAMTable
will list the OAMs on the map, showing the name, position, and other informations for each OAM. When a line is hover, the map should highlight it. When a table line is selected, the Hexdump
should show informations about this OAM.
An important detail is that the game "recycle" the OAM at each vision step, then we need a friendly way to abstract it but we need keep the limits about it. Maybe slip this table in three sections, one section for step?
The Hexdump
will be used to user can view and edit the informations about the OAM and (maybe also) the map. Would be nice if we can describe each byte, something like it:
![image](https://user-images.githubusercontent.com/9501115/54504666-486fbf00-4913-11e9-97fc-ccf90588f30e.png)
Another good example is this web tool.
But, at the first moment, we can just use this React component, because it is already working.
I think that this hexdump component could be an isolated react component.
The FloatingMapOptions
will be a floating and draggable box on map, that has some options to change the map display. When the mouse is far from it, should has a little opacity.
At the first moment, I think that nice options is "Show/hide OAM" and `Show/hide grid".
Some questions:
- which others components we can create to improve the UI/UX?
- which columns the
OAMTable
should have?
- how should be the highlight on map when a line at
OAMTable
is hovered?
- which options the
FloatingMapOptions
should have?