Add loading existing cars on page load. First part of #2

index.html

@@ -159,7 +159,6 @@
 
         function update() {
             updateTrack();
-
         }
 
         function updateTrack() {
@@ -272,7 +271,7 @@
                 });
         }
 
-        async function addCar(preselectedCar = null, preselectedSkin = null) {
+        async function addCar(preselectedCar = null, preselectedSkin = null, amount = 0) {
             const wrapper = document.createElement("div");
             wrapper.style.marginTop = "12px";
             wrapper.className = "car-block";
@@ -303,6 +302,9 @@
             amountSelect.style.marginLeft = "10px";
             amountSelect.type = "number";
             amountSelect.min = "1";
+            if (amount > 0) {
+                amountSelect.value = amount;
+            }
             amountSelect.placeholder = "Amount";
             amountSelect.min = "10";
 
@@ -346,7 +348,7 @@
                     skinSelect.appendChild(o);
                 });
 
-                // show first stkin
+                // show first skin
                 try {
                     updateImage(car.skins[0].image);
                 } catch (e) {
@@ -391,7 +393,23 @@
             }
         }
 
+        function getCurrentCars() {
+            const url = '/currentcars';
+            fetch(url)
+                .then(res => res.json())
+                .then(data => {
+                    console.log("Current cars:", data);
+                    data.cars.forEach(c => {
+                        addCar(c.car, c.skin, c.amount);
+                    });
+                });
+        }
+
         addCarBtn.addEventListener("click", addCar);
+
+        window.onload = () => {
+            getCurrentCars();
+        };
     </script>
 </body>