Skip to content

Dx12: club crests across the site - #446

Merged
momomojun merged 5 commits into
mainfrom
a/Dx12-crests
Oct 28, 2026
Merged

momomojun merged 5 commits into
mainfrom
a/Dx12-crests

Conversation

@Carry3

@Carry3 Carry3 commented Oct 28, 2026 •

Copy link
Copy Markdown
Contributor

Closes #443

What

All 20 fictional clubs now have a crest, shown wherever a team is named.

  • Crests: generated by Carry3 with an AI image model, one per club in pivot_core/sim/world.py CLUBS. Backgrounds were removed so each is a transparent 256×256 PNG in apps/web/public/crests/<short>.png (short name lower-cased). The Lunsford crest was re-cut so the checker inside the crescent is transparent too (5ae74b5). All are fictional, no real club marks.
  • One component, components/Crest.tsx: <Crest short="TES" size={48} fallback={…} /> renders <img src="/crests/tes.png" alt="" aria-hidden width height loading="lazy" decoding="async">. It is decorative because the team name always sits next to it. An unknown club, or an image that fails to load, falls back to the kit-colour dot or chip used before. PreMatch.tsx adds TeamKit (crest, with the kit dot as fallback) for the pre-match and line-up headers.
  • Serving: Vite copies public/ to the root of dist/, and pivot_api.single mounts the whole dist/ at /, so /crests/*.png is served the same way as /favicon.svg.

Where they appear, and how big

The direction was that fans recognise a crest faster than a name, so the crest should be the main identifier and not a small decoration.

Place Desktop ≤720px
Score band (expanded) 80px above the name 48px
Slim sticky bar 28px; the bar stays 48px tall 24px
Hub "Live now" 72px above the name 48px
Hub results and next round 40px 28px
Hub "Season so far" and schedule rows 28px 28px
Line-ups team headers, pre-match form and "Form in detail" headers 48px 36px
Turning-point cards (list and Moments), pivot detail "momentum to" 28px 28px
Stats team header 28px (the kit dot stays as the bar-colour key)
Player spotlight team line, line-ups team list 24px

Left unchanged: kit-colour keys in charts (momentum, the period bars, the pre-match bars header, the ground tally), person swatches, the match picker <select>, and What-if (team names there are short inline labels inside tables).

Live-score layout

  • Score band: each team is a centred column, with the crest above the name and the scorers under it. The ♥ follow button stays next to the name. The clock and status ("90+8:37 · Full time") sit small above the score. The compact analyst scoreboard on the live tab uses 40px crests. The slim sticky bar stays one row, 48px tall.
  • Hub "Live now": the same stacked layout, with the minute ("● 25′") above the score.
  • Kept as rows: Hub results, next round, schedule and "Season so far" read like tables, so the crest stays beside the name there.

Also fixes the Hub overflow at 375px found while checking crests

On main the Hub was about 510px wide on phones. A round's schedule rows kept their fixed desktop columns, because the :has() rule for the round list outranked the phone rule. Under 720px:

  • those rows now use the three-column phone grid;
  • each next-round fixture stacks: both teams on one line, the prediction bar full width under them, then the likeliest score and xG.

scrollWidth equals innerWidth on / at 375 and 320 in en, zh and es, and on the match page at 375 in all three languages.

Checks

  • pnpm run lint and pnpm exec vitest run pass (415 tests, including a new crest.test.ts).
  • Checked in the browser against the production API at 1440, 375 and 320.

Screenshots

Hub, 1440
hub

Hub, 375
hub375

Score band, 375
band

Score band and line-ups, 1440
lineups

Preview (form and table) with the slim bar, 1440
preview

🤖 Generated with Claude Code

Carry3 and others added 4 commits October 27, 2026 22:12
Carry3's generated crests for COR, FAL, OST, KEL, ROV, DUN, VAN, HBC, ELM, TES:
the baked-in checkerboard is cut away, framed badges are filled white inside,
frameless ones get a thin white outline so they read on dark backgrounds.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…too (#443)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
One shared Crest component (decorative, alt="", lazy) with the kit chip as
fallback; crests on the score band and slim bar, the Hub, line-ups,
pre-match, turning points, Stats and the player spotlight.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@Carry3

Carry3 commented Oct 28, 2026

Copy link
Copy Markdown
Contributor Author

@momomojun #443 队徽接进网站:20 张队徽是 Carry3 生成的,已经去好背景。比分区、首页大厅、阵容、赛前、转折点卡片、数据页都放上了,按 Carry3 的要求放大了(比分区 80px,手机 36px)。找不到队徽时退回原来的队色点。415 个测试通过。检查通过麻烦帮忙合。另外:首页大厅在 375 宽手机上本来就有约 510px 宽(main 上也这样,不是这个 PR 引起的),我另外修。

…; Hub fits at 375px (#443)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@momomojun
momomojun merged commit 3418665 into main Oct 28, 2026
5 checks passed
@Carry3

Carry3 commented Oct 28, 2026

Copy link
Copy Markdown
Contributor Author

@momomojun 已加上 Carry3 要的上下排列(队徽在上、队名在下,时间在比分上方),并修好了首页在 375 手机上左右滑的问题。415 个测试通过,麻烦尽快检查合并,合完我们就定版录视频。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dx12 · 给每支球队自动生成队徽

2 participants