Merge pull request #14 from edumudu/development

Development
edumudu · Jun 8, 2020 · 340ea5f · 340ea5f
2 parents d8cbc1a + a9740ad
commit 340ea5f
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 60 deletions.
diff --git a/client/public/index.html b/client/public/index.html
@@ -6,11 +6,11 @@
   <title>Animal memory game</title>
   <meta name="author" content="Eduardo Wesley" />
   <meta name="description" content="Animal memory game made with javascript, webpack and sass." />
+
+  <link rel="icon" type="image/x-icon" href="favicon.ico" />
 </head>
 <body>
-  <div id="game-info">
-    <h3 id="player-turn" href="#"></h3>
-  </div>
+  <div id="game-info"></div>
   <div id="board"></div>
   <div id="modal"></div>
   <div id="menu"></div>

diff --git a/client/src/js/Game/Board.js b/client/src/js/Game/Board.js
@@ -11,13 +11,17 @@ class Board {
     this.elapsedTime = elapsedTime;
     this.players = players;
     this.cards = cards.map(card => new Card(card));
+
     this.timer = document.createElement('div');
     this.timer.textContent = `Time ${this.elapsedTime}`;
+
+    this.playerTurnEl = document.createElement('div');
+    this.playerTurnEl.classList.add('player-turn');
+
     this.AudioController = new AudioController;
 
     this.timer.classList.add('timer');
-    document.querySelector('#game-info').prepend(this.timer);
-
+    document.querySelector('#game-info').append(this.timer, this.playerTurnEl);
 
     this.insertCardsInBoard();
     this.initScoreBoard();
@@ -66,6 +70,10 @@ class Board {
     })
   }
 
+  setPlayerTurn(playerOfTheTime) {
+    this.playerTurnEl.textContent = playerOfTheTime === this.me ? 'Your turn' : 'Enemy turn';
+  }
+
   stopTimers() {
     clearInterval(this.timerInterval);
   }
@@ -75,6 +83,7 @@ class Board {
     this.scoreboard.destroy();
     this.stopTimers();
     this.timer.remove();
+    this.playerTurnEl.remove();
   }
 }
 

diff --git a/client/src/js/Game/Scoreboard.js b/client/src/js/Game/Scoreboard.js
@@ -56,8 +56,7 @@ class Scoreboard {
     myHits.classList.add('hits', 'my-hits');
     enemyHits.classList.add('hits', 'enemy-hits');
 
-    scoreboard.appendChild(myHits);
-    scoreboard.appendChild(enemyHits);
+    scoreboard.append(myHits, enemyHits);
   }
 
   reset() {

diff --git a/client/src/js/Modal.js b/client/src/js/Modal.js
@@ -54,12 +54,12 @@ class Modal {
     }
   }
 
