This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
Elm Playgrounds abstract the Model, View, Update pattern and hide Signals.
version 1.0.3
license BSD3
native-modules False
Tag 1.0.3
Committed At 2014-12-03 16:26:31 UTC
jcollard/key-constants 1.0.0 <= v < 2.0.0 1.0.1
elm-lang/core 1.0.0 <= v < 2.0.0 1.1.1

README

Playground

Playground attempts to add a layer of abstraction between the programmer and Signals.

To install, run elm-package install jcollard/elm-playground in the root directory of your elm project.

Examples

  • Increment: Basic example showing a number increment
  • Ball: Basic example showing an interactive circle
  • Mario: Basic example showing the classic Elm Mario demo.

Increment

A number appears centered on the screen and increments every 60 milliseconds. If the user presses the space bar, the counter resets.

See It Running

-- Increases an Int ~60 times per second. When the space bar is pressed, the Int
-- resets
update realworld input state = 
  case input of
    Tap k -> if | Keys.equal k Keys.space -> 0
                | otherwise -> state
    otherwise -> state + 1

render state = [asText state |> toForm]

main = play { render = render, update = update, initialState = 0 }

Ball

A circle is drawn to the screen. Use the arrow keys to move it around the screen. Press 1, 2, or 3, to change the circles color.

See It Running!

###Source

-- Define what you want the state of your program to be
type State = {x : Float, y : Float, c : Color}
initialState : State
initialState = {x = 0, y = 0, c = blue}

-- Define how the state of your program should be rendered
render : State -> [Form]
render state = 
    let shape = circle 50 |> filled state.c |> move (state.x, state.y) 
    in [shape]

-- Define how your program is updated
update : RealWorld -> Input -> State -> State
update rw input state = 
    case input of
      Tap k ->
          if | Keys.equal k Keys.one -> {state | c <- blue}
             | Keys.equal k Keys.two -> {state | c <- red}
             | Keys.equal k Keys.three -> {state | c <- green}
             | otherwise -> state
      Key k ->
          if | Keys.equal k Keys.arrowLeft -> {state | x <- state.x - 5}
             | Keys.equal k Keys.arrowRight -> {state | x <- state.x + 5}
             | Keys.equal k Keys.arrowDown ->  {state | y <- state.y - 5}
             | Keys.equal k Keys.arrowUp -> {state | y <- state.y + 5}
             | otherwise -> state
      otherwise -> state

playground : Playground State
playground = {render = render, update = update, initialState = initialState}

main : Signal Element
main = play playground

Mario

Move Mario using the arrow keys!

See It Running!

Source

-- Define what you want the state of your program to be
type State = { mario : Mario, background : Background}
type Background = { w : Float, h : Float }
type Mario = { x : Float, y : Float, vx : Float, vy : Float, dir : String}

initialState : State
initialState = { mario = { x=0, y=0, vx=0, vy=0, dir="right" }, 
                 background = {w = 0, h = 0}}

-- Define how the state of your program should be rendered
render : State -> [Form]
render {mario, background} =
  let (w,h) = (background.w, background.h)
      verb = if | mario.y  >  0 -> "jump"
                | mario.vx /= 0 -> "walk"
                | otherwise     -> "stand"
      src  = "http://elm-lang.org/imgs/mario/" ++ verb ++ "/" ++ mario.dir ++ ".gif"
  in [ rect w h  |> filled (rgb 174 238 238)
      , rect w 50 |> filled (rgb 74 163 41)
                  |> move (0, 24 - h/2)
      , toForm (image 35 35 src) |> move (mario.x, mario.y + 62 - h/2)
      ]

gravity : Time -> Mario -> Mario
gravity t mario = if mario.y > 0 then { mario | vy <- mario.vy - t/4 } else mario

physics : Time -> Mario -> Mario
physics t mario = { mario | x <- mario.x + t*mario.vx, 
                          y <- max 0 (mario.y + t*mario.vy),
                          vx <- 0}
jump : Mario -> Mario
jump mario = if mario.y == 0 then { mario | vy <- 5 } else mario

-- Define how your program is updated
update : RealWorld -> Input -> State -> State
update realworld input {mario, background} = 
       let mario' =
           case input of
             Key k ->
                 if | Keys.equal k Keys.arrowLeft -> {mario | vx <- mario.vx - 2, dir <- "left"}
                    | Keys.equal k Keys.arrowRight -> {mario | vx <- mario.vx + 2, dir <- "right"}
                    | otherwise -> mario
             Tap k ->
                 if | Keys.equal k Keys.arrowUp -> jump mario
                    | otherwise -> mario
             Passive t -> gravity (t/20) (physics (t/20) mario)
             otherwise -> mario
       in {mario = mario', 
           background = { w = realworld.right - realworld.left,
                          h = realworld.top - realworld.bottom}}

main = play {render = render, update = update, initialState = initialState}