MAPG-235 timeLimit restored after reload of the page. Time limit selector usability improved

public/static/css/maps.css

@@ -93,6 +93,7 @@ div.mapItem>div.buttonContainer {
 #restrictions input[type=range] {
     height: 1.5em;
     margin-left: 2em;
+    width: 70%;
 }
 
 #timeLimitType {

public/static/js/maps.js

@@ -65,6 +65,22 @@
         }
     };
 
+    var Util = {
+        printTimeForHuman: function (time) {
+            if (time < 60) {
+                return '' + time + ' seconds';
+            } else if (time == 60) {
+                return '1 minute';
+            } else if (time % 60 == 0) {
+                return '' + Math.floor(time / 60) + ' minutes';
+            } else if (time % 60 == 1) {
+                return '' + Math.floor(time / 60) + ' minutes and 1 second';
+            } else {
+                return '' + Math.floor(time / 60) + ' minutes and ' + time % 60 + ' seconds';
+            }
+        }
+    };
+
     Maps.addStaticMaps();
 
     Maps.initializeDescriptionDivs();
@@ -119,7 +135,7 @@
             document.getElementById('playMode').style.visibility = 'hidden';
             
             var timeLimit = document.getElementById('timeLimit').value;
-            document.getElementById('timeLimitLabel').innerText = 'Time limit of ' + timeLimit + ' seconds per round';
+            document.getElementById('timeLimitLabel').innerText = 'Time limit of ' + Util.printTimeForHuman(timeLimit);
         };
     }
 
@@ -149,7 +165,7 @@
 
     document.getElementById('timeLimit').oninput = function () {
         var timeLimit = document.getElementById('timeLimit').value;
-        document.getElementById('timeLimitLabel').innerText = 'Time limit of ' + timeLimit + ' seconds per round';
+        document.getElementById('timeLimitLabel').innerText = 'Time limit of ' + Util.printTimeForHuman(timeLimit);
         document.getElementById('timerEnabled').checked = true;
     }
 })();