92 lines
1.4 KiB
HTML
92 lines
1.4 KiB
HTML
|
<h2>Comments</h2>
|
||
|
|
<pre><code>-- Single line comment
|
||
|
|
{- Multi-line
|
||
|
|
comment -}</code></pre>
|
||
|
|
|
||
|
|
<h2>Strings and characters</h2>
|
||
|
|
<pre><code>'a'
|
||
|
|
'\n'
|
||
|
|
'\x03'
|
||
|
|
"foo \" bar"
|
||
|
|
"""
|
||
|
|
"multiline strings" are also
|
||
|
|
supported!
|
||
|
|
"""</code></pre>
|
||
|
|
|
||
|
|
<h2>Full example</h2>
|
||
|
|
<pre><code>module Main exposing (..)
|
||
|
|
|
||
|
|
import Html exposing (Html)
|
||
|
|
import Svg exposing (..)
|
||
|
|
import Svg.Attributes exposing (..)
|
||
|
|
import Time exposing (Time, second)
|
||
|
|
|
||
|
|
|
||
|
|
main =
|
||
|
|
Html.program
|
||
|
|
{ init = init
|
||
|
|
, view = view
|
||
|
|
, update = update
|
||
|
|
, subscriptions = subscriptions
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
-- MODEL
|
||
|
|
|
||
|
|
|
||
|
|
type alias Model =
|
||
|
|
Time
|
||
|
|
|
||
|
|
|
||
|
|
init : ( Model, Cmd Msg )
|
||
|
|
init =
|
||
|
|
( 0, Cmd.none )
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
-- UPDATE
|
||
|
|
|
||
|
|
|
||
|
|
type Msg
|
||
|
|
= Tick Time
|
||
|
|
|
||
|
|
|
||
|
|
update : Msg -> Model -> ( Model, Cmd Msg )
|
||
|
|
update msg model =
|
||
|
|
case msg of
|
||
|
|
Tick newTime ->
|
||
|
|
( newTime, Cmd.none )
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
-- SUBSCRIPTIONS
|
||
|
|
|
||
|
|
|
||
|
|
subscriptions : Model -> Sub Msg
|
||
|
|
subscriptions model =
|
||
|
|
Time.every second (\time -> Tick time)
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
-- VIEW
|
||
|
|
|
||
|
|
|
||
|
|
view : Model -> Html Msg
|
||
|
|
view model =
|
||
|
|
let
|
||
|
|
angle =
|
||
|
|
turns (Time.inMinutes model)
|
||
|
|
|
||
|
|
handX =
|
||
|
|
toString (50 + 40 * cos angle)
|
||
|
|
|
||
|
|
handY =
|
||
|
|
toString (50 + 40 * sin angle)
|
||
|
|
in
|
||
|
|
svg [ viewBox "0 0 100 100", width "300px" ]
|
||
|
|
[ circle [ cx "50", cy "50", r "45", fill "#0B79CE" ] []
|
||
|
|
, line [ x1 "50", y1 "50", x2 handX, y2 handY, stroke "#023963" ] []
|
||
|
|
]
|
||
|
|
</code></pre>
|