Merge pull request #41 from edumudu/feature/#40

#40 add player online count in menu

client/src/js/Modal.ts

@@ -1,7 +1,8 @@
 declare interface ModalNodes {
-  title : HTMLElement,
-  content : HTMLParagraphElement,
-  actions : HTMLDivElement,
+  title: HTMLElement,
+  content: HTMLParagraphElement,
+  actions: HTMLDivElement,
+  playersOnline: HTMLSpanElement,
 }
 
 class Modal {
@@ -17,17 +18,20 @@ class Modal {
     <div class="actions"></div>
   `;
 
-  public constructor(el : string | HTMLElement) {
+  public constructor(el: string | HTMLElement) {
     const overlay = document.createElement('div');
+    const playerOnlineCounter = document.createElement('span');
 
     el = document.querySelector(el as string) as HTMLElement;
 
+    playerOnlineCounter.classList.add('players-online');
     overlay.classList.add('modal-overlay');
 
     el.classList.add('modal');
     el.innerHTML = this.template;
     el.parentNode?.appendChild(overlay);
-    overlay.appendChild(el);    
+    overlay.appendChild(playerOnlineCounter);
+    overlay.appendChild(el);
 
     this.el = el;
     this.overlay = overlay;
@@ -58,6 +62,7 @@ class Modal {
       title: el.querySelector('.title') as HTMLElement,
       content: el.querySelector('.content') as HTMLParagraphElement,
       actions: el.querySelector('.actions') as HTMLDivElement,
+      playersOnline: this.overlay.querySelector('.players-online') as HTMLSpanElement,
     }
   }
 
@@ -95,6 +100,10 @@ class Modal {
   public setContent(html : string) : void {
     this.modalNodes.content.innerHTML = html;
   }
+
+  public updateUsersOnline(quantity: number): void {
+    this.modalNodes.playersOnline.textContent = `${quantity} ${quantity > 1 ? 'players' : 'player'} online :)`;
+  }
 }
 
 export default Modal;

client/src/js/main.ts

@@ -36,6 +36,10 @@ modal.setAction('<i class="fas fa-play"></i>', () => {
   game.destroy();
 }, '', 'New game');
 
+socket.on('update-online-players', (quantity: number) => {
+  menu.updateUsersOnline(quantity);
+});
+
 socket.on('start-game', (board : any, playerRoom : string) => {
   room = playerRoom;
   game = new Board(el, board, socket.id);

client/src/scss/modal.scss

@@ -33,6 +33,13 @@
       padding-top: 15px;
     }
   }
+
+  .players-online {
+    position: absolute;
+    top: 15px;
+    right: 25px;
+    font-size: 25px;
+  }
 }
 
 .btn {

server/app.ts

@@ -1,17 +1,21 @@
 import Express from 'express';
-import Http from 'http';
-import socket, { Packet } from 'socket.io';
-
-const app = new Http.Server(Express());
-const io = socket(app);
+import { createServer } from 'http';
+import socketio, { Packet } from 'socket.io';
 
 import cards from './src/data/cards';
 import Board from './src/Board';
 
-const games : Record<string, Board> = {};
+const app = createServer(Express());
+const io = socketio(app);
+let players: string[] = [];
+
+const games: Record<string, Board> = {};
 
 io.on('connection', socket => {
-  let userRoom : string;
+  let userRoom: string;
+
+  players.push(socket.id);
+  io.sockets.emit('update-online-players', players.length);
 
   socket.on('room', room => {
     const rooms = io.sockets.adapter.rooms;
@@ -78,10 +82,7 @@ io.on('connection', socket => {
     }
   });
 
-  socket.on('player-left', playerLeft);
-  socket.on('disconnect', playerLeft);
-
-  function playerLeft () {
+  const playerLeft = () => {
     socket.leaveAll();
     io.sockets.in(userRoom).emit('enemy-left');
     delete games[userRoom];
@@ -92,6 +93,14 @@ io.on('connection', socket => {
       clients.forEach(socketId => io.sockets.sockets[socketId].leave(userRoom));
     })
   }
+
+  socket.on('player-left', playerLeft);
+
+  socket.on('disconnect', () => {
+    playerLeft();
+    players = players.filter(id => id !== socket.id);
+    socket.broadcast.emit('update-online-players', players.length);
+  });
 });
 
 app.listen(process.env.PORT || 3000);