diff --git a/client/package.json b/client/package.json index 1e26150..bdd82ad 100644 --- 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 new file mode 100644 index 0000000..bdc5315 --- /dev/null +++ b/client/src/assets/svgs/loader.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/client/src/js/Modal.js b/client/src/js/Modal.js index 2cd7d83..32827b1 100644 --- 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 index 4bfdb55..3bfee91 100644 --- 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,15 +14,17 @@ let room; menu.setAction('', () => { 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('', () => { socket.emit('room', room); modal.hide(); - menu.show(); + menu.show('black'); game.destroy(); }, 'success', 'Rematch'); @@ -29,7 +32,7 @@ modal.setAction('', () => { 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 index d70d1aa..cfeaf7a 100644 --- 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 index 49e6db0..f98c13b 100644 --- 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 index e3efcb2..3bc830a 100644 --- 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 index b9f109c..2392227 100644 --- 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; \ No newline at end of file +$info: #3498db; + +$game_info_height: 134px; diff --git a/client/webpack.config.js b/client/webpack.config.js index 867785f..84a9113 100644 --- 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: {