Settings

client.js

@@ -64,7 +64,7 @@ $(document).keydown(function(e) {
 		default: return; //Exit handler for other keys
 	}
 	client.changeHeading(newHeading);
-	e.preventDefault();
+	//e.preventDefault();
 });
 
 $(document).on("touchmove", function(e) {
@@ -89,6 +89,11 @@ $(document).on("touchstart", function (e1) {
 });
 
 $(".menu").on("click", function() {
+	client.disconnect();
 	$("#main-ui, #wasted").fadeOut(1000);
 	$("#begin").fadeIn(1000);
 });
+
+$(".toggle").on("click", function() {
+	$("#settings").slideToggle();
+});

public/css/styles.css

@@ -105,7 +105,7 @@ button:active {
 button:disabled {
 	cursor: not-allowed;
 }
-#name {
+#name, #settings {
 	background: #ededd1;
 	border-bottom: 6px solid #a1a18d;
 }
@@ -157,6 +157,9 @@ span {
 	bottom: 5px;
 }
 #settings {
-	display: none;
-	
+	display: grid;
+	padding: 20px;
+}
+#settings > * {
+	margin-top: 10px;
 }

public/index.html

@@ -49,13 +49,15 @@
 	</div>
 </div>
 <button class="toggle yellow"><i class="fa fa-cogs"></i></button>
-<div id="settings">
+<div id="settings" class="center" style="display: none;">
 	<button class="menu yellow">Main Menu</button>
+	<button class="yellow" onclick="JavaScript:alert('Want to play a game?\nUse arrows or WSAD to control your paper block\nDon\'t hit the walls\nBite enemy tails but don\'t let them bite yours!\nCompete against other players')">Hou To Play</button>
+	<button class="yellow" onclick="JavaScript:alert('Paper.io play online\nMore! More! More territory! Take it all with new amazing game - Paper.io\nThis game concept is linked to old Xonix, which appeared in 1984. Like in any other IO game there are you and enemies willing to outwit you. But you\'ll prevail of course :) Take their terriory and destroy your enemies, but be careful, your tail is your weak point.\nThis game is very cool and has nice paper-like graphics and fluid animation. Enjoy!\nYou can play paper.io online and offline both on a mobile device and a desktop computer. Get paper.io and join the world gaming community. Manage a small board and win territory from your rivals.\nPaper.io 2 - behold the sequel to the popular game. Capture new territories and become the king of the map!\nThe more space you win the higher ranking and scores you get. You have to act and think quickly. Develop your own strategy and action plan.\nPaperio has simple rules but is very addictive in its simplicity. The competitors are also on guard. Watch out for your tail.\nThe game is very addictive and makes gamers from all over the world connect from home, from work, from campus or even the office!\nJoin the game, figure out your strategy and become the ultimate winner. Have fun!')">About</button>
+	<audio loop="loop" preload="auto" controls>
+		<source src="music/gwent.mp3" type="audio/mp3"/>
+		<source src="music/gwent.ogg" type="audio/ogg"/>
+	</audio>
 </div>
-<audio loop="loop" preload="auto" autoplay>
-	<source src="music/gwent.mp3" type="audio/mp3"/>
-	<source src="music/gwent.ogg" type="audio/ogg"/>
-</audio>
 <script src="bundle.js"></script>
 </body>
 </html>

src/game-client.js

@@ -87,9 +87,9 @@ function connectGame(url, name, callback, flag) {
 		socket.disconnect(); //In case we didn"t get the disconnect call
 	});
 	socket.on("disconnect", function() {
-		if (!user) return;
 		console.info("Server has disconnected. Creating new game.");
 		socket.disconnect();
+		if (!user) return;
 		user.die();
 		dirty = true;
 		paintLoop();
@@ -130,6 +130,10 @@ function getUser() {
 	return user;
 }
 
+function getPlayers() {
+	return players.slice();
+}
+
 function getOthers() {
 	var ret = [];
 	for (var p of players) {
@@ -138,9 +142,11 @@ function getOthers() {
 	return ret;
 }
 
-function getPlayers() {
-	return players.slice();
+function disconnect() {
+	socket.disconnect();
+	running = false;
 }
+
 //Private API
 function addPlayer(player) {
 	if (allPlayers[player.num]) return; //Already added
@@ -256,7 +262,7 @@ function update() {
 	invokeRenderer("update", [frame]);
 }
 //Export stuff
-[connectGame, changeHeading, getOthers, getPlayers, getUser].forEach(function(f) {
+[connectGame, changeHeading, getUser, getPlayers, getOthers, disconnect].forEach(function(f) {
 	exports[f.name] = f;
 });
 Object.defineProperties(exports, {