Chat

static/index.html

@@ -36,6 +36,7 @@
     <nav id="section-nav" aria-label="Game sections">
       <button type="button" data-section="account-section" aria-controls="account-section" aria-expanded="false">Log in / Join</button>
       <button type="button" data-section="leaderboard-section" aria-controls="leaderboard-section" aria-expanded="false">Leaderboard</button>
+      <button type="button" data-section="chat-section" aria-controls="chat-section" aria-expanded="false">Chat</button>
       <button type="button" data-section="stats-section" aria-controls="stats-section" aria-expanded="false" hidden>Final stats</button>
       <button type="button" data-section="rules" aria-controls="rules" aria-expanded="false">Rules</button>
       <button type="button" data-section="share-controls" aria-controls="share-controls" aria-expanded="false" hidden>Share</button>
@@ -94,6 +95,34 @@
       </div>
     </section>
 
+    <section id="chat-section" data-panel hidden aria-labelledby="chat-heading">
+      <header class="chat-header">
+        <div>
+          <p class="chat-eyebrow">THE PLAYER LOUNGE</p>
+          <h2 id="chat-heading">A little company<br>while you wait.</h2>
+          <p class="chat-description">Talk strategy. Share a close call. Say hello.</p>
+        </div>
+        <span class="chat-badge">Public room</span>
+      </header>
+      <div class="chat-feed">
+        <div class="chat-feed-label"><span>Conversation</span><span>Latest 100 messages</span></div>
+        <ol id="chat-messages" aria-label="Chat messages" tabindex="0"></ol>
+        <p id="chat-status" role="status">Loading messages&hellip;</p>
+      </div>
+      <div class="chat-composer">
+        <p id="chat-login">Pull up a seat. Log in or join the game to say hello.</p>
+        <form id="chat-form" hidden>
+          <label for="chat-input">Add to the conversation</label>
+          <div class="chat-input-row">
+            <input id="chat-input" maxlength="200" placeholder="What's on your mind?" required autocomplete="off" aria-describedby="chat-help">
+            <button id="chat-send" type="submit">Send <span aria-hidden="true">&uarr;</span></button>
+          </div>
+        </form>
+        <p id="chat-help">Be kind. 200 characters max &middot; 2 seconds between messages</p>
+        <p id="chat-error" class="error" role="status"></p>
+      </div>
+    </section>
+
     <section id="stats-section" data-panel hidden>
       <h2>Game over &mdash; final global stats</h2>
       <div id="stats-summary"></div>