rexrainbow / phaser3-rex-notes

Notes of phaser3 engine
MIT License
1.2k stars 260 forks source link

Fix AwaitLoader callback types #296

Closed igoradamenko closed 2 years ago

igoradamenko commented 2 years ago

Hey there!

I've fixed some types. Hope I've done everything right and you'll be able to merge it.

rexrainbow commented 2 years ago

Here is a test code but I am not sure it is a suitable use case of this new feature. Could you please provide a simplest test code for this new feature?

igoradamenko commented 2 years ago

@rexrainbow, this is quite similar to the way we use the loader in our code. Check this out:

import AwaitLoader from 'phaser3-rex-plugins/plugins/awaitloader';

import API from 'app/services/api';

export default class LevelSelectionScene extends Phaser.Scene {
  data: any;
  preloader: Phaser.GameObjects.Text | undefined;

  constructor() {
    super(LevelSelectionScene.name);
  }

  init() {
    this.preloader = this.add.text(
      this.scale.width / 2,
      this.scale.height / 2,
      'Loading...',
      {
        color: '#000',
      },
    ).setOrigin(0.5);
  }

  preload() {
    AwaitLoader.call(this.load, 'test', {
      callback: async (success, fail) => {
        try {
          this.data = await API.getData();
          success();
        } catch (error) {
          console.error(error);
          fail();
        }
      },
    });
  }

  create() {
    if (this.load.totalFailed) {
      console.log('Something went wrong');
    }

    this.preloader?.destroy();
  }
}

The main difference is the usage of await. In your example it would be like this:

preload() {
  var textObject = this.add.text(0, 0, 'Preload\n');

  AwaitLoader.call(this.load, async function (successCallback: Function, failureCallback: Function) {
      try {
        var dataJSON = await fetch('http://example.com/data.json');
        var data = await dataJSON.json();
        textObject.text += data.text + '\n';
        successCallback();
      } catch (err) {
        textObject.text += 'Error\n';
        failureCallback();
      }
  })

  this.print = textObject;
}

Or like this, depending on the notation chosen:

preload() {
  var textObject = this.add.text(0, 0, 'Preload\n');

  AwaitLoader.call(this.load, 'test', {
    callback: async function (success: Function, failure: Function) {
      try {
        var dataJSON = await fetch('http://example.com/data.json');
        var data = await dataJSON.json();
        textObject.text += data.text + '\n';
        success();
      } catch (err) {
        textObject.text += 'error\n';
        failure();
      }
    }
  })

  this.print = textObject;
}

Should I create a PR changing the example, or you're going to do it by yourself?

rexrainbow commented 2 years ago

Got it. Thanks for explaining. Modified test code is here, which running async tasks then call successCallback at last.

igoradamenko commented 2 years ago

Cool! 🎉

Would you mind to tell, when may we expect this change to be published on npm?

rexrainbow commented 2 years ago

Usually at end of a month, last publishing date was yesterday (06/30). Next publishing date might be after 07/20.

igoradamenko commented 2 years ago

Got it. Thank you! 🤝