Merge branch 'develop' into timer

diff --cc l10n/po/fr/trivabble.po
index a12c96f5047cce660a4afe2d449cf04f1cbf55e7,d46f707bea1134aa0c86fa8fcfc2e33205ef99f2..50a414fa4b7e25784f11e9e85ff4fd3dbe418e66
--- 1/l10n/po/fr/trivabble.po
--- 2/l10n/po/fr/trivabble.po
+++ b/l10n/po/fr/trivabble.po
@@@ -220,20 -220,8 +223,26 @@@ msgstr "Durée du flash laser :
  msgid  "Flash light color"
  msgstr "Couleur du flash laser"
  
+ msgid  "Tip!"
+ msgstr  "Astuce !"
+ 
+ msgid "Next tip"
+ msgstr "Astuce suivante"
++
 +msgid  "Turn timer:"
 +msgstr "Temps du tour :"
 +
 +msgid  "Global timer:"
 +msgstr "Temp global :"
 +
 +msgid  "{0}d"
 +msgstr "{0}j"
 +
 +msgid  "{0}h"
 +msgstr "{0}h"
 +
 +msgid  "{0}' {1}''"
 +msgstr "{0}' {1}''"
 +
 +msgid  "Enable timer"
 +msgstr "Activer le timer"

diff --cc l10n/pot/trivabble.pot
index 69976b6e95b88ea5a0db05d89574510bbbfb3a8a,c0d9408333fbc9d4e29c326d5c92c42fe99455bd..89d41edd06befca65d7f2b6c2b5a55f2a2035d1d
--- 1/l10n/pot/trivabble.pot
--- 2/l10n/pot/trivabble.pot
+++ b/l10n/pot/trivabble.pot
@@@ -225,20 -219,14 +222,32 @@@ msgstr "
  msgid  "Flash light color"
  msgstr ""
  
+ msgid  "Click on (+) to increase someone's score."
+ msgstr ""
+ 
+ msgid  "Show a cell to everyone by double-clicking on it."
+ msgstr ""
+ 
+ msgid  "Tip!"
+ msgstr ""
+ 
+ msgid "Next tip"
+ msgstr ""
++
 +msgid  "Turn timer:"
 +msgstr ""
 +
 +msgid  "Global timer:"
 +msgstr ""
 +
 +msgid  "{0}d"
 +msgstr ""
 +
 +msgid  "{0}h"
 +msgstr ""
 +
 +msgid  "{0}' {1}''"
 +msgstr ""
 +
 +msgid  "Enable timer"
 +msgstr ""

diff --cc public/index.html
index e64be9ca43fb714b4de468122aa9b3a9482886ad,e5924b201b97161bcfdc11d000b60c3a1aed9a5f..5b4bf7a57f16dcf3efd6fd292abb5fbff448295b
--- 1/public/index.html
--- 2/public/index.html
+++ b/public/index.html
@@@ -54,19 -58,36 +58,39 @@@
                      <p><label><input type="checkbox" id="tiles-sound" /><span data-l10n="text-content">Sound of the tiles</span></label></p>
                      <p><label><input type="checkbox" id="msg-sound" /><span data-l10n="text-content">Sound of messages</span></label></p>
                  </div>
-                 <div id="prefs">
-                     <p id="enable-spell-checker-outer" style="display:none"><label><input type="checkbox" id="enable-spell-checker" /> <span data-l10n="text-content">Enable spell checker</span></label></p>
+                 <div>
+                     <p>
+                         <label for="double-tap-duration" data-l10n="text-content">Double tap duration:</label>
+                         <span class="span-range">
+                             <span data-l10n="text-content">(fast)</span>
+                             <input type="range" min="0" max="0" id="double-tap-duration" />
+                             <span data-l10n="text-content">(slow)</span><br/>
+                         </span>
+                     </p>
                  </div>
-                 <div id="prefs">
-                           <p><label><span data-l10n="text-content">(fast)</span><input type="range" min="0" max="0" id="double-tap-duration"/><span data-l10n="text-content">(slow)</span><br/><span data-l10n="text-content">Double tap duration</span></label></p>
-                           <p><label><span data-l10n="text-content">(fast)</span><input type="range" min="0" max="0" id="flash-light-duration"/><span data-l10n="text-content">(slow)</span><br/><span data-l10n="text-content">Flash light duration</span></label></p>
-                     <p><label><input type="text" size="6" id="flash-light-color"/> <span data-l10n="text-content">Flash light color</span></label></p>
+                 <div>
+                     <p>
+                         <label for="flash-light-duration" data-l10n="text-content">Flash light duration:</label>
+                         <span class="span-range">
+                             <span data-l10n="text-content">(fast)</span>
+                             <input type="range" min="0" max="0" id="flash-light-duration" />
+                             <span data-l10n="text-content">(slow)</span>
+                         </span>
+                     </p>
                  </div>
