Systems do not work with 18.0.0

[JoseOcasio]

Can you specify? I am having trouble with systems not executing any code. Is this similar to yours?

[bberak]

Hey @CodeToad-rgb and @JoseOcasio,

Would you mind providing a sample snippet of your code? Specifically something like:

<GameEngine entities={...} systems={...} />

And a really simple example of one of your systems that isn't running would also help.. Thanks a lot!

[JoseOcasio]

I just copy pasted your sample <GameEngine style={{ width: 800, height: 600, backgroundColor: "blue" }} systems={[MoveBox]} entities={{ //-- Notice that each entity has a unique id (required) //-- and a renderer property (optional). If no renderer //-- is supplied with the entity - it won't get displayed. box1: { x: 200, y: 200, renderer: <Box />} }}> </GameEngine>

On a freshly new react app with typescript by doing npx create-react-app my-app

The sample does not work. Perhaps is the new versioning in react that prevents the systems code from firing.

[bberak]

Hi @JoseOcasio,

I'm not sure if you've had any luck with this (and it's been a long time since you posted your message), but the example seems to work for me using React 18.. Here is my App.tsx file:

import React, { PureComponent } from 'react';
import logo from './logo.svg';
import './App.css';
// @ts-ignore
import { GameEngine } from 'react-game-engine'

function App() {
  return (
    <GameEngine
      style={{ width: 800, height: 600, backgroundColor: "blue" }}
      systems={[MoveBox]}
      entities={{
        //-- Notice that each entity has a unique id (required)
        //-- and a renderer property (optional). If no renderer
        //-- is supplied with the entity - it won't get displayed.
        box1: { x: 200,  y: 200, renderer: <Box />}
      }}>
    </GameEngine>
  );
}

export default App;

class Box extends PureComponent<{ x?: number; y?: number }> {
  render() {
    const size = 100;
    const x = (this.props.x || 0) - size / 2;
    const y = (this.props.y || 0) - size / 2;
    return (
      <div style={{ position: "absolute", width: size, height: size, backgroundColor: "red", left: x, top: y }} />
    );
  }
}

const MoveBox = (entities: any, { input }: any) => {
  //-- I'm choosing to update the game state (entities) directly for the sake of brevity and simplicity.
  //-- There's nothing stopping you from treating the game state as immutable and returning a copy..
  //-- Example: return { ...entities, t.id: { UPDATED COMPONENTS }};
  //-- That said, it's probably worth considering performance implications in either case.

  const { payload } = input.find((x: any) => x.name === "onMouseMove") || {};

  if (payload) {
    const box1 = entities["box1"];

    box1.x = payload.pageX;
    box1.y = payload.pageY;
  }

  return entities;
};

Hope that helps other TS users out there 🙏