rejigger drawing layer storage

src/Ecs/Components.ts

@@ -51,14 +51,14 @@ export class CollisionClass {
 export class RenderBounds  {
     constructor(
         public color = "#f00",
-        public layer: Layer
+        public layer: number
     ) {};
 };
 
 export class RenderSprite  {
     constructor(
         public sheet: SpriteSheet,
-        public layer: Layer,
+        public layer: number,
         public index = 0,
         public offsetX = 0,
         public offsetY = 0
@@ -73,6 +73,8 @@ export class Data extends CoreData {
     collisionSourceClass: SparseStore<CollisionClass> = {};
     collisionTargetClass: SparseStore<CollisionClass> = {};
 
+    layers: Layer[] = [new Layer(0)];
+
     constructor(source?: Partial<Data>) {
         super(source);
         if(source?.location) this.location = source.location.slice();

src/Ecs/Renderers.ts

@@ -1,11 +1,11 @@
+import { DrawSet, Layer } from "../Applet/Render";
 import { Data } from "./Components";
 import { Join } from "./Data";
 import { TransformCx } from "./Location";
-import { DrawSet, Layer } from "../Applet/Render";
 
 export function RunRenderBounds(data: Data, drawSet: DrawSet) {
     drawSet.queue(...Join(data, "renderBounds", "location", "bounds").map(
-        ([{color, layer}, location, {points}]) => layer.toRender((cx, dt) => {
+        ([{color, layer}, location, {points}]) => data.layers[layer].toRender((cx, dt) => {
             TransformCx(cx, location, dt);
             cx.fillStyle = color;
             cx.beginPath();
@@ -19,7 +19,7 @@ export function RunRenderBounds(data: Data, drawSet: DrawSet) {
 
 export function RunRenderSprites(data: Data, drawSet: DrawSet) {
     drawSet.queue(...Join(data, "renderSprite", "location").map(
-        ([{sheet, layer, index, offsetX, offsetY}, location]) => layer.toRender((cx, dt) => {
+        ([{sheet, layer, index, offsetX, offsetY}, location]) => data.layers[layer].toRender((cx, dt) => {
             TransformCx(cx, location, dt);
             sheet.render(cx, index, offsetX, offsetY);
         }))

src/Ecs/test.ts

@@ -1,10 +1,10 @@
 import { Bind, Game } from "../Applet/Init";
 import { KeyControl } from "../Applet/Keyboard";
 import { Loop } from "../Applet/Loop";
-import { Layer, DrawSet } from "../Applet/Render";
+import { DrawSet, Layer } from "../Applet/Render";
-import { Data, Location, Polygon, RenderBounds, CollisionClass } from "./Components";
 import { FindCollisions } from "./Collision";
-import { Join, Liveness, Remove, Create, Lookup, Store, SparseStore } from "./Data";
+import { CollisionClass, Data, Location, Polygon, RenderBounds } from "./Components";
+import { Create, Join, Liveness, Lookup, Remove, SparseStore, Store } from "./Data";
 import { DumbMotion } from "./Location";
 import { RunRenderBounds } from "./Renderers";
 
@@ -108,7 +108,6 @@ export class LoopTest {
     data = new Data();
 
     constructor(public canvas: HTMLCanvasElement, cx: CanvasRenderingContext2D, keys: KeyControl) {
-        const layer = new Layer(0);
         const drawSet = new DrawSet();
 
         // spinner box
@@ -120,10 +119,7 @@ export class LoopTest {
             }),
             bounds: new Polygon([-50, 50, -60, 250, 60, 250, 50, 50]),
             collisionTargetClass: new CollisionClass("block"),
-            renderBounds: new RenderBounds(
+            renderBounds: new RenderBounds("#0a0", 0),
-                "#0a0",
-                layer
-            )
         });
 
         // triangles
@@ -138,7 +134,7 @@ export class LoopTest {
             collisionSourceClass: new CollisionClass("tri"),
             renderBounds: new RenderBounds(
                 "#d40",
-                layer
+                0
             )
         }));
 

src/Game/Death.ts

@@ -1,7 +1,7 @@
 import { PlaySfx } from "../Applet/Audio";
-import { RenderBounds, Polygon, Location } from "../Ecs/Components";
+import { Location, Polygon, RenderBounds } from "../Ecs/Components";
-import { Join, Remove, Lookup, Create, Id } from "../Ecs/Data";
+import { Create, Id, Join, Lookup, Remove } from "../Ecs/Data";
-import { Data, World, Lifetime, Teams } from "./GameComponents";
+import { Data, Lifetime, Teams, World } from "./GameComponents";
 
 export function SelfDestructMinions(data: Data, world: World) {
     const bossKilled = Join(data, "boss", "hp")
@@ -66,7 +66,7 @@ function SpawnPuff(data: Data, world: World, x: number, y: number, size: number,
             size, size,
             size, -size
         ]),
-        renderBounds: new RenderBounds(color, world.smokeLayer),
+        renderBounds: new RenderBounds(color, /*world.smokeLayer*/ 0),
         lifetime: new Lifetime(Math.random() / 3)
     });
 }