Styling and design

[Blemming]

The design atm is pretty bland as its just grays blacks and whites. I didn't add any colors because I am not sure what direction you want to take. If you have any ideas of colors you like to spice things up a bit or themes you'd like to take inspirations from let me know and I'll try to incorporate them into the project.

[FloKaemmerer]

That's likely the field I'm lacking the most ;-)

I have absolutely no feeling for design, composition and style. (Backends usually don't have a GUI ;-))

I'm happy for any ideas you have.

The initial idea with building the page/tool was to have something that feels familiar. So anything that goes in that direction (be it in-game or the Poe sites) would fit well, I think....

[Blemming]

For the sidebar I have landed on something sort of like this. It is heavily inspired by the POE trade site of course. There is still a lot of work to do to apply it everywhere and clean up the code so its a bit more obvious what is happening, since we are using vuetify for really custom stuff we sort of have to fight against the frame work, but I am confident I can make it clean with added custom classes and css vars. I just wanted to know what you think before putting in all the work :).

Cheers

[FloKaemmerer]

That looks really good! Way Cleaner and consistent! Nice!

Go for it! :-P

[FloKaemmerer]

If it's any help feel free to add stuff like sass

[Blemming]

If it's any help feel free to add stuff like sass

I have been trying to do the best I can with css variables, but as much as I don't like sass it looks like for it to stay clean I won't really have a choice 😅

[Blemming]

PR is finally here #48

So I refactored some of the code. I saw you did a lot of shenanigans with the store which you don't need to do with pinia. I don't know what your background is but you seem to be following the old school mentality of mutations etc of vuex which isnt needed anymore. Dont know if it was a conscience choice or not.

The most suitable way I found to apply the styles without breaking too much was to create a theme and a vuetify blueprint. With defaults on a lot of the components, which makes it easier in the code to avoid repeating a lot of the props we where using. Also added some custom css for the finer details. I tried to break it up into sections and use the css vars created by vuetify.

There's still a bit to do. Next I'll probably look at the div and overlay filters. Then eventually look at the popups in the map and the right panel with all the details.

I don't have much experience writing tests and with cypress but would be nice to have tests to see if the filters actually work outside of the URL query params.

Im thinking with the new generic filter component a lot of the components could be deleted and all juste integrated into the filter drawer component or maybe a singular holder component with all the filters in it sort of like the overlay one but using the generic filter. I normally like using the concept of "generic" components where you can use the framework you are using but make it dynamic where it translates your "business logic" into something the framework can use. The naming could be better but the generic name is decent I find.

Let me know your thoughts and have a good one :)

[FloKaemmerer]

So I refactored some of the code. I saw you did a lot of shenanigans with the store which you don't need to do with pinia. I don't know what your background is but you seem to be following the old school mentality of mutations etc of vuex which isnt needed anymore. Dont know if it was a conscience choice or not.

This project is the first time for me really working with JS/TS let alone Vue. That was also one of my main motivations to start with it in the first place. So my Background is mostly: "Google for a somewhat working solution -> adapt it -> repeat" ;-)

I'm sure for nearly everything I did in the code, there are likely better/easier ways to do it. If you know them, feel free to change it, I'm happy to learn new stuff.

The most suitable way I found to apply the styles without breaking too much was to create a theme and a vuetify blueprint. With defaults on a lot of the components, which makes it easier in the code to avoid repeating a lot of the props we where using. Also added some custom css for the finer details. I tried to break it up into sections and use the css vars created by vuetify.

The new Styling looks great! Using the Blueprints sounds like a good solution. Now I have to understand how that css stuff works ;-)

I'm currently working on adding having multiple Filters active at once:

PR: #47

I don't think you added a styling preset for tabs? ;-)

I don't have much experience writing tests and with cypress but would be nice to have tests to see if the filters actually work outside of the URL query params.

yeah, Tests would be great. At work I'm a fan of TDD, but with this project sadly abandoned that, since I had to figgure out how JS/TS/Vue works :-/

Im thinking with the new generic filter component a lot of the components could be deleted and all juste integrated into the filter drawer component or maybe a singular holder component with all the filters in it sort of like the overlay one but using the generic filter. I normally like using the concept of "generic" components where you can use the framework you are using but make it dynamic where it translates your "business logic" into something the framework can use. The naming could be better but the generic name is decent I find.

Definitely the better and cleaner approach! Finding good names is a pain XD

I will have a look at the PR asap.

[Blemming]

I don't think you added a styling preset for tabs? ;-)

No, I only styled things I used, like I said I planned on going through the whole project and restyle things one at a time. You can add the tabs and try to incorporate what I did to your new feature and I'll sync my fork and try to style it as best I can but as long as you set it to dark mode it shouldnt look too out of place, hopefully hahaha

[FloKaemmerer]

You likely noticed that I merged your changes, looks way better! :-)

