World Cup Draw UI
(Gradual Pots First + Pots UI)
1. Each click on the blue button adds a new team in a group
2. As hosts, Mexico, Canada & USA are assigned to groups A, B & C respectively
Pot 1
Pot 2
Pot 3
Pot 4
Group A
Group B
Group C
Group D
Group E
Group F
Group G
Group H
Group I
Group J
Group K
Group L
Challening parts
In the actual draw, we already know that USA, Mexico and Canada are assigned to groups D, A, and B respectively. How do I edit my draw logic to account for this? Had to add logic for forced teams that adds specific teams in specific groups. I also wanted this: when a team gets drawn, the spot of that team in the pot UI should be left blank, no sliding of the whole list. Sliding was due to the logic deleting teams from the array that goes into the pot. To change that, I had to change the structure of the initial pots and add a picked characteristic. This way, no teams get actually removed, their status changes when they are picked. However, because of that I had to rewrite the drawing logic, which was complicated.
Things I learned here
Learning to apply a switch. I wanted to add a tooltip to specific teams in the pots/groups. Initially, i tried using conditionals, but it was getting too messy since ive had 6 different cases. Switch turned out to be a good option in this scenario. Also, pots should have been written as an object from the beginning to avoid complications when rewriting. This way, if we wanted to add characteristics to each team object, it is easier to do so and our draw logic is already prepared for working with objects instead of strings.