Timer next to the settings button

public/index.html

@@ -114,11 +114,9 @@
         </div>
 
         <div id="panel" class="panel">
-            <div id="btn-settings-wrapper">
+            <div id="btn-settings-and-timer">
                 <button id="btn-settings" data-l10n="text-content">Settings</button>
-            </div>
-            <div id="timer" hidden="true">
-                <p>
+                <p id="timer" hidden="true">
                     <span data-l10n="text-content">Turn:</span> <span id="timer-turn">--</span> / <span id="timer-game">--</span>
                 </p>
             </div>

public/trivabble.css

@@ -625,9 +625,10 @@ td.blink {
     border:none;
     margin:0;
     min-height: 2em;
+    float:right
 }
 
-#panel #btn-settings-wrapper {
+#panel #btn-settings-and-timer {
     text-align:right;
 }
 
@@ -737,12 +738,14 @@ button#next-help-msg:hover {
 #timer {
     font-size:x-small;
     text-align:center;
+    margin:0;
+    margin-right:1ex;
 }
 
-#timer > p > span {
+#timer > span {
     white-space:nowrap;
 }
 
-#timer > p > span:first-child {
+#timer > span:first-child {
     color:gray;
 }

public/trivabble.js

@@ -69,7 +69,7 @@
             Object.prototype.hasOwnProperty.call(localStorage, "trivabble" + key);
     }
 
-    function getSetting(key) {
+    function getSetting(key, defaultValue) {
         let type;
         let value;
 
@@ -102,6 +102,8 @@
             } else {
                 console.error("Unsupported type");
             }
+        } else if (defaultValue !== undefined) {
+            return defaultValue;
         }
 
         return value;
@@ -1088,7 +1090,8 @@
             case "popBag": //TODO
                 break;
 
-            case "reset": //TODO
+            case "reset":
+                setTimerDate(true);
                 tablePlayers = {};
                 while (participants.rows[1]) {
                     participants.removeChild(participants.rows[1]);
@@ -1621,9 +1624,6 @@
         myConfirm(
             _("Are you sure you want to put all the tiles back in the bag (in order to play another game)?"),
             function () {
-                const currentTimer = timerDate();
-                setSetting("TimerGameDate", currentTimer);
-                setSetting("TimerTurnDate", currentTimer);
                 sendCmds([{cmd: "resetGame"}]);
             }
         );
@@ -2247,43 +2247,51 @@
         return Math.floor(Date.now() / 1000);
     }
 
-    function initTimer() {
+    function setTimerDate(force) {
         const currentTimer = timerDate();
-        if (!isSetting("TimerTurnDate")) {
+        if (force || !isSetting("TimerTurnDate")) {
             setSetting("TimerTurnDate", currentTimer);
         }
-        if (!isSetting("TimerGameDate")) {
+
+        if (force || !isSetting("TimerGameDate")) {
             setSetting("TimerGameDate", currentTimer);
         }
-        if (!isSetting("TimerEnable")) {
-            setSetting("TimerEnable", getSetting("ENABLE_TIMER"));
-        }
+    }
+
+    function initTimer() {
+        setTimerDate();
+
         document.getElementById("enable-timer").onclick = function () {
             setTimerState(document.getElementById("enable-timer").checked);
         };
-        setTimerState(getSetting("TimerEnable"));
+
+        setTimerState(getSetting("TimerEnable", getSetting("ENABLE_TIMER")));
     }
 
-    function setTimerState(state) {
-        setSetting("TimerEnable", state);
-        if (state) {
+    let timerTimeout = 0
+
+    function updateTimer() {
+        const currentTimer = timerDate();
+        document.getElementById("timer-turn").textContent = timerString(currentTimer - getSetting("TimerTurnDate"));
+        document.getElementById("timer-game").textContent = timerString(currentTimer - getSetting("TimerGameDate"));
+    }
+
+    function setTimerState(enabled) {
+        setSetting("TimerEnable", enabled);
+        if (timerTimeout) {
+            clearInterval(timerTimeout);
+            timerTimeout = 0
+        }
+
+        if (enabled) {
             document.getElementById("timer").hidden = false;
             document.getElementById("enable-timer").checked = true;
-            setSetting("Timer", setInterval(function () {
-                const currentTimer = timerDate();
-                document.getElementById("timer-turn").textContent = timerString(currentTimer - getSetting("TimerTurnDate"));
-                document.getElementById("timer-game").textContent = timerString(currentTimer - getSetting("TimerGameDate"));
-            }, 1000));
+            timerTimeout = setInterval(updateTimer, 1000);
+            updateTimer();
         } else {
-            document.getElementById("timer").style.display = "none";
+            document.getElementById("timer").hidden = true;
             document.getElementById("enable-timer").checked = false;
-            if (isSetting("Timer")) {
-                clearInterval(getSetting("Timer"));
-                unsetSetting("Timer");
-            }
-            const currentTimer = timerDate();
-            setSetting("TimerGameDate", currentTimer);
-            setSetting("TimerTurnDate", currentTimer);
+            setTimerDate();
         }
     }