help messages change every 10s

public/index.html

@@ -78,7 +78,7 @@
                 <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>
-            <div id="help-message">
+            <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>

public/trivabble.css

@@ -47,7 +47,7 @@ html, #board, [draggable], .tile {
     color: green;
 }
 
-#clear-game, #help-message, #clear-rack {
+#clear-game, #clear-rack {
     white-space:pre-wrap;
 }
 
@@ -562,3 +562,12 @@ td.blink {
 #info-spell-checking a {
     color:black;
 }
+
+#help-messages {
+    border:1px solid silver;
+    box-sizing:border-box;
+    overflow:auto;
+    width: 20em;
+    margin-bottom:1px;
+    height:5em;
+}

public/trivabble.js

@@ -1953,6 +1953,27 @@
         }
     }
 
+    function changeHelpMessage() {
+        if (typeof changeHelpMessage.index === "undefined") {
+            changeHelpMessage.index = -1;
+        }
+
+        const helpMessages = document.getElementById("help-messages");
+        if (helpMessages) {
+            const listOfMessages = helpMessages.getElementsByTagName("p");
+            if ((changeHelpMessage.index >= 0) && (changeHelpMessage.index <listOfMessages.length)) {
+                listOfMessages[changeHelpMessage.index].style.display = "none";
+            }
+            changeHelpMessage.index++;
+            if (changeHelpMessage.index === listOfMessages.length) {
+                changeHelpMessage.index = 0;
+            }
+            listOfMessages[changeHelpMessage.index].style.display = "";
+        }
+        setTimeout(changeHelpMessage, 10000);
+    }
+    changeHelpMessage(-1);
+
     function repromptName(f) {
         if (localStorage.trivabblePlayerName && localStorage.trivabblePlayerName.trim()) {
             f();