load colorPicker early, but send events only after all scripts loaded

data_src/index.html

@@ -145,7 +145,7 @@
             </div>
             <div class="col-6 text-end">
               <button type="button" class="btn btn-sm btn-danger btnConfirm" data-action="reset"
-                data-title="Factory Reset" data-text="erase all highscores and settings?" disabled>Factory
+                data-title="Factory Reset" data-text="erase all highscores and settings? (ToDo)" disabled>Factory
                 Reset</button>
             </div>
           </div>
@@ -184,6 +184,15 @@
     crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5.5.2/dist/iro.min.js"
     integrity="sha256-XQju26ya9yEvX99+M2rrLah6xHsjZIGK1LvX/L3RjQ0=" crossorigin="anonymous"></script>
+  <script>
+    var colorPicker = new iro.ColorPicker('#colorpicker', {
+      layout: [
+        {
+          component: iro.ui.Wheel,
+        }
+      ]
+    });
+  </script>
   <script src="main.js"></script>
 
 </body>

data_src/main.js

@@ -12,7 +12,6 @@ var settings = {
 
 var highscores = {};
 var initHighscores = true;
-
 var uiEnabled = false;
 
 $(document).ready(function () {
@@ -22,6 +21,11 @@ $(document).ready(function () {
 
 $(window).on('load', function () {
     startSocket();
+
+    colorPicker.on('input:end', function (color) {
+        settings.color = color.rgb;
+        sendSettings();
+    });    
 });
 
 $(document).on('change', '.rangeSetting', function () {
@@ -39,19 +43,6 @@ $(document).on('change', '.rangeSetting', function () {
     sendSettings();
 });
 
-var colorPicker = new iro.ColorPicker('#colorpicker', {
-    layout: [
-        {
-            component: iro.ui.Wheel,
-        }
-    ]
-});
-
-colorPicker.on('input:end', function (color) {
-    settings.color = color.rgb;
-    sendSettings();
-});
-
 $('.btnAction').on('click', function () {
     var action = $(this).data('action');
     sendAction(action);
@@ -62,7 +53,7 @@ $('.btnAction').on('click', function () {
 
 $('.btnConfirm').on('click', function () {
     $('#modalConfirm').find('.modal-title').text($(this).data('title'));
-    $('#modalConfirm').find('.modal-body').text('Do your really want to ' + $(this).data('text') + ' (NFG)');
+    $('#modalConfirm').find('.modal-body').text('Do your really want to ' + $(this).data('text'));
     $('#modalConfirm').find('.btnAction').data('action', $(this).data('action'));
     modalConfirm.show();
 });