Merge pull request #19 from edumudu/feature/#18

#18 put loading svg

client/package.json

@@ -27,6 +27,7 @@
     "html-webpack-plugin": "^3.2.0",
     "socket.io-client": "^2.3.0",
     "style-loader": "^0.23.1",
+    "svg-inline-loader": "^0.8.2",
     "webpack": "^4.29.3",
     "webpack-cli": "^3.2.3",
     "webpack-dev-server": "^3.1.14"

client/src/js/Modal.js

@@ -30,9 +30,10 @@ class Modal {
     this.hide();
   }
 
-  show() {
+  show(bg = 'rgba(0,0,0,0.7)') {
     this.#visible = true;
     this.#overlay.style.display = 'flex';
+    this.#overlay.style.backgroundColor = bg
   }
 
   hide() {

client/src/js/main.js

@@ -1,4 +1,5 @@
 import '../scss/app.scss';
+import loaderSvg from '../assets/svgs/loader.svg';
 import '@fortawesome/fontawesome-free/js/all';
 import Board from './Game/Board';
 import Modal from './Modal';
@@ -13,23 +14,25 @@ let room;
 
 menu.setAction('<i class="fas fa-play"></i>', () => {
   socket.emit('room');
-  menu.setTitle('Waiting for other player')
+  menu.setTitle('Waiting for other player');
+  menu.setContent(loaderSvg);
   menu.disableAction(0);
 });
-menu.show();
+
+menu.show('black');
 
 modal.setAction('<i class="fas fa-undo-alt"></i>', () => {
   socket.emit('room', room);
   modal.hide();
-  menu.show();
+  menu.show('black');
   game.destroy();
 }, 'success', 'Rematch');
 
 modal.setAction('<i class="fas fa-play"></i>', () => {
   socket.emit('player-left');
   socket.emit('room');
   modal.hide();
-  menu.show();
+  menu.show('black');
   game.destroy();
 }, '', 'New game');
 
@@ -38,13 +41,14 @@ socket.on('start-game', (board, playerRoom) => {
   game = new Board(el, board, socket.id);
   game.setPlayerTurn(board.playerOfTheTime);
   menu.hide();
+  menu.setContent('');
 
   socket.on('enemy-left', () => {
     game.destroy();
     modal.hide();
     menu.setTitle('Enemy left the room');
     menu.enableAction(0);
-    menu.show();
+    menu.show('black');
   })
 
   socket.on('check', ids => {

client/src/scss/modal.scss

@@ -8,7 +8,6 @@
   align-items: center;
   width: 100%;
   height: 100%;
-  background-color: rgba(0,0,0,0.7);
 
   .modal {
     padding: 20px 30px;
@@ -18,7 +17,7 @@
 
     .title {
       color: #fff;
-      font-size: 4rem;
+      font-size: clamp(2rem, 10vw, 4rem);
       text-align: center;
     }
 

client/webpack.config.js

@@ -34,6 +34,11 @@ module.exports = {
               test: /\.(wav|mp3)$/,
               use: ['file-loader'] 
             },
+            {
+              exclude: /node_modules/,
+              test: /\.svg$/,
+              loader: 'svg-inline-loader'
+            }
         ]
     },
     output: {