hexaclue/pride-overlay

Easily turn your profile picture into an LGBTQ+ profile picture!

pride-overlay's Issues

Select multiple flags

Users should be able to select multiple flags, to put besides each other.

Requirements:

• Selector, just like the current flag selector, but with an "➕ Add another flag" button besides the selector or underneath the list of flags.
• Rendering them the right way

Resize for export

Users should be able to resize the image before export (e.g. when they choose for the image to be animated, which may take a REALLY long time on low-power devices, but may become quicker if the image is first resized to a lower resolution / if the export resolution is lowered).

Note: currently, the export resolution gets limited to a hardcoded 256x256. Though this works okay-ish, the ideal situation would be as described above.

Flag cutoff when only one is selected

Rendering the flag with only one flag selected works fine, but when you apply rotation (no matter whether it comes from the animation or the rotation setting) the right side of the flag is cutoff (only rendered from -1/2 to 1, horizontally)

GIF input

A user should be able to put in a GIF image, and export a GIF image as well.

Requirements:

• The amount of input frames should also determine the amount of output frames.
• The user should be able to select how many loops of the input GIF will be in the output GIF.
• The preview should be working and showing all frames.
  • This would require extracting all frames from the input, then drawing them based on performance.now().

Nice to have:

• The user can also export as a static image.
  • Therefore, the user should be able to select the specific input frame.

Dark mode

Aaaaaaaaaaah, my eyes!! Currently, there is no dark mode on this app.

Possible fixes:

• Toggle switch
• CSS media query (prefers-color-scheme)
• (Both)

Flag ratios

Some flags (e.g. the bisexual flag, or the paragender flag) do not have a standard ratio of colours. For example, the bisexual flag has a ratio of 2:1:2.

Fix:

• A file with a map (just like /src/lib/constants/flagColours.ts), containing the ratios per flag.
  • Note that this should only contain flags which have ratios that are not all 1, for efficiency sake.
  • <String, number[]>
• Use these ratios in drawToCanvas.

Add keyboard navigation

Currently, barely anything works with just the keyboard.

Requirement:

• Everything on the page should be accessible with just the keyboard.

Stretched input image in output image

Currently, if the input image is not exactly square, the image will be stretched to a square ratio, to fill the available space. This is in almost 100% of the cases not what a user wants.

Possible fixes:

• Center the input image
• Let the user choose where the input image belongs in the image (requires more work, but may satisfy the user more)

Export w/o input

A user should be able to export the image without an input image. This would mean that the exported image is just a pride flag.

Requirements:

• A message above the export button saying that it is just the pride flag without any input.

Use single color table for animated rotating flags

I couldn't help but notice that animated gifs made by this tool can be unreasonably large.
Using a single color table for all frames can (at times) dramatically reduce the size. (~30% in my cases)
if this method is applied during creation and not retroactively, this could also improve animation times.

since you are not supporting gifs (at least not yet) it may be worth applying this option compression method to all gifs. I'm not well versed in gif creation/editing in JS/TS so I can't offer much advice other than that.

Offset rotation

Users should be able to offset the rotation of the flag if the export image is static (not animated).

Preview while scrolling

Currently, the preview is only on the bottom of the page, just below the exporting section. This makes it hard to see what you're changing, especially for mobile devices.

Possible fix:

• Desktop: Side-panel
• Mobile:
  • Floating section on mobile (e.g. top or bottom panel)
  • A panel you can click so it shows up maybe?