Initial commit

mar/old/Game.js

@@ -0,0 +1,101 @@
+
+fullscreen = false;
+
+
+function gameLoop() {
+    requestAnimationFrame(gameLoop);
+
+    for(var i in game.world.objects){
+
+        if(game.world.objects[i]){
+            game.world.objects[i].update();
+        }
+    }
+
+    game.worldLayer.children.sort(depthCompare);
+
+    game.renderer.render(game.rootContainer);
+
+}
+
+function Game(){
+
+    var world;
+    var worldX;
+    var worldY;
+    var self = this;
+
+    this.calculateBounds = function(){
+
+        if (fullscreen) {
+            self.RENDERER_WIDTH = window.innerWidth - 4;
+            self.RENDERER_HEIGHT = window.innerHeight - 4;
+        } else {
+            self.RENDERER_WIDTH = document.getElementById("game").clientWidth;
+            self.RENDERER_HEIGHT = (window.innerHeight / 1.25);
+        }
+    };
+
+    //Setup renderer
+    this.calculateBounds();
+
+    this.renderer = PIXI.autoDetectRenderer(256, 256);
+    document.getElementById("game").appendChild(this.renderer.view);
+
+    this.rootContainer = new PIXI.Container();
+    this.renderer.backgroundColor = 0x282828;
+    this.renderer.resize(this.RENDERER_WIDTH, this.RENDERER_HEIGHT);
+
+    window.onresize = function () {
+
+        self.calculateBounds();
+        self.renderer.resize(self.RENDERER_WIDTH, self.RENDERER_HEIGHT);
+    };
+
+    //SETUP BACKGROUND LAYER & PANNING
+    this.bgLayer = new PIXI.Container();
+    this.rootContainer.addChildAt(this.bgLayer, 0);
+    this.bg = new PIXI.Sprite();
+    this.bg.interactive = true;
+    this.bg.hitArea = new PIXI.Rectangle(0, 0, this.RENDERER_WIDTH, this.RENDERER_HEIGHT);
+    this.bg.on("pointerdown", function (e) {
+        self.pointerdown = true;
+        self.pointerFirstClick = e.data.getLocalPosition(self.rootContainer);
+    });
+    this.bg.on("pointerup", function () {
+        self.pointerdown = false;
+        self.pointerLastDrag = null;
+    });
+    this.bg.on("pointerupoutside", function () {
+        self.pointerdown = false;
+        self.pointerLastDrag = null;
+    });
+    this.bg.on("pointermove", function (e) {
+        if (self.pointerdown === true) {
+            //Dragging
+
+            var currentMouse = e.data.getLocalPosition(self.rootContainer);
+
+            if (self.pointerLastDrag !== null) {
+                self.worldLayer.position.x += currentMouse.x - self.pointerLastDrag.x;
+                self.worldLayer.position.y += currentMouse.y - self.pointerLastDrag.y;
+            } else {
+                self.worldLayer.position.x += currentMouse.x - self.pointerFirstClick.x;
+                self.worldLayer.position.y += currentMouse.y - self.pointerFirstClick.y;
+            }
+
+            self.pointerLastDrag = currentMouse;
+        }
+    });
+    this.bgLayer.addChild(this.bg);
+
+
+
+    //------------------------------------
+
+
+
+}
+
+
+

mar/old/GameClient.js

@@ -0,0 +1,274 @@
+/**
+ * Listens for authentications responses from the server
+ */
+function authListener(message){
+
+    if(message.t === "auth"){
+
+        if(message.m === "ok"){
+            console.log("Auth successful");
+            client.requestUserInfo();
+
+        } else {
+            console.log("Auth failed");
+        }
+    }
+}
+
+/**
+ * Listens for user info responses from the server
+ */
+function userInfoListener(message){
+    if(message.t === "userInfo"){
+
+        game = new Game();
+        game.worldX = message.worldX;
+        game.worldY = message.worldY;
+
+        client.requestTerrain();
+    }
+}
+
+function formattedKeyBuffer(kbBuffer) {
+
+    var str  = "Keyboard: ";
+
+    for(var i = 0; i < 16; i++){
+
+        if(kbBuffer[i] !== undefined) {
+
+            str += "0x" + kbBuffer[i].toString(16) + " ";
+
+        } else {
+
+            str += "____ ";
+        }
+
+    }
+
+    return str;
+
+}
+
+function terrainListener(message){
+    if(message.t === "terrain"){
+
+        if(game.world !== undefined){
+
+            game.world.update(message.terrain);
+
+        } else {
+            game.world = new Word(message.terrain);
+
+            //Setup keyboard buffer display
+            game.textLayer = new PIXI.Container();
+            game.rootContainer.addChild(game.textLayer);
+            game.kbBuffer = [];
+
+            game.keyboardBuffer = new PIXI.Text(formattedKeyBuffer([]), {fontSize: 16, fontFamily: "fixedsys", fill: "white"});
+            game.textLayer.addChild(game.keyboardBuffer);
+
+
+            //Handle keypresses
+            window.addEventListener('keydown', function(event) {
+
+                if(game.kbBuffer.length <= 16) {
+
+                    client.sendKeypress(event.keyCode);
+
+                    //Locally update the buffer
+                    game.kbBuffer.push(event.keyCode);
+                    game.keyboardBuffer.text = formattedKeyBuffer(game.kbBuffer);
+
+                    if(event.keyCode >= 37 && event.keyCode <= 40){
+                        event.preventDefault();
+                    }
+                }
+
+            });
+            console.log("Gameloop started");
+            gameLoop();
+        }
+
+
+    }
+}
+
+function tickListener(message){
+    if(message.t === "tick"){
+        //Request objects
+        client.socket.send(JSON.stringify({t: "object", x: game.worldX, y: game.worldY}));
+
+        //Update key buffer display
+        if(game.textLayer){
+            if(message.keys !== undefined){
+                console.log(message.keys);
+
+                game.kbBuffer = message.keys;
+                game.keyboardBuffer.text = formattedKeyBuffer(game.kbBuffer);
+            }
+        }
+    }
+}
+
+function objectListener(message){
+
+    if(message.t === "object"){
+
+        game.world.updateObjects(message.objects);
+
+    }
+}
+
+function codeListener(message){
+
+    if(message.t === "code"){
+
+        ace.edit("editor").setValue(message.code);
+
+    }
+}
+
+
+
+function GameClient(callback) {
+
+    var self = this;
+
+    var listeners = [];
+    var xhr = new XMLHttpRequest();
+
+    xhr.open("GET", "./getServerInfo.php", true);
+
+    xhr.onreadystatechange = function () {
+        if (xhr.readyState === 4 && xhr.status === 200) {
+
+            console.log("Received server info " + xhr.responseText);
+
+            setTimeout(function(){
+                var info = JSON.parse(xhr.responseText);
+
+                self.socket = new WebSocket(info.address);
+                self.username = info.username;
+                self.tickLength = info.tickLength;
+                self.serverName = info.serverName;
+
+
+                self.socket.onopen = function () {
+
+                    //Send auth request
+                    self.socket.send(info.token);
+
+
+                    //Setup event managers
+                    listeners.push(authListener);
+                    listeners.push(userInfoListener);
+                    listeners.push(terrainListener);
+                    listeners.push(tickListener);
+                    listeners.push(objectListener);
+                    listeners.push(codeListener);
+
+                    client.socket.onmessage = function(e){
+
+                        //console.log("Received " + e.data);
+                        var message = JSON.parse(e.data);
+
+                        for(var i = 0; i < listeners.length ; i++){
+                            listeners[i](message);
+                        }
+                    };
+
+                    self.reloadCode();
+
+
+                    if(callback !== undefined){
+                        callback();
+                    }
+                }
+            }, 100);
+        }
+    };
+    xhr.send(null);
+
+
+    this.requestUserInfo = function(){
+        this.socket.send(JSON.stringify({t: "userInfo"}));
+    };
+
+    this.requestTerrain = function(){
+        this.socket.send(JSON.stringify({t: "terrain", x: game.worldX, y: game.worldY}));
+    };
+
+    this.uploadCode = function(code){
+        console.log("Uploaded code");
+        this.socket.send(JSON.stringify({t: "uploadCode", code: code}))
+    };
+
+    this.reloadCode = function(){
+        this.socket.send(JSON.stringify({t: "codeRequest"}))
+    };
+
+    this.sendKeypress = function(key){
+        if(key !== 0){
+            this.socket.send(JSON.stringify({t:"k", k:key}));
+        }
+    };
+
+
+}
+
+
+// Change an object's location and initialise the move animation
+function moveObject(newX, newY, gameObject) {
+
+    //Resync object
+
+    for(clip in gameObject.clips){
+        gameObject.clips[clip].x = (gameObject.x - gameObject.y) * 64;
+        gameObject.clips[clip].y = ((gameObject.x + gameObject.y) * 32) - 16;
+    }
+
+    var tiledx = newX - gameObject.x;
+    var tiledy = newY - gameObject.y;
+
+    gameObject.dx = 0;
+    gameObject.dy = 0;
+
+    //Recalculate position
+    gameObject.x = newX;
+    gameObject.y = newY;
+
+    if (tiledx === 1) {
+        //We need to move 128px to the right and the minimum tick length is 1s.
+        //This means that we have maximum 60 frames to do the animation
+        gameObject.dx = 64 / 58;
+        gameObject.dy = 32 / 58;
+        gameObject.walking = 58;
+        //Recalculate Z order immediately
+        gameObject.sprite.z = gameObject.y + gameObject.x + 0.1;
+    } else if (tiledx === -1) {
+        gameObject.dx = -64 / 58;
+        gameObject.dy = -32 / 58;
+        gameObject.walking = 58;
+
+        //The Z order needs to be recalculated when the movement ends
+        gameObject.recalculateZAfter = true;
+    } else if (tiledy === 1) {
+        gameObject.dx = -64 / 58;
+        gameObject.dy = 32 / 58;
+        gameObject.walking = 58;
+        //Recalculate Z order immediately
+        gameObject.sprite.z = gameObject.y + gameObject.x + 0.1;
+    } else if (tiledy === -1) {
+        gameObject.dx = 64 / 58;
+        gameObject.dy = -32 / 58;
+        gameObject.walking = 58;
+        //The Z order needs to be recalculated when the movement ends
+        gameObject.recalculateZAfter = true;
+    }
+
+    game.worldLayer.children.sort(depthCompare);
+
+}
+
+

