Allow players to show their rack

index.html

@@ -59,6 +59,7 @@
             <p id="help-scores" data-l10n="text-content">Click on someone's score&#10;to change it.</p>
             <p id="help-turn" data-l10n="text-content">Who's turn? Click on the Turn button!</p>
             <button id="clear-rack" class="minibutton" data-l10n="text-content">Put back all the tiles of&#10;your rack in the bag</button>
+            <button id="show-rack" class="minibutton" data-l10n="text-content">Show my rack to other players</button>
         </div>
     </body>
 </html>

l10n/po/fr/trivabble.po

@@ -131,4 +131,19 @@ msgid  "Turn"
 msgstr "Tour"
 
 msgid  "Who's turn? Click on the Turn button!"
-msgstr "À qui le tour ? Cliquez sur le bouton Tour !"
+msgstr "À qui le tour ? Cliquez sur le bouton Tour !"
+
+msgid  "Show my rack to other players"
+msgstr "Montrer mon jeu aux autres"
+
+msgid  "Are you sure you want to show your rack to everybody?"
+msgstr "Êtes-vous sûr·e de vouloir montrer votre jeu à tout le monde ?"
+
+msgid  "jocker"
+msgstr "jocker"
+
+msgid  "Here is my rack:"
+msgstr "Voici mon jeu :"
+
+msgid  "{0} shows their rack:"
+msgstr "{0} montre son jeu :"

l10n/pot/trivabble.pot

@@ -134,4 +134,19 @@ msgid  "It seems your browser went offline. Please reconnect to continue playing
 msgstr ""
 
 msgid  "Turn"
-msgstr ""
+msgstr ""
+
+msgid  "Show my rack to other players"
+msgstr ""
+
+msgid  "Are you sure you want to show your rack to everybody?"
+msgstr ""
+
+msgid  "jocker"
+msgstr ""
+
+msgid  "Here is my rack:"
+msgstr ""
+
+msgid  "{0} shows their rack:"
+msgstr ""

trivabble.css

@@ -211,10 +211,33 @@ button:hover {
     right: 2px;
 }
 
+#chat-messages .tile {
+    position:relative;
+    cursor:auto;
+    top:0;
+    left:0;
+    width: 1.5em;
+    height: 1.5em;
+    margin:2px;
+}
+
+#chat-messages .tile-letter {
+    font-size:0.9em;
+}
+
+#chat-messages .tile-score {
+    font-size: 0.4em;
+}
+
 #chat-messages.blink {
     animation:chat-blink 1s
 }
 
+#chat-messages .info {
+    color:gray;
+    font-style:italic;
+}
+
 td.blink {
     animation:td-blink 1s
 }

trivabble.js

@@ -460,18 +460,21 @@
         return false;
     }
 
-    function makeLetter(letter, highlight) {
+    function makeLetter(letter, highlight, noEvents) {
         const tile = document.createElement("span");
         tile.className = "tile";
         tile.appendChild(document.createElement("span"));
         tile.lastChild.className = "tile-letter";
         tile.appendChild(document.createElement("span"));
         tile.lastChild.className = "tile-score";
-        mouseDown(tile, dragTileBegin);
 
-        tile.addEventListener("contextmenu", preventDefault);
-        tile.addEventListener("touchstart", preventDefault);
-        tile.addEventListener("touchmove", preventDefault);
+        if (!noEvents) {
+            mouseDown(tile, dragTileBegin);
+
+            tile.addEventListener("contextmenu", preventDefault);
+            tile.addEventListener("touchstart", preventDefault);
+            tile.addEventListener("touchmove", preventDefault);
+        }
 
         setLetter(tile, letter, highlight);
         return tile;
@@ -590,9 +593,13 @@
             msgDom.lastChild.textContent = _("{0}: ").replace("{0}", sender);
         }
 
-        msgDom.appendChild(document.createElement("span"));
-        msgDom.lastChild.className = "msg-content";
-        msgDom.lastChild.textContent = content;
+        if (content instanceof Element) {
+            msgDom.appendChild(content);
+        } else {
+            msgDom.appendChild(document.createElement("span"));
+            msgDom.lastChild.className = "msg-content";
+            msgDom.lastChild.textContent = content;
+        }
 
         chatMessages.appendChild(msgDom);
 
@@ -609,6 +616,31 @@
         return msgDom;
     }
 
+    function handleMessage(msg) {
+        if (msg.specialMsg) {
+            if (msg.specialMsg.type === "rack") {
+                const content = document.createElement("div");
+                content.appendChild(document.createElement("span"));
+                content.lastChild.className = "info";
+                content.lastChild.textContent = format(_("{0} shows their rack:"), msg.sender);
+
+                const letters = document.createElement("div");
+                letters.className = "tile-list";
+
+                for (let i = 0; i < msg.specialMsg.rack.length; i++) {
+                    letters.appendChild(makeLetter(msg.specialMsg.rack[i], false, true));
+                }
+
+                content.appendChild(letters);
+                chatMessage("", content);
+                return;
+            }
+        }
+
+        chatMessage(msg.sender, msg.content);
+    }
+
+
     function refreshCurrentPlayer() {
         const row = tablePlayers[currentPlayer];
         if (currentPlayer && row && !row.classList.contains("current-player")) {
@@ -647,7 +679,7 @@
         }
 
         if (data.msg) {
-            chatMessage(data.msg.sender, data.msg.content);
+            handleMessage(data.msg);
         }
 
         if (typeof data.currentPlayer === "string") {
@@ -1213,6 +1245,29 @@
         );
     }
 
+    function showRack() {
+        myConfirm(
+            _("Are you sure you want to show your rack to everybody?"),
+            function () {
+                sendCmds([{
+                    cmd: "msg",
+                    msg: _("Here is my rack:") + " " + playerLetters.map(
+                        (tile) => (
+                            tile.textContent === ""
+                                ? _("joker")
+                                : tile.querySelector(".tile-letter").textContent
+                        )
+                    ).join(", "),
+                    specialMsg: {
+                        type: "rack",
+                        rack: playerLetters.map((tile) => tile.querySelector(".tile-letter").textContent)
+                    }
+                }]);
+            }
+        );
+
+    }
+
     function initChat() {
         chatMessages.style.width = chatMessages.offsetWidth + "px";
 
@@ -1352,6 +1407,7 @@
         document.getElementById("change-name").onclick = changeName;
         document.getElementById("join-game").onclick   = joinGame;
         document.getElementById("clear-rack").onclick  = clearRack;
+        document.getElementById("show-rack").onclick   = showRack;
         helpClear.onclick  = clearGame;
     }