initialize score display nicely

move reboot/reset to debug (ToDo: reset)

data_src/index.html

@@ -55,8 +55,6 @@
             <div class="col-6 text-end">
               <button type="button" class="btn btn-sm btn-outline-secondary me-1" data-bs-toggle="collapse"
                 data-bs-target="#debug">Debug</button>
-              <button type="button" class="btn btn-sm btn-danger btnAction" data-action="reboot"
-                disabled>Reboot</button>
             </div>
           </div>
         </div>
@@ -80,7 +78,7 @@
                 <div class="progress" role="progressbar" style="width: 0%" id="lastGame">
                   <div class="progress-bar progress-bar-striped progress-bar-animated bg-success"></div>
                 </div>
-                <div class="progress" role="progressbar" style="width: 100%" id="hsGames">
+                <div class="progress" role="progressbar" style="width: 0%" id="hsGames">
                   <div class="progress-bar bg-primary"></div>
                 </div>
               </div>
@@ -94,7 +92,7 @@
                 <div class="progress" role="progressbar" style="width: 0%" id="lastTicks">
                   <div class="progress-bar progress-bar-striped progress-bar-animated bg-success"></div>
                 </div>
-                <div class="progress" role="progressbar" style="width: 100%" id="hsTicks">
+                <div class="progress" role="progressbar" style="width: 0%" id="hsTicks">
                   <div class="progress-bar bg-primary"></div>
                 </div>
               </div>
@@ -108,7 +106,7 @@
                 <div class="progress" role="progressbar" style="width: 0%" id="lastCells">
                   <div class="progress-bar progress-bar-striped progress-bar-animated bg-success"></div>
                 </div>
-                <div class="progress" role="progressbar" style="width: 100%" id="hsCells">
+                <div class="progress" role="progressbar" style="width: 0%" id="hsCells">
                   <div class="progress-bar bg-primary"></div>
                 </div>
               </div>
@@ -132,18 +130,50 @@
           <div id="input_div">
             <div class="input-group">
               <span class="input-group-text">➡️</span>
-              <input type="text" id="prompt" class="form-control form-control-sm fs-6 font-monospace">
+              <input type="text" id="prompt" class="form-control form-control-sm font-monospace">
             </div>
 
           </div>
 
         </div>
+
+        <div class="card-footer text-body-secondary py-3">
+          <div class="row">
+            <div class="col-6">
+              <button type="button" class="btn btn-sm btn-warning btnConfirm" data-action="reboot" data-title="Reboot"
+                data-text="reboot?" disabled>Reboot</button>
+            </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
+                Reset</button>
+            </div>
+          </div>
+        </div>
+
       </div>
 
     </div> <!-- debug -->
 
   </div>
 
+  <div class="modal fade" id="modalConfirm" tabindex="-1">
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h1 class="modal-title fs-5"></h1>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body"></div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-success" data-bs-dismiss="modal">Cancel</button>
+          <button type="button" class="btn btn-danger btnAction" data-action="">Confirm</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
     integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
     crossorigin="anonymous"></script>

data_src/main.js

@@ -11,6 +11,7 @@ var settings = {
 };
 
 var highscores = {};
+var initHighscores = true;
 
 var uiEnabled = false;
 
@@ -54,6 +55,16 @@ colorPicker.on('input:end', function (color) {
 $('.btnAction').on('click', function () {
     var action = $(this).data('action');
     sendAction(action);
+    if(modalConfirm._isShown) {
+        modalConfirm.hide();
+    }
+});
+
+$('.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('.btnAction').data('action', $(this).data('action'));
+    modalConfirm.show();
 });
 
 $("#prompt").on('keydown', function (e) {
@@ -67,12 +78,11 @@ $("#prompt").on('keydown', function (e) {
 function enabledUI(enable) {
     if (enable) {
         $('#spinner').addClass('invisible');
-        $('.btnAction').prop('disabled', false);
-        $('.rangeSetting').prop('disabled', false);
+        $('.btnAction, .btnConfirm, .rangeSetting').prop('disabled', false);
         uiEnabled = true;
     } else {
         $('#spinner').removeClass('invisible');
-        $('.btnAction').prop('disabled', true);
+        $('.btnAction, .btnConfirm, .rangeSetting').prop('disabled', true);
         $('.rangeSetting').prop('disabled', true);
         uiEnabled = false;
     }
@@ -157,6 +167,10 @@ function loadSettings(data) {
 }
 
 function updateHighscore(hs) {
+    if (initHighscores) {
+        $('#hsGames, #hsTicks, #hsCells').css('width', '100%');
+        initHighscores = false;
+    }
     highscores = hs;
     $('#hsGames').find('.progress-bar').text(hs.games);
     $('#hsTicks').find('.progress-bar').text(hs.ticks);
@@ -184,3 +198,5 @@ function updateStats(lg) {
 function mapRange(number, inMin, inMax, outMin, outMax) {
     return Math.round((number - inMin) * (outMax - outMin) / (inMax - inMin) + outMin);
 }
+
+const modalConfirm = new bootstrap.Modal('#modalConfirm', {});