Fix flickering issue by having singleton sprites; add loading priority; load levels from source

index.js

@@ -1,11 +1,53 @@
 const express = require('express');
 const path = require('path');
+const fs = require('fs');
+
+const MAP_LAYERS=2;
 
 const app = express();
 app.route('/').get((req, res) => {
   res.sendFile(path.join(__dirname, 'index.html'));
 });
 
+app.route('/levels').get((req, res) => {
+  fs.readFile(path.join(__dirname, 'level-all.bbiy'), 'utf8', (err, data) => {
+    if (err) {
+      console.log(err);
+      return;
+    }
+
+    const levels = [];
+    const lines = data.split('\r\n');
+    do {
+      const levelName = lines.shift();
+      if (!levelName) {
+        break;
+      }
+      const [xDim, yDim] = lines.shift().split(' x ').map((x) => parseInt(x));
+
+      let level = Array(yDim).fill(null).map(() => Array(xDim).fill(null).map(() => []));
+      for (let i = 0; i < MAP_LAYERS; i++) {
+        for (let y = 0; y < yDim; y++) {
+          const line = lines.shift().split('');
+          for (let x = 0; x < xDim; x++) {
+            if (line[x] !== ' ') {
+              level[y][x].push(line[x]);
+            }
+          }
+        }
+      }
+      levels.push({
+        levelName,
+        gridSize: {xDim, yDim},
+        level,
+      });
+    } while (lines.length);
+
+    // Send the array of objects
+    res.send(levels);
+  });
+});
+
 app.use(express.static('.'));
 
 app.listen(3000, () => {

src/bootstrap.js

@@ -1,12 +1,13 @@
 game.bootstrap = (() => {
   const scripts = [
-    { src: ['src/utils/objectEquivalence.js', 'src/utils/unitizeVector.js', 'src/utils/clamp.js'], id: 'utils'},
+    { src: ['src/utils/objectEquivalence.js', 'src/utils/unitizeVector.js', 'src/utils/clamp.js', 'src/utils/loadLevel.js'], id: 'utils'},
-    { src: ['src/render/graphics.js'], id: 'graphics' },
+    { src: ['src/render/graphics.js', 'src/render/sprites.js'], id: 'graphics' },
     { src: ['src/components/component.js'], id: 'component' },
     { 
       src: [
         'src/components/position.js', 'src/components/momentum.js', 'src/components/gridPosition.js',
         'src/components/appearence.js', 'src/components/controllable.js', 'src/components/pushable.js',
+        'src/components/loadPriority.js', 
       ],
       id: 'components'
     },
@@ -69,6 +70,7 @@ game.bootstrap = (() => {
   }
 
   const loadAssets = function() {
+    game.assets = {};
     const promises = [];
     for (let key in assets) {
       promises.push(loadAsset(assets[key], (asset) => {
@@ -82,8 +84,14 @@ game.bootstrap = (() => {
     }));
   }
 
-  game.assets = {};
+  const loadLevels = function() {
-  loadAssets().then(() => {
+    game.levels = [];
+    fetch('/levels')
+      .then((r) => r.json())
+      .then((r) => game.levels = r);
+  }
+
+  Promise.all([loadAssets(), loadLevels()]).then(() => {
     loadScripts(() => game.initialize());
   })
 })();

src/components/loadPriority.js

@@ -0,0 +1 @@
+game.components.LoadPriority = ({priority}) => game.Component('loadPriority', {priority});

src/entities/bigblue.js

@@ -1,13 +1,11 @@
 game.createBigBlue = () => {
   const bigBlue = game.Entity();
-  bigBlue.addComponent(game.components.Position({x: 0, y: 0}));
+  bigBlue.addComponent(game.components.LoadPriority({priority: 1}));
   bigBlue.addComponent(game.components.Appearance({rot: 0, width: 100, height: 100}));
-  bigBlue.sprite = game.graphics.Sprite({
+  bigBlue.sprite = game.sprites.bigBlue;
-    image: game.assets.bigblue,
+  
-    spriteHeight: 24,
+  // TODO: Remove this
-    spriteWidth: 24,
+  bigBlue.addComponent(game.components.Controllable({controls: ['left', 'right', 'up', 'down']}));
-    numFrames: 3,
+
-    timePerFrame: 100,
-  });
   return bigBlue;
 }

src/entities/flag.js

@@ -1,13 +1,7 @@
 game.createFlag = () => {
   const flag = game.Entity();
-  flag.addComponent(game.components.Position({x: 0, y: 0}));
+  flag.addComponent(game.components.LoadPriority({priority: 2}));
   flag.addComponent(game.components.Appearance({rot: 0, width: 100, height: 100}));
-  flag.sprite = game.graphics.Sprite({
+  flag.sprite = game.sprites.flag;
-    image: game.assets.flag,
-    spriteHeight: 24,
-    spriteWidth: 24,
-    numFrames: 3,
-    timePerFrame: 100,
-  });
   return flag;
 }

src/entities/floor.js

@@ -1,13 +1,7 @@
 game.createFloor = () => {
   const floor = game.Entity();
-  floor.addComponent(game.components.Position({x: 0, y: 0}));
+  floor.addComponent(game.components.LoadPriority({priority: 5}));
   floor.addComponent(game.components.Appearance({rot: 0, width: 100, height: 100}));
-  floor.sprite = game.graphics.Sprite({
+  floor.sprite = game.sprites.floor;
-    image: game.assets.floor,
-    spriteHeight: 24,
-    spriteWidth: 24,
-    numFrames: 3,
-    timePerFrame: 100,
-  });
   return floor;
 }

src/entities/grass.js

@@ -1,13 +1,7 @@
 game.createGrass = () => {
   const grass = game.Entity();
-  grass.addComponent(game.components.Position({x: 0, y: 0}));
+  grass.addComponent(game.components.LoadPriority({priority: 6}));
   grass.addComponent(game.components.Appearance({rot: 0, width: 100, height: 100}));
-  grass.sprite = game.graphics.Sprite({
+  grass.sprite = game.sprites.grass;
-    image: game.assets.grass,
-    spriteHeight: 24,
-    spriteWidth: 24,
-    numFrames: 3,
-    timePerFrame: 100,
-  });
   return grass;
 }

src/entities/hedge.js

@@ -1,13 +1,7 @@
 game.createHedge = () => {
   const hedge = game.Entity();
-  hedge.addComponent(game.components.Position({x: 0, y: 0}));
+  hedge.addComponent(game.components.LoadPriority({priority: 6}));
   hedge.addComponent(game.components.Appearance({rot: 0, width: 100, height: 100}));
-  hedge.sprite = game.graphics.Sprite({
+  hedge.sprite = game.sprites.hedge;
-    image: game.assets.hedge,
-    spriteHeight: 24,
-    spriteWidth: 24,
-    numFrames: 3,
-    timePerFrame: 100,
-  });
   return hedge;
 }

src/entities/liquid.js

@@ -1,5 +1,7 @@
 game.createLiquid = () => {
+  // TODO: Split this into two entities: water and lava
   const liquid = game.Entity();
+  liquid.addComponent(game.components.LoadPriority({priority: 5}));
   liquid.addComponent(game.components.Position({x: 0, y: 0}));
   liquid.addComponent(game.components.Appearance({rot: 0, width: 100, height: 100}));
   liquid.sprite = game.graphics.Sprite({

src/entities/rock.js

@@ -1,13 +1,11 @@
 game.createRock = () => {
   const rock = game.Entity();
-  rock.addComponent(game.components.Position({x: 0, y: 0}));
+  rock.addComponent(game.components.LoadPriority({priority: 2}));
   rock.addComponent(game.components.Appearance({rot: 0, width: 100, height: 100}));
-  rock.sprite = game.graphics.Sprite({
+  rock.sprite = game.sprites.rock;
-    image: game.assets.rock,
+
-    spriteHeight: 24,
+  //TODO: Remove this
-    spriteWidth: 24,
+  rock.addComponent(game.components.Pushable());
-    numFrames: 3,
+
-    timePerFrame: 100,
-  });
   return rock;
 }

src/entities/wall.js

@@ -1,13 +1,7 @@
 game.createWall = () => {
   const wall = game.Entity();
-  wall.addComponent(game.components.Position({x: 0, y: 0}));
+  wall.addComponent(game.components.LoadPriority({priority: 3}));
   wall.addComponent(game.components.Appearance({rot: 0, width: 100, height: 100}));
-  wall.sprite = game.graphics.Sprite({
+  wall.sprite = game.sprites.wall;
-    image: game.assets.wall,
-    spriteHeight: 24,
-    spriteWidth: 24,
-    numFrames: 3,
-    timePerFrame: 100,
-  });
   return wall;
 }

src/entities/wordBigBlue.js

@@ -1,13 +1,7 @@
 game.createWordBigBlue = () => {
   const wordBigBlue = game.Entity();
-  wordBigBlue.addComponent(game.components.Position({x: 0, y: 0}));
+  wordBigBlue.addComponent(game.components.LoadPriority({priority: 3}));
   wordBigBlue.addComponent(game.components.Appearance({rot: 0, width: 100, height: 100}));
-  wordBigBlue.sprite = game.graphics.Sprite({
+  wordBigBlue.sprite = game.sprites.wordBigBlue;
-    image: game.assets.wordBigBlue,
-    spriteHeight: 24,
-    spriteWidth: 24,
-    numFrames: 3,
-    timePerFrame: 100,
-  });
   return wordBigBlue;
 }

src/entities/wordFlag.js

@@ -1,13 +1,7 @@
 game.createWordFlag = () => {
   const wordFlag = game.Entity();
-  wordFlag.addComponent(game.components.Position({x: 0, y: 0}));
+  wordFlag.addComponent(game.components.LoadPriority({priority: 3}));
   wordFlag.addComponent(game.components.Appearance({rot: 0, width: 100, height: 100}));
-  wordFlag.sprite = game.graphics.Sprite({
+  wordFlag.sprite = game.sprites.wordFlag;
-    image: game.assets.wordFlag,
-    spriteHeight: 24,
-    spriteWidth: 24,
-    numFrames: 3,
-    timePerFrame: 100,
-  });
   return wordFlag;
 }

src/entities/wordIs.js

@@ -1,13 +1,7 @@
 game.createWordIs = () => {
   const wordIs = game.Entity();
-  wordIs.addComponent(game.components.Position({x: 0, y: 0}));
+  wordIs.addComponent(game.components.LoadPriority({priority: 3}));
   wordIs.addComponent(game.components.Appearance({rot: 0, width: 100, height: 100}));
-  wordIs.sprite = game.graphics.Sprite({
+  wordIs.sprite = game.sprites.wordIs;
-    image: game.assets.wordIs,
-    spriteHeight: 24,
-    spriteWidth: 24,
-    numFrames: 3,
-    timePerFrame: 100,
-  });
   return wordIs;
 }

src/entities/wordKill.js

@@ -1,13 +1,7 @@
 game.createWordKill = () => {
   const wordKill = game.Entity();
-  wordKill.addComponent(game.components.Position({x: 0, y: 0}));
+  wordKill.addComponent(game.components.LoadPriority({priority: 3}));
   wordKill.addComponent(game.components.Appearance({rot: 0, width: 100, height: 100}));
-  wordKill.sprite = game.graphics.Sprite({
+  wordKill.sprite = game.sprites.wordKill;
-    image: game.assets.wordKill,
-    spriteHeight: 24,
-    spriteWidth: 24,
-    numFrames: 3,
-    timePerFrame: 100,
-  });
   return wordKill;
 }

src/entities/wordLava.js

@@ -1,13 +1,7 @@
 game.createWordLava = () => {
   const wordLava = game.Entity();
-  wordLava.addComponent(game.components.Position({x: 0, y: 0}));
+  wordLava.addComponent(game.components.LoadPriority({priority: 3}));
   wordLava.addComponent(game.components.Appearance({rot: 0, width: 100, height: 100}));
-  wordLava.sprite = game.graphics.Sprite({
+  wordLava.sprite = game.sprites.wordLava;
-    image: game.assets.wordLava,
-    spriteHeight: 24,
-    spriteWidth: 24,
-    numFrames: 3,
-    timePerFrame: 100,
-  });
   return wordLava;
 }

src/entities/wordPush.js

@@ -1,13 +1,7 @@
 game.createWordPush = () => {
   const wordPush = game.Entity();
-  wordPush.addComponent(game.components.Position({x: 0, y: 0}));
+  wordPush.addComponent(game.components.LoadPriority({priority: 3}));
   wordPush.addComponent(game.components.Appearance({rot: 0, width: 100, height: 100}));
-  wordPush.sprite = game.graphics.Sprite({
+  wordPush.sprite = game.sprites.wordPush;
-    image: game.assets.wordPush,
-    spriteHeight: 24,
-    spriteWidth: 24,
-    numFrames: 3,
-    timePerFrame: 100,
-  });
   return wordPush;
 }

src/entities/wordRock.js

@@ -1,13 +1,7 @@
 game.createWordRock = () => {
   const wordRock = game.Entity();
-  wordRock.addComponent(game.components.Position({x: 0, y: 0}));
+  wordRock.addComponent(game.components.LoadPriority({priority: 3}));
   wordRock.addComponent(game.components.Appearance({rot: 0, width: 100, height: 100}));
-  wordRock.sprite = game.graphics.Sprite({
+  wordRock.sprite = game.sprites.wordRock;
-    image: game.assets.wordRock,
-    spriteHeight: 24,
-    spriteWidth: 24,
-    numFrames: 3,
-    timePerFrame: 100,
-  });
   return wordRock;
 }

src/entities/wordSink.js

@@ -1,13 +1,7 @@
 game.createWordSink = () => {
   const wordSink = game.Entity();
-  wordSink.addComponent(game.components.Position({x: 0, y: 0}));
+  wordSink.addComponent(game.components.LoadPriority({priority: 3}));
   wordSink.addComponent(game.components.Appearance({rot: 0, width: 100, height: 100}));
-  wordSink.sprite = game.graphics.Sprite({
+  wordSink.sprite = game.sprites.wordSink;
-    image: game.assets.wordSink,
-    spriteHeight: 24,
-    spriteWidth: 24,
-    numFrames: 3,
-    timePerFrame: 100,
-  });
   return wordSink;
 }

src/entities/wordStop.js

@@ -1,13 +1,7 @@
 game.createWordStop = () => {
   const wordStop = game.Entity();
-  wordStop.addComponent(game.components.Position({x: 0, y: 0}));
+  wordStop.addComponent(game.components.LoadPriority({priority: 3}));
   wordStop.addComponent(game.components.Appearance({rot: 0, width: 100, height: 100}));
-  wordStop.sprite = game.graphics.Sprite({
+  wordStop.sprite = game.sprites.wordStop;
-    image: game.assets.wordStop,
-    spriteHeight: 24,
-    spriteWidth: 24,
-    numFrames: 3,
-    timePerFrame: 100,
-  });
   return wordStop;
 }

src/entities/wordWall.js

@@ -1,13 +1,7 @@
 game.createWordWall = () => {
   const wordWall = game.Entity();
-  wordWall.addComponent(game.components.Position({x: 0, y: 0}));
+  wordWall.addComponent(game.components.LoadPriority({priority: 3}));
   wordWall.addComponent(game.components.Appearance({rot: 0, width: 100, height: 100}));
-  wordWall.sprite = game.graphics.Sprite({
+  wordWall.sprite = game.sprites.wordWall;
-    image: game.assets.wordWall,
-    spriteHeight: 24,
-    spriteWidth: 24,
-    numFrames: 3,
-    timePerFrame: 100,
-  });
   return wordWall;
 }

src/entities/wordWater.js

@@ -1,13 +1,7 @@
 game.createWordWater = () => {
   const wordWater = game.Entity();
-  wordWater.addComponent(game.components.Position({x: 0, y: 0}));
+  wordWater.addComponent(game.components.LoadPriority({priority: 3}));
   wordWater.addComponent(game.components.Appearance({rot: 0, width: 100, height: 100}));
-  wordWater.sprite = game.graphics.Sprite({
+  wordWater.sprite = game.sprites.wordWater;
-    image: game.assets.wordWater,
-    spriteHeight: 24,
-    spriteWidth: 24,
-    numFrames: 3,
-    timePerFrame: 100,
-  });
   return wordWater;
 }

src/entities/wordWin.js

@@ -1,13 +1,7 @@
 game.createWordWin = () => {
   const wordWin = game.Entity();
-  wordWin.addComponent(game.components.Position({x: 0, y: 0}));
+  wordWin.addComponent(game.components.LoadPriority({priority: 3}));
   wordWin.addComponent(game.components.Appearance({rot: 0, width: 100, height: 100}));
-  wordWin.sprite = game.graphics.Sprite({
+  wordWin.sprite = game.sprites.wordWin;
-    image: game.assets.wordWin,
-    spriteHeight: 24,
-    spriteWidth: 24,
-    numFrames: 3,
-    timePerFrame: 100,
-  });
   return wordWin;
 }

src/entities/wordYou.js

@@ -1,13 +1,7 @@
 game.createWordYou = () => {
   const wordYou = game.Entity();
-  wordYou.addComponent(game.components.Position({x: 0, y: 0}));
+  wordYou.addComponent(game.components.LoadPriority({priority: 3}));
   wordYou.addComponent(game.components.Appearance({rot: 0, width: 100, height: 100}));
-  wordYou.sprite = game.graphics.Sprite({
+  wordYou.sprite = game.sprites.wordYou;
-    image: game.assets.wordYou,
-    spriteHeight: 24,
-    spriteWidth: 24,
-    numFrames: 3,
-    timePerFrame: 100,
-  });
   return wordYou;
 }

src/game.js

@@ -7,37 +7,25 @@ game.loop = (timeStamp) => {
     game.systems[i].update(elapsedTime, game.entities);
   });
 
+  if (game.nextLevel) {
+    game.loadLevel(game.nextLevel);
+    game.nextLevel = false;
+  }
+
   requestAnimationFrame(game.loop);
 }
 
 game.initialize = () => {
+  [game.entities, game.config] = game.loadLevel(game.levels[0]);
+
   game.systemOrder = ["render", "physics", "gridSystem", "keyboardInput"];
   game.systems = {
     render: game.system.Render(game.graphics),
     physics: game.system.Physics(),
-    gridSystem: game.system.GridSystem({
+    gridSystem: game.system.GridSystem({...game.config}),
-      xDim: 15,
-      yDim: 15,
-      canvasWidth: game.canvas.width,
-      canvasHeight: game.canvas.height,
-    }),
     keyboardInput: game.system.KeyboardInput(),
   };
 
-  game.entities = {};
-
-  Array(10).fill(null).forEach((_, i) => {
-    const bigBlue = game.createBigBlue();
-    bigBlue.addComponent(game.components.GridPosition({x: Math.floor(Math.random() * 15), y: Math.floor(Math.random() * 13)}));
-    bigBlue.addComponent(game.components.Controllable({controls: ['left', 'right', 'up', 'down']}));
-    game.entities[bigBlue.id] = bigBlue;
-  });
-
-  game.rock = game.createRock();
-  game.rock.addComponent(game.components.Position({x: 200, y: 200}));
-  game.rock.addComponent(game.components.GridPosition({x: 0, y: 0}));
-	game.rock.addComponent(game.components.Pushable());
-  game.entities[game.rock.id] = game.rock;
 
   lastTimeStamp = performance.now()
   requestAnimationFrame(game.loop);

src/render/sprites.js

@@ -0,0 +1,142 @@
+game.sprites = {
+  bigBlue: game.graphics.Sprite({
+    image: game.assets.bigblue,
+    spriteHeight: 24,
+    spriteWidth: 24,
+    numFrames: 3,
+    timePerFrame: 100,
+  }),
+  flag: game.graphics.Sprite({
+    image: game.assets.flag,
+    spriteHeight: 24,
+    spriteWidth: 24,
+    numFrames: 3,
+    timePerFrame: 100,
+  }),
+  floor: game.graphics.Sprite({
+    image: game.assets.floor,
+    spriteHeight: 24,
+    spriteWidth: 24,
+    numFrames: 3,
+    timePerFrame: 100,
+  }),
+  hedge: game.graphics.Sprite({
+    image: game.assets.hedge,
+    spriteHeight: 24,
+    spriteWidth: 24,
+    numFrames: 3,
+    timePerFrame: 250,
+  }),
+  grass: game.graphics.Sprite({
+    image: game.assets.grass,
+    spriteHeight: 24,
+    spriteWidth: 24,
+    numFrames: 3,
+    timePerFrame: 100,
+  }),
+  rock: game.graphics.Sprite({
+    image: game.assets.rock,
+    spriteHeight: 24,
+    spriteWidth: 24,
+    numFrames: 3,
+    timePerFrame: 100,
+  }),
+  wall: game.graphics.Sprite({
+    image: game.assets.wall,
+    spriteHeight: 24,
+    spriteWidth: 24,
+    numFrames: 3,
+    timePerFrame: 100,
+  }),
+  wordBigBlue: game.graphics.Sprite({
+    image: game.assets.wordBigBlue,
+    spriteHeight: 24,
+    spriteWidth: 24,
+    numFrames: 3,
+    timePerFrame: 100,
+  }),
+  wordFlag: game.graphics.Sprite({
+    image: game.assets.wordFlag,
+    spriteHeight: 24,
+    spriteWidth: 24,
+    numFrames: 3,
+    timePerFrame: 100,
+  }),
+  wordIs: game.graphics.Sprite({
+    image: game.assets.wordIs,
+    spriteHeight: 24,
+    spriteWidth: 24,
+    numFrames: 3,
+    timePerFrame: 100,
+  }),
+  wordKill: game.graphics.Sprite({
+    image: game.assets.wordKill,
+    spriteHeight: 24,
+    spriteWidth: 24,
+    numFrames: 3,
+    timePerFrame: 100,
+  }),
+  wordLava: game.graphics.Sprite({
+    image: game.assets.wordLava,
+    spriteHeight: 24,
+    spriteWidth: 24,
+    numFrames: 3,
+    timePerFrame: 100,
+  }),
+  wordPush: game.graphics.Sprite({
+    image: game.assets.wordPush,
+    spriteHeight: 24,
+    spriteWidth: 24,
+    numFrames: 3,
+    timePerFrame: 100,
+  }),
+  wordRock: game.graphics.Sprite({
+    image: game.assets.wordRock,
+    spriteHeight: 24,
+    spriteWidth: 24,
+    numFrames: 3,
+    timePerFrame: 100,
+  }),
+  wordSink: game.graphics.Sprite({
+    image: game.assets.wordSink,
+    spriteHeight: 24,
+    spriteWidth: 24,
+    numFrames: 3,
+    timePerFrame: 100,
+  }),
+  wordStop: game.graphics.Sprite({
+    image: game.assets.wordStop,
+    spriteHeight: 24,
+    spriteWidth: 24,
+    numFrames: 3,
+    timePerFrame: 100,
+  }),
+  wordWall: game.graphics.Sprite({
+    image: game.assets.wordWall,
+    spriteHeight: 24,
+    spriteWidth: 24,
+    numFrames: 3,
+    timePerFrame: 100,
+  }),
+  wordWater: game.graphics.Sprite({
+    image: game.assets.wordWater,
+    spriteHeight: 24,
+    spriteWidth: 24,
+    numFrames: 3,
+    timePerFrame: 100,
+  }),
+  wordWin: game.graphics.Sprite({
+    image: game.assets.wordWin,
+    spriteHeight: 24,
+    spriteWidth: 24,
+    numFrames: 3,
+    timePerFrame: 100,
+  }),
+  wordYou: game.graphics.Sprite({
+    image: game.assets.wordYou,
+    spriteHeight: 24,
+    spriteWidth: 24,
+    numFrames: 3,
+    timePerFrame: 100,
+  }),
+};

src/systems/gridSystem.js

@@ -1,11 +1,11 @@
-game.system.GridSystem = ({ xDim, yDim, canvasWidth, canvasHeight }) => {
+game.system.GridSystem = ({ xDim, yDim }) => {
   const entitiesGrid = Array(yDim).fill(null).map(() => Array(xDim).fill(null).map(() => new Map()));
 
-  const gridWidth = canvasWidth / xDim;
+  let gridWidth = game.canvas.width / xDim;
-  const gridHeight = canvasHeight / yDim;
+  let gridHeight = game.canvas.height / yDim;
 
   const gameCoordsToGrid = ({ x, y }) => {
-    return { x: Math.floor((x+gridWidth/2) / canvasWidth * xDim), y: Math.floor((y+gridHeight/2) / canvasHeight * yDim) };
+    return { x: Math.floor((x+gridWidth/2) / game.canvas.width * xDim), y: Math.floor((y+gridHeight/2) / game.canvas.height * yDim) };
   };
 
   const gridCoordsToGame = ({ x, y }) => {
@@ -39,8 +39,8 @@ game.system.GridSystem = ({ xDim, yDim, canvasWidth, canvasHeight }) => {
     rebuildGrid(gridEntities);
     gridEntities.map((entity) => {
       if (entity.hasComponent("appearance")) {
-        entity.components.appearance.width = canvasWidth / xDim;
+        entity.components.appearance.width = gridWidth;
-        entity.components.appearance.height = canvasHeight / yDim;
+        entity.components.appearance.height = gridHeight;
       }
       if (entity.hasComponent("position")) {
         const newGridCoords = gameCoordsToGrid(entity.components.position);
@@ -89,7 +89,9 @@ game.system.GridSystem = ({ xDim, yDim, canvasWidth, canvasHeight }) => {
             entity.components.momentum.dy = 0;
           }
         }
-      }
+      } else {
+        entity.addComponent(game.components.Position({...gridCoordsToGame(entity.components.gridPosition)}));    
+      };
     });
   };
 

src/systems/render.js

@@ -2,12 +2,18 @@ game.system.Render = (graphics) => {
   const update = (elapsedTime, entities) => {
     graphics.clear();
 
-    for (let id in entities) {
+    const entitiesArray = Object.keys(entities).map(key => entities[key]);
-      const entity = entities[id];
+    const sortedEntities = entitiesArray.sort((a, b) => {
+      const aprior = a.hasComponent("loadPriority") ? a.components.loadPriority.priority : 0;
+      const bprior = b.hasComponent("loadPriority") ? b.components.loadPriority.priority : 0;
+      return bprior - aprior;
+    });
+
+    sortedEntities.forEach((entity) => {
       if (entity.sprite && entity.hasComponent("position") && entity.hasComponent("appearance")) {
         entity.sprite.draw(elapsedTime, {...entity.components.position, ...entity.components.appearance});
       }
-    }
+    });
   }
   return { update };
 };

src/utils/loadLevel.js

@@ -0,0 +1,66 @@
+game.loadLevel = (level) => {
+  const entities = {};
+  const config = {...level.gridSize};
+  for (let y = 0; y < level.gridSize.yDim; y++) {
+    for (let x = 0; x < level.gridSize.xDim; x++) {
+      const cell = level.level[y][x];
+      cell.forEach((letter) => {
+        let entity;
+        switch (letter) {
+          case 'b':
+            entity = game.createBigBlue();
+            break;
+          case 'h':
+            entity = game.createHedge();
+            break;
+          case 'r':
+            entity = game.createRock();
+            break;
+          case 'f':
+            entity = game.createFlag();
+            break;
+          case 'l':
+            entity = game.createFloor();
+            break;
+          case 'w':
+            entity = game.createWall();
+            break;
+          case 'W':
+            entity = game.createWordWall();
+            break;
+          case 'I':
+            entity = game.createWordIs();
+            break;
+          case 'S':
+            entity = game.createWordStop();
+            break;
+          case 'R':
+            entity = game.createWordRock();
+            break;
+          case 'P':
+            entity = game.createWordPush();
+            break;
+          case 'B':
+            entity = game.createWordBigBlue();
+            break;
+          case 'Y':
+            entity = game.createWordYou();
+            break;
+          case 'F':
+            entity = game.createWordFlag();
+            break;
+          case 'X':
+            entity = game.createWordWin();
+            break;
+          default:
+            break;
+        }
+        if (entity) {
+          entity.addComponent(game.components.GridPosition({x, y}));
+          entities[entity.id] = entity;
+        }
+      });
+    }
+  }
+  return [entities, config];
+};