new landscape styling & scripting for gameroom #id_tray apparatus, & some overall scripting & styling like wobble on click-to-close; new --undUser & --duoUser rootvars universally the table felt values; many new Jasmine tests to handle tray functionality

src/static_src/tests/TraySpec.js

@@ -39,6 +39,7 @@ describe("Tray", () => {
         document.body.appendChild(wrap);
         document.body.appendChild(tray);
 
+        Tray._testSetLandscape(false);  // force portrait regardless of window size
         Tray.init();
     });
 
@@ -83,11 +84,26 @@ describe("Tray", () => {
     describe("close()", () => {
         beforeEach(() => Tray.open());
 
-        it("hides #id_tray", () => {
+        it("hides #id_tray after slide + snap both complete", () => {
             Tray.close();
+            wrap.dispatchEvent(new TransitionEvent("transitionend", { propertyName: "left" }));
+            wrap.dispatchEvent(new Event("animationend"));
             expect(tray.style.display).toBe("none");
         });
 
+        it("adds .snap to wrap after slide transition completes", () => {
+            Tray.close();
+            wrap.dispatchEvent(new TransitionEvent("transitionend", { propertyName: "left" }));
+            expect(wrap.classList.contains("snap")).toBe(true);
+        });
+
+        it("removes .snap from wrap once animationend fires", () => {
+            Tray.close();
+            wrap.dispatchEvent(new TransitionEvent("transitionend", { propertyName: "left" }));
+            wrap.dispatchEvent(new Event("animationend"));
+            expect(wrap.classList.contains("snap")).toBe(false);
+        });
+
         it("removes .open from #id_tray_btn", () => {
             Tray.close();
             expect(btn.classList.contains("open")).toBe(false);
@@ -203,4 +219,144 @@ describe("Tray", () => {
             expect(wrap.classList.contains("wobble")).toBe(false);
         });
     });
+
+    // ---------------------------------------------------------------------- //
+    // Landscape mode — Y-axis drag, top-positioned wrap                      //
+    // ---------------------------------------------------------------------- //
+
+    describe("landscape mode", () => {
+        // Re-init in landscape after the portrait init from outer beforeEach.
+        beforeEach(() => {
+            Tray.reset();
+            Tray._testSetLandscape(true);
+            Tray.init();
+        });
+
+        function simulateDragY(deltaY) {
+            const startY = 50;
+            btn.dispatchEvent(new PointerEvent("pointerdown", { clientY: startY, clientX: 0, bubbles: true }));
+            btn.dispatchEvent(new PointerEvent("pointermove", { clientY: startY + deltaY, clientX: 0, bubbles: true }));
+            btn.dispatchEvent(new PointerEvent("pointerup",   { clientY: startY + deltaY, clientX: 0, bubbles: true }));
+        }
+
+        // ── open() in landscape ─────────────────────────────────────────── //
+
+        describe("open()", () => {
+            it("makes #id_tray visible", () => {
+                Tray.open();
+                expect(tray.style.display).not.toBe("none");
+            });
+
+            it("adds .open to #id_tray_btn", () => {
+                Tray.open();
+                expect(btn.classList.contains("open")).toBe(true);
+            });
+
+            it("positions wrap via style.top, not style.left", () => {
+                Tray.open();
+                expect(wrap.style.top).not.toBe("");
+                expect(wrap.style.left).toBe("");
+            });
+        });
+
+        // ── close() in landscape ────────────────────────────────────────── //
+
+        describe("close()", () => {
+            beforeEach(() => Tray.open());
+
+            it("closes the tray (display not toggled in landscape)", () => {
+                Tray.close();
+                expect(Tray.isOpen()).toBe(false);
+            });
+
+            it("removes .open from #id_tray_btn", () => {
+                Tray.close();
+                expect(btn.classList.contains("open")).toBe(false);
+            });
+
+            it("closed top is less than open top (wrap slides up to close)", () => {
+                const openTop = parseInt(wrap.style.top, 10);
+                Tray.close();
+                const closedTop = parseInt(wrap.style.top, 10);
+                expect(closedTop).toBeLessThan(openTop);
+            });
+
+            it("adds .snap to wrap after top transition completes", () => {
+                Tray.close();
+                wrap.dispatchEvent(new TransitionEvent("transitionend", { propertyName: "top" }));
+                expect(wrap.classList.contains("snap")).toBe(true);
+            });
+
+            it("removes .snap from wrap once animationend fires", () => {
+                Tray.close();
+                wrap.dispatchEvent(new TransitionEvent("transitionend", { propertyName: "top" }));
+                wrap.dispatchEvent(new Event("animationend"));
+                expect(wrap.classList.contains("snap")).toBe(false);
+            });
+        });
+
+        // ── drag — Y axis ──────────────────────────────────────────────── //
+
+        describe("drag interaction", () => {
+            it("dragging down opens the tray", () => {
+                simulateDragY(100);
+                expect(Tray.isOpen()).toBe(true);
+            });
+
+            it("dragging up does not open the tray", () => {
+                simulateDragY(-100);
+                expect(Tray.isOpen()).toBe(false);
+            });
+
+            it("drag > 10px downward suppresses subsequent click", () => {
+                simulateDragY(100);
+                btn.click();  // should be swallowed — tray stays open
+                expect(Tray.isOpen()).toBe(true);
+            });
+
+            it("does not set style.left (Y axis only)", () => {
+                simulateDragY(100);
+                expect(wrap.style.left).toBe("");
+            });
+
+            it("does not add .wobble during drag", () => {
+                simulateDragY(100);
+                expect(wrap.classList.contains("wobble")).toBe(false);
+            });
+        });
+
+        // ── click when closed — wobble, no open ───────────────────────── //
+
+        describe("clicking btn when closed", () => {
+            it("adds .wobble to wrap", () => {
+                btn.click();
+                expect(wrap.classList.contains("wobble")).toBe(true);
+            });
+
+            it("does not open the tray", () => {
+                btn.click();
+                expect(Tray.isOpen()).toBe(false);
+            });
+        });
+
+        // ── click when open — close ────────────────────────────────────── //
+
+        describe("clicking btn when open", () => {
+            beforeEach(() => Tray.open());
+
+            it("closes the tray", () => {
+                btn.click();
+                expect(Tray.isOpen()).toBe(false);
+            });
+        });
+
+        // ── init positions wrap at closed (top) ────────────────────────── //
+
+        it("init sets wrap to closed position (top < 0 or = maxTop)", () => {
+            // After landscape init with no real elements, _maxTop = -(wrapH_fallback - handleH_fallback)
+            // which will be negative. Wrap starts off-screen above.
+            const top = parseInt(wrap.style.top, 10);
+            expect(top).toBeLessThan(0);
+        });
+    });
 });