Right now, the car slows down to a max speed of ~ 15 until the player is on track again, effectively allowing them to literally cut corners since the car slows down gradually.

To do correct collision handling I think the current detection system is not capable enough (we're only looking at pixel color data, so there's pretty much no context to calculate angles correctly (without taking a massive performance hit anyway).

In order to make the experience more challenging, I'm thinking of setting the max speed to 0 when going offtrack.
This would still allow the player to get themselves out of the gravel if they haven't veered too far off the racetrack and (thus) have kept enough speed to reach the track again before coming to a complete halt.

When a car's completely stopped off track, maybe reset the (max)speed to 5 and
add some track marshal graphics (or a crane! 🚧 🚜) to the car / world so that the now heavily penalized player can once again rejoin the race , without having to figure out a system to actually have the game put the player back on the right track.

tip: import graphic, make symbol

• abu dhabi
• assen
• barcelona
• hockenheim
• interlagos
• monza

To eliminate the need for two world files per level (for layering effect track.svg and track-bridges.svg are placed below and above the player car), the app should make separate sprites out of the various layers inside the track.svg file, so a single level/track contains all the necessary information.

Stacked from the bottom, each track file would have layers something like this:

1. world scenery
2. racetrack path (including start/finish line / sector blocks)
3. racetrack gfx (ie, racetrack artwork including track markings, kerbs, tire tracks, buildings)
4. bridges / tunnels / ad boards (stuff a player can drive underneath)
5. clouds / birds ?

Suggested approach

lmao no, see comment below

• iterate top-level <svg:g inkscape:label=""> elements
• set all to style="display:none" except selected layer
• create Image object per selected layer, assign image to new Sprite object
• re-assemble sprites into working game world

srsly: load each track.svg#layer into a Sprite object (on/off track detection, timing sectors could be added later)

Good side effect

The game would then only use the racetrack path sprite to do logic / calculations on (perhaps this sprite can even be scaled down for performance reasons) before merging all sprites including the car together onto the <canvas>

Ideally, use (a combination of) css (or svg or, if must be, canvas) filters to make a copy of the environment and use that to light the scene more dynamically.

For example: Car Lights are currently simply semi-transparent layers inside the car .png graphic.
It would be neat to separate the light layers from the car and use different blend modes for a more realistic lighting effect.

• abu dhabi
• assen
• barcelona
• hockenheim
• interlagos
• monza

No place for fascism here.

This issue appears as a major frame drop when transitioning between ontrack and offtrack surface. It does not happen when you transition from green (track) to blue (pit / paddock area).

However, when you transition between either surface type on to nothing (or black) ie, offtrack or vice versa, there's always a big frame drop. Performance analysis seems to indicate major garbage collection happening.

It's odd that this is happening, perhaps needs looking into the gtImageData routine.

When car is offtrack, show yellow flags in world

• Add layer with marshal flags to track.svg

  • add graphics of marshals (holding flag)
  • update #world with marshal posts
  • add new layer #racecontrol to add this in

• Add UI element in timing screen / tv overlay in index.html

Reproduce: Follow the program, exit the pits and prepare to start the first lap.
Notice how the frame rate will drop before even reaching halfway around the lap UNTIL you hit the finish line and start the first lap with the waypoints over the lap. FPS is suddenly back to 60, as if nothing ever happened.

https://stackoverflow.com/questions/38069462/html5-canvas-save-and-restore-performance/38079796

For tires:

When this.surface.type == 'track' && car.steeringAngle/car.maxSteeringAngle > 0

(or some variation of tire degration when the car is turning, ie while <- or -> button is pressed)

Currently the track svg files contain a small <style> element that allows the splitting of the layers.

/* hides all root level .layer group elements */
svg > g.layer { display : none;} 

/* displays only targeted .layer group element */
svg > g.layer:target { display : block;} 

In the game, for every layer we load the svg like: track.svg#layer, ensuring that only the selected layer is displayed.

the problem

Inkscape kind of messes this up. When you show or hide a layer, inkscape adds a style=display: none | display: inline attribute to the xml element.

We can add !important to the css rules, but when you then click the eye icon to display a layer, inkscape will crash.
If it does not crash, the file is saved without the style rules.

Net result: after making changes to a track file, you always have to go in and re-add the 2 lines of css.

We can place this css in an external file, and link to it from the svg file but this doesn't solve the problems.

ideally

there would be some way to read the css only when the file is requested through a browser, and have inkscape ignore the layer-flipping css.

• display menu
• save / upload best laptime?

Implement a fuel/tire degration system, forcing a player to make a pit stop.

• depleting resource (fuel) when ontrack && speed > 0
• add colored rectangle to pit lane area, where when car.speed == 0, both resources replenish
• #37

• abu dhabi
• assen
• barcelona
• hockenheim
• interlagos
• monza

• all: list best laptime per track
• track: list all best laptimes sorted by laptime, display date
• write @curveball api to store laptimes