DemoApp.fm

import App 

// A demo App that displays screen coordinates
T DemoAppState
| demoappstate(
  mousex  : Number,
  mousey  : Number,
  clicks  : Number,
  lastkey : Number
)

demo_app : App(DemoAppState)
  // Application state
  let state = demoappstate(0, 0, 0, 0)

  // Application interface
  let render = (state) =>
    case state
    | demoappstate =>
      box("div", {"border": "1px solid black"}, [
        // Title
        box("h2", {}, [txt("Formality Demo App")]),

        // Mouse position
        box("h3", {}, [txt("Mouse position:")]),
        box("ul", {}, [
          box("li", {}, [txt("x:"), num(state.mousex)]),
          box("li", {}, [txt("y:"), num(state.mousey)])
        ]),

        // Click count
        box("h3", {}, [txt("Mouse clicks:")]),
        box("div", {}, [num(state.clicks)]),

        // Last key
        box("h3", {}, [txt("Last key press:")]),
        box("div", {}, [num(state.lastkey)]),

        // An image
        img(#[64, 64], (pos) => 
          get #[x,y] = pos
          let r = ((x * 8 + state.mousex) % 256) || 0
          let g = ((y * 8 + state.mousey) % 256) || 0
          let b = 128
          let c = 0xFF000000
          let c = c || (b << 16)
          let c = c || (g << 8)
          let c = c || r
          c),
      ])

  // Application interaction
  let update = (event, state) =>
    case event
    with state : DemoAppState
    | mouseclick =>
      case state
      | demoappstate => demoappstate(
        state.mousex,
        state.mousey,
        state.clicks + 1,
        state.lastkey)
    | mousemove =>
      case state
      | demoappstate => demoappstate(
        event.x,
        event.y,
        state.clicks,
        state.lastkey)
    | keypress => 
      case state
      | demoappstate => demoappstate(
        state.mousex,
        state.mousey,
        state.clicks,
        event.key)
    | keydown => state
    | keyup => state

  // Builds the application
  app(DemoAppState; state, render, update)