Merge pull request #20 from edumudu/development

Development
edumudu · Jul 13, 2020 · b4b67e7 · b4b67e7
2 parents 9ed8d96 + ed26da3
commit b4b67e7
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 10 deletions.
diff --git a/client/package.json b/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"

diff --git a/client/src/assets/svgs/loader.svg b/client/src/assets/svgs/loader.svg
diff --git a/client/src/js/Modal.js b/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() {

diff --git a/client/src/js/main.js b/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 => {

diff --git a/client/src/scss/geral.scss b/client/src/scss/geral.scss
@@ -11,6 +11,9 @@ body {
   font-family: 'Nunito', sans-serif;
   color: #ebebeb;
   background-color: $bg-color;
+
+  display: grid;
+  grid-template-rows: $game_info_height auto;
 }
 
 a { 
@@ -25,6 +28,22 @@ a {
   justify-content: center;
   perspective: 1000px;
   padding: 30px 30px 0;
+  height: calc(100vh - #{$game_info_height});
+  overflow-y: auto;
+
+  // For mozila
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
+
+  &::-webkit-scrollbar {
+    background-color: transparent; 
+    width: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background-color: rgba(255, 255, 255, 0.5);
+  }
 }
 
 .card {

diff --git a/client/src/scss/modal.scss b/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;
     }
 

diff --git a/client/src/scss/scoreboard.scss b/client/src/scss/scoreboard.scss
@@ -1,8 +1,11 @@
 #game-info {
+  position: relative;
+  z-index: 1;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 30px 80px 0;
+  padding: 30px 80px 30px;
+  box-shadow: 0 0 4px #fff;
 
   #restart-button {
     display: none;

diff --git a/client/src/scss/variables.scss b/client/src/scss/variables.scss
@@ -3,4 +3,6 @@ $card-bg: #0b0b0b;
 $green: #1ddf16;
 $success: #00b894;
 $danger: #d63031;
-$info: #3498db;
+$info: #3498db;
+
+$game_info_height: 134px;
diff --git a/client/webpack.config.js b/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: {