Controller Movement Visualization: Implement Complete Dashboard

[bastianilso]

The work on the controller movement visualization is moving forward and I've been thinking about where we might want to go with it. I think we can provide a powerful tool if we can tie a lot of elements together around this notion of playback. Essentially the controller movement visualization could aim to provide a complete understanding of what is happening within the game. The mockup below could be one potential direction.

Each of the elements in the mockup could eventually become interactive - clicking on one element could provide additional details/analytical opportunities for that mockup. This is currently developed completely bottom-up by the way (not based on any scientific litt/evidence). maybe I will have more time to do a proper mockup, but this should be sufficient for now to provide you with a driection @aldsanms 🌵

[aldsanms]

Here is an overview of the progress of this issue:

https://user-images.githubusercontent.com/73821252/207628392-16fe841d-a9da-4aed-8847-58b0ac62a2b7.mp4

Today I managed to:

• Create sections for displaying graphics.
• Display data like the total number of moles that appear or the number of moles clicked by the player.

I still have some features to add and work on the layout.

[aldsanms]

Today I managed to:

• Add controller and laser coordinates.
• Change the style of the scrolebar

I failed to make the list that displays the events (top right).

[aldsanms]

https://user-images.githubusercontent.com/73821252/208114691-636388de-bec9-466c-9a6c-5f6b940b3ef0.mp4

Today I managed to make a list that scrolls automatically to display the current events.

[aldsanms]

Here is an overview of the this issue's progress:

https://user-images.githubusercontent.com/73821252/208938329-ce220b65-4ead-4746-94f1-ca3942b0abb4.mp4

Today I managed to:

• Change the layout.
• Edit the scrolling list.
• Add some information.

I haven't found a way yet to show only the path near the controller in the bottom graph.

[aldsanms]

Today I managed to put a background image on an SVG.

https://user-images.githubusercontent.com/73821252/209154304-ec6a9b40-96f9-44fb-8ed5-38a29b87d072.mp4

[aldsanms]

Can you remind me what this graphic represents, and what I need to put inside? Thanks

[bastianilso]

@aldsanms this graphic represent the user's movement inside one or two motorspaces in the game. The number of blue rectangles you need to create depends on how many are in use during the game. You can discover this through the MotorSpaceSize events in the Event CSV and the column MotorSpaceName and the Controller set to Both/Left/Right events. By default the controller in use is the right controller. Note that these can update throughout time and need to adjust accordingly. However, you might find 8-9 events before the game even begins, in which case you should just use the latest update.

The range within each blue rectangle is determined by MotorSpaceWidth and MotorSpaceHeight columns. The movement within the rectangle is Controller world position X and Y.

[aldsanms]

Here is a video of the progress of this issue:

https://user-images.githubusercontent.com/73821252/212096411-02850352-377e-4450-8b85-020991571c13.mp4