# Jigsaw (Advanced Puzzle)

<figure><img src="/files/lLGUUY9zgSRMoG5QSfdA" alt="" width="375"><figcaption></figcaption></figure>

{% hint style="info" %}
All the minigames and puzzles must be set up with actions to work properly and also define what happens once the player wins, finishes, or loses.
{% endhint %}

## How to change the component style

To resize it, use the arrow icon in the top menu.

<figure><img src="/files/sAbppQC3zGRPH9hFMdDc" alt=""><figcaption></figcaption></figure>

• Image upload: The game creator can upload an image in PNG or JPG format.

<figure><img src="/files/PrVWbqEab0AeOh2VsCb5" alt=""><figcaption></figcaption></figure>

* Difficulty selection: Creator Difficulty Options:&#x20;

  * Easy: 8 pieces (2x4).
  * Medium: 16 pieces (4x4).
  * Hard: 24 pieces (4x6).

  &#x20;The difficulty chosen determines the number of divisions in the image.

• Automatic shuffling: When you select the difficulty, the system splits the image into the specified number of pieces. The pieces are then shuffled randomly and placed in the menu on the right side.

* Player Interaction:
  * Players can drag and drop pieces onto the board to assemble them.
  * The player will be able to see all the pieces in the menu by scrolling with the two vertical arrows.

<figure><img src="/files/Zwg4YduvzPiFxaHGmmwg" alt=""><figcaption></figcaption></figure>

* Actions:
  * Win: Once the puzzle is correctly assembled, a victory message is displayed
  * When placing a piece in a bad position: If the position isn´t correct the piece will not fit and will remain “floating”.

When placing a piece in a good position: Pieces automatically snap into place when positioned correctly and the edge of the piece lights up. (Something similar like the video in comments but only the outilne)

* Advanced options:
  * Mute sound
* Design:
  * A box on the right side, white with a grey outline (#EDEFF3), in which the pieces will be placed, the box will disappear once the puzzle is completed. On the left side a menu where the pieces will appear, with two arrows so the player can see all of them.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://academy.theufolab.com/game-editor/components/minigames/jigsaw-advanced-puzzle.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.