fix(render): pass Text props (x, y, text, style) via instantiation

https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Text.html
remarkablegames · Jan 10, 2024 · 9ea0815 · 9ea0815
1 parent 8e1dd99
commit 9ea0815
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 47 deletions.
diff --git a/src/render/gameobject.test.tsx b/src/render/gameobject.test.tsx
@@ -1,8 +1,8 @@
 import Phaser from 'phaser';
 import type { JSX } from 'react';
 
-import { Container } from '..';
-import { createGameObject } from './gameobject';
+import { Container, Text } from '..';
+import { createGameObject } from '.';
 
 jest.mock('phaser', () => {
   const GameObject = jest.fn();
@@ -11,6 +11,7 @@ jest.mock('phaser', () => {
       Container: GameObject,
       GameObject,
       Particles: {},
+      Text: GameObject,
     },
     Scene: jest.fn(),
   };
@@ -32,29 +33,34 @@ function Children(props: { children: JSX.Element[] }) {
   return <Container {...props} />;
 }
 
-it('logs warning for invalid element', () => {
-  const spy = jest.spyOn(console, 'warn').mockImplementation();
-  const element = {} as JSX.Element;
-  const container = new Phaser.GameObjects.Container(scene);
-  expect(createGameObject(element, scene, container)).toBe(undefined);
-  expect(spy).toBeCalledWith(
-    'Invalid JSX type. Expected a class or function but got: undefined',
-  );
-  spy.mockRestore();
+let container: Phaser.GameObjects.Container;
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  container = new Phaser.GameObjects.Container(scene);
+  container.add = jest.fn();
+});
+
+describe('invalid element', () => {
+  it('logs warning', () => {
+    const spy = jest.spyOn(console, 'warn').mockImplementation();
+    const element = {} as JSX.Element;
+    expect(createGameObject(element, scene, container)).toBe(undefined);
+    expect(spy).toBeCalledWith(
+      'Invalid JSX type. Expected a class or function but got: undefined',
+    );
+    spy.mockRestore();
+  });
 });
 
 it('creates game object from element', () => {
   const element = <Container />;
-  const container = new Phaser.GameObjects.Container(scene);
-  container.add = jest.fn();
   expect(createGameObject(element, scene, container)).toBeInstanceOf(Object);
   expect(container.add).toBeCalledTimes(1);
 });
 
 it('creates game object from component', () => {
   const element = <Component />;
-  const container = new Phaser.GameObjects.Container(scene);
-  container.add = jest.fn();
   expect(createGameObject(element, scene, container)).toBeInstanceOf(Object);
   expect(container.add).toBeCalledTimes(1);
 });
@@ -66,8 +72,42 @@ it('creates game object with children', () => {
       <Container />
     </Children>
   );
-  const container = new Phaser.GameObjects.Container(scene);
-  container.add = jest.fn();
   expect(createGameObject(element, scene, container)).toBeInstanceOf(Object);
   expect(container.add).toBeCalledTimes(1);
 });
+
+describe('Text', () => {
+  it('creates text with no props', () => {
+    const element = <Text />;
+    expect(createGameObject(element, scene, container)).toBeInstanceOf(Object);
+    expect(container.add).toBeCalledTimes(1);
+    expect(Phaser.GameObjects.Text).toBeCalledWith(
+      scene,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+    );
+  });
+
+  it('creates text with props', () => {
+    const props = {
+      x: 1,
+      y: 2,
+      text: 'a',
+      style: {
+        fontSize: '42px',
+      },
+    };
+    const element = <Text {...props} />;
+    expect(createGameObject(element, scene, container)).toBeInstanceOf(Object);
+    expect(container.add).toBeCalledTimes(1);
+    expect(Phaser.GameObjects.Text).toBeCalledWith(
+      scene,
+      props.x,
+      props.y,
+      props.text,
+      props.style,
+    );
+  });
+});
diff --git a/src/render/gameobject.ts b/src/render/gameobject.ts
@@ -23,15 +23,31 @@ export function createGameObject(
     return;
   }
 
-  const gameObject: Phaser.GameObjects.GameObject = new element.type(scene);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { children, key, ref, ...props } = element.props;
+
+  let gameObject: Phaser.GameObjects.GameObject;
+
+  switch (element.type) {
+    case Phaser.GameObjects.Text:
+      gameObject = new element.type(
+        scene,
+        props.x,
+        props.y,
+        props.text,
+        props.style,
+      );
+      break;
+
+    default:
+      gameObject = new element.type(scene);
+      break;
+  }
 
   if (!(gameObject instanceof Phaser.GameObjects.GameObject)) {
     return createGameObject(new element.type(element.props), scene, container);
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { children, key, ref, ...props } = element.props;
-
   setProps(gameObject, props, scene);
   attachRef(gameObject, ref);
 

diff --git a/src/render/props.test.ts b/src/render/props.test.ts
@@ -26,23 +26,6 @@ it('does not set invalid props', () => {
   expect(JSON.stringify(gameObject)).toBe('{}');
 });
 
-it('sets prop style', () => {
-  const gameObject = new Phaser.GameObjects.Text(scene, 1, 2, 'text', {
-    fontFamily: 'Arial',
-  });
-  const props = {
-    style: {
-      fontSize: '42px',
-    },
-  };
-
-  gameObject.setStyle = jest.fn();
-  expect(setProps(gameObject, props, scene)).toBe(undefined);
-
-  expect(gameObject.setStyle).toBeCalledTimes(1);
-  expect(gameObject.setStyle).toBeCalledWith(props.style);
-});
-
 it('sets prop onPointerDown', () => {
   const gameObject = new Phaser.GameObjects.Container(scene);
   const props = {

diff --git a/src/render/props.ts b/src/render/props.ts
@@ -18,15 +18,6 @@ export function setProps(
   for (const key in props) {
     const value = props[key];
 
-    if (
-      key === 'style' &&
-      value instanceof Object &&
-      gameObject instanceof Phaser.GameObjects.Text
-    ) {
-      gameObject.setStyle(value);
-      continue;
-    }
-
     if (events[key] && typeof value === 'function') {
       gameObject.setInteractive();
       gameObject.on(key.slice(2).toLowerCase(), value, scene);