js snippet displays dynamic ellipsis on loading-style token gatekeeper modals; tweaks to existing pythonic & test structure to accomodate

src/apps/epic/models.py

@@ -15,7 +15,7 @@ class Room(models.Model):
     OPEN = "OPEN"
     RENEWAL_DUE = "RENEWAL_DUE"
     GATE_STATUS_CHOICES = [
-        (GATHERING, "Gathering"),
+        (GATHERING, "GATHERING GAMERS"),
         (OPEN, "Open"),
         (RENEWAL_DUE, "Renewal Due"),
     ]

src/functional_tests/test_gatekeeper.py

@@ -38,7 +38,7 @@ class GatekeeperTest(FunctionalTest):
         # 4. Page shows room name, GATHERING status
         body = self.browser.find_element(By.TAG_NAME, "body")
         self.assertIn("Test Room", body.text)
-        self.assertIn("GATHERING", body.text)
+        self.assertIn("GATHERING GAMERS", body.text)
         # 5. Six token slots are visible
         slots = self.browser.find_elements(By.CSS_SELECTOR, ".gate-slot")
         self.assertEqual(len(slots), 6)

src/static_src/scss/_room.scss

@@ -38,11 +38,23 @@ $gate-line: 2px;
     .gate-header {
         text-align: center;
         h1 { margin: 0; }
-        .gate-status {
+        .gate-status-wrap {
+            display: flex;
+            justify-content: center;
+            align-items: baseline;
             opacity: 0.5;
             font-size: 0.75em;
             text-transform: uppercase;
             letter-spacing: 0.15em;
+
+            .status-dots {
+                display: inline-flex;
+                span {
+                    display: inline-block;
+                    width: 0.5em;
+                    text-align: center;
+                }
+            }
         }
     }
 
@@ -88,11 +100,19 @@ $gate-line: 2px;
                 height: 100%;
                 background: transparent;
                 border: none;
+                box-shadow:
+                    0.05rem 0.05rem 0.5rem rgba(0, 0, 0, 1),
+                ;
                 font-size: 0;
                 cursor: pointer;
 
                 &:hover {
-                    background: rgba(var(--terUser), 0.15);
+                    background: rgba(var(--quaUser), 0.15);
+                    box-shadow:
+                        -0.1rem -0.1rem 1rem rgba(var(--ninUser), 1),
+                        -0.1rem -0.1rem 0.25rem rgba(0, 0, 0, 1),
+                        0.05rem 0.05rem 0.5rem rgba(0, 0, 0, 1),
+                    ;
                 }
             }
         }

src/templates/apps/gameboard/_partials/_gatekeeper.html

@@ -8,7 +8,26 @@
         <div class="gate-modal" role="dialog" aria-label="Gatekeeper">
             <header class="gate-header">
                 <h1>{{ room.name }}</h1>
-                <span class="gate-status">{{ room.gate_status }}</span>
+                <div class="gate-status-wrap">
+                    <span class="gate-status-text">{{ room.get_gate_status_display }}</span>
+                    <span class="status-dots" aria-hidden="true">
+                        <span></span><span></span><span></span><span></span>
+                    </span>
+                </div>
+                <script>
+                    (function () {
+                        clearInterval(window._gateDots);
+                        var wrap = document.querySelector('.status-dots');
+                        if (!wrap) return;
+                        var dots = wrap.querySelectorAll('span');
+                        var n = 0;
+                        window._gateDots = setInterval(function () {
+                            if (!document.contains(wrap)) { clearInterval(window._gateDots); return; }
+                            dots.forEach(function (d, i) { d.textContent = i < n ? '.' : ''; });
+                            n = (n + 1) % 5;
+                        }, 400);
+                    }());
+                </script>
             </header>
 
             <div class="gate-slots">