something.elm

import Html exposing (..)
import Html.App as Html
import Html.Events exposing (..)
import Random
import Svg exposing (Svg, circle, rect, svg, g, line, defs, use, symbol, text')
import Svg.Attributes exposing (..)
import String exposing (cons)



main =
  Html.program
    { init = init
    , view = view
    , update = update
    , subscriptions = subscriptions
    }



-- MODEL


type alias Model =
  { die1Face : Int
  , die2Face : Int
  }


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



-- UPDATE


type Msg
  = Roll
  | NewFaces (Int, Int)


update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    Roll ->
      (model, Random.generate NewFaces diePairGenerator)

    NewFaces (new1Face, new2Face) ->
      (Model new1Face new2Face , Cmd.none)


dieGenerator : Random.Generator Int
dieGenerator =
  Random.int 1 6


diePairGenerator : Random.Generator (Int, Int)
diePairGenerator =
  Random.pair dieGenerator dieGenerator


-- SUBSCRIPTIONS


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



-- VIEW
-- TODO Animate the dice using tasks and animation


view : Model -> Html Msg
view model =
  div []
    [ dice model.die1Face model.die2Face
    , button [ onClick Roll ] [ text "Roll" ]
    ]


dice : Int -> Int -> Html Msg
dice first second =
  Svg.svg
    [ version "1.1", viewBox "-5 -5 1000 75" ]
    [ die first
    , g [ transform "translate(55, 0)"] [ die second ]
    ]


die : Int -> Html Msg
die face =
    Svg.svg [ ]
      [ defs []
          [ rect
              [ id "body"
              , x "0.5"
              , y "0.5"
              , width "50"
              , height "50"
              , rx "5"
              , ry "5"
              , fill "#fff"
              , stroke "#231f20"
              ] []
          , circle
              [ id "left-upper"
              , cx "11"
              , cy "11"
              , r "2.5"
              ] []
          , circle
              [ id "left-center"
              , cx "11"
              , cy "25"
              , r "2.5"
              ] []
          , circle
              [ id "left-lower"
              , cx "11"
              , cy "39"
              , r "2.5"
              ] []
          , circle
              [ id "center-center"
              , cx "25"
              , cy "25"
              , r "2.5"
              ] []
          , circle
              [ id "right-upper"
              , cx "39"
              , cy "11"
              , r "2.5"
              ] []
          , circle
              [ id "right-center"
              , cx "39"
              , cy "25"
              , r "2.5"
              ] []
          , circle
              [ id "right-lower"
              , cx "39"
              , cy "39"
              , r "2.5"
              ] []
          , symbol [ id "1" ]
            [ use [ xlinkHref "#center-center"] []
            ]
          , symbol [ id "2" ]
            [ use [ xlinkHref "#left-lower" ] []
            , use [ xlinkHref "#right-upper" ] []
            ]
          , symbol [ id "3" ]
            [ use [ xlinkHref "#1" ] []
            , use [ xlinkHref "#2" ] []
            ]
          , symbol [ id "4" ]
            [ use [ xlinkHref "#2" ] []
            , use [ xlinkHref "#left-upper" ] []
            , use [ xlinkHref "#right-lower" ] []
            ]
          , symbol [ id "5" ]
            [ use [ xlinkHref "#4" ] []
            , use [ xlinkHref "#1" ] []
            ]
          , symbol [ id "6" ]
            [ use [ xlinkHref "#4" ] []
            , use [ xlinkHref "#left-center" ] []
            , use [ xlinkHref "#right-center" ] []
            ]
          ]
      , use [ xlinkHref "#body" ] []
      , use [ xlinkHref (cons '#' (toString face)) ] []
      ]