help messages change every 10s

diff --git a/public/index.html b/public/index.html
index d57dc94709dcf9d0c9f3d8340c189e06dda87192..15b87bfc0fd1608e9e9569f665d3b3c1c5b08d4f 100644 (file)
--- a/public/index.html
+++ b/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>

diff --git a/public/trivabble.css b/public/trivabble.css
index f29f6101c87a648958d2ee33ffdd5e270bddeb07..990c949f2e87aff8ba8b42d06ac42f7b6d969357 100644 (file)
--- a/public/trivabble.css
+++ b/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;
+}

diff --git a/public/trivabble.js b/public/trivabble.js
index 2be3b7d7b21115df8c13992b0866f03e3036b34c..d3789668ebc136a78e4825185531fd628345bcd6 100644 (file)
--- a/public/trivabble.js
+++ b/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();