I also merge a first version of supporting multiple Filters into the Develop Branch. (btw. there is a staging environment where the Develop Branch is deployed: https://home-5013828752.app-ionos.space/) The PR: #51

Are you able to comment on PR, as you are not member of the Project? May I should add you as collaborator?

PS: at some point next week I'm planning to make an update Post on Reddit, I'd like to give you a shoutout there (If thats ok with you), you got a reddit handle?

[Blemming]

I can comment without being a collaborator. I'll give it a look in a bit. My reddit handle is u/blue0lemming

EDIT::

Are you able to comment on PR, as you are not member of the Project? May I should add you as collaborator?

So I can't fork the develop branch for some reason so I can't really look at the code unless its through the review windows which sucks or unless I clone your project. But it looks ok couple of suggestions:

1. Instead of random colors maybe make an array of predefined colors that burn the retinas a bit less 😂, random colors also has the disadvantage of sometimes generating colors very similar to preexisting ones.
2. I'd probably put the different filters in a dropdown, probably with the add a filter button to cut down on the clutter. Or maybe in the main navbar. I'd have to try some things out, I'll try cloning your repo.

[Blemming]

So a few things I landed on that I liked: Legend in the main navbar, maybe not in the main navbar but there should def be a legend somewhere: Other thing, cleaning up the filter sidebar by putting it in a drowdown:

Maybe in the legend section we could have an eye icon to show and hide different filters. Another issue but people will probably want this, the ability to import and share a single filter to their list of filters.

I'll keep poking around see what feels best.

[FloKaemmerer]

The sidebar is a mess, true^^

I will try putting the filter selection in a menu.

I think the main navbar isn't that bad for the legend. Or what else would come to mind?

For adding a filter I'd add a icon to add a preset filter, next to the regular add icon. At the same time we'd need to be able to share single filters.

[FloKaemmerer]

I reworked the filter internals and got rid of the tabs/menu in the sidebar.

Changing the filter is now done from the legend, which I put in the main header (for now).

What are your thoughts on the changes?

[Blemming]

I reworked the filter internals and got rid of the tabs/menu in the sidebar.

Changing the filter is now done from the legend, which I put in the main header (for now).

What are your thoughts on the changes?

The general idea is better, it needs work specially the UI/UX.

1. the dropdowns in the legend definitely need tooltips or labels
2. the tabs are buttons and have buttons in them which is sort of weird ux and semantic wise
3. the bg color of the tabs doesnt quite match the navbar
4. everything related to multiple filters in the sidebar is sort of redundant and takes space for no reason since it could all possibly be done from the dropdown in the legend
5. Everything is uppercase and is very large, sort of overwhelming

I just have a question that might simplify things for us a bit:

• How useful is it to see multiple filters at once ? Could it just be simpler to allow people to make multiple filters but when you select it, it completely switches. The colors overlap anyways so when you have 3+ filters it's kinda a hard to see which maps are a part of which filter. You could simply save the multiple filters they have to localstorage. And just completely change the filter when they switch filters, it sort of fixes your issue with the sharing too since they could juste paste someone elses filter and save it to their "favorites".

Another issue which will arise is cross device favorites, which we would eventually run into anyways. People will want accounts or something and be able to access their filters from multiple devices. Probably a way to share filters too or look for premade filters, maybe even linking atlas trees to go with the filters for possible farming strategies. At one point we need to determine the scope of the project and see how people use it before needlessly adding features people might not use.

I really like the base idea of the project and I feel there are a lot of optimization ux things we can do to make the overall experience better before adding features. And somethings aren't event finished;

1. the glossary isn't complete.
2. The changelogs is empty.
3. The crowdsourcing for map specifications could be better.
4. The map dragging is a bit buggy.
5. The project needs a lot more tests units and e2e

Take it as you will it's just my 2cents and I am still glad to help on any UI/UX vue issues you have :) For now I'll go back to fixing up the design of the production version. Let me know your thoughts and how you want to proceed and we can work together to make this project as awesome as possible :)

[Blemming]

Preview of right sidebar thoughts ?

[FloKaemmerer]

I'm with you on every single point 👍

1. the dropdowns in the legend definitely need tooltips or labels
2. the tabs are buttons and have buttons in them which is sort of weird ux and semantic wise
3. the bg color of the tabs doesnt quite match the navbar
4. everything related to multiple filters in the sidebar is sort of redundant and takes space for no reason since it could all possibly be done from the dropdown in the legend
5. Everything is uppercase and is very large, sort of overwhelming

-> 1. I was planning to add tooltips, but wanted your thoughts first on it, if its remotly ok to do it that way UX wise ;-)

2. -> I couldn't figure out how to prevent the clicks on tab items take precedence over the clicks that happen on icons within them. So a click on the eye aka show/hide would also switch to the filter as selected filter.
3. -> haven't looked into the css styling of it, was just happy that it "worked", at least in someway XD
4. -> true, needs more cleanup work to be done.
5. -> didn't look into css yet.

