UI improvement

[kenchendesign]

Hello! I've been checking out your simulation all the time so I'd like to make some contribution too. :)

I can help with improving the UI since you mentioned in the other issue that it's not your strength / main interest.

A couple of things I would love to improve:

1. Not very mobile friendly. It's a mobile game so I'd assume a lot of people were visiting this website on their phones.
2. It is hard to read the build info such as WPs and combos since they are squeezed in and have no styling. Basically, we can improve the readability a little bit and potentially add WP pictures (a lot of work I know).
3. It's mixed with English and Chinese, which is not great for either group of users. A language toggle?
4. I guess the UI can look prettier overall?

Let me know if you are interested. I might need some help setting up dev env up since I'm mainly a designer who can code HTML/CSS/JS. I'm based in the US (San Francisco) but I speak Chinese too.

[b1ueb1ues]

it is my privilege to have someone helping with my website.

1. don't know how to deal with that, maybe rewrite website totally? echarts says it is mobile friendly, but it does not work on my sim
2. add wp pictures is what i already considered, picture is not that hard, but adding multiple pictures for one line in echarts seems very hard to do.
3. language toggle would be fine.

I don't know what dev env you mean, I'm now just use papaparse to parse csv data and fill that to echarts library. I'm actually don't know anything about front-end ...

[kenchendesign]

Sounds good! I'll clone the repo and play around first.

[b1ueb1ues]

every raw data needed to create this site is in chara/ I manually(script) split them into 4 folders, then show each page. I don't know if you know some better chart library to use, or you can do better just using this echarts

[kenchendesign]

Yeah I'll try to keep whatever you are using right now since you are already familiar with them. But I have to see how easy it is to make it more responsive to mobile screen sizes.

[kenchendesign]

One more question, when you were developing it, do you directly push code to github.io and it runs as a server for you, or do you setup your localhost to be the server to test the code?

[b1ueb1ues]

i have apache to serve local one at both my ubuntu and windows.

[kenchendesign]

Cool I got it running and working on things now. Would you mind if I change the frontend structure a little bit? Looks like you didn't write the html in a way that they will share the layout, which makes it a bit tedious to change things up.

[b1ueb1ues]

just do it. (i just don't know how to do that).

[mattberkowitz]

@kenchendesign If you want any help, I'm def interested in contributing to this project @b1ueb1ues I also saw you started up a js version of your simulator -- happy to offer help there as well

(I recently moved out of engineering in my day-to-day, so I'm looking for side projects to work on :P)

[kenchendesign]

Thanks @mattberkowitz. I think I'm good for now but thanks for the offering! I'll ping you if needed.

@b1ueb1ues I've quickly updated the front-end structure and simplified the UI.

1. Reduced the size of the header so we have more space for the diagram.
2. Moved some of the links to the footer so users will see the diagram first.
3. Removed the Adventurer name if viewed on a mobile device to save space for the bars. The picture should be enough to tell who is who.
4. Cleaned up text formatting in a lot of places. For instance western players normally call special versions "S!Cleo" instead of "S_Cleo". All of these are minor but I think they will make the UI look more polished.
5. Now the number of adventurers per page will be dependent on the height of the container (height/80 instead of 12 all the time) to avoid items too close to each other.
6. Changed the theme so it feels softer and closer to the look'n'feel of the game.
7. The diagram will now automatically resize as you resize the window.

---

Desktop:

---

Mobile:

---

I'm still working on the diagram labels. Hopefully I can make the conditions and comments a bit easier to read.

Question: do you want me to make a pull request now or do you want to wait for everything to be done? Also if it's OK for you, it would be easier if you can just add me as a collaborator. All up to you.

[b1ueb1ues]

@kenchendesign If you want any help, I'm def interested in contributing to this project @b1ueb1ues I also saw you started up a js version of your simulator -- happy to offer help there as well

(I recently moved out of engineering in my day-to-day, so I'm looking for side projects to work on :P)

js version is dead. that sim runs too slowly in browser. though can be run using nodejs in a decent speed, but that make no sense to continue making that.

[b1ueb1ues]

Thanks @mattberkowitz. I think I'm good for now but thanks for the offering! I'll ping you if needed.

@b1ueb1ues I've quickly updated the front-end structure and simplified the UI.

1. Reduced the size of the header so we have more space for the diagram.
2. Moved some of the links to the footer so users will see the diagram first.
3. Removed the Adventurer name if viewed on a mobile device to save space for the bars. The picture should be enough to tell who is who.
4. Cleaned up text formatting in a lot of places. For instance western players normally call special versions "S!Cleo" instead of "S_Cleo". All of these are minor but I think they will make the UI look more polished.
5. Now the number of adventurers per page will be dependent on the height of the container (height/80 instead of 12 all the time) to avoid items too close to each other.
6. Changed the theme so it feels softer and closer to the look'n'feel of the game.
7. The diagram will now automatically resize as you resize the window.

Desktop:

Mobile:

I'm still working on the diagram labels. Hopefully I can make the conditions and comments a bit easier to read.

Question: do you want me to make a pull request now or do you want to wait for everything to be done? Also if it's OK for you, it would be easier if you can just add me as a collaborator. All up to you.

that's pretty ! pls create a pr

[kenchendesign]

OK updated the UI a bit more. I'm happy about the overall UI now but I want to improve the comments on the charts.

I'll need some help from you to add WP and dragon images to the chart and then I can help try a couple of different layouts (I'm current thinking of putting the WPs next to the adv pic but half the size so they can stack vertically.). Even tiny images would be better than those text. I don't know how you hook up the images. Would you mind taking over this part?

[b1ueb1ues]

that potrait as a Y-axis backgound

        rich[adv.name] = {
            lineHeight: 0,
            height: 40,
            //align: 'center',
            backgroundColor:{
              image: advIcons[name]
            }
        };

I don't how hard is it to use 2 picture in that, lets try.