Adding a scrambler to a page

Questions
1

I am trying to add a scrambler to a second page. I have the scrambler working, however when I add it to page 2, when I do a mouse down on a piece of the puzzle, the piece disappears and then becomes visible on mouseup.

I don't have this problem if I use addTo(), except that the puzzle appears on all pages.
I don't have this problem if I use addTo(page1).
It only happens when I use addTo(page2).

The code I have is below. Just wondering if someone can see what I am missing.

Thank you for your help.

Rod

this.stop();
//adding the pages class
//new Page(W,H,green).center();
const page1= new Page(W,H,green).center();
const page2= new Page(W,H,white).center();
const pages = new Pages([page1,page2],"bubbleZIM",1).addTo();
//
F.loadAssets("bero_red.png", "pics/");
F.on("complete",()=>{
	const pic = new Pic("bero_red.png");
	const puzzle = new Scrambler(chop((pic), 4, 1))
		//.addTo()
		//.addTo(page1)
		.addTo(page2)
		.pos(650,380);
	
	puzzle.on("complete", ()=>{
		puzzle.scramble(1,2,3);//take 1 sec to scramble it 3 times but wait 2 seconds
	})
})
2

image
image1267×151 12.4 KB

It might need an update() to reset boundaries.

This would be set once the page is in place:

pages.on("pagetransitioned", ()=>{
  if (pages.page == page2) puzzle.update();
});

Try that and let us know.

3

It works well!!!

I originally placed the code you gave me at the end of the code I have, and it didn't work, but when I placed it as below - it works perfectly..... I have tested it on a third page as well.

Thank you very much Dr.

Rod
F.on("complete",()=>{
const pic = new Pic("bero_red.png");
const puzzle = new Scrambler(chop((pic), 4, 1))
//.addTo()
//.addTo(page1)
.addTo(page3)
.pos(650,380);

pages.on("pagetransitioned", ()=>{
	if (pages.page == page2) puzzle.update();
	if (pages.page == page3) puzzle.update();
});

puzzle.on("complete", ()=>{
	puzzle.scramble(1,2,3);//take 1 sec to scramble it 3 times but wait 2 seconds
})

})

1 Like
4

Glad it worked!