I forgot to reply to the second image you posted.
-
Zones - There is indeed space between each zone because there are elements around the card that we add. This includes things like counters. We also have monster holograms so we don’t want those to be overlapping with adjacent holograms. That extra space also helps make it less crammy.
Even if a zone is empty, it must always be shown to the user. This is again important due to strategy and many other things. In real life, you have a playmat that looks identical to this field. Generating a zone when it’s non-empty and making it disappear is actually more confusing for the user. It’s best to see the whole picture and then make decisions accordingly with the information present, not with elements disappearing in the middle of a duel.
You mentioned colors and contrast. All of that is customizable. You can change the default background simply by putting your own png in the backgrounds folder. You can change the shape and color of the zones too. People have created their own themes for different contrasts. We use black as the background for default because it does contrast well with the blue and red zones to distinguish player and opponent. It also is consistent with our cyber theme.
I like your mockup but I don’t like the phase selection in the center for the reasons I said - very bad for mobile. You can’t tap with a finger on what phase you want from a dropdown like this. This even creates opportunity for misclicks on the pc. I like how you positioned the LP bars. However, the reason we don’t already have that is, because of the code. In a duel, there is a host player who hosts the duel and then the player that joins that duel. The core doesn’t care who is player or opponent. Rather, the host is always Player 1 and the other player is Player 2. In ranked, this is randomized. So it is not easy to position the LP bars to make it correspond exactly to what the players are.
As I said, your mockup for LP bars is good, but this also creates a restriction for other players who don’t want it like this and want to move the position. The LP bar does not need to be this wide. Also in your mockup, you moved the extra deck upwards to make space for the LP bar. This isn’t good for when the Field Zone is activated, then the Extra deck moves down. The goal here is basically to have the LP bars closer to the hand which I agree with but not the way you have shown.
I do like your toolbar that you made on the top left. That can work if it expands and collapses which will work on mobile and is a great way to reduce space without reducing information.