Fixed asymmetrical tiles by changing tile side labels and match check… #18
Conversation
| @@ -130,7 +130,8 @@ function draw() { | |||
| const cell = random(gridCopy); | |||
| cell.collapsed = true; | |||
| const pick = random(cell.options); | |||
| cell.options = [pick]; | |||
| // undefined options? why? | |||
| cell.options = [pick ? pick : 0]; | |||
There was a problem hiding this comment.
This is what was causing a crash sometimes during stream. Somehow this random option pick becomes undefined. I quickly fixed it by setting it to tile 0 when it happens but would be nice to know why it happens at all.
There was a problem hiding this comment.
I think this is b/c cell.options is empty if/when there are no possibilities that will fit?
There was a problem hiding this comment.
Yes, that was the reason. If the function collapses from two different directions it's easy that a cell reaches an invalid status because it's two neighbors are drawing something that can't be joined. It's a limitation from the tileset. We would need to add backtracking to fix it.
| tiles[1] = new Tile(tileImages[1], ['111', '111', '111', '111']); | ||
| tiles[2] = new Tile(tileImages[2], ['111', '222', '111', '111']); | ||
| tiles[3] = new Tile(tileImages[3], ['111', '333', '111', '333']); | ||
| tiles[4] = new Tile(tileImages[4], ['001', '222', '100', '000']); |
There was a problem hiding this comment.
The new side labelling system allows for special labels to identify asymmetrical tiles while leaving symmetrical tiles working just fine. In order to identify 2 matching asymmetrical sides we need to use a mirrored label, in this case '100' and '001'.
| this.left.push(i); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| reverseEdge(edge) { | ||
| return edge.split("").reverse().join(""); |
There was a problem hiding this comment.
We now compare each tile side label against the mirrored image of itself. For symmetrical tiles it's "unnecessary" as it compares '000' with '000'. But for asymmetrical tiles it compares successfully '100' against the right match '001'.
This auxiliary method just reverses the string by transforming it first to an array to use the reverse() method.
|
Wow, this is so helpful! I am going to implement this today! |
|
Thank you @telemak0!!!! I so appreciate this! Is it ok to close this pull request now that I implemented my own version live today? |
|
Done! Good job on the series, I loved it! |
… method
Applies the fix explained in the issue #16
Samples:
