Makes the AliceBot MNswpr lock interactive. Click to toggle a reveal operation on a cell, Ctrl+click to toggle a flag operation

MNswprUI.js

class MNswprUI {
  constructor( baseArgs = "" ) {
    this.dOMObserver     = new MutationObserver( this.processDOMMutations.bind( this ) )
    this.$input          = document.getElementsByClassName("channel-textarea-inner")[0]
    this.$input          = this.$input.getElementsByTagName("textarea")[0]
    this.baseArgs        = baseArgs
    this.dOMObserver.observe( document.getElementsByClassName("messages")[0], { childList: true, subtree: true } )
  }

  parse() {
    let content     = this.$container.innerHTML
    let rows        = content.match(/\|([\d\sF.]\|){9}/g)
    let cursorIndex = 0

    for( let rowIndex = 0; rowIndex < rows.length; rowIndex++ ) {
      let cells = rows[ rowIndex ].match(/[\d\s.F]/g)

      if( cells == null || !cells.length )
      	continue

      cursorIndex = content.indexOf( rows[ rowIndex ], cursorIndex )

      cells = cells.map( ( value, colIndex ) => {
      	if( [".","F"].indexOf( value ) < 0 )
					return value

        return this.getCellLink( colIndex, rowIndex, value )
      } )

      content = content.replace( rows[ rowIndex ], "|" + cells.join("|") + "|" )
    }

    this.$container.innerHTML = content
  }

  setActiveContainer( $container ) {
    if( this.$container ) {
      this.$container.innerHTML = this.originalContent
    }

    this.$container      = $container
    this.originalContent = this.$container.innerHTML
    this.operations      = {}
    this.parse()

    this.cellLinks = this.$container.getElementsByClassName( "mnswpr-cell" )

    for( let $cell of this.cellLinks )
    	$cell.onclick = this.cellClickHandler.bind( this )
  }

  processDOMMutations( mutations ) {
    mutations.forEach( mutation => {
      if( !mutation.addedNodes || !mutation.addedNodes.length )
        return

      mutation.addedNodes.forEach( $node => {
        let $messageGroup = null

        if( !$node.className || !$node.className.includes( "message" ) )
          return

        if( $node.className.includes( "message-group" ) ) {
          if( $node.nextSibling )
            return // Not the latest message group

          $node = $node.getElementsByClassName( "message" )[0]
        }
        else if( $node.parentNode.parentNode.nextSibling )
          return // Not the latest message group

        if( $node.className.includes( "message-sending" ) )
          return

        let $firstMessage = $node.parentNode.getElementsByClassName( "first" )[0]
        let $header       = $firstMessage.getElementsByTagName( "h2" )[0]
        let user          = $header.getElementsByClassName( "user-name" )[0].textContent

        if( !user.includes( "AliceBot" ) )
          return

        let $codeEl = $node.getElementsByTagName( "code" )[0]

        if( !$codeEl )
          return

        if( $codeEl.textContent.includes( "Pass MNswpr a" ) )
          this.setActiveContainer( $codeEl )
      } )
    } )
  }

  getCellLink( x, y, content = "." ) {
    let cellCoord = String.fromCharCode( x + 65 ) + ( y + 1 )
  	return '<a href="#" class="mnswpr-cell" data-cell="' + cellCoord + '" data-original="' + content + '">' + content + '</a>'
  }

  cellClickHandler( e ) {
  	e.preventDefault()
    e.stopPropagation()

    let $cell       = e.target
    let cellCoord   = $cell.dataset.cell
    let originalVal = $cell.dataset.original
    let value       = $cell.textContent

    if( e.ctrlKey ) {
      if( "F" === value ) {
        this.operations[ cellCoord ] = "UNFLAG" + cellCoord
        value = "."
      }
      else {
        this.operations[ cellCoord ] = "FLAG" + cellCoord
        value = "F"
      }
    }
    else {
			if( "." === value ) {
      	this.operations[ cellCoord ] = cellCoord
        value = "X"
      }
      else if( "X" === value ) {
        value = "."
      }
    }

    $cell.textContent = value

    if( value !== originalVal ) {
    	$cell.style.color = "red"
    }
    else {
    	$cell.style.color = ""
      delete this.operations[ cellCoord ]
    }

    this.updateMessage()

    return false
  }

  updateMessage() {
    let ops = Object.getOwnPropertyNames( this.operations ).map( coord => this.operations[ coord ] )
    let opString = '[ "' + ops.join( '", "' ) + '"]'

  	let message = '!alicebot.out_4l1c3b {' + ( this.baseArgs.length ? this.baseArgs + ", " : "" ) + '"MNswpr":' + opString + '}'
    this.$input.value = message
  }
}

var mui = new MNswprUI()