add "furthest X" line

[opyate]

I added a vertical red line which shows the furthest X distance travelled, so you can easily see if a car goes further than before in the current round.

The minimap also shows the red line, and any fog that was cleared in a round stays cleared in the next round.

Video:

[Imran-imtiaz48]

Code Review

Code Summary:

The code provided manages the minimap in a game, including updating fog distance based on player progress, resetting fog distance, and drawing various elements on the minimap. Recent changes seem to introduce the concept of maintaining and restoring the previous fog distance across rounds.

Strengths:

1. Fog Distance Management: The addition of previousMinimapFogDistance ensures that the fog distance is preserved across rounds, which can enhance gameplay by maintaining visual continuity.
2. Clear Structure: The code is well-organized, with distinct functions for different tasks (e.g., drawing the minimap, resetting the world).

Areas for Improvement:

1. Redundant Assignments: In the cw_drawMiniMap function, minimapfogdistance and fogdistance.width are reset at the beginning and then immediately updated. This can be streamlined.
2. Code Duplication: The code for updating the fog distance width is duplicated. Consider refactoring this into a separate function.
3. Comment Clarity: While comments are present, some additional comments explaining the overall purpose and flow of the code would improve readability.

Suggested Revision:

var minimapctx = minimapcanvas.getContext("2d");
var minimapscale = 3;
var minimapfogdistance = 0;
var previousMinimapFogDistance = 0;
var fogdistance = document.getElementById("minimapfog").style;

function showDistance(distance, height) {
    if (distance > minimapfogdistance) {
        updateFogDistance(distance);
    }
}

function updateFogDistance(distance) {
    fogdistance.width = 800 - Math.round(distance + 15) * minimapscale + "px";
    minimapfogdistance = distance;
    previousMinimapFogDistance = minimapfogdistance;
}

function cw_drawMiniMap() {
    var floorTiles = currentRunner.scene.floorTiles;
    var last_tile = null;
    var tile_position = new b2Vec2(-5, 0);

    // Reset minimap and context
    minimapcanvas.width = minimapcanvas.width;
    minimapctx.strokeStyle = "#3F72AF";
    minimapctx.beginPath();

    // Drawing floor tiles
    for (let i = 0; i < floorTiles.length; i++) {
        // Assuming there is some drawing logic here
    }
    minimapctx.stroke();

    // Draw the furthest distance flag
    var furthestDistanceX = world_def.furthestDistance;
    minimapctx.strokeStyle = "rgba(255, 87, 87, 0.5)";
    minimapctx.beginPath();
    minimapctx.moveTo((furthestDistanceX + 5) * minimapscale, 0);
    minimapctx.lineTo((furthestDistanceX + 5) * minimapscale, minimapcanvas.height);
    minimapctx.stroke();

    // Restore fog distance from the previous round
    minimapfogdistance = previousMinimapFogDistance;
    updateFogDistance(previousMinimapFogDistance);
}

function cw_resetWorld() {
    setupCarUI();
    cw_drawMiniMap();
    
    // Reset fog distances
    minimapfogdistance = 0;
    previousMinimapFogDistance = 0;

    cw_startSimulation();
}

Additional Recommendations:

1. Modular Functions: Extract repeated logic (like fog distance updates) into separate functions for better modularity and reusability.
2. Error Handling: Consider adding error handling for cases where elements like minimapcanvas or minimapfog might not be available.
3. Testing: Implement unit tests to ensure that the minimap and fog distance logic work correctly under various scenarios.

By addressing these points, the code will be more maintainable, readable, and robust.