Mobile Resolution incompatible

eufelipemateus · Mar 12, 2021 · fbed694 · fbed694
1 parent cd439c9
commit fbed694
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 12 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "domino-game",
-	"version": "2.0.5",
+	"version": "2.0.6",
 	"description": "Domino is a game multiplayer made in node socket.io, typescript, node.js and html5.",
 	"main": "./._build/Server.js",
 	"engines": {
@@ -43,15 +43,14 @@
 		"geek",
 		"dom-html",
 		"dev-junior",
-        "runtime",
-        "DOM-Element",
+		"runtime",
+		"DOM-Element",
 		"brazil",
 		"gme",
 		"jogo-tabuleiro",
 		"fun",
-        "full-stack-developer",
-        "Dom"
-
+		"full-stack-developer",
+		"Dom"
 	],
 	"author": {
 		"name": "Felipe Mateus",

diff --git a/public/css/forkme.css b/public/css/forkme.css
diff --git a/public/css/ui.css b/public/css/ui.css
@@ -1,5 +1,5 @@
 body{
-	min-width:1024px !important;
+
 }
 .card{
     text-align:center;
@@ -146,4 +146,21 @@ body{
 	height:162px;
 	display:inline-block;
 	float:right;
+}
+
+#mobile_message{
+    background-color: #FFF;
+    height: 100%;
+    width: 100%;
+    left: 0;
+    top: 0;
+    overflow: hidden;
+    position: fixed;
+    display: none;
+    align-items: center;
+    justify-content: center;
+}
+
+#mobile_message h1{
+    font-size: 1.5em;
 }
diff --git a/public/index.html b/public/index.html
@@ -29,7 +29,7 @@
 
 <head>
 <body>
-	<div>
+	<div id="game">
 		<div id="tabuleiro">
             <!-- Cartas no Tabuleiro -->
 		</div>
@@ -65,6 +65,9 @@ <h1>Estastiticas</h1>
 			</div>
 		</div>
     </div>
+    <div id="mobile_message">
+        <h1>⚠️Resolução Incompatível!</h1>
+    </div>
     <span id="forkongithub"><a href="https://github.com/eufelipemateus/domino-game">Fork me on GitHub</a></span>
 </body>
 

diff --git a/public/js/App.ts b/public/js/App.ts
@@ -1,7 +1,7 @@
 import { Game } from './Game.js'
 
 declare global {
-    interface Window { game: Game; }
+    interface Window { game: Game; io: any }
 }
 
 window.game =  new Game(window.io);
diff --git a/public/js/Game.ts b/public/js/Game.ts
@@ -10,7 +10,7 @@ export class Game {
 
     constructor(io) {
         this.socket = io();
-        this.listen();
+        this.sizeScreen();
         this.modal = new Modal(this);
     }
 
@@ -173,4 +173,13 @@ export class Game {
             document.getElementById('cards_in_hand').innerHTML = msg.cardsInHand;
         });
     }
+
+    private  sizeScreen() {
+        if (window.screen.width >= 1024 && window.screen.height >= 768) {
+             this.listen();
+        }else{
+            document.getElementById("game").style.display = 'none';
+            document.getElementById('mobile_message').style.display = "flex";
+        }
+    } 
 }