Remove chat on mobile, disable page scaling, add touchstart event

gaguileal · Jul 16, 2015 · 7c762db · 7c762db
1 parent 1d907a6
commit 7c762db
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/src/client/index.html b/src/client/index.html
@@ -3,12 +3,13 @@
 <head>
     <meta charset="UTF-8">
     <title>Agar.IO Clone</title>
+    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no">
     <link rel="stylesheet" href="css/main.css" />
 </head>
 <body>
     <div id="gameAreaWrapper">
         <div id="status">Players: 0</div>
-        <div class="chatbox">
+        <div class="chatbox" id="chatbox">
             <ul id="chatList" class="chat-list"></ul>
             <input id="chatInput" type="text" class="chat-input" placeholder="Chat here..." />
         </div>

diff --git a/src/client/js/app.js b/src/client/js/app.js
@@ -9,13 +9,18 @@ var borderDraw = false;
 var animLoopHandle;
 var spin = -Math.PI;
 var enemySpin = -Math.PI;
+var mobile = false;
 
 var debug = function(args) {
     if (console && console.log) {
         console.log(args);
     }
 };
 
+if ( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
+    mobile = true;
+}
+
 function startGame() {
     playerName = playerNameInput.value.replace(/(<([^>]+)>)/ig, '');
     document.getElementById('startMenuWrapper').style.maxHeight = '0px';
@@ -135,10 +140,11 @@ var leaderboard = [];
 var target = {x: player.x, y: player.y};
 
 var c = document.getElementById('cvs');
-c.addEventListener('mousemove', gameInput, false);
 c.width = screenWidth; c.height = screenHeight;
+c.addEventListener('mousemove', gameInput, false);
 c.addEventListener('mouseout', outOfBounds, false);
 
+c.addEventListener('touchstart', touchInput, false);
 c.addEventListener('touchmove', touchInput, false);
 
 // register when the mouse goes off the canvas
@@ -167,6 +173,9 @@ function ChatClient(config) {
 
 /** template into chat box a new message from a player */
 ChatClient.prototype.addChatLine = function (name, message) {
+    if (mobile) {
+        return;
+    }
     var newline = document.createElement('li');
 
     // color the chat input appropriately
@@ -179,6 +188,9 @@ ChatClient.prototype.addChatLine = function (name, message) {
 
 /** template into chat box a new message from the application */
 ChatClient.prototype.addSystemLine = function (message) {
+    if (mobile) {
+        return;
+    }
     var newline = document.createElement('li');
 
     // message will appear in system color
@@ -191,6 +203,9 @@ ChatClient.prototype.addSystemLine = function (message) {
 
 /** templates the message DOM node into the messsage area */
 ChatClient.prototype.appendMessage = function (node) {
+    if (mobile) {
+        return;
+    }
     var chatList = document.getElementById('chatList');
     if (chatList.childNodes.length > 10) {
         chatList.removeChild(chatList.childNodes[0]);
@@ -368,7 +383,12 @@ function setupSocket(socket) {
         debug('Game is started: ' + gameStart);
         chat.addSystemLine('Connected to the game!');
         chat.addSystemLine('Type <b>-help</b> for a list of commands');
-        document.getElementById('chatInput').select();
+        if (mobile) {
+            document.getElementById('gameAreaWrapper').removeChild(document.getElementById('chatbox'));
+        }
+        else {
+            document.getElementById('chatInput').select();
+        }
     });
 
     socket.on('gameSetup', function(data) {