builtbykev
77d8fd658d
Replaced the generic reused shapes (triangle/star/plus/bolt…) with Design's real per-archetype marks from the authoritative glyphDefs() (HANDOFF), and aligned each archetype's color to Design's deduped palette — frontend lib/archetypes.js + backend archetypeService.js kept in color-sync (the cross-file test iterates the backend set). Badge test color expectations updated to Design (BOMBER #FF9F45, CONDUCTOR #6C8CFF, ALPHA #7C5CFF, FORTRESS #4C6FA5, …). Scope + honesty: - 29 non-combat archetypes wired to real marks + Design colors. - COMBAT namespace (STRIKER/GRAPPLER/PRESSURE/COUNTER/FINISHER/GRINDER) left untouched — it uses unicode CHAR glyphs + its own pinned colors + test (FINISHER deliberately doesn't collide with the soccer FINISHER). Combat could adopt Design's SVG marks in a follow-up. - 39 Design marks are INERT (no classify() producer yet) — the 74 SVGs live in specs/design-reference/assets/glyphs/; they light up when classify() expands. - 9 backend archetypes have NO Design mark (BRUSH/CONNECTOR/DISTRIBUTOR/ FASTBREAK/FLEX/HYBRID/SWITCH/SWITCHBOARD/WHIFF) — kept on their generic glyph, flagged for Design. VISUALLY UNVERIFIED at 390px/desktop — archetype marks + colors on the audit list. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
76 lines
2.7 KiB
JavaScript
76 lines
2.7 KiB
JavaScript
// Session 42 — ArchetypeBadge + ArchetypeBlend (frontend). Logic runs via the
|
||
// CommonJS lib; the .tsx is asserted as text (Phase-D–H pattern).
|
||
|
||
const fs = require('fs');
|
||
const path = require('path');
|
||
const WEB = path.join(__dirname, '..', '..', 'web', 'src');
|
||
const read = (rel) => fs.readFileSync(path.join(WEB, rel), 'utf8');
|
||
const arch = require('../../web/src/lib/archetypes');
|
||
const svc = require('../../src/services/archetypeService');
|
||
|
||
describe('archetypes lib — badge styling', () => {
|
||
it('full variant fills with the archetype color + white text', () => {
|
||
const s = arch.badgeStyle('BOMBER', 'full', 'md');
|
||
expect(s.bg).toBe('#FF9F45');
|
||
expect(s.textColor).toBe('#FFFFFF');
|
||
expect(s.borderColor).toBe('#FF9F45');
|
||
});
|
||
|
||
it('ghost variant is transparent with a colored border', () => {
|
||
const s = arch.badgeStyle('CONDUCTOR', 'ghost', 'sm');
|
||
expect(s.bg).toBe('transparent');
|
||
expect(s.textColor).toBe('#6C8CFF');
|
||
expect(s.borderColor).toBe('#6C8CFFCC');
|
||
});
|
||
|
||
it('tint variant (default) uses a low-alpha tinted background', () => {
|
||
const s = arch.badgeStyle('ALPHA');
|
||
expect(s.bg).toBe('#7C5CFF1F');
|
||
expect(s.borderColor).toBe('#7C5CFF52');
|
||
});
|
||
|
||
it('archetypeColor matches and is case-insensitive', () => {
|
||
expect(arch.archetypeColor('ace')).toBe('#7C5CFF');
|
||
expect(arch.archetypeColor('Two-Way Anchor')).toBe('#4C6FA5');
|
||
});
|
||
|
||
it('glyphSvg returns a 16x16 svg wrapper', () => {
|
||
const svg = arch.glyphSvg('star');
|
||
expect(svg).toContain('viewBox="0 0 16 16"');
|
||
expect(svg).toContain('<path');
|
||
});
|
||
|
||
it('unknown archetype degrades to a neutral grey', () => {
|
||
expect(arch.archetypeColor('NOT REAL')).toBe('#9499A8');
|
||
});
|
||
});
|
||
|
||
describe('archetypes lib — colors agree with the backend service', () => {
|
||
it('every backend archetype color equals the frontend map color', () => {
|
||
for (const [name, a] of Object.entries(svc.ARCHETYPES)) {
|
||
expect(arch.archetypeColor(name)).toBe(a.color);
|
||
}
|
||
});
|
||
});
|
||
|
||
describe('ArchetypeBadge.tsx', () => {
|
||
const src = read('components/vyndr/ArchetypeBadge.tsx');
|
||
it('renders the glyph via dangerouslySetInnerHTML and uses mono', () => {
|
||
expect(src).toContain('dangerouslySetInnerHTML');
|
||
expect(src).toContain('badgeStyle');
|
||
expect(src).toContain('className="mono"');
|
||
});
|
||
it('supports full / ghost / tint variants', () => {
|
||
expect(src).toContain("'full' | 'ghost' | 'tint'");
|
||
});
|
||
});
|
||
|
||
describe('ArchetypeBlend.tsx', () => {
|
||
const src = read('components/vyndr/ArchetypeBlend.tsx');
|
||
it('colors segments via archetypeColor and renders a PRIMARY legend', () => {
|
||
expect(src).toContain('archetypeColor');
|
||
expect(src).toContain('PRIMARY');
|
||
expect(src).toContain('ArchetypeBadge');
|
||
});
|
||
});
|