mar/old/GameObject.js

@@ -0,0 +1,363 @@
+
+OBJ_CUBOT = 1;
+OBJ_PLANT = 2;
+OBJ_KILN = 3;
+OBJ_DIGESTER  = 4;
+OBJ_ROCKET = 5;
+
+DIR_NORTH = 0;
+DIR_EAST = 1;
+DIR_SOUTH = 2;
+DIR_WEST = 3;
+
+ACTION_WALK =2;
+
+
+
+function getItemTexture(item){
+
+    return PIXI.Texture.fromFrame("objects/plant1_s");
+
+}
+
+function getCubotAnimatedSprites(){
+
+    var walk_e = [];
+    var walk_n = [];
+    var walk_s = [];
+    var walk_w = [];
+    var i;
+
+    for(i = 1; i <= 30; i++){
+        walk_e.push(PIXI.Texture.fromFrame("cubot/walk_e/" + ("0000" + i).slice(-4)))
+    }
+    for(i = 1; i <= 30; i++){
+        walk_n.push(PIXI.Texture.fromFrame("cubot/walk_n/" + ("0000" + i).slice(-4)))
+    }
+    for(i = 1; i <= 30; i++){
+        walk_s.push(PIXI.Texture.fromFrame("cubot/walk_s/" + ("0000" + i).slice(-4)))
+    }
+    for(i = 1; i <= 30; i++){
+        walk_w.push(PIXI.Texture.fromFrame("cubot/walk_w/" + ("0000" + i).slice(-4)))
+    }
+
+    var clip_wal_e = new PIXI.extras.AnimatedSprite(walk_e);
+    clip_wal_e.animationSpeed = 0.5;
+    clip_wal_e.onFrameChange = function(){
+        if(this.currentFrame === 29){
+            this.gotoAndPlay(10);
+        }
+    };
+
+    var clip_wal_n = new PIXI.extras.AnimatedSprite(walk_n);
+    clip_wal_n.animationSpeed = 0.5;
+    clip_wal_n.onFrameChange = function(){
+        if(this.currentFrame === 29){
+            this.gotoAndPlay(10);
+        }
+    };
+    var clip_wal_s = new PIXI.extras.AnimatedSprite(walk_s);
+    clip_wal_s.animationSpeed = 0.5;
+    clip_wal_s.onFrameChange = function(){
+        if(this.currentFrame === 29){
+            this.gotoAndPlay(10);
+        }
+    };
+    var clip_wal_w = new PIXI.extras.AnimatedSprite(walk_w);
+    clip_wal_w.animationSpeed = 0.5;
+    clip_wal_w.onFrameChange = function(){
+        if(this.currentFrame === 29){
+            this.gotoAndPlay(10);
+        }
+    };
+
+    var clips = {"walk_e": clip_wal_e,
+        "walk_n":clip_wal_n,
+        "walk_s":clip_wal_s,
+        "walk_w":clip_wal_w};
+
+    return clips;
+
+
+
+}
+
+function getObjectTexture(obj, selected){
+
+    switch(obj.type){
+
+        case OBJ_CUBOT:
+            //Tortoise
+            if(selected){
+
+                return PIXI.Texture.fromFrame("cubot/walk_w/0001");
+
+            } else {
+
+                switch (obj.direction){
+                    case DIR_NORTH:
+                        return PIXI.Texture.fromFrame("cubot/walk_n/0001");
+                    case DIR_EAST:
+                        return PIXI.Texture.fromFrame("cubot/walk_e/0001");
+                    case DIR_SOUTH:
+                        return PIXI.Texture.fromFrame("cubot/walk_s/0001");
+                    case DIR_WEST:
+                        return PIXI.Texture.fromFrame("cubot/walk_w/0001");
+                }
+            }
+
+            break;
+        case OBJ_PLANT:
+            //Plant
+            if(selected){
+                return PIXI.Texture.fromFrame("objects/plant1_s");
+            } else {
+                return PIXI.Texture.fromFrame("objects/plant1");
+            }
+        case OBJ_KILN:
+            //Kiln
+            if(selected){
+                return PIXI.Texture.fromFrame("objects/kiln_s");
+            } else {
+                return PIXI.Texture.fromFrame("objects/kiln");
+            }
+        case OBJ_DIGESTER:
+            //Digester
+            return PIXI.Texture.fromFrame("objects/digester");
+        case OBJ_ROCKET:
+            //Rocket
+            return PIXI.Texture.fromFrame("objects/rocket");
+
+    }
+}
+
+function getZPosition(type, x, y) {
+
+    switch (type){
+        case 1:
+        case 2:
+        case 3:
+        case 4:
+            return x + y + 0.1;
+        case 5:
+            return x + y + + 11.1;
+    }
+}
+
+function getXPosition(type, x, y) {
+
+    switch (type){
+        case OBJ_CUBOT:
+            return (x - y) * 64;
+        case OBJ_PLANT:
+            return (x - y) * 64 + 32;
+        case OBJ_KILN:
+            return (x - y) * 64;
+        case OBJ_DIGESTER:
+            return ((x - y) * 64) - 64;
+        case OBJ_ROCKET:
+            return (x - y) * 64;
+    }
+}
+
+function getYPosition(type, x, y) {
+
+    switch (type){
+        case OBJ_CUBOT:
+            return ((x + y) * 32) - 8;
+        case OBJ_PLANT:
+            return ((x + y) * 32) - 26;
+        case OBJ_KILN:
+            return ((x + y) * 32) - 58;
+        case OBJ_DIGESTER:
+            return ((x + y) * 32) - 64;
+        case OBJ_ROCKET:
+            return ((x + y) * 32) - 128;
+    }
+}
+
+
+/**
+ * Object an object with the new instance from the server
+ * @param object
+ * @param responseObj
+ */
+function updateGameObject(object, responseObj){
+
+    //Update location
+    if (object.x !== responseObj.x || object.y !== responseObj.y) {
+        //location changed
+        moveObject(responseObj.x, responseObj.y, object);
+    }
+
+    //Overwrite object fields
+    for(var key in responseObj){
+        object[key] = responseObj[key];
+    }
+
+    if(object.type === OBJ_CUBOT){
+
+        // object.sprite.x = getXPosition(object.type, object.x, object.y);
+        // object.sprite.y = getYPosition(object.type, object.x, object.y);
+        // object.sprite.z = getZPosition(object.type, object.x, object.y);
+
+        if(object.action === ACTION_WALK){
+
+            //Walking
+            switch (object.direction){
+                case DIR_NORTH:
+
+                    object.clips.walk_n.x = object.sprite.x;
+                    object.clips.walk_n.y = object.sprite.y;
+                    object.clips.walk_n.z = object.sprite.z;
+
+                    if(!object.clips.walk_n.visible) {
+
+                        object.clips.walk_n.visible = true;
+                        object.clips.walk_n.play();
+                        object.clips.walk_e.visible = false;
+                        object.clips.walk_s.visible = false;
+                        object.clips.walk_w.visible = false;
+                    }
+
+
+
+                    break;
+
+                case DIR_EAST:
+
+                    object.clips.walk_e.x = object.sprite.x;
+                    object.clips.walk_e.y = object.sprite.y;
+                    object.clips.walk_e.z = object.sprite.z;
+
+                    if(!object.clips.walk_e.visible){
+
+                        object.clips.walk_n.visible = false;
+                        object.clips.walk_e.visible = true;
+                        object.clips.walk_e.play();
+                        object.clips.walk_s.visible = false;
+                        object.clips.walk_w.visible = false;
+                    }
+
+                    break;
+
+                case DIR_SOUTH:
+
+                    object.clips.walk_s.x = object.sprite.x;
+                    object.clips.walk_s.y = object.sprite.y;
+                    object.clips.walk_s.z = object.sprite.z;
+
+                    if(!object.clips.walk_s.visible){
+
+                        object.clips.walk_n.visible = false;
+                        object.clips.walk_e.visible = false;
+                        object.clips.walk_s.visible = true;
+                        object.clips.walk_s.play();
+                        object.clips.walk_w.visible = false;
+                    }
+
+                    break;
+
+                case DIR_WEST:
+                    object.clips.walk_w.x = object.sprite.x;
+                    object.clips.walk_w.y = object.sprite.y;
+                    object.clips.walk_w.z = object.sprite.z;
+
+                    if(!object.clips.walk_s.visible){
+
+                        object.clips.walk_n.visible = false;
+                        object.clips.walk_e.visible = false;
+                        object.clips.walk_s.visible = false;
+                        object.clips.walk_w.visible = true;
+                        object.clips.walk_w.play();
+                    }
+
+                    break;
+            }
+
+
+        }
+
+    }
+
+    return object;
+}
+
+/**
+ * Called each frame
+ */
+function update(){
+
+    if (this.walking === undefined) {
+
+        this.walking = 0;
+    } else if (this.walking > 0) {
+        //The object has more walking frames to do
+        for(clip in this.clips){
+            this.clips[clip].x += this.dx;
+            this.clips[clip].y += this.dy;
+        }
+
+        this.walking--;
+
+        if (this.walking === 0 && this.recalculateZAfter) {
+            //Finished walking cycle
+            for(clip in this.clips){
+                this.clips[clip].z = this.y + this.x + 0.1;
+            }
+            this.recalculateZAfter = false;
+        }
+    }
+
+
+}
+
+function createGameObject(objData){
+
+    console.log(objData);
+
+    objData.sprite = new PIXI.Sprite(getObjectTexture(objData));
+    objData.sprite.x = getXPosition(objData.type, objData.x, objData.y);
+    objData.sprite.y = getYPosition(objData.type, objData.x, objData.y);
+    objData.sprite.z = getZPosition(objData.type, objData.x, objData.y);
+
+    objData.sprite.interactive = true;
+    objData.sprite.buttonMode = true;
+
+    objData.sprite.on("click", function(){
+        console.log(objData);
+    });
+
+    objData.sprite.on("pointerover", function(){
+        objData.sprite.texture = getObjectTexture(objData, true);
+    });
+
+    objData.sprite.on("pointerout", function(){
+        objData.sprite.texture = getObjectTexture(objData, false);
+    });
+
+    //Setup Inventory
+    // createInventory(objData);
+
+    objData.update = update;
+
+    if(objData.type === OBJ_CUBOT){
+        objData.clips = getCubotAnimatedSprites();
+        objData.clips.walk_e.visible = false;
+        objData.clips.walk_n.visible = false;
+        objData.clips.walk_s.visible = false;
+        objData.clips.walk_w.visible = false;
+        game.worldLayer.addChild(objData.clips.walk_e);
+        game.worldLayer.addChild(objData.clips.walk_n);
+        game.worldLayer.addChild(objData.clips.walk_s);
+        game.worldLayer.addChild(objData.clips.walk_w);
+
+    } else {
+        game.worldLayer.addChild(objData.sprite);
+    }
+
+
+
+    return objData;
+
+}

