fix #9 (#71)

* wip

* wip #9

* fix #9

* fix #9

---------

Co-authored-by: pagoru <[email protected]>

examples/example/src/app.component.ts

@@ -13,9 +13,10 @@ import { playerComponent } from "player.component";
 type Mutable = {} & DisplayObjectMutable<Container>;
 
 export const appComponent: AsyncComponent<unknown, Mutable> = async () => {
-  global.$setVisualHitBoxes(true);
+  global.$setVisualHitBoxes(false);
 
   const $container = await container({ label: "app" });
+  const $c = await container({ label: "test" });
 
   const $world = await world({
     position: { x: 0, y: 0 },
@@ -52,17 +53,18 @@ export const appComponent: AsyncComponent<unknown, Mutable> = async () => {
         y: Math.random() * 900,
       },
     });
-    $world.add(_fly);
+    $c.add(_fly);
   }
 
   const $player = await playerComponent();
   await $player.setPosition({ x: 500, y: 1000 });
 
-  setInterval(() => {
-    $player.doSomething();
-  }, 50);
+  // setInterval(() => {
+  //   $player.doSomething();
+  // }, 50);
 
   $world.add($player, $plane);
+  $world.add($c);
   $container.add($world);
 
   return $container.getComponent(appComponent);

package.json

@@ -36,6 +36,7 @@
     "test:coverage": "jest --coverage"
   },
   "jest": {
-    "verbose": true
+    "verbose": true,
+    "coverageReporters": ["json", "html"]
   }
 }

src/components/core/animated-sprite.component.test.ts → src/components/core/__tests__/animated-sprite.component.test.ts

