\chapter{A Tour of TFW}

The purpose of this chapter is to further detail the built-in components
provided by the framework.
As previously mentioned, these components are implemented as event handlers 
running in the \texttt{solvable} Docker container and frontend
components written in Angular.
For instance the built-in code editor requires a frontend component and an event
handler to function properly, while the frontend component responsible for
drawing out and managing other components implement no
event handler.

In the Tutorial Framework most of the built-ins define APIs, which are TFW messages
that can be used to interact with them.
For example, to inject a command into the terminal one would use a message like this:
\begin{lstlisting}[captionpos=b,caption={An API Message Capable of Writing in the Terminal}]
{ 
    "key": "shell",
    "data":
    {
        "command": "write",
        "value": "echo 'Hello TFW World!'\n"
    }
}
\end{lstlisting}
Notice the \texttt{``\\n''} at the end of the command.
By including a newline character, we are also capable of executing commands in the
user's terminal.
Were this newline omitted, the command would only be written to the terminal
(but not automatically executed) for users to inspect and potentially execute themselves.

Some components emit or broadcast messages on specific events, for instance the
\texttt{FSMManagingEventHandler} broadcasts the following message on state transitions:
\begin{lstlisting}[captionpos=b,caption={An FSM Update message}]
{
    "key": "fsm_update",
    "data" :
    {
        "current_state": ...string...,
        "valid_transitions": ...[array of {"trigger": ...string...} objects]...,
        "in_accepted_state": ...boolean...,
        "last_event": ...
                      object like
                      {
                          "from_state": ...string...,
                          "to_state": ...string...,
                          "trigger": ...string...,
                          "timestamp": ...unix timestamp...
                      }
                      ...
    }
}
\end{lstlisting}
As you can see this message contains loads of useful information regarding what is
exactly happening in the tutorial at a given point and can be used by client code
to make informed decisions based on this knowledge.

It is not the purpose of this text to provide a complete API documentation, so in the
following I am only going to explain possibilities provided by given components rather
than showcasing actual, real-life API messages.

\section{Messages component}