app.js

// Room connection and synchronisation.
// Translate local canvas input events to draw messages in light of current tool
// selections and send to the room.
// Get back room updates and invoke the local canvas renderer.

import * as canvas from "./canvas.js"
import * as HTML from "./elements.js"
import { connect } from "./room.js"
import * as toolSelection from "./tool-selection.js"
import * as humanhash from "humanhash"
import jdenticon from "jdenticon"

const TEST_ROOM = "imperial"

const MIN_PRESSURE_FACTOR = 0.1
const MAX_PRESSURE_FACTOR = 1.5

// This is a quadratic such that:
// - getPressureFactor(0.0) = MIN_PRESSURE_FACTOR
// - getPressureFactor(0.5) = 1.0
// - getPressureFactor(1.0) = MAX_PRESSURE_FACTOR
// For sensible results, maintain that:
// - 0.0 <= MIN_PRESSURE_FACTOR <= 1.0
// - 1.0 <= MAX_PRESSURE_FACTOR
// For intuitive results, maintain that:
// - MAX_PRESSURE_FACTOR <= ~2.0
const getPressureFactor = (pressure) => {
  const a = 2 * (MAX_PRESSURE_FACTOR + MIN_PRESSURE_FACTOR) - 4
  const b = -MAX_PRESSURE_FACTOR - 3 * MIN_PRESSURE_FACTOR + 4
  const c = MIN_PRESSURE_FACTOR
  return a * pressure ** 2 + b * pressure + c
}

let room = null

const humanHasher = new humanhash()

const onRoomConnect = (room_) => {
  room = room_

  HTML.connectedRoomID.textContent = room.name
  HTML.connectedRoomInfoContainer.style.display = "block"

  HTML.userIDElem.value = room.ownID || ""
  room.addEventListener("allocateOwnID", ({ detail: id }) => {
    HTML.userIDElem.value = id
  })

  room.addEventListener("userJoin", ({ detail: id }) => {
    if (HTML.connectedPeers.children.length == 0) {
      HTML.connectedPeers.innerHTML = ""
    }

    getOrInsertPeerById(id)
    updateOverallStatusIcon()
  })

  room.addEventListener("userLeave", ({ detail: id }) => {
    HTML.connectedPeers.removeChild(getOrInsertPeerById(id))

    if (HTML.connectedPeers.children.length == 0) {
      HTML.connectedPeers.innerHTML = "No peers are connected"
    }

    updateOverallStatusIcon()
  })

  room.addEventListener("userConnection", ({ detail: { id, quality } }) => {
    const high = "/quality-high.svg"
    const medium = "/quality-medium.svg"
    const low = "/quality-low.svg"

    const peer = getOrInsertPeerById(id).children[1]
    if (quality < 0.33) {
      if (!peer.src.includes(high)) {
        peer.src = high
      }
    } else if (quality < 0.66) {
      if (!peer.src.includes(medium)) {
        peer.src = medium
      }
    } else {
      if (!peer.src.includes(low)) {
        peer.src = low
      }
    }
  })

  room.addEventListener("weSyncedWithPeer", ({ detail: id }) => {
    getOrInsertPeerById(id).children[2].className = "peer-status upload synced"
    updateOverallStatusIcon()
  })

  room.addEventListener("waitingForSyncStep", ({ detail: id }) => {
    getOrInsertPeerById(id).children[3].className =
      "peer-status download negotiating"
    updateOverallStatusIcon()
  })

  room.addEventListener("peerSyncedWithUs", ({ detail: id }) => {
    getOrInsertPeerById(id).children[3].className =
      "peer-status download synced"
    updateOverallStatusIcon()
  })

  room.addEventListener("addOrUpdatePath", ({ detail: { id, points } }) => {
    canvas.renderPath(id, points)
  })
}

const tryRoomConnect = async (roomID) => {
  return await connect(roomID)
    .then(onRoomConnect)
    .catch((err) => alert(`Error connecting to a room:\n${err}`))
}

const pathIDsByPointerID = new Map()

HTML.peerButton.addEventListener("click", () => {
  const peerID = HTML.peerIDElem.value
  if (room == null || peerID == "") {
    return
  }
  room.inviteUser(peerID)
  HTML.peerIDElem.value = ""
})

