chat.coffee

require('zappa') ->
  @enable 'serve jquery'
  
  @get '/': ->
    @render index: {layout: no}
  
  @on 'set nickname': ->
    @client.nickname = @data.nickname
  
  @on said: ->
    @broadcast said: {nickname: @client.nickname, text: @data.text}
    @emit said: {nickname: @client.nickname, text: @data.text}

  @on moved: ->
    @broadcast moved: {y: @data.y, x: @data.x}
  
  @client '/index.js': ->
    @connect()

    @on said: ->
      $('#panel').append "<p>#{@data.nickname} said: #{@data.text}</p>"

    @on moved: ->
      console.log "moved -> #{@data.y} #{@data.x}"
      $('#object').stop().animate top: @data.y, left: @data.x
    
    $ =>
      @emit 'set nickname': {nickname: prompt 'Pick a nickname!'}
      
      $('#box').focus()
      
      $('button').click (e) =>
        @emit said: {text: $('#box').val()}
        $('#box').val('').focus()
        e.preventDefault()

      $(document).mousemove (e) =>
        console.log "--> #{e.pageY} #{e.pageX}"
        @emit moved: {y: e.pageY, x: e.pageX}

  @stylus '/layout.css': '''
    body
      background #ddd
    #object
      background red
      position absolute
      top 50%
      left 50%
      width 30px
      height 30px
  '''
    
  @view index: ->
    doctype 5
    html ->
      head ->
        title 'PicoChat!'
        script src: '/socket.io/socket.io.js'
        script src: '/zappa/jquery.js'
        script src: '/zappa/zappa.js'
        script src: '/index.js'
        link rel: 'stylesheet', href: '/layout.css'
      body ->
        div id: 'object'
        div id: 'panel'
        form ->
          input id: 'box'
          button 'Send'