Online Count Visuals

3 files changed, 93 insertions, 1 deletions

diff --git a/assets/index.css b/assets/index.css
index 07ef7e5..ce41722 100644
--- a/assets/index.css
+++ b/assets/index.css
@@ -157,6 +157,38 @@ html, body {
 .sidebarItem.selected > .title > div {
   background: linear-gradient(to right,rgba(0,0,0,0),hsla(215, 15%, 28%, 1) 25pt);
 }
+.onlineCounter {
+  font-family: SourceSansPro;
+  position: absolute;
+  margin-top: 5.25pt;
+  padding: 2pt 4pt;
+  right: 130pt;
+  z-index: 30;
+  background-color: rgba(0,0,0,0.7);
+  border-radius: 2pt;
+  color:white;
+  cursor:default;
+}
+
+.onlineCounter > .playerList {
+  font-size: 11pt;
+}
+.onlineCounter > .playerList > .playerItem {
+  display: block;
+}
+.onlineCounter > .playerList > .playerItem > svg {
+  color:lightgrey;
+  margin-right: 0;
+}
+.onlineCounter > .playerList > .morePlayers {
+  font-size: 10pt;
+  cursor: help;
+}
+
+.onlineCounter > svg {
+  color:lime;
+  margin-right: 3pt;
+}
 
 .sidebarItem.selected > .title {
   cursor: default;
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");