::    Matrix GUI
::
::::  /hook/hymn/matr/app
  ::
/?    310
|%
++  cdnj  |=(a=tape ;script(src "//cdnjs.cloudflare.com/ajax/libs/{a}");)
--
::
::::
  ::
^-  manx
;html
  ;head 
    ;title: Matrix
    ;*  %-  turn  :_  cdnj  ^-  wall
        :~  "jquery/2.1.1/jquery.min.js"
            "mousetrap/1.4.6/mousetrap.js"
            "react/0.11.0/react.js"
        ==
    ;script(src "/~/at/main/lib/urb.js");
    ;script: urb.appl = 'sole'
    ;style:'''
           #term {
             width: 100%;
           }
           #term * {
             margin: 0px;
           }
           '''
  ==
  ;body
    ;div#err;
    ;div#term:""
    ;script(type "text/coffeescript")  ;-  %-  trip
      '''
      [DOM,recl,rend] = [React.DOM, React.createClass, React.renderComponent]
      [div, pre] = [DOM.div, DOM.pre]
      Matr = recl render: ->
        [pro,cur] = [@props.prompt + " ", @props.cursor + 1]
        prompt = "#{pro.slice(0,cur)}\u0332#{pro.slice(cur)}"
        lines = [prompt, @props.rows...]
        div {}, lines.slice().reverse().map (lin)->
          pre {}, lin
          
      $ ->
        termRev = 0
        pressed = []
        deltim = null

        met = $('<pre>').text('m').css(display: 'none').appendTo(term).width()
        subs = ""
        # $(window).resize -> 
        #   window.termWif = ($(term).width() / met).toFixed()
        #   path =  "/new/#{termWif}"
        #   if path is subs
        #     return
        #   if subs
        #     urb.unsubscribe {path:subs}
        #   subs = path
        #   urb.subscribe {path}, (err,dat)->
        #       if err or dat.data.ok
        #         return;
        #       syncRev = dat.data.rev
        #       unless termRev > syncRev
        #         termRev = syncRev
        #         matr.setProps rows: dat.data.stak
        #         document.title = "Matrix"  # XX  debug
        # $(window).resize()

        matr = rend (Matr rows:[], prompt:"", cursor:1), term
        flash = ($el, background)->
          $el.css {background}
          if background
            setTimeout (()-> flash $el,''), 50
        
        peer = (ruh) ->
          switch false
            when !ruh.map then ruh.map peer
            when !ruh.pro then matr.setProps prompt: ruh.pro
            when !ruh.hop then matr.setProps cursor: ruh.hop
            when !ruh.out 
              matr.setProps rows: [ruh.out, matr.props.rows...]
            when !ruh.act then switch ruh.act
              when 'clr' then matr.setProps rows:[]
              when 'bel' then flash ($ 'body'), 'black'
              else throw "Unknown "+(JSON.stringify ruh)
            else console.log ruh
        
        urb.bind "", (err,d)->
          if d.data then peer d.data

        #later = (data)->
        #  if data
        #    pressed.push data
        #  clearTimeout deltim
        #  setTimeout (->
        #    if urb.reqq.length > 0 
        #      return deltim = later()
        #    urb.send data: pressed
        #    pressed = []
        #  ), 500

        Mousetrap.handleKey = (char, mod, e)->
          norm = {
            capslock:  'caps'
            pageup:    'pgup'
            pagedown:  'pgdn'
            backspace: 'baxp'
            enter:     'entr'
          }
          key = 
            if char.length is 1
              if e.type is 'keypress'
                str: char
            else if e.type is 'keydown'
              if char isnt 'space'
                act: norm[char] ? char
            else if e.type is 'keyup' and norm[key] is 'caps'
              act: 'uncap'
          if key
            e.preventDefault()
            urb.send mark: 'dill-belt', data: {mod,key}
            
            # amod = (arr)->
            #   for i in arr
            #     unless mod.indexOf(i) < 0
            #       return yes
            #   no
            # if key.str or key.act is 'baxp' or key.act is 'entr'
            #   termRev++
            #   [bot, rest...] = old = matr.props.rows
            #   matr.setProps rows:(
            #     switch  key.act 
            #       when 'baxp'
            #         if amod ['ctrl', 'meta']
            #           ['', rest...]
            #         else if amod ['alt']
            #           [(bot.replace /\ *[^ ]*$/, ''), rest...]
            #         else if bot and bot.length 
            #           [bot.slice(0, -1), rest...]
            #         else if rest[0] and rest[0].length
            #           res = rest.slice()
            #           res[0] = res[0].slice(0, -1)
            #           res
            #         else rest
            #       when 'entr'
            #         ['', old...]
            #       when undefined
            #         if mod.length > 1 or (mod.length and !amod ['shift'])
            #           old
            #         else unless old and bot isnt null
            #           [key.str]
            #         #else if bot.length is termWif
            #         #  [key.str, old...]
            #         else [bot + key.str, rest...]
            #   )
            #   document.title = "Matri"  # XX  debug
            # later {mod, key}


      '''
    ==
    ;+  (cdnj "coffee-script/1.7.1/coffee-script.min.js")
==  ==