Suggestions for UI improvements

[causztic]

Hey! Discovered this project while browsing the subreddit. Thank you for the work!

I have some UI improvement suggestions, primarily for the front page. I'm sure the primary reason for site visits is to get information on a certain hero / artifact, so the front page would be better off just be a search component which people can key in the name and instantly get resuls, instead of showing the changelog of the website, which people will not be as interested in. The reddit and discord links can remain.

The changelog can then be shown on another segment of the website.

I have some experience with Vue, so I could help with this feature. Are you accepting PRs?

Thanks again!

[RaphaelDDL]

Hi @causztic,

Thanks for your interest in helping. You can see the code is still all messy and I haven't separated all components yet (it's everything in a single one so far, like the entire hero detail is a component).

I plan to make filters on both list pages (hero/artifact), which would have some toggleable options (class, element, zodiac, etc) as well as a search input field for names and two more for buff and debuffs.

I agree the home is quite bad, I still haven't given it proper design since the focus (hero/artifact) is still incomplete. Changelog will be a page of it's own later, when I stop manually writing on the template and actually pulling the log from the db.

Anyway, for the search you were thinking, I'll have to write an API endpoint that you could post a string and I'll return whatever we have on database for that string on both hero and artifact collections, correct? That should be easy, I can do it.

I like the type-and-call-api-get-results type of search form, without submit button. Though It might end generating too many calls per min. I'm using heroku free, not sure how much stress it handles. But we can test that too :D

I'll update this repo with latest tonight, it doesn't have latest code. I keep latest on a private gitlab since I keep a few todos and specially game assets (which are copyrighted so better not put here).

So, yes, we do accept PRs :D 👍

Thank you.

[causztic]

Hey!

Thanks for your post.

I like the type-and-call-api-get-results type of search form, without submit button. Though It might end generating too many calls per min. I'm using heroku free, not sure how much stress it handles. But we can test that too :D

One way is to use elasticsearch or redis so that will be the one handling the calls instead of the node/database backend.

Another unorthodox way is to actually load all the names at the start when the user clicks on the search bar, considering we should have less than 500 items.

If there is anything I could do for the repo, please let me know!

[RaphaelDDL]

One way is to use elasticsearch or redis so that will be the one handling the calls instead of the node/database backend.

I'm UI Engineer, so the backend being node+mongodb was just easily accessible, being json and javascript. Never used any of these two. It would be a learning curve for me. I was reading about redis vs mongo and so on, and seems it's more complicated though it has better performance.

I think for now we could stick to a search that after few milliseconds of no keyups, makes a post to the API, which returns whatever it finds, at least as a PoC. What you think?

Then the results would be rendered below, a list of hero and artifacts found with that name, and router-links to the detail pages. (which for that I'll need to pull the data from hero/list into a smaller component, in order to be reusable, like I did with the ListItem one.

Edit:

Another unorthodox way is to actually load all the names at the start when the user clicks on the search bar, considering we should have less than 500 items.

Yeah, that could do too. But the amount of data needed to present a minimum list item would be the same as the hero and artifact list pages. I did them to be "on-demand".

If we go this route, I could create a new endpoint that actually returns both hero and artifacts (I do think it's less than 250 total now, who knows an year from now after many patches), and when someone enters the home, it already populates the vuex store. So if you hit home, you'll get both hero/artifact, and going into the specific list page wouldn't trigger a new ajax, but use the data stores on the vuex, similar how I store the data on memory now so new visits to the list pages on the same session grab from vuex rather than new ajax.

Hmmmm. I liked the second one. But that'll need a bit more changes then. Shall we try the PoC with the search input and api post first?

[RaphaelDDL]

Also, I just updated this repo to latest (0.4.5) but still not fully tested (so it's not even live in website yet), it has few refactors such as separating hero and artifact as modules in vuex/store.

Proceed with caution and let me know if you find any errors when npm run serve it :P

edit: I committed assets folder too by mistake (which images are copyrighted) so you'll see repo has no history anymore because I had to delete in order to not keep record of copyrighted stuff.

[causztic]

I'll have a look this weekend! Thank you for the updates 👍

As for the copyrighted images, I believe they can be considered under fair use as we are merely using them for non-profit and for informational purposes only.

from this website: https://www.socialmediaexaminer.com/copyright-fair-use-and-how-it-works-for-online-images/

"The purpose of the Fair Use Doctrine is to allow for limited and reasonable uses as long as the use does not interfere with owners’ rights or impede their right to do with the work as they wish."

"the fair use of a copyrighted work, including such use by reproduction in copies or phonorecords or by any other means specified by that section, for purposes such as criticism, comment, news reporting, teaching (including multiple copies for classroom use), scholarship, or research, is not an infringement of copyright."

Hence, we are able to use the images in our context of maintaining e7's wikipedia of sorts. Besides, even if the images are on here or not, if we were to receive a DMCA it won't matter in the end. (Not that we should get any!)

[willhausman]

Can you update the latest to this repo? I was looking at putting a search component on the homepage, but I see that the filters you've added to the live site aren't on the local build.

[RaphaelDDL]

@willhausman sure, I'll update today in few hours

[willhausman]

The design needs some serious TLC, but I have a working prototype with this feature now in a fork. I'll clean it up to at least be semi-presentable and make a PR soon. It is meant to be a quick search only (keyword filter only). Both heroes and artifacts are returned with links to their details.

[willhausman]

I took the approach of just filtering from memory after all heroes and artifacts are loaded into the store, like you mentioned. It also reuses the existing ListItem components, so code reuse is taken care of. Currently, the two lists are separate, but I can combine them if the design looks better that way.

[RaphaelDDL]

Updated 67b685e07bff059d56317640a55c7c002150c990

Also, sorry for code so messed up, I'm trying to deliver stuff and then refactor into proper components

[willhausman]

PR #2 submitted to address this issue with a working prototype.

[RaphaelDDL]

2 and #3 addresses a first attempt on homepage search.

Thank you, guys, specially @willhausman 👍