builtbykev/vyndr
1
0
Fork 0
Code Issues Pull Requests Actions 6 Packages Projects Releases Wiki Activity

M4 locks: flat edge board is mobile-only + chip/grade/hero + overflow contained

Browse Source 
Structural mobile rules become failing tests (M4 'test-lock what's lockable'):
the flat EDGE BOARD shows <768px and game cards are desktop-only; the board
renders TeamChips + tier GradeBadge + sign-colored hero edge% + the ranked
opacity ramp; document never scrolls sideways at 390px. Source assertions —
they lock the RULES, not the pixels (that's the master audit).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Kev
2026-07-16 21:48:21 -04:00
parent 8a24ac9129
commit 6bc9093298
1 changed files with 28 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/unit/vyndrParityQA.test.js
+28
View File
@@ -177,3 +177,31 @@ describe('M1 — mobile foundation is wired (structural, not visual)', () => {
expect(css).toMatch(/@media\s*\(max-width:\s*767px\)\s*\{[^]*?html,\s*body\s*\{[^}]*overflow-x:\s*hidden/);
});
});
// ── M4 — structural mobile locks (design completion train) ──────────────
describe('M4 — mobile structural rules locked (source, not visual)', () => {
const css = read('app/globals.css');
it('the flat EDGE BOARD is the mobile board; game cards are desktop-only', () => {
// Design screen 01: <768px shows the flat edge-ranked board, ≥768px keeps
// the game-grouped cards.
expect(css).toMatch(/\.edge-board-mobile\s*\{\s*display:\s*none/);
expect(css).toMatch(/@media\s*\(max-width:\s*767px\)[^]*?\.edge-board-mobile\s*\{\s*display:\s*block/);
expect(css).toMatch(/\.edge-board-desktop\s*\{\s*display:\s*none\s*!important/);
const slate = read('components/Slate.tsx');
expect(slate).toMatch(/MobileEdgeBoard/);
expect(slate).toMatch(/flattenToEdgeBoard/);
});
it('the mobile edge board renders matchup chips + tier grade + one hero edge%', () => {
const b = read('components/vyndr/MobileEdgeBoard.tsx');
expect(b).toMatch(/TeamChip/); // Rev 3 matchup chips
expect(b).toMatch(/GradeBadge/); // tier-colored grade
expect(b).toMatch(/var\(--miss\)/); // negative edge = red by sign
expect(b).toMatch(/rampOpacity/); // Design's ranked opacity ramp
});
it('document still never scrolls sideways on phones (overflow contained)', () => {
expect(css).toMatch(/@media\s*\(max-width:\s*767px\)\s*\{[^]*?html,\s*body\s*\{[^}]*overflow-x:\s*hidden/);
});
});