Add avatar to user id

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;
+}

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"