I'm making a game on the HTML5 canvas and my intent is to run or port this code to work on cell phones. Right now it only runs on my desktop computer. I'm trying to write my GUI code but I'm not confident in any of the architectures I come up with so I'm getting stuck in a refactoring loop.
So far I've got a
Dialog and a
Clickable (basically a button) type. The Dialog is initialized with a hardcoded list of Clickables . Whenever the user clicks on a dialog, a function iterates the current Dialog's Clickables to see if any of them were clicked and if so, runs that Clickable's action. This action can be basically anything.
This all worked for my needs until I needed to make the number of Clickables on a Dialog dynamic depending on the game state. For example, the inventory dialog. This is a grid and each cell may contain an item. Is every cell a Clickable, or only cells with an item? When are these dynamic Clickables created? Who creates them and where?
Also consider the level chooser dialog. It should contain a list of levels you can play. The more levels you beat the more Clickables on this screen. This screen will probably be scrollable. Keeping track of where the user clicked when the window may be scrolled is blowing my mind.
I feel like any decision I make will paint me into a corner later. I've never done this before so I'm looking for some advice from seasoned veterans. Thanks
BTW, I've looked around the site for other similar questions. They seem to be asking, "How do I do this in C++ w/ a library". Here I'm asking how to design it by hand.