Example: a minimally yet thoroughly styled Inform game
While we have only begun to explore the possibilities of CSS and Bisquixe, we have learned enough to style the most common and visible parts of an Inform game. In other words, we are ready to make a game that is visually our own. What does that look like?
All of the needed code will execute when play begins, but, as we have recently discussed, we should take a moment to consider organization. We’ll use the word initial in the names of our rules, since that is an accurate characterization: they specify the initial styling of the game. Note that we can call these rules whatever we like, so it is best to choose names that make good, intuitive sense.
when play begins:
follow the initial state of play rule;
follow the initial BufferLine rule;
follow the initial GridWindow rule;
follow the initial Input rule;
We can walk through these in order, generously commenting as we go.
Our initial state of play rule specifies general characteristics of the web page. We’ll specify the placement of the #gameport within the .play area, and set a background color. We’ll additionally adjust the behavior of links and other items that customarily occupy the left-hand side of the .play area.
this is the initial state of play rule:
css-set-fast ".play; background; #4D4B4B" [the color of the area outside of the playable #gameport];
css-set-fast "#gameport; left; 20%" [the relative offset between .play and #gameport; defaults to 18%];
css-set-fast "#gameport; right; 20%";
css-set-fast ".links; display; none" [omits built-in links at left. this class could alternatively used to specify different properties];
css-set-fast ".coverimage; display; none" [we can omit the cover art as well];
css-set-fast "a:link; color; #49C5FC"; [specifies the color of all links both inside and outside of the #gameport];
css-set-fast "a:visited; color; #49C5FC"; [specifies the color of all links both inside and outside of the #gameport];
css-set-fast ".interpretercredit; font-family; Verdana, sans-serif"; [alters the font of .interpretercredit to match .BufferWindow]
The player will be looking at the .BufferWindow most of the time, so we will configure it for legibility and appropriate color contrast.
this is the initial BufferWindow rule:
css-set-fast ".BufferLine; white-space; pre-wrap"; [leaves white space as-is; does not remove]
css-set-fast ".BufferWindow; font-size; 16px" [the default value is 15px];
css-set-fast ".BufferWindow; background; #e4e9ec" [the 'fill' color for the .BufferWindow];
css-set-fast ".BufferWindow; color; #11022cff" [the font color];
css-set-fast ".BufferWindow; font-family; Verdana, sans-serif" [a web-safe font followed by a generic font family];
css-set-fast ".BufferWindow; padding; 10px 20px 10px 20px"; [modifies the default padding]
css-set-fast ".BufferLine; white-space; pre-wrap";[set to honor all in-project space characters]
Next, we will similarly configure the .GridWindow or “status bar.” While there is no hard-and-fast rule, the status bar is typically specified to use a monospace font. Because some monospace fonts (such as Courier New) seem to lack “weight,” we will use bold type for the .GridWindow.
this is the initial GridWindow rule:
css-set-fast ".GridWindow; font-size; 17px" [the default is 15px];
css-set-fast ".GridWindow; background; #18033f";
css-set-fast ".GridWindow; color; #dbf1ffff";
css-set-fast ".GridWindow; font-family; Monaco, 'Courier New', monospace";
css-set-fast ".GridWindow; font-weight; bold"; [some monospace fonts are narrow and are more legible when specified as bold]
css-set-fast ".GridWindow; padding; 10px 20px 10px 20px"; [modifies the default padding]
Styling input may initially intimidate. There are multiple classes and properties in play, and it is not always clear where and what we should specify. In most cases, though, we can think of .Input as a container and .BufferWindow .Input as the content within it.
this is the initial input rule:
css-set-fast ".Input; background; transparent" [this setting does nothing as-is, but is provided for reference];
css-set-fast ".BufferWindow .Input; font-size; 16px"; [set to match the styling of the .BufferWindow]
css-set-fast ".BufferWindow .Input; color; #11022cff";
css-set-fast ".BufferWindow .Input; font-family; Verdana, sans-serif";
css-set-fast ".Style_input; color; #11022cff"; [.Style_input specifies the appearance of the command after it has been entered]
This is enough to put our mark on our own Inform game, using text and colors that complement what we have made.