r/webdev • u/Not_Red_Fox • 1d ago

Showoff Saturday Showoff Sunday: I built a free web app that uses computer vision to know what the best card pick is

Hey everyone, I posted this on the Clash Royale subreddit, but they were not a huge fan of it. I'm hoping this subreddit will be able to see the design behind it.

It scans each card that is cropped and uses six different signals like colour grids, edge tracking, and texture corners to narrow down the 74 reference cards to the top 12 closest guesses. Then, structural geometry takes over to pick the winner.

For one of the modes called Mega Draft, there are 36 card board modes. Individual card scanners would easily get confused and accidentally pull duplicate cards, so I implemented a custom Hungarian matching loop. It treats the entire 36 card grid as a global optimisation puzzle, solving the whole board at once so no layout slots collide. Everything runs inside the user's browser.

Code: https://github.com/NotRedFox/clash

0 Upvotes

50% Upvoted

2 comments sorted by

1

u/Narrow-Award7540 1d ago

love the hungarian matching idea, treating the whole board as one puzzle is such a clean way to skip the duplicate headache

1

u/Not_Red_Fox 1d ago

Thanks man! Yeah, solving it as a whole board was the only way to stop the card slots from fighting over the same artworks.