From 3494e067682a2d7c1b5a39a647b1cee5e51ca28d Mon Sep 17 00:00:00 2001
From: Giovanni Caruso <gc4117@cloud-vm-36-76.doc.ic.ac.uk>
Date: Wed, 6 Nov 2019 18:06:38 +0000
Subject: [PATCH] Add avatar to user id
---
public/styles.css | 7 +++++++
src/app.js | 23 +++++++++++++++--------
2 files changed, 22 insertions(+), 8 deletions(-)
diff --git a/public/styles.css b/public/styles.css
index 3efb678..e9f840e 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -523,3 +523,10 @@ button.selected {
url("./assets/fonts/martel-v4-latin/martel-v4-latin-regular.svg#Martel")
format("svg");
}
+
+.avatar {
+ width: 100px;
+ height: 100px;
+ margin-right: 5px;
+ border-radius: 100px;
+}
diff --git a/src/app.js b/src/app.js
index 473f0df..1561a89 100644
--- a/src/app.js
+++ b/src/app.js
@@ -48,7 +48,7 @@ const onRoomConnect = (room_) => {
const medium = "/quality-medium.svg"
const low = "/quality-low.svg"
- const peer = getOrInsertPeerById(humanhash.humanize(id, 2)).children[0]
+ const peer = getOrInsertPeerById(humanhash.humanize(id, 2)).children[2]
if (quality < 0.33) {
if (!peer.src.includes(high)) {
peer.src = high
@@ -65,19 +65,19 @@ const onRoomConnect = (room_) => {
})
room.addEventListener("weSyncedWithPeer", ({ detail: id }) => {
- getOrInsertPeerById(humanhash.humanize(id, 2)).children[1].className =
+ getOrInsertPeerById(humanhash.humanize(id, 2)).children[3].className =
"peer-status upload synced"
updateOverallStatusIcon()
})
room.addEventListener("waitingForSyncStep", ({ detail: id }) => {
- getOrInsertPeerById(humanhash.humanize(id, 2)).children[2].className =
+ getOrInsertPeerById(humanhash.humanize(id, 2)).children[4].className =
"peer-status download negotiating"
updateOverallStatusIcon()
})
room.addEventListener("peerSyncedWithUs", ({ detail: id }) => {
- getOrInsertPeerById(humanhash.humanize(id, 2)).children[2].className =
+ getOrInsertPeerById(humanhash.humanize(id, 2)).children[4].className =
"peer-status download synced"
updateOverallStatusIcon()
})
@@ -227,13 +227,19 @@ HTML.roomIDElem.addEventListener("keydown", (event) => {
const getOrInsertPeerById = (id) => {
for (const peerElem of HTML.connectedPeers.children) {
- const peerId = peerElem.children[3].innerHTML
+ const peerId = peerElem.children[1].innerHTML
if (peerId == id) {
return peerElem
}
}
const peerElem = document.createElement("li")
+
+ const avatarImage = document.createElement("img")
+ avatarImage.src = "https://robohash.org/" + id + ".png" + "?bgset=bg1"
+ avatarImage.alt = id
+ avatarImage.className = "avatar"
+
const quality = document.createElement("img")
quality.src = "/quality-low.svg"
quality.alt = "Peer quality icon"
@@ -250,10 +256,11 @@ const getOrInsertPeerById = (id) => {
peerId.innerHTML = id
+ peerElem.appendChild(avatarImage)
+ peerElem.appendChild(peerId)
peerElem.appendChild(quality)
peerElem.appendChild(ourStatus)
peerElem.appendChild(theirStatus)
- peerElem.appendChild(peerId)
HTML.connectedPeers.appendChild(peerElem)
@@ -263,8 +270,8 @@ const getOrInsertPeerById = (id) => {
const updateOverallStatusIcon = () => {
for (const peerElem of HTML.connectedPeers.children) {
if (
- !peerElem.children[1].classList.contains("synced") ||
- !peerElem.children[2].classList.contains("synced")
+ !peerElem.children[3].classList.contains("synced") ||
+ !peerElem.children[4].classList.contains("synced")
) {
HTML.overallStatusIcon.className = "synchronising"
HTML.overallStatusIconImage.src = "synchronising.svg"
--
GitLab