"Pillaged Village" by Lars Thurgoodson.

[This was originally an example for Basic Screen Effects, showing how to make a colored compass-rose status line in ascii. 

Here we use roughly the same layout (minus an upward connection) to demonstrate a Glulx sidebar with a graphical compass rose.

The idea of the graphical compass rose is that it should show where available exits are, and should distinguish (in this case by color) between exits that lead to previously visited rooms and those that lead to new territory.

Because it's Glulx, we also make the graphical compass hyperlinked, so clicking on a direction sends a command to the game. Clicking at the center of the rose, I arbitrarily decided, should mean "look", since the center of the rose represents the place where we now stand.]

Release along with source text and a website.

Section 1 - Images for each direction

[I can imagine lots of fancier compass roses, but I kept this to a simple design with just letters. Partly that's because I have limited time, partly because I wanted to be able to rough together some images that I could distribute freely and without any sense of guilt. (There are, however, lots of nice royalty-free compass images out there in the larger world that one could cut up and use in a project.)]

Figure of northwest is the file "Compass-white_01.png".
Figure of north is the file "Compass-white_02.png".
Figure of northeast is the file "Compass-white_03.png".
Figure of west is the file "Compass-white_04.png".
Figure of middle is the file "Compass-white_05.png".
Figure of east is the file "Compass-white_06.png".
Figure of southwest is the file "Compass-white_07.png".
Figure of south is the file "Compass-white_08.png".
Figure of southeast is the file "Compass-white_09.png".

Figure of new northwest is the file "Compass-green_01.png".
Figure of new north is the file "Compass-green_02.png".
Figure of new northeast is the file "Compass-green_03.png".
Figure of new west is the file "Compass-green_04.png".
Figure of new middle is the file "Compass-green_05.png".
Figure of new east is the file "Compass-green_06.png".
Figure of new southwest is the file "Compass-green_07.png".
Figure of new south is the file "Compass-green_08.png".
Figure of new southeast is the file "Compass-green_09.png".

[Now we associate each direction with two images: one that indicates that direction if it leads to a visited room, and another for if it does not.]

A direction has a figure-name called unvisited image. A direction has a figure-name called visited image.

The visited image of northwest is figure of northwest. The unvisited image of northwest is figure of new northwest.
The visited image of north is figure of north. The unvisited image of north is figure of new north.
The visited image of northeast is figure of northeast. The unvisited image of northeast is figure of new northeast.
The visited image of west is figure of west. The unvisited image of west is figure of new west.
The visited image of east is figure of east. The unvisited image of east is figure of new east.
The visited image of southwest is figure of southwest. The unvisited image of southwest is figure of new southwest.
The visited image of south is figure of south. The unvisited image of south is figure of new south.
The visited image of southeast is figure of southeast. The unvisited image of southeast is figure of new southeast.

A direction has a number called x-coordinate. A direction has a number called y-coordinate.

Section 2 - Laying out the sidebar

Include Simple Graphical Window by Emily Short. The graphics window pixel count is 99. The graphics window position is g-left. 

[Our design here is similar to the one in City of Secrets: 

There is a graphical sidebar of medium width, which contains a compass rose at the bottom and other status and illustration imagery above. 

The rationale for this UI design is that it keeps the portion of the screen that the player is likely to check most often -- the exits display -- close to the prompt and new text at the bottom of the screen. This minimizes the amount that the player has to glance away.

In a complete game, I would also add images above the compass rose that might vary with the location or the chapter of the game we're currently experiencing. But that would add to the complexity of the example, so I don't do it here. Please feel free to borrow and experiment on your own, though!]

Include Status Line Removal by Emily Short. [Optional: in my opinion, this style of presentation looks better without a text status line, since the graphical sidebar is functioning in place of that status line.]

Include Graphic Links by Jeff Sheets. [This extension allows us to set the graphlinks described below.]

When play begins (this is the setting directional hyperlinks rule):
	follow the compass-drawing rule.

To establish compass graphlinks:
	let D be grid-size;
	let DD be 2 * D;
	let DDD be graphics window pixel count;
	let top-edge be current graphics window height - (D * 3);
	let upper-mid be top-edge + D;
	let lower-mid be top-edge + DD;
	let bottom-edge be current graphics window height;
	set a graphlink identified as "goNW" from 0 by top-edge to D by upper-mid as "northwest";
	set a graphlink identified as "goN" from D by top-edge to DD by upper-mid as "north";
	set a graphlink identified as "goNE" from DD by top-edge to DDD by upper-mid as "northeast";
	set a graphlink identified as "goW" from 0 by upper-mid to D by lower-mid as "west";
	set a graphlink identified as "lookHere" from D by upper-mid to DD by lower-mid as "look";
	set a graphlink identified as "goE" from DD by upper-mid to DDD by lower-mid as "east";
	set a graphlink identified as "goSW" from 0 by lower-mid to D by bottom-edge as "southwest";
	set a graphlink identified as "goS" from D by lower-mid to DD by bottom-edge as "south";
	set a graphlink identified as "goSE" from DD by lower-mid to DDD by bottom-edge as "southeast".
	
To clear compass graphlinks:
	clear the graphlink identified as "goNW";
	clear the graphlink identified as "goN";
	clear the graphlink identified as "goNE";
	clear the graphlink identified as "goW";
	clear the graphlink identified as "lookHere";
	clear the graphlink identified as "goE";
	clear the graphlink identified as "goSW";
	clear the graphlink identified as "goS";
	clear the graphlink identified as "goSE";
	
When play begins (this is the setting drawing-rule rule):
	now current graphics drawing rule is the compass-drawing rule.
	
Carry out going (this is the update compass on movement rule): 
	refresh compass with current directions.
	
To decide what number is grid-size: 
	let D be graphics window pixel count / 3;
	decide on D;

This is the compass-drawing rule:
	clear compass graphlinks; [* We need to reset the graphlinks every time the player resizes the window, because if the height of the screen changes, the compass may move vertically.]
	establish compass graphlinks;
	determine compass coordinates;
	refresh compass with current directions.
	
[There is probably a more elegant way to do this, but looping through the directions does not go through them in clockwise order or anything like that, so it's a little hard to see an obvious way to mechanize a loop through the directions. Therefore, we do it a tedious way:]

To determine compass coordinates:
	let D be grid-size;
	let DD be 2 * D;
	let DDD be graphics window pixel count;
	let TE be current graphics window height - DDD; 
	let UM be TE + D; 
	let LM be TE + DD;
	let BE be current graphics window height; 
	change x-coordinate of northwest to 0; 
	change y-coordinate of northwest to TE;
	change x-coordinate of north to D; 
	change y-coordinate of north to TE;
	change x-coordinate of northeast to DD; 
	change y-coordinate of northeast to TE;
	change x-coordinate of west to 0; 
	change y-coordinate of west to UM;
	change x-coordinate of east to DD; 
	change y-coordinate of east to UM;
	change x-coordinate of southwest to 0; 
	change y-coordinate of southwest to LM;
	change x-coordinate of south to D; 
	change y-coordinate of south to LM;
	change x-coordinate of southeast to DD; 
	change y-coordinate of southeast to LM.

To refresh compass with current directions:
	blank window to graphics background color;
	repeat with way running through directions
	begin;
		if the way is up or the way is down
		begin;
			do nothing;
		otherwise if the room way from the location is not nothing; [* In the work in progress on which this was based, I included Gavin Lambert's Exit Lister and then used the "if way is a listable exit" to determine whether exits should be listed. The extension provides slightly more flexibility of design because it allows us to explicitly not list exits that are supposed to be hidden; but here I go with a simple implementation for example's sake.]
			let X be the x-coordinate of way;
			let Y be the y-coordinate of way;
			if the room way from the location is visited,
				draw the visited image of the way from X by Y to grid-size by grid-size; 
			otherwise draw the unvisited image of the way from X by Y to grid-size by grid-size;
		end if;
	end repeat.
	
Section 3 - Some sample map territory to demonstrate with

The Viking Longship is west of the Seashore. The Seashore is west of the Burning Village. The Shrine of the Green Man is northwest of the Burning Village. The Shattered Fort is southwest of the Burning Village.