End Game MMR Improvement #1 - Showing Progress Bar

[samgawaran]

Summary

@JeffdEon mentioned that we would be adding divisions in the next update. here: https://github.com/colonistio/katan/issues/7867, sending this submission to show the intended animation and what it looks like if you ranked up/down

Comparison:

1. Made the time and and turns smaller to make room for the division icon
2. Added division icon and reworked how we present MMR change
3. Added the progress bar I'll leave to @JeffdEon whats the cap for each divisions

Details

Ranked End Game - Victory

Ranked End Game - Defeat

• The progress bar should slide into something like those in the above^ having an animation there adds help in making the players feel a sense of progression in their ranks.

Ranked Up/Down

Progress Bar in Lowest/Highest Ranks

• For the lowest division (Bronze), we won't show any rankings on the left side of the progress bar
• For the highest division (Platinum) we will just show #1 on the right side. We could calculate the progress bar depending on the highest ranked player. (ex. 2800 the entry level of Platinum, while the top-ranked player's MMR is 3300, the progress bar should reflect that so the progress if they win/lose will have lesser motion compared if the top player's MMR is just 2900)

Top Ranked Player

• for players who are at the top of the foodchain, we could add a small gratification text in there that says that they are the top player in that game mode.
• We won't show any text if they lose.

IDEA: Add a crown icon for the top players

• No Design yet, but we could add some symbols on the top 3 players for each game mode, I saw some mobile games does this in their leaderboards. like showing a crown whenever they play in that game mode or when someone is visiting the leaderboards, they will see that the names of the top 3 have crowns.

Related links

• https://github.com/colonistio/katan/issues/7867

Submission Checklist

• [ ] This submission abides by Des-lvl-1, Des-lvl-2 & Des-lvl-3

[demiculus]

Changed Continue button as the current button design in the end-game screen is inconsistent to what we're using in all of the other pages on the website

1. this is a separate issue
2. you need to post screenshots of all the other places as well that use this button style

[samgawaran]

for review: @JuanRoman77 @JeffdEon

Changed Continue button as the current button design in the end-game screen is inconsistent to what we're using in all of the other pages on the website

this is a separate issue you need to post screenshots of all the other places as well that use this button style

@demiculus got it. I updated the continue buttons in the design I added here. I'll just create a separate issue to discuss the buttons

[JeffdEon]

Ranked Up/Down

I didn't get a chance to code whether user just got promoted or not in the backend. It should be ignored for this version and added next version.

[JuanRoman77]

Ranked Up -> Promoted Ranked Down -> No text

Ranked up/down is not the best option, players rank up and down every time they win or lose. Here they are going to a higher division. Thoughts?

[JuanRoman77]

1- This is not a good design. When I see this it looks like I'm Bronze going for Gold. I don't think this is how other games do it? It should be clearer. I'd start by adding the divisions' names. Also the numbers should be at the same height.

2- Silver icon in the middle of the bar is different size than the bronze and gold, that doesn't look great. Shouldn't it be the other way around?

3- The MMR for each division changes each season depending on number of players. I don't think we should show the limits, it might cause confusion

4- Current design for earned and new MMR (https://i.imgur.com/qOc0lpA.png) is clearer than the suggested. It's easy to read how much MMR has been earned in that game, and what the new value is. Keep current.

[samgawaran]

Closing this issue, latest iteration is in here: https://github.com/colonistio/design/issues/133