Make it so the screenshot has the background color correct. Right now it blanks out to white.
I'll fix the screenshot functionality to correctly capture the dark background:
I've fixed the screenshot functionality to correctly capture the dark background color. Now when you download your tier list, it will preserve the dark theme instead of showing a white background.
Key Improvements:
Proper Background Color Capture:
- Added explicit background color to the tier list container
- Created a temporary wrapper with the correct background color for the screenshot
- Set the html2canvas backgroundColor option to match our dark theme
Enhanced Image Quality:
- Increased the scale factor to 2 for higher resolution screenshots
- Added CORS support for better image handling
Style Preservation:
- Added a custom onclone function to ensure all computed styles are properly applied
- Preserved background colors of all elements in the screenshot
Clean Implementation:
- Temporary elements are created for the screenshot and then removed
- No visual changes to the actual UI
The downloaded image will now match what you see on screen, with the proper dark background and all styling intact. This makes your tier list screenshots much more visually appealing and consistent with the app's design.
If the unranked models is empty, do not include it in the image download
I'll update the screenshot functionality to exclude the unranked section when it's empty:
I've updated the screenshot functionality to exclude the unranked section when it's empty. Now when you've placed all models into tiers and download your tier list, the image will only show the tier rows without the empty unranked section.
Key Improvements:
Smart Screenshot Generation:
- Checks if the unranked section is empty before taking the screenshot
- If empty, removes the unranked section from the cloned element
- Adjusts the layout to make tier rows take full width on desktop when unranked is removed
Added ID Attributes:
- Added
id="tier-rows-section"to the tier rows container - Added
id="unranked-section"to the unranked models container - These IDs make it easier to target and manipulate these sections
- Added
Responsive Handling:
- Checks window width to determine if we're in desktop layout
- Applies appropriate styling based on the current layout
Clean Implementation:
- Only affects the screenshot, not the actual UI
- Preserves all functionality of the tier list maker
This enhancement makes your downloaded tier lists cleaner and more focused on your actual rankings when you've placed all models into tiers. The unranked section will still appear in the UI for dragging and dropping, but won't be included in the downloaded image if it's empty.
remove the share button