Created
September 9, 2016 02:51
-
-
Save reverland/16a4964ac0a7129ef7c0083083964fe7 to your computer and use it in GitHub Desktop.
build svg with elm
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Html exposing (..) | |
| import Html.App as App | |
| import Html.Events exposing (onClick) | |
| import Svg exposing (circle) | |
| import Svg.Attributes exposing (..) | |
| import Random | |
| -- main | |
| main = | |
| App.program | |
| { init = init, | |
| update = update, | |
| view = view, | |
| subscriptions = subscriptions} | |
| -- model | |
| type alias Model = { dieFace: Int } | |
| init = | |
| (Model 1, Cmd.none) | |
| -- update | |
| type Msg = | |
| Roll | |
| | NewFace Int | |
| update: Msg -> Model -> (Model, Cmd Msg) | |
| update msg model = | |
| case msg of | |
| Roll -> (model, Random.generate NewFace (Random.int 1 6)) | |
| NewFace newFace -> (Model newFace, Cmd.none) | |
| -- subscriptions | |
| subscriptions: Model -> Sub Msg | |
| subscriptions model = | |
| Sub.none | |
| -- view | |
| view: Model -> Html Msg | |
| view model = | |
| div [] | |
| [ | |
| diceView model, | |
| button [ onClick Roll ] [ text "Roll" ] | |
| ] | |
| diceView: Model -> Html Msg | |
| diceView model = | |
| case model.dieFace of | |
| 1 -> diceOne | |
| _ -> diceTwo | |
| diceOne = | |
| svg [width "200", height "200"] [ | |
| circle [ cx "60", cy "60", r "50", fill "red"] [] | |
| ] | |
| diceTwo = | |
| svg [width "200", height "200"] [ | |
| circle [ cx "60", cy "60", r "50", fill "blue"] [] | |
| ] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment