feat: editable awards + SVG glyph picker#96
Merged
Conversation
Commissioner panel: - Glyph input replaced with a 5-icon picker grid (cup, medal, ribbon, star, plank) rendered as the same SVG glyphs used by stat trophies - Each award row has an Edit button — clicking it populates the form and switches to update mode (form header + button label change) - Cancel button dismisses the edit and resets the form - Save calls PATCH /api/huddles/:id/awards/:awardId Server: - updateAward() service function (commissioner-gated, reuses validation) - PATCH /api/huddles/:id/awards/:awardId route Client: - useUpdateAward() hook Display (TeamPage + LeagueSettingsPage): - TrophyCard-style award cards now render the SVG glyph via TrophyGlyph/ SettingsGlyphSvg instead of raw emoji text, matching the stat trophies exactly in icon style
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Added 9 new glyphs, removed Plank: - Crown — champion/winner - Lightning — MVP / top scorer - Fire — hot streak / most points - Rocket — most improved - Skull — worst record / eliminated - Trash Can — sacko award - Poop — bad luck / worst performance - Ghost — disappeared (most inactive) - Heartbreak — most heartbreaking loss - Handshake — most trades Removed: Plank (wood) from the picker grid. All new glyphs share the same stroke style (1.4px, round caps/joins, 15% fill opacity) as the existing trophy SVGs. Updated in CommissionerPage (GlyphSvg), TeamPage (CommissionerGlyph), and LeagueSettingsPage (SettingsGlyphSvg).
…anel Commissioners now have full control over the Trophy Room from a single panel in the Control Panel: Built-in trophy toggles: - Toggle switches for each auto-generated trophy type (Champion, Runner-Up, 3rd Place, High Score, Missed Playoffs) - Opt-out model: all enabled by default; commissioner disables unwanted - Disabled trophies are hidden from the team page Trophy Room Custom awards (merged from CustomAwardsPanel): - Glyph picker, colour selector, title/description/team/season fields - Edit and delete existing grants - All in the same panel, below the built-in toggles TeamPage TrophyRoom: - Filters buildTrophies() output against active settings from API - Total award count includes both active trophies + commissioner awards - useActiveTrophies(huddleId) queried from the linked huddle New: schema + migration (0006_active_trophies.sql), trophyControlService, GET/PUT /api/huddles/:id/trophies[/:trophyType] routes, useActiveTrophies + useSetTrophyEnabled hooks
- useSetTrophyEnabled now does an optimistic cache update so the toggle
flips immediately without waiting for the server round-trip
- Rolls back on error if the PUT fails
- Removed disabled={toggle.isPending} so each toggle is independently
clickable (not blocked by another toggle's in-flight request)
Note: also requires running 0006_active_trophies.sql migration if the
table doesn't exist yet in the DB
This reverts commit d89685c.
Adds a full-size live preview card to the award creation form that mirrors the exact TrophyCard layout used in the Trophy Room: - Appears as soon as a title is typed - Updates in real-time as glyph, color, title, description, season change - Same border tint, background wash, SVG glyph, italic serif title, description sub-line, colored footer rule as the actual rendered card Also removed the dead CustomAwardsPanel component (replaced by TrophyRoomPanel in the previous commit).
Glyph picker now has two rows:
- Built-in (6): Cup, Medal, Ribbon, Star, Lightning, Trash Can
- Custom icons: any .svg file dropped into
server/src/assets/award-icons/ appears here automatically
Backend:
- GET /api/award-icons reads the directory at request time (hot-reload,
no restart needed), returns { id, name, svg } for each .svg file
- Two example icons seeded: crown.svg, fire.svg
- README.md in the directory explains the format
Client:
- useAwardIcons() hook (5min staleTime)
- GlyphSvg/CommissionerGlyph/SettingsGlyphSvg accept iconSvg prop;
kinds prefixed icon: render via dangerouslySetInnerHTML
- iconMap passed through TrophyRoom, HuddleAwardsStrip, AwardsSection,
AwardBadge so all display surfaces render custom icons correctly
- Live preview card + AwardBadge both respect icon: kinds
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.
What\n\nTwo improvements to the custom awards system:\n\n### 1. Editable awards\n- Each granted award row now has an Edit button that populates the form\n- Form header and submit button switch to "Edit Award" / "Save changes" mode\n- A Cancel button dismisses the edit and resets the form\n- Save calls
PATCH /api/huddles/:id/awards/:awardId\n- NewupdateAward()service +useUpdateAward()hook\n\n### 2. SVG glyph picker\n- Replaces the free-text input with a 5-icon grid of the same SVG shapes used by stat trophies: Cup, Medal, Ribbon, Star, Plank\n- Selected glyph is previewed large in the color picker row, matching the actual rendered card\n-glyphfield now stores the kind string (cup,medal, etc.) instead of emoji — consistent withTrophyGlyphin TeamPage\n\n### Display updates\n- TeamPage TrophyRoom — awards useTrophyGlyphSVG instead of raw emoji text\n- LeagueSettings AwardsSection — same, via a localSettingsGlyphSvghelper\n- Both already use the TrophyCard-style layout from the previous PR