fixed several animation & transition problems plaguing the inventory tray

src/apps/epic/static/apps/epic/role-select.js

@@ -205,7 +205,12 @@ var RoleSelect = (function () {
 
     var _reload = function () { window.location.reload(); };
 
-    function handleRolesRevealed() {
+    function handleAllRolesFilled() {
+        var wrap = document.getElementById('id_pick_sigs_wrap');
+        if (wrap) wrap.style.display = '';
+    }
+
+    function handleSigSelectStarted() {
         _reload();
     }
 
@@ -291,7 +296,8 @@ var RoleSelect = (function () {
 
     window.addEventListener("room:role_select_start", init);
     window.addEventListener("room:turn_changed", handleTurnChanged);
-    window.addEventListener("room:roles_revealed", handleRolesRevealed);
+    window.addEventListener("room:all_roles_filled", handleAllRolesFilled);
+    window.addEventListener("room:sig_select_started", handleSigSelectStarted);
 
     if (document.readyState === "loading") {
         document.addEventListener("DOMContentLoaded", init);

src/apps/epic/static/apps/epic/tray.js

@@ -1,5 +1,8 @@
 var Tray = (function () {
     var _open          = false;
+    // Fallback timeout (ms) after close() in placeCard in case transitionend
+    // never fires (e.g. CSS transitions disabled).  Zeroed by reset() for tests.
+    var _closeTransitionMs = 600;
     var _dragStartX    = null;
     var _dragStartY    = null;
     var _dragStartLeft = null;
@@ -235,7 +238,9 @@ var Tray = (function () {
     }
 
     // placeCard(roleCode, onComplete) — mark the first tray cell with the role,
-    // open the tray, arc-in the cell, then force-close.  Calls onComplete after.
+    // open the tray, arc-in the cell, then animated-close.  Calls onComplete after
+    // the close slide finishes (transitionend), with a fallback timeout in case
+    // CSS transitions are disabled (e.g. test environments).
     // The grid always contains exactly 8 .tray-cell elements (from the template);
     // the first one receives .tray-role-card and data-role instead of a new element
     // being inserted, so the cell count never changes.
@@ -250,8 +255,22 @@ var Tray = (function () {
 
         open();
         _arcIn(firstCell, function () {
-            forceClose();
-            if (onComplete) onComplete();
+            close();
+            if (!onComplete) return;
+            if (!_wrap) { onComplete(); return; }
+            var propName = _isLandscape() ? 'top' : 'left';
+            var done = false;
+            function finish() {
+                if (done) return;
+                done = true;
+                if (_wrap) _wrap.removeEventListener('transitionend', onCloseEnd);
+                onComplete();
+            }
+            function onCloseEnd(e) {
+                if (e.propertyName === propName) finish();
+            }
+            _wrap.addEventListener('transitionend', onCloseEnd);
+            setTimeout(finish, _closeTransitionMs);
         });
     }
 
@@ -425,6 +444,7 @@ var Tray = (function () {
     // reset() — restores module state; used by Jasmine afterEach
     function reset() {
         _open              = false;
+        _closeTransitionMs = 0;
         _dragStartX        = null;
         _dragStartY        = null;
         _dragStartLeft     = null;