Mobile support (not done)

README.md

@@ -1,6 +1,6 @@
 # Blockly.IO
 
-This is a clone of the original Paper-IO released by Voodoo, except for one aspect. This will attempt to implement a multi-player aspect of the game (like a real IO game). Currently this has a playground at this [link](https://thekidofarcrania.github.io/BlocklyIO). It's a demo version of what to come. Hopefully by that time, the necessary server infrastructure could be obtained.
+This is a clone of the original Paper-IO released by Voodoo, except for one aspect. This will attempt to implement a multi-player aspect of the game (like a real IO game). Currently this has a playground at this [link] (https://thekidofarcrania.github.io/PaperIO-Web). It's a demo version of what to come. Hopefully by that time, the necessary server infrastructure could be obtained.
 
 This is just a fun side-project for me. If you would want to use this code, it would be nice to let me know.
 

compile

@@ -0,0 +1,2 @@
+#!/bin/sh
+browserify game-client.js | uglifyjs -c > public/bundle.min.js

game-client.js

@@ -1,6 +1,5 @@
 /* global $ */
 var Player = require("./player.js");
-var client = require("./player-client.js");
 var renderer = require("./game-renderer.js");
 var consts = require("./game-consts.js");
 var core = require("./game-core.js");
@@ -30,8 +29,23 @@ if ( !window.requestAnimationFrame ) {
   })();
 }
 
