Skip to content

feat(ui): add download image button to duel view - #117

Open
KrishnaX12 wants to merge 6 commits into
Younesfdj:masterfrom
KrishnaX12:feat/duel-download
Open

feat(ui): add download image button to duel view#117
KrishnaX12 wants to merge 6 commits into
Younesfdj:masterfrom
KrishnaX12:feat/duel-download

Conversation

@KrishnaX12

@KrishnaX12 KrishnaX12 commented Aug 16, 2026

Copy link
Copy Markdown

DESCRPTION !!

What does this PR do?

Adds a "Download" button to the Rivalry (Duel) view so users can save and share their 1v1 matchups as high-quality posters.

Implementation details

  • Integrates html-to-image via the existing renderCardImage utility to capture the Duel view.
  • Applies custom capture hooks to automatically exclude navigation elements (top bar and footer) from the downloaded image.
  • Adjusts the duel's minHeight and adds symmetric padding during capture to export a pristine, tightly-cropped poster.
  • Redesigned the share/download action buttons into a sleek, uniform grid using a flex-col layout, preventing awkward text wrapping and matching the premium feel of the rest of the app.
2026-08-16.19-57-42.1.mp4

@KrishnaX12 KrishnaX12 left a comment

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @Younesfdj, I've added the Download button for the Duel view. Could you please take a look when you have a moment? Thanks!

sheikhwasimuddin

This comment was marked as low quality.

@sheikhwasimuddin sheikhwasimuddin left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Potential browser compatibility issue: ClipboardItem and navigator.clipboard.write() may not be supported in all browsers. Could we add a capability check and provide a fallback (such as downloading the image or copying the duel link) when image clipboard support isn't available? This would prevent the "Copy image" action from failing silently.

@KrishnaX12

KrishnaX12 commented Aug 17, 2026

Copy link
Copy Markdown
Author

@sheikhwasimuddin
DONE !! CHECKOUT !!
Thanks for pointing this out, @sheikhwasimuddin. I’ve added a capability check for image clipboard support and implemented a download fallback for unsupported browsers. I’ve
also attached a video demonstrating the updated behavior. Could you please review it again when you have a chance? and if u want me to remove copy clipboard option jus tell me

2026-08-18.00-37-19.mp4

Co-authored-by: GokulPandi-M <187867218+GokulPandi-M@users.noreply.github.com>

@KrishnaX12 KrishnaX12 left a comment

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed clipboard stuff

@sheikhwasimuddin sheikhwasimuddin left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Re-checked the latest changes. The clipboard capability check and download fallback address the compatibility concern I raised earlier. The implementation looks good from my side. ✅

Approved.

@KrishnaX12

Copy link
Copy Markdown
Author

Thank you @sheikhwasimuddin for the approval! 🚀
@Younesfdj Ready to merge when you get a chance.

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.

2 participants