\subsection{User Interface}
\label{sec:ui}

The User Interface is divided between two interaction modes, one for
building boards, and the other for playing Gizmoball.  A switch
toggles between the two modes, appropriately adjusting the appearance
of the interface and its behavior.

\subsubsection{Playing user interface}
\label{sec:playing-ui}
In playing interaction mode, the interface will only respond to a
limited number of menu items (load, save, mode-switch, exit) and the
keys that have been connected to gizmos.


\subsubsection{Editor user interface}
\label{sec:editor-ui}
The editing interaction mode expands the functions accessible to the
user, revealing new areas of the interface that allow for
modifications to the board.  The load, save, mode-switch, and exit
keys are still available, and the board from the play mode is frozen.

The first set of expanded features in the editing mode is a toolbar
for creating gizmos.  Gizmos can be dragged from the toolbar and
placed onto the board.

To facilitate the transformation of gizmos, a pie menu is applied to
the gizmo in focus.  This method was chosen over the alternative of
having tools to perform the actions --- rotate, move, delete, set
color, connect, etc. --- because it improves access time (Fitt's law).
Connections are also created using one of the options in the pie menu
interface.  The connecting feature supports both click-and-drag and
click-and-click to indicate the two gizmos involved.  This allows for
greater flexibility.  One possible problem was the potential confusion
between connecting to a second gizmo, and selecting that gizmo, but
this problem was resolved using modality of the connection creation
method.  This modality is indicated by an arrow from the trigger gizmo
trailing the mouse pointer.

Ball velocity is also set using a pie menu option.  When the option is
selected, an arrow appears, with which the user can indicate direction
and magnitude.  The option snaps to logical values (0, vertical and
horizontal angles, etc).

All gizmo information for the selected gizmo is displayed in a pane at
the bottom of the screen.  This will contain name, type, color, and
the connections to and from the gizmo.  The property list will be in a
tree form, to allow the information to be better navigable.
Properties can also be set through the list.


\begin{figure}[p]
  \centering \includegraphics[scale=0.85]{ui}
  \caption{Editor user interface}
  \label{fig:editor-ui}
\end{figure}

\subsubsection{Use cases}
\label{sec:use-cases}

\paragraph{Loading a game board}
To load a game board, click ``Load...'' and navigate to the file you
wish to load.

\paragraph{Saving a game board}
After editing or while playing, a game board can be saved by clicking
``Save...'' and typing the desired path and filename.

\paragraph{Adding gizmos to the game board}
To add a gizmo, click and drag it from the gizmo toolbar on to the
desired spot on the game board.  Gizmos will be X-ed to indicate that
they cannot be added to the current mouse location; otherwise,
releasing the mouse will place the gizmo.  Gizmos may be aligned to a
grid by activating the ``Snap to grid'' option, or they may be freely
placed.  Balls are also added in this way.

\paragraph{Transforming/deleting gizmos}
Clicking on a gizmo on the game board will select it.  Once selected, a
menu will appear around the gizmo displaying a set of options.  The
following options are allowed:
\begin{itemize}
\item rotate
\item move
\item delete
\item set properties
\end{itemize}
To rotate or move a gizmo, select the
corresponding option and drag the mouse to make the desired change.
To delete a gizmo, click the delete option.

\paragraph{Connecting gizmos}
Once a gizmo has been selected, one of the displayed options is to
connect the gizmo.  To connect the selected gizmo’s trigger to another
gizmo's action, click and drag the connect option to the gizmo whose
action is to be triggered, and then release.  An alternative method is
to click the connect option on the first gizmo and then click the
second gizmo.  By either method, an arrow from the trigger gizmo will
trail the mouse pointer to indicate that a connection is being
created.  Once the connection has been created, it will be indicated
by an arrow (depending on the view mode) and will also appear in the
property lists of the two gizmos.

\paragraph{Connecting gizmos to keys}
To connect a gizmo to a key-press, first select the gizmo.  Then,
locate the property in the property list that contains all the keys
triggering the gizmo.  Setting this property will allow the gizmo's
action to be connected.

\paragraph{Undoing build options}
To undo adding, deleting, transforming, connecting, or changing
properties, click the Undo button.

\paragraph{Switching between build and play}
To switch between the two modes, click the appropriate button in the
menu.  This button is labeled ``Play'' while in Build mode, and
``Build'' while in Play mode.