Correctly handle jockers and missing tiles when showing the rack

diff --git a/trivabble.css b/trivabble.css
index 7feeaaeaab31a2aca89cfad939b1a7f4680796dd..7e994e9e1b4134f81f0f46dea5d736eb6889569a 100644 (file)
--- a/trivabble.css
+++ b/trivabble.css
@@ -219,6 +219,7 @@ button:hover {
     width: 1.5em;
     height: 1.5em;
     margin:2px;
+    vertical-align:bottom;
 }
 
 #chat-messages .tile-letter {

diff --git a/trivabble.js b/trivabble.js
index 909422b5056254a4566370987816f896a88f3c1b..6adeac514699f27e26eb3e7ee2d93be7e74806b3 100644 (file)
--- a/trivabble.js
+++ b/trivabble.js
@@ -1249,18 +1249,32 @@
         myConfirm(
             _("Are you sure you want to show your rack to everybody?"),
             function () {
+                const letters = playerLetters.map(
+                    function (tilePlaceholer) {
+                        return tilePlaceholer.querySelector(".tile");
+                    }
+                ).filter(function (tile) {
+                    return tile !== null;
+                });
+
                 sendCmds([{
                     cmd: "msg",
-                    msg: _("Here is my rack:") + " " + playerLetters.map(
-                        (tile) => (
-                            tile.textContent === ""
-                                ? _("joker")
-                                : tile.querySelector(".tile-letter").textContent
-                        )
+                    msg: _("Here is my rack:") + " " + letters.map(
+                        function (tile) {
+                            return (
+                                tile.textContent === ""
+                                    ? _("joker")
+                                    : tile.querySelector(".tile-letter").textContent
+                            );
+                        }
                     ).join(", "),
                     specialMsg: {
                         type: "rack",
-                        rack: playerLetters.map((tile) => tile.querySelector(".tile-letter").textContent)
+                        rack: letters.map(
+                            function (tile) {
+                                return tile.querySelector(".tile-letter").textContent
+                            }
+                        )
                     }
                 }]);
             }