Leaderboard and dynamic layout

static/index.html

@@ -16,6 +16,7 @@
 </head>
 <body>
   <main>
+    <div class="game-panel">
     <h1>THE BUTTON</h1>
 
     <section id="timer-section">
@@ -28,7 +29,24 @@
     <section id="button-section">
       <button id="the-button" class="zone-green" disabled>PRESS</button>
       <p id="press-result" aria-live="polite"></p>
-      <div id="share-controls" hidden>
+    </section>
+    </div>
+
+    <div class="section-browser">
+    <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="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="mailing-list" aria-controls="mailing-list" aria-expanded="false" hidden>Mailing list</button>
+      <button type="button" data-section="share-controls" aria-controls="share-controls" aria-expanded="false" hidden>Share</button>
+      <button type="button" data-section="more" aria-controls="more" aria-expanded="false">More</button>
+      <button type="button" data-section="donate" aria-controls="donate" aria-expanded="false">Donate</button>
+    </nav>
+    <p id="section-hint">Select a section above to explore the game.</p>
+
+      <section id="share-controls" data-panel hidden>
+        <h2>Share your press</h2>
         <p>Share your press:</p>
         <div class="share-links">
           <a id="share-facebook" class="share-link" target="_blank" rel="noopener noreferrer">Facebook</a>
@@ -41,10 +59,10 @@
           <a id="share-mastodon" class="share-link" target="_blank" rel="noopener noreferrer">Share on Mastodon</a>
         </div>
         <p id="share-error" class="error" aria-live="polite"></p>
-      </div>
-    </section>
+      </section>
 
-    <section id="register-section" hidden>
+    <section id="account-section" data-panel hidden>
+    <div id="register-section" hidden>
       <h2>Log in or join the game</h2>
       <form id="register-form">
         <input id="name-input" maxlength="24" placeholder="Your name" required autocomplete="username">
@@ -53,9 +71,9 @@
         <button type="submit" value="register">Sign up</button>
       </form>
       <p id="register-error" class="error"></p>
-    </section>
+    </div>
 
-    <section id="me-section" hidden>
+    <div id="me-section" hidden>
       <h2>Your score: <span id="my-name"></span></h2>
       <button id="logout-button" type="button">Log out</button>
       <p id="my-subscribed" hidden>You're on the mailing list. Thanks!</p>
@@ -65,9 +83,19 @@
         <summary>Your press history</summary>
         <table id="my-history"></table>
       </details>
+    </div>
     </section>
 
-    <section id="stats-section" hidden>
+    <section id="leaderboard-section" data-panel hidden aria-labelledby="leaderboard-heading">
+      <h2 id="leaderboard-heading">Leaderboard</h2>
+      <p>See how you stack up. Scores refresh every five seconds.</p>
+      <p id="leaderboard-status" role="status">Loading scores&hellip;</p>
+      <div class="leaderboard-scroll" tabindex="0" role="region" aria-label="Player leaderboard">
+        <table id="leaderboard" aria-label="Player rankings" hidden></table>
+      </div>
+    </section>
+
+    <section id="stats-section" data-panel hidden>
       <h2>Game over &mdash; final global stats</h2>
       <div id="stats-summary"></div>
       <h3>Presses per zone</h3>
@@ -80,7 +108,7 @@
       </details>
     </section>
 
-    <section id="rules">
+    <section id="rules" data-panel hidden>
       <h2>Rules</h2>
       <ul>
         <li>A 24 hour countdown resets whenever anyone presses the button.</li>
@@ -88,17 +116,18 @@
         <li>The lower the countdown when you press, the more points you score.</li>
         <li>Zones: <span id="rules-zones"></span></li>
         <li>Each press scores the fixed point value of the zone it lands in.</li>
-        <li>Global stats are published when the game ends.</li>
+        <li>Player scores are public on the live leaderboard. Detailed global stats are published when the game ends.</li>
         <li>Inspired by the original <a href="https://en.wikipedia.org/wiki/The_Button_(Reddit)">Reddit "The Button"</a> experiment.</li>
       </ul>
     </section>
 
-    <section id="more">
+    <section id="more" data-panel hidden>
         <h2>More</h2>
         <p>Visit <a href="https://www.eom.dev/">Eric's homepage</a> for contact information, social media, and links to his other projects.</p>
     </section>
 
-    <section id="mailing-list" hidden>
+    <section id="mailing-list" data-panel hidden>
+      <h2>Mailing list</h2>
       <p>Join the mailing list to receive updates on Eric's projects:</p>
       <form id="subscribe-form">
         <input id="sub-first" maxlength="50" placeholder="First name" required autocomplete="given-name">
@@ -110,7 +139,7 @@
       <p id="subscribe-result" aria-live="polite"></p>
     </section>
 
-    <section id="donate">
+    <section id="donate" data-panel hidden>
         <h2>Donate</h2>
         <p>Help support my <a href="https://gitea.eom.dev/">free and open source projects</a> by making a donation through Stripe:</p>
         <script async
@@ -123,6 +152,7 @@
         >
         </stripe-buy-button>
     </section>
+    </div>
   </main>
   <script src="/app.js"></script>
 </body>