Anatomy of a Screen 2

The aim of this article is to demonstrate the composability of the Munin UI; a key feature in the Paradice codebase.  We begin by looking at one of the simpler UIs: the main screen.  This is the screen that is active most of the time for most players.  It comprises four major components: a list of the people currently playing (the "who-list"); a text area for feedback about events such as server entries and exits, dice rolling, people chatting, that sort of thing; a command prompt; and a clock.

The Munin UI is structured around a few major entities:

• munin::element represents the smallest possible drawable object.  It comprises an attribute, which includes data such as the foreground and background colours, underlining, bolding, etc., and a glyph, which represents the character being displayed, the locale for the character, and the character set from which to take the character.  This allows for a great variety of display, as this includes graphical characters such as the double-lined borders you can see in the image above.
  
• munin::component is the base class for all viewable objects.  Classes derived from it implement a number of functions, including a method for receiving events such as key-presses or mouse clicks, and a method for drawing itself onto a canvas (which is, essentially, a grid of elements).  One special component is munin::container, which is a component that contains other components.
  
• munin::layout is the base class for lightweight objects that know how to arrange components.  For example, munin::grid_layout arranges a number of components in fixed-sized x/y chunks.  munin::compass_layout is a layout that arranges components according to compass points (north, south, east, west and a special 'centre' direction).
  
• munin::window is the top layer of the user interface.  It has a container component called "content" that is used to hold the entire UI.  It also controls the repainting function, which compares the canvas at the last repaint with the canvas after the current repaint, and produces a string of ANSI control commands that can be used to update the client's UI with the new information.

In terms of the image above, it is created roughly as follows:

• A container called inner has a compass layout.  To the north is the who-list, in the centre is the text area, and to the south is the command prompt.
  
• A container called outer has another compass layout.  To the centre is the inner container, and to the south is the clock.
  
• The window's content has a grid layout whose [x,y] dimensions are [1,1] (that is, a single component that fills the container).  It contains the outer container.

Naturally, the who-list, text area and command prompt are composed of further subdivisions, and working these out is left as an exercise to the reader.  Or you can just examine the code itself, now that you know what you're looking at.