@@ -1,6 +1,6 @@
-import { AnimatedSpriteMutable } from "../../types";
-import { animatedSprite } from "./animated-sprite.component";
-import { PlayStatus } from "../../enums";
+import { AnimatedSpriteMutable } from "../../../types";
+import { animatedSprite } from "../animated-sprite.component";
+import { PlayStatus } from "../../../enums";
 import { expect } from "@jest/globals";
 
 jest.mock("pixi.js", () => {

src/components/core/body.sub-component.test.ts → src/components/core/__tests__/body.sub-component.test.ts

@@ -1,7 +1,7 @@
 import { expect, test } from "@jest/globals";
-import { body } from "./body.sub-component";
-import { Shape } from "../../enums";
-import { degreesToRadians } from "../../utils";
+import { body } from "../body.sub-component";
+import { Shape } from "../../../enums";
+import { degreesToRadians } from "../../../utils";
 
 describe("sub-components", () => {
   describe("core", () => {
@@ -85,6 +85,7 @@ describe("sub-components", () => {
       test("setMass(...) to be changed on the body", () => {
         $body.setMass(555);
         expect($body.$getBody().mass).toStrictEqual(555);
+        expect($body.getMass()).toStrictEqual(555);
       });
       test("setVelocity(...) to be changed on the body", () => {
         $body.setVelocity({ x: 12, y: -34 });

src/components/core/container.component.test.ts → src/components/core/__tests__/container.component.test.ts

@@ -1,8 +1,8 @@
 import { expect, test } from "@jest/globals";
-import { ContainerMutable } from "../../types";
-import { container } from "./container.component";
-import { body } from "./body.sub-component";
-import { EventMode } from "../../enums";
+import { ContainerMutable } from "../../../types";
+import { container } from "../container.component";
+import { body } from "../body.sub-component";
+import { EventMode } from "../../../enums";
 
 describe("components", () => {
   describe("core", () => {

src/components/core/empty.component.test.ts → src/components/core/__tests__/empty.component.test.ts

@@ -1,6 +1,6 @@
 import { expect, test } from "@jest/globals";
-import { empty } from "./empty.component";
-import { body } from "./body.sub-component";
+import { empty } from "../empty.component";
+import { body } from "../body.sub-component";
 
 describe("components", () => {
   describe("core", () => {

src/components/core/graphics.component.test.ts → src/components/core/__tests__/graphics.component.test.ts

@@ -1,8 +1,8 @@
 import { expect, test } from "@jest/globals";
-import { ContainerMutable, GraphicsMutable } from "../../types";
-import { graphics } from "./graphics.component";
-import { GraphicType } from "../../enums";
-import { container } from "./container.component";
+import { ContainerMutable, GraphicsMutable } from "../../../types";
+import { graphics } from "../graphics.component";
+import { GraphicType } from "../../../enums";
+import { container } from "../container.component";
 
 describe("components", () => {
   describe("core", () => {

src/components/core/sprite.component.test.ts → src/components/core/__tests__/sprite.component.test.ts

@@ -1,8 +1,8 @@
-import { ContainerMutable, SpriteMutable } from "../../types";
-import { sprite } from "./sprite.component";
+import { ContainerMutable, SpriteMutable } from "../../../types";
+import { sprite } from "../sprite.component";
 import { expect } from "@jest/globals";
 import * as PIXI from "pixi.js";
-import { container } from "./container.component";
+import { container } from "../container.component";
 
 jest.mock("pixi.js", () => {
   const originalModule = jest.requireActual("pixi.js");

src/components/core/world.component.test.ts → src/components/core/__tests__/world.component.test.ts

@@ -1,9 +1,9 @@
-import { ContainerMutable, WorldMutable } from "../../types";
+import { ContainerMutable, WorldMutable } from "../../../types";
 import { expect } from "@jest/globals";
 import * as PIXI from "pixi.js";
-import { world } from "./world.component";
-import { container } from "./container.component";
-import { body } from "./body.sub-component";
+import { world } from "../world.component";
+import { container } from "../container.component";
+import { body } from "../body.sub-component";
 
 jest.mock("pixi.js", () => {
   const originalModule = jest.requireActual("pixi.js");
@@ -67,7 +67,6 @@ describe("components", () => {
       test("add(...) adds a new element without body", async () => {
         $container = await container();
         $world.add($container);
-        expect(console.warn).toBeCalled();
       });
       test("remove(...) removes an element without body", async () => {
         expect($world.$getWorld().bodies.length).toEqual(0);
@@ -77,14 +76,37 @@ describe("components", () => {
       test("add(...) adds a new element with body", async () => {
         await $container.setBody(body({}));
         $world.add($container);
-        expect(console.warn).not.toBeCalled();
         expect($world.$getWorld().bodies.length).not.toEqual(0);
       });
       test("remove(...) removes an element with body", async () => {
         $world.remove($container);
         expect($world.$getWorld().bodies.length).toEqual(0);
       });
-      test("$destroy() destroys the world and the container", () => {
+      test("add(...) adds a new element with body on children", async () => {
+        $container = await container();
+        const $children = await container();
+        await $children.setBody(body({}));
+        $container.add($children);
+        $world.add($container);
+        expect($world.$getWorld().bodies.length).not.toEqual(0);
+      });
+      test("remove(...) removes an element with body on children", async () => {
+        $world.remove($container);
+        expect($world.$getWorld().bodies.length).toEqual(0);
+      });
+      test("add(...) adds a new element without body on children", async () => {
+        $container = await container();
+        const $children = await container();
+        $container.add($children);
+        $world.add($container);
+        expect($world.$getWorld().bodies.length).toEqual(0);
+      });
+      test("remove(...) removes an element without body on children", async () => {
+        $world.remove($container);
+        expect($world.$getWorld().bodies.length).toEqual(0);
+      });
+      test("$destroy() destroys the world and the container", async () => {
+        await $container.setBody(body({}));
         $world.add($container);
         expect($world.$getWorld().bodies.length).not.toEqual(0);
         $world.$destroy();

src/components/core/world.component.ts

@@ -1,6 +1,7 @@
 import p2 from "p2";
 import {
   AsyncComponent,
+  ContainerMutable,
   DisplayObject,
   DisplayObjectMutable,
   InternalMutable,
@@ -33,41 +34,53 @@ export const world: AsyncComponent<WorldProps, WorldMutable, false> = async (
       : undefined,
   });
 
-  const add = (...displayObjects: DisplayObjectMutable<DisplayObject>[]) => {
-    displayObjects.forEach((displayObject) => {
-      const body = displayObject.getBody ? displayObject.getBody() : null;
+  const $addBody = (displayObject: DisplayObjectMutable<DisplayObject>) => {
+    const body = displayObject.getBody ? displayObject.getBody() : null;
 
-      displayObjectList.push(displayObject);
+    if (!body) {
+      const children = (displayObject as ContainerMutable)?.getChildren() ?? [];
+      for (const child of children) $addBody(child);
+    } else {
+      const _body = body.$getBody();
 
-      if (!body) {
-        console.warn(
-          `No body available on display object '${displayObject.getLabel()}'`,
-        );
-      } else {
-        const _body = body.$getBody();
-
-        //add contact materials
-        for (const displayObject of displayObjectList) {
-          const displayObjectBody = displayObject.getBody();
-          if (!displayObjectBody) continue;
-
-          $world.addContactMaterial(body.$getContactBody(displayObjectBody));
-        }
-        $world.addBody(_body);
+      //add contact materials
+      for (const currentDisplayObject of [
+        ...displayObjectList,
+        displayObject,
+      ]) {
+        const displayObjectBody = currentDisplayObject.getBody();
+        if (!displayObjectBody) continue;
+
+        $world.addContactMaterial(body.$getContactBody(displayObjectBody));
       }
+      $world.addBody(_body);
+    }
+  };
+
+  const add = (...displayObjects: DisplayObjectMutable<DisplayObject>[]) => {
+    displayObjects.forEach((displayObject) => {
+      displayObjectList.push(displayObject);
 
+      $addBody(displayObject);
       addContainer(displayObject);
     });
   };
 
+  const $removeBody = (displayObject: DisplayObjectMutable<DisplayObject>) => {
+    const body = displayObject.getBody ? displayObject.getBody() : null;
+    if (body) $world.removeBody(body.$getBody());
+    else {
+      const children = (displayObject as ContainerMutable)?.getChildren() ?? [];
+      for (const child of children) $removeBody(child);
+    }
+  };
+
   const remove = (...displayObjects: DisplayObjectMutable<DisplayObject>[]) => {
     displayObjects.forEach((displayObject) => {
       displayObjectList = displayObjectList.filter(
         (_, index) => displayObjectList.indexOf(displayObject) !== index,
       );
-      const body = displayObject.getBody ? displayObject.getBody() : null;
-      if (body) $world.removeBody(body.$getBody());
-
+      $removeBody(displayObject);
       removeContainer(displayObject);
     });
   };

src/components/prefabs/box.component.test.ts → src/components/prefabs/__tests__/box.component.test.ts

@@ -1,7 +1,7 @@
-import { ContainerMutable } from "../../types";
+import { ContainerMutable } from "../../../types";
 import { expect } from "@jest/globals";
-import { box } from "./box.component";
-import { GraphicType } from "../../enums";
+import { box } from "../box.component";
+import { GraphicType } from "../../../enums";
 
 describe("components", () => {
   describe("prefabs", () => {

src/components/prefabs/capsule.component.test.ts → src/components/prefabs/__tests__/capsule.component.test.ts

@@ -1,7 +1,7 @@
-import { ContainerMutable } from "../../types";
+import { ContainerMutable } from "../../../types";
 import { expect } from "@jest/globals";
-import { capsule } from "./capsule.component";
-import { GraphicType } from "../../enums";
+import { capsule } from "../capsule.component";
+import { GraphicType } from "../../../enums";
 
 describe("components", () => {
   describe("prefabs", () => {

src/components/prefabs/circle.component.test.ts → src/components/prefabs/__tests__/circle.component.test.ts

@@ -1,7 +1,7 @@
-import { ContainerMutable } from "../../types";
+import { ContainerMutable } from "../../../types";
 import { expect } from "@jest/globals";
-import { circle } from "./circle.component";
-import { GraphicType } from "../../enums";
+import { circle } from "../circle.component";
+import { GraphicType } from "../../../enums";
 
 describe("components", () => {
   describe("prefabs", () => {

src/components/prefabs/plane.component.test.ts → src/components/prefabs/__tests__/plane.component.test.ts

@@ -1,7 +1,7 @@
-import { ContainerMutable } from "../../types";
+import { ContainerMutable } from "../../../types";
 import { expect } from "@jest/globals";
-import { plane } from "./plane.component";
-import { GraphicType } from "../../enums";
+import { plane } from "../plane.component";
+import { GraphicType } from "../../../enums";
 
 describe("components", () => {
   describe("prefabs", () => {

src/components/prefabs/player-2d.component.test.ts → src/components/prefabs/__tests__/player-2d.component.test.ts

@@ -1,5 +1,5 @@
-import { ContainerMutable } from "../../types";
-import { player2D } from "./player-2d.component";
+import { ContainerMutable } from "../../../types";
+import { player2D } from "../player-2d.component";
 
 const mockOnTick = jest.fn();
 

src/utils/degree.utils.test.ts → src/utils/__tests__/degree.utils.test.ts

@@ -1,4 +1,4 @@
-import { degreesToRadians, radiansToDegrees } from "./degree.utils";
+import { degreesToRadians, radiansToDegrees } from "../degree.utils";
 
 describe("utils", () => {
   describe("degreesToRadians", () => {

src/utils/display-object.utils.test.ts → src/utils/__tests__/display-object.utils.test.ts

@@ -1,9 +1,9 @@
 import * as PIXI from "pixi.js";
-import { initDisplayObjectMutable } from "./display-object.utils";
-import { empty } from "../components";
-import { Container, DisplayObjectMutable } from "../types";
+import { initDisplayObjectMutable } from "../display-object.utils";
+import { empty } from "../../components";
+import { Container, DisplayObjectMutable } from "../../types";
 import { expect } from "@jest/globals";
-import { EventMode } from "../enums";
+import { EventMode } from "../../enums";
 
 describe("utils", () => {
   describe("initDisplayObjectMutable", () => {

src/utils/mutables.utils.test.ts → src/utils/__tests__/mutables.utils.test.ts

@@ -1,4 +1,4 @@
-import { getValueMutableFunction } from "./mutables.utils";
+import { getValueMutableFunction } from "../mutables.utils";
 
 describe("utils", () => {
   describe("getValueMutableFunction", () => {

src/utils/random.utils.test.ts → src/utils/__tests__/random.utils.test.ts

@@ -1,4 +1,4 @@
-import { getRandomNumber } from "./random.utils";
+import { getRandomNumber } from "../random.utils";
 
 describe("utils", () => {
   describe("getRandomNumber", () => {

src/utils/shapes.utils.test.ts → src/utils/__tests__/shapes.utils.test.ts

@@ -1,5 +1,5 @@
-import { getShape, getVisualShape } from "./shapes.utils";
-import { GraphicType, Shape } from "../enums";
+import { getShape, getVisualShape } from "../shapes.utils";
+import { GraphicType, Shape } from "../../enums";
 
 describe("utils", () => {
   describe("shapes", () => {