Engagement features

static/index.html

@@ -26,6 +26,7 @@
       <div id="zone-label"></div>
       <div id="zone-bar"><div id="zone-marker"></div></div>
       <p id="history-global-summary" aria-live="polite"></p>
+      <p id="presence-count" class="presence-count" role="status">Checking who's here&hellip;</p>
     </section>
 
     <section id="button-section">
@@ -110,10 +111,26 @@
       </header>
       <div class="panel-body">
       <p id="my-subscribed" hidden>You're on the mailing list. Thanks!</p>
+      <div class="presence-preference">
+        <label for="presence-opt-in"><input id="presence-opt-in" type="checkbox" aria-describedby="presence-help"> Show me online</label>
+        <p id="presence-help">Optional. Share that you're here, and your name in chat while viewing it. Only visible tabs count; no activity history is saved.</p>
+        <p id="presence-error" class="error" role="status"></p>
+      </div>
       <div class="score-grid">
         <div class="metric-card"><span>Total points</span><strong id="my-points">0</strong><small>Every moment counts</small></div>
         <div class="metric-card"><span>Button presses</span><strong id="my-presses">0</strong><small>Times you kept us going</small></div>
       </div>
+      <h3 class="subheading">Your personal bests</h3>
+      <div class="score-grid personal-records">
+        <div class="metric-card"><span>Closest call</span><strong id="my-closest-call">&mdash;</strong><small id="my-closest-detail">Your first press starts the story.</small></div>
+        <div class="metric-card"><span>Highest-scoring press</span><strong id="my-best-press">&mdash;</strong><small id="my-best-detail">Wait for your moment.</small></div>
+      </div>
+      <div class="rival-card" aria-labelledby="rival-heading">
+        <div class="header-topline"><p id="rival-heading" class="eyebrow">YOUR NEXT CHALLENGE</p><span id="my-position" class="site-badge"></span></div>
+        <h3 id="my-rival-title">Finding your place&hellip;</h3>
+        <p id="my-rival-description"></p>
+        <p class="fine-print">Positions follow the leaderboard: total points, then player name for ties. Any positive points gain puts you ahead of an equal score.</p>
+      </div>
       <h3 class="subheading">Your scoring zones</h3>
       <div class="table-scroll"><table id="my-zones" class="zone-table"></table></div>
       <details>
@@ -147,6 +164,10 @@
         </div>
         <span class="chat-badge">Public room</span>
       </header>
+      <div class="chat-presence" aria-label="Players viewing chat">
+        <p id="chat-presence-summary">Who's in the lounge</p>
+        <ul id="chat-presence-names" aria-label="Online chat players"></ul>
+      </div>
       <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>