Add Classic Skin and/or Resource Labels

[markjouh]

When I first opened the web UI, the lack of labels/tooltips made it a bit tricky to deduce which resource each tile represented. Even after figuring it out, my visual intuition from the physical game and sites like colonist.io didn't fully carry over, which made play feel a bit disorienting and sluggish.

Some simple tooltips and a “classic” skin with familiar textures, colors and icons would make a world of difference.

Appreciate your work; just wanted to share fresh‑eyes feedback that might help others onboard quickly. Happy to help if needed.

[bcollazo]

Hey markjouh,

Thanks for the feedback! I actually agree with you 😅 . I just don't have the skills to produce better assets. If you can generate some and post them here, I'd definitely consider it. We could even make this thread one were we collect several options then choose one. 👍

[jogvan-k]

Here are some assets for tiles and trading port assets that I created with ChatGPT for a more classic look. I might look into adding it as a skin for the UI.

[bcollazo]

Woaaah! These look really cool; great generation. Could you generate them or manipulate them in a way that they look like: https://github.com/bcollazo/catanatron/blob/master/ui/src/assets/tile_brick.svg. That is, on SVG per tile with transparent background (and hopefully perfect dimensions). The idea is that the resulting UI would look HD and crisp.

That way we can just drop-in replace with no changes to the code.

I am also ok with minor changes to the code, just thought the replace-assets-in-place approach would be easier. I have very little skills in terms of manipulating images with design tools and such!

Thanks for generating these already! 🙌 💪

[jogvan-k]

Creating .svg images is a whole different story, we can't just convert images to svg, and it will be hard to create svg tiles with a classic Catan look.
I'll see what I can do, I think ideally we will support multiple skins that can be changed on the fly while playing.

[bcollazo]

Ahhh true. Ok, maybe they look good in .png as well! 👍

[jogvan-k]

I've created a PR that adds a classic skin option to the PR. See #351

[jeremiahjthomas]

This looks really good!

[jogvan-k]

@jeremiahjthomas thank you!
@bcollazo can you review the PR so we can get it merged?