From eefd9cb2c84b4359a6aefea99a8b2812c5242361 Mon Sep 17 00:00:00 2001 From: John Shaver Date: Fri, 16 Jun 2017 23:15:14 -0700 Subject: [PATCH] Hey look there's a thing on the screen! --- elm-package.json | 4 ++- main.elm | 81 +++++++++++++++++++++++++++++++++--------------- 2 files changed, 59 insertions(+), 26 deletions(-) diff --git a/elm-package.json b/elm-package.json index f5ba1c5..77e289f 100644 --- a/elm-package.json +++ b/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" } diff --git a/main.elm b/main.elm index be55db0..f7fe629 100644 --- a/main.elm +++ b/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 ] +