Refine main page design.

[fillna]

• Update main page background and map design.
• Complete side panel instruction implementation.
• Remove map draggable functionality.

[fillna]

Hi Gil,

Thank you for the recommendation. But based on what we have so far, I think the easiest way to give the user more intuitions of what is being selected is to highlight the selected location & disable highlight/click on the other ones. I have made some adjustments to accomplish this, and hopefully it would solve the first issue.

For the second issue, I have made several attempts to solve it yet none of them meet the expectation. Since the continent labels are illustrated using SVG, it allocates its own area and makes its hover effect totally independent from the .location class. The best solution I have for now is to make the labels and the .location hover separately, but not all together. My comment on this is that there is no easy ways to fix it with pure CSS, it would require writing a hover() function on the JS file to update the styles.

For the continent image, a possible approach would be placing the images with fixed/absolute position. It would requires some work to figure out the appropriate coordinates and I am not sure how CSS take care things for different screen size.

If time permits, I will look into the second and third issues more.

[gilkeidar]

I think the first issue is the most important tbh, the 2nd and 3rd are optional since they just improve presentation a bit.

I'm still of the opinion that it would be easiest for the user to just click on a different continent and it would open its side bar. The logic for the onclick would probably look something like this:

• If no continent is currently selected, open the sidebar for the continent the user clicked on (already implemented)
• If a continent is currently selected
  • If the continent the user clicked on matches the selected continent, close the sidebar (already implemented)
  • If the continent the user clicked on differs from the selected continent, close the current sidebar + open the sidebar for the new continent

However if this is still an issue, the highlighting could work, but the issue is that it's hard to tell which continent is currently selected. By default, Molybdomancy and Yin Yang Coin are greyed-out, but Cartomancy and Fortune Stick are not, so you can't tell which one is selected. I think this could work if all of the continents are by default the same, laid-back color (e.g. all somewhat grey or something) and when you select one of them it changes color to pop out.

[IllusiveAldebaran]

My biggest comment would be exactly the same as Gil's first. Think that is very important and legit I was lost until I figured it out since I checked it blind.

But also want to mention that the popup on the right feels a little smushed, and it would be nice to widen it a bit. Also with changing the zoom a little anything past 133% just starts taking the button out of the screen.

Looks much nicer to what was there before though. Thanks Jun.

[fillna]

Took Gil's idea and updated the continent click effect. It should solve the first issue now.

[gilkeidar]

This is great! I agree with Francisco that the background for the slider is a bit "smushed" - is it possible to extend it a bit?

Besides that, I think this is good to go! Excellent job!!

[fillna]

Extend side bar & Finish the polish task.