Merge branch 'Arc676-hidestuff'

Author: RealFloorIsJava

src/res/js/match/match.js

@@ -416,11 +416,35 @@
     pickTab("tab-objects")
   }
 
+  /**
+   * Toggle hand visibility.
+   */
+  function toggleHand() {
+    $("#hand-container").toggle()
+    $("#toggle-hand-button").html(($("#hand-container").is(":visible") ? "Hide" : "Show") + " Hand")
+  }
+
+  /**
+   * Toggle chat visibility.
+   */
+  function toggleChat() {
+    $("#chat-container").toggle()
+    let chatVisible = $("#chat-container").is(":visible")
+    $("#toggle-chat-button").html((chatVisible ? "Hide" : "Show") + "  Chat")
+
+    // The match hand has the width of the chat hardcoded in its container
+    // size. When the chat is invisible, the hand should be centered in the
+    // new view.
+    $(".match-hand").css("width", chatVisible ? "" : "100vw")
+  }
+
   setInterval(loadStatus, 1000)
   loadStatus()
   setInterval(loadCards, 1000)
   loadCards()
   pickTab("tab-actions")
   $("#tab-actions").click(chooseActionsTab)
   $("#tab-objects").click(chooseObjectsTab)
+  $("#toggle-hand-button").click(toggleHand)
+  $("#toggle-chat-button").click(toggleChat)
 })()

src/res/tpl/match.html

@@ -18,6 +18,14 @@
         <a href="/match/abandon">Abandon match</a>
       </div>
       <div>
+        <a href="#" id="toggle-hand-button">
+          Hide Hand
+        </a>
+        &mdash;
+        <a href="#" id="toggle-chat-button">
+          Hide Chat
+        </a>
+        &mdash;
         <a href="#" id="lightLabel">
           Lights are being checked...
         </a>
@@ -46,13 +54,13 @@
           <div class="match-played-cards"></div>
         </div>
       </div>
-      <div class="match-chat">
+      <div id="chat-container" class="match-chat">
         <input type="text" class="chat-line" id="chatinput" placeholder="Type a message..." spellcheck="false" maxlength="120" autocomplete="off">
         <div class="chat-messages" id="chatlist"></div>
       </div>
     </div>
     <div class="match-hand">
-      <div class="match-hand-container">
+      <div id="hand-container" class="match-hand-container">
         <div class="match-hand-tabs">
           <div class="hand-tab-header" id="tab-actions">
             Actions