fixed some UX inconsistencies in gatekeeper

src/apps/dashboard/static/apps/scripts/game-kit.js

@@ -7,7 +7,6 @@
         if (dialog.hasAttribute('open')) {
             dialog.removeAttribute('open');
             btn.classList.remove('active');
-            clearSelection();
             return;
         }
         fetch(btn.dataset.kitUrl, {
@@ -30,7 +29,6 @@
         if (e.key === 'Escape' && dialog.hasAttribute('open')) {
             dialog.removeAttribute('open');
             btn.classList.remove('active');
-            clearSelection();
         }
     });
 
@@ -42,7 +40,6 @@
         if (e.target.closest('button.token-rails')) return;
         dialog.removeAttribute('open');
         btn.classList.remove('active');
-        clearSelection();
     });
 
     // Inject token_id before token-rails form submits
@@ -90,9 +87,5 @@
         });
     }
 
-    function clearSelection() {
+
-        window._kitTokenId = null;
-        var slot = document.querySelector('.token-slot');
-        if (slot) slot.classList.remove('ready');
-    }
 }());

src/apps/epic/views.py

@@ -29,6 +29,7 @@ def _gate_context(room, user):
     carte_token = None
     carte_slots_claimed = 0
     carte_nvm_slot_number = None
+    carte_next_slot_number = None
     if user.is_authenticated:
         user_reserved_slot = slots.filter(gamer=user, status=GateSlot.RESERVED).first()
         user_filled_slot = slots.filter(gamer=user, status=GateSlot.FILLED).first()
@@ -43,6 +44,10 @@ def _gate_context(room, user):
             ).order_by("-slot_number").first()
             if nvm_slot:
                 carte_nvm_slot_number = nvm_slot.slot_number
+            # Only the very next empty slot gets an OK button
+            next_slot = slots.filter(status=GateSlot.EMPTY).order_by("slot_number").first()
+            if next_slot:
+                carte_next_slot_number = next_slot.slot_number
     carte_active = carte_token is not None
     eligible = (
         user.is_authenticated
@@ -70,6 +75,7 @@ def _gate_context(room, user):
         "carte_active": carte_active,
         "carte_slots_claimed": carte_slots_claimed,
         "carte_nvm_slot_number": carte_nvm_slot_number,
+        "carte_next_slot_number": carte_next_slot_number,
     }
 
 
@@ -231,6 +237,9 @@ def release_slot(request, room_id):
                 slot.debited_token_type = None
                 slot.debited_token_expires_at = None
                 slot.save()
+                if room.gate_status == Room.OPEN:
+                    room.gate_status = Room.GATHERING
+                    room.save()
     return redirect("epic:gatekeeper", room_id=room_id)
 
 

src/functional_tests/test_trinket_carte_blanche.py

@@ -301,7 +301,7 @@ class CarteBlancheTest(FunctionalTest):
         )
         self.wait_for(lambda: get_circle(2).find_element(By.CSS_SELECTOR, ".drop-token-btn"))
 
-        # 17. Click NVM on circle 2 → returns to OK; circle 3 still has OK
+        # 17. Click NVM on circle 2 → circle 2 regains OK; circle 3 loses it (strict n+1)
         #     Circle 1 still filled; return panel still glowing; lease name still present
         self.wait_for(
             lambda: get_circle(1).find_element(By.CSS_SELECTOR, ".slot-release-btn")
@@ -311,7 +311,9 @@ class CarteBlancheTest(FunctionalTest):
         self.assertTrue(
             self.browser.find_element(By.CSS_SELECTOR, ".token-slot.claimed").is_displayed()
         )
-        self.wait_for(lambda: get_circle(2).find_element(By.CSS_SELECTOR, ".drop-token-btn"))
+        self.assertEqual(
+            len(get_circle(2).find_elements(By.CSS_SELECTOR, ".drop-token-btn")), 0
+        )
 
         # 18. Fill circles 2 → 6 sequentially; verify each subsequent OK appears
         for i in range(1, 6):

src/static_src/scss/_room.scss

@@ -299,22 +299,11 @@ body:has(.gate-overlay) {
                 justify-content: center;
             }
 
-            .drop-token-btn {
+            // CARTE drop-target circle — matches .reserved appearance
-                position: absolute;
+            &:has(.drop-token-btn) {
-                inset: 0;
+                background: rgba(var(--terUser), 0.2);
-                border-radius: 50%;
-                width: 100%;
-                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(--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),

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

@@ -66,11 +66,11 @@
                                     <button type="submit" class="btn btn-confirm">OK</button>
                                 {% endif %}
                             </form>
-                        {% elif carte_active and slot.status == 'EMPTY' and slot.slot_number <= carte_slots_claimed|add:1 %}
+                        {% elif carte_active and slot.status == 'EMPTY' and slot.slot_number == carte_next_slot_number %}
                             <form method="POST" action="{% url 'epic:confirm_token' room.id %}">
                                 {% csrf_token %}
                                 <input type="hidden" name="slot_number" value="{{ slot.slot_number }}">
-                                <button type="submit" class="drop-token-btn" aria-label="Fill slot {{ slot.slot_number }}"></button>
+                                <button type="submit" class="drop-token-btn btn btn-confirm" aria-label="Fill slot {{ slot.slot_number }}">OK</button>
                             </form>
                         {% elif carte_active and slot.status == 'FILLED' and slot.slot_number == carte_nvm_slot_number %}
                             <form method="POST" action="{% url 'epic:release_slot' room.id %}">
@@ -83,7 +83,7 @@
                 {% endfor %}
             </div>
             {% if room.gate_status == 'OPEN' %}
-                <button class="launch-game-btn">Launch</button>
+                <button class="launch-game-btn btn btn-primary btn-xl">PICK ROLES</button>
             {% endif %}
 
             {% if request.user == room.owner %}