Chat

2026-10-21 12:11:21 -04:00
parent ec36013313
commit b340ec3814
6 changed files with 275 additions and 0 deletions
@@ -10,11 +10,14 @@ let statsLoaded = false;
 let subscribed = false;
 let currentShareText = "";
 let selectedSection = null;
+let chatSignature = null;
+let chatLoading = false;

 function renderSections() {
  const available = {
    "account-section": true,
    "leaderboard-section": true,
+    "chat-section": true,
    "stats-section": statsLoaded,
    rules: true,
    "share-controls": !!currentShareText,
@@ -32,6 +35,8 @@ function renderSections() {
    panel.hidden = panel.id !== selectedSection;
  });
  $("mailing-list").hidden = !token || subscribed;
+  $("chat-form").hidden = !token;
+  $("chat-login").hidden = !!token;
  $("section-hint").hidden = selectedSection !== null;
 }

@@ -42,6 +47,7 @@ $("section-nav").addEventListener("click", (event) => {
  renderSections();
  if (selectedSection === "account-section") loadMe();
  if (selectedSection === "leaderboard-section") loadLeaderboard();
+  if (selectedSection === "chat-section") loadChat();
 });

 async function api(method, path, body) {
@@ -185,6 +191,7 @@ async function refreshState() {
  if (game.ended && !statsLoaded) loadStats();
  updateButton();
  await loadLeaderboard();
+  if (selectedSection === "chat-section") await loadChat();
 }

 function updateButton() {
@@ -254,6 +261,65 @@ async function loadLeaderboard() {
  }
 }

+async function loadChat() {
+  if (chatLoading) return;
+  chatLoading = true;
+  try {
+    const { messages } = await api("GET", "/api/chat");
+    const signature = messages.map((message) => message.id).join(",");
+    const list = $("chat-messages");
+    if (signature !== chatSignature) {
+      const atBottom = list.scrollHeight - list.scrollTop - list.clientHeight < 40;
+      const firstLoad = chatSignature === null;
+      const previousScroll = list.scrollTop;
+      list.replaceChildren(...messages.map((message) => {
+        const item = el("li");
+        const avatar = el("span", Array.from(message.name.trim())[0]?.toUpperCase() || "?", "chat-avatar");
+        avatar.setAttribute("aria-hidden", "true");
+        const content = el("div", undefined, "chat-message-content");
+        const heading = el("div", undefined, "chat-heading");
+        const date = new Date(message.at);
+        const timestamp = el("time", date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }));
+        timestamp.dateTime = new Date(message.at).toISOString();
+        timestamp.title = date.toLocaleString();
+        heading.append(el("strong", message.name), timestamp);
+        // Names and messages are untrusted text, never HTML.
+        content.append(heading, el("p", message.message));
+        item.append(avatar, content);
+        return item;
+      }));
+      chatSignature = signature;
+      list.scrollTop = firstLoad || atBottom ? list.scrollHeight : previousScroll;
+    }
+    $("chat-status").textContent = messages.length ? "" : "No messages yet. Start the conversation!";
+  } catch {
+    $("chat-status").textContent = "Messages could not be refreshed. Retrying automatically...";
+  } finally {
+    chatLoading = false;
+  }
+}
+
+$("chat-form").addEventListener("submit", async (event) => {
+  event.preventDefault();
+  const input = $("chat-input");
+  $("chat-send").disabled = true;
+  $("chat-error").textContent = "";
+  try {
+    await api("POST", "/api/chat", { message: input.value });
+    input.value = "";
+    await loadChat();
+  } catch (error) {
+    $("chat-error").textContent = error.message;
+    if (error.status === 401) {
+      token = null;
+      localStorage.removeItem(TOKEN_KEY);
+      updateButton();
+    }
+  } finally {
+    $("chat-send").disabled = false;
+  }
+});
+
 async function loadStats() {
  try {
    const s = await api("GET", "/api/stats");
@@ -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>
@@ -220,6 +220,67 @@ button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visibl

 .error { color: var(--red); }

+#chat-section {
+  padding: 0;
+  text-align: left;
+  background: var(--mantle);
+  border: 1px solid var(--surface);
+  border-radius: 18px;
+  box-shadow: 0 12px 32px #11111b40;
+  overflow: hidden;
+}
+.chat-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 1.75rem;
+  background: linear-gradient(120deg, #cba6f710, transparent 75%);
+  border-bottom: 1px solid var(--surface);
+}
+.chat-eyebrow { margin: 0 0 0.65rem; font-size: 0.65rem; letter-spacing: 0.18em; color: var(--mauve); font-weight: 700; }
+#chat-heading { margin: 0; font-size: clamp(1.4rem, 2.5vw, 1.9rem); line-height: 1.2; letter-spacing: -0.03em; }
+.chat-description { margin: 0.7rem 0 0; font-size: 0.85rem; color: var(--subtext); line-height: 1.6; }
+.chat-badge { flex-shrink: 0; padding: 0.35rem 0.6rem; border: 1px solid #a6e3a130; border-radius: 20px; color: var(--green); background: #a6e3a109; font-size: 0.65rem; }
+.chat-feed { padding: 1rem 1.25rem; min-height: 280px; }
+.chat-feed-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; color: var(--subtext); font-size: 0.65rem; padding: 0.25rem 0.25rem 0.9rem; }
+.chat-feed-label span:first-child { text-transform: uppercase; letter-spacing: 0.12em; }
+#chat-messages {
+  list-style: none;
+  margin: 0;
+  padding: 0 0.25rem;
+  max-height: 360px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--surface) transparent;
+}
+#chat-messages:empty { display: none; }
+#chat-messages li { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.7rem 0; }
+.chat-avatar { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 11px; background: #cba6f71a; color: var(--mauve); font-weight: 700; font-size: 0.8rem; }
+#chat-messages li:nth-child(3n + 2) .chat-avatar { background: #94e2d51a; color: var(--teal); }
+#chat-messages li:nth-child(3n) .chat-avatar { background: #fab3871a; color: var(--peach); }
+.chat-message-content { min-width: 0; flex: 1; }
+.chat-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; padding: 0.1rem 0 0.35rem; }
+.chat-heading strong { color: var(--text); font-size: 0.8rem; overflow-wrap: anywhere; }
+.chat-heading time { color: var(--subtext); font-size: 0.65rem; }
+#chat-messages p { margin: 0; padding: 0.7rem 0.85rem; border: 1px solid #45475a60; border-radius: 0 12px 12px 12px; background: var(--base); font-size: 0.9rem; line-height: 1.55; overflow-wrap: anywhere; }
+.chat-composer { border-top: 1px solid var(--surface); padding: 1.25rem 1.5rem; background: #11111b35; }
+#chat-form { display: block; }
+#chat-form label { display: block; margin-bottom: 0.6rem; font-size: 0.75rem; font-weight: 600; color: var(--subtext); }
+.chat-input-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem; background: var(--base); border: 1px solid var(--surface); border-radius: 12px; }
+.chat-input-row:focus-within { border-color: var(--mauve); }
+#chat-input { flex: 1; min-width: 0; width: 100%; border: none; background: transparent; padding: 0.5rem; font-size: 0.85rem; }
+#chat-input:focus-visible { outline-offset: -2px; border-radius: 6px; }
+#chat-input::placeholder { color: var(--subtext); }
+#chat-form #chat-send { display: flex; align-items: center; gap: 0.65rem; min-height: 40px; border: none; border-radius: 8px; background: var(--mauve); color: var(--crust); font-weight: 700; font-size: 0.8rem; }
+#chat-send span { font-size: 1.2rem; }
+#chat-form #chat-send:hover { background: var(--lavender); }
+#chat-send:disabled { opacity: 0.5; cursor: wait; }
+#chat-help { margin: 0.7rem 0 0; color: var(--subtext); font-size: 0.65rem; line-height: 1.6; }
+#chat-status { margin: 0; padding: 4rem 1rem; text-align: center; color: var(--subtext); font-size: 0.85rem; line-height: 1.6; }
+#chat-login { margin: 0; color: var(--lavender); font-size: 0.85rem; line-height: 1.6; }
+#chat-status:empty, #chat-error:empty { display: none; }
+
 #rules { text-align: left; font-size: 0.9rem; color: var(--subtext); }

@media (max-width: 760px) {
@@ -244,4 +305,7 @@ button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visibl
  #press-result { max-width: 110px; margin: 0.4rem 0 0; font-size: 0.7rem; }
  #press-result:empty { display: none; }
  .section-browser { margin-top: 1rem; }
+  .chat-header { padding: 1.25rem; flex-wrap: wrap; }
+  .chat-feed { padding: 0.9rem; min-height: 230px; }
+  .chat-composer { padding: 1rem; }
 }