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

In the http://guide.elm-lang.org/architecture/effects/random.html, 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 =
  Html.program
    { init = init
    , view = view
    , update = update
    , subscriptions = subscriptions
    }



-- MODEL


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


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



-- UPDATE


type Msg
  = Roll
  | NewFaceA Int
  | NewFaceB Int


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

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

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



-- SUBSCRIPTIONS


subscriptions : Model -> Sub Msg
subscriptions model =
  Sub.none


-- UTILITIES


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



-- VIEW


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 [download id=”1804″]