solved performance issues

es/game.js

@@ -284,11 +284,11 @@ class Player extends Entity {
 					return;
 				}
 
-				let pos = e.pos.clone().sub(this.pos).normalize().scale(100);
+				let pos = e.pos.clone().sub(this.pos).normalize().scale(130);
 
 				ctx.fillStyle = "rgb(255, 0, 0)";
 				ctx.beginPath();
-				ctx.arc(pos.x, pos.y, 10, 0, 2*Math.PI);
+				ctx.arc(pos.x, pos.y, 5, 0, 2*Math.PI);
 				ctx.closePath();
 				ctx.fill();
 			});
@@ -365,6 +365,7 @@ export default class Game {
 		this.raf = null;
 		this.prevTime = new Date().getTime();
 		this.player = null;
+		this.onloss = function(){};
 
 		this.shake = 0;
 		this.shakedec = 0.5;
@@ -387,13 +388,15 @@ export default class Game {
 		});
 
 		sock.on("set", (msg) => {
-			if (!this.entities[msg.id]) {
-				let ent = createEntity(msg, this);
-				if (ent)
-					this.entities[msg.id] = ent;
-			} else {
-				this.entities[msg.id].set(msg);
-			}
+			msg.forEach((m) => {
+				if (!this.entities[m.id]) {
+					let ent = createEntity(m, this);
+					if (ent)
+						this.entities[m.id] = ent;
+				} else {
+					this.entities[m.id].set(m);
+				}
+			});
 		});
 
 		sock.on("despawn", (msg) => {
@@ -405,8 +408,8 @@ export default class Game {
 			if (msg.id == this.id) {
 				this.screenShake(400);
 				setTimeout(() => {
-					alert("You died.");
 					this.stop();
+					this.onloss();
 				}, 1200);
 			}
 		});

es/script.js

@@ -1,12 +1,20 @@
 let Game = require("./game");
 
-document.querySelector("#startGameBtn").addEventListener("click", () => {
+let game, sock;
+
+function startGame() {
 	view("game");
-	let sock = new SockSugar(conf.address);
-	let game = new Game(sock, document.getElementById("canvas"));
+
+	sock = new SockSugar(conf.address);
+	game = new Game(sock, document.getElementById("canvas"));
 
 	sock.on("close", () => {
 		alert("Server closed.");
 		game.stop();
 	});
-});
+
+	game.onloss = () => view("game-over");
+}
+
+document.querySelector("#startGameBtn").addEventListener("click", startGame);
+document.querySelector("#restartGameBtn").addEventListener("click", startGame);

index.html

@@ -19,13 +19,40 @@
 			.view.current {
 				display: block;
 				width: 100%;
-				height: 100%;
 			}
 
-			.view.pre.current {
+			.view button {
+				font-size: 1.1em;
+				padding: 10px;
+				border-radius: 5px;
+				color: #ccc;
+				background-color: #333;
+				border: 2px solid #222;
+			}
+
+			.view button:hover {
+				background-color: #343434;
+				border-color: #555;
+			}
+
+			.view.pre.current,
+			.view.game-over.current {
+				position: absolute;
 				max-width: 900px;
 				margin: auto;
 				line-height: 1.5;
+				top: 50%;
+				left: 50%;
+				-webkit-transform: translate(-50%, -50%);
+				-moz-transform: translate(-50%, -50%);
+				-ms-transform: translate(-50%, -50%);
+				-o-transform: translate(-50%, -50%);
+				transform: translate(-50%, -50%);
+			}
+
+			.view.game-over.current {
+				color: #bb5545;
+				text-align: center;
 			}
 
 			x-script {
@@ -48,6 +75,11 @@
 			<canvas id="canvas">Your browser is bad and you should feel bad.</canvas>
 		</div>
 
+		<div class="view game-over">
+			<h1>Game over.</h1>
+			<button id="restartGameBtn">Restart</button>
+		</div>
+
 		<script src="conf.js"></script>
 		<script src="js/view.js"></script>
 		<script src="node_modules/socksugar/client.js"></script>