Merge from upstream

cledorze · Jun 1, 2015 · 9322df7 · 9322df7
2 parents 3fa91f5 + be6fe99
commit 9322df7
Show file tree

Hide file tree

Showing 9 changed files with 450 additions and 354 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,4 @@ node_modules
 npm-debug.log
 .idea
 client/bower_components
+bin
diff --git a/.jshintignore b/.jshintignore
@@ -1,2 +1,3 @@
 client/bower_components
 node_modules
+bin
diff --git a/README.md b/README.md
@@ -4,6 +4,7 @@ Agar.io Clone
 [![GitHub Stars](https://img.shields.io/github/stars/huytd/agar.io-clone.svg)](https://github.com/huytd/agar.io-clone/stargazers)
 [![GitHub Issues](https://img.shields.io/github/issues/huytd/agar.io-clone.svg)](https://github.com/huytd/agar.io-clone/issues)
 [![GitHub Wiki](https://img.shields.io/badge/project-wiki-ff69b4.svg)](https://github.com/huytd/agar.io-clone/wiki/Home)
+![Build Status](https://api.travis-ci.org/huytd/agar.io-clone.svg)
 [![Live Demo](https://img.shields.io/badge/demo-online-green.svg)](#live-demo) "
 [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/huytd/agar.io-clone?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 

diff --git a/client/css/main.css b/client/css/main.css
@@ -1,128 +1,150 @@
 * {
-    font-family: sans-serif;
-    font-size: 14px;
+	font-family: sans-serif;
+	font-size: 14px;
 }
 
 html, body {
-    margin: 0; padding: 0;
-    width: 100%; height: 100%;
-    background-color: #222;
+	margin: 0; padding: 0;
+	width: 100%; height: 100%;
+	background-color: #222;
 }
 
 canvas {
-    width: 100%; height: 100%;
-    margin: 0; padding: 0;
+	width: 100%; height: 100%;
+	margin: 0; padding: 0;
 }
 
 #status {
-    position: absolute;
-    padding: 10px; background: rgba(0, 0, 0, 0.7);
-    color: #FFF; font-size: 20px;
-    top: 0; right: 0;
-    text-align: right;
+	position: absolute;
+	padding: 10px; background: rgba(0, 0, 0, 0.7);
+	color: #FFF; font-size: 20px;
+	top: 0; right: 0;
+	text-align: right;
 }
 
 .chatbox {
-    position: absolute;
-    width: 300px; height: 160px;
-    background: rgba(255, 255, 255, 0.7);
-    bottom: 5px; left: 5px;
-    border-radius: 5px;
-    pointer-events: none;
+	position: absolute;
+	width: 300px; height: 160px;
+	background: rgba(255, 255, 255, 0.7);
+	bottom: 5px; left: 5px;
+	border-radius: 5px;
+	pointer-events: none;
 }
 
 .chatbox .chat-list {
-    padding: 5px; margin: 0;
-    list-style: none;
-    box-sizing: border-box;
-    height: 125px; overflow: hidden;
+	padding: 5px; margin: 0;
+	list-style: none;
+	box-sizing: border-box;
+	height: 125px; overflow: hidden;
 }
 
 .chatbox .chat-list li {
-    padding: 2px; margin: 3px;
+	padding: 2px; margin: 3px;
 }
 
 .chatbox .chat-list li.me b {
-    color: #ea6153;
+	color: #ea6153;
 }
 
 .chatbox .chat-list li.friend b {
-    color: #2ecc71;
+	color: #2ecc71;
 }
 
 .chatbox .chat-list li.system {
-    color: #9b59b6;
-    font-style: italic;
+	color: #9b59b6;
+	font-style: italic;
 }
 
 .chatbox .chat-list li.system:before {
-    content: "» ";
+	content: "» ";
 }
 
 .chatbox .chat-input {
-    pointer-events: all;
-    box-sizing:border-box;
-    width:100%;
-    padding:8px;
-    background: transparent;
-    border: none;
-    border-top: 1px solid #DDD;
-    outline: none;
+	pointer-events: all;
+	box-sizing:border-box;
+	width:100%;
+	padding:8px;
+	background: transparent;
+	border: none;
+	border-top: 1px solid #DDD;
+	outline: none;
 }
 
 #startMenu {
-    margin:auto;
-    margin-top:100px;
-    width: 300px;
-    height: 400px;
-    border-radius: 5px;
-    background-color: white;
+	margin:auto;
+	margin-top:100px;
+	width: 350px;
+	padding: 20px;
+	border-radius: 5px 5px 5px 5px;
+	-moz-border-radius: 5px 5px 5px 5px;
+	-webkit-border-radius: 5px 5px 5px 5px;
+	background-color: white;
+	box-sizing: border-box;
 }
 
 #startMenu p {
-    padding-top:20px;
-    text-align:center;
-    font-size: x-large;
+	padding: 0;
+	text-align:center;
+	font-size: x-large;
+	font-weight: bold;
 }
 
 #playerNameInput {
-    margin-left: 50px;
-    width: 184px;
-    text-align: center;
-    padding: 7px;
-    border: solid 1px #dcdcdc;
-    transition: box-shadow 0.3s, border 0.3s;
+	width: 100%;
+	text-align: center;
+	padding: 10px;
+	border: solid 1px #dcdcdc;
+	transition: box-shadow 0.3s, border 0.3s;
+	box-sizing: border-box;
+	border-radius: 5px 5px 5px 5px;
+	-moz-border-radius: 5px 5px 5px 5px;
+	-webkit-border-radius: 5px 5px 5px 5px;
+	margin-bottom: 10px;
+	outline: none;
 }
 
 #playerNameInput:focus, #playerNameInput.focus {
-  border: solid 1px #707070;
-  box-shadow: 0 0 5px 1px #969696;
+	border: solid 1px #CCCCCC;
+	box-shadow: 0 0 3px 1px #DDDDDD;
 }
 
 #startButton {
-  position: relative;
-  margin: auto;
-  margin-left: 50px;
-  margin-top: 10px;
-  width: 200px;
-  height: 60px;
-  padding: 0;
-  font-size: large;
-  color: white;
-  text-align: center;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
-  background: #2ecc71;
-  border: 0;
-  border-bottom: 2px solid #28be68;
-  cursor: pointer;
-  -webkit-box-shadow: inset 0 -2px #28be68;
-  box-shadow: inset 0 -2px #28be68;
+	position: relative;
+	margin: auto;
+	margin-top: 10px;
+	width: 100%;
+	height: 40px;
+	box-sizing: border-box;
+	font-size: large;
+	color: white;
+	text-align: center;
+	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+	background: #2ecc71;
+	border: 0;
+	border-bottom: 2px solid #28be68;
+	cursor: pointer;
+	-webkit-box-shadow: inset 0 -2px #28be68;
+	box-shadow: inset 0 -2px #28be68;
+	border-radius: 5px 5px 5px 5px;
+	-moz-border-radius: 5px 5px 5px 5px;
+	-webkit-border-radius: 5px 5px 5px 5px;
+	margin-bottom: 10px;
 }
 
 #startButton:active, #startButton:hover {
-  top: 1px;
-  background: #55D88B;
-  outline: none;
-  -webkit-box-shadow: none;
-  box-shadow: none;
+	top: 1px;
+	background: #55D88B;
+	outline: none;
+	-webkit-box-shadow: none;
+	box-shadow: none;
 }
+
+#startMenu h3 {
+	padding-bottom: 0;
+	margin-bottom: 0;
+}
+
+#startMenu ul {
+	margin: 10px; padding: 10px;
+	margin-top: 0;
+}
diff --git a/client/index.html b/client/index.html
@@ -17,10 +17,18 @@
     </div>
     <div id="startMenuWrapper">
         <div id="startMenu">
-            <p> Agar.io-clone </p>
-            <input type="text" placeholder="Nick" id="playerNameInput" />
+            <p>Open Agar</p>
+            <input type="text" tabindex="0" autofocus placeholder="Enter your name here" id="playerNameInput" />
             <br />
             <button id="startButton">Play</button>
+            <br/>
+            <h3>Gameplay</h3>
+            <ul>
+                <li>Move your mouse on the screen to move your character</li>
+                <li>Eat food and other players in order to grow your character (food respawns every time a player eats it)</li>
+                <li>A player's mass is the number of food particles eaten</li>
+                <li>Objective: Try to get fat and eat other players</li>
+            </ul>
         </div>
     </div>
     <script src="/socket.io/socket.io.js"></script>
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,3 +2,4 @@ node_modules @@
     npm-debug.log
     .idea
     client/bower_components
+    bin