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

2 files changed, 18 insertions, 10 deletions

diff --git a/src/systems/gridSystem.js b/src/systems/gridSystem.js
index b8d49e6..ef5a6e1 100644
--- a/src/systems/gridSystem.js
+++ b/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;
-  const gridHeight = canvasHeight / yDim;
+  let gridWidth = game.canvas.width / xDim;
+  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.height = canvasHeight / yDim;
+        entity.components.appearance.width = gridWidth;
+        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)}));    
+      };
     });
   };
 
diff --git a/src/systems/render.js b/src/systems/render.js
index 0a4c72d..4ec67c7 100644
--- a/src/systems/render.js
+++ b/src/systems/render.js
@@ -2,12 +2,18 @@ game.system.Render = (graphics) => {
   const update = (elapsedTime, entities) => {
     graphics.clear();
 
-    for (let id in entities) {
-      const entity = entities[id];
+    const entitiesArray = Object.keys(entities).map(key => entities[key]);
+    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 };
 };
\ No newline at end of file