feat(game-center): redesign the Game Center page - #6527
Open
tomeredlich wants to merge 68 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>
Badges get an image on the left, using the artwork the badge query already returns. Keywords carry no image of their own, so where a badge has none the row falls back to the topic's initial. Awards go from twelve narrow columns to five across a row, with the art up from 48px to 80px. Offer subtitles now read "advertiser · perk", matching the popup rows instead of showing the perk alone. The story gains three mock offers so the rail can be seen with the sponsored cards in place; OfferCard is exported for it. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The level badge fills white with the number in accent-cabbage, and gains 8px below it so the bar is not crowded against it. The number goes to weight 900, which needs !font-black: Typography's bold prop emits font-bold and wins on emission order otherwise. Achievement cards go from 192x252 to 208x272. Also adds five new community pulse directions in Storybook, under Pages/Community Pulse Ideas. Nothing on the page changes. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The four snapshot stat icons were bun, cheese, cheese and onion. They all take accent-cabbage now, matching the level number, so the tiles read as one set rather than four unrelated stats. The badges and trophies section gains the snapshot's frame: same 1px border, 20px radius and 8px padding around its two cells. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The offers trailed the milestone rail, which mixed sponsored cards in with earned ones. They get their own strip under Milestone quests instead, with the popup's fine print on the header row so the sponsorship is disclosed once for the section. MilestoneOffers becomes ClaimableGifts, split into a connected component and a presentational section so the story can render it without the query. The rail's trailing slot goes with it, having no consumer left. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The quests were a horizontal scroller, which hid the claimed one past the right edge and made the ordering impossible to read. They now sit in a grid: two columns from tablet, four on laptop, so eight fit above the fold without scrolling. The cards drop their fixed 240px width and shrink-0 to fill their column. Rows size independently, so a row of taller cards does not pad out the rest. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The badge pane was capped at 20rem, which left the awards pane nearly three times its width. Both take half now. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The badge mocks pointed at nothing, so every row fell back to an initial. Three now use real logos from the sources library, resolved by querying source(id:) for each keyword. The logo path is not derivable from the keyword: ClickHouse sits at logos/clickhouse, React at logos/react_js, and Rust under a UUID. GitHub Actions has no source at all, so it stays on the initial and shows what the fallback looks like. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Idea 4. The section was two avatar rails where rank was carried only by position and a podium ring, so the gap between first and fifth was invisible. It becomes two ranked columns, reputation and quests, each row a bar measured against that column's leader. The comparison is the point: reputation clusters tight at the top (100/97/90/85/74) while quests spread wide (100/64/60/54/47), which the rails gave no way to see. The all-time total stays above the columns. The two leader counters go: they named a single quest each, which the ranked columns cover better. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The four snapshot tiles lose their icons. Once they all shared one colour the glyphs stopped distinguishing anything, and the labels already say what each number is. The icon imports go with them. The level badge becomes glass instead of a solid white square: a translucent white gradient over the panel, a lit top edge, a soft drop shadow and a 6px backdrop blur, so the panel's pattern shows through it. The number turns white to sit on the darker surface. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Milestones: the CLAIMED stamp comes off, the reward chips lose their glyphs, and the progress bar thins to 1px and turns neutral. The bar uses bg-text-primary rather than a literal white so it stays visible in the light theme; in dark it reads as the white that was asked for. Claimed still reads from its green bar and status label. Topic rows take the level badge's frosted glass. The awards grid mock carries the real catalogue art, eight distinct pieces, instead of every award falling back to the default dog. The pane headers put the label above the number, and the Claimable gifts strip is hidden on the page and in the story. ClaimableGifts itself stays, so restoring it is one line. Also: the level number centres in its badge, and the achievement shelf stays a rail after trying it as a grid. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The rows go back to a flat background-default fill. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The panel's pattern was four hand-rolled gradients standing in for artwork. It now carries the marketing site's main image, added to lib/image as gameCenterLevelBackground. A purple wash sits over it, heaviest on the left (94%) and lightest on the right (42%), so the level badge, bar and XP readout keep their contrast while the art stays visible past them. The crop follows the site's own desktop framing at 46% 50%. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Options for turning the boxed snapshot into a hero that spans the width with no top margin: a wide banner, a stacked hero, and a HUD bar. They share the shipped panel's artwork and glass badge so the comparison is about layout, not treatment. Nothing on the page changes. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Hero 3. The snapshot was a bordered card under an eyebrow and a greeting heading, roughly 260px before the quests began. It becomes an 88px band spanning the full width, flush to the top: level badge, name, progress bar with its readout, and the four stats inline. The eyebrow and greeting go. The bar carries the name and level itself, so repeating them above was redundant, and the heading was most of what made the section tall. The bleed cancels the page container's px-4/tablet:px-8 and py-6 with matching negative margins, since the hero has to escape padding the rest of the page still wants. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The bar collapsed into a single row from laptop up, which is not the design that was picked: the level, the progress bar and the stats each want their own row, and squeezing them onto one line left the artwork with nothing but a sliver behind the stats. It stays three rows at every width, 180px, and the bar spans the full width as intended. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The name sat at callout size over a "Level 14" caption, which repeated the number already filling the badge beside it. The greeting takes its place as an H1 at title1, and the caption goes. The "600 XP to level 15" readout goes too, leaving the bar with just its fraction underneath. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The strip ran 20px of vertical padding against 32px horizontal, so the content sat tight to the top and bottom edges. It goes to 32px on mobile and 40px from tablet up, matching the horizontal rhythm. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The achievement shelf and gifts strip were horizontal scrollers and the badge column was capped at max-h-80. All three hid content behind a scrollbar. They become wrapping grids and an uncapped column, so nothing sits past an edge: the page now has no scrolling element at all and no horizontal document overflow. Cards drop their fixed widths to fill their columns. The HUD's "Badges" tile was showing achievement counts. Badges now counts top reader badges and a separate Achievements tile carries the unlocked/total pair that tile used to show. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Four columns made the cards 271px wide against a 272px height, so they read as squares rather than the posters they were. Five columns bring them back to 214x272, close to the original 208x272, and all five items fit on one row. The gold chip gains a medal icon beside its label. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Badges page four at a time with prev/next and an "n-m of total" counter, since a reader with ten topics would otherwise run the column past the awards beside it. The awards pane gains "Total earned", the collection's worth in Cores with the core glyph, from a new totalAwardValue on the award summary. Community pulse: the leaderboard icons come out, rows go from 30px to 46px apart, and the all-time total moves under the columns in the same label-then-value shape the case panes use. Milestones: in-progress bars turn cabbage and claimed ones text-tertiary so a spent milestone reads as spent; the claim button turns cabbage with white 900 text; and the locked fade goes, since a locked milestone still shows real progress. New .pointer-default utility keeps the I-beam off copy that is chrome rather than content, while links, buttons and fields keep their own cursors. The earlier cursor-default class did nothing in Storybook, which renders its own wrapper. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The community races and the achievement cards each drew their own bar: different heights (5px, 6px), different tracks (a translucent white on the card art, background-default in the races) and hand-rolled divs. All three now use the shared ProgressBar with the milestone's settings, so they measure identically: 4px, 9999px radius, same track and fill. The badge pager's controls take mt-auto inside a flex-1 column, so they sit at the foot of the pane rather than riding up under a short last page. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The shelf cards carried a coloured ring with a matching glow for gold and emerald tiers. Both come off, along with the class map that fed them; the rarity pill still names the tier. The trophy grid orders by how many you hold rather than by rarity, so the award you have most of leads: a new awardsByCount on the summary, leaving awardsByRarity in place for anything that wants it. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The shelf showed four curated achievements. It now shows everything unlocked or under way, ordered by progress, via a new shelfAchievements on the summary. Untouched achievements stay out, since an empty bar says nothing about your history. The grid already wraps, so the list grows downward instead of off the right edge. Community pulse swaps its reputation column for mostAchievementPoints under a "Most badges" heading. There is no leaderboard for top reader badge counts, so this is the closest the API offers. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Twelve achievements instead of four, five unlocked and seven under way, all pulled from the live catalogue so the shelf fills three rows with real artwork and rarity. The leaderboard rows come from the live queries too. The reputation figures were standing in for achievement points and read as tens of thousands; the real scores are 1,275 down to 1,135, which changes how the bars cluster. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Track hides until hover or keyboard focus; Tracked stays visible, since it is a state worth seeing at rest rather than an affordance. Gold moves to where it means something. The rarity chip reserves it for the sub-1% band and every other tier takes a plain dark chip, while the gold wash moves from the awards pane to the top reader one, matching the chips it holds. The badge pager fills a short last page with invisible rows, so the column keeps its height and nothing below it shifts. Completed replaces Unlocked on the cards. The shelf breaks its progress ties by rarity, so the rarest completed achievement leads. Community pulse marks the viewer's own row as "You" in bold. Headline reads Trophies & Awards. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Community pulse gains a third column and its headings shed the "Most" prefix: Awards, Quests, Top reader badges. The third column runs on invented rows. No leaderboard counts top reader badges, so placeholderTopReaderBoard stands in, flagged in both the page and the story as something to wire or drop before shipping. Claimed milestones fade to 64%, receding without becoming unreadable. The gold wash on the top reader pane loses its diagonal hatch. Section headline reads Badges & Awards. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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
1 participant
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.
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
Two columns look like real data but are not:
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