Up next are the UI elements. The text messages at the beginning and end of the game and the clock at the top left of the screen.
We need two more imports:
{% codesnippet "https://raw.githubusercontent.com/macrozone/elm-hexagon-tutorial/chapter/ui/src/Hexagon.elm", lines="11:12" %}{% endcodesnippet %}
There are two UI elements in the game: The clock at the upper left corner and the status display and help text in the center of the screen.
The start message is a constant and therefore defined with the models:
{% codesnippet "https://raw.githubusercontent.com/macrozone/elm-hexagon-tutorial/chapter/ui/src/Hexagon.elm", lines="84:84" %}{% endcodesnippet %}
We need a helper function to transform the string to an Element type. The function is going to format
the text as well. The first argument of the function is the font size, the second argument is the text
string.
{% codesnippet "https://raw.githubusercontent.com/macrozone/elm-hexagon-tutorial/chapter/ui/src/Hexagon.elm", lines="321:327" %}{% endcodesnippet %}
Another helper function is needed to display the clock. The input is a Time value that is
stored in the msRunning field of the Game object. That value is reset to zero in the updateMsRunning method
whenever the game starts. The source for the timestamp is the AnimationFrame.times message.
The clock should display the time in steps of 1/100th of a second. We therefore create three variables:
centiseconds is a helper variable to hold the 1/100th of a second value.
seconds uses an integer division to divide the centiseconds and cut off the sub-seconds.
centis uses a modulo function to keep only the sub-seconds.
The padLeft method pads the number with zeroes.
{% codesnippet "https://raw.githubusercontent.com/macrozone/elm-hexagon-tutorial/chapter/ui/src/Hexagon.elm", lines="329:337" %}{% endcodesnippet %}
The view function is now extended to use the UI elements.
The score value is going to show the time that has passed.
The value of the message box depends on the state of the game. It is either "Game Over",
"Pause" or empty.
The toForm method turns an Element into a Form object. That way it can be modified later on.
In this case it is moved to the correct position on the screen.
{% codesnippet "https://raw.githubusercontent.com/macrozone/elm-hexagon-tutorial/chapter/ui/src/Hexagon.elm", lines="338:372" %}{% endcodesnippet %}