Board Game Arena

Posted: **14 August 2020, 15:33**

Inspired by the thread about making effective use of Modules to create classes and organize the project on the PHP side, I was wondering if there is an established way to apply similar OOP principles to the client side, as the js file can become a monolith as well.

I tried creating an object that would manage tokens and movement animations on the board based on Santorini's approach to the client side Board object. An object is defined in an external file and exported with the following lines:

./modules/scripts/ObjectManager.js

Code: Select all

...
window.ObjectManager = ObjectManager;
export { ObjectManager };

Then the js file is included in the tpl file:

./gamename_gamename.tpl

Code: Select all

...
<script type="text/javascript">
const URL = dojoConfig.packages.reduce((r,p) => p.name == "bgagame" ? p.location : r, null);
document.write('<script src="' + URL + '/modules/scripts/ObjectManager.js" type="module"><\/script>');
...

Then the object is constructed in setup

./gamename.js

Code: Select all

this.objects = new ObjectManager( this );

This seems to be mostly working, except the implementation of Zone methods (and probably many other dependent methods) is broken because "this" now refers to the ObjectManager instead of the "game" object you're normally defining Zones in. For example, calling placeInZone on a zone created in ObjectManager produces the error: "TypeError: this.page.attachToNewParent is not a function"

I can add these lines to the object containing the zone's constructor, where this.game is a reference to "this" that was passed in to the ObjectManager constructor:

./modules/scripts/ObjectManager.js

Code: Select all

this.attachToNewParent = dojo.hitch( this.game, this.game.attachToNewParent );
this.transformSlideAnimTo3d = dojo.hitch( this.game, this.game.transformSlideAnimTo3d );

This makes placeInZone "work", but I'm sure this isn't the right way to go about it. Is there a simpler and more comprehensive way to make sure that methods within BGA client side objects defined in an external file have the correct scope?

Posted: **14 August 2020, 16:52**

I figured out what I did wrong. The first argument of the "create" method of the zone must refer to the "game" object, which is normally referred to by 'this' when you're creating it in your game.js file. I had called create on the new zone in the external object's constructor and just used 'this' as the first argument without thinking about it.

Wrong

Code: Select all

var SomeExternalObject = function( game ) {
    this.game = game;
    this.zone = new ebg.zone();
    this.zone.create( this, some_dom_object, 40, 40 );
}

Right

Code: Select all

var SomeExternalObject = function( game ) {
    this.game = game;
    this.zone = new ebg.zone();
    this.zone.create( this.game, some_dom_object, 40, 40 );
}

Posted: **15 August 2020, 08:17**

I use babel (so I can use thingies like `string ${interpolation}`, async/await, etc).

And so I can use JS classes

My game is smallish, so I put everything is the same file; I suppose using gulp or any other manager, it's easy to concat all js files.

Posted: **16 August 2020, 03:01**

why use document.write over a dojo module?

there is an example in the cookbook

Posted: **16 August 2020, 05:59**

Ah, that's much simpler. For reference, don't use the export commands in the first code block of my original post in your external script if you use the cookbook method.

Posted: **16 August 2020, 07:48**

hersh wrote: ↑16 August 2020, 03:01 why use document.write over a dojo module?

there is an example in the cookbook

Didn't know this one worked with js modules, I tought it was only for scripts !
Can you use it as "import" by specifying what you want to load and under which name ?

Posted: **17 August 2020, 02:57**

Tisaac wrote: ↑16 August 2020, 07:48
hersh wrote: ↑16 August 2020, 03:01 why use document.write over a dojo module?

there is an example in the cookbook
Didn't know this one worked with js modules, I tought it was only for scripts !
Can you use it as "import" by specifying what you want to load and under which name ?

I'm not familiar it so I'm not sure. You can include javascript in the file (outside of dojo declare), but I'm not sure if type="module" is required for native javascript modules. I think the intent of the cookbook would be to leverage dojo.

Board Game Arena

[Solved] Zones in an external object

[Solved] Zones in an external object

Re: Zones in an external object

Re: [Solved] Zones in an external object

Re: [Solved] Zones in an external object

Re: [Solved] Zones in an external object

Re: [Solved] Zones in an external object

Re: [Solved] Zones in an external object