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 %}