+var norun = false;
 function run() {
-  client.connect(function(success, msg) {
+  if (norun)
+    return; //Prevent multiple clicks.
+  norun = true;
+  
+  user = null;
+  deadFrames = 0;
+  
+  //Socket connection.
+  //, {transports: ['websocket'], upgrade: false}
+  connectServer();
+  socket.emit('hello', {
+    name: $("#name").val(),
+    type: 0, //Free-for-all
+    gameid: -1 //Requested game-id, or -1 for anyone.
+  }, function(success, msg) {
     if (success) 
     {
       console.info("Connected to game!");
@@ -95,6 +109,47 @@ $(function() {
 var user, socket, frame;
 
 //Event listeners
+//Used from http://stackoverflow.com/a/23230280/7344257
+document.addEventListener('touchstart', handleTouchStart, false);        
+document.addEventListener('touchmove', handleTouchMove, false);
+
+var xDown = null;                                                        
+var yDown = null;                                                        
+
+function handleTouchStart(evt) {                                         
+  xDown = evt.touches[0].clientX;                                      
+  yDown = evt.touches[0].clientY;                                      
+}                                      
+
+function handleTouchMove(evt) {
+  if ( xDown === null || yDown === null )
+    return;
+
+  var xUp = evt.touches[0].clientX;                                    
+  var yUp = evt.touches[0].clientY;
+
+  var xDiff = xDown - xUp;
+  var yDiff = yDown - yUp;
+
+  //Set new heading.
+  var newHeading;
+  if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) /*most significant*/
+  {
+    if ( xDiff > 0 ) newHeading = 3; /* left swipe */ 
+    else newHeading = 1; /* right swipe */
+  } 
+  else 
+  {
+    if ( yDiff > 0 ) newHeading = 0; /* up swipe */ 
+    else newHeading = 2; /* down swipe */
+  }
+  setHeading(newHeading);
+  
+  /* reset values */
+  xDown = null;
+  yDown = null;                                             
+};
+
 $(document).keydown(function(e) {
   if (!user || user.dead)
     return;
@@ -107,7 +162,12 @@ $(document).keydown(function(e) {
     case 40: newHeading = 2; break; //DOWN
     default: return; //exit handler for other keys.
   }
-  
+  setHeading(newHeading);
+  e.preventDefault();
+});
+
+function setHeading(newHeading)
+{
   if (newHeading === user.currentHeading || ((newHeading % 2 === 0) ^ 
     (user.currentHeading % 2 === 0)))
   {
@@ -121,10 +181,7 @@ $(document).keydown(function(e) {
           console.error(msg);
       });
   }
-  e.preventDefault();
-});
-
-
+}
 
 var grid = renderer.grid; 
 var timeout = undefined;
@@ -133,6 +190,7 @@ var deadFrames = 0;
 var requesting = -1; //frame that we are requesting at.
 var frameCache = []; //Frames after our request.
 
+//TODO: check if we can connect to server.
 function connectServer() {
   io.j = [];
   io.sockets = [];
@@ -200,14 +258,15 @@ function connectServer() {
     dirty = true;
     paintLoop();
     
+    showStats();
     //TODO: Show score stats.
     //Show score stats.
-    $("#stats").removeClass("hidden");
-    $("#stats").animate({
-      opacity: .9999
-    }, 3000, function() {
-      showStats();
-    });
+    // $("#stats").removeClass("hidden");
+    // $("#stats").animate({
+    //   opacity: .9999
+    // }, 3000, function() {
+      
+    // });
     
     //Then fade back into the login screen.
     
@@ -215,6 +274,8 @@ function connectServer() {
 }
 
 function showStats() {
+  var stats = 
+  
   $("#begin").removeClass("hidden");
   $("#begin").animate({
     opacity: .9999
@@ -334,4 +395,4 @@ function paintLoop()
     renderer.update();
     requestAnimationFrame(paintLoop);
   }
-}
+}

game-renderer.js

@@ -19,22 +19,25 @@ var BAR_HEIGHT = SHADOW_OFFSET + CELL_WIDTH;
 var BAR_WIDTH = 400;
 
 
-var canvas, canvasWidth, canvasHeight, gameWidth, gameHeight, ctx, offctx, offscreenCanvas;
+var canvasWidth, canvasHeight, gameWidth, gameHeight, ctx, offctx, offscreenCanvas, initZoom;
 
 $(function () {
-  canvas = $("#main-ui")[0];
+  var canvas = $("#main-ui")[0];
   ctx = canvas.getContext('2d');
   
   offscreenCanvas = document.createElement("canvas");
   offctx = offscreenCanvas.getContext('2d');
+
+  canvasWidth = offscreenCanvas.width = canvas.width = window.innerWidth;
+  canvasHeight = offscreenCanvas.height = canvas.height = window.innerHeight - 20;
+  zoom = initZoom = (canvasWidth / 1280);
+  canvas.style.marginTop = 20 / 2;
   
-  canvas.style.marginTop = 10;
-  updateSize();
+  gameWidth = canvasWidth;
+  gameHeight = canvasHeight - BAR_HEIGHT;
 });
 
 
-
-
 var allowAnimation = true;
 var animateGrid, players, allPlayers, playerPortion, portionsRolling, 
   barProportionRolling, grid, animateTo, offset, user, zoom, kills, showedDead;
@@ -56,26 +59,6 @@ grid = new Grid(GRID_SIZE, function(row, col, before, after) {
   });
 });
 
-function updateSize()
-{
-  var changed = false;
-  if (canvasWidth != window.innerWidth)
-  {
-    gameWidth = canvasWidth = offscreenCanvas.width = canvas.width = window.innerWidth;
-    changed = true;
-  }
-  
-  if (canvasHeight != window.innerHeight - 20)
-  {
-    canvasHeight = offscreenCanvas.height = canvas.height = window.innerHeight - 20;
-    gameHeight = canvasHeight - BAR_HEIGHT;
-    changed = true;
-  }
-  
-  if (changed && user)
-    centerOnPlayer(user, offset);
-}
-
 function init() {
   animateGrid = new Grid(GRID_SIZE);
   grid.reset();
@@ -112,7 +95,7 @@ function paintGridBorder(ctx)
 function paintGrid(ctx)
 {
   //Paint background.
-  ctx.fillStyle = "rgb(211, 225, 237)";
+  ctx.fillStyle = "#e2ebf3";
   ctx.fillRect(0, 0, CELL_WIDTH * GRID_SIZE, CELL_WIDTH * GRID_SIZE);
   
   paintGridBorder(ctx);
@@ -142,7 +125,7 @@ function paintGrid(ctx)
         {
           var frac = (animateSpec.frame / ANIMATE_FRAMES);
           var back = new Color(.58, .41, .92, 1);
-          baseColor = animateSpec.before.lightBaseColor.interpolateToString(back, frac);
+          baseColor = animateSpec.before.baseColor.interpolateToString(back, frac);
           shadowColor = animateSpec.before.shadowColor.interpolateToString(back, frac);
         }
         else
@@ -150,7 +133,7 @@ function paintGrid(ctx)
       } 
       else if (p)
       {
-        baseColor = p.lightBaseColor;
+        baseColor = p.baseColor;
         shadowColor = p.shadowColor;
       }
       else //No animation nor is this player owned. 
@@ -165,10 +148,10 @@ function paintGrid(ctx)
       {
         
         ctx.fillStyle = shadowColor.rgbString();
-        ctx.fillRect(x, y + CELL_WIDTH, CELL_WIDTH + 1, SHADOW_OFFSET);
+        ctx.fillRect(x, y + CELL_WIDTH, CELL_WIDTH + 1 / zoom, SHADOW_OFFSET);
       }
       ctx.fillStyle = baseColor.rgbString();
-      ctx.fillRect(x, y, CELL_WIDTH + 1, CELL_WIDTH + 1);
+      ctx.fillRect(x, y, CELL_WIDTH + 1 / zoom, CELL_WIDTH + 1 / zoom);
     }
   }
   
@@ -193,12 +176,12 @@ function paintGrid(ctx)
           y -= offsetBounce;
           
           shadowColor = animateSpec.after.shadowColor;
-          baseColor = animateSpec.after.lightBaseColor.deriveLumination(-(offsetBounce / DROP_HEIGHT) * .1);
+          baseColor = animateSpec.after.baseColor.deriveLumination(-(offsetBounce / DROP_HEIGHT) * .1);
           
           ctx.fillStyle = shadowColor.rgbString();
           ctx.fillRect(x, y + CELL_WIDTH, CELL_WIDTH, SHADOW_OFFSET);
           ctx.fillStyle = baseColor.rgbString();
-          ctx.fillRect(x, y, CELL_WIDTH + 1, CELL_WIDTH + 1);
+          ctx.fillRect(x, y, CELL_WIDTH + 1 / zoom, CELL_WIDTH + 1 / zoom);
         }
         
         animateSpec.frame++;
@@ -209,40 +192,46 @@ function paintGrid(ctx)
   }
 }
 
-
+//TODO: mobile-friendly UI bar and mobile-friendly ranks 
 function paintUIBar(ctx)
 {
+  var Z_CELL_WIDTH = CELL_WIDTH * initZoom;
+  var Z_BAR_HEIGHT = BAR_HEIGHT * initZoom;
+  var L_PADDING = 20 * initZoom;
+  var PADDING = 10 * initZoom;
+  var S_PADDING = 5 * initZoom;
+  
   //UI Bar background
   ctx.fillStyle = "#24422c";
-  ctx.fillRect(0, 0, canvasWidth, BAR_HEIGHT);
+  ctx.fillRect(0, 0, canvasWidth, Z_BAR_HEIGHT);
   
   var barOffset;
   ctx.fillStyle = "white";
   ctx.font = "24px Changa";
-  barOffset = (user && user.name) ? (ctx.measureText(user.name).width + 20) : 0;
-  ctx.fillText(user ? user.name : "", 5, CELL_WIDTH - 5);
+  barOffset = (user && user.name) ? (ctx.measureText(user.name).width + L_PADDING) : 0;
+  ctx.fillText(user ? user.name : "", S_PADDING, Z_CELL_WIDTH - S_PADDING);
   
   //Draw filled bar.
   ctx.fillStyle = "rgba(180, 180, 180, .3)";
-  ctx.fillRect(barOffset, 0, BAR_WIDTH, BAR_HEIGHT);
+  ctx.fillRect(barOffset, 0, BAR_WIDTH * initZoom, Z_BAR_HEIGHT);
   
   var userPortions = portionsRolling[user.num] ? portionsRolling[user.num].lag : 0;
-  var barSize = Math.ceil((BAR_WIDTH - MIN_BAR_WIDTH) * userPortions + MIN_BAR_WIDTH);
+  var barSize = Math.ceil(((BAR_WIDTH - MIN_BAR_WIDTH) * userPortions + MIN_BAR_WIDTH) * initZoom);
   ctx.fillStyle = user ? user.baseColor.rgbString() : "";
-  ctx.fillRect(barOffset, 0, barSize, CELL_WIDTH);
+  ctx.fillRect(barOffset, 0, barSize, Z_CELL_WIDTH);
   ctx.fillStyle = user ? user.shadowColor.rgbString() : "";
-  ctx.fillRect(barOffset, CELL_WIDTH, barSize, SHADOW_OFFSET);
+  ctx.fillRect(barOffset, Z_CELL_WIDTH, barSize, SHADOW_OFFSET * initZoom);
   
   //TODO: dont reset kill count and zoom when we request frames.
   //Percentage
   ctx.fillStyle = "white";
   ctx.font = "18px Changa";
-  ctx.fillText((userPortions * 100).toFixed(3) + "%", 5 + barOffset, CELL_WIDTH - 5);
+  ctx.fillText((userPortions * 100).toFixed(3) + "%", S_PADDING + barOffset, Z_CELL_WIDTH - S_PADDING);
   
   //Number of kills
   var killsText = "Kills: " + kills;
-  var killsOffset = 20 + BAR_WIDTH + barOffset;
-  ctx.fillText(killsText, killsOffset, CELL_WIDTH - 5);
+  var killsOffset = L_PADDING + BAR_WIDTH + barOffset;
+  ctx.fillText(killsText, killsOffset, Z_CELL_WIDTH - S_PADDING);
   
   //Calcuate rank
   var sorted = [];
@@ -256,7 +245,7 @@ function paintUIBar(ctx)
  
   var rank = sorted.findIndex(function(val) {return val.player === user});
   ctx.fillText("Rank: " + (rank === -1 ? "--" : rank + 1) + " of " + sorted.length, 
-  ctx.measureText(killsText).width + killsOffset + 20, CELL_WIDTH - 5);
+  ctx.measureText(killsText).width + killsOffset + L_PADDING, Z_CELL_WIDTH - S_PADDING);
   
   //Rolling the leaderboard bars.
   if (sorted.length > 0)
@@ -279,31 +268,31 @@ function paintUIBar(ctx)
     var portion = barProportionRolling[player.num].lag;
     
     var nameWidth = ctx.measureText(name).width;
-    barSize = Math.ceil((BAR_WIDTH - MIN_BAR_WIDTH) * portion + MIN_BAR_WIDTH);
+    barSize = Math.ceil(((BAR_WIDTH - MIN_BAR_WIDTH) * portion + MIN_BAR_WIDTH) * initZoom);
     var barX = canvasWidth - barSize;
-    var barY = BAR_HEIGHT * (i + 1);
-    var offset = i == 0 ? 10 : 0;
+    var barY = Z_BAR_HEIGHT * (i + 1) * initZoom;
+    var offset = i == 0 ? PADDING : 0;
     
     ctx.fillStyle = 'rgba(10, 10, 10, .3)';
-    ctx.fillRect(barX - 10, barY + 10 - offset, barSize + 10, BAR_HEIGHT + offset);
+    ctx.fillRect(barX - PADDING, barY + PADDING - offset, barSize + PADDING, Z_BAR_HEIGHT + offset);
     ctx.fillStyle = player.baseColor.rgbString();
-    ctx.fillRect(barX, barY, barSize, CELL_WIDTH);
+    ctx.fillRect(barX, barY, barSize, CELL_WIDTH * initZoom);
     ctx.fillStyle = player.shadowColor.rgbString();
-    ctx.fillRect(barX, barY + CELL_WIDTH, barSize, SHADOW_OFFSET);
+    ctx.fillRect(barX, barY + CELL_WIDTH * initZoom, barSize, SHADOW_OFFSET * initZoom);
     
     ctx.fillStyle = "black";
-    ctx.fillText(name, barX - nameWidth - 15, barY + 27);
+    ctx.fillText(name, barX - nameWidth - 15 * initZoom, barY + 27 * initZoom);
     
     var percentage = (portionsRolling[player.num].lag * 100).toFixed(3) + "%";
     ctx.fillStyle = "white";
-    ctx.fillText(percentage, barX + 5, barY + CELL_WIDTH - 5);
+    ctx.fillText(percentage, barX + 5 * initZoom, barY + (CELL_WIDTH - 5) * initZoom);
   }
   
 }
 
 function paint(ctx)
 {
-  ctx.fillStyle = '#e2ebf3';  //'whitesmoke';
+  ctx.fillStyle = 'whitesmoke';
   ctx.fillRect(0, 0, canvasWidth, canvasHeight);
   
   //Move grid to viewport as said with the offsets, below the stats
@@ -345,7 +334,6 @@ function paintDoubleBuff()
 }
 
 function update() {
-  updateSize();
   
   //Change grid offsets.
   for (var i = 0; i <= 1; i++)
@@ -374,7 +362,7 @@ function update() {
   
   //Zoom goes from 1 to .5, decreasing as portion goes up. TODO: maybe can modify this?
   if (portionsRolling[user.num])
-    zoom = 1 / (portionsRolling[user.num].lag + 1); 
+    zoom = initZoom / (portionsRolling[user.num].lag + 1); 
   
   var dead = [];
   core.updateFrame(grid, players, dead, function addKill(killer, other)
@@ -398,8 +386,8 @@ function centerOnPlayer(player, pos)
   var xOff = Math.floor(player.posX - (gameWidth / zoom - CELL_WIDTH) / 2);
   var yOff = Math.floor(player.posY - (gameHeight / zoom - CELL_WIDTH) / 2);
   var gridWidth = grid.size * CELL_WIDTH + BORDER_WIDTH * 2;
-  pos[0] = xOff; //Math.max(Math.min(xOff, gridWidth + (BAR_WIDTH + 100) / zoom - gameWidth / zoom), 0);
-  pos[1] = yOff; //Math.max(Math.min(yOff, gridWidth - gameHeight / zoom), 0);
+  pos[0] = Math.max(Math.min(xOff, gridWidth + (BAR_WIDTH + 100) / zoom - gameWidth / zoom), 0);
+  pos[1] = Math.max(Math.min(yOff, gridWidth - gameHeight / zoom), 0);
 }
 
 function getBounceOffset(frame)

package.json

@@ -23,6 +23,8 @@
   },
   "homepage": "https://github.com/theKidOfArcrania/Blockly-IO#readme",
   "dependencies": {
+    "compression": "^1.6.2",
+    "express": "^4.15.0",
     "finalhandler": "^1.0.0",
     "serve-static": "^1.11.2",
     "socket.io": "^1.7.3",

player-client.js

@@ -1,244 +0,0 @@
-var Player = require("./player.js");
-var consts = require("./game-consts.js");
-var core = require("./game-core.js");
-var io = require('socket.io-client');
-
-var GRID_SIZE = consts.GRID_SIZE;
-var CELL_WIDTH = consts.CELL_WIDTH;
-
-var running = false;
-var user, socket, frame;
-
-exports.connect = function(callback) {
-  if (running)
-    return; //Prevent multiple runs.
-  running = true;
-  
-  user = null;
-  deadFrames = 0;
-  
-  //Socket connection.
-  //, {transports: ['websocket'], upgrade: false}
-  connectServer();
-  socket.emit('hello', {
-    name: $("#name").val(),
-    type: 0, //Free-for-all
-    gameid: -1 //Requested game-id, or -1 for anyone.
-  }, function(success, msg) {
-    if (success) 
-      console.info("Connected to game!");
-    else 
-      console.error("Unable to connect to game: " + msg);
-    if (callback)
-      callback(success, msg);
-  });
-}
-
-exports.changeHeading = function(int newHeading)
-{
-  if (newHeading === user.currentHeading || ((newHeading % 2 === 0) ^ 
-    (user.currentHeading % 2 === 0)))
-  {
-    //user.heading = newHeading;
-    if (socket) {
-      socket.emit("frame", {
-        frame: frame,
-        heading: newHeading
-      }, function(success, msg) {
-        if (!success)
-          console.error(msg);
-      });
-    }
-  }
-}
-
-var grid = renderer.grid; 
-var timeout = undefined;
-var dirty = false;
-var deadFrames = 0;
-var requesting = -1; //frame that we are requesting at.
-var frameCache = []; //Frames after our request.
-
-function connectServer() {
-  io.j = [];
-  io.sockets = [];
-  socket = io('http://' + window.location.hostname + ':8081', {
-    'forceNew': true,
-    upgrade: false,
-    transports: ['websocket']
-  });
-  socket.on('connect', function(){
-    console.info("Connected to server.");
-  });
-  socket.on('game', function(data) {
-    if (timeout != undefined)
-      clearTimeout(timeout);
-    
-    //Initialize game.
-    //TODO: display data.gameid --- game id #
-    frame = data.frame;
-    renderer.reset();
-    
-    //Load players.
-    data.players.forEach(function(p) {
-      var pl = new Player(grid, p);
-      renderer.addPlayer(pl);
-    });
-    user = renderer.getPlayerFromNum(data.num);
-    if (!user) throw new Error();
-    renderer.setUser(user);
-    
-    //Load grid.
-    var gridData = new Uint8Array(data.grid);
-    for (var r = 0; r < grid.size; r++)
-      for (var c = 0; c < grid.size; c++)
-      {
-        var ind = gridData[r * grid.size + c] - 1;
-        grid.set(r, c, ind === -1 ? null : renderer.getPlayer(ind));
-      }
-    
-    renderer.paint();
-    frame = data.frame;
-    
-    if (requesting !== -1)
-    {
-      //Update those cache frames after we updated game.
-      var minFrame = requesting;
-      requesting = -1;
-      while (frameCache.length > frame - minFrame)
-        processFrame(frameCache[frame - minFrame]);
-      frameCache = [];
-    }
-  });
-  
-  socket.on('notifyFrame', processFrame);
-  
-  socket.on('dead', function() {
-    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();
-    user.die();
-    dirty = true;
-    paintLoop();
-    running = false;
-    
-    //TODO: DISCONNECT event
-  });
-}
-
-function processFrame(data)
-{
-  if (timeout != undefined)
-      clearTimeout(timeout);
-    
-  if (requesting !== -1 && requesting < data.frame)
-  {
-    frameCache.push(data);
-    return;
-  }
-  
-  if (data.frame - 1 !== frame)
-  {
-    console.error("Frames don't match up!");
-    socket.emit('requestFrame'); //Restore data.
-    requesting = data.frame;
-    frameCache.push(data);
-    return;
-  }
-  
-  frame++;
-  if (data.newPlayers)
-  {
-    data.newPlayers.forEach(function(p) {
-      if (p.num === user.num)
-        return;
-      var pl = new Player(grid, p);
-      renderer.addPlayer(pl);
-      core.initPlayer(grid, pl);
-    });
-  }
-  
-  var found = new Array(renderer.playerSize());
-  data.moves.forEach(function(val, i) {
-    var player = renderer.getPlayerFromNum(val.num);
-    if (!player) return;
-    if (val.left) player.die();
-    found[i] = true;
-    player.heading = val.heading;
-  });
-  for (var i = 0; i < renderer.playerSize(); i++)
-  {
-    //Implicitly leaving game.
-    if (!found[i])
-    {
-      var player = renderer.getPlayer();
-      player && player.die();
-    }
-  }
-  
-  renderer.update();
-  
-  var locs = {};
-  for (var i = 0; i < renderer.playerSize(); i++)
-  {
-    var p = renderer.getPlayer(i);
-    locs[p.num] = [p.posX, p.posY, p.waitLag];
-  }
-
-  socket.emit("verify", {
-    frame: frame,
-    locs: locs
-  }, function(frame, success, adviceFix, msg) {
-    if (!success && requesting === -1) 
-    {
-      console.error(frame + ": " + msg);
-      if (adviceFix)
-        socket.emit('requestFrame');
-    }
-  }.bind(this, frame));
-  
-  dirty = true;
-  requestAnimationFrame(function() {
-    paintLoop();
-  });
-  timeout = setTimeout(function() {
-    console.warn("Server has timed-out. Disconnecting.");
-    socket.disconnect();
-  }, 3000);
-}
-
-function paintLoop()
-{
-  if (!dirty)
-    return;
-  renderer.paint();
-  dirty = false;
-  
-  if (user.dead)
-  {
-    if (timeout)
-      clearTimeout(timeout);
-    if (deadFrames === 60) //One second of frame
-    {
-      var before = renderer.allowAnimation;
-      renderer.allowAnimation = false;
-      renderer.update();
-      renderer.paint();
-      renderer.allowAnimation = before;
-      user = null;
-      deadFrames = 0;
-      return;
-    }
-    
-    socket.disconnect();
-    deadFrames++;
-    dirty = true;
-    renderer.update();
-    requestAnimationFrame(paintLoop);
-  }
-}

player.js

@@ -373,9 +373,8 @@ function Player(grid, sdata) {
     var hue = Math.random();
     this.baseColor = base = new Color(hue, .8, .5);
   }
-  this.lightBaseColor = base.deriveLumination(.1);
   this.shadowColor = base.deriveLumination(-.3);
-  this.tailColor = base.deriveLumination(.3).deriveAlpha(.5);
+  this.tailColor = base.deriveLumination(.2).deriveAlpha(.5);
   
   //Tail requires special handling.
   this.grid = grid; //Temporary

public/index.html

@@ -1,25 +1,40 @@
 <head>
+    <meta name=viewport content="width=device-width, initial-scale=1">
     <link href="changa.css" rel="stylesheet">
     <link href="styles.css" rel="stylesheet">
     <script src="jquery.min.js"></script>
-    <script src="bundle.js"></script>
+    <script src="bundle.min.js"></script>
     <title>Blockly.IO</title>
 </head>
 <body>
     <canvas id="main-ui"></canvas>
-    <div id="stats" style="opacity: 0" class="fullscreen hidden"></div>
+    <div id="stats" style="opacity: 0" class="fullscreen hidden">
+        <div style="padding-top: 100px"></div>
+        <div class="card">
+            <h1 id="score">Score: <span id="score-num">0</span></h1>
+            <h1 id="high-score">High Score: <span id="high-score-num">0</span></h1>
+            <h1 id="time">Time Alive: <span id="time-num">0</span></h1>
+            <h1 id="killed">Killed: <span id="killed-num">0</span></h1>
+        </div>
+    </div>
     <div id="begin" style="opacity: .99999" class="fullscreen">
         <div class="center">
             <h1>Blockly.IO!</h1>
             <small>Todo: replace ^^^ with a picture. Work in progress.</small><br>
             
             <h1>Enter your name</h1>
-            <input autocomplete="off" id="name" placeholder="An awesome name!">
-            <button type="submit">Play!</button>
             <div>
+                <input autocomplete="off" id="name" placeholder="An awesome name!">
+            </div>
+            <div class="blockless">
+                <button type="submit">Play!</button>
+            </div>
+            <div class="blockless">
                 <small id="error">Your browser does not support JavaScript!</small>
             </div>
-            <small>Visit the open-source code on <a href="https://github.com/theKidOfArcrania/PaperIO-Web">GitHub</a>!</small>
+            <br>
+            <small>Visit the open-source code on <a href="https://github.com/theKidOfArcrania/PaperIO-Web">GitHub</a>!</small>
         </div>
     </div>
+    
 </body>

public/styles.css

@@ -28,10 +28,9 @@ canvas {
 .center {
   vertical-align: middle;
   text-align: center;
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  margin: 1rem;
+  margin-top: 0rem;
+  padding-top: 3rem;
 }
 
 input {
@@ -40,6 +39,7 @@ input {
   padding: .5rem 1rem;
   border: 4px solid lightgray;
   border-radius: 2px;
+  width: 100%;
 }
 
 button {
@@ -51,6 +51,14 @@ button {
   font-family: "Changa", "Sans-serif";
   font-size: 24px;
   padding: .5rem 1rem;
+  width: 100%;
+  margin-top: .5rem;
+}
+
+@media screen and (min-width: 769px){
+  button, input {
+    width: 50%;
+  }
 }
 
 button:active {

server.js

@@ -2,26 +2,17 @@
 var hostname = process.argv[2] || "0.0.0.0";
 var port = parseInt(process.argv[3]) || 80;
 
-var finalhandler = require('finalhandler');
+var express = require('express');
+var compression = require('compression')
+var app = express();
+
+//Create static server
+app.use(compression());
+app.use(express.static('public'));
+app.listen(port, hostname);
+
 var http = require('http');
-var serveStatic = require('serve-static');
-
-// Serve up public/ftp folder
-var serve = serveStatic('public/', {'setHeaders': setHeaders});
-
-function setHeaders(res, path) {
-  res.setHeader('Cache-Control', 'public, max-age=0');
-}
-
-// Create server
-var server = http.createServer(function onRequest (req, res) {
-  serve(req, res, finalhandler(req, res));
-});
-
-// Listen
-server.listen(port, hostname);
-
-server = http.createServer();
+var server = http.createServer();
 var io = require('socket.io')(server);
 io.set('transports', ['websocket']);