search

jensbuehl / aoe4-guides

Source code for aoe4guides.com: Yet another Age of Empires IV build order tool
https://aoe4guides.com
MIT License
17 stars 6 forks source link

Add Ability to Type Icons via Shorthand #75

Closed erin-fitzpatric closed 10 months ago

erin-fitzpatric commented 10 months ago

When typing within text fields, add the ability to type an icon based off an assigned shortcut. Instead of pulling up the icon drop-down and manually picking an icon, type something like :vill to automagically insert the villager icon.

This would greatly speed up input process and make the tools easier to adapt. It also seems like the icons don't load very quickly when using the button to insert one. Perhaps this can be optimized?

jensbuehl commented 10 months ago

Thanks! Good suggestion.

I had a similar idea right from the start, but since this is my first web project, I was simply lacking the skills and time to prepare and so went for the easier way that does not involve input parsing and cursor position manipulation. :)

Same is true for the optimization. I guess, I would have to pre-load the images in the background and cache.

Feel free to get involved. With 2 kids around, I cannot promise when I will find the time for any of the suggestions.

jensbuehl commented 10 months ago

PS: Found out that it seems to be the vuetify layouter which eats up a lot of time every time you open up the icon selector. Not the images. This icon selector needs optimization, I agree!

jensbuehl commented 10 months ago

For future reference: https://www.reddit.com/r/vuetifyjs/s/KfSOirk3O7

erin-fitzpatric commented 10 months ago

Mind hitting me up on Discord? I cloned the repo locally and wanted to poke around but not sure how to locally dev against the cloud resources being leveraged. My name is: fitzbro

jensbuehl commented 10 months ago

Sure, once the kids are in bed. Most likely you just need to create a debug API key to access the dev environment on firebase. I did some testing on a local branch reg. inline shortcut replacement. Is doable. Cursor placement needs to be solved, though: https://stackoverflow.com/a/70800591

jensbuehl commented 10 months ago

A. Self made autocomplete: https://medium.com/streak-developer-blog/the-complexities-of-implementing-inline-autocomplete-for-content-editables-e358c0ed504b challenge: "Teleport" vue list menu component to the right position.

B. Use library library that supports contenteditable (e.g. Tribute): https://github.com/zurb/tribute

I would opt for B, but lacking time to dive into it. Any experience with it?

jensbuehl commented 10 months ago

implemented in today's release (no autocomplete menu, though)