-                 <div id="prefs">
+                 <div>
+                     <p id="flash-light-color-p">
+                         <label>
+                             <input type="color" size="6" id="flash-light-color" />
+                             <span data-l10n="text-content">Flash light color</span>
+                         </label>
+                     </p>
+                 </div>
++                <div>
 +                    <p><label><input type="checkbox" id="enable-timer" /> <span data-l10n="text-content">Enable timer</span></label></p>
 +                      </div>
              </div>
-         </div>
+         </section>
  
        <div id="content">
              <table id="board">
@@@ -77,17 -98,12 +101,19 @@@
              </div>
          </div>
  
-         <div id="panel">
-             <button id="btn-settings" data-l10n="text-content">Settings</button>
+         <div id="panel" class="panel">
+             <div id="btn-settings-wrapper">
+                 <button id="btn-settings" data-l10n="text-content">Settings</button>
+             </div>
 +            <p id="timer" style="display:none">
 +                <span data-l10n="text-content">Turn timer:</span>
 +                <span id="timer-turn">0</span>
 +                <br />
 +                <span data-l10n="text-content">Global timer:</span>
 +                <span id="timer-global">0</span>
 +            </p>
              <div id="bag"></div>
-             <p><span data-l10n="text-content">Number of tiles in the bag:</span><br /><span id="remaining-letters">102</span><br /><span id="help-bag" data-l10n="text-content">Click on it to take one.</span><a href="#" id="help-clear" style="display:none"></a></p>
+             <p><span data-l10n="text-content">Number of tiles in the bag:</span><br /><span id="remaining-letters">102</span></p>
              <table id="participants">
                  <tr><th data-l10n="text-content">Participant</th><th data-l10n="text-content">Rack</th><th data-l10n="text-content">Score</th><th data-l10n="text-content">Turn</th></tr>
                  <tr id="participants-placeholder"><td colspan="4" data-l10n="text-content">Waiting for other participants…</td></tr>

diff --cc public/trivabble.css
index 9528819aab3c16c04046c87765abe48daf138803,711af9652f3ba8ba1df664b0bb3be9197ee66be5..e7ad35a0658f3bb822a5ac69c16c0a5ad88cf703
--- 1/public/trivabble.css
--- 2/public/trivabble.css
+++ b/public/trivabble.css
@@@ -563,6 -640,91 +640,95 @@@ td.blink 
      color:black;
  }
  
+ #help-messages {
+     box-sizing:border-box;
+     overflow:auto;
+     width: auto;
+     margin-bottom:1px;
+ }
+ 
+ #help-box {
+     margin-left:1ex;
+     margin-top:1ex;
+     display:-webkit-flex;
+     -webkit-flex-direction:column;
+     -webkit-justify-content:center;
+     -webkit-align-items:center;
+     align-items:center;
+     display:flex;
+     flex-direction:column;
+     justify-content:center;
+ }
+ 
+ #help-box-inner {
+     display:-webkit-flex;
+     -webkit-flex-direction:row;
+     display:flex;
+     flex-direction:row;
+     min-height:2em;
+     border-top:1px solid gray;
+     border-bottom:1px solid gray;
+     -webkit-align-items:center;
+     align-items:center;
+ }
+ 
+ button#next-help-msg {
+     border:0;
+     background:none;
+     color:#333;
+     font-size:1.5rem;
+     margin-right:0.5ex;
+     background:#F1F1F1;
+     border-radius:100rem;
+     height:1.5em;
+     width:1.5em;
+     font-weight:bold;
+     transition:500ms;
+     padding:0;
+ }
+ 
+ button#next-help-msg:hover {
+     background:#CCC;
+ }
+ 
+ #help-box-title {
+     margin:0;
+     padding:0 0 0.25ex 0;
+     text-align:right;
+     width:100%;
+     color:gray;
+     font-size:small;
+     font-style:italic;
+ }
+ 
+ #help-messages p {
+     margin:0;
+     font-size:0.9;
+     color:#222;
+     padding:0 0.5ex;
+     max-width:17em;
+ }
+ 
+ #help-box-inner:before {
+     content:"i";
+     display:inline-block;
+     height:1.2em;
+     width:1.2em;
+     font-style:italic;
+     font-weight:bold;
+     font-family:serif;
+     color:#AAA;
+     border:2px solid;
+     border-radius:100rem;
+ }
+ 
+ #panel-buttons {
+     display:-webkit-flex;
+     -webkit-flex-direction: column;
+     display:flex;
+     flex-direction:column;
+ }
++
 +#timer {
 +    text-align: center;
 +}

