Add overall status indicator

public/index.html

@@ -43,6 +43,13 @@
             </ul>
           </div>
         </div>
+        <div id="overall-status-icon" class="synchronised">
+          <img
+            id="overall-status-icon-img"
+            src="synchronised.svg"
+            alt="Synchronisation status icon"
+          />
+        </div>
         <input
           id="room-id"
           type="text"

public/styles.css

@@ -172,6 +172,35 @@ button.selected {
   background-color: #4f4f4f;
 }
 
+#overall-status-icon {
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  padding: 4px;
+  margin-left: -18px;
+  margin-top: -4px;
+  z-index: 0;
+}
+
+@keyframes overall-status-synchronising {
+  to {
+    transform: rotate(-360deg);
+  }
+}
+
+#overall-status-icon.synchronising {
+  background-color: orange;
+  animation: overall-status-synchronising 2s linear infinite;
+}
+
+#overall-status-icon.synchronised {
+  background-color: green;
+}
+
+#overall-status-icon-img {
+  height: inherit;
+}
+
 #room-id {
   flex: 1;
   padding: 10px;

public/synchronised.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path stroke="white" fill="white" d="M23 12c0 1.042-.154 2.045-.425 3h-2.101c.335-.94.526-1.947.526-3 0-4.962-4.037-9-9-9-1.706 0-3.296.484-4.654 1.314l1.857 2.686h-6.994l2.152-7 1.85 2.673c1.683-1.049 3.658-1.673 5.789-1.673 6.074 0 11 4.925 11 11zm-6.354 7.692c-1.357.826-2.944 1.308-4.646 1.308-4.963 0-9-4.038-9-9 0-1.053.191-2.06.525-3h-2.1c-.271.955-.425 1.958-.425 3 0 6.075 4.925 11 11 11 2.127 0 4.099-.621 5.78-1.667l1.853 2.667 2.152-6.989h-6.994l1.855 2.681zm.354-10.283l-1.421-1.409-5.105 5.183-2.078-2.183-1.396 1.435 3.5 3.565 6.5-6.591z"/></svg>

public/synchronising.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="white" stroke="white" d="M18.312 5.595l1.296-1.527c.727.698 1.354 1.495 1.869 2.369l-1.776.931c-.39-.648-.853-1.246-1.389-1.773zm3.844 2.179l-1.787.937c.255.647.435 1.33.533 2.039h2.021c-.117-1.043-.378-2.042-.767-2.976zm-14.81-3.46c1.358-.83 2.948-1.314 4.654-1.314 1.919 0 3.695.608 5.157 1.636l1.298-1.529c-1.814-1.319-4.04-2.107-6.455-2.107-2.131 0-4.106.624-5.789 1.673l-1.85-2.673-2.152 7h6.994l-1.857-2.686zm13.642 7.936c-.027.962-.206 1.885-.514 2.75h2.101c.249-.878.401-1.798.425-2.75h-2.012zm-15.3 6.155l-1.295 1.527c-.727-.698-1.355-1.495-1.869-2.369l1.775-.931c.39.648.853 1.246 1.389 1.773zm-3.844-2.179l1.787-.937c-.254-.647-.434-1.33-.533-2.039h-2.022c.119 1.043.379 2.042.768 2.976zm14.81 3.46c-1.357.83-2.947 1.314-4.654 1.314-1.918 0-3.695-.608-5.156-1.636l-1.299 1.529c1.814 1.319 4.041 2.107 6.455 2.107 2.131 0 4.107-.624 5.789-1.673l1.85 2.673 2.152-7h-6.994l1.857 2.686zm-13.642-7.936c.027-.962.207-1.885.513-2.75h-2.1c-.249.878-.402 1.798-.425 2.75h2.012z"/></svg>

src/app.js

@@ -27,6 +27,7 @@ const onRoomConnect = (room_) => {
     }
 
     insertHTMLPeerElement(id)
+    updateOverallStatusIcon()
   })
 
   room.addEventListener("userLeave", ({ detail: id }) => {
@@ -39,14 +40,17 @@ const onRoomConnect = (room_) => {
 
   room.addEventListener("weSyncedWithPeer", ({ detail: id }) => {
     getPeerById(id).children[1].className = "peer-status synced"
+    updateOverallStatusIcon()
   })
 
   room.addEventListener("waitingForSyncStep", ({ detail: id }) => {
     getPeerById(id).children[2].className = "peer-status negotiating"
+    updateOverallStatusIcon()
   })
 
   room.addEventListener("peerSyncedWithUs", ({ detail: id }) => {
     getPeerById(id).children[2].className = "peer-status synced"
+    updateOverallStatusIcon()
   })
 
   room.addEventListener("addOrUpdatePath", ({ detail: { id, points } }) => {
@@ -184,6 +188,21 @@ const getPeerById = (id) => {
   }
 }
 
+const updateOverallStatusIcon = () => {
+  for (const peerElem of HTML.connectedPeers.children) {
+    if (
+      !peerElem.children[1].classList.contains("synced") ||
+      !peerElem.children[2].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]),

src/elements.js

@@ -4,6 +4,11 @@ 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")