mar/old/Tile.js

@@ -0,0 +1,92 @@
+
+
+TILE_PLAIN = 0;
+TILE_WALL = 1;
+TILE_IRON = 2;
+TILE_COPPER = 3;
+
+getTileYOffset = function(terrainType) {
+
+    if (terrainType === TILE_WALL) {
+        return -40;
+
+    } else {
+        return 0;
+    }
+
+};
+getTileXOffset = function(terrainType) {
+    return 0;
+};
+
+getTileHitBox = function(terrainType) {
+    if (terrainType === TILE_PLAIN) {
+        return new PIXI.Polygon(
+            new PIXI.Point(64, 0),
+            new PIXI.Point(128, 32),
+            new PIXI.Point(64, 64),
+            new PIXI.Point(0, 32)
+        )
+    } else if(terrainType === TILE_WALL) {
+        return new PIXI.Polygon(
+            new PIXI.Point(64, 0),
+            new PIXI.Point(128, 32),
+            new PIXI.Point(128, 72),
+            new PIXI.Point(64, 103),
+            new PIXI.Point(0, 72),
+            new PIXI.Point(0, 32)
+        );
+    }
+};
+
+TILE_TEXTURE = function(terrainType, selected) {
+
+    switch (terrainType){
+        case TILE_PLAIN:
+            return selected ? PIXI.Texture.fromFrame("tiles/plain_s") : PIXI.Texture.fromFrame("tiles/plain");
+        case TILE_WALL:
+            return selected ? PIXI.Texture.fromFrame("tiles/wall_s") : PIXI.Texture.fromFrame("tiles/wall");
+        case TILE_IRON:
+            return selected ? PIXI.Texture.fromFrame("tiles/iron") : PIXI.Texture.fromFrame("tiles/iron");
+        case TILE_COPPER:
+            return selected ? PIXI.Texture.fromFrame("tiles/copper") : PIXI.Texture.fromFrame("tiles/copper");
+    }
+};
+
+function Tile(terrainType) {
+
+
+    this.sprite = new PIXI.Sprite(TILE_TEXTURE(terrainType, false));
+    this.sprite.hitArea = getTileHitBox(terrainType);
+    this.sprite.terrainType = terrainType;
+
+    //Setup Events
+    //todo: We are assigning an event to each tile (256), is it efficient?
+    this.sprite.interactive = true;
+
+    this.sprite.on("pointerover", function() {
+        this.texture = TILE_TEXTURE(this.terrainType, true);
+
+        //TODO Show tooltip / debug info here
+    });
+
+    this.sprite.on("pointerout", function() {
+       this.texture =  TILE_TEXTURE(this.terrainType, false);
+    });
+
+    //Behave like background when clicked
+    this.sprite.on("pointerdown", pointerDown);
+    this.sprite.on("pointerup", bgPointerUp);
+    this.sprite.on("pointerupoutside", bgPointerUp);
+
+}
+
+function pointerDown(e) {
+    game.pointerdown = true;
+    game.pointerFirstClick = e.data.getLocalPosition(game.rootContainer);
+}
+
+function bgPointerUp() {
+    game.pointerdown = false;
+    game.pointerLastDrag = null;
+}

mar/old/World.js

