An Introduction to Elm Series: Solution to ‘Random’ example 1

In the, we were given an application that rolls a die and prints the number of the face that was rolled.

We were asked to add a second die that would be rolled together with the first one and show an image of a die instead of just printing the number on the face of the die.

Following you will find our proposed solution. We added a new value in the model for the second die and updated the message for NewFace to produce a message to roll the second die as well. Also we created a function that accepts the number of the face of the die and produces a path to the image that should be loaded.

import Html exposing (..)
import Html.App as Html
import Html.Events exposing (..)
import Html.Attributes exposing (..)
import Random
import String exposing (concat)

main =
    { init = init
    , view = view
    , update = update
    , subscriptions = subscriptions


type alias Model =
  { dieFaceA : Int
  , dieFaceB : Int

init : (Model, Cmd Msg)
init =
  (Model 1 1, Cmd.none)


type Msg
  = Roll
  | NewFaceA Int
  | NewFaceB Int

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    Roll ->
      (model, Random.generate NewFaceA ( 1 6))

    NewFaceA newFace ->
      ({model | dieFaceA = newFace}, Random.generate NewFaceB ( 1 6))

    NewFaceB newFace ->
      ({model | dieFaceB = newFace}, Cmd.none)


subscriptions : Model -> Sub Msg
subscriptions model =


createImage : Int -> String
createImage dieFace =
    concat ["./4-random/", (toString dieFace), ".png"]


view : Model -> Html Msg
view model =
  div []
    [ img [src (createImage model.dieFaceA)] []
    , h1 [] [ text (toString model.dieFaceA) ]
    , img [src (createImage model.dieFaceB)] []
    , h1 [] [ text (toString model.dieFaceB) ]
    , button [ onClick Roll ] [ text "Roll" ]

You can download the solution from here 4-random (compressed) (138 downloads)

This post is also available in: Greek

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

One thought on “An Introduction to Elm Series: Solution to ‘Random’ example

  • Joseph Fraley (@joseph_fraley)

    I don’t love this solution because it seems like NewFaceA and NewFaceB should be symmetrical. They’re intuitively the same function, but in this solution they’re functionally very different.

    I think the ideal solution involves representing the dice as a List in the model, and have NewFace generate a list of random integers, which can be handled as you like elsewhere. The main problem is that Random is a really complicated library, and it’s much, much harder to deal with Random.list the way I’ve just described than it is to have functional disparity as you’ve implemented in your posted solution.