const onRoomJoinEnter = () => {
  const selectedRoomID = HTML.roomIDElem.value
  if (!selectedRoomID || selectedRoomID == room.name) {
    return
  }

  if (room != null) {
    room.disconnect()
    room = null
  }

  canvas.clear()
  HTML.connectedPeers.innerHTML = "No peers are connected"

  tryRoomConnect(selectedRoomID)
}

HTML.roomConnectButton.addEventListener("click", onRoomJoinEnter)

HTML.roomIDElem.addEventListener("keydown", (event) => {
  if (event.key == "Enter") {
    event.target.blur()

    onRoomJoinEnter()
  }
})

const getOrInsertPeerById = (id) => {
  for (const peerElem of HTML.connectedPeers.children) {
    const peerId = peerElem.children[4].id
    if (peerId == id) {
      return peerElem
    }
  }

  const peerElem = document.createElement("li")

  const avatarImage = document.createElement("svg")
  avatarImage.innerHTML = jdenticon.toSvg(id, 50)
  avatarImage.className = "avatar"

  const quality = document.createElement("img")
  quality.src = "/quality-low.svg"
  quality.alt = "Peer quality icon"
  quality.className = "peer-quality"

  const ourStatus = document.createElement("div")
  ourStatus.className = "peer-status upload unsynced"

  const theirStatus = document.createElement("div")
  theirStatus.className = "peer-status download unsynced"

  const peerId = document.createElement("div")
  peerId.style.marginLeft = "5px"

  peerId.id = id

  peerId.innerHTML = humanHasher.humanize(id, 2)

  peerElem.appendChild(avatarImage)
  peerElem.appendChild(quality)
  peerElem.appendChild(ourStatus)
  peerElem.appendChild(theirStatus)
  peerElem.appendChild(peerId)

  HTML.connectedPeers.appendChild(peerElem)

  return peerElem
}

const updateOverallStatusIcon = () => {
  for (const peerElem of HTML.connectedPeers.children) {
    if (
      !peerElem.children[2].classList.contains("synced") ||
      !peerElem.children[3].classList.contains("synced")
    ) {
      HTML.overallStatusIcon.className = "synchronising"
      HTML.overallStatusIconImage.src = "synchronising.svg"
      return
    }
  }
  HTML.overallStatusIcon.className = "synchronised"
  HTML.overallStatusIconImage.src = "synchronised.svg"
}

const getDistance = (a, b) => {
  return Math.sqrt(
    (a[0] - b[0]) * (a[0] - b[0]) + (a[1] - b[1]) * (a[1] - b[1]),
  )
}

const erasePoint = ([x, y]) => {
  if (room == null) {
    return
  }
  room.getPaths().forEach((points, pathID) => {
    points.forEach((point, i) => {
      if (getDistance([x, y], point) <= toolSelection.getEraseRadius()) {
        room.erasePoint(pathID, i)
      }
    })
  })
}

canvas.input.addEventListener("strokestart", ({ detail: e }) => {
  if (room == null) {
    return
  }
  const currentTool = toolSelection.getTool()
  const mousePos = [e.offsetX, e.offsetY]
  if (currentTool == toolSelection.Tools.PEN) {
    pathIDsByPointerID.set(
      e.pointerId,
      room.addPath([
        ...mousePos,
        toolSelection.getStrokeRadius() * getPressureFactor(e.pressure),
        toolSelection.getStrokeColour(),
      ]),
    )
  } else if (currentTool == toolSelection.Tools.ERASER) {
    erasePoint(mousePos)
  }
})

canvas.input.addEventListener("strokeend", ({ detail: e }) => {
  pathIDsByPointerID.delete(e.pointerId)
})

canvas.input.addEventListener("strokemove", ({ detail: e }) => {
  if (room == null) {
    return
  }
  const currentTool = toolSelection.getTool()
  const mousePos = [e.offsetX, e.offsetY]
  if (currentTool == toolSelection.Tools.PEN) {
    room.extendPath(pathIDsByPointerID.get(e.pointerId), [
      ...mousePos,
      toolSelection.getStrokeRadius() * getPressureFactor(e.pressure),
      toolSelection.getStrokeColour(),
    ])
  } else if (currentTool == toolSelection.Tools.ERASER) {
    erasePoint(mousePos)
  }
})

tryRoomConnect(TEST_ROOM)