@@ -0,0 +1,240 @@
+
+
+WORLD_WIDTH = 16;
+WORLD_HEIGHT = 16;
+
+
+/**
+ *
+ * @param terrain
+ * @constructor
+ */
+function Word(terrain) {
+
+    setupWorldLayer(this);
+   // game.worldLayer = new PIXI.Container();
+
+    this.tiles = {};
+    this.objects = [];
+
+    var self = this;
+
+    for (var x = 0; x < WORLD_HEIGHT; x++) {
+        for (var y = 0; y < WORLD_HEIGHT; y++) {
+
+            var terrainType = terrain[y * WORLD_WIDTH + x];
+
+            var tile = new Tile(terrainType);
+
+            tile.sprite.x = (x - y) * 64 + getTileXOffset(terrainType);
+            tile.sprite.y = (x + y) * 32 + getTileYOffset(terrainType);
+            tile.sprite.z = y + x;
+
+            this.tiles[x + ',' + y] = tile;
+
+            game.worldLayer.addChild(tile.sprite);
+            game.rootContainer.addChild(game.worldLayer);
+
+        }
+    }
+
+    game.worldLayer.children.sort(depthCompare);
+
+    /**
+     * Update object from parsed JSON string sent from the server
+     * @param response parsed JSON string sent from the server
+     */
+    this.updateObjects = function(response) {
+
+
+        //Mark objects as not updated
+        for(var i = 0; i < self.objects.length ; i++){
+            self.objects[i].updated = false;
+        }
+
+
+        for(var i = 0; i < response.length ; i++){
+
+            response[i].updated = true;
+
+            //Update/Create the object
+
+            var existingObject = self.getObject(response[i].id);
+            if(existingObject !== null){
+                //Object already exists
+                existingObject = updateGameObject(existingObject, response[i]);
+
+            } else {
+
+                //Object is new
+                var newObj = createGameObject(response[i]);
+                self.addObject(newObj);
+            }
+        }
+
+        //Delete not updated objects (see above comments)
+        for (var i = 0; i < self.objects.length; i++) {
+            if (!self.objects[i].updated) {
+                console.log("DEBUG: removed " + self.objects[i].id);
+                game.worldLayer.removeChild(self.objects[i].sprite);
+                self.objects.splice(i, 1);
+            }
+        }
+
+        game.worldLayer.children.sort(depthCompare);
+    };
+
+
+    /**
+     * Add an object the the 'current' objects
+     * @param object
+     */
+    this.addObject = function(object) {
+
+        self.objects.push(object);
+    };
+
+    /**
+     * Get object from the list of 'current' objects (Objects shown on the screen)
+     * @param id objectId of the object
+     */
+    this.getObject = function(id) {
+
+        for(var i = 0; i < self.objects.length; i++) {
+            if (self.objects[i].id === id) {
+                return self.objects[i];
+            }
+        }
+
+        return null;
+    };
+
+    this.update = function(terrain){
+
+        for (key in this.tiles) {
+            game.worldLayer.removeChild(this.tiles[key].sprite);
+        }
+
+        for (var j = 0; j < this.objects.length; j++) {
+            game.worldLayer.removeChild(this.objects[j].sprite);
+        }
+
+        this.tiles = {};
+        this.objects = [];
+
+        for (var x = 0; x < WORLD_HEIGHT; x++) {
+            for (var y = 0; y < WORLD_HEIGHT; y++) {
+
+                var terrainType = terrain[y * WORLD_WIDTH + x];
+
+                var tile = new Tile(terrainType);
+
+                tile.sprite.x = (x - y) * 64 + getTileXOffset(terrainType);
+                tile.sprite.y = (x + y) * 32 + getTileYOffset(terrainType);
+                tile.sprite.z = y + x;
+
+                this.tiles[x + ',' + y] = tile;
+
+                game.worldLayer.addChild(tile.sprite);
+                game.rootContainer.addChild(game.worldLayer);
+
+            }
+        }
+
+        game.worldLayer.children.sort(depthCompare);
+    }
+
+}
+
+function setupWorldLayer(world) {
+    game.worldLayer = new PIXI.Container();
+    game.worldLayer.x = 736;
+    game.worldLayer.y = -32;
+    game.rootContainer.addChild(game.worldLayer);
+
+    //NORTH
+    var arrow_north = new PIXI.Sprite(PIXI.Texture.fromFrame("ui/arrow_north"));
+    arrow_north.x = 528;
+    arrow_north.y = 224;
+    arrow_north.interactive = true;
+    arrow_north.buttonMode = true;
+    arrow_north.on("pointerover", function () {
+        arrow_north.texture = PIXI.Texture.fromFrame("ui/arrow_north_s");
+    });
+    arrow_north.on("pointerout", function () {
+        arrow_north.texture = PIXI.Texture.fromFrame("ui/arrow_north");
+    });
+    arrow_north.on("pointerdown", function () {
+        game.worldY--;
+        client.requestTerrain()
+    });
+    game.worldLayer.addChild(arrow_north);
+
+    //EAST
+    var arrow_east = new PIXI.Sprite(PIXI.Texture.fromFrame("ui/arrow_east"));
+    arrow_east.x = 528;
+    arrow_east.y = 750;
+    arrow_east.interactive = true;
+    arrow_east.buttonMode = true;
+    arrow_east.on("pointerover", function () {
+        arrow_east.texture = PIXI.Texture.fromFrame("ui/arrow_east_s");
+    });
+    arrow_east.on("pointerout", function () {
+        arrow_east.texture = PIXI.Texture.fromFrame("ui/arrow_east");
+    });
+    arrow_east.on("pointerdown", function () {
+        game.worldX++;
+        client.requestTerrain();
+    });
+    game.worldLayer.addChild(arrow_east);
+
+    //SOUTH
+    var arrow_south = new PIXI.Sprite(PIXI.Texture.fromFrame("ui/arrow_south"));
+    arrow_south.x = -496;
+    arrow_south.y = 750;
+    arrow_south.interactive = true;
+    arrow_south.buttonMode = true;
+    arrow_south.on("pointerover", function () {
+        arrow_south.texture = PIXI.Texture.fromFrame("ui/arrow_south_s");
+    });
+    arrow_south.on("pointerout", function () {
+        arrow_south.texture = PIXI.Texture.fromFrame("ui/arrow_south");
+    });
+    arrow_south.on("pointerdown", function () {
+        game.worldY++;
+        client.requestTerrain();
+    });
+    game.worldLayer.addChild(arrow_south);
+
+    //WEST
+    var arrow_west = new PIXI.Sprite(PIXI.Texture.fromFrame("ui/arrow_west"));
+    arrow_west.x = -496;
+    arrow_west.y = 224;
+    arrow_west.interactive = true;
+    arrow_west.buttonMode = true;
+    arrow_west.on("pointerover", function () {
+        arrow_west.texture = PIXI.Texture.fromFrame("ui/arrow_west_s");
+    });
+    arrow_west.on("pointerout", function () {
+        arrow_west.texture = PIXI.Texture.fromFrame("ui/arrow_west");
+    });
+    arrow_west.on("pointerdown", function () {
+        game.worldX--;
+        client.requestTerrain();
+    });
+    game.worldLayer.addChild(arrow_west)
+}
+
+/**
+ * Compare depth of two sprites based on their z property
+ */
+function depthCompare(a, b) {
+    if (a.z < b.z) {
+        return -1;
+    }
+    if (a.z > b.z) {
+        return 1;
+    }
+    return 0;
+}
+

mar/old/game-olf.js

