User interface
- Bitmap (PNG, GIF)
- Svg (Scalable Vector Graphics)
- WebGL (OpenGL for the web, 3D in the browser)
Each variant has its own specifically implemented user interfaces. For example, a standard game has a "build road" button. A CitiesKnights game has a "build wall" button. Each such button may be implemented using at least three techniques: bitmap, vector and 3D vector. Since OpenSettlers is focused on web technology, these three techniques are bitmap, svg and webgl respectively.
In soc.common.gwtClient.game.abstractWidgets, interfaces and abstract classes are defined for each ui element. To take above example, both "build wall" and "move ship" buttons implement IActionWidget. AbstractActionWidget then implements generic functionality for an ActionWidget. Currently (since it's easiest to start with), BitmapBuildRoadWidget is implemented, which derives from AbstractActionWidget (AbstractActionWidget itself implementing IActionWidget interface). The BitmapBuildRoadWidget is a simple button with an image and a ClickHandler. This looks good enough to have an initial OpenSettlers game played. The image is a simple png file icon placed on the button face.
When we want to add some more eyecandy to the game, we might implement SvgpBuildRoadWidget. For instance, we might draw a road programmatically and then apply animation effects on the widget. When we hover the mouse over it we might quickly increase its size, and when the mouse stops hovering the element, decrease the widget to it's original size. We can simply subclass AbstractActionWidget and then create our own shiney new svg buildroad widget.
OpenSettlers takes the object oriented "program against interfaces" serious. To explain the relevance, I will show an example. In the SeaFarers variant, players may build ships, but in certain situations they also might move a ship. Initially, there will be simply a BitmapBuildShipWidget and a BitmapMoveShipWidget implemented. Thus, the ActionsWidget (a widget showing all actions a player might perform during his turn) has two buttons. But then, some awesome UI designer might decide that it's better to have just one button with both the capability to move and build a ship. Thus, he designs a new BitmapMoveBuildShipWidget or something like that, which implements IMoveShipWidget and IBuildShipWidget. All code needing to interact with a MoveShipWidget can still do so, without altering any code since it programs against IMoveShipWidget and IBuildShipWidget interfaces.