Work on the presentation of the tip help box

l10n/po/fr/trivabble.po

@@ -136,6 +136,12 @@ msgstr "Tour"
 msgid  "Who's turn? Click on the Turn button!"
 msgstr "À qui le tour ? Cliquez sur le bouton Tour !"
 
+msgid  "Click on (+) to increase someone's score."
+msgstr "Cliquez sur (+) pour augmenter le score de quelqu’un."
+
+msgid  "Show a cell to everyone by double-clicking on it."
+msgstr "Montrez une case à tout le monde en double-cliquant dessus."
+
 msgid  "Show my rack to other players"
 msgstr "Montrer mon jeu aux autres"
 
@@ -216,3 +222,9 @@ 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"

l10n/pot/trivabble.pot

@@ -221,3 +221,15 @@ 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 ""

public/index.html

@@ -78,22 +78,25 @@
                 <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>
             </table>
-            <button id="next-help-msg" class="minibutton" data-l10n="text-content">Next help message</button>
+            <div id="panel-buttons">
-            <div id="help-messages">
+                <button id="clear-rack" class="minibutton" data-l10n="text-content">Put back all the tiles of&#10;your rack in the bag</button>
-                <p data-l10n="text-content" style="display:none">Click on the bag to take one tile.</p>
+                <button id="show-rack" class="minibutton" data-l10n="text-content">Show my rack to other players</button>
-                <p data-l10n="text-content" style="display:none">Click on someone's score&#10;to change it.</p>
+                <button id="check-spelling" class="minibutton" data-l10n="text-content" style="display:none">Check spelling for new words</button>
-                <p data-l10n="text-content" style="display:none">Who's turn? Click on the Turn button!</p>
-                <p data-l0n="text-content" style="display:none">Spell checking is based on: <a rel="noopener noreferrer" target="_blank" href="http://aspell.net">Aspell</a></p>
-                <p data-l0n="text-content" style="display:none">Click on the (+) to add someone's score.</p>
-                <p data-l0n="text-content" style="display:none">Double click or double tap on a cell to highlight it.</p>
-                <p data-l0n="text-content" style="display:none">Timer can be activated/deactivated in the preference window.</p>
-                <p data-l0n="text-content" style="display:none">Flashing light is adjustable in the preference window.</p>
-                <p data-l0n="text-content" style="display:none">Sound options are in the preference window.</p>
-                <p data-l0n="text-content" style="display:none">Move tile from your rag to the board to place new words.</p>
             </div>
-            <button id="clear-rack" class="minibutton" data-l10n="text-content">Put back all the tiles of&#10;your rack in the bag</button>
+            <div id="help-box">
-            <button id="show-rack" class="minibutton" data-l10n="text-content">Show my rack to other players</button>
+                <p id="help-box-title" data-l10n="text-content">Tip!</p>
-            <button id="check-spelling" class="minibutton" data-l10n="text-content" style="display:none">Check spelling for new words</button>
+                <div id="help-box-inner">
+                    <div id="help-messages">
+                        <p data-l10n="text-content" style="display:none">Click on the bag to take one tile.</p>
+                        <p data-l10n="text-content" style="display:none">Click on someone's score&#10;to change it.</p>
+                        <p data-l10n="text-content" style="display:none">Who's turn? Click on the Turn button!</p>
+                        <p data-l10n="text-content" style="display:none">Click on (+) to increase someone's score.</p>
+                        <p data-l10n="text-content" style="display:none">Show a cell to everyone by double-clicking on it.</p>
+                    </div>
+                    <button id="next-help-msg" class="minibutton" data-l10n="title" title="Next tip">→</button>
+                </div>
+            </div>
+            <p id="info-spell-checking" style="display:none;"><span data-l10n="text-content">Spell checking is based on:</span> <a rel="noopener noreferrer" target="_blank" href="http://aspell.net">Aspell</a></p>
         </div>
     </body>
 </html>

public/trivabble.css

@@ -141,7 +141,7 @@ body {
     display:-webkit-flex;
     display:flex;
     -webkit-flex-direction:column;
-    flex-direction:column
+    flex-direction:column;
 }
 
 button {
@@ -335,8 +335,8 @@ td.blink {
 
 #panel {
     -webkit-justify-content:center;
-    justify-content:center;
+    justify-content:space-between;
-    text-align:center
+    text-align:center;
 }
 
 #bag, #rack-outer {
@@ -369,7 +369,6 @@ td.blink {
     height:160px;
     background:url(bag.svg) no-repeat;
     background-size:100% 100%;
-    flex:1;
 }
 
 #bag:hover {
@@ -564,10 +563,78 @@ td.blink {
 }
 
 #help-messages {
-    border:1px solid silver;
     box-sizing:border-box;
     overflow:auto;
     width: 20em;
     margin-bottom:1px;
-    height:5em;
+}
+
+#help-box {
+    margin-left:1ex;
+    margin-top:1ex;
+    align-items:center;
+    display:flex;
+    flex-direction:column;
+    justify-content:center;
+}
+
+#help-box-inner {
+    display:flex;
+    flex-direction:row;
+    min-height:2em;
+    border-top:1px solid gray;
+    border-bottom:1px solid gray;
+    align-items:center;
+}
+
+#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;
+}
+
+#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;
+}
+
+#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:flex;
+    flex-direction:column;
 }

public/trivabble.js

@@ -1880,8 +1880,10 @@
         if (!Conf.ENABLE_SPELL_CHECKER || localStorage.spellCheckerEnabled === "false") {
             document.getElementById("check-spelling").style.display = "none";
             document.getElementById("enable-spell-checker").checked = false;
+            document.getElementById("info-spell-checking").style.display = "none";
         } else {
             document.getElementById("check-spelling").style.display = "";
+            document.getElementById("info-spell-checking").style.display = "";
             document.getElementById("enable-spell-checker").checked = true;
         }
     }
@@ -1890,11 +1892,11 @@
         if (x < 0) {
             return null;
         }
-        
+
         if (x < values.length) {
             return values[Math.floor(x)];
         }
-        
+
         for (let i = 0; i < values.length; i++) {
             if (x <= values[i]) {
                 return i;