@@ -0,0 +1,311 @@
+"use strict";
+console.log("hello")
+// --------------------------
+// MAR loop
+function gameLoop() {
+    requestAnimationFrame(gameLoop);
+
+    //UPDATE EFFECTS
+    for (var i = 0; i < MAR.effects.length; i++) {
+        MAR.effects[i].update();
+    }
+    //Update objects
+    for (var j = 0; j < MAR.objects.length; j++) {
+
+        if (MAR.objects[j].objectType === 1) {-
+            MAR.objects[j].update();
+        }
+    }
+
+    MAR.renderer.render(MAR.rootContainer);
+}
+
+var setupCallback = function () {
+    getWorldTerrain();
+    gameLoop();
+};
+
+function tick() {
+    getGameEffects();
+    getGameObjects();
+
+    //Update indicators
+    for (var i = 0; i < MAR.objects.length; i++) {
+        if (MAR.objects[i].indicator !== undefined) {
+            MAR.objects[i].indicator.updateIcon();
+        }
+    }
+
+    //Update debug text
+    MAR.timeText.text = "gameTime: " + MAR.time;
+}
+
+function getGameObjects() {
+    var xhr = new XMLHttpRequest();
+    xhr.open("GET", "./mar/objects.php?x=" + MAR.currentLocX + "&y=" + MAR.currentLocY, true);
+    xhr.onreadystatechange = function () {
+        if (xhr.readyState === 4 && xhr.status === 200) {
+            var jsonResponse = JSON.parse(xhr.responseText);
+
+            for (var i = 0; i < MAR.objects.length; i++) {
+                MAR.objects[i].updated = false;
+            }
+
+            for (var i = 0; i < jsonResponse.length; i++) {
+                var obj = getObject(jsonResponse[i].i);
+
+                if (obj !== null) {
+                    //OBJECT already exist, update
+                    obj.updated = true;
+
+                    if (obj.objectType === 1) {
+                        //Update direction
+                        obj.direction = jsonResponse[i].d;
+
+                        //Update location
+                        if (obj.x !== jsonResponse[i].x || obj.y !== jsonResponse[i].y) {
+                            //location changed
+                            moveObject(jsonResponse[i].x, jsonResponse[i].y, obj);
+                        }
+
+                        //update held item
+                        obj.heldItem = jsonResponse[i].h;
+                        //Update action
+                        obj.action = jsonResponse[i].a;
+                    } else if (obj.objectType === 3) {
+                        //Kiln object already exists, update
+                        obj.qi = jsonResponse[i].qi; //Queued Iron
+                        obj.qc = jsonResponse[i].qc; //Queued Copper
+                        obj.ci = jsonResponse[i].ci; //Cooked Iron
+                        obj.cc = jsonResponse[i].cc; //Cooked Copper
+                        obj.f = jsonResponse[i].f; //Fuel
+                    }
+
+
+                } else {
+                    var newObj = new GameObject(jsonResponse[i]);
+                    newObj.updated = true;
+                    MAR.worldLayer.addChild(newObj.sprite);
+                    MAR.objects.push(newObj);
+
+                    console.log("DEBUG: added " + newObj.id);
+                }
+            }
+
+            //Delete not updated objects (see above comments)
+            for (var i = 0; i < MAR.objects.length; i++) {
+                if (!MAR.objects[i].updated) {
+                    console.log("DEBUG: removed " + MAR.objects[i].id);
+                    MAR.worldLayer.removeChild(MAR.objects[i].sprite);
+                    MAR.objects.splice(i, 1);
+                }
+            }
+
+            MAR.worldLayer.children.sort(depthCompare);
+        }
+    };
+    xhr.send(null);
+}
+
+// --------------------------
+// Display a single effect
+function displayEffect(effect) {
+    if (effect.t === "ERROR") {
+        var newEffect = new IconEffect(effect.x, effect.y, "err_icon");
+        MAR.effects.push(newEffect);
+        addToWorldLayer(newEffect.sprite);
+    }
+    if (effect.t === "WARNING") {
+        var newEffect = new IconEffect(effect.x, effect.y, "warn_icon");
+        MAR.effects.push(newEffect);
+        addToWorldLayer(newEffect.sprite);
+    }
+    if (effect.t === "A_EMOTE") {
+        var newEffect = new IconEffect(effect.x, effect.y, "A_icon");
+        MAR.effects.push(newEffect);
+        addToWorldLayer(newEffect.sprite);
+    }
+}
+
+// --------------------------
+// Query the MAR API to get the MAR effects
+function getGameEffects() {
+
+    var xhr = new XMLHttpRequest();
+    xhr.open("GET", "./mar/effects.php?x=" + MAR.currentLocX + "&y=" + MAR.currentLocY, true);
+    xhr.onreadystatechange = function () {
+        if (xhr.readyState === 4 && xhr.status === 200) {
+            var effects = JSON.parse(xhr.responseText);
+
+            for (var i = 0; i < effects.length; i++) {
+                displayEffect(effects[i]);
+            }
+            MAR.worldLayer.children.sort(depthCompare);
+        }
+    };
+    xhr.send(null);
+}
+
+function getWorldTerrain() {
+
+    var xhr = new XMLHttpRequest();
+    xhr.open("GET", "./mar/terrain.php?x=" + MAR.currentLocX + "&y=" + MAR.currentLocY, true);
+    xhr.onreadystatechange = function () {
+        if (xhr.readyState === 4 && xhr.status === 200) {
+            var currentTerrain = JSON.parse(xhr.responseText);
+
+            //Calculate wall height
+            //First pass, set wall height to 2 for each wall tile with 3+ adjacent wall tile (diagonals don't count)
+            for (var y = 0; y < 16; y++) {
+                for (var x = 0; x < 16; x++) {
+                    var tile = new Tile(currentTerrain[x * 16 + y]);
+
+
+                    //Calculate neighbors
+                    var neighbors = 0;
+                    if (currentTerrain[x * 16 + y] === 1) {
+                        if (currentTerrain[x * 16 + y - 16] === 1 ||
+                            (currentTerrain[x * 16 + y - 16] !== undefined && currentTerrain[x * 16 + y - 16].wallHeight >= 1)) {
+                            neighbors++;
+                        } else {
+
+                        }
+                        if (currentTerrain[x * 16 + y + 16] === 1 ||
+                            (currentTerrain[x * 16 + y + 16] !== undefined && currentTerrain[x * 16 + y + 16].wallHeight >= 1)) {
+                            neighbors++;
+                        }
+                        if (currentTerrain[x * 16 + y + 1] === 1 ||
+                            (currentTerrain[x * 16 + y + 1] !== undefined && currentTerrain[x * 16 + y + 1].wallHeight >= 1)) {
+                            neighbors++;
+                        }
+                        if (currentTerrain[x * 16 + y - 1] === 1 ||
+                            (currentTerrain[x * 16 + y - 1] !== undefined && currentTerrain[x * 16 + y - 1].wallHeight >= 1)) {
+                            neighbors++;
+                        }
+
+                        if (neighbors >= 4) {
+                            tile.wallHeight++;
+                        }
+                    }
+
+
+                    tile.sprite.tileX = x;
+                    tile.sprite.tileY = y;
+
+                    tile.sprite.x += (x - y) * 64;
+                    tile.sprite.y += (x + y) * 32;
+                    tile.sprite.z += y + x;
+
+                    //A bit hacky but it'll work for now...
+                    currentTerrain[x * 16 + y] = tile;
+                }
+            }
+            //currentTerrain is no longer an array of ints but an array of Tile objects
+            //Add tiles to world layer
+            for (var i = 0; i < currentTerrain.length; i++) {
+
+
+                if (currentTerrain[i].sprite.tileId === 1) {
+                    if (currentTerrain[i].wallHeight === 1) {
+                        MAR.worldLayer.addChild(currentTerrain[i].sprite);
+                    } else if (currentTerrain[i].wallHeight === 2) {
+
+                        MAR.worldLayer.addChild(currentTerrain[i].sprite);
+                        //Add duplicate sprite on top (63 px up)
+                        var topTile = new Tile(1);
+                        topTile.sprite.tileX = currentTerrain[i].sprite.tileX;
+                        topTile.sprite.tileY = currentTerrain[i].sprite.tileY;
+                        topTile.sprite.tileId = 1;
+
+                        topTile.sprite.x = currentTerrain[i].sprite.x;
+                        topTile.sprite.y = currentTerrain[i].sprite.y - 40;
+                        topTile.sprite.z = currentTerrain[i].sprite.z + 1.1;
+                        MAR.worldLayer.addChild(topTile.sprite);
+                        MAR.tiles.push(topTile);
+                    }
+
+                } else {
+                    MAR.worldLayer.addChild(currentTerrain[i].sprite);
+                }
+
+                MAR.tiles.push(currentTerrain[i]);
+            }
+
+
+            MAR.worldLayer.children.sort(depthCompare);
+        }
+
+    };
+    xhr.send(null);
+
+}
+
+// --------------------------
+// Query the MAR API to get MAR time
+function getGameTime() {
+    var xhr = new XMLHttpRequest();
+    xhr.open("GET", "./mar/time.php", true);
+    xhr.onreadystatechange = function () {
+        if (xhr.readyState === 4 && xhr.status === 200) {
+
+            if (MAR.time !== xhr.responseText) {
+                MAR.timeChanged = true;
+                MAR.time = xhr.responseText;
+            } else {
+                MAR.timeChanged = false;
+            }
+        }
+    };
+    xhr.send(null);
+}
+
+// --------------------------
+// Change an object's location and initialise the move animation
+function moveObject(newX, newY, gameObject) {
+
+    //Resync object
+    gameObject.sprite.x = (gameObject.x - gameObject.y) * 64;
+    gameObject.sprite.y = ((gameObject.x + gameObject.y) * 32) - 16;
+
+    var tiledx = newX - gameObject.x;
+    var tiledy = newY - gameObject.y;
+
+    gameObject.dx = 0;
+    gameObject.dy = 0;
+
+    //Recalculate position
+    gameObject.x = newX;
+    gameObject.y = newY;
+
+    if (tiledx === 1) {
+        //We need to move 128px to the right and the minimum tick length is 1s.
+        //This means that we have maximum 60 frames to do the animation
+        gameObject.dx = 64 / 58;
+        gameObject.dy = 32 / 58;
+        gameObject.walking = 58;
+        //Recalculate Z order immediately
+        gameObject.sprite.z = gameObject.y + gameObject.x + 0.1;
+    } else if (tiledx === -1) {
+        gameObject.dx = -64 / 58;
+        gameObject.dy = -32 / 58;
+        gameObject.walking = 58;
+
+        //The Z order needs to be recalculated when the movement ends
+        gameObject.recalculateZAfter = true;
+    } else if (tiledy === 1) {
+        gameObject.dx = -64 / 58;
+        gameObject.dy = 32 / 58;
+        gameObject.walking = 58;
+        //Recalculate Z order immediately
+        gameObject.sprite.z = gameObject.y + gameObject.x + 0.1;
+    } else if (tiledy === -1) {
+        gameObject.dx = 64 / 58;
+        gameObject.dy = -32 / 58;
+        gameObject.walking = 58;
+        //The Z order needs to be recalculated when the movement ends
+        gameObject.recalculateZAfter = true;
+    }
+
+    MAR.worldLayer.children.sort(depthCompare);
+
+}

mar/old/setup.js

