Hey look there's a thing on the screen!

elm-package.json

@@ -9,7 +9,9 @@
     "exposed-modules": [],
     "dependencies": {
         "elm-lang/core": "5.1.1 <= v < 6.0.0",
-        "elm-lang/html": "2.0.0 <= v < 3.0.0"
+        "elm-lang/html": "2.0.0 <= v < 3.0.0",
+        "elm-lang/svg": "2.0.0 <= v < 3.0.0",
+        "folkertdev/svg-path-dsl": "2.0.0 <= v < 3.0.0"
     },
     "elm-version": "0.18.0 <= v < 0.19.0"
 }

main.elm

@@ -1,50 +1,81 @@
-import Html exposing (Html, Attribute, input, button, div, text)
-import Html.Attributes exposing (..)
-import Html.Events exposing (onClick, onInput)
+import Html exposing (Html, h1, div, text)
+import Time exposing (Time, second)
+import Svg exposing (Svg, svg, g, path)
+import Svg.Attributes exposing (stroke, fill, strokeLinejoin, strokeWidth, width, height, viewBox, d)
+import Svg.Path exposing (pathToString, arcBy, subpath, closed, lineBy, startAt, antiClockwise, clockwise, largestArc)
 
+
+mOVE_SPEED = 60 -- pixels per second
+cHAR_RAD = 25 --half-width of character
+wIDTH = "500"
+hEIGHT = "900"
+
+main : Program Never Model Msg
 main =
-  Html.beginnerProgram { model = model, view = view, update = update }
+  Html.beginnerProgram 
+    { model = model
+    , view = view
+    , update = update
+    }
 
 
 -- MODEL
 
-type alias Model = { count : Int, content : String } 
+type alias Model = 
+    { time : Time}
 
 model : Model
-model =
-    { count = 0, content = "" }
+model = {
+    time = 0
+    }
 
 -- UPDATE
 
-type Msg = Increment | Decrement | Reset | ChangeContent String
+type Msg = Tick Time
 
 update : Msg -> Model -> Model
 update msg model =
     case msg of
-        Increment -> 
-            { model | count = model.count + 1 }
-
-        Decrement ->
-            { model | count = model.count - 1 }
-
-        Reset ->
-            { model | count = 0 }
-        
-        ChangeContent newContent ->
-            { model | content = newContent }
+        Tick newTime ->
+            { model | time = newTime }
 
+-- SUMSCRIPTIONS
 
 -- VIEW
 
+type alias Point = (Float, Float)
+
+render : String -> String -> Model -> Html msg
+render w h model = 
+    svg [ width w, height h, viewBox "0 0 500, 900"] [pacman (250, 450) (degrees 90)]
+
+pacman : Point -> Float -> Svg msg
+pacman position openness =
+    let
+        opp = cHAR_RAD * sin (openness/2)
+        adj = cHAR_RAD * cos (openness/2)
+    in
+        g []
+            [ path 
+                [ d <|
+                    pathToString [(subpath (startAt position) closed 
+                        [lineBy (adj, opp)
+                        ,arcBy (cHAR_RAD, cHAR_RAD) 0 (largestArc, clockwise) (0, -(opp * 2))
+                        ,lineBy (-adj, opp)
+                        ]
+                    )]
+                ,fill "#ffff00"
+                ] 
+                []
+            ]
+        
+                    
 view : Model -> Html Msg
 view model =
     div []
-        [ button [ onClick Increment ] [ text "+" ]
-        , div [] [ text (toString model.count) ]
-        , button [ onClick Decrement ] [ text "-" ]
-        , button [ onClick Reset ] [ text "Reset" ]
-        , input [ placeholder "Text to reverse", onInput ChangeContent ] []
-        , div [] [ text (String.reverse model.content )]
+        [h1 [] [text "ElmMan!"]
+        ,render wIDTH hEIGHT model
         ]
+