Merge pull request #24 from RuggeroVisintin:Scrice994/issue23

Scrice994/issue23
RuggeroVisintin · Dec 6, 2023 · 177ef0b · 177ef0b
2 parents 8f045fb + c536241
commit 177ef0b
Show file tree

Hide file tree

Showing 11 changed files with 120 additions and 7 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -8,7 +8,8 @@
         "ecmaVersion": "latest"
     },
     "plugins": [
-        "@typescript-eslint"
+        "@typescript-eslint",
+        "jest-extended"
     ],
     "rules": {
     }

diff --git a/.gitignore b/.gitignore
@@ -10,3 +10,4 @@ src/**/*.d.ts
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+.vscode
diff --git a/examples/simpleShapeDepthIndex/index.html b/examples/simpleShapeDepthIndex/index.html
@@ -0,0 +1,39 @@
+<html>
+
+<body>
+    <canvas id="canvas" style="width: 100%; height: 100%"></canvas>
+    <script type="text/javascript" src="../../dist/spark-engine-web.js"></script>
+    <script>
+        const context = document.getElementById('canvas').getContext('2d')
+        const device = new SparkEngine.CanvasDevice();
+
+        const renderer = new SparkEngine.Renderer(device);
+        const renderSystem = new SparkEngine.RenderSystem(renderer);
+
+        const firstRect = new SparkEngine.ShapeComponent();
+        firstRect.transform.size = { width: 50, height: 25 };
+        renderSystem.registerComponent(firstRect);
+
+        const secondRect = new SparkEngine.ShapeComponent();
+        secondRect.transform.size = { width: 20, height: 20 };
+        secondRect.transform.depthIndex = 1;
+        renderSystem.registerComponent(secondRect);
+
+        let pos = 0;
+
+        const drawFrame = () => {
+            pos++;
+            pos = pos % 60;
+
+            firstRect.transform.position = { x: pos, y: pos };
+
+
+            renderSystem.update();
+            renderer.endFrame(context);
+        }
+
+        setInterval(drawFrame, 33);
+    </script>
+</body>
+
+</html>
diff --git a/jest.config.js b/jest.config.js
@@ -5,5 +5,11 @@ module.exports = {
   testMatch: ['<rootDir>/test/unit/**/*.test.ts'],
   setupFiles: [
     "jest-canvas-mock"
-  ]
+  ],
+  setupFilesAfterEnv: ["jest-extended/all"],
+  globals: {
+    'ts-jest': {
+      tsConfig: './test/unit/tsconfig.json'
+    }
+  }
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,6 +41,7 @@
     "jest": "^29.7.0",
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.7.0",
+    "jest-extended": "^4.0.2",
     "ts-jest": "^29.1.1",
     "ts-loader": "^9.5.1",
     "typescript": "^5.3.2",

diff --git a/src/ecs/components/TransformComponent.ts b/src/ecs/components/TransformComponent.ts
@@ -12,5 +12,6 @@ interface Size2D {
 
 export class TransformComponent extends BaseComponent {
     public position: Position2D = { x: 0, y: 0 };
-    public size: Size2D = { width: 0, height: 0 };   
+    public size: Size2D = { width: 0, height: 0 };
+    public depthIndex: number = 0;   
 }
diff --git a/src/ecs/systems/RenderSystem.ts b/src/ecs/systems/RenderSystem.ts
@@ -14,6 +14,8 @@ export class RenderSystem implements ISystem {
     }
 
     public update(): void {
-        this.components.forEach(component => component.draw(this.renderer));
+        this.components
+            .sort((prevComponent, currentComponent) => currentComponent.transform.depthIndex - prevComponent.transform.depthIndex)
+            .forEach(component => component.draw(this.renderer));
     }
 }
diff --git a/test/unit/ecs/systems/RenderSystem.test.ts b/test/unit/ecs/systems/RenderSystem.test.ts
@@ -1,6 +1,8 @@
 import { CanvasDevice, RenderSystem, Renderer, ShapeComponent } from "../../../../src";
 
 describe('systems/RenderSystem', () => {
+
+
     describe('.registerComponent()', () => {
         const renderSystem = new RenderSystem(new Renderer(new CanvasDevice()));
         const myTestShape = new ShapeComponent();
@@ -13,9 +15,14 @@ describe('systems/RenderSystem', () => {
     })
 
     describe('.update()', () => {
-        const renderSystem = new RenderSystem(new Renderer(new CanvasDevice()));
+
+        afterEach(() => {
+            jest.clearAllMocks();
+            jest.resetAllMocks();
+        })
 
         it('Should draw renderable object', () => {
+            const renderSystem = new RenderSystem(new Renderer(new CanvasDevice()));
             const drawSpy = jest.spyOn(ShapeComponent.prototype, 'draw');
 
             renderSystem.registerComponent(new ShapeComponent());
@@ -24,9 +31,26 @@ describe('systems/RenderSystem', () => {
             renderSystem.update();
 
             expect(drawSpy).toHaveBeenCalledTimes(2);
+            drawSpy.mockRestore();
         });
 
-        it.todo('Should render objects based on their depthIndex in reverse order (0 rendered last)')
+        it('Should render objects based on their depthIndex in reverse order (0 rendered last)', () => {
+            const renderSystem = new RenderSystem(new Renderer(new CanvasDevice()));
+            const component = new ShapeComponent();
+            const component2 = new ShapeComponent();
+
+            component2.transform.depthIndex = 1;
+
+            renderSystem.registerComponent(component);
+            renderSystem.registerComponent(component2);
+
+            const drawSpy = jest.spyOn(component, 'draw');
+            const drawSpy2 = jest.spyOn(component2, 'draw');
+
+            renderSystem.update();
+
+            expect(drawSpy2).toHaveBeenCalledBefore(drawSpy);
+        });
 
         it.todo('Should render object based on their transparency (transparent last)')
     })

diff --git a/test/unit/tsconfig.json b/test/unit/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+  "target": "es2016",
+  "module": "commonjs",
+  "baseUrl": "../../",
+  "esModuleInterop": true,
+  "strict": true,
+  "strictNullChecks": true,
+  "strictFunctionTypes": true,
+  "strictBindCallApply": true,
+  "strictPropertyInitialization": true,
+  "noEmit": true
+  },
+  "files": ["../../node_modules/jest-extended/types/index.d.ts"],
+  "include": ["./**/*.test.ts"],
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -101,5 +101,5 @@
   "exclude": [
     "./test",
     "playwright.config.ts"
-  ]
+  ],
 }