@@ -0,0 +1,826 @@
+"use strict";
+
+
+var MAR = {
+
+    RENDERER_BG: 0x282828,
+    currentLocX: 0,
+    currentLocY: 0,
+    effects: [],
+    tiles: [],
+    objects: []
+};
+
+if (fullscreen) {
+    MAR.RENDERER_WIDTH = window.innerWidth - 4;
+    MAR.RENDERER_HEIGHT = window.innerHeight - 4;
+} else {
+    MAR.RENDERER_WIDTH = document.getElementById("game").clientWidth;
+    MAR.RENDERER_HEIGHT = (window.innerHeight / 1.25);
+}
+
+// --------------------------
+// Load Sprites
+PIXI.loader
+    .add("./mar/sprites/cubot.json")
+    .add("biomass", "./mar/sprites/biomass.png")
+    .add("rocket", "./mar/sprites/rocket.png")
+    .add("kiln", "./mar/sprites/kiln.png")
+    .add("digester", "./mar/sprites/digester.png")
+    .add("arrow_north", "./mar/sprites/arrow_north.png")
+    .add("arrow_north_s", "./mar/sprites/arrow_north_s.png")
+    .add("arrow_west", "./mar/sprites/arrow_west.png")
+    .add("arrow_west_s", "./mar/sprites/arrow_west_s.png")
+    .add("arrow_south", "./mar/sprites/arrow_south.png")
+    .add("arrow_south_s", "./mar/sprites/arrow_south_s.png")
+    .add("arrow_east", "./mar/sprites/arrow_east.png")
+    .add("arrow_east_s", "./mar/sprites/arrow_east_s.png")
+    .add("plain", "./mar/sprites/sample.png")
+    .add("tile_iron", "./mar/sprites/tile_iron.png")
+    .add("tile_copper", "./mar/sprites/tile_copper.png")
+    .add("plain_s", "./mar/sprites/Tile_iso_selected.png")
+    .add("wall", "./mar/sprites/Tile_iso _wall.png")
+    .add("wall_s", "./mar/sprites/Tile_iso _wall_s.png")
+
+    .add("GOURD_PLANT", "./mar/sprites/GOURD_PLANT.png")
+    .add("GOURD_PLANT_s", "./mar/sprites/GOURD_PLANT_s.png")
+    .add("LETTUCE_PLANT", "./mar/sprites/LETTUCE_PLANT.png")
+    .add("LETTUCE_PLANT_s", "./mar/sprites/LETTUCE_PLANT_s.png")
+    .add("OAK_TREE", "./mar/sprites/OAK_TREE.png")
+    .add("egg", "./mar/sprites/egg.png")
+
+    .add("plant1", "./mar/sprites/plant1.png")
+
+    .add("err_icon", "./mar/sprites/err_icon.png")
+    .add("warn_icon", "./mar/sprites/warn_icon.png")
+    .add("A_icon", "./mar/sprites/A_icon.png");
+
+PIXI.loader
+    .on("progress", progressHandler)
+    .load(loaderCallback);
+
+
+// --------------------------
+// Handle progress change event
+function progressHandler(loader, resource) {
+    //TODO - implement loading bar
+}
+
+// --------------------------
+// Loader callback (Setup)
+function loaderCallback() {
+    setupRenderer();
+    setupBackground();
+    // setupKeyBoard();
+    setupWorldLayer();
+    setupAutoUpdate();
+    setupDebugText();
+
+
+    setupCallback();
+}
+
+function addToWorldLayer(sprite) {
+    MAR.worldLayer.addChild(sprite);
+    MAR.worldLayer.children.sort(depthCompare);
+}
+
+// --------------------------
+// Compare depth of two sprites based on their z property
+function depthCompare(a, b) {
+    if (a.z < b.z) {
+        return -1;
+    }
+    if (a.z > b.z) {
+        return 1;
+    }
+    return 0;
+}
+
+function setupDebugText() {
+    MAR.textLayer = new PIXI.Container();
+    MAR.rootContainer.addChild(MAR.textLayer);
+
+    //Debug text
+    MAR.currentTileText = new PIXI.Text("", {fontSize: 12, fontFamily: "c64_mono", fill: "white"});
+    MAR.currentTileText.position.x = MAR.RENDERER_WIDTH - 100;
+    MAR.currentTileText.position.y = 10;
+    MAR.textLayer.addChild(MAR.currentTileText);
+
+    MAR.currentWorldText = new PIXI.Text("World 0,0", {fontSize: 12, fontFamily: "c64_mono", fill: "white"});
+    MAR.currentWorldText.position.x = MAR.RENDERER_WIDTH - 150;
+    MAR.currentWorldText.position.y = 100;
+    MAR.textLayer.addChild(MAR.currentWorldText);
+
+    MAR.timeText = new PIXI.Text("gameTime: 0", {fontSize: 12, fontFamily: "c64_mono", fill: "white"});
+    MAR.timeText.position.x = MAR.RENDERER_WIDTH - 200;
+    MAR.timeText.position.y = 70;
+    MAR.textLayer.addChild(MAR.timeText);
+
+    //  Watermark
+    MAR.watermark = new PIXI.Text("Much Assembly Required V3.0", {fontSize: 20, fontFamily: "c64_mono", fill: "grey"});
+    MAR.watermark.position.x = MAR.RENDERER_WIDTH - 450;
+    MAR.watermark.position.y = MAR.RENDERER_HEIGHT - 30;
+    MAR.textLayer.addChild(MAR.watermark)
+}
+
+function setupAutoUpdate() {
+    window.setInterval(function () {
+        getGameTime();
+
+        if (MAR.timeChanged) {
+            tick();
+        }
+    }, 334);
+}
+
+function setupWorldLayer() {
+    MAR.worldLayer = new PIXI.Container();
+    MAR.worldLayer.x = 736;
+    MAR.worldLayer.y = -32;
+    MAR.rootContainer.addChild(MAR.worldLayer);
+
+    //NORTH
+    var arrow_north = new PIXI.Sprite(PIXI.loader.resources["arrow_north"].texture);
+    arrow_north.x = 528;
+    arrow_north.y = 224;
+    arrow_north.interactive = true;
+    arrow_north.buttonMode = true;
+    arrow_north.on("pointerover", function () {
+        arrow_north.texture = PIXI.loader.resources["arrow_north_s"].texture;
+    });
+    arrow_north.on("pointerout", function () {
+        arrow_north.texture = PIXI.loader.resources["arrow_north"].texture;
+    });
+    arrow_north.on("pointerdown", function () {
+        clearWorldLayer();
+        MAR.currentLocY--;
+        getWorldTerrain();
+        getGameObjects();
+        updateCurrentWorldText();
+    });
+    MAR.worldLayer.addChild(arrow_north);
+
+    //EAST
+    var arrow_east = new PIXI.Sprite(PIXI.loader.resources["arrow_east"].texture);
+    arrow_east.x = 528;
+    arrow_east.y = 750;
+    arrow_east.interactive = true;
+    arrow_east.buttonMode = true;
+    arrow_east.on("pointerover", function () {
+        arrow_east.texture = PIXI.loader.resources["arrow_east_s"].texture;
+    });
+    arrow_east.on("pointerout", function () {
+        arrow_east.texture = PIXI.loader.resources["arrow_east"].texture;
+    });
+    arrow_east.on("pointerdown", function () {
+        clearWorldLayer();
+        MAR.currentLocX++;
+        getWorldTerrain();
+        getGameObjects();
+        updateCurrentWorldText();
+    });
+    MAR.worldLayer.addChild(arrow_east);
+
+    //SOUTH
+    var arrow_south = new PIXI.Sprite(PIXI.loader.resources["arrow_south"].texture);
+    arrow_south.x = -496;
+    arrow_south.y = 750;
+    arrow_south.interactive = true;
+    arrow_south.buttonMode = true;
+    arrow_south.on("pointerover", function () {
+        arrow_south.texture = PIXI.loader.resources["arrow_south_s"].texture;
+    });
+    arrow_south.on("pointerout", function () {
+        arrow_south.texture = PIXI.loader.resources["arrow_south"].texture;
+    });
+    arrow_south.on("pointerdown", function () {
+        clearWorldLayer();
+        MAR.currentLocY++;
+        getWorldTerrain();
+        getGameObjects();
+        updateCurrentWorldText();
+    });
+    MAR.worldLayer.addChild(arrow_south);
+
+    //WEST
+    var arrow_west = new PIXI.Sprite(PIXI.loader.resources["arrow_west"].texture);
+    arrow_west.x = -496;
+    arrow_west.y = 224;
+    arrow_west.interactive = true;
+    arrow_west.buttonMode = true;
+    arrow_west.on("pointerover", function () {
+        arrow_west.texture = PIXI.loader.resources["arrow_west_s"].texture;
+    });
+    arrow_west.on("pointerout", function () {
+        arrow_west.texture = PIXI.loader.resources["arrow_west"].texture;
+    });
+    arrow_west.on("pointerdown", function () {
+        clearWorldLayer();
+        MAR.currentLocX--;
+        getWorldTerrain();
+        getGameObjects();
+        updateCurrentWorldText();
+    });
+    MAR.worldLayer.addChild(arrow_west)
+}
+
+function clearWorldLayer() {
+    for (var i = 0; i < MAR.tiles.length; i++) {
+        MAR.worldLayer.removeChild(MAR.tiles[i].sprite);
+    }
+
+    for (var j = 0; j < MAR.objects.length; j++) {
+        MAR.worldLayer.removeChild(MAR.objects[j].sprite);
+
+        if (MAR.objects[j].indicator !== undefined) {
+            MAR.worldLayer.removeChild(MAR.objects[j].indicator.sprite);
+        }
+        //todo Remove inv indicator as well
+    }
+
+    MAR.objects = [];
+    MAR.tiles = [];
+}
+
+function updateCurrentWorldText() {
+    MAR.currentWorldText.text = MAR.currentLocX + "," + MAR.currentLocY;
+}
+
+function setupKeyBoard() {
+    //SETUP KEYBOARD LISTENERS
+    // var leftArrow = keyboard(37);
+    // var rightArrow = keyboard(39);
+    var downArrow = keyboard(40);
+    var upArrow = keyboard(38);
+
+    downArrow.press = function () {
+
+        MAR.worldLayer.scale.x -= 0.1;
+        MAR.worldLayer.scale.y -= 0.1;
+
+    };
+
+    upArrow.press = function () {
+
+        MAR.worldLayer.scale.x += 0.1;
+        MAR.worldLayer.scale.y += 0.1;
+    }
+}
+
+function setupBackground() {
+    //SETUP BACKGROUND LAYER & PANNING
+    MAR.bgLayer = new PIXI.Container();
+    MAR.rootContainer.addChild(MAR.bgLayer);
+    MAR.bg = new PIXI.Sprite();
+    MAR.bg.interactive = true;
+    MAR.bg.hitArea = new PIXI.Rectangle(0, 0, MAR.RENDERER_WIDTH, MAR.RENDERER_HEIGHT);
+    MAR.bg.on("pointerover", function () {
+        MAR.currentTileText.text = "-";
+    });
+    MAR.bg.on("pointerdown", function (e) {
+        MAR.pointerdown = true;
+        MAR.pointerFirstClick = e.data.getLocalPosition(MAR.rootContainer);
+    });
+    MAR.bg.on("pointerup", function () {
+        MAR.pointerdown = false;
+        MAR.pointerLastDrag = null;
+    });
+    MAR.bg.on("pointerupoutside", function () {
+        MAR.pointerdown = false;
+        MAR.pointerLastDrag = null;
+    });
+    MAR.bg.on("pointermove", function (e) {
+        if (MAR.pointerdown === true) {
+
+            var currentMouse = e.data.getLocalPosition(MAR.rootContainer);
+
+            if (MAR.pointerLastDrag != null) {
+                MAR.worldLayer.position.x += currentMouse.x - MAR.pointerLastDrag.x;
+                MAR.worldLayer.position.y += currentMouse.y - MAR.pointerLastDrag.y;
+            } else {
+                MAR.worldLayer.position.x += currentMouse.x - MAR.pointerFirstClick.x;
+                MAR.worldLayer.position.y += currentMouse.y - MAR.pointerFirstClick.y;
+            }
+
+            MAR.pointerLastDrag = currentMouse;
+        }
+    });
+    MAR.bgLayer.addChild(MAR.bg);
+}
+
+function setupRenderer() {
+    MAR.renderer = PIXI.autoDetectRenderer(256, 256);
+    document.getElementById("game").appendChild(MAR.renderer.view);
+    MAR.rootContainer = new PIXI.Container();
+    MAR.renderer.backgroundColor = MAR.RENDERER_BG;
+    MAR.renderer.resize(MAR.RENDERER_WIDTH, MAR.RENDERER_HEIGHT);
+
+
+    window.onresize = function (event) {
+        if (fullscreen) {
+            MAR.RENDERER_WIDTH = window.innerWidth - 4;
+            MAR.RENDERER_HEIGHT = window.innerHeight - 4;
+        } else {
+            MAR.RENDERER_WIDTH = document.getElementById("game").clientWidth;
+            MAR.RENDERER_HEIGHT = (window.innerHeight / 1.25);
+        }
+
+        MAR.renderer.resize(MAR.RENDERER_WIDTH, MAR.RENDERER_HEIGHT);
+    }
+
+}
+
+// --------------------------
+//From https://github.com/kittykatattack/learningPixi#keyboard
+function keyboard(keyCode) {
+    var key = {};
+    key.code = keyCode;
+    key.isDown = false;
+    key.isUp = true;
+    key.press = undefined;
+    key.release = undefined;
+
+    //The downHandler
+    key.downHandler = function (event) {
+        if (event.keyCode === key.code) {
+            if (key.isUp && key.press) key.press();
+            key.isDown = true;
+            key.isUp = false;
+        }
+        event.preventDefault();
+    };
+
+    //The upHandler
+    key.upHandler = function (event) {
+        if (event.keyCode === key.code) {
+            if (key.isDown && key.release) key.release();
+            key.isDown = false;
+            key.isUp = true;
+        }
+        event.preventDefault();
+    };
+
+    //Attach event listeners
+    window.addEventListener(
+        "keydown", key.downHandler.bind(key), false
+    );
+    window.addEventListener(
+        "keyup", key.upHandler.bind(key), false
+    );
+    return key;
+}
+
+
+// --------------------------
+// Classes
+
+// Particle effect
+function ParticleEffect(x, y, bp) {
+    this.x = x;
+    this.y = y;
+    this.bluePrint = bp;
+    this.framesLeft = bp.framesCount;
+
+}
+
+ParticleEffect.prototype.graphics = new PIXI.Graphics();
+ParticleEffect.prototype.particles = [];
+ParticleEffect.prototype.update = function () {
+
+    this.graphics.clear();
+    this.framesLeft--;
+
+    //Add new particles
+    while (this.particles.length < this.bluePrint.particleCount && this.framesLeft > 0) {
+        this.particles.push(this.bluePrint.createParticle(this.x, this.y));
+    }
+
+    //Draw & update particles
+    for (var i = 0; i < this.particles.length; i++) {
+
+        var p = this.particles[i];
+
+        var g = this.graphics;
+
+        g.beginFill(p.color);
+        g.drawRect(p.x, p.y, p.size, p.size);
+        g.endFill();
+
+        p.y += p.dy;
+        p.x += p.dx;
+        p.ttl--;
+    }
+    //Delete dead particles
+    var particles_ = this.particles.slice(); //Copy array
+    for (var j = 0; j < particles_.length; j++) {
+
+        if (particles_[j].ttl <= 0) {
+            this.particles.splice(j, 1);
+        }
+    }
+    //Delete effect
+    if (this.particles.length <= 0) {
+        MAR.rootContainer.removeChild(this.graphics);
+    }
+
+};
+
+//Icon effect
+function IconEffect(x, y, resourceName) {
+    this.framesLeft = 55;
+    this.sprite = new PIXI.Sprite(PIXI.loader.resources[resourceName].texture);
+
+    this.sprite.alpha = 0.9;
+
+    this.sprite.x = ((x - y) * 64) + 40;
+    this.sprite.y = ((x + y) * 32) - 45;
+    this.sprite.z = y + x + 0.2;
+
+}
+
+IconEffect.prototype.update = function () {
+
+    if (this.framesLeft < 30) {
+        this.sprite.alpha = (this.framesLeft / 40);
+
+        //Remove itself
+        if (this.framesLeft === 0) {
+            MAR.rootContainer.removeChild(this.sprite);
+        }
+    }
+
+    this.framesLeft--;
+};
+
+//Game object
+function GameObject(objData) {
+
+    this.objectType = objData.t;
+    this.x = objData.x;
+    this.y = objData.y;
+    this.direction = objData.d;
+    this.id = objData.i;
+    this.animSpeed = 1;
+    this.waitTicks = this.animSpeed;
+
+
+    //Create sprite
+    if (this.objectType === 1) {
+
+        this.heldItem = objData.h;
+        this.action = objData.a;
+
+        //Tortoise
+        var sprite = null;
+        if (this.direction === 0) {
+            //North
+            sprite = new PIXI.Sprite(PIXI.Texture.fromFrame("walk_n/0001"));
+        } else if (this.direction === 1) {
+            //East
+            sprite = new PIXI.Sprite(PIXI.Texture.fromFrame("walk_n/0001"));
+        } else if (this.direction === 2) {
+            //South
+            sprite = new PIXI.Sprite(PIXI.Texture.fromFrame("walk_n/0001"));
+        } else if (this.direction === 3) {
+            //West
+            sprite = new PIXI.Sprite(PIXI.Texture.fromFrame("walk_n/0001"));
+        }
+        sprite.y = ((this.x + this.y) * 32) - 8;
+        sprite.x = (this.x - this.y) * 64;
+        sprite.z = this.y + this.x + 0.1;
+        this.sprite = sprite;
+
+        //Add inventory indicator
+        this.indicator = new InventoryIndicator(this);
+        this.indicator.sprite = new PIXI.Text("", {fontSize: 12, fontFamily: "c64_mono", fill: "white"});//Will be replace by a texture
+        this.indicator.updateIcon = function () {
+            if (this.parentObj.heldItem === 1) {
+                this.sprite.text = "Biomass";
+            } else if (this.parentObj.heldItem === 2) {
+                this.sprite.text = "CH3OH";
+            } else if (this.parentObj.heldItem === 3) {
+                this.sprite.text = "Fe";
+            } else if (this.parentObj.heldItem === 4) {
+                this.sprite.text = "Cu";
+            } else if (this.parentObj.heldItem === 5) {
+                this.sprite.text = "Fe pl8";
+            } else if (this.parentObj.heldItem === 6) {
+                this.sprite.text = "Cu pl8";
+            } else {
+                this.sprite.text = "";
+            }
+
+        };
+        this.indicator.updateIcon();
+        this.indicator.updatePos();
+        addToWorldLayer(this.indicator.sprite);
+
+    } else if (this.objectType === 2) {
+        //Plant
+        var sprite = new PIXI.Sprite(PIXI.loader.resources["plant1"].texture); //Todo handle different plant styles
+        sprite.x = (this.x - this.y) * 64 + 32;
+        sprite.y = ((this.x + this.y) * 32) - 26;
+        sprite.z = this.y + this.x + 0.1;
+        this.sprite = sprite;
+
+        //todo life bar thingy indicator
+    } else if (this.objectType === 3) {
+        //Kiln
+        this.qi = objData.qi; //Queued Iron
+        this.qc = objData.qc; //Queued Copper
+        this.ci = objData.ci; //Cooked Iron
+        this.cc = objData.cc; //Cooked Copper
+        this.f = objData.f; //fuel
+
+        var sprite = new PIXI.Sprite(PIXI.loader.resources["kiln"].texture);
+        sprite.x = ((this.x - this.y) * 64);
+        sprite.y = ((this.x + this.y) * 32) - 58;
+        sprite.z = this.y + this.x + 0.1;
+        this.sprite = sprite;
+
+        //Add inventory indicator
+        this.indicator = new InventoryIndicator(this);
+        this.indicator.sprite = new PIXI.Text("", {fontSize: 12, fontFamily: "c64_mono", fill: "white"});//Will be replace by a texture
+        this.indicator.updateIcon = function () {
+            this.sprite.text = this.parentObj.qc + ":" + this.parentObj.qi + "\n" +
+                this.parentObj.cc + ":" + this.parentObj.ci + "\nf:" + this.parentObj.f;
+        };
+        this.indicator.updateIcon();
+        this.indicator.updatePos();
+        addToWorldLayer(this.indicator.sprite);
+
+        //todo life bar thingy indicator
+    } else if (this.objectType === 4) {
+        //Digester
+        var sprite = new PIXI.Sprite(PIXI.loader.resources["digester"].texture);
+        sprite.x = ((this.x - this.y) * 64) - 64;
+        sprite.y = ((this.x + this.y) * 32) - 64;
+        sprite.z = this.y + this.x + 11.1;
+        this.sprite = sprite;
+
+        //todo life bar thingy indicator
+        //todo inventory indicator
+    } else if (this.objectType === 5) {
+        //Rocket
+        var sprite = new PIXI.Sprite(PIXI.loader.resources["rocket"].texture);
+        sprite.x = (this.x - this.y) * 64;
+        sprite.y = ((this.x + this.y) * 32) - 128;
+        sprite.z = this.y + this.x + 0.1;
+        this.sprite = sprite;
+
+        //todo life bar thingy indicator
+        //todo progress indicator
+    }
+
+
+}
+
+GameObject.prototype.update = function () {
+
+
+    if (this.walking === undefined) {
+
+        this.walking = 0;
+    } else if (this.walking > 0) {
+        //The object has more walking frames to do
+        this.sprite.x += this.dx;
+        this.sprite.y += this.dy;
+
+        this.walking--;
+
+        if (this.walking === 0) {
+            //Finished walking cycle
+            if (this.recalculateZAfter) {
+                this.sprite.z = this.y + this.x + 0.1;
+                this.recalculateZAfter = false;
+            }
+        } else {
+            //Play 10 first frames then loop frames 10-30
+            if (this.frame === undefined) {
+                this.frame = 1;
+            } else if (this.frame === 30) {
+                this.frame = 10;
+            } else {
+                if (this.waitTicks === 0) {
+                    this.frame++;
+                    this.waitTicks = this.animSpeed;
+                } else {
+                    this.waitTicks--;
+                }
+            }
+        }
+    }
+
+
+    if ((this.digging === undefined || isNaN(this.digging)) && this.action === 1) {
+        //Just started digging animation
+        console.log("started digging");
+        this.digging = 1;
+        this.action = 0;
+    } else {
+        //Continue digging animation
+        this.digging++;
+
+        if (this.digging === 41) {
+            //Reached end of animation
+            this.digging = undefined;
+        }
+    }
+
+    if (this.direction === 0) {
+        //North
+        if (this.walking !== 0) {
+            this.sprite.texture = PIXI.Texture.fromFrame("walk_n/" + ("0000" + this.frame).slice(-4));
+        } else if (this.digging > 0) {
+            //Digging
+            this.sprite.texture = PIXI.Texture.fromFrame("dig_n/" + ("0000" + this.digging).slice(-4));
+
+        } else {
+            this.sprite.texture = PIXI.Texture.fromFrame("walk_n/0001");
+        }
+
+    } else if (this.direction === 1) {
+        //East
+        if (this.walking !== 0) {
+            this.sprite.texture = PIXI.Texture.fromFrame("walk_e/" + ("0000" + this.frame).slice(-4));
+        } else if (this.digging > 0) {
+            //Digging
+            this.sprite.texture = PIXI.Texture.fromFrame("dig_e/" + ("0000" + this.digging).slice(-4));
+
+        } else {
+            this.sprite.texture = PIXI.Texture.fromFrame("walk_e/0001");
+        }
+    } else if (this.direction === 2) {
+        //South
+        if (this.walking !== 0) {
+            this.sprite.texture = PIXI.Texture.fromFrame("walk_s/" + ("0000" + this.frame).slice(-4));
+        } else if (this.digging > 0) {
+            //Digging
+            this.sprite.texture = PIXI.Texture.fromFrame("dig_s/" + ("0000" + this.digging).slice(-4));
+
+        } else {
+            this.sprite.texture = PIXI.Texture.fromFrame("walk_s/0001");
+        }
+
+    } else if (this.direction === 3) {
+        //West
+        if (this.walking !== 0) {
+            this.sprite.texture = PIXI.Texture.fromFrame("walk_w/" + ("0000" + this.frame).slice(-4));
+        } else if (this.digging > 0) {
+            //Digging
+            this.sprite.texture = PIXI.Texture.fromFrame("dig_w/" + ("0000" + this.digging).slice(-4));
+
+        } else {
+            this.sprite.texture = PIXI.Texture.fromFrame("walk_w/0001");
+        }
+    }
+
+    //Sync indicator icon location and z order
+    this.indicator.sprite.x = this.sprite.x;
+    this.indicator.sprite.y = this.sprite.y;
+    this.indicator.sprite.z = this.sprite.z + 0.1;
+
+    MAR.worldLayer.children.sort(depthCompare);
+};
+
+
+//Tile
+function Tile(terrainType) {
+
+    if (terrainType === 0) {
+        this.sprite = new PIXI.Sprite(PIXI.loader.resources["plain"].texture);
+        this.sprite.x = 0;
+        this.sprite.y = 0;
+        this.sprite.z = 0;
+
+        this.sprite.hitArea = new PIXI.Polygon(
+            new PIXI.Point(64, 0),
+            new PIXI.Point(128, 32),
+            new PIXI.Point(64, 64),
+            new PIXI.Point(0, 32)
+        );
+
+    } else if (terrainType === 1) {
+        this.sprite = new PIXI.Sprite(PIXI.loader.resources["wall"].texture);
+        this.sprite.x = 0;
+        this.sprite.y = -40;
+        this.sprite.z = 0;
+
+        this.sprite.hitArea = new PIXI.Polygon(
+            new PIXI.Point(64, 0),
+            new PIXI.Point(128, 32),
+            new PIXI.Point(128, 72),
+            new PIXI.Point(64, 103),
+            new PIXI.Point(0, 72),
+            new PIXI.Point(0, 32)
+        );
+
+        this.wallHeight = 1;
+    } else if (terrainType === 2) {
+
+        this.sprite = new PIXI.Sprite(PIXI.loader.resources["tile_iron"].texture);
+        this.sprite.x = 0;
+        this.sprite.y = 0;
+        this.sprite.z = 0;
+
+        this.sprite.hitArea = new PIXI.Polygon(
+            new PIXI.Point(64, 0),
+            new PIXI.Point(128, 32),
+            new PIXI.Point(64, 64),
+            new PIXI.Point(0, 32)
+        );
+    } else if (terrainType === 3) {
+        this.sprite = new PIXI.Sprite(PIXI.loader.resources["tile_copper"].texture);
+        this.sprite.x = 0;
+        this.sprite.y = 0;
+        this.sprite.z = 0;
+
+        this.sprite.hitArea = new PIXI.Polygon(
+            new PIXI.Point(64, 0),
+            new PIXI.Point(128, 32),
+            new PIXI.Point(64, 64),
+            new PIXI.Point(0, 32)
+        );
+    }
+    this.sprite.tileId = terrainType;
+
+    //Assigning event to each tile inefficient?
+    this.sprite.interactive = true;
+
+    this.sprite.on("pointerover", function () {
+        var tileName = "null";
+        //Change tile texture to indicate hover state
+        if (this.tileId === 0) {
+            this.texture = PIXI.loader.resources["plain_s"].texture;
+            tileName = "plain";
+        } else if (this.tileId === 1) {
+            this.texture = PIXI.loader.resources["wall_s"].texture;
+            tileName = "wall";
+        }//todo add other tiles
+
+        //Change info text
+        //todo make this better
+        MAR.currentTileText.text = "(" + this.tileX + "," + this.tileY + "," + this.z + ")\n" + tileName;
+    });
+
+    this.sprite.on("pointerout", function () {
+        //Change tile texture to indicate hover state
+        if (this.tileId === 0) {
+            this.texture = PIXI.loader.resources["plain"].texture;
+        } else if (this.tileId === 1) {
+            this.texture = PIXI.loader.resources["wall"].texture;
+        }
+    });
+    //Behave like background when clicked
+    this.sprite.on("pointerdown", pointerDown);
+    this.sprite.on("pointerup", bgPointerUp);
+    this.sprite.on("pointerupoutside", bgPointerUp);
+
+}
+
+function pointerDown(e) {
+    MAR.pointerdown = true;
+    MAR.pointerFirstClick = e.data.getLocalPosition(MAR.rootContainer);
+}
+
+function bgPointerUp() {
+    MAR.pointerdown = false;
+    MAR.pointerLastDrag = null;
+}
+
+// --------------------------
+// Get an object from the current World's object list
+function getObject(id) {
+
+    for (var i = 0; i < MAR.objects.length; i++) {
+        if (MAR.objects[i].id === id) {
+            return MAR.objects[i];
+        }
+    }
+
+    return null;
+
+}
+
+// --------------------------
+//Integer distance between 2 tiles
+function distance(x1, y1, x2, y2) {
+    return Math.abs(x1 - x2) + Math.abs(y1 - y2)
+}
+
+//Inventory indicator
+function InventoryIndicator(parentObj, sprite) {
+    this.parentObj = parentObj;
+    this.sprite = sprite;
+}
+
+InventoryIndicator.prototype.updatePos = function () {
+    this.sprite.x = this.parentObj.sprite.x; //todo add offSetX property
+    this.sprite.y = this.parentObj.sprite.y;
+    this.sprite.z = this.parentObj.sprite.z + 0.1;
+};
+
+InventoryIndicator.prototype.updateIcon = function () {
+    console.log("FIXME: forgot to define updateIcon");
+};