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
h1is not what I expect:83| [ h1 [ showRandomDice ]
^^^^^^^^^^^^^^^^^^This argument is a list of type:
List (Model -> Html Msg)But
h1needs 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?