How useful is it to see multiple filters at once ?

The Idea for multiple filter or rather the Feature I'm trying to implement with that is, to be able to find your main map to run and at the same time take good adjecent maps into account. In many cases you will have multiple maps to choose from for running a strat. (given your are not just trying to farm Apothecary Div Card). In case you have multiple maps to choose from. the Adjecent maps can make the difference. Either because they are good for a strat you want to run or are easy to sell (Note to self: At Filter for Map price).

The colors overlap anyways so when you have 3+ filters it's kinda a hard to see which maps are a part of which filter

I was planing to make all colors visible if a map matches multiple filters. I was thinking to divide the Highlight Background into parts matching the number of filters that match that map. given 3 Filters match the map: 1/3 of the circle will be red, 1/3 blue and 1/3 green. That should be doable fairly easily with Konva.

You could simply save the multiple filters they have to localstorage.

Localstorage is something I was going to look into at some point, aka if someone requests to save their filters locally. But you are absolutly right, it makes sens to provide the feature to save Favorites.

Another issue which will arise is cross device favorites, which we would eventually run into anyways. People will want accounts or something and be able to access their filters from multiple devices.

True, but I don't expect that to happen too soon. The Filters aren't that complex and with the ability to just send a Link to a preconfigured setup you can (for now) work on the filters on different Devices. I'd like to avoid any account management as long as possible and keep the page static.

Probably a way to share filters too or look for premade filters, maybe even linking atlas trees to go with the filters for possible farming strategies. At one point we need to determine the scope of the project and see how people use it before needlessly adding features people might not use.

The Project already has way more stuff than I anticipated XD

I really like the base idea of the project and I feel there are a lot of optimization ux things we can do to make the overall experience better before adding features.

Thank you :-) And you are abolutly right! Theres alot of stuff that needs to be finished. My main approach so far was something like "Just get it up and running and make it somewaht useable."

I'd really like to get the multi Filter Feature in before launch though, from thereon out we should have a good two Month time to improve the overall usability, UX and do house keeping (adding Tests!).

1. the glossary isn't complete.
2. The changelogs is empty.
3. The crowdsourcing for map specifications could be better.
4. The map dragging is a bit buggy.
5. The project needs a lot more tests units and e2e

-> 1. & 2. True, but shouldn't take too long to fill them

3. True, I mainly build that to provide an UI for myself to edit the nodes. Lots to improve there.
4. True, got it on my todo list to look into it again :-/
5. True.... :-/ (shame on me)

Take it as you will it's just my 2cents and I am still glad to help on any UI/UX vue issues you have :) For now I'll go back to fixing up the design of the production version. Let me know your thoughts and how you want to proceed and we can work together to make this project as awesome as possible :)

Everything you do helps tremendously!! Like I said before, this project is my first Frontend work let alone Opensource Project, so I'm figguring stuff out as I go. Every Feedback is Highly welcome! Don't hold back on negativ stuff, I'm here to learn :-)

[FloKaemmerer]

Preview of right sidebar thoughts ?

Absolutly Loving it!

Only concern I have are the percentage Values for Openness etc. In the end they provide the same meaning as just values between 1 - 10, but having a percentage values feels like "thats something we tested and compered to others and came to the conclusion that its 10%", where as the values 1 -10 feel less "binding". All The values are just "educated Guesses" from myself and by no means claim to be "correct"

With a percentage value I tend to ask "10% of what?"

[Blemming]

Yeah wasn't sure about the percentages, was trying something out since the design is heavily inspired from items on the trade site. Most map items have percentages as values but its easy to remove. I'll refactor the whole make it clean and open a pr.

[FloKaemmerer]

Love what you did with the Details drawer, only got 2 comments on the PR.

Btw. I implemented a first Version of Filter-preset export/import, UI is just a rough idea how it could be done, could you take a look at it and mybe give it a little passover? 😇

[FloKaemmerer]

:-D

[Blemming]

Styling the tooltips on the atlas is pretty cancer 😂. Maybe there is a way to trigger a vuetify tooltip or something. Looking into it.

[FloKaemmerer]

Yeah, that's why they still look like the ones from the tutorial XD

[Blemming]

I'm looking at poeplanner, and they seem to use vuetify also and canvas they are also trigering a v-menu on hover of the nodes

[Blemming]

I did it, just need to finish adding the specs and refactor things a bit 🔥

[FloKaemmerer]

Thats fire!!

[Blemming]

Upcoming diviniation card popups from detail drawer (inspired by reddit comments):

[FloKaemmerer]

That looks great!

I'd also like to add a mini map previou of each map, to give an idea for the layout. But I'd like it to have a nutral Background, which is kinda hard to get ingame :-/