add a button to display bag content

diff --git a/public/index.html b/public/index.html
index 182d8a0a21b01fa11eff0a1d8fe3c97c67e0984c..eb03babd2b36b64bdcce53d783137dec83d77db6 100644 (file)
--- a/public/index.html
+++ b/public/index.html
@@ -166,6 +166,7 @@
                 <button id="show-rack" class="minibutton" data-l10n="text-content">Show my rack to other players</button>
                 <button id="check-spelling" class="minibutton" data-l10n="text-content" hidden="true">Check spelling for new words</button>
                 <button id="score-words" class="minibutton" data-l10n="text-content">Score new words</button>
+                <button id="ask-show-bag" class="minibutton" data-l10n="text-content">Show bag content</button>
             </div>
             <div id="help-box">
                 <p id="help-box-title" data-l10n="text-content">Tip!</p>

diff --git a/public/trivabble.js b/public/trivabble.js
index b3d65f4d5a7962e7f1e4cae9726bac91333f3e05..41490f5b3261bd49c4e214b9e05b58b106f39e4d 100644 (file)
--- a/public/trivabble.js
+++ b/public/trivabble.js
@@ -1182,6 +1182,16 @@
         }
     }
 
+    function showBag(bag) {
+        const letters = document.createElement("div");
+        letters.className = "tile-list";
+
+        const content = infoMessage(_("Bag contains:") + " ");
+        bag.sort().map(function (letter) { letters.appendChild(makeLetter(letter, false, true))});
+        content.appendChild(letters);
+        //myAlert(letters);
+    }
+
     function applyAction(data) {
         switch (data.action) {
             case "pushBag": //TODO
@@ -1235,6 +1245,11 @@
 
             case "setRackCell":
                 setRackCell(data.indexTo, data.letter);
+                break;
+
+            case "showBag":
+                showBag(data.bag);
+                break;
         }
     }
 
@@ -2179,6 +2194,15 @@
         );
     }
 
+    function askShowBag() {
+        myConfirm(
+            _("Do you really want to see bag content? It's a kind of cheating!"),
+            function () {
+                sendCmds([{cmd: "showBag"}]);
+            }
+        );
+    }
+
     function triggerFlashLight(cell) {
         if (!cell) {
             return;
@@ -2682,6 +2706,7 @@
         document.getElementById("next-help-msg").onclick = nextHelpMessage;
         document.getElementById("disable-spell-checker").onclick = toggleSpellChecker;
         document.getElementById("score-words").onclick = scoreWords;
+        document.getElementById("ask-show-bag").onclick = askShowBag;
         document.getElementById("theme").onchange = onChangeTheme;
         window.addEventListener("keydown", function (e) {
             if (e.key === "Escape") {

diff --git a/server/trivabble-server.js b/server/trivabble-server.js
index 3216cbfb316f7f331c5cbb832dfe5edfac6eed54..63325a196fb7e3e6f1ba17e31a8fd3ce81a95470 100644 (file)
--- a/server/trivabble-server.js
+++ b/server/trivabble-server.js
@@ -929,6 +929,16 @@ function handleCommand(cmdNumber, message, response) {
         }
 
 
+        case "showBag": {
+            reply(message, response, cmdNumber, {
+                error: 0,
+                action: "showBag",
+                bag: game.bag
+            });
+
+            break;
+        }
+
         case "msg": {
             const msg = {
                 date: new Date(),