espterm-front-end/js/demo.js

const TERM_DEFAULT_STYLE = 7
const TERM_MIN_DRAW_DELAY = 10

class ScrollingTerminal {
  constructor (screen) {
    this.width = 80
    this.height = 25
    this.termScreen = screen

    this.reset()

    this._lastLoad = Date.now()
    this.termScreen.load(this.serialize(), 0)
  }
  reset () {
    this.style = TERM_DEFAULT_STYLE
    this.cursor = { x: 0, y: 0, style: 1 }
    this.trackMouse = false
    this.currentSequence = 0
    this.sequence = ''
    this.clear()
  }
  clear () {
    this.screen = []
    for (let i = 0; i < this.width * this.height; i++) {
      this.screen.push([' ', this.style])
    }
  }
  scroll () {
    this.screen.splice(0, this.width)
    for (let i = 0; i < this.width; i++) {
      this.screen.push([' ', TERM_DEFAULT_STYLE])
    }
    this.cursor.y--
  }
  newLine () {
    this.cursor.y++
    if (this.cursor.y >= this.height) this.scroll()
  }
  writeChar (character) {
    this.screen[this.cursor.y * this.width + this.cursor.x] = [character, this.style]
    this.cursor.x++
    if (this.cursor.x >= this.width) {
      this.cursor.x = 0
      this.newLine()
    }
  }
  deleteChar () {
    this.cursor.x--
    if (this.cursor.x < 0) {
      this.cursor.x = this.width - 1
      this.cursor.y = Math.max(0, this.cursor.y - 1)
    }
    this.screen.splice((this.cursor.y + 1) * this.width, 0, [' ', TERM_DEFAULT_STYLE])
    this.screen.splice(this.cursor.y * this.width + this.cursor.x, 1)
  }
  clampCursor () {
    if (this.cursor.x < 0) this.cursor.x = 0
    if (this.cursor.y < 0) this.cursor.y = 0
    if (this.cursor.x > this.width - 1) this.cursor.x = this.width - 1
    if (this.cursor.y > this.height - 1) this.cursor.y = this.height - 1
  }
  applySequence (sequence) {
    if (sequence[0] === '[') {
      let type = sequence[sequence.length - 1]
      let content = sequence.substring(1, sequence.length - 1)

      let numbers = content ? content.split(';').map(i => +i.replace(/\D/g, '')) : []
      let numOr1 = numbers.length ? numbers[0] : 1
      if (type === 'H') {
        this.cursor.x = (numbers[0] | 0) - 1
        this.cursor.y = (numbers[1] | 0) - 1
        this.clampCursor()
      } else if (type >= 'A' && type <= 'D') {
        this.cursor[type <= 'B' ? 'y' : 'x'] += ((type === 'B' || type === 'C') ? 1 : -1) * numOr1
        this.clampCursor()
      } else if (type === 'E' || type === 'F') {
        this.cursor.x = 0
        this.cursor.y += (type === 'E' ? 1 : -1) * numOr1
        this.clampCursor()
      } else if (type === 'G') {
        this.cursor.x = numOr1 - 1
        this.clampCursor()
      } else if (type === 'q') this.cursor.style = numOr1
      else if (type === 'm') {
        if (!numbers.length) {
          this.style = TERM_DEFAULT_STYLE
          return
        }
        let type = numbers[0]
        if (type === 1) this.style |= 1 << 16 // bold
        else if (type === 2) this.style |= 1 << 1 << 16 // faint
        else if (type === 3) this.style |= 1 << 2 << 16 // italic
        else if (type === 4) this.style |= 1 << 3 << 16 // underline
        else if (type === 5 || type === 6) this.style |= 1 << 4 << 16 // blink
        else if (type === 7) {
          // invert
          this.style = (this.style & 0xFF0000) | ((this.style >> 8) & 0xFF) | ((this.style & 0xFF) << 8)
        } else if (type === 9) this.style |= 1 << 6 << 16 // strike
        else if (type === 20) this.style |= 1 << 5 << 16 // fraktur
        else if (type >= 30 && type <= 38) this.style = (this.style & 0xFFFF00) | (type % 10)
        else if (type >= 40 && type <= 48) this.style = (this.style & 0xFF00FF) | ((type % 10) << 8)
        else if (type === 39) this.style = (this.style & 0xFFFF00) | 7
        else if (type === 49) this.style = (this.style & 0xFF00FF) | (7 << 8)
        else if (type >= 90 && type <= 98) this.style = (this.style & 0xFFFF00) | ((type % 10) + 8)
        else if (type >= 100 && type <= 108) this.style = (this.style & 0xFF00FF) | (((type % 10) + 8) << 8)
        else if (type === 38 || type === 48) {
          if (numbers[1] === 5) {
            let color = (numbers[2] | 0) & 0xFF
            if (type === 38) this.style = (this.style & 0xFFFF00) | color
            if (type === 48) this.style = (this.style & 0xFF00FF) | (color << 8)
          }
        }
      }
    }
  }
  write (text) {
    for (let character of text) {
      let code = character.codePointAt(0)
      if (code === 0x1b) this.currentSequence = 1
      else if (this.currentSequence === 1 && character === '[') {
        this.currentSequence = 2
        this.sequence += '['
      } else if (this.currentSequence && character.match(/[\x40-\x7e]/)) {
        this.applySequence(this.sequence + character)
        this.currentSequence = 0
        this.sequence = ''
      } else if (this.currentSequence > 1) this.sequence += character
      else if (this.currentSequence === 1) {
        // something something nothing
        this.currentSequence = 0
        this.writeChar(character)
      } else if (code === 0x07) this.termScreen.load('B')
      else if (code === 0x08) this.deleteChar()
      else if (code === 0x0a) this.newLine()
      else if (code === 0x0d) this.cursor.x = 0
      else this.writeChar(character)
    }
    this.scheduleLoad()
  }
  serialize () {
    let serialized = 'S'
    serialized += encode2B(this.height) + encode2B(this.width)
    serialized += encode2B(this.cursor.y) + encode2B(this.cursor.x)

    let attributes = 1 // cursor always visible
    attributes |= (3 << 5) * +this.trackMouse // track mouse controls both
    attributes |= 3 << 7 // buttons/links always visible
    attributes |= (this.cursor.shape << 9)
    serialized += encode3B(attributes)

    let lastStyle = null
    for (let cell of this.screen) {
      if (cell[1] !== lastStyle) {
        let foreground = cell[1] & 0xFF
        let background = (cell[1] >> 8) & 0xFF
        let attributes = (cell[1] >> 16) & 0xFF
        let setForeground = foreground !== (lastStyle & 0xFF)
        let setBackground = background !== ((lastStyle >> 8) & 0xFF)
        let setAttributes = attributes !== ((lastStyle >> 16) & 0xFF)

        if (setForeground && setBackground) serialized += '\x03' + encode3B(cell[1] & 0xFFFF)
        else if (setForeground) serialized += '\x05' + encode2B(foreground)
        else if (setBackground) serialized += '\x06' + encode2B(background)
        if (setAttributes) serialized += '\x04' + encode2B(attributes)

        lastStyle = cell[1]
      }
      serialized += cell[0]
    }
    return serialized
  }
  scheduleLoad () {
    clearInterval(this._scheduledLoad)
    if (this._lastLoad < Date.now() - TERM_MIN_DRAW_DELAY) {
      this.termScreen.load(this.serialize())
    } else {
      this._scheduledLoad = setTimeout(() => {
        this.termScreen.load(this.serialize())
      }, TERM_MIN_DRAW_DELAY - this._lastLoad)
    }
  }
}

window.demoInterface = {
  input (data) {
    let type = data[0]
    let content = data.substr(1)

    if (type === 's') {
      this.terminal.write(content)
    } else if (type === 'b') {
      let button = content.charCodeAt(0)
      console.log(`button ${button} pressed`)
    } else if (type === 'm' || type === 'p' || type === 'r') {
      console.log(JSON.stringify(data))
    }
  },
  init (screen) {
    this.terminal = new ScrollingTerminal(screen)
  }
}