Add onlineicon test

index.html

@@ -25,6 +25,16 @@
       height: 1.2em;
       border-radius: 0.6em;
     }
+    
+    .online {
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        margin: 0;
+    }
+    .name {
+        display: flex;
+    }
   </style>
 
 </head>
@@ -45,8 +55,11 @@
 
     <template>
       <tr class="row">
-        <td class="name"></td>
-        <td>
+        <td class="tdname">
+            <div class="name">
+            </div>
+        </td>
+        <td class="tdbar">
           <div class="bar"></div>
         </td>
         <td class="score">42069</td>
@@ -57,4 +70,4 @@
   <script src="static/js/main.js"></script>
 </body>
 
-</html>
+</html>

static/js/main.js

@@ -55,8 +55,15 @@ function render_scoreboard(data) {
         const color_index = ((user.uuid.hashCode() % COLORS.length) + COLORS.length) % COLORS.length;
         bar.style.backgroundColor = COLORS[color_index];
 
-        name.innerText = user.name;
         score.innerText = user.score;
+        
+        const onlineIcon = document.createElement("img");
+        onlineIcon.src = "static/coin.png";
+        onlineIcon.classList.add("online")
+        const nameSpan = document.createElement("span");
+        nameSpan.innerText = user.name;
+        name.appendChild(onlineIcon);
+        name.appendChild(nameSpan);
 
         tbody.appendChild(clone);
     }
@@ -79,4 +86,4 @@ async function update_scoreboard() {
 }
 
 update_scoreboard();
-// setInterval(update_scoreboard, 1000);
+// setInterval(update_scoreboard, 1000);