This page covers Tutorial v2. Elm 0.18.
Player edit view
We need a new view to show when hitting /players/3
.
Create src/Players/Edit.elm:
module Players.Edit exposing (..)
import Html exposing (..)
import Html.Attributes exposing (class)
import Msgs exposing (Msg)
import Models exposing (Player)
view : Player -> Html Msg
view model =
div []
[ nav model
, form model
]
nav : Player -> Html Msg
nav model =
div [ class "clearfix mb2 white bg-black p1" ]
[]
form : Player -> Html Msg
form player =
div [ class "m3" ]
[ h1 [] [ text player.name ]
, formLevel player
]
formLevel : Player -> Html Msg
formLevel player =
div
[ class "clearfix py1"
]
[ div [ class "col col-5" ] [ text "Level" ]
, div [ class "col col-7" ]
[ span [ class "h2 bold" ] [ text (toString player.level) ]
, btnLevelDecrease player
, btnLevelIncrease player
]
]
btnLevelDecrease : Player -> Html Msg
btnLevelDecrease player =
a [ class "btn ml1 h1" ]
[ i [ class "fa fa-minus-circle" ] [] ]
btnLevelIncrease : Player -> Html Msg
btnLevelIncrease player =
a [ class "btn ml1 h1" ]
[ i [ class "fa fa-plus-circle" ] [] ]
This view shows a form with the player's level. At the moment we have some dummy buttons that will be implemented later e.g. btnLevelIncrease
.