Design improvement

l10n/po/fr/trivabble.po

@@ -253,8 +253,8 @@ msgstr "Partie :"
 msgid  "{0}d"
 msgstr "{0}j"
 
-msgid  "{0}h {0}' {1}''"
-msgstr "{0} h {0} min {1} s"
+msgid  "{0}h {1}' {2}''"
+msgstr "{0} h {1} min {2} s"
 
 msgid  "{0}' {1}''"
 msgstr "{0} min {1}"

l10n/pot/trivabble.pot

@@ -258,7 +258,7 @@ msgstr ""
 msgid  "{0}d"
 msgstr ""
 
-msgid  "{0}h {0}' {1}''"
+msgid  "{0}h {1}' {2}''"
 msgstr ""
 
 msgid  "{0}' {1}''"

public/index.html

@@ -60,13 +60,13 @@
                     <p><label><input type="checkbox" id="msg-sound" /><span data-l10n="text-content">Sound of messages</span></label></p>
                 </div>
                 <div>
-                    <p id="disable-spell-checker-p" hide="true">
+                    <p id="disable-spell-checker-p" hidden="true">
                         <label>
                             <input type="checkbox" id="disable-spell-checker" />
                             <span data-l10n="text-content">Disable the spell checker</span>
                         </label>
                     </p>
-                    <p id="no-spell-checker-p" hide="false">
+                    <p id="no-spell-checker-p" hidden="false">
                         <span data-l10n="text-content">Spell checking is not available for this language.</span>
                     </p>
                 </div>
@@ -108,22 +108,27 @@
             <table id="board">
                 <tr><td class="corner"></td></tr>
             </table>
+            <div id="rack-timer">
+                <div id="timer" hidden="true">
+                    <p>
+                        <span data-l10n="text-content">Turn:</span>
+                        <span id="timer-turn">--</span>
+                    </p>
+                    <p>
+                        <span data-l10n="text-content">Game:</span>
+                        <span id="timer-game">--</span>
+                    </p>
+                </div>
             <div id="rack-outer">
                 <div id="rack"></div>
             </div>
+            </div>
         </div>
 
         <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" class="timer-turn">Turn:</span>
-                <span id="timer-turn">0</span>
-                <br />
-                <span data-l10n="text-content" class="timer-game">Game:</span>
-                <span id="timer-game">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></p>
             <table id="participants">

public/trivabble.css

@@ -179,6 +179,7 @@ button {
 
 #rack {
     background:#EEC;
+    z-index:10;
     font-size:0;
     border-radius:4px;
     display:inline-block;
@@ -733,14 +734,34 @@ button#next-help-msg:hover {
     flex-direction:column;
 }
 
-#timer-turn, .timer-turn {
-    text-align: center;
-    font-size: small;
-    color: #333;
+#rack-timer {
+    position:relative;
 }
 
-#timer-game, .timer-game {
-    text-align: center;
-    font-size: x-small;
-    color: #AAA;
+#timer {
+    position:absolute;
+    display:table;
+    top:0;
+    font-size:0.8em;
+    right: 0.8rem;
+    text-align:right;
+}
+
+#timer > p {
+    margin:0;
+    display:table-row;
+    z-index:0;
+}
+
+#timer > p > span {
+    display:table-cell;
+}
+
+#timer > p > span:first-child {
+    color:gray;
+    padding-right: 1ex;
+}
+
+#timer > p > span:last-child {
+    color:#333;
 }

public/trivabble.js

@@ -162,8 +162,8 @@
 
     const trivabble = window.trivabble = {l10n: _};
 
-    function format(s, v1, v2) {
-        return s.replace("{0}", v1).replace("{1}", v2);
+    function format(s, v1, v2, v3) {
+        return s.replace("{0}", v1).replace("{1}", v2).replace("{2}", v3);
     }
 
     let board;
@@ -2236,8 +2236,11 @@
         const h = Math.floor((delta % (60 * 60 * 24)) / (60 * 60));
         const m = Math.floor((delta % (60 * 60)) / 60);
         const s = Math.floor(delta % 60);
+        const sec = (s < 10) ? "0" + s : s;
+        const min = (m < 10) ? "0" + m : m;
+        const hour = (h < 10) ? "0" + h : h;
         return ((d > 0) ? format(_("{0}d "), d) : "") +
-            ((h > 0) ? format(_("{0}h {1}' {2}''"), h, m, s) : format(_("{0}' {1}''"), m, s));
+            ((h + d > 0) ? format(_("{0}h {1}' {2}''"), (d > 0) ? hour : h, min, sec) : format(_("{0}' {1}''"), m, sec));
     }
 
     function timerDate() {
@@ -2264,7 +2267,7 @@
     function setTimerState(state) {
         setSetting("TimerEnable", state);
         if (state) {
-            document.getElementById("timer").style.display = "block";
+            document.getElementById("timer").hidden = false;
             document.getElementById("enable-timer").checked = true;
             setSetting("Timer", setInterval(function () {
                 const currentTimer = timerDate();