sig-select sprint: SigReservation model + sig_reserve view (OK/NVM hold); full sig-select.js rewrite with stage preview, WS hover cursors, reservation lock (must NVM before OK-ing another card — enforced server-side 409 + JS guard); sizeSigModal() + sizeSigCard() in room.js (JS-based card sizing avoids libsass cqw/cqh limitation); stat block hidden until OK pressed; mobile touch: dismiss stage on outside-grid tap when unfocused; 17 IT + Jasmine specs
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
@@ -211,7 +211,7 @@ body {
|
||||
border-bottom: none;
|
||||
border-right: 0.1rem solid rgba(var(--secUser), 0.4);
|
||||
background-color: rgba(var(--priUser), 1);
|
||||
z-index: 300;
|
||||
z-index: 100;
|
||||
overflow: hidden;
|
||||
|
||||
.container-fluid {
|
||||
|
||||
@@ -817,72 +817,245 @@ $card-h: 60px;
|
||||
}
|
||||
|
||||
|
||||
// ─── Significator deck (SIG_SELECT phase) ──────────────────────────────────
|
||||
// ─── Sig Select overlay (SIG_SELECT phase) ────────────────────────────────────
|
||||
//
|
||||
// Two overlays (levity / gravity) run in parallel, one per polarity group.
|
||||
// Layout mirrors the gatekeeper: dark Gaussian backdrop + centred modal.
|
||||
// Inside the modal: upper stage (card preview) + lower mini card grid (no scroll).
|
||||
|
||||
// When the sig deck is present, switch room-page from centred to column layout
|
||||
.room-page:has(#id_sig_deck) {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: flex-start;
|
||||
gap: 1rem;
|
||||
|
||||
.room-shell {
|
||||
max-height: 50vh;
|
||||
}
|
||||
html:has(.sig-backdrop) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#id_sig_deck {
|
||||
.sig-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
backdrop-filter: blur(5px);
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sig-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
z-index: 120;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sig-modal {
|
||||
pointer-events: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%; // respects overlay padding-right set by JS
|
||||
max-width: 420px;
|
||||
max-height: 100%; // respects overlay padding-bottom set by JS
|
||||
}
|
||||
|
||||
// ─── Stage ────────────────────────────────────────────────────────────────────
|
||||
// flex: 1 — fills all space above the card grid; no background (backdrop blur).
|
||||
// Row layout: preview card bottom-left, stat block fills the right.
|
||||
// Card width is set by sizeSigCard() in room.js (smaller of 40% stage width or
|
||||
// 80% stage height × 5/8) via --sig-card-w CSS variable — libsass can't handle
|
||||
// container query units inside min().
|
||||
|
||||
.sig-stage {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
padding: 0.75rem;
|
||||
overflow-y: auto;
|
||||
align-content: flex-start;
|
||||
max-height: 45vh;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(var(--terUser), 0.3) transparent;
|
||||
gap: 0.75rem;
|
||||
|
||||
// Preview card — width driven by JS via --sig-card-w; aspect-ratio derives height.
|
||||
.sig-stage-card {
|
||||
flex-shrink: 0;
|
||||
width: var(--sig-card-w, 120px);
|
||||
height: auto;
|
||||
aspect-ratio: 5 / 8;
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(var(--priUser), 1);
|
||||
border: 0.15rem solid rgba(var(--secUser), 0.6);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
padding: 0.25rem;
|
||||
overflow: hidden;
|
||||
|
||||
// game-kit sets .fan-card-corner { position: absolute; top/left offsets }
|
||||
// so these just need display/font overrides; the corners land at the card edges.
|
||||
.fan-card-corner--tl {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
line-height: 1.1;
|
||||
gap: 0.1rem;
|
||||
|
||||
.fan-corner-rank { font-size: 1rem; font-weight: 700; }
|
||||
i { font-size: 0.75rem; }
|
||||
}
|
||||
|
||||
.fan-card-corner--br {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
line-height: 1.1;
|
||||
gap: 0.1rem;
|
||||
|
||||
.fan-corner-rank { font-size: 0.9rem; font-weight: 700; }
|
||||
i { font-size: 0.75rem; }
|
||||
}
|
||||
|
||||
.fan-card-face {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 0.25rem 0.15rem;
|
||||
gap: 0.2rem;
|
||||
|
||||
.fan-card-name-group { font-size: 0.55rem; opacity: 0.6; }
|
||||
.fan-card-name { font-size: 0.7rem; font-weight: 600; }
|
||||
.fan-card-arcana { font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.5; }
|
||||
.fan-card-correspondence{ font-size: 0.5rem; opacity: 0.5; }
|
||||
}
|
||||
}
|
||||
|
||||
// Stat block — hidden until a card is previewed; fills remaining stage width.
|
||||
.sig-stat-block {
|
||||
flex: 1;
|
||||
align-self: stretch;
|
||||
background: rgba(var(--priUser), 0.25);
|
||||
border-radius: 0.4rem;
|
||||
border: 0.1rem solid rgba(var(--terUser), 0.15);
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.sig-stage--frozen .sig-stat-block { display: block; }
|
||||
}
|
||||
|
||||
// ─── Mini card grid ───────────────────────────────────────────────────────────
|
||||
// flex: 0 0 auto — shrinks to card content; no background (backdrop blur).
|
||||
// align-content: start prevents CSS grid from distributing extra height between rows.
|
||||
|
||||
.sig-deck-grid {
|
||||
flex: 0 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
align-content: start;
|
||||
gap: 2px;
|
||||
padding: 4px;
|
||||
overflow: hidden;
|
||||
margin: 0 1rem 5rem 4rem;
|
||||
}
|
||||
|
||||
.sig-card {
|
||||
width: 70px;
|
||||
height: 108px;
|
||||
border-radius: 0.4rem;
|
||||
background: rgba(var(--priUser), 1);
|
||||
border: 0.1rem solid rgba(var(--secUser), 0.4);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 0.25rem;
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s, border-color 0.15s;
|
||||
aspect-ratio: 5 / 8;
|
||||
border-radius: 3px;
|
||||
background: rgba(var(--priUser), 0.97);
|
||||
border: 1px solid rgba(var(--secUser), 0.3);
|
||||
position: relative;
|
||||
cursor: grab;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(var(--secUser), 1);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 0 0.5rem rgba(var(--secUser), 0.3);
|
||||
}
|
||||
|
||||
// Bottom corner is redundant at this size
|
||||
.fan-card-corner--br { display: none; }
|
||||
|
||||
// Top corner — override game-kit's 1.5rem defaults with deeper nesting
|
||||
// game-kit sets .fan-card-corner { position:absolute; top:0.4rem; left:0.4rem }
|
||||
// Override: center the element within the card instead.
|
||||
.fan-card-corner--tl {
|
||||
.fan-corner-rank { font-size: 0.65rem; padding: 0; }
|
||||
i { font-size: 0.55rem; }
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
gap: 0; // game-kit has gap:0.15rem — too large at 0.5rem font-size
|
||||
|
||||
.fan-corner-rank { font-size: 1rem; font-weight: 700; }
|
||||
i { font-size: 0.75rem; }
|
||||
}
|
||||
|
||||
// Face — deeper nesting to beat game-kit specificity
|
||||
.fan-card-face {
|
||||
padding: 0.25rem 0.2rem;
|
||||
gap: 0.1rem;
|
||||
// OK / NVM overlay — appears on click (focused) or own reservation
|
||||
.sig-card-actions {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 3px;
|
||||
background: rgba(var(--priUser), 0.92);
|
||||
border-radius: inherit;
|
||||
|
||||
.fan-card-name-group { font-size: 0.38rem; }
|
||||
.fan-card-name { font-size: 0.5rem; }
|
||||
.fan-card-arcana { font-size: 0.35rem; }
|
||||
.sig-nvm-btn { display: none; }
|
||||
}
|
||||
|
||||
&.sig-focused .sig-card-actions { display: flex; }
|
||||
&.sig-reserved--own .sig-card-actions {
|
||||
display: flex;
|
||||
.sig-ok-btn { display: none; }
|
||||
.sig-nvm-btn { display: flex; }
|
||||
}
|
||||
|
||||
// Cursor anchors strip — bottom of card
|
||||
.sig-card-cursors {
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 2px;
|
||||
right: 2px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&:hover:not([data-reserved-by]) {
|
||||
border-color: rgba(var(--secUser), 0.8);
|
||||
box-shadow: 0 0 4px rgba(var(--secUser), 0.25);
|
||||
}
|
||||
|
||||
&.sig-reserved {
|
||||
border-color: rgba(var(--terUser), 1);
|
||||
box-shadow:
|
||||
0 0 0.4rem rgba(var(--terUser), 0.7),
|
||||
0 0 1rem rgba(var(--ninUser), 0.4);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&.sig-reserved--own {
|
||||
border-color: rgba(var(--secUser), 1);
|
||||
box-shadow:
|
||||
0 0 0.4rem rgba(var(--secUser), 0.7),
|
||||
0 0 1rem rgba(var(--ninUser), 0.5);
|
||||
cursor: grabbing;
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Cursor anchors ───────────────────────────────────────────────────────────
|
||||
//
|
||||
// Three tiny dots along the bottom of each mini card, one per role in the group.
|
||||
// Inactive: invisible. Active (another gamer is hovering): coloured dot.
|
||||
|
||||
.sig-cursor {
|
||||
display: block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
transition: background 0.1s;
|
||||
|
||||
&.active {
|
||||
background: rgba(var(--terUser), 1);
|
||||
box-shadow: 0 0 3px rgba(var(--ninUser), 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Sig select: landscape overrides ─────────────────────────────────────────
|
||||
// Wider viewport → 2 rows of 9 cards; modal allowed to fill available width.
|
||||
|
||||
@media (orientation: landscape) {
|
||||
.sig-modal { max-width: none; }
|
||||
.sig-deck-grid { grid-template-columns: repeat(9, 1fr); }
|
||||
}
|
||||
|
||||
// ─── Seat tray — see _tray.scss ─────────────────────────────────────────────
|
||||
|
||||
215
src/static_src/tests/SigSelectSpec.js
Normal file
215
src/static_src/tests/SigSelectSpec.js
Normal file
@@ -0,0 +1,215 @@
|
||||
describe("SigSelect", () => {
|
||||
let testDiv, stageCard, card;
|
||||
|
||||
function makeFixture({ reservations = '{}' } = {}) {
|
||||
testDiv = document.createElement("div");
|
||||
testDiv.innerHTML = `
|
||||
<div class="sig-overlay"
|
||||
data-polarity="levity"
|
||||
data-user-role="PC"
|
||||
data-reserve-url="/epic/room/test/sig-reserve"
|
||||
data-reservations="${reservations.replace(/"/g, '"')}">
|
||||
<div class="sig-modal">
|
||||
<div class="sig-stage">
|
||||
<div class="sig-stage-card" style="display:none">
|
||||
<span class="fan-corner-rank"></span>
|
||||
<i class="stage-suit-icon"></i>
|
||||
<p class="fan-card-name-group"></p>
|
||||
<h3 class="fan-card-name"></h3>
|
||||
<p class="fan-card-arcana"></p>
|
||||
<p class="fan-card-correspondence"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sig-deck-grid">
|
||||
<div class="sig-card"
|
||||
data-card-id="42"
|
||||
data-corner-rank="K"
|
||||
data-suit-icon=""
|
||||
data-name-group="Pentacles"
|
||||
data-name-title="King of Pentacles"
|
||||
data-arcana="Minor Arcana"
|
||||
data-correspondence="">
|
||||
<div class="fan-card-corner fan-card-corner--tl">
|
||||
<span class="fan-corner-rank">K</span>
|
||||
</div>
|
||||
<div class="sig-card-actions">
|
||||
<button class="sig-ok-btn btn btn-confirm">OK</button>
|
||||
<button class="sig-nvm-btn btn btn-cancel">NVM</button>
|
||||
</div>
|
||||
<div class="sig-card-cursors">
|
||||
<span class="sig-cursor sig-cursor--left"></span>
|
||||
<span class="sig-cursor sig-cursor--mid"></span>
|
||||
<span class="sig-cursor sig-cursor--right"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(testDiv);
|
||||
stageCard = testDiv.querySelector(".sig-stage-card");
|
||||
card = testDiv.querySelector(".sig-card");
|
||||
window.fetch = jasmine.createSpy("fetch").and.returnValue(
|
||||
Promise.resolve({ ok: true })
|
||||
);
|
||||
window._roomSocket = { readyState: -1, send: jasmine.createSpy("send") };
|
||||
SigSelect._testInit();
|
||||
}
|
||||
|
||||
afterEach(() => {
|
||||
if (testDiv) testDiv.remove();
|
||||
delete window._roomSocket;
|
||||
});
|
||||
|
||||
// ── Stage reveal on mouseenter ─────────────────────────────────────── //
|
||||
|
||||
describe("stage preview", () => {
|
||||
beforeEach(() => makeFixture());
|
||||
|
||||
it("shows the stage card on mouseenter", () => {
|
||||
card.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true }));
|
||||
expect(stageCard.style.display).toBe("");
|
||||
});
|
||||
|
||||
it("hides the stage card on mouseleave when not frozen", () => {
|
||||
card.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true }));
|
||||
card.dispatchEvent(new MouseEvent("mouseleave", { bubbles: true }));
|
||||
expect(stageCard.style.display).toBe("none");
|
||||
});
|
||||
|
||||
it("does NOT hide the stage card on mouseleave when frozen (reserved)", () => {
|
||||
card.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true }));
|
||||
SigSelect._setFrozen(true);
|
||||
card.dispatchEvent(new MouseEvent("mouseleave", { bubbles: true }));
|
||||
expect(stageCard.style.display).toBe("");
|
||||
});
|
||||
});
|
||||
|
||||
// ── Card focus (click → OK overlay) ───────────────────────────────── //
|
||||
|
||||
describe("card click", () => {
|
||||
beforeEach(() => makeFixture());
|
||||
|
||||
it("adds .sig-focused to the clicked card", () => {
|
||||
card.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
expect(card.classList.contains("sig-focused")).toBe(true);
|
||||
});
|
||||
|
||||
it("shows the stage card after click", () => {
|
||||
card.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
expect(stageCard.style.display).toBe("");
|
||||
});
|
||||
|
||||
it("does not focus a card reserved by another role", () => {
|
||||
card.dataset.reservedBy = "NC";
|
||||
card.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
expect(card.classList.contains("sig-focused")).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
// ── Touch: OK btn tap allows synthetic click through ──────────────── //
|
||||
|
||||
describe("touch on OK button", () => {
|
||||
beforeEach(() => makeFixture());
|
||||
|
||||
it("touchstart on OK btn does not call preventDefault (allows synthetic click)", () => {
|
||||
// First tap the card body to show OK
|
||||
card.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
expect(card.classList.contains("sig-focused")).toBe(true);
|
||||
|
||||
// Now tap the OK button — touchstart should NOT preventDefault
|
||||
var okBtn = card.querySelector(".sig-ok-btn");
|
||||
var touchEvent = new TouchEvent("touchstart", {
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
touches: [new Touch({ identifier: 1, target: okBtn })],
|
||||
});
|
||||
okBtn.dispatchEvent(touchEvent);
|
||||
expect(touchEvent.defaultPrevented).toBe(false);
|
||||
});
|
||||
|
||||
it("touchstart on card body (not OK btn) calls preventDefault", () => {
|
||||
var touchEvent = new TouchEvent("touchstart", {
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
touches: [new Touch({ identifier: 1, target: card })],
|
||||
});
|
||||
card.dispatchEvent(touchEvent);
|
||||
expect(touchEvent.defaultPrevented).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
// ── Touch outside grid dismisses stage (mobile) ───────────────────── //
|
||||
|
||||
describe("touch outside grid", () => {
|
||||
beforeEach(() => makeFixture());
|
||||
|
||||
it("dismisses stage preview when touching outside the grid (unfocused state)", () => {
|
||||
// Focus a card first
|
||||
card.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
expect(stageCard.style.display).toBe("");
|
||||
|
||||
// Touch on the sig-stage (outside the grid)
|
||||
var stage = testDiv.querySelector(".sig-stage");
|
||||
stage.dispatchEvent(new TouchEvent("touchstart", {
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
touches: [new Touch({ identifier: 2, target: stage })],
|
||||
}));
|
||||
expect(stageCard.style.display).toBe("none");
|
||||
expect(card.classList.contains("sig-focused")).toBe(false);
|
||||
});
|
||||
|
||||
it("does NOT dismiss stage preview when frozen (card reserved)", () => {
|
||||
card.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
SigSelect._setFrozen(true);
|
||||
// _focusedCardEl is set but frozen — use internal state trick via _setFrozen
|
||||
// We also need a focused card; simulate it by setting frozen after focus
|
||||
var stage = testDiv.querySelector(".sig-stage");
|
||||
stage.dispatchEvent(new TouchEvent("touchstart", {
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
touches: [new Touch({ identifier: 3, target: stage })],
|
||||
}));
|
||||
expect(stageCard.style.display).toBe("");
|
||||
});
|
||||
});
|
||||
|
||||
// ── Lock after reservation ─────────────────────────────────────────── //
|
||||
|
||||
describe("lock after reservation", () => {
|
||||
beforeEach(() => makeFixture());
|
||||
|
||||
it("does not focus another card while one is reserved", () => {
|
||||
// Simulate a reservation on some other card (not this one)
|
||||
SigSelect._setReservedCardId("99");
|
||||
card.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
expect(card.classList.contains("sig-focused")).toBe(false);
|
||||
});
|
||||
|
||||
it("does not call fetch when OK is clicked while a different card is reserved", () => {
|
||||
SigSelect._setReservedCardId("99");
|
||||
var okBtn = card.querySelector(".sig-ok-btn");
|
||||
okBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
expect(window.fetch).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("does not call preventDefault on touchstart while a card is reserved", () => {
|
||||
SigSelect._setReservedCardId("99");
|
||||
var touchEvent = new TouchEvent("touchstart", {
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
touches: [new Touch({ identifier: 1, target: card })],
|
||||
});
|
||||
card.dispatchEvent(touchEvent);
|
||||
expect(touchEvent.defaultPrevented).toBe(false);
|
||||
});
|
||||
|
||||
it("allows focus again after reservation is cleared", () => {
|
||||
SigSelect._setReservedCardId("99");
|
||||
SigSelect._setReservedCardId(null);
|
||||
card.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
expect(card.classList.contains("sig-focused")).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -21,10 +21,12 @@
|
||||
<script src="Spec.js"></script>
|
||||
<script src="RoleSelectSpec.js"></script>
|
||||
<script src="TraySpec.js"></script>
|
||||
<script src="SigSelectSpec.js"></script>
|
||||
<!-- src files -->
|
||||
<script src="/static/apps/dashboard/dashboard.js"></script>
|
||||
<script src="/static/apps/epic/role-select.js"></script>
|
||||
<script src="/static/apps/epic/tray.js"></script>
|
||||
<script src="/static/apps/epic/sig-select.js"></script>
|
||||
<!-- Jasmine env config (optional) -->
|
||||
<script src="lib/jasmine-6.0.1/boot1.js"></script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user