diff --cc public/trivabble.js
index 56aaa08c721f222d93dd55dba2bd7f33dad24442,ccfd03dbe8b35ad007f9a690f25e8a2c3e9e8e44..e74c3f877f05663ec6954385979c52382899cf9c
--- 1/public/trivabble.js
--- 2/public/trivabble.js
+++ b/public/trivabble.js
@@@ -49,9 -54,10 +54,11 @@@
      setConf("ENABLE_TILE_SOUND",     true);
      setConf("ENABLE_SPELL_CHECKER",  false);
      setConf("DOUBLE_TAP_DURATIONS",  [650, 1100, 1800, 3000, 5000]);
+     setConf("DOUBLE_TAP_DURATION",   middle("DOUBLE_TAP_DURATIONS"));
      setConf("FLASH_LIGHT_DURATIONS", [800, 1600, 3200]);
-     setConf("FLASH_LIGHT_COLOR",     "#E3E");
+     setConf("FLASH_LIGHT_DURATION",  middle("FLASH_LIGHT_DURATIONS"));
+     setConf("FLASH_LIGHT_COLOR",     "#ee6633");
 +    setConf("ENABLE_TIMER",          true);
  
      function isSetting(key) {
          return Object.prototype.hasOwnProperty.call(Conf, key) ||
@@@ -2087,55 -2075,25 +2078,74 @@@
          }
      }
  
+     function nextHelpMessage() {
+         if (typeof nextHelpMessage.index === "undefined") {
+             nextHelpMessage.index = -1;
+         }
+ 
+         const helpMessages = document.getElementById("help-messages");
+         if (helpMessages) {
+             const listOfMessages = helpMessages.getElementsByTagName("p");
+             if ((nextHelpMessage.index >= 0) && (nextHelpMessage.index < listOfMessages.length)) {
+                 listOfMessages[nextHelpMessage.index].hidden = true;
+             }
+             nextHelpMessage.index++;
+             if (nextHelpMessage.index === listOfMessages.length) {
+                 nextHelpMessage.index = 0;
+             }
+             listOfMessages[nextHelpMessage.index].hidden = false;
+         }
+     }
+ 
 +    function timerString(delta) {
 +        const d = Math.floor(delta / (60 * 60 * 24));
 +        const h = Math.floor((delta % (60 * 60 * 24)) / (60 * 60));
 +        const m = Math.floor((delta % (60 * 60)) / 60);
 +        const s = Math.floor(delta % 60);
 +        return ((d > 0) ? format(_("{0}d "), d) : "") +
 +               ((h > 0) ? format(_("{0}h "), h) : "") +
 +               format(_("{0}' {1}''"), m, s);
 +    }
 +
 +    function timerDate() {
 +        return Math.floor(Date.now() / 1000);
 +    }
 +
 +    function initTimer() {
 +        if (!Object.prototype.hasOwnProperty.call(localStorage, "timerTurnDate")) {
 +            localStorage.timerTurnDate = timerDate();
 +        }
 +        if (!Object.prototype.hasOwnProperty.call(localStorage, "timerGlobalDate")) {
 +            localStorage.timerGlobalDate = timerDate();
 +        }
 +        if (!Object.prototype.hasOwnProperty.call(localStorage, "timerEnable")) {
 +            localStorage.timerEnable = getSetting("ENABLE_TIMER");
 +        }
 +        document.getElementById("enable-timer").onclick = function () {
 +            setTimerState(document.getElementById("enable-timer").checked);
 +        };
 +        setTimerState(localStorage.timerEnable);
 +    }
 +
 +    function setTimerState(state) {
 +        if (state) {
 +            document.getElementById("timer").style.display = "block";
 +            document.getElementById("enable-timer").checked = true;
 +            localStorage.timer = setInterval(function () {
 +                document.getElementById("timer-turn").textContent = timerString(timerDate() - Number(localStorage.timerTurnDate));
 +                document.getElementById("timer-global").textContent = timerString(timerDate() - Number(localStorage.timerGlobalDate));
 +            }, 1000);
 +        } else {
 +            document.getElementById("timer").style.display = "none";
 +            document.getElementById("enable-timer").checked = false;
 +            if (Object.prototype.hasOwnProperty.call(localStorage, "timer")) {
 +                clearInterval(localStorage.timer);
 +                delete localStorage.timer;
 +            }
 +            localStorage.timerGlobalDate = localStorage.timerTurnDate = timerDate();
 +        }
 +    }
 +
      function repromptName(f) {
          if (getSetting("trivabblePlayerName") && getSetting("trivabblePlayerName").trim()) {
              f();
@@@ -2356,8 -2321,8 +2373,9 @@@
          initGame();
          initSound();
          initSpellChecker();
-         initLaserPointer();
+         initFlashLight();
+         nextHelpMessage();
 +        initTimer();
      };
  
      trivabble.l10nError = trivabble.run;