BGA Zone fails in ES6 code

[WetDogIsHappy]

I can create a zone, but when I try to use 'placeInZone', the code crashes.
This code in legacy style works just fine.

Here is my code in the setup function of my game:

// test the zone code in es6 land
// const [zone] = await importDojoLibs(['ebg/zone']);

document.getElementById(`mr_main`).insertAdjacentHTML('beforeend', `
<div id="testZone" style="width:100px; height:100px;border:1px black solid" ></div>
`);
this.testZone = new ebg.zone();
this.testZone.create(this, `testZone`, 100, 100);
this.testZone.setPattern('grid');
this.testZone.placeInZone('mr_disc_5_4_wrapper');

It throws:

Uncaught (in promise) TypeError: this.page.attachToNewParent is not a function

Examining the source code show it failing in this piece of code

The "this.page.attachToNewParent($(e), this.container_div);" fails in the placeInZone function

placeInZone: function(e, t) {
void 0 === t && (t = 0);
if (!this.isInZone(e)) {
this.items.push({
id: e,
weight: t
});
this.page.attachToNewParent($(e), this.container_div);
this.items.sort(function(e, t) {
return e.weight > t.weight ? 1 : e.weight < t.weight ? -1 : 0
});
this.updateDisplay()
}
},

[thoun]

Can you try with this.bga.gameui in the create function?

[WetDogIsHappy]

I cleaned up the example a bit.
I found testZone in this.bga.gameui.GameModule

But it fails the same way


// test the zone code in es6 land
// const [zone] = await importDojoLibs(['ebg/zone']);
document.getElementById(`mr_main`).insertAdjacentHTML('beforeend', `
<div id="placeThis" style="width:10px; height:10px;border:1px blue solid" ></div>
<div id="testZone" style="width:100px; height:100px;border:1px black solid" ></div>
`);
this.testZone = new ebg.zone();
this.testZone.create(this, `testZone`, 100, 100);
this.testZone.setPattern('grid');

// this.testZone.placeInZone('placeThis');
this.bga.gameui.GameModule.testZone.placeInZone('placeThis');

[WetDogIsHappy]

This also fails


// test the zone code in es6 land
// const [zone] = await importDojoLibs(['ebg/zone']);
document.getElementById(`mr_main`).insertAdjacentHTML('beforeend', `
<div id="placeThis" style="width:10px; height:10px;border:1px blue solid" ></div>
<div id="testZone" style="width:100px; height:100px;border:1px black solid" ></div>
`);
this.bga.gameui.testZone = new ebg.zone();
this.bga.gameui.testZone.create(this, `testZone`, 100, 100);
this.bga.gameui.testZone.setPattern('grid');
this.bga.gameui.testZone.placeInZone('placeThis'); // this fails with ly_studio.js:1 Uncaught (in promise) TypeError: this.page.attachToNewParent is not a function
// this.bga.gameui.GameModule.testZone.placeInZone('placeThis');

[thoun]

That's not what I meant
testZone.create(this.bga.gameui, ...)

[WetDogIsHappy]

Apologies.

That is the answer.

The slightly upgraded example worked as expected.

// test the zone code in es6 land
// const [zone] = await importDojoLibs(['ebg/zone']);
document.getElementById(`mr_main`).insertAdjacentHTML('beforeend', `
<div id="placeThis1" style="width:10px; height:10px;border:1px blue solid" ></div>
<div id="placeThis2" style="width:10px; height:10px;border:1px blue solid" ></div>
<div id="placeThis3" style="width:10px; height:10px;border:1px blue solid" ></div>
<div id="testZone" style="width:100px; height:100px;border:1px black solid" ></div>
`);
this.testZone = new ebg.zone();
this.testZone.create(this.bga.gameui, `testZone`, 100, 100);
this.testZone.setPattern('grid');
this.testZone.placeInZone('placeThis1');
this.testZone.placeInZone('placeThis2');
this.testZone.placeInZone('placeThis3');