demo'd old inventory area in room.html to make way for new content (hex table now centered in view); old test suite now targets Role card in #id_tray cells where appropriate, or skips Sig card select until aforementioned new feature deployed; new scripts & jasmine tests too; removed one irrelevant test case from apps.epic.tests.ITs.test_views.SelectRoleViewTest

src/static/tests/TraySpec.js

@@ -422,4 +422,97 @@ describe("Tray", () => {
             expect(Tray.isOpen()).toBe(false);
         });
     });
+
+    // ---------------------------------------------------------------------- //
+    // placeCard()                                                              //
+    // ---------------------------------------------------------------------- //
+    //
+    // placeCard(roleCode, onComplete):
+    //   1. Marks the first .tray-cell with .tray-role-card + data-role.
+    //   2. Opens the tray.
+    //   3. Arc-in animates the cell (.arc-in class, animationend fires).
+    //   4. forceClose() — tray closes instantly.
+    //   5. Calls onComplete.
+    //
+    // The grid always has exactly 8 .tray-cell elements (from the template);
+    // no new elements are inserted.
+    //
+    // ---------------------------------------------------------------------- //
+
+    describe("placeCard()", () => {
+        let grid, firstCell;
+
+        beforeEach(() => {
+            grid = document.createElement("div");
+            grid.id = "id_tray_grid";
+            for (let i = 0; i < 8; i++) {
+                const cell = document.createElement("div");
+                cell.className = "tray-cell";
+                grid.appendChild(cell);
+            }
+            document.body.appendChild(grid);
+            // Re-init so _grid is set (reset() in outer afterEach clears it)
+            Tray.init();
+            firstCell = grid.querySelector(".tray-cell");
+        });
+
+        afterEach(() => {
+            grid.remove();
+        });
+
+        it("adds .tray-role-card to the first .tray-cell", () => {
+            Tray.placeCard("PC", null);
+            expect(firstCell.classList.contains("tray-role-card")).toBe(true);
+        });
+
+        it("sets data-role on the first cell", () => {
+            Tray.placeCard("NC", null);
+            expect(firstCell.dataset.role).toBe("NC");
+        });
+
+        it("grid cell count stays at 8", () => {
+            Tray.placeCard("PC", null);
+            expect(grid.children.length).toBe(8);
+        });
+
+        it("opens the tray", () => {
+            Tray.placeCard("PC", null);
+            expect(Tray.isOpen()).toBe(true);
+        });
+
+        it("adds .arc-in to the first cell", () => {
+            Tray.placeCard("PC", null);
+            expect(firstCell.classList.contains("arc-in")).toBe(true);
+        });
+
+        it("removes .arc-in and force-closes after animationend", () => {
+            Tray.placeCard("PC", null);
+            expect(Tray.isOpen()).toBe(true);
+            firstCell.dispatchEvent(new Event("animationend"));
+            expect(firstCell.classList.contains("arc-in")).toBe(false);
+            expect(Tray.isOpen()).toBe(false);
+        });
+
+        it("calls onComplete after the tray closes", () => {
+            let called = false;
+            Tray.placeCard("PC", () => { called = true; });
+            firstCell.dispatchEvent(new Event("animationend"));
+            expect(called).toBe(true);
+        });
+
+        it("landscape: same behaviour — first cell gets role card", () => {
+            Tray._testSetLandscape(true);
+            Tray.init();
+            Tray.placeCard("EC", null);
+            expect(firstCell.classList.contains("tray-role-card")).toBe(true);
+            expect(firstCell.dataset.role).toBe("EC");
+        });
+
+        it("reset() removes .tray-role-card and data-role from cells", () => {
+            Tray.placeCard("PC", null);
+            Tray.reset();
+            expect(firstCell.classList.contains("tray-role-card")).toBe(false);
+            expect(firstCell.dataset.role).toBeUndefined();
+        });
+    });
 });