summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--assets/index.css32
-rw-r--r--src/renderer/gameserver/onlineCount.ts51
-rw-r--r--src/renderer/gameserver/server.ts11
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");