Using svg and html

Learn
1

Following up on the exercise on the bottom of Random · An Introduction to Elm
One exercise is to use svg instead of images.

I changed the code on numbers
by importing the svg libraries:

import Svg exposing (..)
import Svg.Attributes exposing (..)

and adding the following at the bottom
(only the first part is relevant i think, the 7 svg drawing themselves are just added for testing):

-- VIEW
view : Model -> Html Msg
view model =
  div []
--  THIS works (infra)
--  [ h1 [] [ one ]   
--  THIS does not work (infra)
    [ h1 [] [ showRandomDice ]
    , button [ onClick Roll ] [ Html.text "Roll" ] 
    ]
    
    
-- SVG dice

-- showRandomDice: Model -> Html Msg
showRandomDice model =
  case model.dieFace of
    1 -> one 
    2 -> two
    3 -> three
    4 -> four
    5 -> five
    6 -> six
    _ -> zero

zero =
  svg
    [ width "120"
    , height "120"
    , viewBox "0 0 120 120"
    ]
    [ rect
        [ x "10"
        , y "10"
        , width "100"
        , height "100"
        , rx "15"
        , ry "15"
        ]
        []  
    ]


one =
  svg
    [ width "120"
    , height "120"
    , viewBox "0 0 120 120"
    ]
    [ circle
        [ cx "10"
        , cy "10"
        , r "5"
        ]
        []  
    ]


two =
  svg
    [ width "120"
    , height "120"
    , viewBox "0 0 120 120"
    ]
    [ circle
        [ cx "10"
        , cy "10"
        , r "5"
        ]
        []
    , circle
        [ cx "10"
        , cy "50"
        , r "5"
        ]
        []
    ]

three =
  svg
    [ width "120"
    , height "120"
    , viewBox "0 0 120 120"
    ]
    [ circle
        [ cx "10"
        , cy "10"
        , r "5"
        ]
        []
    , circle
        [ cx "10"
        , cy "50"
        , r "5"
        ]
        []
     , circle
        [ cx "10"
        , cy "100"
        , r "5"
        ]
        []
    ]
    
four =
  svg
    [ width "120"
    , height "120"
    , viewBox "0 0 120 120"
    ]
    [ circle
        [ cx "10"
        , cy "10"
        , r "5"
        ]
        []
    , circle
        [ cx "10"
        , cy "50"
        , r "5"
        ]
        []
     , circle
        [ cx "10"
        , cy "100"
        , r "5"
        ]
        []
     , circle
        [ cx "50"
        , cy "100"
        , r "5"
        ]
        []
    ]
    
five =
  svg
    [ width "120"
    , height "120"
    , viewBox "0 0 120 120"
    ]
    [ circle
        [ cx "10"
        , cy "10"
        , r "5"
        ]
        []
    , circle
        [ cx "10"
        , cy "50"
        , r "5"
        ]
        []
     , circle
        [ cx "10"
        , cy "100"
        , r "5"
        ]
        []
     , circle
        [ cx "50"
        , cy "100"
        , r "5"
        ]
        []
     , circle
        [ cx "50"
        , cy "50"
        , r "5"
        ]
        []
    ]
    
six =
  svg
    [ width "120"
    , height "120"
    , viewBox "0 0 120 120"
    ]
    [ circle
        [ cx "10"
        , cy "10"
        , r "5"
        ]
        []
    , circle
        [ cx "10"
        , cy "50"
        , r "5"
        ]
        []
     , circle
        [ cx "10"
        , cy "100"
        , r "5"
        ]
        []
     , circle
        [ cx "50"
        , cy "100"
        , r "5"
        ]
        []
     , circle
        [ cx "50"
        , cy "50"
        , r "5"
        ]
        []
     , circle
        [ cx "50"
        , cy "10"
        , r "5"
        ]
        []
    ]

The error message from ellie:

The 2nd argument to h1 is not what I expect:

83| [ h1 [ showRandomDice ]

            ^^^^^^^^^^^^^^^^^^

This argument is a list of type:

List (Model -> Html Msg)

But h1 needs the 2nd argument to be:

List (Html msg)

Hint: I always figure out the argument types from left to right. If an argument
is acceptable, I assume it is “correct” and move on. So the problem may actually
be in one of the previous arguments!

So i guess this has to do with signature of the showRandomDice function?

2

Got it in one! You already see that showRandomDice needs Model. You have one on line 83 in view, so you can change that code to h1 [] [ showRandomDice model ] to resolve the error.