show range value

stop settings sending after settings loading
initialize colorMap when generating initial random matrix

data_src/index.html

@@ -48,7 +48,7 @@
                   <input type="radio" class="btn-check btnColorMode" id="btnColorMode_1" data-mode="1" autocomplete="off" disabled>
                   <label class="btn btn-outline-primary" for="btnColorMode_1">Simple</label>
                 
-                  <input type="radio" class="btn-check btnColorMode" id="btnColorMode_2" data-mode="2" data-control="#collapseDecay" autocomplete="off" disabled>
+                  <input type="radio" class="btn-check btnColorMode" id="btnColorMode_2" data-mode="2" data-control="#collapseColorDecay" autocomplete="off" disabled>
                   <label class="btn btn-outline-primary" for="btnColorMode_2">Dynamic</label>
                 </div>
               </div>
@@ -57,19 +57,19 @@
               <div class="row mb-2 px-3 collapse collapseSettings" id="collapseColorpicker">
                 <div id="colorpicker" class="d-flex justify-content-center"></div>
               </div>
-              <div class="row mb-2 px-3 collapse collapseSettings" id="collapseDecay">
-                <label for="rangeDecay" class="col-form-label">Cell Aging</label>
-                <input type="range" class="form-range rangeSetting" id="rangeDecay" data-name="colorDecay" min="1"
+              <div class="row mb-2 px-3 collapse collapseSettings" id="collapseColorDecay">
+                <label for="rangeColorDecay" class="col-form-label">Cell Aging: <span id="value_colorDecay">0</span>%</label>
+                <input type="range" class="form-range rangeSetting" id="rangeColorDecay" data-name="colorDecay" min="1"
                   max="100" steps="1" disabled>
               </div>
               <div class="row mb-2 px-3">
-                <label for="rangeBrightness" class="col-form-label">Brightness</label>
+                <label for="rangeBrightness" class="col-form-label">Brightness: <span id="value_brightness">0</span>%</label>
                 <input type="range" class="form-range rangeSetting" id="rangeBrightness" data-name="brightness" min="1"
                   max="100" steps="1" disabled>
               </div>
               <div class="row mb-2 px-3">
-                <label for="rangeSpeed" class="col-form-label">Speed</label>
-                <input type="range" class="form-range rangeSetting" id="rangeSpeed" data-name="interval" min="1" max="100"
+                <label for="rangeInterval" class="col-form-label">Speed: <span id="value_interval">0</span>%</label>
+                <input type="range" class="form-range rangeSetting" id="rangeInterval" data-name="interval" min="1" max="100"
                   steps="10" disabled>
               </div>
               <div class="row px-3 mt-4">

data_src/main.js

@@ -15,6 +15,7 @@ var settings = {
 var highscores = {};
 var initHighscores = true;
 var uiEnabled = false;
+var skipSendSettings = false;
 
 $(document).ready(function () {
     enabledUI(false);
@@ -30,6 +31,10 @@ $(window).on('load', function () {
     });
 });
 
+$(document).on('input', '.rangeSetting', function () {
+    $('#value_'+$(this).data('name')).text($(this).val());
+});
+
 $(document).on('change', '.rangeSetting', function () {
     var setting = $(this).data('name');
     var value = $(this).val();
@@ -103,7 +108,7 @@ function addMessage(msg) {
 }
 
 function sendSettings() {
-    if (!uiEnabled) {
+    if (!uiEnabled || skipSendSettings) {
         return;
     }
     var payload = {
@@ -165,6 +170,7 @@ function sendAction(action) {
 }
 
 function loadSettings(data) {
+    skipSendSettings = true;
     settings.brightness = data.brightness;
     settings.interval = data.interval;
     settings.colorMode = data.colorMode;
@@ -173,10 +179,14 @@ function loadSettings(data) {
     enabledUI(true);
     $('.btnColorMode').prop('checked', false);
     $('#btnColorMode_' + settings.colorMode).trigger('click');
-    $('#rangeDecay').val(mapRange(data.colorDecay, 100, 1, 1, 100));
+    $('#rangeColorDecay').val(mapRange(data.colorDecay, 100, 1, 1, 100));
+    $('#value_colorDecay').text($('#rangeColorDecay').val());
     $('#rangeBrightness').val(mapRange(data.brightness, 8, 255, 1, 100));
-    $('#rangeSpeed').val(mapRange(data.interval, 1000, 10, 1, 100));
+    $('#value_brightness').text($('#rangeBrightness').val());
+    $('#rangeInterval').val(mapRange(data.interval, 1000, 10, 1, 100));
+    $('#value_interval').text($('#rangeInterval').val());
     sendAction('getHighscores');
+    skipSendSettings = false;
 }
 
 function updateHighscore(hs) {

src/gameoflife.cpp

@@ -49,6 +49,7 @@ void createRandomMatrix(bool (&a)[SCREEN_HEIGHT][SCREEN_WIDTH])
     for (int col = 0; col < SCREEN_WIDTH; col++)
     {
       a[row][col] = random(100) < 25 ? 1 : 0;
+      colorMap[row][col] = 0;
     }
   }
 }