diff --git a/client/src/js/Modal.ts b/client/src/js/Modal.ts index 35420d9..6241495 100644 --- a/client/src/js/Modal.ts +++ b/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 {
`; - 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; diff --git a/client/src/js/main.ts b/client/src/js/main.ts index 6a7d2d7..717f516 100644 --- a/client/src/js/main.ts +++ b/client/src/js/main.ts @@ -36,6 +36,10 @@ modal.setAction('', () => { 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); diff --git a/client/src/scss/modal.scss b/client/src/scss/modal.scss index f98c13b..97c95f2 100644 --- a/client/src/scss/modal.scss +++ b/client/src/scss/modal.scss @@ -33,6 +33,13 @@ padding-top: 15px; } } + + .players-online { + position: absolute; + top: 15px; + right: 25px; + font-size: 25px; + } } .btn { diff --git a/server/app.ts b/server/app.ts index e3e35d5..c61cbc3 100644 --- a/server/app.ts +++ b/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