Merge pull request #2 from dfault-user/master

Add indication of active or pending turn

dist/style.css

@@ -19,6 +19,7 @@
     display: block;
     margin-bottom: 10px;
 }
+
 #vmlist > div.row > div {
     padding-bottom: 10px;
 }
@@ -26,9 +27,11 @@
     cursor: pointer;
     border-color: rgb(8, 121, 250);
 }
+
 .vmtile > img {
     margin-bottom: 2px;
-}*/
+}
+
 .chat-table, .username-table {
     overflow-y: auto;
     border: 1px solid #575757;
@@ -36,6 +39,7 @@
 .chat-table {
     height: 30vh;
 }
+
 .username-table {
     max-height: 30vh;
 }
@@ -43,9 +47,22 @@
     position: sticky;
     top: 0;
 }
+
 #turnstatus {
     text-align: center;
 }
 #voteResetPanel {
     text-align: center;
 }
+
+.focused {
+    box-shadow: 0 0 9px 0 rgba(45,213,255,.75);
+    -moz-box-shadow: 0 0 9px 0 rgba(45,213,255,.75);
+    -webkit-box-shadow: 0 0 9px 0 rgba(45,213,255,.75)
+}
+
+.waiting {
+    box-shadow: 0 0 9px 0 rgba(242,255,63,.75);
+    -moz-box-shadow: 0 0 9px 0 rgba(242,255,63,.75);
+    -webkit-box-shadow: 0 0 9px 0 rgba(242,255,63,.75)
+}

src/index.js

@@ -189,6 +189,7 @@ class CollabVMClient {
                 buttons.takeTurn.innerText = "Take Turn";
                 turn = -1;
                 turnstatus.innerText = "";
+				display.className = "";
                 // Get the number of users queued for a turn
                 var queuedUsers = Number(msgArr[2]);
                 if (queuedUsers === 0) return;
@@ -200,6 +201,7 @@ class CollabVMClient {
                 if (currentTurnUsername === window.username) {
                     turn = 0;
                     turnstatus.innerText = "You have the turn.";
+					display.className = "focused";
 					}
                 // Highlight all waiting users and set their status
                 if (queuedUsers > 1) {
@@ -207,6 +209,7 @@ class CollabVMClient {
                         if (window.username === msgArr[i+3]) {
                             turn = i;
                             turnstatus.innerText = "Waiting for turn";
+							display.className = "waiting";
                         };
                         var user = users.find(u => u.username === msgArr[i+3]);
                         user.turn = i;