MouseFollow.md

MouseFollow Demo

Configuration

• In terminal, run elm package install elm-lang/mouse
• Also run elm package install elm-lang/keyboard

Setup

• Rename the module MouseFollow
• Import Mouse and Keyboard
• In the definition of main, change App.beginnerProgram to App.program
• In the argument of App.program, change model = model to init = init
• Add subscriptions = subscriptions to the argument of App.program

Init Stub

• Below the model, add a new type declaration for init
  • We want init to be a tuple containing a Model and a Cmd Msg
• Define init to be a tuple containing model and Cmd.none

Subscriptions Stub

• Below update, add a new type declaration for subscriptions
  • We want subscriptions to accept a Model and return a Sub Msg
• Define subscriptions to take an argument model and return Sub.none

Update Stub

• Remove DisplayToggle from the type declaration of Msg
• Also remove the DisplayToggle case from the definition of update
• Change the type declaration of update to return a tuple containing a Model and a Cmd Msg
• In the NoOp case of update, return a tuple containing model and Cmd.none

View Stub

• Remove viewListItem and its type declaration
• In the view, output an empty div

Model

• Change the type declaration of model
  • Remove the current properties
  • Add x and y as integers
  • Add code as a string
• Change the definition of model
  • Set x and y to be zero
  • Set code to be the string containing the number one

View

• Import Html.Attributes exposing (..)
• Style the div in the view:
  • Give it a 1px black border
  • Set the display to inline-block
  • Set its position to absolute
  • Give it 10px of padding
• Give it some dynamic features:
  • Set the left positioning to x
  • Set the top positioning to y
  • Use code as the contents

Update

• Add MouseMsg and KeyMsg to the type declaration of Msg
  • MouseMsg takes an argument of type Mouse.Position
  • KeyMsg takes an argument of type Keyboard.KeyCode
• Add MouseMsg to the update case with an argument named position:
  • Change x to position.x
  • Change y to position.y
  • Include Cmd.none in the returned tuple
• Add KeyMsg to the update case with an argument named keycode:
  • Change code on the model to the string version of keycode
  • Include Cmd.none in the returned tuple

Subscriptions

• Replace Sub.none with Sub.batch, which takes a list as its argument
• Add Mouse.moves to the list, with MouseMsg as its argument
• Add Keyboard.downs to the list, with KeyMsg as its argument