From 5a4eda81f07f6324fc78452823afb6764d819dd7 Mon Sep 17 00:00:00 2001
From: Laurent Mazet <mazet@softndesign.org>
Date: Tue, 15 Sep 2020 22:35:47 +0200
Subject: [PATCH] help messages change every 10s

---
 public/index.html    |  2 +-
 public/trivabble.css | 11 ++++++++++-
 public/trivabble.js  | 21 +++++++++++++++++++++
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/public/index.html b/public/index.html
index d57dc94..15b87bf 100644
--- 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 f29f610..990c949 100644
--- 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 2be3b7d..d378966 100644
--- 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();
-- 
2.30.2