diff --git a/src/functional_tests/base.py b/src/functional_tests/base.py index 7d950a4..220ed98 100644 --- a/src/functional_tests/base.py +++ b/src/functional_tests/base.py @@ -138,6 +138,20 @@ class FunctionalTest(StaticLiveServerTestCase): b.execute_script("arguments[0].click()", btn) self.wait_for(_click) + def dismiss_brief_if_present(self, banner_selector=".note-banner", browser=None): + """Remove any Brief banners matching `banner_selector` from the DOM so + subsequent clicks aren't intercepted by the slide-down overlay. No-op + if no matching banner exists. Default matches every Brief shape; pass + a specific selector (e.g. '.my-sea-sign-gate-brief') to target one. + + DOM-removal rather than NVM-click — bypasses the dismiss_url POST + flow that some Briefs (FREE/PAID DRAW) wire up; use this when the + test cares about the page state AFTER a Brief, not the dismissal.""" + b = browser or self.browser + b.execute_script( + f"document.querySelectorAll({banner_selector!r}).forEach(el => el.remove());" + ) + @wait def wait_to_be_logged_in(self, email): self.browser.find_element(By.CSS_SELECTOR, "#id_logout"), @@ -225,6 +239,16 @@ class ChannelsFunctionalTest(ChannelsLiveServerTestCase): b.execute_script("arguments[0].click()", btn) self.wait_for(_click) + def dismiss_brief_if_present(self, banner_selector=".note-banner", browser=None): + """Remove any Brief banners matching `banner_selector` from the DOM so + subsequent clicks aren't intercepted by the slide-down overlay. No-op + if no matching banner exists. See FunctionalTest.dismiss_brief_if_present + for the full docstring — mirrored here for ChannelsLiveServerTestCase.""" + b = browser or self.browser + b.execute_script( + f"document.querySelectorAll({banner_selector!r}).forEach(el => el.remove());" + ) + def create_pre_authenticated_session(self, email): if self.test_server: session_key = create_session_on_server(self.test_server, email) diff --git a/src/functional_tests/test_trinket_coin_on_a_string.py b/src/functional_tests/test_trinket_coin_on_a_string.py index 48ac9c9..4ab6d41 100644 --- a/src/functional_tests/test_trinket_coin_on_a_string.py +++ b/src/functional_tests/test_trinket_coin_on_a_string.py @@ -70,6 +70,10 @@ class CoinOnAStringTest(FunctionalTest): self.create_pre_authenticated_session("coin@test.io") self.browser.get(self.live_server_url + "/gameboard/") self.wait_for(lambda: self.browser.find_element(By.ID, "id_game_kit")) + # The my-sea-sign-gate-brief auto-spawns on /gameboard/ for users w/o + # a significator (coin@test.io is fresh) + intercepts the create-game + # btn click. Dismiss it so subsequent clicks land. + self.dismiss_brief_if_present() # Create a new room → land on gatekeeper self.browser.find_element(By.ID, "id_new_game_name").send_keys("Coin Room") @@ -82,6 +86,13 @@ class CoinOnAStringTest(FunctionalTest): # Open kit bag, pick COIN, click rails btn — drop_token POSTs w. token_id # via the kit-bag JS that injects a hidden token_id input before submit. self.browser.find_element(By.ID, "id_kit_btn").click() + # Wait for the dialog's max-width animation (landscape: 0→5rem, + # portrait: max-height 0→5rem) to finish — clicking the COIN .token + # mid-animation fails scrollIntoView on the 0-dimension container. + self.wait_for(lambda: self.assertGreater( + self.browser.find_element(By.ID, "id_kit_bag_dialog").rect["width"], + 50, + )) self.wait_for( lambda: self.browser.find_element( By.CSS_SELECTOR, @@ -136,6 +147,7 @@ class CoinOnAStringTest(FunctionalTest): self.create_pre_authenticated_session("coin@test.io") self.browser.get(self.live_server_url + "/gameboard/") self.wait_for(lambda: self.browser.find_element(By.ID, "id_game_kit")) + self.dismiss_brief_if_present() # sign-gate brief intercepts create-game-btn # Create room, deposit COIN — rails-click puts slot 1 in RESERVED; # OK btn fills it (debit_token sets coin.current_room = room). @@ -143,6 +155,13 @@ class CoinOnAStringTest(FunctionalTest): self.browser.find_element(By.ID, "id_create_game_btn").click() self.wait_for(lambda: self.assertIn("/gate/", self.browser.current_url)) self.browser.find_element(By.ID, "id_kit_btn").click() + # Wait for the dialog's max-width animation (landscape: 0→5rem, + # portrait: max-height 0→5rem) to finish — clicking the COIN .token + # mid-animation fails scrollIntoView on the 0-dimension container. + self.wait_for(lambda: self.assertGreater( + self.browser.find_element(By.ID, "id_kit_bag_dialog").rect["width"], + 50, + )) self.wait_for( lambda: self.browser.find_element( By.CSS_SELECTOR, diff --git a/src/static_src/scss/_bud.scss b/src/static_src/scss/_bud.scss index 6583e79..fac444e 100644 --- a/src/static_src/scss/_bud.scss +++ b/src/static_src/scss/_bud.scss @@ -103,6 +103,9 @@ } // html.bud-open: slide the panel out, fade the kit btn away. +// Kit fade is PORTRAIT-only: in landscape kit lives at the TOP of the +// right sidebar + bud_panel sits at the BOTTOM (full-width strip), so +// they don't visually compete + kit can stay visible. html.bud-open { #id_bud_panel { transform: scaleX(1); @@ -110,9 +113,11 @@ html.bud-open { pointer-events: auto; } - #id_kit_btn { - opacity: 0; - pointer-events: none; + @media (orientation: portrait) { + #id_kit_btn { + opacity: 0; + pointer-events: none; + } } } diff --git a/src/static_src/scss/_burger.scss b/src/static_src/scss/_burger.scss index 02378ca..a07a9bf 100644 --- a/src/static_src/scss/_burger.scss +++ b/src/static_src/scss/_burger.scss @@ -22,7 +22,10 @@ position: fixed; bottom: 4.2rem; left: 0.5rem; - z-index: 318; + // Match .gear-btn page-level z (314) — keeps burger BELOW kit_btn + + // bud_btn (both z-318) + bud_panel (z-317) so those naturally cover + // burger when they overlap. Dialog (z-316) covers burger too. + z-index: 314; font-size: 1.75rem; cursor: pointer; color: rgba(var(--secUser), 1); @@ -60,7 +63,7 @@ left: 2rem; // burger left (0.5) + half-btn (1.5) width: 0; height: 0; - z-index: 317; // below #id_burger_btn so the burger stays clickable + z-index: 313; // below #id_burger_btn (314) so burger stays clickable pointer-events: none; @media (orientation: landscape) { @@ -119,3 +122,9 @@ opacity: 1; pointer-events: auto; } + +// No explicit bud_panel / kit_dialog hide rules needed — burger's z=314 +// sits BELOW kit_btn / bud_btn (318), bud_panel (317), + kit_dialog (316), +// so all those naturally cover the burger when they overlap. Earlier +// iterations explicitly faded the burger via opacity; rendered redundant +// by the z-index drop. diff --git a/src/static_src/scss/_game-kit.scss b/src/static_src/scss/_game-kit.scss index 538faf2..1e7679c 100644 --- a/src/static_src/scss/_game-kit.scss +++ b/src/static_src/scss/_game-kit.scss @@ -48,10 +48,10 @@ border: none; border-top: 0.1rem solid rgba(var(--quaUser), 1); background: rgba(var(--priUser), 0.97); - // Above the burger btn (z-318) so the dialog covers it when open in - // BOTH orientations — burger sits in the bottom-left corner in - // portrait + the right sidebar in landscape; the dialog lands atop. - z-index: 319; + // Below kit_btn + burger_btn (both z-318) so those btns stay visible + // when the dialog opens — user can re-click kit_btn to close + the + // burger fan stays accessible alongside an open dialog. + z-index: 316; overflow: hidden; // Closed state — portrait: grow from below the footer (max-height) @@ -87,7 +87,7 @@ // Opaque in landscape — the dialog covers the sidebar btns + the // burger + bud area when open; transparency would let those btns // bleed through the dialog content. - background: rgba(var(--priUser), 1); + background: rgba(var(--priUser), 0.97); // Closed state — width animates from 0 (grows leftward from right) max-width: 0;