1 files changed, 51 insertions, 0 deletions
diff --git a/src/renderer/gameserver/onlineCount.ts b/src/renderer/gameserver/onlineCount.ts
new file mode 100644
index 0000000..af8a7b6
--- /dev/null
+++ b/src/renderer/gameserver/onlineCount.ts
@@ -0,0 +1,51 @@
+import GameServer from './server';
+
+const MAX_SHOWN_NAMES = 3;
+
+export function makeOnlineCounterList(server:GameServer):HTMLElement{
+
+  const playerList = [
+    'LawnCable',
+    'Saulc GM',
+    'Crazyfefe',
+    'Jesus Saves',
+    'DUSTMAN'
+  ];
+
+  return generateHTML(playerList);
+}
+
+
+function generateHTML(onlinePlayers:string[]):HTMLElement{
+  const OnlineCounterContainer = document.createElement('span');
+  OnlineCounterContainer.classList.add("onlineCounter");
+  OnlineCounterContainer.innerHTML = `<i class="fas fa-users fa-xs"></i>${onlinePlayers.length} Players online<br>`;
+
+  const PlayerList = document.createElement('span');
+  PlayerList.classList.add("playerList");
+
+  let displayed_players =
+   MAX_SHOWN_NAMES < onlinePlayers.length ?
+    onlinePlayers.slice(0, MAX_SHOWN_NAMES):onlinePlayers;
+
+    displayed_players.forEach(playername => {
+      const PlayerItem = document.createElement('span');
+      PlayerItem.classList.add("playerItem");
+      PlayerItem.innerHTML=`<i class="fas fa-circle fa-xs" data-fa-transform="shrink-8 left-2"></i>${playername}`;
+      PlayerList.appendChild(PlayerItem);
+    });
+
+
+  if(MAX_SHOWN_NAMES < onlinePlayers.length){
+    const hiddenPlayers = onlinePlayers.filter(playername => displayed_players.indexOf(playername) == -1);
+    const MorePlayers = document.createElement('span');
+    MorePlayers.classList.add("morePlayers");
+    MorePlayers.innerText = ` and ${onlinePlayers.length-MAX_SHOWN_NAMES} more..`;
+    MorePlayers.title = hiddenPlayers.join('\n');
+
+    PlayerList.appendChild(MorePlayers);
+  }
+
+  OnlineCounterContainer.appendChild(PlayerList);
+  return OnlineCounterContainer;
+}