my_sea_visit: share the owner picker styling (--duoUser felt + fill) when showing the draw — TDD
The bud-sea (visitor) VIEW DRAW rendered the cross but kept data-phase=landing, so it sat on the --priUser landing bg instead of the owner's --duoUser picker felt, and its #id_my_sea_visit_draw wrapper wasn't a flex container so the picker didn't fill/centre like the owner's. DRY fix (no new visit-only styling): - VIEW DRAW toggle now flips .my-sea-page data-phase landing<->picker, so the cross reuses the shared .my-sea-page[data-phase=picker] --duoUser felt rule. - .my-sea-visit-draw is display:contents, so its .my-sea-picker child becomes a direct flex item of .my-sea-page and fills/centres via the existing .my-sea-picker sizing. FT asserts the page flips to data-phase=picker on VIEW DRAW. Code architected by Disco DeDisco <discodedisco@outlook.com> Git commit message Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -2143,6 +2143,11 @@ class MySeaVisitSpectatorCrossTest(FunctionalTest):
|
|||||||
self.assertTrue(self.browser.find_elements(By.ID, "id_sea_stage"))
|
self.assertTrue(self.browser.find_elements(By.ID, "id_sea_stage"))
|
||||||
self.assertFalse(self.browser.find_elements(
|
self.assertFalse(self.browser.find_elements(
|
||||||
By.CSS_SELECTOR, ".my-sea-scroll"))
|
By.CSS_SELECTOR, ".my-sea-scroll"))
|
||||||
|
# The cross rides the owner's shared picker felt: the page flips to
|
||||||
|
# data-phase="picker" (--duoUser bg) while showing the draw, and the
|
||||||
|
# display:contents wrapper lets .my-sea-picker fill the page.
|
||||||
|
page = self.browser.find_element(By.CSS_SELECTOR, ".my-sea-page")
|
||||||
|
self.assertEqual(page.get_attribute("data-phase"), "picker")
|
||||||
|
|
||||||
|
|
||||||
class MySeaVisitVoiceGuardTest(FunctionalTest):
|
class MySeaVisitVoiceGuardTest(FunctionalTest):
|
||||||
|
|||||||
@@ -867,7 +867,7 @@ html:has(.sig-backdrop) {
|
|||||||
// (Polish 2026-05-29 — may be reverted; revert = drop this rule + the
|
// (Polish 2026-05-29 — may be reverted; revert = drop this rule + the
|
||||||
// `--img-stroke-w` var + the base.html body class.)
|
// `--img-stroke-w` var + the base.html body class.)
|
||||||
body.deck-family-english {
|
body.deck-family-english {
|
||||||
--img-stroke-w: 0.08rem;
|
--img-stroke-w: 0.125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
// ─── My Sign picker — sizing + state-gated reveal ────────────────────────────
|
// ─── My Sign picker — sizing + state-gated reveal ────────────────────────────
|
||||||
|
|||||||
@@ -337,6 +337,15 @@ body.page-gameboard {
|
|||||||
min-height: 0;
|
min-height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Spectator (bud-sea) draw wrapper — `display: contents` makes it layout-
|
||||||
|
// transparent so its `.my-sea-picker` child becomes a direct flex item of
|
||||||
|
// `.my-sea-page` and fills/centres EXACTLY like the owner's picker, with no
|
||||||
|
// separate visit-only sizing rules (DRY). VIEW DRAW toggles its display + the
|
||||||
|
// page's data-phase, so the cross rides the shared picker felt + layout.
|
||||||
|
.my-sea-visit-draw {
|
||||||
|
display: contents;
|
||||||
|
}
|
||||||
|
|
||||||
.my-sea-picker {
|
.my-sea-picker {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
|
|||||||
@@ -135,7 +135,11 @@
|
|||||||
{% endif %}
|
{% endif %}
|
||||||
<script>
|
<script>
|
||||||
(function () {
|
(function () {
|
||||||
// VIEW DRAW toggles the read-only draw against the table hex.
|
// VIEW DRAW toggles the read-only draw against the table hex. The
|
||||||
|
// page's data-phase flips landing↔picker so the cross reuses the
|
||||||
|
// owner's `.my-sea-page[data-phase="picker"]` --duoUser felt bg (DRY —
|
||||||
|
// same rule the owner picker rides). The hex view stays "landing".
|
||||||
|
var page = document.querySelector('.my-sea-page');
|
||||||
var viewBtn = document.getElementById('id_my_sea_view_draw_btn');
|
var viewBtn = document.getElementById('id_my_sea_view_draw_btn');
|
||||||
var draw = document.getElementById('id_my_sea_visit_draw');
|
var draw = document.getElementById('id_my_sea_visit_draw');
|
||||||
var landing = document.querySelector('.my-sea-visit-landing');
|
var landing = document.querySelector('.my-sea-visit-landing');
|
||||||
@@ -144,6 +148,7 @@
|
|||||||
var showing = draw.style.display !== 'none';
|
var showing = draw.style.display !== 'none';
|
||||||
draw.style.display = showing ? 'none' : '';
|
draw.style.display = showing ? 'none' : '';
|
||||||
if (landing) landing.style.display = showing ? '' : 'none';
|
if (landing) landing.style.display = showing ? '' : 'none';
|
||||||
|
if (page) page.setAttribute('data-phase', showing ? 'landing' : 'picker');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
// GATE VIEW → visitor gate.
|
// GATE VIEW → visitor gate.
|
||||||
|
|||||||
Reference in New Issue
Block a user