Skip to content
Snippets Groups Projects
Commit 1d3a91cb authored by Yuriy Maksymets's avatar Yuriy Maksymets
Browse files

WIP Cleaning state after connecting to another room

parent 4fdde353
No related branches found
No related tags found
1 merge request!28Rooms and frontend
Pipeline #101537 passed
......@@ -4,6 +4,10 @@
position: fixed;
}
#connected-room-info {
display: none;
}
button.selected {
background-color: lightgray;
}
......@@ -14,6 +14,8 @@ const {
eraserButton,
} = HTML
const TEST_ROOM = "imperial"
// TODO: switch to curve interpolation that respects mouse points based on velocity
const lineFn = line()
.x((d) => d[0])
......@@ -111,129 +113,157 @@ function setElemVisible(elem, visible = true) {
elem.style.display = visible ? "block" : "none"
}
function hideConnectedRoom() {
setElemVisible(HTML.connectedRoomInfoContainer, false)
}
// function hideConnectedRoom() {
// setElemVisible(HTML.connectedRoomInfoContainer, false)
// }
function showConnectedRoom(roomID) {
HTML.connectedRoomID.textContent = roomID
setElemVisible(HTML.connectedRoomInfoContainer)
}
function connectToARoom(roomID) {
connect(roomID).then((room) => {
showConnectedRoom(roomID)
let userInput = false
let currentTool = tools.PEN
let currentPathID = null
userIDElem.value = room.ownID || ""
room.addEventListener("allocateOwnID", ({ detail: id }) => {
userIDElem.value = id
})
room.addEventListener("userJoin", ({ detail: id }) => {
const peerElem = document.createElement("li")
peerElem.innerHTML = id
connectedPeers.appendChild(peerElem)
})
room.addEventListener("userLeave", ({ detail: id }) => {
for (const peerElem of connectedPeers.children) {
if (peerElem.innerHTML == id) {
connectedPeers.removeChild(peerElem)
}
function removeAllChildrenNodes(element) {
while (element.firstChild) {
element.removeChild(element.firstChild)
}
}
function setBlankUIState() {
removeAllChildrenNodes(HTML.canvas)
removeAllChildrenNodes(HTML.connectedPeers)
// Removes all event listeners from canvas
// const newCanvas = HTML.canvas.cloneNode(true)
// canvas.parentNode.replaceChild(newCanvas, canvas)
}
function handleRoomConnectClick() {
const selectedRoomID = roomIDElem.value
if (!selectedRoomID) return
setBlankUIState()
connectToARoom(selectedRoomID)
}
function handleRoomConnectionEstablished(room) {
showConnectedRoom(room.name)
let userInput = false
let currentTool = tools.PEN
let currentPathID = null
userIDElem.value = room.ownID || ""
room.addEventListener("allocateOwnID", ({ detail: id }) => {
userIDElem.value = id
})
room.addEventListener("userJoin", ({ detail: id }) => {
const peerElem = document.createElement("li")
peerElem.innerHTML = id
connectedPeers.appendChild(peerElem)
})
room.addEventListener("userLeave", ({ detail: id }) => {
for (const peerElem of connectedPeers.children) {
if (peerElem.innerHTML == id) {
connectedPeers.removeChild(peerElem)
}
})
room.addEventListener("addOrUpdatePath", ({ detail: { id, points } }) => {
addOrUpdatePathElem(id, points)
})
canvas.addEventListener("mousedown", (e) => {
userInput = true
let mouse = [e.offsetX, e.offsetY]
if (currentTool === tools.PEN) {
currentPathID = room.addPath(mouse)
} else if (currentTool === tools.ERASER) {
room.getPaths().forEach((points, pathID) => {
points.forEach((point, i) => {
if (getDistance(mouse, point) <= ERASERRADIUS) {
room.erasePoint(pathID, i)
}
})
}
})
room.addEventListener("addOrUpdatePath", ({ detail: { id, points } }) => {
addOrUpdatePathElem(id, points)
})
canvas.addEventListener("mousedown", (e) => {
console.log("MDDDD")
userInput = true
let mouse = [e.offsetX, e.offsetY]
if (currentTool === tools.PEN) {
currentPathID = room.addPath(mouse)
} else if (currentTool === tools.ERASER) {
room.getPaths().forEach((points, pathID) => {
points.forEach((point, i) => {
if (getDistance(mouse, point) <= ERASERRADIUS) {
room.erasePoint(pathID, i)
}
})
}
})
})
}
})
canvas.addEventListener("mouseleave", () => {
userInput = false
})
canvas.addEventListener("mouseleave", () => {
userInput = false
})
canvas.addEventListener("mouseup", () => {
userInput = false
})
canvas.addEventListener("mouseup", () => {
userInput = false
})
canvas.addEventListener("mousemove", (e) => {
if (!userInput) {
return
}
canvas.addEventListener("mousemove", (e) => {
if (!userInput) {
return
}
let mouse = [e.offsetX, e.offsetY]
let mouse = [e.offsetX, e.offsetY]
if (currentTool === tools.PEN) {
room.extendPath(currentPathID, mouse)
} else if (currentTool === tools.ERASER) {
room.getPaths().forEach((points, pathID) => {
points.forEach((point, i) => {
if (getDistance(mouse, point) <= ERASERRADIUS) {
room.erasePoint(pathID, i)
}
})
if (currentTool === tools.PEN) {
room.extendPath(currentPathID, mouse)
} else if (currentTool === tools.ERASER) {
room.getPaths().forEach((points, pathID) => {
points.forEach((point, i) => {
if (getDistance(mouse, point) <= ERASERRADIUS) {
room.erasePoint(pathID, i)
}
})
}
})
})
}
})
peerButton.addEventListener("click", () => {
const peerID = peerIDElem.value
if (peerID == "") {
return
}
room.inviteUser(peerID)
peerIDElem.value = ""
})
penButton.addEventListener("click", () => {
currentTool = tools.PEN
penButton.classList.add("selected")
eraserButton.classList.remove("selected")
})
eraserButton.addEventListener("click", () => {
currentTool = tools.ERASER
penButton.classList.remove("selected")
eraserButton.classList.add("selected")
})
HTML.roomConnectButton.addEventListener("click", () => {
room = undefined
const selectedRoomID = roomIDElem.value
if (!selectedRoomID) return
connectToARoom(selectedRoomID)
})
peerButton.addEventListener("click", () => {
const peerID = peerIDElem.value
if (peerID == "") {
return
}
room.inviteUser(peerID)
peerIDElem.value = ""
})
penButton.addEventListener("click", () => {
currentTool = tools.PEN
penButton.classList.add("selected")
eraserButton.classList.remove("selected")
})
eraserButton.addEventListener("click", () => {
currentTool = tools.ERASER
penButton.classList.remove("selected")
eraserButton.classList.add("selected")
})
HTML.roomConnectButton.addEventListener("click", () => {
room = undefined
handleRoomConnectClick(room)
})
}
function handleRoomConnectionError(err) {
alert(`Error connecting to a room:\n${err}`)
}
function connectToARoom(roomID) {
connect(roomID)
.then(handleRoomConnectionEstablished)
.catch(handleRoomConnectionError)
}
HTML.roomConnectButton.addEventListener("click", () => {
const selectedRoomID = roomIDElem.value
if (!selectedRoomID) return
connectToARoom(selectedRoomID)
// handleRoomConnectClick()
})
hideConnectedRoom()
// connectToARoom("imperial")
connectToARoom(TEST_ROOM)
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment