So, i'm building the UI for my strategy game and i quickly got trapped into a big spaghetti. I've got a design that works something like this:
[attachment=33183:test.jpg]
- All panels trigger a dark overlay on the screen. (total black 70%)
- The blue panels slide from left and right, respectively. They can be present at all times, can appear together, and have the lowest zindex.
- The red one always appears on top of everyone, but does not force others to close
- The orange one makes any other panel slide back to their "hidden" position. When the orange slides up, the blue ones slide back and the red one slides up.
- I also can have centered "popups".
Right now, my code is a mess:
Since all panels are independent objects, they share an instance of an Overlay object. They can call the methods hide() and display(). Calling close() on the left blue panel should not close the overlay if the right blue panel is still open, so i implemented a counter inside the Overlay object: I only really hide it when the counter reaches zero. Kinda like a refcounter. I also have to wrap every open()/close() method of my panels into conditional, to check if the panel is not already open, in order to avoid refcounting the overlay incorrectly.
Clicking on the overlay should also trigger all panels to close instantly. So i have more ifs. And i have even more nasty ifs to make a difference between the red and orange panels. When i started doing the popups, which are dynamic, i lost my mind.
So, this mess is already too difficult to maintain and i could not think of a decent solution. Can anyone guide me to a good book on Software UI architecture and proper design patterns? I've been working for too long with Java Web API's and i got too dumb for realtime programming. :P