mathRaceGame: fixed the height problem for the settings-menu

Signed-off-by: Marcel Petrick <mail@marcelpetrick.it>

Author: marcelpetrick

mathRaceGame/index.html

@@ -62,6 +62,16 @@
             text-align: center;
             margin-top: 20px;
         }
+        #settings input[type="number"] {
+            padding: 6px;
+            height: 16px;
+            font-size: 16px;
+        }
+        #settings input[type="color"] {
+            height: 32px;
+            width: 50px;
+            vertical-align: middle;
+        }
         #countdown {
             font-size: 48px;
             text-align: center;
@@ -115,6 +125,7 @@ <h1 style="text-align: center;">🎉🏁 Math Race Game 🏁🎉</h1>
 ai_car = document["ai-car"]
 track_div = document["track"]
 countdown_div = document["countdown"]
+color_input = document["car-color"]
 
 # Utility Functions
 def move_car(car, steps):
@@ -187,7 +198,7 @@ <h1 style="text-align: center;">🎉🏁 Math Race Game 🏁🎉</h1>
 
     NUM_QUESTIONS = int(document["num-questions"].value)
     AI_INTERVAL_MS = int(document["ai-speed"].value)
-    player_car.style.backgroundColor = document["car-color"].value
+    player_car.style.backgroundColor = color_input.value
 
     track_width = track_div.offsetWidth
     car_width = player_car.offsetWidth
@@ -217,6 +228,10 @@ <h1 style="text-align: center;">🎉🏁 Math Race Game 🏁🎉</h1>
     countdown_div.text = "3"
     start_countdown()
 
+def update_car_color(ev):
+    player_car.style.backgroundColor = color_input.value
+
+color_input.bind("input", update_car_color)
 document["start-btn"].bind("click", on_start_click)
     </script>
 </body>