client.js

   1 const commandInput = document.querySelector('#short-input')
   2 const firstInsertInput = document.querySelector('#full-input')
   3 const history = document.querySelector('#history')
   4 const backend = new WebSocket('wss://ed-api.apps.penalosa.dev')
   5 commandInput.value = ''
   6 commandInput.focus()
   7 backend.onclose = () => {
   8   document.body.innerHTML = `
   9                 <div class="error">
  10                         <h1>
  11                                 ?
  12                         </h1>
  13                 </div>
  14                 ${document.body.innerHTML}`
  15 }
  16 backend.onmessage = (m) => {
  17   m.data
  18     .split('\n')
  19     .slice(0, -1)
  20     .forEach((l) => {
  21       let div = document.createElement('div')
  22       div.textContent = l
  23       div.className = 'response-data'
  24       history.append(div)
  25     })
  26   commandInput.scrollIntoView({ behavior: 'smooth' })
  27 }
  28 commandInput.addEventListener('keypress', (e) => {
  29   if (e.which == 13) {
  30     backend.send(commandInput.value + '\n')
  31     let div = document.createElement('div')
  32     div.textContent = commandInput.value
  33     div.className = 'command-data'
  34     history.append(div)
  35     if (
  36       commandInput.value.endsWith('i') ||
  37       commandInput.value.endsWith('a') ||
  38       commandInput.value.endsWith('c')
  39     ) {
  40       commandInput.blur()
  41       firstInsertInput.disabled = false
  42       firstInsertInput.style.display = 'block'
  43       firstInsertInput.value = ''
  44       firstInsertInput.focus()
  45     }
  46     commandInput.value = ''
  47   }
  48 })
  49 document.addEventListener('keypress', (e) => {
  50   if (e.which == 13 && e.target.className == 'insert') {
  51     if (e.target.value == '.') {
  52       let value =
  53         [...document.querySelectorAll('.insert')]
  54           .map((e) => e.value)
  55           .join('\n') + '\n'
  56       ;[...document.querySelectorAll('.insert')]
  57         .filter((e) => e.id != 'full-input')
  58         .map((e) => e.remove())
  59       commandInput.focus()
  60       firstInsertInput.value = ''
  61       firstInsertInput.style.display = 'none'
  62       firstInsertInput.disabled = true
  63
  64       backend.send(value)
  65       console.log(value)
  66     } else {
  67       let next = document.createElement('input')
  68       next.className = 'insert'
  69       e.target.disabled = true
  70       e.target.insertAdjacentElement('afterend', next)
  71       next.focus()
  72     }
  73   }
  74 })