Scrambler overlap

Questions
1

I am encountering an issue where items on a scrambler don't move and when I drop the object it overlaps with one already there.

2

What version of ZIM?

3
  1. I recall it doing this before. It won't do it if I set swaplock to true.
4

When you change the num does the scrambler check the positions of the objects while it's scrambling? Maybe it's getting confused if you set num to 3. It cheks positions on each scramble and doesn't allow that object to then be moved because it's in the correct position?

5

I just found another issue with the scrambler locking if I click with the mouse too fast.

6

The locking even occurs with touch.

7

The issue doesn't appear to be present on ZIM 015.

8

Will take a look later. For now, can you test with a basic scrambler without keys, swapLock, etc.

There is no difference in the Scrambler code from 015 to 106. But drag() has some changes:

9

I had it on 14 with no options other than tile, keys and key property, was having issues when I moved to 16 that's when I tried other options but had same results. I just went back to 15 for now.

10

Hmmm... not that much different in the drag() either. Added a few preventDefault and stopImmediatePropagation calls. Added one if (e.stageX==null return. Do not think any of these would cause a regression.

Possibly something in animate as it goes back to its location. Can you please try using the template below. I have used the ZIM 015 amimate() inside the rest of the ZIM 016 to test if animate is the issue.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM - Code Creativity</title>

<!-- zimjs.com - JavaScript Canvas Framework -->
<script src="https://zimjs.org/cdn/1.4.1/createjs.js"></script>
<script src="https://zimjs.com/cdn/016/zim_doc2.js"></script>

<script>

// See Docs under Frame for FIT, FILL, FULL, and TAG
const frame = new Frame(FIT, 1024, 768, light, dark);
frame.on("ready", () => {

    const stage = frame.stage;
    let stageW = frame.width;
    let stageH = frame.height;

    // put your code here
    new Circle(100, purple)
        .center()
        .drag();

}); // end ready

</script>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<body></body>
</html>
11

That also causes it to freeze. ZIM 015 doesn't have any issues.

12

Okay - thanks for testing. We have uploaded a ZIM_doc3.js that has the drag() code and the animate() code from 015. Like I said, when we tested against the scrambler() code it was the same. Could you please switch to ZIM_doc3.js and see if that helps?

13

This also freezes it. ZIM015 doesn't freeze but it is out of alignment.

flagpuzzle
flagpuzzle1920×1283 102 KB

14

This example also doesn't work with ZIM016.

I am getting this error.

ZIM_min.js:7 Uncaught TypeError: Cannot read properties of undefined (reading 'addChild')
at Qo.wire (ZIM_min.js:7:592503)
at zob (ZIM_min.js:7:3689)
at Qo.wire (ZIM_min.js:7:591939)
at Qo.CheckBox.wire (ZIM_min.js:7:1008302)
at ready (script.js:312:80)
at ye (ZIM_min.js:7:950400)
at Qo.Queue. (ZIM_min.js:7:950182)
at createjs.js:30:3015
at e._dispatchEvent (createjs.js:30:4499)
at e._dispatchEvent (createjs.js:30:4567)

I tried the options above.

15

Okay - back from vacation...

The jigsaw puzzle does not use the scrambler and will be another issue due to some update in ZIM since it was made. Probably it would be good for us to update it as it is a popular example (sigh). Updates tips can be found here TIPS - ZIM JavaScript Canvas Framework - Code Creativity with ZIMjs!

But, back to the Scrambler issue. Sorry, the Forum automatically converts lowercase ZIM to uppercase ZIM so it is tricky when providing a URL which is lowercase. You have tried the ZIM doc2.js file which just had the Scrambler code from 015 but the rest of the code 016 and it still broke. So can you please try the doc3.js version which has the Scrambler and the drag code from 015 and the rest 016.

image

Thanks!

16

it still freezes. I didn't notice the ovelap.

I did figure out the regular puzzle issue, it had to do with these two lines:

const hintCheck = new CheckBox(30, "hint").alp(.8).pos(50,23,LEFT,BOTTOM).wire({target:hint, prop:"visible", input:"checked"});
const picCheck = new CheckBox(30, "picture").alp(.8).pos(150,23,LEFT,BOTTOM).wire({target:pic, prop:"visible", input:"checked"});

I made them conditional and it works perfectly.

Thanks,

17

Okay - so that means it is not the Scrambler() and not the drag() as those two are the same as in 015 which works. Maybe the animate(). Can you please try doc4 that has the scrambler, drag and animate that is the same as 015 but the rest 016.

ZIM 016 has been patched with a fix for the wire() when using the configuration object - we fixed wired() but missed a line in or two in wire(). So clear cache and those checkboxes with wire should work in the Jigsaw Puzzle.

18

I think that did it. I cant break it. :slight_smile:

Something else about the puzzle, when tapping two pieces at once to rotate them, it freezes. However, if you comment this line, pieces.noMouse(); and theis one, pieces.Mouse(); it doesn't.

19

Okay. So as soon as we added the 015 animate it does not break. Let's just do a test to make sure, if that is okay with you. Can you please try doc5. This one has only the animate from 015 and all the rest is 016.

Also, could you send your Scrambler parameters as well just to verify the format you are running.

For the Jigsaw, it should be mouse() and it is in the code - you just gave the example with a capital M.

Okay... I know what it is. When we set a noMouse() we remember what the last mouseChildren is so we can reset to it with mouse(). For instance, a Rectangle() is a Container with a Shape inside and the Container has mouseChildren false so we do not drag around the Shape inside. If we are setting noMouse() and mouse() on a Rectangle() then when it sets noMouse() it remembers that mouseChildren is false so that when we set mouse() it keeps mouseChildren false.

So when we tap two pieces, the first tap sets the noMouse() on the pieces container and the tap on the next piece sets the noMouse() on the same pieces container and remembers that it has mouseChildren false. So when it sets it back again with mouse() it sets mouseChildren false.

We have to set the noMouse() on the piece rather than all the pieces. Okay - the example on CodePen has been updated. Thanks!

20

puzzle works. I haven't tested the wire(), my code works as is. :slight_smile:

Here is my scrambler code.

loop(keys.length, i => {
let rc = rand(0, 12);
var tile = new Label({
text: keys[i],
color: white,
bold: true,
size: 50,
outlineWidth: 5,
outlineColor: randomColor(),
align: CENTER,
valign: CENTER,
backing: new Pic(books[rc])///new Rectangle(250, 70, randomColor({ luminosity: "light" }))
});
tiles.push(tile);
});

    var tile = new Tile({
        obj: tiles,
        unique: true,
        cols: keys.length,
        spacingH: 30,
        spacingV: 10,
        rows: 1,
        width: 1800
    });

    scrambler = new Scrambler({
        tile: tile,
        keys: keys,
        time: 1.8, // total time for scrambling
        num: 3, // number
        swapLock: false,
        keyProperty: "text"
    }).addTo(holder).pos(50, 180);

It freezes with doc5 but not with doc4.