-  setAction(text, callback, classes = [], tooltip = '') {
+  setAction(text, callback, classes = '', tooltip = '') {
     const button = document.createElement('button');
 
-    classes = [...classes, 'btn'];
+    classes = classes ? `${classes} btn` : 'btn';
 
-    button.classList.add(...classes);
+    button.classList.add(...classes.split(' '));
     button.innerHTML = text;
     button.addEventListener('click', callback);
 
@@ -71,8 +71,12 @@ class Modal {
     this.#modalNodes.actions.appendChild(button);
   }
 
-  removeAction(id) {
-    this.#modalNodes.actions.children[id].remove();
+  disableAction(id) {
+    this.#modalNodes.actions.children[id].style.display = 'none';
+  }
+
+  enableAction(id) {
+    this.#modalNodes.actions.children[id].style.display = 'block';
   }
 
   setTitle(text) {

diff --git a/client/src/js/main.js b/client/src/js/main.js
@@ -7,63 +7,75 @@ import socket from './io';
 const el = document.querySelector('#board');
 const modal = new Modal('#modal');
 const menu = new Modal('#menu');
-const playerTurn = document.querySelector('#player-turn');
 
 let game;
 let room;
 
 menu.setAction('<i class="fas fa-play"></i>', () => {
   socket.emit('room');
   menu.setTitle('Waiting for other player')
-  menu.removeAction(0);
+  menu.disableAction(0);
 });
 menu.show();
 
-modal.setAction('<i class="fas fa-play"></i>', () => {
+modal.setAction('<i class="fas fa-undo-alt"></i>', () => {
   socket.emit('room', room);
   modal.hide();
   menu.show();
   game.destroy();
-  playerTurn.textContent = '';
-}, ['success'], 'Rematch');
+}, 'success', 'Rematch');
+
+modal.setAction('<i class="fas fa-play"></i>', () => {
+  socket.emit('player-left');
+  socket.emit('room');
+  modal.hide();
+  menu.show();
+  game.destroy();
+}, '', 'New game');
 
 socket.on('start-game', (board, playerRoom) => {
   room = playerRoom;
   game = new Board(el, board, socket.id);
+  game.setPlayerTurn(board.playerOfTheTime);
   menu.hide();
-  playerTurn.textContent = board.playerOfTheTime === game.me ? 'Your turn' : 'Enemy turn';
-})
-
-socket.on('check', ids => {
-  game.check(ids);
-})
 
-socket.on('flip', id => {
-  game.flip(id);
-});
-
-socket.on('unflip', ids => {
-  setTimeout(() => game.unflip(ids), 800)
-});
-
-socket.on('hits', scoreboard => {
-  game.setScoreboard(scoreboard);
-});
-
-socket.on('won', () => {
-  game.stopTimers();
-  modal.setTitle('You win!');
-  modal.show();
-  socket.emit('leave', room);
-});
-
-socket.on('lose', () => {
-  game.stopTimers();
-  modal.setTitle('You lose!');
-  modal.show();
-  socket.emit('leave', room);
-});
+  socket.on('enemy-left', () => {
+    game.destroy();
+    modal.hide();
+    menu.setTitle('Enemy left the room');
+    menu.enableAction(0);
+    menu.show();
+  })
 
-socket.on('toggle-player', player => {
-  playerTurn.textContent = player === game.me ? 'Your turn' : 'Enemy turn';
+  socket.on('check', ids => {
+    game.check(ids);
+  })
+
+  socket.on('flip', id => {
+    game.flip(id);
+  });
+
+  socket.on('unflip', ids => {
+    setTimeout(() => game.unflip(ids), 800)
+  });
+
+  socket.on('hits', scoreboard => {
+    game.setScoreboard(scoreboard);
+  });
+
+  socket.on('won', () => {
+    game.stopTimers();
+    modal.setTitle('You win!');
+    modal.show();
+  });
+
+  socket.on('lose', () => {
+    game.stopTimers();
+    modal.setTitle('You lose!');
+    modal.show();
+  });
+
+  socket.on('toggle-player', player => {
+    game.setPlayerTurn(player);
+  })
 })
diff --git a/client/src/scss/geral.scss b/client/src/scss/geral.scss
@@ -132,7 +132,7 @@ a {
   font-weight: bold;
 }
 
-#player-turn {
+.player-turn {
   font-size: 1.5rem;
   color: $info;
 }
diff --git a/server/app.js b/server/app.js
@@ -28,16 +28,19 @@ io.on('connection', socket => {
 
     const clientes = rooms[room];
 
-    if(clientes.length === 2) {
+    if(games[room]) {
+      games[room].rematchRequests++;
+
+      if (games[room].rematchRequests === 2) {
+        games[room] = new Board(cards, Object.keys(clientes.sockets));
+        io.sockets.in(room).emit('start-game', games[room], room);
+      }
+    } else if(clientes.length === 2) {
       games[room] = new Board(cards, Object.keys(clientes.sockets));
       io.sockets.in(room).emit('start-game', games[room], room);
     }
   });
 
-  socket.on('leave', room => {
-    socket.leave(room);
-  });
-
   socket.on('click', id => {
     const room = userRoom;
     const game = games[room];
@@ -57,8 +60,12 @@ io.on('connection', socket => {
         const winner = game.checkIfFinish();
 
         if(winner) {
-          const sockets = Object.values(io.in(room).connected);
-          sockets.map(sock => sock.id === winner ? sock.emit('won') : sock.emit('lose'));
+          io.in(room).clients((error, clients) => {
+            if(error) throw error;
+
+            clients.map(socketId => io.sockets.sockets[socketId])
+                   .forEach(sock => sock.id === winner ? sock.emit('won') : sock.emit('lose'));
+          });
         }
       } else {
         io.sockets.in(room).emit('unflip', activeCards.map(card => card.id));
@@ -68,9 +75,20 @@ io.on('connection', socket => {
     }
   });
 
-  socket.on('disconnect', () => {
+  socket.on('player-left', playerLeft);
+  socket.on('disconnect', playerLeft);
+
+  function playerLeft () {
     socket.leaveAll();
-  });
+    io.sockets.in(userRoom).emit('enemy-left');
+    delete games[userRoom];
+
+    io.in(userRoom).clients((error, clients) => {
+      if(error) throw error;
+
+      clients.forEach(socketId => io.sockets.sockets[socketId].leave(userRoom));
+    })
+  }
 });
 
 Http.listen(process.env.PORT || 3000);
diff --git a/server/src/Board.js b/server/src/Board.js
@@ -6,6 +6,7 @@ class Board {
     this.activesCards = [];
     this.matches = [];
     this.scoreboard = { total: 0 };
+    this.rematchRequests = 0;
 
     this.playerOfTheTime = players[Math.floor(Math.random() * 2)];
   }