Show Livery Grid in car and driver table

[viper4gh]

First step: Build an Overlay Function/Feature which can show a number of Liveries in an image grid. The input should be an array or object of png-file URLs. Further it should be possible to show data like driver name, livery name, vehicle type, vehicle class in every grid element.

Second step: Use the new Feature in the following to cases:

• car table: If you click on a row in the car table, then all liveries of the selected car should be shown in the grid
  • driver table: add a button "Spotter Guide" and then the liveries of all current drivers in the table should be shown. Examples from real races: link, link

Possible solution ideas: https://www.w3schools.com/howto/howto_js_image_grid.asp https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp https://gridbyexample.com/examples/ https://www.w3schools.com/css/css_grid.asp https://medium.com/@js_tut/css-grid-tutorial-filling-in-the-gaps-c596c9534611 https://stackoverflow.com/questions/11083345/creating-a-dynamic-grid-of-divs-with-javascript http://api.jquery.com/insertafter/ https://api.jquery.com/clone/

[viper4gh]

ToDo: Compare all vehicle names in the vehicle and vehicle livery list. They have to match, because if the Spotter Guide is using the table data where only the vehicle name (used from vehicle list) is available, then it have to search after this vehicle name in the vehicle livery list.

Update: found another case

pcars_vehiclelist.js: "Pagani Zonda Revolucion" pcars_vehicleliverylist.js: "Pagani Zonda Revolución"

[viper4gh]

I made a mistake: In the drivertable refresh function the vehicle id is available for building the livery name. In result a restructured array with the vehicle name as index for the vehicle livery list is not needed.

But instead we need a restructured array for building the livery filename, because you need the livery id there and the livery id is not available in the driver table if you want to use the driver table data to build the Spotter Guide.

[viper4gh]

The automatic number of columns is not working in Firefox. Firefox shows only one column.