FE-48: SVG Vector Piece Set Switcher with Smooth Morphing Transitions

[chinweobtagaz]

Context & Description

Chess enthusiasts prefer specific piece aesthetics. We need support for multiple vector piece sets (Standard Neo, Staunton Classic, Alpha, Medieval Knight, Cyberpunk Glow) rendered as crisp SVG vectors with smooth piece movement animations.
Location: frontend/components/AppearanceSettings.tsx

Requirements

1. Include high-quality SVG piece sets: Neo, Staunton, Alpha, Medieval, Cyberpunk.
2. Provide piece set selector dropdown in AppearanceSettings.tsx with live piece preview.
3. Ensure pieces scale crisply to any board resolution without pixelation on Retina/4K displays.
4. Support smooth CSS transition transforms during piece drags and automated replay moves.

Acceptance Criteria

• Selected piece set applies immediately across all boards.
• Zero raster pixelation on high-DPI displays.
• Piece choice persists in localStorage.
• Component tests test piece set switching.

What to be done

1. Add SVG piece assets to frontend/public/pieces/.
2. Update piece renderer component in frontend/components/chess/.
3. Add piece set option in AppearanceSettings.tsx.
4. Write Vitest component tests.

What NOT to be done

• Do NOT use low-resolution PNG/JPG raster images for chess pieces.
• Do NOT cause piece flickering or layout reflows when dragging.

[To0yeni]

@To0yeni has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

I am an experienced software engineer and I can deliver on time.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @To0yeni to this issue.

[pimaster900]

@pimaster900 has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Count on me for this job

ℹ️ Repo Maintainers: To accept this application, review their application or assign @pimaster900 to this issue.

[DevFaster]

@DevFaster has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hi repo maintainer , I am back. i work on this repo and was merged correctly. please get me assigned to this issue . i will implement the correct fix and get it tested, thank you

ℹ️ Repo Maintainers: To accept this application, review their application or assign @DevFaster to this issue.

[ummarig]

@ummarig has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hi maintainer I'm a fullstack developer and I would love to work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @ummarig to this issue.

[drips-wave]

Congratulations, @ummarig! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on August 31, 2026.

🧑‍💻 @ummarig: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[drips-wave]

This issue has been completed by @ummarig as part of the Stellar Wave Program's 8th Wave 🥳

😎 @ummarig: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.