Files
python-tdd/src/templates/apps/gameboard/game_kit.html

46 lines
2.2 KiB
HTML
Raw Normal View History

{% extends "core/base.html" %}
{% load static %}
{% block title_text %}Game Kit{% endblock title_text %}
fluid root rem + landscape aperture: html font-size = clamp(14px, 2.4vmin, 22px) so 1rem scales w. viewport (rotation-invariant via vmin); --sidebar-w + --h2-col-w CSS vars unify navbar/footer/h2 sizing; container margin-left = sidebar + h2-col-w in landscape so applets clip cleanly under the rotated wordmark; h2 markup splits into two spans (45/55 horizontal title); drop the disparate min-height font-size jumps + 1800px sidebar-doubling overrides - html { font-size: clamp(14px, 2.4vmin, 22px) } — single sliding scale; everything in rem (sidebar widths, h2 font-size, paddings) scales together. Phone rotation swaps width/height but vmin stays the same → 1rem stays the same → navbar/footer/h2 hold their size between portrait + landscape. - :root --sidebar-w: 5rem (replaces the locally-scoped $sidebar-w SCSS var that lived inside @media blocks); --h2-col-w: 3rem for the rotated wordmark column in landscape. var(--sidebar-w) + var(--h2-col-w) are the only knobs that move the layout. - Landscape container: margin-left = calc(var(--sidebar-w) + var(--h2-col-w)); margin-right = var(--sidebar-w). Applets are now clipped INSIDE the h2 column, so the rotated "BILLPOST" / "DASHBOARD" wordmark never has content bleeding behind it (the original complaint). - h2 markup refactor across 13 templates: <span>BILL</span><span>POST</span> instead of <span>BILL</span>POST. Portrait styling: display: flex; first span flex 0 0 45% + --quaUser colour; second span flex 0 0 55% + --secUser inherited. Per-span text-align: justify + text-justify: inter-character keeps the inter-letter spacing within each span. Landscape resets the flex (single rotated wordmark, not split). - Drop the four h2 font-size jumps (min-height: 400/500/800px) — single font-size: 3rem now scales fluidly via root rem. Drop the @media (orientation: landscape) and (max-width: 1100px) h1 override (rem-fluid handles cramped widths). Drop the entire @media (orientation: landscape) and (min-width: 1800px) sidebar-doubling block in _base.scss / _applets.scss / _bud.scss — the rem clamp ceiling already caps the size. - _bud.scss + _applets.scss: bud-btn / bud-panel / bud-suggestions / gear-btn / applet menus all switch to var(--sidebar-w)-based positioning; landscape rules are single (no per-breakpoint duplication). - Per-spec tradeoff: non-.btn-primary buttons (BYE / NVM / OK / kit-btn / etc.) inherit rem-fluid like everything else and will scale slightly w. viewport. User explicitly OK'd this — they don't need to stay px-fixed. - 852 ITs + 24 layout/navbar/bud FTs green; existing geometry assertions are relative or categorical (not exact-px) so the rem clamp doesn't surface failures at the 800x1200 FT viewport. Code architected by Disco DeDisco <discodedisco@outlook.com> Git commit message Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-09 00:14:14 -04:00
{% block header_text %}<span>Game</span><span>Kit</span>{% endblock header_text %}
{% block content %}
<div class="gameboard-page">
{% include "apps/applets/_partials/_gear.html" with menu_id="id_game_kit_menu" %}
{% include "apps/gameboard/_partials/_game_kit_applet_menu.html" %}
<div id="id_game_kit_applets_container">
{% include "apps/gameboard/_partials/_game_kit_sections.html" %}
</div>
</div>
<dialog id="id_tarot_fan_dialog">
<div class="tarot-fan-wrap">
<button id="id_fan_prev" class="fan-nav fan-nav--prev" aria-label="Previous card">&#8249;</button>
<div id="id_fan_content" class="tarot-fan"></div>
Game Kit fan stage + FLIP/SPIN; sig/sea/fan refactor — TDD - fan modal: stage block w. idle-reveal/careen-out; carousel shifts left so focused card sits left-of-center; SPIN rotates whole card via Element.animate(); FLIP toggles polarity (Levity ↔ Gravity) via perspective rotateY w. mid-flip repaint; SPIN state retained across FLIP; FLIP btn hover-revealed only when focused card or btn is hovered (:has) - mobile breakpoints: --fan-card-w / --fan-card-h / --fan-stage-shift / --fan-carousel-step lifted to CSS vars on .tarot-fan-wrap; portrait ≤ 480px @ 150×230, landscape ≤ 500h @ 150×235; corners + face text/padding scale w. card width - shared StageCard JS module (apps/epic/stage-card.js): fromDataset, populateCard, populateKeywords, buildInfoData, renderFyi — sig/sea/fan all delegate; ~150 lines de-duplicated - shared @mixin stat-block-shared (SCSS) lifts duplicated stat-face / stat-keywords / sig-info rules; @mixin stage-card-polarity unifies sea-stage--levity/--gravity + fan[data-polarity] coloring - model rename: TarotCard.reversal → reversal_qualifier (migration 0014); render-time fallback to current polarity's qualifier when blank - class unification: .sig-info-open / .sea-info-open / .fyi-open → .fyi-open (on stat block); .sig-flip-btn / .sea-spin-btn / .fan-spin-btn → .spin-btn; same for .fyi-btn / .fyi-prev / .fyi-next - custom combobox (apps/epic/combobox.js) replaces native <select> for PICK SEA spread picker — keyboard nav, click-outside-close, aria roles; Firefox/Chrome OS-rendered <option> ignored CSS - Jasmine: FanStageSpec.js w. idle-reveal / population / SPIN / FYI / FLIP specs; sig + sea fixtures + IT view assertions updated for renamed classes - 748 ITs + Jasmine green Code architected by Disco DeDisco <discodedisco@outlook.com> Git commit message Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-30 21:01:52 -04:00
<button id="id_fan_flip" class="btn btn-reveal fan-flip-btn" type="button">FLIP</button>
<div class="fan-stage-block sig-stat-block" id="id_fan_stage_block">
<button class="btn btn-reverse spin-btn" type="button">SPIN</button>
<button class="btn btn-info fyi-btn" type="button">FYI</button>
<div class="stat-face stat-face--upright">
<p class="stat-face-label">Emanation</p>
<ul class="stat-keywords" id="id_fan_stat_upright"></ul>
</div>
<div class="stat-face stat-face--reversed">
<p class="stat-face-label">Reversal</p>
<ul class="stat-keywords" id="id_fan_stat_reversed"></ul>
</div>
tray sig-card tooltip: portal w. PRV|NXT pager — TDD Phase 2 of the apps.tooltips integration on the tray. Hovering .tray-sig-card > .sig-stage-card opens #id_tooltip_portal w. an FYI panel that mirrors #id_fan_fyi_panel (Energy / Operation entries cycled via PRV|NXT), but w.o. the stage block, w.o. Reversal entries, & w.o. the fan stage's click-to-dismiss handler — the panel-body click is reserved for future drag-and-drop on .tray-sig-card:active. - _partials/_sig_fyi_panel.html — new partial, the .sig-info + PRV|NXT block extracted out of game_kit.html, _sig_select_overlay.html, & _sea_overlay.html. {% include %}d back from those 3 callers; pure copy-paste extraction (no behavioural change to fan stage, sig select, or sea select). - room.html: .tray-sig-card > .sig-stage-card gains data-energies + data-operations (the only attrs StageCard.buildInfoData reads), keyed off my_tray_sig.energies_json / .operations_json (existing TarotCard properties). - tray-tooltip.js: new sig branch — _showSig() builds the panel inline, paints via StageCard.renderFyi, & wires PRV|NXT cycle handlers; the mousemove union now covers the .fyi-prev / .fyi-next btn rects (the btns hang past the portal's left & right edges) so mouse-over them keeps the panel alive. Click stopPropagation on the btns prevents the panel-body click from reaching anything else. - TrayTooltipSpec: 6 new sig-branch specs (panel structure; first energy entry rendered; PRV|NXT cycling; body click no-dismiss; pointer over btn rects keeps panel alive; pointer outside full union clears). - test_component_tray_tooltip.py: 4 sig FTs (hover populates portal w. Energy/TESTLIBIDO/effect/1-of-2; PRV|NXT cycle; body click does NOT dismiss; mouseleave clears). FT helper note — the sig FT's _hover dispatches a synthetic mouseenter via JS rather than ActionChains.move_to_element, because the role-card & sig-card cells sit side-by-side in the tray grid: the pointer's animated path crosses the role-card on its way to the sig-card & opens the role tooltip mid-flight, which then occludes the sig stage by the time the move lands. Direct dispatch lands the event on the intended trigger w.o. the cross-cell drag-by. 313 epic ITs + 335 Jasmine specs (incl. 6 new) + 6 tray-tooltip FTs all green. Code architected by Disco DeDisco <discodedisco@outlook.com> Git commit message Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-03 21:07:33 -04:00
{% include "apps/gameboard/_partials/_sig_fyi_panel.html" with panel_id="id_fan_fyi_panel" panel_extra_attrs='style="display:none"' %}
Game Kit fan stage + FLIP/SPIN; sig/sea/fan refactor — TDD - fan modal: stage block w. idle-reveal/careen-out; carousel shifts left so focused card sits left-of-center; SPIN rotates whole card via Element.animate(); FLIP toggles polarity (Levity ↔ Gravity) via perspective rotateY w. mid-flip repaint; SPIN state retained across FLIP; FLIP btn hover-revealed only when focused card or btn is hovered (:has) - mobile breakpoints: --fan-card-w / --fan-card-h / --fan-stage-shift / --fan-carousel-step lifted to CSS vars on .tarot-fan-wrap; portrait ≤ 480px @ 150×230, landscape ≤ 500h @ 150×235; corners + face text/padding scale w. card width - shared StageCard JS module (apps/epic/stage-card.js): fromDataset, populateCard, populateKeywords, buildInfoData, renderFyi — sig/sea/fan all delegate; ~150 lines de-duplicated - shared @mixin stat-block-shared (SCSS) lifts duplicated stat-face / stat-keywords / sig-info rules; @mixin stage-card-polarity unifies sea-stage--levity/--gravity + fan[data-polarity] coloring - model rename: TarotCard.reversal → reversal_qualifier (migration 0014); render-time fallback to current polarity's qualifier when blank - class unification: .sig-info-open / .sea-info-open / .fyi-open → .fyi-open (on stat block); .sig-flip-btn / .sea-spin-btn / .fan-spin-btn → .spin-btn; same for .fyi-btn / .fyi-prev / .fyi-next - custom combobox (apps/epic/combobox.js) replaces native <select> for PICK SEA spread picker — keyboard nav, click-outside-close, aria roles; Firefox/Chrome OS-rendered <option> ignored CSS - Jasmine: FanStageSpec.js w. idle-reveal / population / SPIN / FYI / FLIP specs; sig + sea fixtures + IT view assertions updated for renamed classes - 748 ITs + Jasmine green Code architected by Disco DeDisco <discodedisco@outlook.com> Git commit message Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-30 21:01:52 -04:00
</div>
<button id="id_fan_next" class="fan-nav fan-nav--next" aria-label="Next card">&#8250;</button>
</div>
</dialog>
{% endblock content %}
{% block scripts %}
Game Kit fan stage + FLIP/SPIN; sig/sea/fan refactor — TDD - fan modal: stage block w. idle-reveal/careen-out; carousel shifts left so focused card sits left-of-center; SPIN rotates whole card via Element.animate(); FLIP toggles polarity (Levity ↔ Gravity) via perspective rotateY w. mid-flip repaint; SPIN state retained across FLIP; FLIP btn hover-revealed only when focused card or btn is hovered (:has) - mobile breakpoints: --fan-card-w / --fan-card-h / --fan-stage-shift / --fan-carousel-step lifted to CSS vars on .tarot-fan-wrap; portrait ≤ 480px @ 150×230, landscape ≤ 500h @ 150×235; corners + face text/padding scale w. card width - shared StageCard JS module (apps/epic/stage-card.js): fromDataset, populateCard, populateKeywords, buildInfoData, renderFyi — sig/sea/fan all delegate; ~150 lines de-duplicated - shared @mixin stat-block-shared (SCSS) lifts duplicated stat-face / stat-keywords / sig-info rules; @mixin stage-card-polarity unifies sea-stage--levity/--gravity + fan[data-polarity] coloring - model rename: TarotCard.reversal → reversal_qualifier (migration 0014); render-time fallback to current polarity's qualifier when blank - class unification: .sig-info-open / .sea-info-open / .fyi-open → .fyi-open (on stat block); .sig-flip-btn / .sea-spin-btn / .fan-spin-btn → .spin-btn; same for .fyi-btn / .fyi-prev / .fyi-next - custom combobox (apps/epic/combobox.js) replaces native <select> for PICK SEA spread picker — keyboard nav, click-outside-close, aria roles; Firefox/Chrome OS-rendered <option> ignored CSS - Jasmine: FanStageSpec.js w. idle-reveal / population / SPIN / FYI / FLIP specs; sig + sea fixtures + IT view assertions updated for renamed classes - 748 ITs + Jasmine green Code architected by Disco DeDisco <discodedisco@outlook.com> Git commit message Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-30 21:01:52 -04:00
<script src="{% static 'apps/epic/stage-card.js' %}"></script>
Baltimorean Note unlock loop — full UX from bawlmorese pronoun pick → Brief banner → DON → palette modal → dashboard swatch ; rootvars.scss adds the Baltimorean (Blt) hue family (red 200,16,46 / yellow 255,212,0 / white 255,255,255 / black 0,0,0 / purple 26,25,95 / orange 221,73,38 — Maryland-flag-derived plus a `--sixBlt: 162,170,173` neutral) + two `.palette-baltimore` / `.palette-maryland` palette classes wiring those hues into the standard `--priUser`…`--decUser` slots; companion section-header rename "/* X Palette */" → "/* X Hues */" across rootvars to disambiguate raw hue families (Precious Metal / Cosmic Metal / Chroma / Earthman / Technoman / Inferno) from actual palette classes — section-comment-only, no rule-level change ; baltimorean entry added in 3 registries that drive the loop: `_NOTE_DISPLAY` (drama/models.py) — `{"greeting": "Ayo,", "title": "Ard!"}` so DON flips navbar `Welcome, Earthman` → `Ayo, Ard!`; `_NOTE_TITLES` (dashboard/views.py, user-pre-staged) — drives the "recognized via Baltimorean" copy on dashboard palette swatches; `_NOTE_META` (billboard/views.py) — Baltimorean title + the literal description `"Aaron earned an iron urn."` + palette_options [palette-baltimore, palette-maryland] feeding the my-notes swatch modal ; `set_pronouns` view rewired (dashboard/views.py) — first-time `pronouns = bawlmorese` selection calls `Note.grant_if_new(user, "baltimorean")` + returns `{"brief": brief.to_banner_dict()}` JSON @ 200; idempotent on repeat (the grant_if_new returns brief=None on second call so the 204 path resumes naturally); non-bawlmorese choices stay on the original 204 contract ; client wiring: game-kit.js pronouns `commit()` handles the 200 JSON path — `resp.json().then(data => Brief.showBanner(data.brief))` instead of reload (reload would lose the just-fired banner); 204 still reloads to update active pronoun card; `game_kit.html` pulls in `apps/dashboard/note.js` so `Brief` is in scope on the Game Kit page (it wasn't before) ; Brief banner placement fix — `note.js showBanner()` now measures the `.row .col-lg-6 h2` at render-time + sets inline `top` so the banner portals SQUARELY OVER the page h2 letter-spread wordmark instead of parking at the SCSS-default `top: 0.5rem` (which had it lurking above the wordmark area on every page); portrait-only (gated `if window.innerWidth > window.innerHeight return`) — landscape h2 lives in a `writing-mode: vertical-rl` fixed sidebar column + would need a full banner reorientation (writing-mode + flex-direction restyle of banner contents) to "overlay" sensibly, deferred to a follow-up sprint ; tests: drama/tests/unit/test_models.py (new file) — 5 UTs for `_NOTE_DISPLAY[baltimorean]` greeting/title/name + stargazer smoke tests; dashboard/tests/integrated/test_views.py — `SetPronounsBawlmoreseUnlockTest` (9 ITs covering first-bawlmorese-returns-200-w-brief / Note granted / title `Ard!` / square_url to /billboard/my-notes/ / idempotent on repeat / non-bawlmorese unaffected / bawlmorese-after-other still grants); existing `SetPronounsViewTest.test_post_each_valid_choice` docstring updated to flag the bawlmorese 200 branch ; functional_tests/test_bill_baltimorean.py (new file) — 6 FTs walking the full UX: T1 Game-Kit pronouns click → Brief banner w. `Ard!` title + Look! prose + ?-square + FYI nav; T2 idempotent repeat-click (no re-fire); T3 my-notes Baltimorean item carries the Aaron quote verbatim; T4 DON flips navbar greeting `Welcome, Earthman` → `Ayo, Ard!`; T5 palette modal offers Baltimore + Maryland swatches (and not Bardo/Sheol); T6 Baltimore swatch click previews → OK commits → dashboard Palette applet shows the swatch unlocked w. `data-description` carrying `Baltimorean` + non-empty `data-unlocked-date` + Note.palette = palette-baltimore in DB — all 6 green in 51s; full IT/UT sweep 997 → green in 45s — TDD Code architected by Disco DeDisco <discodedisco@outlook.com> Git commit message Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-18 02:17:07 -04:00
{# Brief.showBanner — needed for the Baltimorean Note-unlock banner the #}
{# pronouns applet fires on first `bawlmorese` selection. #}
<script src="{% static 'apps/dashboard/note.js' %}"></script>
<script src="{% static 'apps/gameboard/game-kit.js' %}"></script>
{% endblock scripts %}