export const userIDElem = document.getElementById("user-id")

export const peerIDElem = document.getElementById("peer-id")
export const peerButton = document.getElementById("peer-connect")
export const connectedPeers = document.getElementById("connected-peers")

export const overallStatusIcon = document.getElementById("overall-status-icon")
export const overallStatusIconImage = document.getElementById(
  "overall-status-icon-img",
)

export const canvas = document.getElementById("canvas")
export const penButton = document.getElementById("pen-tool")
export const eraserButton = document.getElementById("eraser-tool")

export const roomIDElem = document.getElementById("room-id")
export const roomConnectButton = document.getElementById("room-connect")
export const connectedRoomID = document.getElementById("connected-room-id")
export const connectedRoomInfoContainer = document.getElementById(
  "connected-room-info",
)

export const penProperties = document.getElementById("pen-properties")
export const closeButton = document.querySelectorAll(".close")
export const palette = document.getElementById("palette")
export const rectangle = document.getElementById("rectangle")
export const wheel = document.getElementById("wheel")
export const picker = document.getElementById("other-colours")
export const labelColour = document.getElementById("colours")
export const slider = document.getElementById("range")
export const output = document.getElementById("value")