Online Count Visuals

2 files changed, 61 insertions, 1 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;
+}
diff --git a/src/renderer/gameserver/server.ts b/src/renderer/gameserver/server.ts
index 91944b1..235b8be 100644
--- a/src/renderer/gameserver/server.ts
+++ b/src/renderer/gameserver/server.ts
@@ -1,7 +1,8 @@
 import GameServerProfile from './profile';
 import { shell, ipcRenderer } from 'electron';
-import { switchPage } from '../CustomEvents';
+import { switchPage } from '../customEvents';
 import { News, NewsType } from './news';
+import { makeOnlineCounterList } from './onlineCount';
 
 
 export default class GameServer {
@@ -21,7 +22,11 @@ export default class GameServer {
   getMenuEntry():HTMLElement{
     const sidebarItem = document.createElement('div');
     sidebarItem.classList.add("sidebarItem");
+    //Online counter
+    const OnlineCounterContainer = document.createElement('div');
 
+    OnlineCounterContainer.appendChild(makeOnlineCounterList(this));
+    sidebarItem.appendChild(OnlineCounterContainer);
     //Title
     const title = document.createElement('div');
     title.classList.add("title");
@@ -32,14 +37,18 @@ export default class GameServer {
     const titleText = document.createElement('div');
     titleText.innerText = this.menuName;
 
+
+
     title.appendChild(titleIMG);
     title.appendChild(titleText);
 
+
     title.addEventListener('click', ()=>{
       switchPage("SERVER",this.name);
     });
 
     sidebarItem.appendChild(title);
+
     //Collapsable
     const container = document.createElement('div');
     container.classList.add("colapse");