Skip to content

Instantly share code, notes, and snippets.

@pdamoc
Created December 7, 2015 08:30
Show Gist options
  • Save pdamoc/3b9177f245a2eefb78f5 to your computer and use it in GitHub Desktop.
Save pdamoc/3b9177f245a2eefb78f5 to your computer and use it in GitHub Desktop.
Turn Base Demo
module TurnBase (Model, Action, init, update, view, main) where
import Effects exposing (Effects)
import Html exposing (Html)
import Svg exposing (svg, rect, g, text, text')
import Svg.Attributes exposing (..)
import Svg.Events exposing (onClick)
import Time exposing (Time, second)
import StartApp
import Task exposing (Task)
-- MODEL
type alias Model =
{ angle : Float
, animationState : AnimationState
}
type alias AnimationState =
Maybe { prevClockTime : Time, elapsedTime : Time }
init : (Model, Effects Action)
init =
( { angle = 0, animationState = Nothing }
, Effects.none
)
rotateStep = 90
duration = second
-- UPDATE
type Action
= Spin
| Tick Time
update : Action -> Model -> (Model, Effects Action)
update msg model =
case msg of
Spin ->
case model.animationState of
Nothing ->
( model, Effects.tick Tick )
Just _ ->
( model, Effects.none )
Tick clockTime ->
let
newElapsedTime =
case model.animationState of
Nothing ->
0
Just {elapsedTime, prevClockTime} ->
elapsedTime + (clockTime - prevClockTime)
in
if newElapsedTime > duration then
( { angle = model.angle + rotateStep
, animationState = Nothing
}
, Effects.none
)
else
( { angle = model.angle
, animationState = Just { elapsedTime = newElapsedTime, prevClockTime = clockTime }
}
, Effects.tick Tick
)
-- VIEW
view : Signal.Address Action -> Model -> Html
view address model =
let
angle = 0
label =
case model.animationState of
Nothing -> text "Player"
Just _ -> text "Computer"
--model.angle + toOffset model.animationState
in
svg
[ width "200", height "200", viewBox "0 0 200 200" ]
[ g [ transform ("translate(100, 100) rotate(" ++ toString angle ++ ")")
, onClick (Signal.message address Spin)
]
[ rect
[ x "-50"
, y "-50"
, width "100"
, height "100"
, rx "15"
, ry "15"
, style "fill: #60B5CC;"
]
[]
, text' [ fill "white", textAnchor "middle" ] [ label ]
]
]
app = StartApp.start
{ init = init
, update = update
, view = view
, inputs = []
}
main = app.html
port tasks : Signal (Task Effects.Never ())
port tasks = app.tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment