In this javascript for leaflet.js why isn't the click event for the improveBoilerButton increasing the speed of the moverMarker(speed) and moveBackMarker(speed) marker animations. - 'var money = 100000;
var numberOfCarriages = 1;
var speed = 60;

const map = L.map("map").setView([54.2231637, -1.9381623], 6);
// Add custom zoom control to the map with position set to ‘topright’
const customZoomControl = L.control.zoom({ position: "topright" }).addTo(map);

// Remove the default zoom control from the map
map.removeControl(map.zoomControl);

let clickedPoints = [];
let isLineDrawn = false;
let marker; // Declare the marker variable
let progress = 0;
// Function to create circle markers with click functionality
function createCircleMarkers(geojson) {
  return L.geoJSON(geojson, {
    pointToLayer: function (feature, latlng) {
      const circleMarker = L.circleMarker(latlng, {
        radius: 4,
        fillColor: "#ff7800",
        color: "#000",
        weight: 0.2,
        opacity: 1,
        fillOpacity: 0.8,
      });

      // Attach the feature to the circle marker
      circleMarker.feature = feature;

      circleMarker.on("mouseover", function () {
        this.bindPopup(feature.properties.city).openPopup();
      });

      circleMarker.on("click", function (e) {
        if (!isLineDrawn) {
          clickedPoints.push(e.target); // Push the circle marker with attached feature

          if (clickedPoints.length === 2) {
            const firstCityCoords =
              clickedPoints[0].feature.geometry.coordinates;
            const secondCityCoords =
              clickedPoints[1].feature.geometry.coordinates;

            const polyline = L.polyline(
              clickedPoints.map((p) => p.getLatLng())
            ).addTo(map);

            const firstCity = clickedPoints[0].feature.properties.city;
            const secondCity = clickedPoints[1].feature.properties.city;

            clickedPoints = [];
            isLineDrawn = true;

            // Remove click event listener after a line has been drawn
            map.off("click");
            // Set the map bounds to show the area with the polyline
            map.fitBounds(polyline.getBounds());
            money = money - 50000; // Subtract 50000 from money
            const moneyDisplay = document.getElementById("moneydisplay");
            const moneyString = `£${money}`; // Assuming money is a number
            moneyDisplay.textContent = moneyString;

            const instructionsElement = document.getElementById("instructions");

            // Clear any existing content in the instructions element:
            instructionsElement.innerHTML = "";

            // Create separate paragraph elements:
            const congratulationsParagraph = document.createElement("p");
            congratulationsParagraph.textContent = `Congratulations you have built your first train line from ${firstCity} to ${secondCity}!`;

            const costsParagraph = document.createElement("p");
            costsParagraph.textContent = `Your construction costs were £50,000. You have £50,000 remaining.`;

            const buyTrainParagraph = document.createElement("p");
            buyTrainParagraph.textContent = "You now need to buy a train.";
            const newTrainParagraph = document.createElement("p");
            newTrainParagraph.textContent =
              "At this time you can only afford to buy the train engine the Sleeping Lion. The Sleeping Lion has a traveling speed of 60 miles per hour. It can pull four carriages. Which means your train will have a capacity of around 120 seated passengers";
            const traincost = document.createElement("p");
            traincost.textContent = `The Sleeping Lion will cost you £30,000 to purchase. Do you wish to buy the Sleeping Lion?`;

            // Append paragraphs to the instructions element:
            instructionsElement.appendChild(congratulationsParagraph);
            instructionsElement.appendChild(costsParagraph);
            instructionsElement.appendChild(buyTrainParagraph);
            instructionsElement.appendChild(newTrainParagraph);
            instructionsElement.appendChild(traincost);

            // Add button element:
            const buyButton = document.createElement("button");
            buyButton.id = "buybutton";
            buyButton.textContent = "Buy Train";

            // Append the button element to the instructions element:
            instructionsElement.appendChild(buyButton);

            // Add click event listener to the Buy Train button
            document
              .getElementById("buybutton")
              .addEventListener("click", function () {
                money = money - 30000; // Subtract 30000 from money
                const moneyDisplay = document.getElementById("moneydisplay");
                const moneyString = `£${money}`;
                moneyDisplay.textContent = moneyString;
                // Update instructions content after successful purchase
                instructionsElement.innerHTML = ""; // Clear previous content

                const successMessage = document.createElement("p");
                successMessage.textContent = `You now have a train line from ${firstCity} to ${secondCity} and a train! Press the button below to begin operations.`;
                instructionsElement.appendChild(successMessage);

                // Add button element:
                const trainButton = document.createElement("button");
                trainButton.id = "trainbutton";
                trainButton.textContent = "Start Train";

                // Append the button element to the instructions element:
                instructionsElement.appendChild(trainButton);

                // trainButton click event listener:
                trainButton.addEventListener("click", function () {
                  // Clear any existing content in the instructions element:
                  instructionsElement.innerHTML = "";

                  const networkMessage = document.createElement("p");
                  networkMessage.textContent = `The ${firstCity} to ${secondCity} Rail Company is in operation!`;

                  const scoreMessage = document.createElement("p");
                  scoreMessage.textContent = `You will now earn money every time your train arrives at a station (depending on the number of passengers on board). You do not need to worry about scheduling. Your train will now automatically run between your two stations.`;

                  const updatesMessage = document.createElement("p");
                  updatesMessage.textContent = `As you earn money you can invest in improving the ${firstCity} to ${secondCity} Rail Company. At the moment your train only has one passenger carriage. Why not increase how much money you make by buying more carriages? Each carriage will cost £20,000.`;

                  instructionsElement.appendChild(networkMessage);
                  instructionsElement.appendChild(scoreMessage);
                  instructionsElement.appendChild(updatesMessage);

                  // Get a reference to the div element with id "menu"
                  const menuDiv = document.getElementById("menu");

                  // Create a new image element
                  const image = new Image();

                  // Set the image source URL
                  image.src =
                    "https://cdn.glitch.global/df81759e-a135-4f89-a809-685667ca62db/carriage.png?v=1712498925908";

                  // Optionally set the image alt text (for accessibility)
                  image.alt = "add carriages";

                  // Set image size using inline styles
                  image.style.width = "60px";
                  image.style.height = "60px";

                  // Append the image element to the div
                  menuDiv.appendChild(image);
                  // Attach a mouseover event listener to the image
                  image.addEventListener("mouseover", () => {
                    image.style.cursor = "pointer";
                  });
                  // Attach a click event listener to the image
                  image.addEventListener("click", () => {
                    console.log("Image clicked!");

                    // Check if enough money is available
                    if (money >= 20000) {
                      // Check if maximum number of carriages reached
                      if (numberOfCarriages < 4) {
                        numberOfCarriages++;
                        money -= 20000; // Subtract 20000 from money

                        const moneyDisplay =
                          document.getElementById("moneydisplay");
                        const moneyString = `£${money}`;
                        moneyDisplay.textContent = moneyString;

                        // Update instructions content after successful purchase
                        instructionsElement.innerHTML = ""; // Clear previous content

                        const newcarriageMessage = document.createElement("p");
                        newcarriageMessage.textContent = `Congratualtions you have bought a new passnger carriage. You now have ${numberOfCarriages} passenger carriages.`;

                        instructionsElement.appendChild(newcarriageMessage);

                        // Create a new image element for the train
                        const newTrainImage = new Image();
                        newTrainImage.src =
                          "https://cdn.glitch.global/df81759e-a135-4f89-a809-685667ca62db/train.png?v=1712498933227";
                        newTrainImage.alt = "Train Carriage";
                        newTrainImage.style.width = "60px"; // Adjust size as needed

                        newTrainImage.style.height = "60px"; // Adjust size as needed

                        // Attach a click event listener to the newTrainImage
                        newTrainImage.addEventListener("click", () => {
                          console.log("Train icon clicked!");
                          instructionsElement.innerHTML = ""; // Clear previous content

                          const improveBoilerButton =
                            document.createElement("button");
                          improveBoilerButton.textContent =
                            "Improve Boiler for £2500"; // Add functionality to the button (optional)

                          improveBoilerButton.addEventListener("click", () => {
  if (money >= 2500) {
    //increase speed 
    increaseSpeed();
    // Restart both animations with the updated speed
    moveMarker(speed); // Restart the forward animation
    moveBackMarker(speed); // Restart the backward animation
     money = money - 2500; // Subtract 30000 from money
                const moneyDisplay = document.getElementById("moneydisplay");
                const moneyString = `£${money}`;
                moneyDisplay.textContent = moneyString;
             
  } else {
    console.log("Insufficient funds! You need £2500 to improve the boiler.");
     instructionsElement.innerHTML = ""; // Clear previous content

                      // ... insufficient funds logic ...
                      const fundsMessage = document.createElement("p");
                      fundsMessage.textContent = `Insufficient funds!`;

                      instructionsElement.appendChild(fundsMessage);
                    
  }
});

                          instructionsElement.appendChild(improveBoilerButton);
                        });

                        newTrainImage.addEventListener("mouseover", () => {
                          newTrainImage.style.cursor = "pointer";
                        });

                        // Append the new train image to the menu element
                        const menuDiv = document.getElementById("menu");
                        menuDiv.appendChild(newTrainImage);
                      } else {
                        console.log(
                          "Maximum number of carriages reached! You can't buy more."
                        );
                        instructionsElement.innerHTML = ""; // Clear previous content

                        const maxCarriageMessage = document.createElement("p");
                        maxCarriageMessage.textContent =
                          "You already have the maximum number of carriages (4).";
                        instructionsElement.appendChild(maxCarriageMessage);
                      }
                    } else {
                      console.log(
                        "Insufficient funds! You need £20,000 to buy a carriage."
                         // ... insufficient funds logic ...
                      );
                      instructionsElement.innerHTML = ""; // Clear previous content

                      // ... insufficient funds logic ...
                      const nomoneyMessage = document.createElement("p");
                      nomoneyMessage.textContent = `Insufficient funds! You need £20,000 to buy a carriage.`;

                      instructionsElement.appendChild(nomoneyMessage);
                    }
                  });

                  const firstPoint = L.latLng(
                    firstCityCoords[1],
                    firstCityCoords[0]
                  );
                  const secondPoint = L.latLng(
                    secondCityCoords[1],
                    secondCityCoords[0]
                  );

                  const intervalDuration = 10; // milliseconds per frame
                  const distance = firstPoint.distanceTo(secondPoint);
                  const steps = ((distance / speed) * 1000) / intervalDuration; // Assuming speed of 35 miles per hour
                  const latStep = (secondPoint.lat - firstPoint.lat) / steps;
                  const lngStep = (secondPoint.lng - firstPoint.lng) / steps;

                  // Create the marker and set its initial position
                  marker = L.marker(firstPoint).addTo(map);
                  
                  const increaseSpeed = () => {
  const speedIncrease = 20;
  speed += speedIncrease;
};

                  const moveMarker = (speed) => {
                    if (progress < steps) {
                      const newLat = firstPoint.lat + latStep * progress;
                      const newLng = firstPoint.lng + lngStep * progress;
                      const newLatLng = L.latLng(newLat, newLng);

                      marker.setLatLng(newLatLng); // Update the marker's position

                      progress++;
                      setTimeout(moveMarker, intervalDuration);
                    } else {
                      // Marker reaches the second point, update money
                      money +=
                        Math.floor(Math.random() * (2000 - 1000 + 1)) +
                        1000 * numberOfCarriages;
                      const moneyDisplay =
                        document.getElementById("moneydisplay");
                      const moneyString = `£${money}`;
                      moneyDisplay.textContent = moneyString;

                      // Wait two seconds before animating back and call moveBackMarker recursively
                      setTimeout(() => {
                        moveBackMarker(speed);
                      }, 2000); // Wait for 2 seconds (2000 milliseconds)
                    }
                  };

                  const moveBackMarker = (speed) => {
                    // Corrected calculation for animating back from second point to first
                    if (progress > 0) {
                      const newLat =
                        secondPoint.lat - latStep * (steps - progress);
                      const newLng =
                        secondPoint.lng - lngStep * (steps - progress);
                      const newLatLng = L.latLng(newLat, newLng);

                      marker.setLatLng(newLatLng); // Update the marker's position

                      progress--;
                      setTimeout(moveBackMarker, intervalDuration);
                    } else {
                      console.log("Reached starting point again.");
                      // Add random number to money and update display
                      money +=
                        Math.floor(Math.random() * (2000 - 1000 + 1)) +
                        1000 * numberOfCarriages;
                      const moneyDisplay =
                        document.getElementById("moneydisplay");
                      const moneyString = `£${money}`;
                      moneyDisplay.textContent = moneyString;

                      // Reset progress for next round trip
                      progress = 0;

                      // Recursively call moveMarker to start next animation cycle
                      moveMarker(speed);
                    }
                  };

                  moveMarker(speed); // Start the animation
                });
              });
          }
        }
      });

      return circleMarker;
    },
  });
}




fetch("gb.geojson")
  .then((response) => response.json())
  .then((geojson) => {
    L.geoJSON(geojson, {
      fillColor: "none", // Style for polygon (empty fill)
      weight: 1,
      color: "#000",
      opacity: 1,
      fillOpacity: 0,
    }).addTo(map);
  })
  .catch((error) => {
    console.error("Error loading GeoJSON:", error);
  });

fetch("cities.geojson")
  .then((response) => response.json())
  .then((geojson) => {
    createCircleMarkers(geojson).addTo(map);
  })
  .catch((error) => {
    console.error("Error loading GeoJSON:", error);
  });
'