> For the complete documentation index, see [llms.txt](https://doc.lucky-cycle.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.lucky-cycle.com/games/index/swapper.md).

# Swapper

{% hint style="warning" %}
Demo: <https://campaigns.lucky-cycle.com/utils/games?game=swapper>
{% endhint %}

1. [#configuration](#configuration "mention")
2. [#options](#options "mention")
3. [#assets](#assets "mention")

### Configuration

<details>

<summary>JSON</summary>

```json
{
  "options": {
    "score_type": "time",
    "display_score": false,
    "background_color": "white",
    "border_width": 1.5,
    "border_color": "black",
    "hover_color": "black",
    "found_color": "transparent",
    "header_text_color": "white",
    "header_background_color": "black",
    "horizontal_pieces": 3,
    "vertical_pieces": 2,
    "use_reward_image": false
  },
  "texts": {
    "en": {
      "unit": "s"
    },
    "fr": {
      "unit": "s"
    },
    "nl": {
      "unit": "s"
    }
  },
  "images": {
    "background": {
      "en": "",
      "fr": "",
      "nl": ""
    },
    "win": {
      "en": GAME_URL + "/win_en.png",
      "fr": GAME_URL + "/win_fr.png",
      "nl": GAME_URL + "/win_nl.png"
    },
    "lose": {
      "en": GAME_URL + "/lose_en.png",
      "fr": GAME_URL + "/lose_fr.png",
      "nl": GAME_URL + "/lose_nl.png"
    },
    "overlay": {
      "en": GAME_URL + "/overlay_en.png",
      "fr": GAME_URL + "/overlay_fr.png",
      "nl": GAME_URL + "/overlay_nl.png"
    },
    "rewards": {}
  }
}
```

</details>

### Options

<table><thead><tr><th>Key</th><th>Type</th><th>Explanation</th><th>Default</th></tr></thead><tbody><tr><td><pre><code>score_type
</code></pre></td><td>String</td><td>Score calculation can be based on <strong>time</strong> or <strong>moves</strong>.</td><td>"time"</td></tr><tr><td><pre><code>display_score
</code></pre></td><td>Boolean</td><td>Displays the header with current score to the player (or not).</td><td>false</td></tr><tr><td><pre><code>background_color
</code></pre></td><td>String</td><td>Background color of the game.</td><td>"white"</td></tr><tr><td><pre><code>border_width
</code></pre></td><td>Int</td><td>Width of the border of each tile (0 = no border).</td><td>1.5</td></tr><tr><td><pre><code>border_color
</code></pre></td><td>String</td><td>Color of the border of each tile (transparent = no border visible).</td><td>"black"</td></tr><tr><td><pre><code>hover_color
</code></pre></td><td>String</td><td>Color overlay of a hovered tile (has a 50% opacity).</td><td>"black"</td></tr><tr><td><pre><code>found_color
</code></pre></td><td>String</td><td>Color overlay of a  tile that is correctly positioned (has a 50% opacity - <em>hover</em> having priority on this).</td><td>"transparent"</td></tr><tr><td><pre><code>header_text_color / header_background_color
</code></pre></td><td>String</td><td>Color and background color of the header (if displayed).</td><td>"white" / "black"</td></tr><tr><td><pre><code>horizontal_pieces / vertical_pieces
</code></pre></td><td>Int</td><td>Number of tiles (3*2 = 6 tiles).</td><td>3 / 2</td></tr><tr><td><pre><code>use_reward_image
</code></pre></td><td>Boolean</td><td>Chooses between using a reveal image per reward, or the default <em>win</em> one.</td><td>false</td></tr><tr><td><pre><code>texts > unit
</code></pre></td><td>String</td><td>Text displayed after the score (could be "moves" depending on the <em>score_type</em>).</td><td>"s"</td></tr></tbody></table>

### Assets

<table><thead><tr><th>Key</th><th>Size</th><th>Explanation</th><th>Default</th></tr></thead><tbody><tr><td><pre><code>background
</code></pre></td><td>550 x 380</td><td>Background visual.</td><td>/</td></tr><tr><td><pre><code>win
</code></pre></td><td>550 x 380</td><td>Reveal visual in case of win (and if <em>use_reward_image</em> is set to false). </td><td><a href="https://statics.lucky-cycle.com/files/_games/swapper/win_en.png">/win_en.png</a></td></tr><tr><td><pre><code>lose
</code></pre></td><td>550 x 380</td><td>Reveal visual in case of lose.</td><td><a href="https://statics.lucky-cycle.com/files/_games/swapper/lose_en.png">/lose_en.png</a></td></tr><tr><td><pre><code>overlay
</code></pre></td><td>550 x 380</td><td>Visual to be split in tiles.</td><td><a href="https://statics.lucky-cycle.com/files/_games/swapper/overlay_en.png">/overlay_en.png</a></td></tr></tbody></table>