src/renderer/gameserver/onlineCount.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
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;
}