Merge pull request #12 from edumudu/development

Development

client/package.json

@@ -21,6 +21,7 @@
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/preset-env": "^7.3.1",
     "@fortawesome/fontawesome-free": "^5.13.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "babel-loader": "^8.0.5",
     "css-loader": "^2.1.0",
     "html-webpack-plugin": "^3.2.0",

client/src/js/Game/Card.js

@@ -1,3 +1,4 @@
+import { icon } from '@fortawesome/fontawesome-svg-core'
 import AudioController from './AudioController';
 import socket from './../io';
 
@@ -7,14 +8,16 @@ class Card {
   #el;
   #icon;
 
-  constructor({id, order, icon}) {
+  constructor({ id, order, icon: iconNames }) {
     this.#el = document.createElement('div');
     this.#id = id;
-    this.#icon = icon || '';
     this.order = order;
-
     this.AudioController = new AudioController();
 
+    const [prefix, iconName] = iconNames.split(' ');
+    this.#icon = icon({ prefix, iconName }).node[0];
+    this.#icon.classList.add('main-icon');
+
     this.effect = document.createElement('span');
     this.effect.innerHTML = '<i class="fas fa-plus"></i>';
     this.effect.classList.add('match-effect');
@@ -55,6 +58,8 @@ class Card {
   }
 
   flip () {
+    clearTimeout(this.flipTimeout);
+    this.#el.querySelector('.face.front').appendChild(this.#icon);
     this.AudioController.flip();
     this.#fliped = true;
     this.#el.classList.add('active');
@@ -64,6 +69,7 @@ class Card {
     this.#fliped = false;
     this.#el.classList.remove('active');
     this.#el.classList.remove('matched');
+    this.flipTimeout = setTimeout(() => this.#icon.remove(), 800);
   }
 
   markAsMatched () {
@@ -81,7 +87,6 @@ class Card {
 
     this.#el.innerHTML = `
       <div class="face front">
-        <i class="${this.#icon} main-icon"></i>
         <i class="fab fa-mixcloud nimbus"></i>
       </div>
 

server/app.js

@@ -29,7 +29,7 @@ io.on('connection', socket => {
     const clientes = rooms[room];
 
     if(clientes.length === 2) {
-      games[room] = new Board(cards.slice(), Object.keys(clientes.sockets));
+      games[room] = new Board(cards, Object.keys(clientes.sockets));
       io.sockets.in(room).emit('start-game', games[room], room);
     }
   });

server/src/Board.js

@@ -1,7 +1,7 @@
 class Board {
   constructor (cards, players) {
     this.elapsedTime = 0;
-    this.cards = this.shuffle(cards);
+    this.cards = this.shuffle([...cards, ...cards].map(card => ({ ...card })));
     this.players = players;
     this.activesCards = [];
     this.matches = [];
@@ -13,7 +13,6 @@ class Board {
   shuffle (cards) {
     return cards.map(card => {
       const randomNumber = Math.floor(Math.random() * cards.length);
-      card = { ...card };
       card.order = randomNumber;
       card.id = `_${Math.random().toString(36).substr(2, 9)}`;
 

server/src/data/cards.js

@@ -1,26 +1,15 @@
 // Simulate a API request
 
 module.exports = [
-  { icon: 'fas fa-spider' },
-  { icon: 'fas fa-otter' },
-  { icon: 'fas fa-hippo' },
-  { icon: 'fas fa-dog' },
-  { icon: 'fas fa-frog' },
-  { icon: 'fas fa-horse' },
-  { icon: 'fas fa-fish' },
-  { icon: 'fas fa-dragon' },
-  { icon: 'fas fa-dove' },
-  { icon: 'fas fa-cat' },
-  { icon: 'fas fa-spider' },
-  { icon: 'fas fa-otter' },
-  { icon: 'fas fa-hippo' },
-  { icon: 'fas fa-dog' },
-  { icon: 'fas fa-frog' },
-  { icon: 'fas fa-horse' },
-  { icon: 'fas fa-fish' },
-  { icon: 'fas fa-dragon' },
-  { icon: 'fas fa-dove' },
-  { icon: 'fas fa-cat' },
-  { icon: 'fas fa-crow' },
-  { icon: 'fas fa-crow' },
+  { icon: 'fas spider' },
+  { icon: 'fas otter' },
+  { icon: 'fas hippo' },
+  { icon: 'fas dog' },
+  { icon: 'fas frog' },
+  { icon: 'fas horse' },
+  { icon: 'fas fish' },
+  { icon: 'fas dragon' },
+  { icon: 'fas dove' },
+  { icon: 'fas cat' },
+  { icon: 'fas crow' },
 ]