feat(game-center): redesign the Game Center page - #6527
Open
tomeredlich wants to merge 81 commits into
Open
Conversation
Replace the progress snapshot's stat pills and separate level circle with a single level-first HUD: a brand banner (level badge, XP to next level, total XP) with a segmented XP bar, and an icon stat row for streak, longest streak, and achievements. Uses the design-system icons and brand tokens, keeping the milestone and closest-achievement cards intact. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Replace the flat award grid with a trophy grid that surfaces each award's real art, sized uniformly and ordered rarest-first (by the award's Cores value, joined from the products catalog). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Vertical stack of horizontal milestone cards with production icons, action-matched badge colours, claim-first ordering, right-aligned shining claim button. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…ards Replace the 3-column achievement grid on the Game Center shelf with a horizontal row of full-bleed cards where the reward image fills the card. Each card carries the name, description, progress or unlock date, a rarity glow ring and pill, and an XS track/tracked control. Clicking a card opens a centered modal with the enlarged square image and compact details. Scoped to the shelf via a new AchievementShelfCard; the shared AchievementCard used by other profile surfaces is unchanged. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…) + story Adds the shared LevelHud used by the game-center progress snapshot with the deep-cabbage banner treatment: bright cabbage level badge, light-cabbage segmented XP bar, and streak/longest/badges tiles. Includes a Storybook story with variants. Resolves the dangling shared import already referenced by the game-center page. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Milestone quests move from the two-column QuestCard grid to a vertical stack of horizontal cards: an action-coloured badge on the left (streak pink, upvote green, everything else cabbage), name/description/reward chips in the middle, and a shining Claim button pinned right. Ordering now puts ready-to-claim on top, then in-progress closest-to-target, with claimed milestones settling at the bottom under a CLAIMED stamp. This replaces milestone-quests-badge-top.html, the static mockup the design was prototyped in, so the file goes away. The badge case drops the three DataTiles and renders every top-reader badge as a compact card in a horizontal scroller instead of the first three full-size TopReaderBadge cards. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Reviewing the five sections in Storybook surfaced three rendering bugs that only a real render shows. Alpha modifiers on the accent/background tokens silently produce nothing: those tokens are bare `var(--theme-*)` strings, so Tailwind cannot inject an alpha channel and the utility is dropped. `bg-accent-cabbage-default/10` and `bg-background-default/70` therefore rendered fully transparent, and `text-white/70` fell back to the inherited near-black — invisible on the LevelHud banner in light mode. Swapped for the overlay palette, which carries real 8-digit hex values, and for solid tokens where the translucency was decorative. The milestone badge glyphs for streak and level used each icon's primary variant, which is an outline and read as an empty circle at badge size; they now use the filled secondary variant. Milestone reward chips coloured the whole chip with the reward accent, leaving Cores as pale cheese-on-white in light mode. Only the glyph is coloured now, matching the existing QuestCard chips. Adds a Storybook page composing all five redesigned sections with mock data, so the redesign is reviewable without an authenticated session. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
…trophies Milestone quests go back to the earlier arrangement: each quest is a vertical 240px card — badge, name, description, reward chips stacked — and the set scrolls horizontally instead of stacking down the page. The claim button and the progress bar sit on a shared baseline via mt-auto so neighbouring cards line up despite different description lengths. Trophy cells lose their card frame: no border, background, or radius, so the award art carries the grid on its own. The Storybook page's achievement mocks pointed at fabricated image URLs that 404, which is why the shelf rendered blank; they now use a real media.daily.dev asset. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The trophy cells kept 16px of padding after losing their frame, and the grid topped out at six columns, so the art floated in a lot of dead space. Cells drop their horizontal padding and the grid goes to 4/6/8 columns, which halves the section's height for a typical collection. The Storybook page's achievements were four invented entries sharing one placeholder image. They are now six real entries pulled from the achievements catalogue — varied artwork, real rarity spread, and a mix of locked and unlocked so the greyscale and glow-ring treatments both show. Storybook's Tailwind content globs did not cover packages/webapp, so classes used only by the webapp-only game-center components were never generated: the trophy grid silently rendered at the wrong column count in the preview. Added the webapp components path. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The progress snapshot loses its rounded border, subtle background, inner padding, and the two blurred accent glows that only existed to fill that box. The eyebrow, greeting, level HUD, and the upcoming-milestone and closest-achievement tiles now sit directly on the page, matching how every other section on the page is framed. Collapses the two redundant wrapper divs the box left behind. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Aligns AchievementShelfCard with the Slab design one property at a time: the four-stop scrim gradient, a 2px rarity ring as its own layer with the 0 0 16px -2px glow, solid-fill rarity pills in #efab27 / #1dbf8c on #08110c text, a 24px translucent Track/Tracked control, 14.5/11.5/10.5px type, a single-line description, thousands-separated progress, and a 5px white bar. Locked art now uses grayscale(.85) rather than a full desat. The slab only distinguishes two rarity bands, so the shared four-tier scale collapses onto them locally and the other achievement surfaces keep their own tiers. The card was a <button> containing the track <button>, which is invalid HTML and made the control unreachable. The slab is an <article> now, with a full-bleed button for the detail modal and the track control beside it. Two config traps this surfaced: z-4 does not exist (the scale stops at 3) and rounded-full is 100% here, which draws an ellipse rather than a pill — rounded-max is the 9999px one. Storybook renders the four reference states against the real catalogue entries, and gets a #__next host so react-modal can mount the detail view. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The slab writes the unlock date unpadded and always as a date. The shared
post formatter zero-pads the day ("Aug 02") and substitutes "Today" /
"Yesterday" for recent ones, so the shelf formats its own date instead of
reusing it — posts keep the relative wording they rely on.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The image sat in the top of the card instead of behind it. LazyImage appends its own `relative` after the caller's classes, and `.relative` is emitted after `.absolute` in the compiled CSS, so passing `absolute` via className silently lost and the figure laid out as a flex item. Setting the `absolute` prop is the only way to win that cascade. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Replaces the progress snapshot with a collectible-card treatment of the reader themselves: avatar in a framed art window, level as the headline stat, segmented XP bar, a streak/longest/badges stat block, and the next claimable milestone as flavour text. The card sticks to the left at laptop+ while every section — milestones, community pulse, achievement shelf, badge case, trophy case — scrolls past it on the right, so the level and the next claim stay in view for the whole page. The holographic effect follows simeydotme/pokemon-cards-css: pointer position drives --pointer-*, --background-* and --rotate-* custom properties, and CSS paints a color-dodge rainbow foil plus a radial glare from them. Both are held well below full strength because color-dodge over the gold frame blows out, and both are disabled under prefers-reduced-motion. Drops the greeting, the level HUD and the upcoming/closest tiles the card now covers. Achievement tracking is unaffected — it moved onto the shelf cards earlier, so the old pin control was already redundant. Page tests render without a QueryClientProvider, so useQueryClient is stubbed alongside the existing useQuery mock for the card's avatar. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
…ge content" This reverts commit 322afb2.
Trophy case gets "Total awards" and badge case gets "Topics mastered", both inline at the far right of their section header instead of stacked as tiles. The trophy total moves off the tile grid below rather than being repeated, leaving award types and most-earned as a two-up. Reuses DataTile through its container override, so the label, the info tooltip and the value keep their existing treatment and only the axis changes. That override needs !flex-row: flex-col is emitted after flex-row in the compiled CSS, so an unprefixed flex-row loses regardless of class order — same trap as border-0 and p-0 here. The achievement shelf already carried "View all achievements" in that slot as a text link; it is a Secondary button now, reading as the action it always was. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Three stat tiles and two leaderboard panels become one card: a row of counters over avatar rails for each leaderboard, with podium rings and rank badges on the top three and the name, rank and score on hover. Roughly 900px of section becomes ~283px. The counters invert the old tiles. The quest name used to be the tile's value, rendered at Title2 in a third of the row, so both names truncated mid-word — "To the back of the que…". The completion count leads now and the quest name captions it, so the name survives. This also drops two duplicated numbers per leaderboard row: the old rows showed the score on the left and again beside the name, and in the quests board those were two different metrics — quests completed on the left, reputation beside the name — in near-identical positions. Storybook carries the four explored directions plus this one wired the way the page wires it, for future reference. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Scales the slab from 176x232 to 352x464 and every interior value with it — radius, ring width and glow, pill, track control, plate padding, type sizes and the progress bar — so the card reads as the same design at twice the size rather than a large card with small text. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
…ards" This reverts commit 52332a8.
…adges Four changes to the page's chrome: Section headers lose their descriptions, and the hero loses the paragraph under the greeting. The `description` prop is gone from SectionHeader entirely rather than left unused. EmptyStateCard keeps its descriptions; those are empty states, not headline subtext. Nothing renders below 14px any more. typo-footnote (13), typo-caption1 (12) and typo-caption2 (11) all become typo-subhead, and the slab card's arbitrary 10.5/11/11.5/13px values become 14px. The two text buttons move from ButtonSize.Small to Medium, since Small maps to typo-footnote — using the sanctioned size beats overriding it. Verified by walking every rendered leaf node: zero elements under 14px. DataTile is shared with analytics, squads analytics, World and Boost, so its 13px label could not be raised globally. It takes an optional className.label instead, which only the game center passes. That override needs `!` — typo-footnote is emitted after typo-subhead, so an unprefixed class loses regardless of order. Badge case boxes get a slow highlight travelling around a 1px border: a narrow, low-opacity arc on a 7s rotation, disabled under prefers-reduced-motion, plus a small lift on hover. Milestone quest cards drop their icon badges, along with the event-type to icon mapping that only fed them. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Removes the rotating border highlight and its keyframes. The card is back to a single div with a 1px border, as before. Done surgically rather than by reverting the commit, because the same commit raised this file's type to the 14px floor and that stays. Also adds community pulse to the Storybook page preview, which was showing every section except that one. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Total XP was its own right-aligned block inside the dark banner, styled unlike anything else in the component. It is a fourth stat tile now, sitting after Badges at the far right and reading identically to it. The tile row widens to four columns at tablet+ (three when the level system hides achievements), and the banner keeps just the level badge and the XP-to-next-level line. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
…cards Three changes across the snapshot and milestones. The level chip drops its "LVL" label for the number alone at Title1. The number carries no meaning by itself, so the chip gets aria-label="Level N" rather than leaving a bare digit for screen readers. The XP line becomes a fraction: "1,400 / 2,000" instead of "580 XP to level 15". That needs xpInLevel, which the HUD was not being passed — the denominator is xpInLevel + xpToNextLevel, the same total QuestLevelProgressCircle already computes for the ring. Story args gained matching xpInLevel values so each fraction agrees with its levelProgress. Milestone cards only get a filled surface when they are claimable. In progress and claimed cards keep the border and drop the fill, so the ones you can act on read forward of the ones you cannot. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The fraction sat beside the level chip, a row above the bar it described. It now reads directly beneath the bar, matching how the milestone cards put their count under their own progress bar. With the readout gone, the chip no longer needs the two nested flex rows that were positioning it next to the fraction, so those come out. Banner spacing tightens from gap-3 to gap-2 to keep the bar and its readout reading as one unit. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The level bar was ten discrete segments, which quantised progress to the nearest tenth: 70% and 74% drew identically. It becomes a single track driven by the real percentage, reusing the shared ProgressBar the milestone and achievement cards already use rather than another bespoke bar. The segment maths goes with it. Achievement shelf cards go from 176x232 to 192x252, keeping the original aspect ratio. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The page was five stacked sections, three of them horizontal scrollers, with no focal structure: nothing told you what was on the page or which part had something waiting for you. A row of rectangular tiles now sits under the snapshot, one per section, each carrying a live count. They are plain anchors to the sections below, so the full vertical stack stays intact and crawlable while skimmers get a jump target. The four sections that lacked ids get them, with scroll-mt-16 to clear the sticky header the way the milestone anchor already did. Tiles stretch to equal widths on laptop and scroll horizontally below it. Community and Achievements only appear when their data does. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
…pshot" This reverts commit 26b2642.
The level banner ran full width with the stats as a single four-across strip beneath it, so the snapshot read as one tall block and the stats got squeezed into narrow columns. Level progress now takes its own box on the left and the four stats sit in a 2x2 grid on the right, equal widths, matched heights. The stats become a data-driven array so the grid stays honest when the badges tile is absent: with three stats the last one spans both columns, otherwise the divider background shows through the empty cell. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Splitting level progress and the stats into two separately bordered boxes read as two unrelated cards. They share one container again: the outer border and radius live on the wrapper, and a single hairline gap separates the level on the left from the 2x2 on the right, matching the hairlines already dividing the four stat tiles. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The outer border and the hairlines between the level panel and the stat tiles both come out. The purple panel already marks where progress ends and the stats begin, so the rules were doing work the background colour had covered. The odd-count col-span stays: with the divider gone it no longer plugs a visible seam, but three stats in a two-column grid still leave the last row half empty. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
The hero band is roughly 7:1 while the previous asset was 3.5:1, so cover cropped most of its height and the composition read as texture. The new crop is 2.7:1 with its subjects right of centre and dark sky on the left, which is where the heading and stats sit, and anchoring the art to the top keeps the tower and the jump in frame at every width. The image is served from each surface's public/ rather than media.daily.dev, so the preview build renders it; it needs moving to the CDN before merge, as the TODO in image.ts notes.
Prettier indentation only, from eslint --fix. The unformatted file was failing lint_shared, which also gates test_shared through pretest. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
cover scales the art to the band's width while the band's height stays content-driven at about 220px, so the wider the viewport the more of the image's height is cut. The pair spans 47% of that height, so anchoring on the top centre left them out of frame entirely past 1920px. Anchoring on the pair itself keeps them whole to about 1280px and two thirds visible at 1920px. Holding them at every width needs them as their own layer, sized to the band height. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
A chip on every unlocked card made the gold read as decoration rather than as scarcity, so the commoner tiers now carry no chip at all and the two-band slab treatment collapses to the one band that earns it. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The two summary cards restated what the sections below them already say, and the three "see all" affordances repeated links the sidebar carries, so all of it goes along with the featured-achievement plumbing that only the closest-achievement card used. The panes were also underfilled. Achievement progress moves to the top edge of the card, where the chip used to sit, so it reads before the artwork rather than under it; the leaderboards ask for the five rows CommunityPulse already renders instead of three; and the badge pager measures the height its taller neighbour gives it rather than always paging at four. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The shelf led with completed achievements, which put the record before the thing to act on, so anything still in progress now sorts first and closest-to-done leads that half; completed follow, rarest first. The community columns were labelled by subject rather than by measure, so "Awards" now says what it actually ranks, achievement points, and "Quests" says quests completed. The last "see all" tile goes too, along with the component that only it used. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The bar reads as part of the card's own footer, under the description it belongs to, rather than as a strip across the artwork's top edge. The count stays at the top, where it is legible against the image. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The rows carried a plain text tooltip repeating the name and score the row already shows, where every other avatar in the product opens the profile card. The unit prop went with it, since the column headings now name the measure. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Two resolutions worth naming. Storybook's tailwind content globs both grew a package, so the config now lists webapp and extension rather than either side's one. ClaimableGifts still spoke the old vocabulary: main renamed the streak offer to the quest offer, so the placement is QuestCompletion, the log target is QuestOffer, and the shared primitives come from quest/offers.
base.css resets every element to flex-shrink: 0, so the hero heading's min-w-0 and truncate could not clamp it: it measured 424px inside a 414px viewport and pushed the document to 507px. Restoring shrink, the way TruncateText and the rest of the codebase do, lets it ellipsise. The badge and award panes are grid items, which will not shrink past their own content either, so they held 320px in a 272px column on the narrowest phones. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The heading shows its whole sentence again, wrapping instead of ellipsing, now that it is allowed to shrink. Three achievements to a row on a phone means a 91px card, so the card drops to two thirds of its height there, and the description and the progress count give up their space: at that width the description said "Earn 10..." and the count collided with the Track chip. Top reader badges scroll under the thumb on a phone rather than paging four at a time, since the arrows are a poor target at that size. Tablet and up keep the measured pager. The story now takes its shelf order from getAchievementSummary, so Storybook stops showing an order the page does not ship: it had its own copy of the sort, still leading with completed achievements. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The progress count is back on a phone, in the card's footer rather than its top edge, which belongs to the Track chip at three-up. Top reader badges swipe between the pages the arrows step through instead of scrolling their own list, so the pane keeps its height and the page label follows the thumb. Awards open at a size worth looking at, on a phone and on the web: the grid carried a hover tooltip repeating the name and count printed under it, which said nothing to a thumb. The dialog uses the glow art the give-award flow draws large, and states what the pile is worth. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
getMostProgressedQuest fed the upcoming-milestone card, which this branch removed, leaving the helper and its test with no caller. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Preview: https://game-center-redesign.preview.app.daily.dev/game-center
Reworks the Game Center page end to end. Every section changed shape, so this is easier to review in Storybook than in the diff:
Pages/Game Center Redesign→ All Sections.What changed
Progress snapshot → full-bleed hero. A band flush to the top of the page carrying the daily.dev hero artwork, with a frosted-glass level badge. Replaces the bordered card and its heading, so the quests start well above the fold.
Milestone quests → grid. Two columns from tablet, four on laptop, instead of a horizontal scroller. The scroller was hiding claimed milestones past the right edge, which made the ordering impossible to read. Claimable lead, then in-progress by how close they are, then claimed, faded.
Achievement shelf. Shows everything unlocked or under way rather than four curated picks, wrapping downward instead of scrolling sideways. Rarest completed leads; the gold rarity chip is reserved for the sub-1% band and every other tier takes a plain dark chip. Track appears on hover, Tracked stays visible.
Badge case + Trophy case → one "Badges & Awards" section. Split evenly. Top reader badges page four at a time with the control pinned low; awards order by how many you hold and carry the collection's worth in Cores.
Community pulse → ranked bars. Three columns — Awards, Quests, Top reader badges — each row a bar measured against that column's leader. The old avatar rails carried rank only by position, so the distance between first and fifth was invisible. Your own row shows as bold "You".
Claimable gifts. Sponsored streak offers from #6487 render as their own strip and can be claimed inline, reusing the popup's render-then-confirm contract. Currently not rendered — one line to restore in
pages/game-center/index.tsx.Throughout
ProgressBareverywhere — milestones, achievements and community were each drawing their own at different heights.pointer-defaultutility so copy that is chrome doesn't raise an I-beam, while links, buttons and fields keep their cursorsBefore merging
Developer note: the backend needs to be ready for the information shown here before this can ship. The page renders fields the API doesn't serve yet, so those sections are running on stand-ins:
placeholderTopReaderBoard, invented rows. No leaderboard counts top reader badges. Needs a query or removal — flagged in the page and the story.mostAchievementPoints, which is achievement points rather than Cores awards. There is no leaderboard for the latter.Also worth a look:
leaderboardPositiondoesn't covermostAchievementPointsormostQuestsCompleted, so a viewer outside the top five can't be shown their rank.Testing
typecheck-strict-changedclean🤖 Generated with Claude Code
Preview domain
https://game-center-redesign.preview.app.daily.dev/game-center