UI-Edit: When flipping tiles "face-up", the difference in size can be jarring and makes it harder to play

[a-parris21]

The Problem To start, I would say this is more of a QoL suggestion, rather than a bug-fix. I played the simulation a few times and noticed that the images for the characters are not all the same size. Most of the time this is not problematic but for certain characters (such as Wolf, Sonic, Diddy Kong, and Kirby; Kirby especially) their images are much larger than the other images displayed. And this causes the 'tiles' to get moved farther down the screen or farther up.

Possible Solution A clear and concise description of what you want to happen. I would like that the size parameters are modified for the rendered images so that either:

• All images are rendered at roughly or exactly the same size, maintaining their width-to-height ratios to preserve image quality or
• Each image is rendered inside of a container (such as a <div>) and all image-containers are exactly the same size; and the image would be re-sized to suit its container

Additional context Most of the characters do not have a significant impact on the simulation, however:

• when Wolf has been found, since his image is thinner than the "face-down tile" image, it pushes some of the other tiles up
• Wolf, Sonic and Diddy Kong's images are taller than most of the other tiles, thus they force their entire row (and rows below them) farther down the page
• Kirby's image is so large that flipping his tile face-up effectively re-arranges the entire screen which I find frustrating

[a-parris21]

Can I be assigned this issue? I'd like to implement this solution myself. It shouldn't be too complicated. Probably just some CSS edits.

[github-actions[bot]]

Thanks for the issue! Please feel free to wirk on it if you would like to!

[a-parris21]

Submitted a PR which fixes this issue.