# Welcome!

{% hint style="success" %}
You found Lucky Cycle's documentation!
{% endhint %}

Please find below the available categories:

### Categories

{% content-ref url="/pages/tRaSEU7p5QG2vIoLb0YI" %}
[Games](/games/index)
{% endcontent-ref %}

{% content-ref url="/pages/byOlllDftw3bIjX2K0P6" %}
[Campaigns (FR)](/campaigns/index)
{% endcontent-ref %}


# Map


# Games

The configurations and options of the currently available games are listed below.

{% hint style="warning" %}
This documentation is only relative to the ***gamesComponent*** (2023+).\
\
~~The legacy one is still available through~~ [~~this link~~](https://clients.luckycycle.com/documentation/lucky.html)~~, but should only be used for **creative purposes** anymore!~~
{% endhint %}

***

### Sections

* [Categories](#categories)
* [Catalogue](#catalogue)

***

### Categories

We split animations into 3 categories:

<table data-view="cards"><thead><tr><th></th><th></th><th></th></tr></thead><tbody><tr><td><strong>Chance</strong></td><td>Animation used to reveal the <strong>predetermined</strong> result of the game.</td><td></td></tr><tr><td><strong>Skill</strong></td><td>Game in which the participant is given a <strong>score</strong>, which may determine the outcome.</td><td></td></tr><tr><td><strong>Quizzes</strong></td><td>Animations with a more educational vocation, in which the participant's <strong>actions</strong> are recorded, and can condition the result.</td><td></td></tr></tbody></table>

{% hint style="success" %}
The only 'technical' difference between these categories is that the result of the game is calculated **before the game in the first case**, whereas it is determined **afterwards in the other two**.

It is possible, however, **not** to use the player's score in the algorithms for games of skill and quizzes *(which in this case reduces them to games of chance as far as the allocation of prizes is concerned)*.
{% endhint %}

***

### Catalogue

{% tabs %}
{% tab title="Chance" %}

* [Black-Jack](/games/index/black-jack)
* [Brelan](/games/index/brelan)
* [Flip Cards](/games/index/flip-card)
* [Grabber](/games/index/grabber)
* [Pinata](/games/index/pinata)
* [Scratch Card](/games/index/scratch-card)
* [Scratch Nine](/games/index/scratch-nine) *(and -Triple)*
* [Shooter](/games/index/shooter)
* [Short](/games/index/short)
* [Shuffler](/games/index/shuffle)
* [Slot Machine](/games/index/slot-machine)
* [Train](/games/index/train)
* [Vintage Wheel](/games/index/vintage-wheel)
* [Wheel](/games/index/wheel)
  {% endtab %}

{% tab title="Skill" %}

* [Candy Crush](/games/index/candy-crush)
* [Catch'Em All!](/games/index/catch-all)
* [Dino Run](/games/index/dino-run)
* [Endless Runner](/games/index/endless)
* [Hidden Object](/games/index/hidden-object)
* [Paper Toss](/games/index/paper-toss)
* [Penalty](/games/index/penalty)
* [Pinball](/games/index/pinball)
* [Slicer](/games/index/slicer)
* [Snake](/games/index/snake)
* [Swapper](/games/index/swapper)
  {% endtab %}

{% tab title="Quizzes" %}

* [Memory](/games/index/memory)
* [Millionaire](/games/index/millionaire)
* [Personality](/games/index/personality)
* [Tinder](/games/index/tinder)
  {% endtab %}
  {% endtabs %}

<details>

<summary>Full list</summary>

* [Black-Jack](/games/index/black-jack)
* [Brelan](/games/index/brelan)
* [Candy Crush](/games/index/candy-crush)
* [Catch'Em All!](/games/index/catch-all)
* [Dino Run](/games/index/dino-run)
* [Endless Runner](/games/index/endless)
* [Flip Cards](/games/index/flip-card)
* [Grabber](/games/index/grabber)
* [Hidden Object](/games/index/hidden-object)
* [Memory](/games/index/memory)
* [Millionaire](/games/index/millionaire)
* [Paper Toss](/games/index/paper-toss)
* [Penalty](/games/index/penalty)
* [Personality](/games/index/personality)
* [Pinata](/games/index/pinata)
* [Pinball](/games/index/pinball)
* [Scratch Card](/games/index/scratch-card)
* [Scratch Nine](/games/index/scratch-nine) *(and -Triple)*
* [Shooter](/games/index/shooter)
* [Short](/games/index/short)
* [Shuffler](/games/index/shuffle)
* [Slicer](/games/index/slicer)
* [Slot Machine](/games/index/slot-machine)
* [Snake](/games/index/snake)
* [Swapper](/games/index/swapper)
* [Tinder](/games/index/tinder)
* [Train](/games/index/train)
* [Vintage Wheel](/games/index/vintage-wheel)
* [Wheel](/games/index/wheel)

</details>

***

{% hint style="info" %}
Not an actual game, but here are the specs of the post-game [Explosion](/games/index/explosion) animation.
{% endhint %}


# Explosion

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

### Configuration

<details>

<summary>JSON</summary>

<pre class="language-json"><code class="lang-json">{
<strong>  "type": "",
</strong>  "particule_image": GAME_URL + "/particles.png",
  "particule_width": 50,
  "particule_height": 50,
  "particule_amount": 100,
  "explode_on_win": true,
  "explode_on_lose": false,
  "explode_fullscreen": true
}
</code></pre>

</details>

### Options

<table><thead><tr><th>Key</th><th>Type</th><th>Explanation</th><th>Default</th></tr></thead><tbody><tr><td><pre><code><strong>type
</strong></code></pre></td><td>String</td><td>Explosion type.</td><td>/</td></tr><tr><td><pre><code>particule_width
</code></pre></td><td>Integer</td><td>Width of one explosion item.</td><td>50</td></tr><tr><td><pre><code>particule_height
</code></pre></td><td>Integer</td><td>Height of one explosion item.</td><td>50</td></tr><tr><td><pre><code>particule_amount
</code></pre></td><td>Integer</td><td>Number of items to render in the animation.</td><td>100</td></tr><tr><td><pre><code>explode_on_win
</code></pre></td><td>Boolean</td><td>Should the explosion be triggered on <em><mark style="color:yellow;">win</mark></em>.</td><td>true</td></tr><tr><td><pre><code>explode_on_lose
</code></pre></td><td>Boolean</td><td>Should the explosion be triggered on <em><mark style="color:yellow;">lose</mark></em>.</td><td>false</td></tr><tr><td><pre><code>explode_fullscreen
</code></pre></td><td>Boolean</td><td>Should the explosion be fullscreen <em>(true)</em> or fit the game zone <em>(false)</em>.</td><td>true</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>particule_image
</code></pre></td><td>300 x 50px</td><td>Sprite used in the animation <mark style="color:red;">(6 particles of 50 x 50px each)</mark>.</td><td><a href="https://statics.lucky-cycle.com/files/_games/explosion/particles.png">/particles.png</a></td></tr></tbody></table>


# Black-Jack

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

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

### Configuration

<details>

<summary>JSON</summary>

```json
{
  "options": {
    "background_color": "transparent",
    "big_win_id": "1234"
  },
  "texts": {
    "en": {
      "play_button": "Play now",
      "game": {
        "dealer": "Bank",
        "player": "Your hand"
      }
    },
    "fr": {
      "play_button": "Je joue",
      "game": {
        "dealer": "Banque",
        "player": "Votre main"
      }
    },
    "nl": {
      "play_button": "Speel nu",
      "game": {
        "dealer": "Bank",
        "player": "Jouw hand"
      }
    }
  },
  "images": {
    "background_image": GAME_URL + "/background.png",
    "cards": {
      "2": GAME_URL + "/2.png",
      "3": GAME_URL + "/3.png",
      "4": GAME_URL + "/4.png",
      "5": GAME_URL + "/5.png",
      "6": GAME_URL + "/6.png",
      "7": GAME_URL + "/7.png",
      "8": GAME_URL + "/8.png",
      "9": GAME_URL + "/9.png",
      "10": GAME_URL + "/10.png",
      "J": GAME_URL + "/jack.png",
      "Q": GAME_URL + "/queen.png",
      "K": GAME_URL + "/king.png",
      "11": GAME_URL + "/ace.png",
      "back": GAME_URL + "/back.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>background_color
</code></pre></td><td>String</td><td>Background color (visible if no image).</td><td>"transparent"</td></tr><tr><td><pre><code>big_win_id
</code></pre></td><td>String</td><td>ID of a reward to trigger the special pair (figure + ace).</td><td>"1234"</td></tr><tr><td><pre><code>play_button
</code></pre></td><td>String</td><td>Text for the button that is displayed at the start of the game.</td><td>"Play now" / "Je joue" / "Speel nu"</td></tr><tr><td><pre><code>game > dealer
</code></pre></td><td>String</td><td>Text for the dealer's hand.</td><td>"Bank" / "Banque" / "Bank"</td></tr><tr><td><pre><code>game > player
</code></pre></td><td>String</td><td>Text for the player's hand.</td><td>"Your hand" / "Votre main" / "Jouw hand"</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_image
</code></pre></td><td>500 x 500px <mark style="color:orange;">(may be cropped depending the screen)</mark>.</td><td>Background of the game.</td><td><a href="https://statics.lucky-cycle.com/files/_games/black-jack/background.png">/background.png</a></td></tr><tr><td><pre><code>cards > 2
...
cards > 11
</code></pre></td><td>150 x 200px</td><td>Cards (front).</td><td><a href="https://statics.lucky-cycle.com/files/_games/black-jack/ace.png">/ace.png</a></td></tr><tr><td><pre><code>cards > back
</code></pre></td><td>150 x 200px</td><td>Card back.</td><td><a href="https://statics.lucky-cycle.com/files/_games/black-jack/back.png">/back.png</a></td></tr></tbody></table>


# Brelan

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

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

### Configuration

<details>

<summary>JSON</summary>

```json
{
  "options": {
    "background_color": "transparent",
    "use_reward_image": false
  },
  "texts": {
    "en": {},
    "fr": {},
    "nl": {}
  },
  "images": {
    "background_image": "",
    "back": GAME_URL + "/back.png",
    "image_list": [
      GAME_URL + "/2.png",
      GAME_URL + "/3.png",
      GAME_URL + "/4.png",
      GAME_URL + "/5.png",
      GAME_URL + "/6.png",
      GAME_URL + "/7.png",
      GAME_URL + "/8.png",
      GAME_URL + "/9.png",
      GAME_URL + "/10.png",
      GAME_URL + "/jack.png",
      GAME_URL + "/queen.png",
      GAME_URL + "/king.png"
    ],
    "win": GAME_URL + "/ace.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>background_color
</code></pre></td><td>String</td><td>Background colour of the game (if no image).</td><td>"transparent"</td></tr><tr><td><pre><code>use_reward_image
</code></pre></td><td>Boolean</td><td>Use one image per reward, or default one <em>(win)</em>.</td><td>false</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_image
</code></pre></td><td></td><td>Background image of the game.</td><td>/</td></tr><tr><td><pre><code>back
</code></pre></td><td>150 x 200px</td><td>Visual displayed <strong>before</strong> clicking (card back).</td><td><a href="https://statics.lucky-cycle.com/files/_games/brelan/back.png">/back.png</a></td></tr><tr><td><pre><code>image_list
</code></pre></td><td>150 x 200px</td><td>Visuals used in the game (card front).</td><td><a href="https://statics.lucky-cycle.com/files/_games/brelan/2.png">/2.png</a></td></tr><tr><td><pre><code>win
</code></pre></td><td>150 x 200px</td><td>Visual if won (<em>use_reward_image</em> has to be set to <em>false</em>).</td><td><a href="https://statics.lucky-cycle.com/files/_games/brelan/ace.png">/ace.png</a></td></tr></tbody></table>


# Candy Crush

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

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

### Configuration

<details>

<summary>JSON</summary>

```json
{
  "options": {
    "canvas_width": 550,
    "canvas_height": 550,
    "max_moves": 7,
    "time_left": 0,
    "game_rows": 7,
    "game_columns": 7,
    "header_height": 0,
    "margin_height_top": 0,
    "margin_height_bottom": 0,
    "backgroundColor": "transparent",
    "backgroundPosition": "center",
    "highlightColor": "black",
    "textColor": "white",
    "headerColor": "black",
    "moveColor": "white",
    "clueColor": "black",
    "datas": [
      {
        "img": GAME_URL + "/item-1.png",
        "points": 100,
        "proba": 1
      },
      {
        "img": GAME_URL + "/item-2.png",
        "points": 100,
        "proba": 1
      },
      {
        "img": GAME_URL + "/item-3.png",
        "points": 100,
        "proba": 1
      },
      {
        "img": GAME_URL + "/item-4.png",
        "points": 100,
        "proba": 1
      },
      {
        "img": GAME_URL + "/item-5.png",
        "points": 100,
        "proba": 1
      },
      {
        "img": GAME_URL + "/item-6.png",
        "points": 100,
        "proba": 1
      }
    ]
  },
  "texts": {
    "en": {
      "score": "Score",
      "move_left": "Moves",
      "time_left": "Time remaining",
      "flush": "No more combinations…",
      "flush2": "Shuffle!",
      "gameover": "Game over!",
      "gameover2": "Did you win?"
    },
    "fr": {
      "score": "Score ",
      "move_left": "Déplacements ",
      "time_left": "Temps restant ",
      "flush": "Plus de combinaisons possibles…",
      "flush2": "Redistribution !",
      "gameover": "Le jeu est terminé !",
      "gameover2": "Avez-vous gagné ?"
    },
    "nl": {
      "score": "Score",
      "move_left": "Bewegingen",
      "time_left": "Resterende tijd",
      "flush": "Geen meer combinaties…",
      "flush2": "Herverdeling!",
      "gameover": "Het spel is afgelopen!",
      "gameover2": "Heb je gewonnen?"
    }
  },
  "images": {
    "backgroundImage": "",
    "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>canvas_width / _height
</code></pre></td><td>Integer</td><td>Size of the game.</td><td>550 / 380</td></tr><tr><td><pre><code>max_moves
</code></pre></td><td>Integer</td><td>Number of moves allowed.</td><td>10</td></tr><tr><td><pre><code>time_left
</code></pre></td><td>Integer</td><td>Time before game over <mark style="color:red;">(if no </mark><em><mark style="color:red;">max_moves</mark></em><mark style="color:red;">)</mark>. <mark style="color:orange;">If both </mark><em><mark style="color:orange;">moves</mark></em><mark style="color:orange;"> and </mark><em><mark style="color:orange;">time</mark></em><mark style="color:orange;"> are set, </mark><em><mark style="color:orange;">time</mark></em><mark style="color:orange;"> is used!</mark></td><td>0</td></tr><tr><td><pre><code>game_rows / _columns
</code></pre></td><td>Integer</td><td>Number of rows / columns in the game.</td><td>6 / 9</td></tr><tr><td><pre><code>header_height
margin_height_top
margin_height_bottom
</code></pre></td><td>Integer</td><td><mark style="color:yellow;">[Advanced]</mark> Layout adjustements.</td><td>0 / 0 / 0</td></tr><tr><td><pre><code>backgroundColor
</code></pre></td><td>String</td><td>Background colour (visible if no image).</td><td>"transparent"</td></tr><tr><td><pre><code>backgroundPosition
</code></pre></td><td>String</td><td>Background image positioning <em>(CSS)</em>.</td><td>"center"</td></tr><tr><td><pre><code>highlightColor
</code></pre></td><td>String</td><td>Colour of item selection.</td><td>"black"</td></tr><tr><td><pre><code>textColor
</code></pre></td><td>String</td><td>Texts color.</td><td>"white"</td></tr><tr><td><pre><code>headerColor
</code></pre></td><td>String</td><td>Header background colour.</td><td>"black"</td></tr><tr><td><pre><code>moveColor
</code></pre></td><td>String</td><td>Colour of the line showing the current move.</td><td>"white"</td></tr><tr><td><pre><code>clueColor
</code></pre></td><td>String</td><td>Colour of the clue line.</td><td>"grey"</td></tr><tr><td><pre><code>datas > points
</code></pre></td><td>Integer</td><td>Points given per item matched.</td><td>100</td></tr><tr><td><pre><code>datas > proba
</code></pre></td><td>Integer</td><td>Chances of the item to drop in the grid.</td><td>1</td></tr><tr><td><pre><code>score
</code></pre></td><td>String</td><td>Text in the header.</td><td>"Score"</td></tr><tr><td><pre><code>move_left
</code></pre></td><td>String</td><td>Text in the header <mark style="color:orange;">(if </mark><em><mark style="color:orange;">max_moves</mark></em><mark style="color:orange;"> set)</mark>. </td><td>"Moves"</td></tr><tr><td><pre><code>time_left
</code></pre></td><td>String</td><td>Text in the header <mark style="color:orange;">(if </mark><em><mark style="color:orange;">time_left</mark></em><mark style="color:orange;"> set)</mark>.</td><td>"Time remaining"</td></tr><tr><td><pre><code>flush / flush2
</code></pre></td><td>String</td><td>Text displayed if no more combinations.</td><td>"No more combinations..." / "Shuffle!"</td></tr><tr><td><pre><code>gameover / gameover2
</code></pre></td><td>String</td><td>Text displayed at the end of the game.</td><td>"Game over!" / "Did you win?"</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>backgroundImage
</code></pre></td><td>550 x 380px <mark style="color:green;">(fit the canvas config size)</mark>.</td><td>Background of the game.</td><td>/</td></tr><tr><td><pre><code>datas > img
</code></pre></td><td>64 x 64px</td><td>Items of the game <mark style="color:red;">(must be square)</mark>.</td><td><a href="https://statics.lucky-cycle.com/files/_games/candy-crush/item-1.png">/item-1.png</a></td></tr></tbody></table>


# Catch'Em All!

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

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

### Configuration

<details>

<summary>JSON</summary>

```json
{
  "options": {
    "header_background_color": "black",
    "header_text_color": "white",
    "btn_background_color": "black",
    "btn_text_color": "white",
    "background_color": "transparent",
    "background_position": "center",
    "eggs_count": 5,
    "egg_point": 1,
    "malus_count": 0,
    "malus_point": 1,
    "speed": 3,
    "max_speed": 10,
    "acceleration_per_second": 0.5,
    "basket_speed": 5,
    "timing": 15,
    "basket_width": 75,
    "basket_height": 50,
    "egg_width": 50,
    "egg_height": 50
  },
  "texts": {
    "en": {
      "score": "Score",
      "time_left": "Time left",
      "start": "Play now"
    },
    "fr": {
      "score": "Score ",
      "time_left": "Temps restant ",
      "start": "Je joue"
    },
    "nl": {
      "score": "Score",
      "time_left": "Resterende tijd",
      "start": "Speel nu"
    }
  },
  "images": {
    "background_image": GAME_URL + "/background.png",
    "images": [
      GAME_URL + "/item-1.png",
      GAME_URL + "/item-2.png",
      GAME_URL + "/item-3.png",
      GAME_URL + "/item-4.png",
      GAME_URL + "/item-5.png",
      GAME_URL + "/item-6.png"
    ],
    "malus_images": [],
    "basket_image": GAME_URL + "/basket.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>header_background_color
header_text_color
</code></pre></td><td>String</td><td>Colour / background of the header.</td><td>"black" / "white"</td></tr><tr><td><pre><code>btn_background_color
btn_text_color
</code></pre></td><td>String</td><td>Colour / background of the CTA.</td><td>"black" / "white"</td></tr><tr><td><pre><code>background_color
</code></pre></td><td>String</td><td>Background colour (visible if no image).</td><td>"transparent"</td></tr><tr><td><pre><code>background_position
</code></pre></td><td>String</td><td>Background image positioning <em>(CSS)</em>.</td><td>"center"</td></tr><tr><td><pre><code>eggs_count
</code></pre></td><td>Integer</td><td>Number of items to display <mark style="color:yellow;">("good items")</mark>.</td><td>5</td></tr><tr><td><pre><code>egg_point
</code></pre></td><td>Integer</td><td>Point(s) given for each item caught.</td><td>1</td></tr><tr><td><pre><code>malus_count
</code></pre></td><td>Integer</td><td>Number of items to display <mark style="color:yellow;">("bad items")</mark>.</td><td>0</td></tr><tr><td><pre><code>malus_point
</code></pre></td><td>Integer</td><td>Point(s) <mark style="color:orange;">taken</mark> for each item caught.</td><td>1</td></tr><tr><td><pre><code>speed
</code></pre></td><td>Integer</td><td>Falling speed of the items (base speed).</td><td>3</td></tr><tr><td><pre><code>max_speed
</code></pre></td><td>Integer</td><td>Maximum falling speed of the items.</td><td>10</td></tr><tr><td><pre><code>acceleration_per_second
</code></pre></td><td>Float</td><td>Acceleration of the item's speed.</td><td>0.5</td></tr><tr><td><pre><code>basket_speed
</code></pre></td><td>Integer</td><td>Move speed of the basket.</td><td>5</td></tr><tr><td><pre><code>timing
</code></pre></td><td>Integer</td><td>Duration of the game.</td><td>15</td></tr><tr><td><pre><code>basket_width / _height
</code></pre></td><td>Integer</td><td>Size of the basket.</td><td>75 / 50</td></tr><tr><td><pre><code>egg_width / _height
</code></pre></td><td>Integer</td><td>Size of the items <mark style="color:yellow;">(good and bad)</mark>.</td><td>50 / 50</td></tr><tr><td><pre><code>score
</code></pre></td><td>String</td><td>Text in the header.</td><td>"Score"</td></tr><tr><td><pre><code>time_left
</code></pre></td><td>String</td><td>Text in the header.</td><td>"Time left"</td></tr><tr><td><pre><code>start
</code></pre></td><td>String</td><td>Text of the CTA.</td><td>"Play now"</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_image
</code></pre></td><td>550 x 600px</td><td>Background of the game.</td><td><a href="https://statics.lucky-cycle.com/files/_games/catch-all/background.png">/background.png</a></td></tr><tr><td><pre><code>images
</code></pre></td><td>~50 x 50px <mark style="color:yellow;">(x times)</mark></td><td>Items that will be falling in the game <mark style="color:yellow;">(good)</mark>.</td><td><a href="https://statics.lucky-cycle.com/files/_games/catch-all/item-1.png">/item-1.png</a></td></tr><tr><td><pre><code>malus_images
</code></pre></td><td>~50 x 50px <mark style="color:yellow;">(x times)</mark></td><td>Items that will be falling in the game <mark style="color:yellow;">(bad)</mark>.</td><td>/ (but same as <em>images</em>)</td></tr><tr><td><pre><code>basket_image
</code></pre></td><td>~75 x 50px</td><td>Visual of the item used to grab the falling ones.</td><td><a href="https://statics.lucky-cycle.com/files/_games/catch-all/basket.png">/basket.png</a></td></tr></tbody></table>


# Dino Run

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

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

### Configuration

<details>

<summary>JSON</summary>

```json
{
  "options": {
    "speed": 180,
    "acceleration": 0.01,
    "jump": 25,
    "gravity": 130,
    "ground": 85,
    "sky": 10,
    "clouds": 3,
    "obstacles": 2,
    "obstaclesSprites": 6,
    "obstaclesMaxSprites": 3,
    "obstaclesMinDistance": 40,
    "trexSprites": 6,
    "hitboxSize": 65,
    "debug": false
  },
  "texts": {
    "en": {
      "start": "Play now",
      "unit": "m"
    },
    "fr": {
      "start": "Je joue",
      "unit": "m"
    },
    "nl": {
      "start": "Speel nu",
      "unit": "m"
    }
  },
  "images": {
    "obstacles": [
      GAME_URL + "/obstacle-large.png",
      GAME_URL + "/obstacle-small.png"
    ],
    "clouds": [
      GAME_URL + "/cloud.png"
    ],
    "horizon": GAME_URL + "/horizon.png",
    "ground": "",
    "trex": GAME_URL + "/trex.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>speed
</code></pre></td><td>Int</td><td>Base speed.</td><td>180</td></tr><tr><td><pre><code>acceleration
</code></pre></td><td>Float</td><td>Acceleration.</td><td>0.01</td></tr><tr><td><pre><code>jump
</code></pre></td><td>Int</td><td>Jump force (from ground level, same unit).</td><td>25 (%)</td></tr><tr><td><pre><code>gravity
</code></pre></td><td>Int</td><td>Gravity strength.</td><td>130</td></tr><tr><td><pre><code>ground
</code></pre></td><td>Int</td><td>Ground level (from the top of the game).</td><td>85 (%)</td></tr><tr><td><pre><code>sky
</code></pre></td><td>Int</td><td>Sky level (from the top of the game).</td><td>10 (%)</td></tr><tr><td><pre><code>clouds
</code></pre></td><td>Int</td><td>Number of clouds.</td><td>3</td></tr><tr><td><pre><code>obstacles
</code></pre></td><td>Int</td><td>Number of obstacles <mark style="color:red;">(warning: if 0 the game becomes endless)</mark>.</td><td>2</td></tr><tr><td><pre><code>obstaclesSprites
</code></pre></td><td>Int</td><td>Number of sprites on obstacles <mark style="color:yellow;">(must be the same for every visual!)</mark>.</td><td>6</td></tr><tr><td><pre><code>obstaclesMaxSprites
</code></pre></td><td>Int</td><td>Maximum width of an obstacle <mark style="color:red;">(min should be 1, or endless)</mark>.</td><td>3</td></tr><tr><td><pre><code>obstaclesMinDistance
</code></pre></td><td>Int</td><td>Minimal distance between two obstacles <mark style="color:yellow;">(must be spread enough to allow a jump between two obstacles)</mark>.</td><td>40 (%)</td></tr><tr><td><pre><code>trexSprites
</code></pre></td><td>Int</td><td>Number of sprite for the runner <mark style="color:yellow;">(should have multiple, </mark><em><mark style="color:yellow;">see visual specs</mark></em><mark style="color:yellow;">!)</mark>.</td><td>6</td></tr><tr><td><pre><code>hitboxSize
</code></pre></td><td>Int</td><td>Percentage of the visual to be used for <em>hitbox</em> calculation <em>(100% = whole image, <mark style="color:red;">0% = no hitbox, endless game</mark>)</em>.</td><td>65 (%)</td></tr><tr><td><pre><code>default_lang
</code></pre></td><td>String</td><td><mark style="color:yellow;">[PTF]</mark> Default language if unmatched language.</td><td><mark style="color:red;">"fr"</mark></td></tr><tr><td><pre><code>reset_button
</code></pre></td><td>Boolean</td><td><mark style="color:yellow;">[PTF]</mark> Set to <em>true</em> to cancel button's style.</td><td>false</td></tr><tr><td><pre><code>text > start
</code></pre></td><td>String</td><td>Start button's text.</td><td>"Play now" / "Je joue" / "Speel nu"</td></tr><tr><td><pre><code>text > unit
</code></pre></td><td>String</td><td>Game unit (displayed with the score).</td><td>"m"</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>obstacles
</code></pre></td><td>150 <em>(6*25)</em> x 50px</td><td>Visual<mark style="color:blue;">(s)</mark> used for the obstacles, can be displayed <em>partially</em>.</td><td><a href="https://statics.lucky-cycle.com/files/_games/dino-run/obstacle-large.png">/obstacle-large.png</a></td></tr><tr><td><pre><code>clouds
</code></pre></td><td>50 x 15px</td><td>Visual<mark style="color:blue;">(s)</mark> used for the clouds.</td><td><a href="https://statics.lucky-cycle.com/files/_games/dino-run/cloud.png">/cloud.png</a></td></tr><tr><td><pre><code>horizon
</code></pre></td><td>1200 x 15px</td><td>Visual used for the sky (above runner).</td><td><a href="https://statics.lucky-cycle.com/files/_games/dino-run/horizon.png">/horizon.png</a></td></tr><tr><td><pre><code>ground
</code></pre></td><td>1200 x 15px</td><td>Visual used for the ground (below runner).</td><td>/</td></tr><tr><td><pre><code>trex
</code></pre></td><td>270 <em>(6*45)</em> x 50 px</td><td>Visual used for the runner. Should have multiple sprites <mark style="color:orange;">(idle state, jumping up, jumping down)</mark>.</td><td><a href="https://statics.lucky-cycle.com/files/_games/dino-run/trex.png">/trex.png</a></td></tr></tbody></table>


# Endless Runner

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

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

### Configuration

<details>

<summary>JSON</summary>

```json
{
  "options": {
    "visible_hitbox": false,
    "background": {
      "current_stage": 0,
      "speed": 5,
      "cap_speed": 10,
      "acceleration": 0.3,
      "change_stage_after_x_screens": 13
    },
    "runner": {
      "image": GAME_URL + "/runner.png",
      "position_y": 380,
      "position_x": [
        113,
        223,
        338
      ],
      "position_init": 1,
      "width": 100,
      "height": 120,
      "sprites_count": 8,
      "hitbox": {
        "x": 40,
        "y": 45,
        "width": 20,
        "height": 35
      }
    },
    "stages": [
      {
        "image": GAME_URL + "/background-world2.jpg",
        "obstacles": {
          "position_x": [
            115,
            228,
            345
          ],
          "sprites_count": 6,
          "width": 90,
          "height": 90,
          "image": GAME_URL + "/obstacles-world2.png"
        },
        "sides": {
          "sprites_count": 10,
          "width": 120,
          "height": 120,
          "image": GAME_URL + "/sides-world2.png"
        }
      },
      {
        "image": GAME_URL + "/background-world1.jpg",
        "obstacles": {
          "position_x": [
            115,
            228,
            345
          ],
          "sprites_count": 7,
          "width": 90,
          "height": 90,
          "image": GAME_URL + "/obstacles-world1.png"
        },
        "sides": {
          "sprites_count": 9,
          "width": 120,
          "height": 120,
          "image": GAME_URL + "/sides-world1.png"
        }
      },
      {
        "image": GAME_URL + "/background-world3.jpg",
        "obstacles": {
          "position_x": [
            115,
            228,
            345
          ],
          "sprites_count": 6,
          "width": 90,
          "height": 90,
          "image": GAME_URL + "/obstacles-world3.png"
        },
        "sides": {
          "sprites_count": 10,
          "width": 120,
          "height": 120,
          "image": GAME_URL + "/sides-world3.png"
        }
      }
    ]
  },
  "texts": {
    "en": {
      "unit": "m"
    },
    "fr": {
      "unit": "m"
    },
    "nl": {
      "unit": "m"
    }
  },
  "sounds": {},
  "images": {
    "tutorial": {
      "en": GAME_URL + "/tutorial-en.gif",
      "fr": GAME_URL + "/tutorial-fr.gif",
      "nl": GAME_URL + "/tutorial-nl.gif"
    },
    "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>visible_hitbox
</code></pre></td><td>Boolean</td><td><mark style="color:purple;">[DEV]</mark> Display the runner's hitbox.</td><td>false</td></tr><tr><td><pre><code>background > current_stage
</code></pre></td><td>Integer</td><td>Index of the starting  "stage".</td><td>0</td></tr><tr><td><pre><code>background > speed
</code></pre></td><td>Integer</td><td>Base speed.</td><td>5</td></tr><tr><td><pre><code>background > cap_speed
</code></pre></td><td>Integer</td><td>Max speed.</td><td>10</td></tr><tr><td><pre><code>background > acceleration
</code></pre></td><td>Float</td><td>Acceleration.</td><td>0.3</td></tr><tr><td><pre><code>background > change_stage_after_x_screens
</code></pre></td><td>Integer</td><td>Number of stages' passes before switching to the next one (if more than one in the array).</td><td>13</td></tr><tr><td><pre><code>runner
</code></pre></td><td>Object</td><td><mark style="color:red;">Visual + config of the player.</mark></td><td>{ ... }</td></tr><tr><td><pre><code>stages
</code></pre></td><td>Objects</td><td><mark style="color:red;">Visuals + config of the stages.</mark></td><td>[ {...} ]</td></tr><tr><td><pre><code>unit
</code></pre></td><td>String</td><td>Unit of the game (points, meters, etc.).</td><td>"m"</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>tutorial
</code></pre></td><td>500 x 500px</td><td>Visual (can be animated) displayed for a few seconds at the start of the game.</td><td><a href="https://statics.lucky-cycle.com/files/_games/endless/tutorial-en.gif">/tutorial-en.gif</a></td></tr><tr><td><pre><code>runner > image
</code></pre></td><td>120 <mark style="color:yellow;">(* nb of frames)</mark> x 120px</td><td>Visual of the runner <mark style="color:yellow;">(must be frames to be animated)</mark>.</td><td><a href="https://statics.lucky-cycle.com/files/_games/endless/runner.png">/runner.png</a></td></tr><tr><td><pre><code>stages > image
</code></pre></td><td>550 x 700px</td><td>Background of the stage.</td><td><a href="https://statics.lucky-cycle.com/files/_games/endless/background-world2.jpg">/background-world2.jpg</a></td></tr><tr><td><pre><code>stages > obstacles > image
</code></pre></td><td>90 <mark style="color:yellow;">(* nb of items)</mark> x 90px</td><td>Sprite of the obstacles.</td><td><a href="https://statics.lucky-cycle.com/files/_games/endless/obstacles-world2.png">/obstacles-world2.png</a></td></tr><tr><td><pre><code>stages > sides > image
</code></pre></td><td>120 <mark style="color:yellow;">(* nb of items)</mark> x 120px</td><td>Sprite of the side visuals.</td><td><a href="https://statics.lucky-cycle.com/files/_games/endless/sides-world2.png">/sides-world2.png</a></td></tr></tbody></table>


# Flip Cards

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

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

### Configuration

<details>

<summary>JSON</summary>

```json
{
  "options": {
    "columns": 2,
    "rows": 1,
    "number_of_try": 1,
    "background_color": "transparent",
    "use_reward_image": false
  },
  "texts": {
    "en": {},
    "fr": {},
    "nl": {}
  },
  "images": {
    "background_image": GAME_URL + "/background.jpg",
    "image_list": [
      GAME_URL + "/back-1.png"
    ],
    "win": GAME_URL + "/win.png",
    "lose": GAME_URL + "/lose.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>columns / rows
</code></pre></td><td>Integer</td><td>Grid (determines the number of items displayed, <em>rows*columns</em>).</td><td>2 / 1</td></tr><tr><td><pre><code>number_of_try
</code></pre></td><td>Integer</td><td>Number of chances (clicks).</td><td>1</td></tr><tr><td><pre><code>background_color
</code></pre></td><td>String</td><td>Background colour (visible if no image).</td><td>"transparent"</td></tr><tr><td><pre><code>use_reward_image
</code></pre></td><td>Boolean</td><td>Use one image per reward, or default ones <em>(win / lose)</em>.</td><td>false</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_image
</code></pre></td><td>550 x 380px</td><td>Background of the game.</td><td><a href="https://statics.lucky-cycle.com/files/_games/flip-card/background.jpg">/background.jpg</a></td></tr><tr><td><pre><code>image_list
</code></pre></td><td>120 x 200px</td><td>Visual<mark style="color:orange;">(s)</mark> displayed <strong>before</strong> clicking.</td><td><a href="https://statics.lucky-cycle.com/files/_games/flip-card/back-1.png">/back-1.png</a></td></tr><tr><td><pre><code>win
</code></pre></td><td>120 x 200px</td><td>Visual if won (<em>use_reward_image</em> has to be set to <em>false</em>).</td><td><a href="https://statics.lucky-cycle.com/files/_games/flip-card/win.png">/win.png</a></td></tr><tr><td><pre><code>lose
</code></pre></td><td>120 x 200px</td><td>Visual if lost (<em>use_reward_image</em> has to be set to <em>false</em>).</td><td><a href="https://statics.lucky-cycle.com/files/_games/flip-card/lose.png">/lose.png</a></td></tr></tbody></table>


# Grabber

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

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

### Configuration

<details>

<summary>JSON</summary>

```json
{
  "options": {
    "use_reward_image": false
  },
  "texts": {},
  "sounds": {},
  "images": {
    "background": GAME_URL + "/background.png",
    "front": GAME_URL + "/front.png",
    "window": GAME_URL + "/window.png",
    "shadow": GAME_URL + "/shadow.png",
    "grabber": GAME_URL + "/grabber.png",
    "base": GAME_URL + "/base.png",
    "buttons": GAME_URL + "/buttons.png",
    "ball": GAME_URL + "/ball.png",
    "win": GAME_URL + "/win.png",
    "lose": "",
    "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>use_reward_image
</code></pre></td><td>Boolean</td><td>Use one image per reward, or default ones <em>(win / lose)</em>.</td><td>false</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 380px</td><td></td><td><a href="https://statics.lucky-cycle.com/files/_games/grabber/background.png">/background.png</a></td></tr><tr><td><pre><code>front
</code></pre></td><td>550 x 380px</td><td></td><td><a href="https://statics.lucky-cycle.com/files/_games/grabber/front.png">/front.png</a></td></tr><tr><td><pre><code>window
</code></pre></td><td>550 x 380px</td><td></td><td><a href="https://statics.lucky-cycle.com/files/_games/grabber/window.png">/window.png</a></td></tr><tr><td><pre><code>shadow
</code></pre></td><td>550 x 380px</td><td></td><td><a href="https://statics.lucky-cycle.com/files/_games/grabber/shadow.png">/shadow.png</a></td></tr><tr><td><pre><code>grabber
</code></pre></td><td>165 x 238px</td><td></td><td><a href="https://statics.lucky-cycle.com/files/_games/grabber/grabber.png">/grabber.png</a></td></tr><tr><td><pre><code>base
</code></pre></td><td>21 x 31px</td><td></td><td><a href="https://statics.lucky-cycle.com/files/_games/grabber/base.png">/base.png</a></td></tr><tr><td><pre><code>buttons
</code></pre></td><td>540 x 90px</td><td></td><td><a href="https://statics.lucky-cycle.com/files/_games/grabber/buttons.png">/buttons.png</a></td></tr><tr><td><pre><code>ball
</code></pre></td><td>51 x 51px</td><td></td><td><a href="https://statics.lucky-cycle.com/files/_games/grabber/ball.png">/ball.png</a></td></tr><tr><td><pre><code>win
</code></pre></td><td>230 x 242px</td><td></td><td><a href="https://statics.lucky-cycle.com/files/_games/grabber/win.png">/win.png</a></td></tr><tr><td><pre><code>lose
</code></pre></td><td></td><td></td><td>/</td></tr></tbody></table>


# Hidden Object

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

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

### Configuration

<details>

<summary>JSON</summary>

```json
{
  "options": {
    "shapes": {
      "en": [
        {
          "bl": {
            "x": 67.6,
            "y": 16
          },
          "tr": {
            "x": 70,
            "y": 8
          }
        },
        {
          "bl": {
            "x": 84.7,
            "y": 91
          },
          "tr": {
            "x": 88.1,
            "y": 84
          }
        }
      ],
      "fr": [
        {
          "bl": {
            "x": 67.6,
            "y": 16
          },
          "tr": {
            "x": 70,
            "y": 8
          }
        },
        {
          "bl": {
            "x": 84.7,
            "y": 91
          },
          "tr": {
            "x": 88.1,
            "y": 84
          }
        }
      ],
      "nl": [
        {
          "bl": {
            "x": 67.6,
            "y": 16
          },
          "tr": {
            "x": 70,
            "y": 8
          }
        },
        {
          "bl": {
            "x": 84.7,
            "y": 91
          },
          "tr": {
            "x": 88.1,
            "y": 84
          }
        }
      ]
    },
    "find": 2,
    "chances": 4
  },
  "texts": {
    "en": {
      "tutorial": {
        "content": [
          "Move in the image from right to left then <u><strong>double-click</strong></u> on the place where you think one of the mascots is hiding."
        ],
        "cta": "Play now"
      },
      "hints": {
        "content": [
          [
            "Psst… [Hint 1]"
          ],
          [
            "Psst… [Hint 2]"
          ]
        ],
        "cta": "I continue"
      },
      "win": {
        "content": [
          "Congratulations, you found the mascots!"
        ]
      },
      "lose": {
        "content": [
          "Unfortunately, you didn't find the mascots."
        ]
      }
    },
    "fr": {
      "tutorial": {
        "content": [
          "Déplacez-vous dans l'image de droite à gauche puis <u><strong>double-cliquez</strong></u> sur l'endroit où vous pensez que se cache l'une des mascottes."
        ],
        "cta": "Je joue"
      },
      "hints": {
        "content": [
          [
            "Psst… [Indice 1]"
          ],
          [
            "Psst… [Indice 2]"
          ]
        ],
        "cta": "Je continue"
      },
      "win": {
        "content": [
          "Félicitations, vous avez trouvé les mascottes&nbsp;!"
        ]
      },
      "lose": {
        "content": [
          "Malheureusement, vous n'avez pas trouvé les mascottes."
        ]
      }
    },
    "nl": {
      "tutorial": {
        "content": [
          "Beweeg in de afbeelding van rechts naar links en <u><strong>dubbelklik</strong></u> op de plaats waarvan u denkt dat de mascottes zich verbergen."
        ],
        "cta": "Speel nu"
      },
      "hints": {
        "content": [
          [
            "Psst… [Hint 1]"
          ],
          [
            "Psst… [Hint 2]"
          ]
        ],
        "cta": "Ik ga verder"
      },
      "win": {
        "content": [
          "Gefeliciteerd, u heeft de mascottes gevonden!"
        ]
      },
      "lose": {
        "content": [
          "Helaas heeft u de mascottes niet gevonden."
        ]
      }
    }
  },
  "images": {
    "en": {
      "canvas": GAME_URL + "/background.png"
    },
    "fr": {
      "canvas": GAME_URL + "/background.png"
    },
    "nl": {
      "canvas": GAME_URL + "/background.png"
    }
  }
}
```

</details>

### Options

<table><thead><tr><th>Key</th><th>Type</th><th>Explanation</th><th>Default</th></tr></thead><tbody><tr><td><pre><code>shapes
</code></pre></td><td><em>Complex</em></td><td>Zone(s) to be found/clicked.</td><td>[...]</td></tr><tr><td><pre><code>find
</code></pre></td><td>Int</td><td>Zones to <mark style="color:blue;">actually</mark> be found for the game to be completed.</td><td>2</td></tr><tr><td><pre><code>chances
</code></pre></td><td>Int</td><td>Maximum number of clicks before the game is over.</td><td>4</td></tr><tr><td><pre><code>texts > tutorial > content
</code></pre></td><td>String</td><td>Text displayed before the game.</td><td>"Move in the image from right to left then <strong>double-click</strong> on the place where you think one of the mascots is hiding."</td></tr><tr><td><pre><code>texts > tutorial > cta
</code></pre></td><td>String</td><td>CTA displayed before the game.</td><td>"Play now"</td></tr><tr><td><pre><code>hints > content
</code></pre></td><td>String</td><td>Text to be displayed after each <mark style="color:$danger;">wrong</mark> click (should match the <em>chances</em>).</td><td>"Psst… [Hint 1]" /<br>"Psst… [Hint 2]"</td></tr><tr><td><pre><code>hints > cta
</code></pre></td><td>String</td><td>CTA displayed along the hint.</td><td>"I continue"</td></tr><tr><td><pre><code>win > content
</code></pre></td><td>String</td><td>Text displayed in case of game complete.</td><td>"Congratulations, you found the mascots!"</td></tr><tr><td><pre><code>lose > content
</code></pre></td><td>String</td><td>Text displayed in case of game over.</td><td>"Unfortunately, you didn't find the mascots."</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>canvas
</code></pre></td><td>/</td><td>Visual to be used as playground <mark style="color:blue;">(can scroll horizontally)</mark>.</td><td><a href="https://statics.lucky-cycle.com/files/_games/hidden-object/background.png">/background.png</a></td></tr></tbody></table>


# Memory

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

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

### Configuration

<details>

<summary>JSON</summary>

```json
{
  "options": {
    "size": 145,
    "show_time": true,
    "one_pair_mode": false,
    "use_countdown": false,
    "timer": 60,
    "pairs": 6,
    "background_color": "transparent",
    "header_text_color": "white",
    "header_background_color": "black"
  },
  "texts": {
    "en": {
      "time": "Time",
      "unit": "s"
    },
    "fr": {
      "time": "Temps ",
      "unit": "s"
    },
    "nl": {
      "time": "Tijd",
      "unit": "s"
    }
  },
  "images": {
    "background":  GAME_URL + "/background.png",
    "image_list": [
      GAME_URL + "/item-1.png",
      GAME_URL + "/item-2.png",
      GAME_URL + "/item-3.png",
      GAME_URL + "/item-4.png",
      GAME_URL + "/item-5.png",
      GAME_URL + "/item-6.png"
    ]
  }
}
```

</details>

### Options

<table><thead><tr><th>Key</th><th>Type</th><th>Explanation</th><th>Default</th></tr></thead><tbody><tr><td><pre><code>size
</code></pre></td><td>Integer</td><td>Size of an item (square), in pixels.</td><td>150</td></tr><tr><td><pre><code><strong>show_time
</strong></code></pre></td><td>Boolean</td><td>Display the header with timer (increasing).</td><td>true</td></tr><tr><td><pre><code>one_pair_mode
</code></pre></td><td>Boolean</td><td>Stops the game at the first pair.</td><td>false</td></tr><tr><td><pre><code>use_countdown
</code></pre></td><td>Boolean</td><td>Add a timer to the game.</td><td>false</td></tr><tr><td><pre><code>timer
</code></pre></td><td>Int</td><td>If <em>use_countdown</em> is set to <mark style="color:$success;">true</mark>, gives the allowed time for the game.</td><td>60</td></tr><tr><td><pre><code>pairs
</code></pre></td><td>Int</td><td>Number of pairs to be found <mark style="color:$warning;">(must match the number of</mark> <em>image_list</em> <mark style="color:$warning;">visuals)</mark>.</td><td>6</td></tr><tr><td><pre><code>background_color
</code></pre></td><td>String</td><td>Background colour (visible if no image).</td><td>"transparent"</td></tr><tr><td><pre><code>header_text_color / _background_color
</code></pre></td><td>String</td><td>Colour / background of the header.</td><td>"black" / "white"</td></tr><tr><td><pre><code>time / unit
</code></pre></td><td>String</td><td>Texts for the timer.</td><td>"Time" / "s" --> "Time: <mark style="color:purple;">[time]</mark>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>150 x 150px</td><td>Back visual of the card (common to all cards). <em><strong>Size should match "size" option.</strong></em></td><td><a href="https://statics.lucky-cycle.com/files/_games/memory/background.png">/background.png</a></td></tr><tr><td><pre><code>image_list
</code></pre></td><td>150 x 150px (each)</td><td>Front visual of the cards to be matched (two cards per visual). <em>Array should contains <strong>6 images</strong>, but can go from 1.</em></td><td><a href="https://statics.lucky-cycle.com/files/_games/memory/item-1.png">/item-1.png</a></td></tr></tbody></table>


# Millionaire

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

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

### Configuration

<details>

<summary>JSON</summary>

```json
{
  "options": {
    "randomize": true,
    "deadly": true,
    "levels": 3,
    "questions": {
      "en": [
        {
          "id": 1,
          "question": "What is the capital of France?",
          "answers": [
            {
              "id" : 1,
              "answer": "Paris",
              "correct": true
            },
            {
              "id" : 2,
              "answer": "London",
              "correct": false
            },
            {
              "id" : 3,
              "answer": "Berlin",
              "correct": false
            },
            {
              "id" : 4,
              "answer": "Brussels",
              "correct": false
            }
          ],
          "explanation": [
            "The capital of France is Paris."
          ],
          "text_color": "",
          "background_color": "",
          "background_image": "",
          "button_text_color": "",
          "button_background_color": ""
        },
        {
          "id": 2,
          "question": "What is the color of Napoleon's white horse?",
          "answers": [
            {
              "id" : 1,
              "answer": "White",
              "correct": true
            },
            {
              "id" : 2,
              "answer": "Black",
              "correct": false
            },
            {
              "id" : 3,
              "answer": "Brown",
              "correct": false
            },
            {
              "id" : 4,
              "answer": "Blond",
              "correct": false
            }
          ],
          "explanation": [
            "Napoleon's white horse is, as its name suggests, white."
          ],
          "text_color": "",
          "background_color": "",
          "background_image": "",
          "button_text_color": "",
          "button_background_color": ""
        },
        {
          "id": 3,
          "question": "How many days are in a leap year?",
          "answers": [
            {
              "id" : 1,
              "answer": "366",
              "correct": true
            },
            {
              "id" : 2,
              "answer": "365",
              "correct": false
            },
            {
              "id" : 3,
              "answer": "364",
              "correct": false
            },
            {
              "id" : 4,
              "answer": "367",
              "correct": false
            }
          ],
          "explanation": [
            "A leap year has 366 days."
          ],
          "text_color": "",
          "background_color": "",
          "background_image": "",
          "button_text_color": "",
          "button_background_color": ""
        },
        {
          "id": 4,
          "question": "What is the largest ocean in the world?",
          "answers": [
            {
              "id" : 1,
              "answer": "The Pacific Ocean",
              "correct": true
            },
            {
              "id" : 2,
              "answer": "The Indian Ocean",
              "correct": false
            },
            {
              "id" : 3,
              "answer": "The Atlantic Ocean",
              "correct": false
            },
            {
              "id" : 4,
              "answer": "The Arctic Ocean",
              "correct": false
            }
          ],
          "explanation": [
            "The largest ocean in the world is the Pacific Ocean."
          ],
          "text_color": "",
          "background_color": "",
          "background_image": "",
          "button_text_color": "",
          "button_background_color": ""
        }
      ],
      "fr": [
        {
          "id": 1,
          "question": "Quelle est la capitale de la France&nbsp;?",
          "answers": [
            {
              "id" : 1,
              "answer": "Paris",
              "correct": true
            },
            {
              "id" : 2,
              "answer": "Londres",
              "correct": false
            },
            {
              "id" : 3,
              "answer": "Berlin",
              "correct": false
            },
            {
              "id" : 4,
              "answer": "Bruxelles",
              "correct": false
            }
          ],
          "explanation": [
            "La capitale de la France est Paris."
          ],
          "text_color": "",
          "background_color": "",
          "background_image": "",
          "button_text_color": "",
          "button_background_color": ""
        },
        {
          "id": 2,
          "question": "Quelle est la couleur du cheval blanc de Napoléon&nbsp;?",
          "answers": [
            {
              "id" : 1,
              "answer": "Blanc",
              "correct": true
            },
            {
              "id" : 2,
              "answer": "Noir",
              "correct": false
            },
            {
              "id" : 3,
              "answer": "Marron",
              "correct": false
            },
            {
              "id" : 4,
              "answer": "Blond",
              "correct": false
            }
          ],
          "explanation": [
            "Le cheval blanc de Napoléon est, comme son nom l'indique, blanc."
          ],
          "text_color": "",
          "background_color": "",
          "background_image": "",
          "button_text_color": "",
          "button_background_color": ""
        },
        {
          "id": 3,
          "question": "Combien de jours compte une année bissextile&nbsp;?",
          "answers": [
            {
              "id" : 1,
              "answer": "366",
              "correct": true
            },
            {
              "id" : 2,
              "answer": "365",
              "correct": false
            },
            {
              "id" : 3,
              "answer": "364",
              "correct": false
            },
            {
              "id" : 4,
              "answer": "367",
              "correct": false
            }
          ],
          "explanation": [
            "Une année bissextile compte 366 jours."
          ],
          "text_color": "",
          "background_color": "",
          "background_image": "",
          "button_text_color": "",
          "button_background_color": ""
        },
        {
          "id": 4,
          "question": "Quel est le plus grand océan du monde&nbsp;?",
          "answers": [
            {
              "id" : 1,
              "answer": "L'océan Pacifique",
              "correct": true
            },
            {
              "id" : 2,
              "answer": "L'océan Indien",
              "correct": false
            },
            {
              "id" : 3,
              "answer": "L'océan Atlantique",
              "correct": false
            },
            {
              "id" : 4,
              "answer": "L'océan Arctique",
              "correct": false
            }
          ],
          "explanation": [
            "Le plus grand océan du monde est l'océan Pacifique."
          ],
          "text_color": "",
          "background_color": "",
          "background_image": "",
          "button_text_color": "",
          "button_background_color": ""
        }
      ],
      "nl": [
        {
          "id": 1,
          "question": "Wat is de hoofdstad van Frankrijk?",
          "answers": [
            {
              "id" : 1,
              "answer": "Parijs",
              "correct": true
            },
            {
              "id" : 2,
              "answer": "Londen",
              "correct": false
            },
            {
              "id" : 3,
              "answer": "Berlijn",
              "correct": false
            },
            {
              "id" : 4,
              "answer": "Brussel",
              "correct": false
            }
          ],
          "explanation": [
            "De hoofdstad van Frankrijk is Parijs."
          ],
          "text_color": "",
          "background_color": "",
          "background_image": "",
          "button_text_color": "",
          "button_background_color": ""
        },
        {
          "id": 2,
          "question": "Wat is de kleur van het witte paard van Napoleon?",
          "answers": [
            {
              "id" : 1,
              "answer": "Wit",
              "correct": true
            },
            {
              "id" : 2,
              "answer": "Zwart",
              "correct": false
            },
            {
              "id" : 3,
              "answer": "Bruin",
              "correct": false
            },
            {
              "id" : 4,
              "answer": "Blond",
              "correct": false
            }
          ],
          "explanation": [
            "Het witte paard van Napoleon is, zoals de naam al doet vermoeden, wit."
          ],
          "text_color": "",
          "background_color": "",
          "background_image": "",
          "button_text_color": "",
          "button_background_color": ""
        },
        {
          "id": 3,
          "question": "Hoeveel dagen zitten er in een schrikkeljaar?",
          "answers": [
            {
              "id" : 1,
              "answer": "366",
              "correct": true
            },
            {
              "id" : 2,
              "answer": "365",
              "correct": false
            },
            {
              "id" : 3,
              "answer": "364",
              "correct": false
            },
            {
              "id" : 4,
              "answer": "367",
              "correct": false
            }
          ],
          "explanation": [
            "Een schrikkeljaar heeft 366 dagen."
          ],
          "text_color": "",
          "background_color": "",
          "background_image": "",
          "button_text_color": "",
          "button_background_color": ""
        }
      ]
    },
    "text_color": "black",
    "background_color": "white",
    "button_text_color": "white",
    "button_background_color": "black"
  },
  "texts": {
    "en": {
      "good": "Correct!",
      "bad": "Nope!",
      "next": "Next question",
      "end": "Continue"
    },
    "fr": {
      "good": "Correct&nbsp;!",
      "bad": "Non&nbsp;!",
      "next": "Question suivante",
      "end": "Continuer"
    },
    "nl": {
      "good": "Correct!",
      "bad": "Fout!",
      "next": "Volgende vraag",
      "end": "Doorgaan"
    }
  },
  "images": {
    "background": "",
    "rewards": {}
  }
}
```

</details>

### Options

<table><thead><tr><th>Key</th><th>Type</th><th width="174">Explanation</th><th>Default</th></tr></thead><tbody><tr><td><pre><code>randomize
</code></pre></td><td>Boolean</td><td>Randomize the questions asked to the player (<strong>order</strong>, and <strong>selection</strong> if more questions available than <em><mark style="color:blue;">levels</mark></em>).</td><td>true</td></tr><tr><td><pre><code>deadly
</code></pre></td><td>Boolean</td><td>Game stops after one wrong answer.</td><td>true</td></tr><tr><td><pre><code>levels
</code></pre></td><td>Integer</td><td>Number of questions to answer. <em>If less questions than the selected amount, won't be used.</em></td><td>3</td></tr><tr><td><pre><code>questions > question
</code></pre></td><td>String</td><td>Question to be asked to the player.</td><td>"Q1, Q2..."</td></tr><tr><td><pre><code>answers > answer
</code></pre></td><td>String</td><td>Answers to the question <em>(should have <mark style="color:orange;">at least two</mark> per question)</em>.</td><td>"A1, A2, A3..."</td></tr><tr><td><pre><code>answer > correct
</code></pre></td><td>Boolean</td><td>Is the answer the right one <em>(can have more than one good answer per question)</em>.</td><td>true / false / false</td></tr><tr><td><pre><code>explanation
</code></pre></td><td>String <mark style="color:purple;">(accepts basic HTML)</mark></td><td><mark style="color:green;">Optional</mark> (screen will be skipped if no explanation). Used to give the right answer to the question, with some explanation.</td><td>"E1, E2..."</td></tr><tr><td><pre><code>text_color / background_color
</code></pre></td><td>String</td><td>Color &#x26; background of the question <mark style="color:$primary;">(or default)</mark>.</td><td>"black" / "white"</td></tr><tr><td><pre><code>button_text_color / button_background_color
</code></pre></td><td>String</td><td>Color &#x26; background of the button <mark style="color:$primary;">(or default)</mark>.</td><td>"white" / "black"</td></tr><tr><td><pre><code><strong>texts > good / bad
</strong></code></pre></td><td>String</td><td>Texts displayed as title on the explanation screen <em>(based on the answer)</em>.</td><td>"Correct!" / "Nope!"</td></tr><tr><td><pre><code>texts > next
</code></pre></td><td>String</td><td>Text of the button on the optional explanation screen <em>(if game isn't over)</em>.</td><td>"Next question"</td></tr><tr><td><pre><code>texts > end
</code></pre></td><td>String</td><td>Text of the button on the optional explanation screen <em>(if game is over)</em>.</td><td>"Continue"</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>question > background_image
</code></pre></td><td>String</td><td>Visual to be used as background of the question.</td><td>/</td></tr></tbody></table>


# Paper Toss

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

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

### Configuration

<details>

<summary>JSON</summary>

```json
{
  "options": {
    "visible_hitbox": false,
    "number_of_shoot": 5,
    "time_between_shoot": 1000,
    "background": {
      "url": GAME_URL + "/background.png",
      "height": 600,
      "width": 900
    },
    "ball": {
      "url": GAME_URL + "/paper.png",
      "height": 50,
      "width": 50,
      "speed": 9
    },
    "keeper": {
      "active": false,
      "url": "",
      "height": 1,
      "width": 1,
      "offsetY": 0,
      "speed": {
        "min": 1,
        "max": 1
      }
    },
    "goal": {
      "url": GAME_URL + "/bin_back.png",
      "url_foreground": GAME_URL + "/bin_front.png",
      "height": 145,
      "width": 113,
      "offsetY": 50,
      "paddingX": 10,
      "floorLine": 100,
      "scoreLine": 0,
      "scoreLineOffsetY": -75
    },
    "board": {
      "url": GAME_URL + "/board.png"
    }
  },
  "texts": {
    "en": {
      "shoot": "Throws: ",
      "score": "Points: "
    },
    "fr": {
      "shoot": "Lancers : ",
      "score": "Points : "
    },
    "nl": {
      "shoot": "Gooien: ",
      "score": "Punten: "
    }
  },
  "sounds": {},
  "images": {
    "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>visible_hitbox
</code></pre></td><td>Boolean</td><td><mark style="color:purple;">[DEV]</mark> Display the hitboxes.</td><td>false</td></tr><tr><td><pre><code>number_of_shoot
</code></pre></td><td>Integer</td><td>Number of times a player can "shoot" the ball.</td><td>5</td></tr><tr><td><pre><code>time_between_shoot
</code></pre></td><td>Integer</td><td>Delay between each "shoot".</td><td>1000</td></tr><tr><td><pre><code>background > height / width
</code></pre></td><td>Integer</td><td>Background's visual sizes.</td><td>600 / 900</td></tr><tr><td><pre><code>ball > height / width
</code></pre></td><td>Integer</td><td>Ball's visual sizes (to render).</td><td>50 / 50</td></tr><tr><td><pre><code>ball > speed
</code></pre></td><td>Integer</td><td>Speed of the ball.</td><td>9</td></tr><tr><td><pre><code>keeper > active
</code></pre></td><td>Boolean</td><td><mark style="color:purple;">[Do not edit]</mark> Set to true to enable the keeper <mark style="color:yellow;">(used in </mark><em><mark style="color:yellow;">penalty</mark></em><mark style="color:yellow;">)</mark>.</td><td>false</td></tr><tr><td><pre><code>keeper > height / width
</code></pre></td><td>Integer</td><td>Keeper's visual sizes (to render) <mark style="color:yellow;">(used in </mark><em><mark style="color:yellow;">penalty</mark></em><mark style="color:yellow;">)</mark>.</td><td>1 / 1</td></tr><tr><td><pre><code>keeper > offsetY
</code></pre></td><td>Integer</td><td>Vertical adjustment of the keeper <mark style="color:yellow;">(used in </mark><em><mark style="color:yellow;">penalty</mark></em><mark style="color:yellow;">)</mark>.</td><td>0</td></tr><tr><td><pre><code>keeper > speed > min / max
</code></pre></td><td>Integer</td><td>Speed of the keeper (is random between <em>min</em> and <em>max</em> at each "shoot") <mark style="color:yellow;">(used in </mark><em><mark style="color:yellow;">penalty</mark></em><mark style="color:yellow;">)</mark>.</td><td>1 / 1</td></tr><tr><td><pre><code>goal > height / width
</code></pre></td><td>Integer</td><td>Goal's visual sizes (to render).</td><td>145 / 113</td></tr><tr><td><pre><code>goal > offsetY
</code></pre></td><td>Integer</td><td>Vertical adjustment of the goal.</td><td>50</td></tr><tr><td><pre><code>goal > paddingX
</code></pre></td><td>Integer</td><td>Horizontal padding for the goal. (the ball will <strong>bounce</strong> of those areas).</td><td>10</td></tr><tr><td><pre><code>goal > floorLine
</code></pre></td><td>Integer</td><td>Ground level (if no goal).</td><td>100</td></tr><tr><td><pre><code>goal > scoreLine
</code></pre></td><td>Integer</td><td>Score level (if goal).</td><td>0</td></tr><tr><td><pre><code>goal > scoreLineOffsetY
</code></pre></td><td>Integer</td><td><em>Height to reach to score a point.</em></td><td>-75</td></tr><tr><td><pre><code>shoot
</code></pre></td><td>String</td><td>Text displayed in the header.</td><td>"Throws: "</td></tr><tr><td><pre><code>score
</code></pre></td><td>String</td><td>Text displayed in the header.</td><td>"Points: "</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 > url
</code></pre></td><td>~600 x 600px <mark style="color:yellow;">(adapt </mark><em><mark style="color:yellow;">background</mark></em><mark style="color:yellow;"> sizes)</mark></td><td>Background of the game.</td><td><a href="https://statics.lucky-cycle.com/files/_games/paper-toss/background.png">/background.png</a></td></tr><tr><td><pre><code>ball > url
</code></pre></td><td>50 x 50px</td><td>Visual of the ball.</td><td><a href="https://statics.lucky-cycle.com/files/_games/paper-toss/paper.png">/paper.png</a></td></tr><tr><td><pre><code>keeper > url
</code></pre></td><td>/</td><td>Visual of the keeper <mark style="color:yellow;">(used in </mark><em><mark style="color:yellow;">penalty</mark></em><mark style="color:yellow;">)</mark>.</td><td>/</td></tr><tr><td><pre><code>goal > url
</code></pre></td><td>~100 x 150px <mark style="color:yellow;">(adapt </mark><em><mark style="color:yellow;">goal</mark></em><mark style="color:yellow;"> sizes)</mark></td><td>Visual of the bin (back).</td><td><a href="https://statics.lucky-cycle.com/files/_games/paper-toss/bin_back.png">/bin_back.png</a></td></tr><tr><td><pre><code>goal > url_foreground
</code></pre></td><td>~100 x 150px <mark style="color:yellow;">(adapt </mark><em><mark style="color:yellow;">goal</mark></em><mark style="color:yellow;"> sizes)</mark></td><td>Visual of the bin (front).</td><td><a href="https://statics.lucky-cycle.com/files/_games/paper-toss/bin_front.png">/bin_front.png</a></td></tr><tr><td><pre><code>board > url
</code></pre></td><td>~400 x 200px</td><td>Visual of the scoreboard.</td><td><a href="https://statics.lucky-cycle.com/files/_games/paper-toss/board.png">/board.png</a></td></tr></tbody></table>


# Penalty

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

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

### Configuration

<details>

<summary>JSON</summary>

```json
{
  "options": {
    "game_square": 450,
    "game_margin": 25,
    "min_aspect_ratio": "600 / 500",
    "number_of_shoot": 5,
    "time_between_shoot": 1000,
    "background": {
      "url": GAME_URL + "/background.png",
      "height": 960,
      "width": 1100
    },
    "ball": {
      "url": GAME_URL + "/ball.png",
      "height": 50,
      "width": 50,
      "speed": 120
    },
    "keeper": {
      "url": GAME_URL + "/keeper.png",
      "height": 126,
      "width": 103,
      "offsetY": 10,
      "speed": {
        "min": 2,
        "max": 7,
        "step": 1
      }
    },
    "goal": {
      "url": GAME_URL + "/goal.png",
      "height": 310,
      "width": 575,
      "offsetY": -87,
      "goal_post_angle": 0.12
    },
    "board": {
      "url": GAME_URL + "/board.png",
      "ratio": "628 / 336",
      "text_color": "white",
      "background_color": "black",
      "progress": true,
      "score": true,
      "goal_emoji": "⚽",
      "miss_emoji": "❌",
      "unset_emoji": "⚪"
    },
    "visor": {
      "color": "white"
    }
  },
  "texts": {
    "en": {
      "shoot": "Shots: ",
      "score": "Goals: "
    },
    "fr": {
      "shoot": "Tirs : ",
      "score": "Buts : "
    },
    "nl": {
      "shoot": "Kicks: ",
      "score": "Goals: "
    }
  },
  "sounds": {},
  "images": {
    "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>game_square
</code></pre></td><td>Integer</td><td>Actual game zone.</td><td>450</td></tr><tr><td><pre><code>game_margin
</code></pre></td><td>Integer</td><td>Border around the game zone.</td><td>25</td></tr><tr><td><pre><code><strong>min_aspect_ratio
</strong></code></pre></td><td>String</td><td>Aspect ratio to be used <em>if no parent sizing is provided</em>.</td><td>"600 / 500"</td></tr><tr><td><pre><code>number_of_shoot
</code></pre></td><td>Integer</td><td>Number of times a player can "shoot" the ball.</td><td>5</td></tr><tr><td><pre><code>time_between_shoot
</code></pre></td><td>Integer</td><td>Delay between each "shoot".</td><td>1000</td></tr><tr><td><pre><code>background > height / width
</code></pre></td><td>Integer</td><td>Background's visual sizes.</td><td>960 / 1100</td></tr><tr><td><pre><code>ball > height / width
</code></pre></td><td>Integer</td><td>Ball's visual sizes (to render).</td><td>50 / 50</td></tr><tr><td><pre><code>ball > speed
</code></pre></td><td>Integer</td><td>Speed of the ball.</td><td>120</td></tr><tr><td><pre><code>keeper > height / width
</code></pre></td><td>Integer</td><td>Keeper's visual sizes (to render).</td><td>126 / 103</td></tr><tr><td><pre><code>keeper > offsetY
</code></pre></td><td>Integer</td><td>Vertical adjustment of the keeper.</td><td>10</td></tr><tr><td><pre><code>keeper > speed > min / max
</code></pre></td><td>Integer</td><td>Speed of the keeper (min and max, increases after each "goal").</td><td>2 / 7</td></tr><tr><td><pre><code>keeper > speed > step
</code></pre></td><td>Integer</td><td>Speed increasing after each "goal".</td><td>1</td></tr><tr><td><pre><code>goal > height / width
</code></pre></td><td>Integer</td><td>Goal's visual sizes (to render).</td><td>310 / 575</td></tr><tr><td><pre><code>goal > offsetY
</code></pre></td><td>Integer</td><td>Vertical adjustment of the goal.</td><td>-87</td></tr><tr><td><pre><code>goal > goal_post_angle
</code></pre></td><td>Number</td><td>Border for the goal (the ball will <strong>bounce</strong> of those areas).</td><td>0.12</td></tr><tr><td><pre><code>board > ratio
</code></pre></td><td>String</td><td>Size ratio of the scoreboard visual.</td><td>"628 / 336"</td></tr><tr><td><pre><code>board > text_color / background_color
</code></pre></td><td>String</td><td>Colors of the menu (if no <strong>scoreboard visual</strong> is provided).</td><td>"white" / "black"</td></tr><tr><td><pre><code>board > progress
</code></pre></td><td>Boolean</td><td>Display the current progress of the game.</td><td>true</td></tr><tr><td><pre><code>board > score
</code></pre></td><td>Boolean</td><td>Display the current score of the game.</td><td>true</td></tr><tr><td><pre><code><strong>board > goal_emoji
</strong></code></pre></td><td>String</td><td>Replace the default <em>text</em> progress, with icons.</td><td>"⚽" / "❌" / "⚪"</td></tr><tr><td><pre><code>visor > color
</code></pre></td><td>String</td><td>Color of the curve preview (<em>transparent</em> to remove it).</td><td>"white"</td></tr><tr><td><pre><code>shoot
</code></pre></td><td>String</td><td>Text displayed in the header.</td><td>"Shots: "</td></tr><tr><td><pre><code>score
</code></pre></td><td>String</td><td>Text displayed in the header.</td><td>"Goals: "</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 > url
</code></pre></td><td>~600 x 600px <mark style="color:yellow;">(adapt </mark><em><mark style="color:yellow;">background</mark></em><mark style="color:yellow;"> sizes)</mark></td><td>Background of the game.</td><td><a href="https://statics.lucky-cycle.com/files/_games/penalty/background.png">/background.png</a></td></tr><tr><td><pre><code>ball > url
</code></pre></td><td>50 x 50px</td><td>Visual of the ball.</td><td><a href="https://statics.lucky-cycle.com/files/_games/penalty/ball.png">/ball.png</a></td></tr><tr><td><pre><code>keeper > url
</code></pre></td><td>~100 x 125px <mark style="color:yellow;">(adapt </mark><em><mark style="color:yellow;">keeper</mark></em><mark style="color:yellow;"> sizes)</mark></td><td>Visual of the keeper.</td><td><a href="https://statics.lucky-cycle.com/files/_games/penalty/keeper.png">/keeper.png</a></td></tr><tr><td><pre><code>goal > url
</code></pre></td><td>~400 x ...px <mark style="color:yellow;">(adapt </mark><em><mark style="color:yellow;">goal</mark></em><mark style="color:yellow;"> sizes)</mark></td><td>Visual of the goal.</td><td><a href="https://statics.lucky-cycle.com/files/_games/penalty/goal.png">/goal.png</a></td></tr><tr><td><pre><code>board > url
</code></pre></td><td>~400 x 200px <mark style="color:yellow;">(adapt </mark><em><mark style="color:yellow;">board</mark></em><mark style="color:yellow;"> sizes)</mark></td><td>Visual of the scoreboard.</td><td><a href="https://statics.lucky-cycle.com/files/_games/penalty/board.png">/board.png</a></td></tr></tbody></table>


# Personality

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

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

### Configuration

<details>

<summary>JSON</summary>

```json
{
  "options": {
    "tags": [
      {
        "id": 1,
        "name": "italy"
      },
      {
        "id": 2,
        "name": "japan"
      },
      {
        "id": 3,
        "name": "pizza"
      },
      {
        "id": 4,
        "name": "pasta"
      },
      {
        "id": 5,
        "name": "ossobucco"
      },
      {
        "id": 6,
        "name": "lasagna"
      },
      {
        "id": 7,
        "name": "sushi"
      },
      {
        "id": 8,
        "name": "ramen"
      }
    ],
    "questions": {
      "en": [
        {
          "id": 1,
          "question": "1. What do you prefer?",
          "question_color": "white",
          "question_background_color": "black",
          "answer_color": "white",
          "answer_background_color": "rgba(0, 0, 0, .75)",
          "next": "",
          "rows": 1,
          "cols": 2,
          "min": 1,
          "max": 1,
          "answers": [
            {
              "id": 1,
              "tags": [1],
              "next": 2,
              "image": "",
              "text": "Italian cuisine"
            },
            {
              "id": 2,
              "tags": [2],
              "next": 3,
              "image": "",
              "text": "Japanese cuisine"
            }
          ],
          "explanation": []
        },
        {
          "id": 2,
          "question": "2A. What do you prefer? (2 answers possible)",
          "question_color": "white",
          "question_background_color": "black",
          "answer_color": "white",
          "answer_background_color": "rgba(0, 0, 0, .75)",
          "next": -1,
          "rows": 2,
          "cols": 2,
          "min": 1,
          "max": 2,
          "answers": [
            {
              "id": 1,
              "tags": [3],
              "next": "",
              "image": "",
              "text": "Pizza"
            },
            {
              "id": 2,
              "tags": [4],
              "next": "",
              "image": "",
              "text": "Pasta"
            },
            {
              "id": 3,
              "tags": [3],
              "next": "",
              "image": "",
              "text": "Osso Bucco"
            },
            {
              "id": 4,
              "tags": [4],
              "next": "",
              "image": "",
              "text": "Lasagne"
            }
          ],
          "explanation": []
        },
        {
          "id": 3,
          "question": "2B. What do you prefer?",
          "question_color": "white",
          "question_background_color": "black",
          "answer_color": "white",
          "answer_background_color": "rgba(0, 0, 0, .75)",
          "next": -1,
          "rows": 1,
          "cols": 2,
          "min": 1,
          "max": 1,
          "answers": [
            {
              "id": 1,
              "tags": [7],
              "next": "",
              "image": "",
              "text": "Sushi"
            },
            {
              "id": 2,
              "tags": [8],
              "next": "",
              "image": "",
              "text": "Ramen"
            }
          ],
          "explanation": []
        }
      ],
      "fr": [
        {
          "id": 1,
          "question": "1. Que préférez-vous&nbsp;?",
          "question_color": "white",
          "question_background_color": "black",
          "answer_color": "white",
          "answer_background_color": "rgba(0, 0, 0, .75)",
          "next": "",
          "rows": 1,
          "cols": 2,
          "min": 1,
          "max": 1,
          "answers": [
            {
              "id": 1,
              "tags": [1],
              "next": 2,
              "image": "",
              "text": "Cuisine italienne"
            },
            {
              "id": 2,
              "tags": [2],
              "next": 3,
              "image": "",
              "text": "Cuisine japonaise"
            }
          ],
          "explanation": []
        },
        {
          "id": 2,
          "question": "2A. Que préférez-vous&nbsp;? (2 réponses possibles)",
          "question_color": "white",
          "question_background_color": "black",
          "answer_color": "white",
          "answer_background_color": "rgba(0, 0, 0, .75)",
          "next": -1,
          "rows": 2,
          "cols": 2,
          "min": 1,
          "max": 2,
          "answers": [
            {
              "id": 1,
              "tags": [3],
              "next": "",
              "image": "",
              "text": "Pizza"
            },
            {
              "id": 2,
              "tags": [4],
              "next": "",
              "image": "",
              "text": "Pâtes"
            },
            {
              "id": 3,
              "tags": [3],
              "next": "",
              "image": "",
              "text": "Osso Bucco"
            },
            {
              "id": 4,
              "tags": [4],
              "next": "",
              "image": "",
              "text": "Lasagne"
            }
          ],
          "explanation": []
        },
        {
          "id": 3,
          "question": "2B. Que préférez-vous&nbsp;?",
          "question_color": "white",
          "question_background_color": "black",
          "answer_color": "white",
          "answer_background_color": "rgba(0, 0, 0, .75)",
          "next": -1,
          "rows": 1,
          "cols": 2,
          "min": 1,
          "max": 1,
          "answers": [
            {
              "id": 1,
              "tags": [7],
              "next": "",
              "image": "",
              "text": "Sushi"
            },
            {
              "id": 2,
              "tags": [8],
              "next": "",
              "image": "",
              "text": "Ramen"
            }
          ],
          "explanation": []
        }
      ],
      "nl": [
        {
          "id": 1,
          "question": "1. Waar geef je de voorkeur aan?",
          "question_color": "white",
          "question_background_color": "black",
          "answer_color": "white",
          "answer_background_color": "rgba(0, 0, 0, .75)",
          "next": "",
          "rows": 1,
          "cols": 2,
          "min": 1,
          "max": 1,
          "answers": [
            {
              "id": 1,
              "tags": [1],
              "next": 2,
              "image": "",
              "text": "Italiaanse keuken"
            },
            {
              "id": 2,
              "tags": [2],
              "next": 3,
              "image": "",
              "text": "Japanse keuken"
            }
          ],
          "explanation": []
        },
        {
          "id": 2,
          "question": "2A. Waar geef je de voorkeur aan? (2 mogelijke antwoorden)",
          "question_color": "white",
          "question_background_color": "black",
          "answer_color": "white",
          "answer_background_color": "rgba(0, 0, 0, .75)",
          "next": -1,
          "rows": 2,
          "cols": 2,
          "min": 1,
          "max": 2,
          "answers": [
            {
              "id": 1,
              "tags": [3],
              "next": "",
              "image": "",
              "text": "Pizza"
            },
            {
              "id": 2,
              "tags": [4],
              "next": "",
              "image": "",
              "text": "Pasta"
            },
            {
              "id": 3,
              "tags": [3],
              "next": "",
              "image": "",
              "text": "Osso Bucco"
            },
            {
              "id": 4,
              "tags": [4],
              "next": "",
              "image": "",
              "text": "Lasagne"
            }
          ],
          "explanation": []
        },
        {
          "id": 3,
          "question": "2B. Waar geef je de voorkeur aan?",
          "question_color": "white",
          "question_background_color": "black",
          "answer_color": "white",
          "answer_background_color": "rgba(0, 0, 0, .75)",
          "next": -1,
          "rows": 1,
          "cols": 2,
          "min": 1,
          "max": 1,
          "answers": [
            {
              "id": 1,
              "tags": [7],
              "next": "",
              "image": "",
              "text": "Sushi"
            },
            {
              "id": 2,
              "tags": [8],
              "next": "",
              "image": "",
              "text": "Ramen"
            }
          ],
          "explanation": []
        }
      ]
    },
    "use_images": true,
    "use_explanation": false,
    "use_recommandation": false,
    "recommandation_products": 4,
    "recommandation_rows": 2,
    "recommandation_cols": 2,
    "products": {
      "en": [
        {
          "name": "Lucky&nbsp;Cycle",
          "url": "https://www.lucky-cycle.com/en?utm_source=lck_demo",
          "image": "",
          "tags": [1, 2, 3, 4, 5, 6, 7, 8]
        }
      ],
      "fr": [
        {
          "name": "Lucky&nbsp;Cycle",
          "url": "https://www.lucky-cycle.com/fr?utm_source=lck_demo",
          "image": "",
          "tags": [1, 2, 3, 4, 5, 6, 7, 8]
        }
      ],
      "nl": [
        {
          "name": "Lucky&nbsp;Cycle",
          "url": "https://www.lucky-cycle.com/nl?utm_source=lck_demo",
          "image": "",
          "tags": [1, 2, 3, 4, 5, 6, 7, 8]
        }
      ]
    },
    "redirect": false
  },
  "texts": {
    "en": {
      "good": "Correct!",
      "bad": "Nope!",
      "confirm": "Confirm",
      "next": "Next question",
      "end": "Continue",
      "redirect": "Next page"
    },
    "fr": {
      "good": "Correct&nbsp;!",
      "bad": "Non&nbsp;!",
      "confirm": "Je valide",
      "next": "Question suivante",
      "end": "Continuer",
      "redirect": "Page suivante"
    },
    "nl": {
      "good": "Correct!",
      "bad": "Fout!",
      "confirm": "Bevestigen",
      "next": "Volgende vraag",
      "end": "Doorgaan",
      "redirect": "Volgende pagina"
    }
  },
  "images": {}
}
```

</details>

### Options

<table><thead><tr><th>Key</th><th>Type</th><th>Explanation</th><th>Default</th></tr></thead><tbody><tr><td><pre><code>tags > id / name
</code></pre></td><td>Int / String</td><td>Tags used to create a persona of the player <em>(<strong>name</strong> is only used in data extracts)</em>.</td><td>1 / "italy"</td></tr><tr><td><p></p><pre><code>questions > id
</code></pre></td><td>Int</td><td>Id of the question (used for redirection, should be <mark style="color:$danger;">unique</mark>).</td><td>1</td></tr><tr><td><p></p><pre><code>questions > question
</code></pre></td><td>String</td><td>Question displayed to the player.</td><td>"1. What do you prefer?"</td></tr><tr><td><p></p><pre><code>questions > question_color / question_background_color
</code></pre></td><td>String</td><td>Color and background color of the question.</td><td>"white" / "black"</td></tr><tr><td><p></p><pre><code>questions > answer_color / answer_background_color
</code></pre></td><td>String</td><td>Color and background color of the answers to the question.</td><td>"white" / "rgba(0, 0, 0, .75)"</td></tr><tr><td><p></p><pre><code>questions > next
</code></pre></td><td>Int (or String if empty...)</td><td>Target - id of the next question <mark style="color:orange;">(should only be used if answers don't have a target of their own)</mark>. </td><td>""</td></tr><tr><td><p></p><pre><code>questions > rows / cols
</code></pre></td><td>Int</td><td>Layout of the answers for the current question.</td><td>1 / 2</td></tr><tr><td><p></p><pre><code>questions > min / max
</code></pre></td><td>Int</td><td>Number of answers that can be selected <mark style="color:orange;">(should use </mark><em><mark style="color:orange;">next</mark></em><mark style="color:orange;"> if multiple answers)</mark>.</td><td>1 / 1</td></tr><tr><td><p></p><pre><code>questions > answers > id
</code></pre></td><td>Int</td><td>Id of the answer (should be <mark style="color:$danger;">unique per question</mark>).</td><td>1</td></tr><tr><td><pre><code>questions > answers > tags
</code></pre></td><td>Array</td><td>Tag(s) associated to the answer <mark style="color:$warning;">(uses ids, not names)</mark>.</td><td>[1]</td></tr><tr><td><pre><code>questions > answers > next
</code></pre></td><td>Int</td><td>Target - id of the next question <mark style="color:orange;">(should only be used if question don't have a target of its own)</mark>. </td><td>2</td></tr><tr><td><pre><code>questions > answers > image
</code></pre></td><td>String</td><td>Visual to be displayed as background of the answer.</td><td>/</td></tr><tr><td><pre><code>questions > answers > text
</code></pre></td><td>String</td><td>Text to be displayed for the answer.</td><td>"Italian cuisine"</td></tr><tr><td><p></p><pre><code>questions > explanation
</code></pre></td><td>String</td><td>Explanation of the answer to the question.</td><td>/</td></tr><tr><td><p></p><pre><code>use_images
</code></pre></td><td>Boolean</td><td>Display images for the answers.</td><td>true</td></tr><tr><td><p></p><pre><code>use_explanation
</code></pre></td><td>Boolean</td><td>Display explanation after each question (if not empty).</td><td>false</td></tr><tr><td><p></p><pre><code>use_recommandation
</code></pre></td><td>Boolean</td><td>Display products at the end of the game based on tags.</td><td>false</td></tr><tr><td><p></p><pre><code>recommandation_products
</code></pre></td><td>Int</td><td>Number of products to be displayed (if <em>use_recommandation</em> set to true).</td><td>4</td></tr><tr><td><p></p><pre><code>recommandation_rows / recommandation_cols
</code></pre></td><td>Int</td><td>Layout of the products page (if <em>use_recommandation</em> set to true).</td><td>2 / 2</td></tr><tr><td><p></p><pre><code>products > name
</code></pre></td><td>String</td><td>Text to be displayed for a product.</td><td>"Lucky Cycle"</td></tr><tr><td><p></p><pre><code>products > url
</code></pre></td><td>String</td><td>URL to be added to a product (will redirect on click).</td><td>"https://..."</td></tr><tr><td><p></p><pre><code>products > image
</code></pre></td><td>String</td><td>Visual to be displayed for a product.</td><td>/</td></tr><tr><td><pre><code>products > tags
</code></pre></td><td>Array</td><td>Tags associated to a product <mark style="color:$warning;">(used for selection)</mark>.</td><td>[1,2,...]</td></tr><tr><td><p></p><pre><code>redirect
</code></pre></td><td>Boolean</td><td>In <em>use_recommandation</em> mode, adds a button allowing the player to continue the pages flow.</td><td>false</td></tr><tr><td><p></p><pre><code>texts > good / bad
</code></pre></td><td>String</td><td>Title of the explanation screen (if <em>use_explanation</em> set to true).</td><td>"Correct!" / "Nope!"</td></tr><tr><td><pre><code>texts > confirm
</code></pre></td><td>String</td><td>CTA displayed on a question page if more than one answer can be selected.</td><td>"Confirm"</td></tr><tr><td><pre><code>texts > next
</code></pre></td><td>String</td><td>CTA displayed on the explanation page if this question isn't the last one (and <em>use_explanation</em> is set to true).</td><td>"Next question"</td></tr><tr><td><pre><code>texts > end
</code></pre></td><td>String</td><td>CTA displayed on the explanation page if this question is the last one (and <em>use_explanation</em> is set to true).</td><td>"Continue"</td></tr><tr><td><pre><code>texts > redirect
</code></pre></td><td>String</td><td>CTA displayed on the products page (if <em>redirect</em> is set to true).</td><td>"Next page"</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>answers > image
</code></pre></td><td>/</td><td>Background of the answer.</td><td>/</td></tr><tr><td><pre><code>products > image
</code></pre></td><td>/</td><td>Visual of the product (if <em>use_recommandation</em> is set to <mark style="color:$success;">true</mark>).</td><td>/</td></tr></tbody></table>


# Pinata

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

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

### Configuration

<details>

<summary>JSON</summary>

```json
{
  "options": {
    "hits": 3,
    "rope_color": "black",
    "rope_width": 8,
    "pinata_size": 70,
    "pinata_top": 0,
    "swing": true,
    "hit_swing": true,
    "hit_explosion": true,
    "particules_count" : 40,
    "particules_min_speed": 25,
    "particules_max_speed": 40,
    "particules_min_size": 5,
    "particules_max_size": 10,
    "use_reward_image": false,
    "steering_offset": 75
  },
  "texts": {
    "en": {
      "start": "Play now"
    },
    "fr": {
      "start": "Je joue"
    },
    "nl": {
      "start": "Speel nu"
    }
  },
  "images": {
    "win": GAME_URL + "/pinata/win.png",
    "lose": GAME_URL + "/pinata/lose.png",
    "pinata": [
      GAME_URL + "/pinata/state1.png",
      GAME_URL + "/pinata/state2.png",
      GAME_URL + "/pinata/state3.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>hits
</code></pre></td><td>Int</td><td>Number of "steps" to the game.</td><td>3</td></tr><tr><td><pre><code>rope_color
</code></pre></td><td>String</td><td>Colour of the rope <em>(can also be partially or fully transparent)</em>.</td><td>"black"</td></tr><tr><td><pre><code>rope_width
</code></pre></td><td>Float</td><td>Width of the rope.</td><td>8 (px = .5em)</td></tr><tr><td><pre><code>pinata_size
</code></pre></td><td>Float</td><td>Percentage of the container for the pinata visuals.</td><td>70 (%)</td></tr><tr><td><pre><code>pinata_top
</code></pre></td><td>Float</td><td>Pinata is vertically centered by default (50%), add value to lower it, or decrease to bring it closer to the top.</td><td>0 (%)</td></tr><tr><td><pre><code>swing
</code></pre></td><td>Boolean</td><td>Slight swinging of the pinata pre-interaction.</td><td>true</td></tr><tr><td><pre><code>hit_swing
</code></pre></td><td>Boolean</td><td>Swinging on interaction.</td><td>true</td></tr><tr><td><pre><code>hit_explosion
</code></pre></td><td>Boolean</td><td>Generate particles on interaction <em>(other parameters shouldn't be changed)</em>.</td><td>true</td></tr><tr><td><pre><code>use_reward_image
</code></pre></td><td>Boolean</td><td>Use one image per reward, or default one <em>(win)</em>.</td><td>false</td></tr><tr><td><pre><code>steering_offset
</code></pre></td><td>Int</td><td>Default angle of the swing (in degrees).</td><td>75</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>win
</code></pre></td><td>300 x 300px</td><td>Visual if won (<em>use_reward_image</em> has to be set to <em>false</em>).</td><td><a href="https://statics.lucky-cycle.com/files/_games/pinata/win.png">/win.png</a></td></tr><tr><td><pre><code>lose
</code></pre></td><td>300 x 300px</td><td>Visual displayed in case of <em>lose</em>.</td><td><a href="https://statics.lucky-cycle.com/files/_games/pinata/lose.png">/lose.png</a></td></tr><tr><td><pre><code>pinata
</code></pre></td><td>300 x 300px</td><td>Visual<mark style="color:blue;">(s)</mark> displayed before clicking.</td><td><a href="https://statics.lucky-cycle.com/files/_games/pinata/state1.png">/state1.png</a></td></tr></tbody></table>


# Pinball

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

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

### Configuration

<details>

<summary>JSON</summary>

```json
{
  "options": {
    "header_text_color": "white",
    "header_background_color": "black",
    "sound_color": "white",
    "balls": 3
  },
  "texts": {
    "en": {
      "play_button": "Play now",
      "sound_on": "Turn the sound on",
      "sound_off": "Turn the sound off",
      "chance": "Chance:",
      "score": "Score:"
    },
    "fr": {
      "play_button": "Je joue",
      "sound_on": "Activer les sons",
      "sound_off": "Désactiver les sons",
      "chance": "Chance&nbsp;:",
      "score": "Score&nbsp;:"
    },
    "nl": {
      "play_button": "Speel nu",
      "sound_on": "Zet geluid aan",
      "sound_off": "Zet geluid uit",
      "chance": "Kans:",
      "score": "Score:"
    }
  },
  "images": {
    "background": GAME_URL + "/background.png",
    "overlay": GAME_URL + "/overlay.png",
    "paddle": GAME_URL + "/paddle.png",
    "ball": GAME_URL + "/ball.png",
    "buttons": "",
    "rewards": {}
  },
  "sounds": {
    "points": "",
    "background": ""
  }
}
```

</details>

### Options

<table><thead><tr><th>Key</th><th>Type</th><th>Explanation</th><th>Default</th></tr></thead><tbody><tr><td><pre><code>header_text_color / header_background_color
</code></pre></td><td>String</td><td>Color and background of the header.</td><td>"white" / "black"</td></tr><tr><td><pre><code>sound_color
</code></pre></td><td>String</td><td>Color of the sound (on/off) icons <em><mark style="color:red;">(only displayed if sounds are provided)</mark></em>.</td><td>"white"</td></tr><tr><td><pre><code>balls
</code></pre></td><td>Int</td><td><p>Number of chances (balls).</p><p><em><mark style="color:blue;">Score = sum([scores])</mark></em></p></td><td>3</td></tr><tr><td><pre><code>texts > play_button
</code></pre></td><td>String</td><td>Text of the CTA to start the game.</td><td>"Play now"</td></tr><tr><td><pre><code>texts > sound_on / sound_off
</code></pre></td><td>String</td><td>Aria-label of the sound icons <em><mark style="color:red;">(only displayed if sounds are provided)</mark></em>.</td><td>"Turn the sound on" / "Turn the sound off"</td></tr><tr><td><pre><code>texts > chance
</code></pre></td><td>String</td><td>Label in the header for the number of chances.</td><td>"Chance:"</td></tr><tr><td><pre><code>texts > score
</code></pre></td><td>String</td><td>Label in the header for the score.</td><td>"Score:"</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>720 x 1280</td><td>Background of the game.</td><td><a href="https://statics.lucky-cycle.com/files/_games/pinball/background.png">/background.png</a></td></tr><tr><td><pre><code>overlay
</code></pre></td><td>720 x 1280</td><td>Overlay of the game. <mark style="color:$warning;">Shape must be respected!</mark></td><td><a href="https://statics.lucky-cycle.com/files/_games/pinball/overlay.png">/overlay.png</a></td></tr><tr><td><pre><code>paddle
</code></pre></td><td>250 x 80</td><td>Paddle visual <em>(reversed for the second one)</em>. <mark style="color:$warning;">Shape must be respected!</mark></td><td><a href="https://statics.lucky-cycle.com/files/_games/pinball/paddle.png">/paddle.png</a></td></tr><tr><td><pre><code>ball
</code></pre></td><td>100 x 100</td><td>Visual of the ball. <mark style="color:$warning;">Must be square!</mark></td><td><a href="https://statics.lucky-cycle.com/files/_games/pinball/ball.png">/ball.png</a></td></tr><tr><td><pre><code>buttons
</code></pre></td><td></td><td>Visual used for the buttons.</td><td>/</td></tr></tbody></table>


# Scratch Card

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

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

### Configuration

<details>

<summary>JSON</summary>

```json
{
    "options": {
        "scratch_percentage": 60,
        "cursor_size": 1.25,
        "overlay_timeout": 60,
        "background_color": "white",
        "allow_double_click": true,
        "display_progress": false,
        "use_reward_image": false
    },
    "texts": {
      "en": {},
      "fr": {},
      "nl": {}
    },
    "images": {
      "win": {
        "en": GAME_URL + "/win_fr.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"
      },
      "cursor": GAME_URL + "/cursor.png",
      "brush": GAME_URL + "/cursor.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>scratch_percentage
</code></pre></td><td>Integer</td><td>Percentage of the image to be scratched for the game to end.</td><td>60</td></tr><tr><td><pre><code>cursor_size
</code></pre></td><td>Integer</td><td>Size of the cursor.</td><td>1.25</td></tr><tr><td><pre><code>overlay_timeout
</code></pre></td><td>Integer</td><td>Delay before the game ending.</td><td>60</td></tr><tr><td><pre><code>background_color
</code></pre></td><td>Text</td><td>Background color (behind the images). </td><td>"white"</td></tr><tr><td><pre><code>allow_double_click
</code></pre></td><td>Boolean</td><td>Let people skip the scratching by double-clicking.</td><td>true</td></tr><tr><td><pre><code>display_progress
</code></pre></td><td>Boolean</td><td>Adds a progress bar at the bottom of the scratch zone.</td><td>false</td></tr><tr><td><pre><code>use_reward_image
</code></pre></td><td>Boolean</td><td>Use static or dynamic visuals <em>(based on the reward)</em>.</td><td>false</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>win
</code></pre></td><td>550 x 380px</td><td>Displayed after scratched in case of a <em>win</em> (and if no rewards images).</td><td><a href="https://statics.lucky-cycle.com/files/_games/scratch-card/win_en.png">/win_en.png</a></td></tr><tr><td><pre><code>lose
</code></pre></td><td>550 x 380px</td><td>Displayed after scratched in case of a <em>lose</em> (and if no rewards images).</td><td><a href="https://statics.lucky-cycle.com/files/_games/scratch-card/lose_en.png">/lose_en.png</a></td></tr><tr><td><pre><code>overlay
</code></pre></td><td>550 x 380px</td><td>Visual to be scratched.</td><td><a href="https://statics.lucky-cycle.com/files/_games/scratch-card/overlay_en.png">/overlay_en.png</a></td></tr><tr><td><pre><code>cursor
</code></pre></td><td><mark style="color:red;">64 x 64px</mark></td><td>Replace the default cursor while scratching.</td><td><a href="https://statics.lucky-cycle.com/files/_games/scratch-card/cursor.png">/cursor.png</a></td></tr><tr><td><pre><code>brush
</code></pre></td><td><em>64 x 64px</em></td><td>Shape of the scratching. <mark style="color:orange;">Uses the same image as </mark><em><mark style="color:orange;">cursor</mark></em><mark style="color:orange;"> if none provided.</mark></td><td><a href="https://statics.lucky-cycle.com/files/_games/scratch-card/cursor.png">/cursor.png</a></td></tr></tbody></table>


# Scratch Nine

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

{% hint style="success" %}
***Scratch Triple*** is now based on the same, unified, config.
{% endhint %}

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

### Configuration

<details>

<summary>JSON</summary>

```json
{
  "options": {
    "scratch_percentage": 50,
    "cursor_size": 1.5,
    "slot_number": 9,
    "use_reward_image": false
  },
  "texts": {
    "en": {},
    "fr": {},
    "nl": {}
  },
  "images": {
    "background": [
      GAME_URL + "/item-1.png",
      GAME_URL + "/item-2.png",
      GAME_URL + "/item-3.png",
      GAME_URL + "/item-4.png",
      GAME_URL + "/item-5.png"
    ],
    "overlay": GAME_URL + "/overlay.png",
    "cursor": GAME_URL + "/cursor.png",
    "brush": GAME_URL + "/cursor.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>scratch_percentage
</code></pre></td><td>Integer</td><td>Part of the image to be scratched before reveal.</td><td>50</td></tr><tr><td><pre><code>cursor_size
</code></pre></td><td>Integer</td><td>Size of the cursor.</td><td>1.5</td></tr><tr><td><pre><code>slot_number
</code></pre></td><td>Integer</td><td>Number of slots <em>(between 3 and 9)</em>.</td><td>9</td></tr><tr><td><pre><code>use_reward_image
</code></pre></td><td>Boolean</td><td>Use static or dynamic visuals <em>(based on the reward)</em>.</td><td>false</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>150 x 150px</td><td>Items of the grid <mark style="color:red;">(array has to contain 5 items!)</mark>.</td><td><a href="https://statics.lucky-cycle.com/files/_games/scratch-nine/item-1.png">/item-1.png</a></td></tr><tr><td><pre><code>overlay
</code></pre></td><td>150 x 150px</td><td>Visual of the overlay (will be displayed 9 times).</td><td><a href="https://statics.lucky-cycle.com/files/_games/scratch-nine/overlay.png">/overlay.png</a></td></tr><tr><td><pre><code>cursor
</code></pre></td><td><mark style="color:red;">64 x 64px</mark></td><td>Replace the default cursor while scratching.</td><td><a href="https://statics.lucky-cycle.com/files/_games/scratch-nine/cursor.png">/cursor.png</a></td></tr><tr><td><pre><code>brush
</code></pre></td><td><em>64 x 64px</em></td><td>Shape of the scratching. <mark style="color:orange;">Use the same image as </mark><em><mark style="color:orange;">cursor</mark></em><mark style="color:orange;"> if none provided.</mark></td><td><a href="https://statics.lucky-cycle.com/files/_games/scratch-nine/cursor.png">/cursor.png</a></td></tr></tbody></table>


# Shooter

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

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

### Configuration

<details>

<summary>JSON</summary>

```json
{
  "options": {
    "balloons_number": 5,
    "number_of_try": 3,
    "image_size": 20,
    "balloon_speed_min": 10,
    "balloon_speed_max": 20
  },
  "texts": {
    "en": {},
    "fr": {},
    "nl": {}
  },
  "images": {
    "balloons": [
      GAME_URL + "/item-1.png"
    ],
    "image_balloon_win": GAME_URL + "/win.png",
    "image_balloon_lose": GAME_URL + "/lose.png",
    "image_cursor": GAME_URL + "/cursor.png",
    "background_image": GAME_URL + "/background.png"
  }
}
```

</details>

### Options

<table><thead><tr><th>Key</th><th>Type</th><th>Explanation</th><th>Default</th></tr></thead><tbody><tr><td><pre><code>balloons_number
</code></pre></td><td>Integer</td><td>Number of items displayed.</td><td>5</td></tr><tr><td><pre><code>number_of_try
</code></pre></td><td>Integer</td><td>Number of items to click on.</td><td>3</td></tr><tr><td><pre><code>image_size
</code></pre></td><td>Integer</td><td>Size of the items (based on the x size of the game, in %).</td><td>20</td></tr><tr><td><pre><code>balloon_speed_min
</code></pre></td><td>Integer</td><td>Items min speed.</td><td>10</td></tr><tr><td><pre><code>balloon_speed_max
</code></pre></td><td>Integer</td><td>Items max speed.</td><td>20</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>balloons
</code></pre></td><td>150 x 150px (each)</td><td>Items to be displayed in the game <mark style="color:orange;">(based on the </mark><em><mark style="color:orange;">balloons_number</mark></em><mark style="color:orange;"> option)</mark>.</td><td><a href="https://statics.lucky-cycle.com/files/_games/shooter/item-1.png">/item-1.png</a></td></tr><tr><td><pre><code>image_balloon_win
</code></pre></td><td>150 x 150px</td><td>Image to be displayed once an item has been clicked on in case of a <em>win</em>.</td><td><a href="https://statics.lucky-cycle.com/files/_games/shooter/win.png">/win.png</a></td></tr><tr><td><pre><code>image_balloon_lose
</code></pre></td><td>150 x 150px</td><td>Image to be displayed once an item has been clicked on in case of a <em>lose</em>.</td><td><a href="https://statics.lucky-cycle.com/files/_games/shooter/lose.png">/lose.png</a></td></tr><tr><td><pre><code>image_cursor
</code></pre></td><td><mark style="color:red;">64 x 64px</mark></td><td>Replace the default cursor while playing.</td><td><a href="https://statics.lucky-cycle.com/files/_games/shooter/cursor.png">/cursor.png</a></td></tr><tr><td><pre><code>background_image
</code></pre></td><td>550 x 380px</td><td>Image to be displayed in the back of the game.</td><td><a href="https://statics.lucky-cycle.com/files/_games/shooter/background.png">/background.png</a></td></tr></tbody></table>


# Short

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

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

### Configuration

<details>

<summary>JSON</summary>

```json
{
    "options": {
        "game": {
            "width": 400,
            "height": 400,
            "use_reward_image": true
        },
        "images": {
            "cover": {
                "x": 0,
                "y": 0,
                "z": 0
            }
        },
        "animations": {
            "iddle": {
                "x": 0,
                "y": 0,
                "z": 1,
                "width": 400,
                "height": 400,
                "nbImages": 1,
                "duration": 3000,
                "loop": true
            },
            "win": {
                "x": 0,
                "y": 0,
                "z": 0,
                "width": 400,
                "height": 400,
                "nbImages": 48,
                "duration": 2000,
                "loop": false
            },
            "lose": {
                "x": 0,
                "y": 0,
                "z": 0,
                "width": 400,
                "height": 400,
                "nbImages": 48,
                "duration": 2000,
                "loop": false
            }
        }
    },
    "texts": {
      "en": {},
      "fr": {},
      "nl": {}
    },
    "images": {
      "sprite_iddle": GAME_URL + "/iddle.png",
      "sprite_win": GAME_URL + "/win.png",
      "sprite_lose": GAME_URL + "/lose.png",
      "sprite_cover": GAME_URL + "/overlay.png",
      "rewards": {}
    }
}
```

</details>

### Options

<table><thead><tr><th>Key</th><th>Type</th><th width="189">Explanation</th><th>Default</th></tr></thead><tbody><tr><td><pre><code>width
</code></pre></td><td>Integer</td><td>Width of the canvas.</td><td>400</td></tr><tr><td><pre><code>height
</code></pre></td><td>Integer</td><td>Height of the canvas.</td><td>400</td></tr><tr><td><pre><code>use_reward_image
</code></pre></td><td>Boolean</td><td>Tells the game to use the reward image, or a default one (both must be provided).</td><td>true</td></tr></tbody></table>

{% hint style="danger" %}
Other options shouldn't be edited unless you know what you're doing!
{% endhint %}

### Assets

<table><thead><tr><th>Key</th><th>Size</th><th>Explanation</th><th>Default</th></tr></thead><tbody><tr><td><pre><code>sprite_iddle
</code></pre></td><td>400 x 400px</td><td>Top image before clicking on the game (should be 1 frame).</td><td><a href="https://statics.lucky-cycle.com/files/_games/short/iddle.png">/iddle.png</a></td></tr><tr><td><pre><code>sprite_win
</code></pre></td><td><mark style="color:red;">(400 * number of frames)</mark> x 400px</td><td>Image displayed once the game started, in case of a <em>win</em> <mark style="color:orange;">and if use_reward_image is set to false</mark> (should have <strong>many</strong> frames).</td><td><a href="https://statics.lucky-cycle.com/files/_games/short/win.png">/win.png</a></td></tr><tr><td><pre><code>sprite_lose
</code></pre></td><td><mark style="color:red;">(400 * number of frames)</mark> x 400px</td><td>Image displayed once the game started, in case of a <em>lose</em> (should have <strong>many</strong> frames).</td><td><a href="https://statics.lucky-cycle.com/files/_games/short/lose.png">/lose.png</a></td></tr><tr><td><pre><code>sprite_cover
</code></pre></td><td>400 x 400px</td><td>Background of the game.</td><td><a href="https://statics.lucky-cycle.com/files/_games/short/overlay.png">/overlay.png</a></td></tr></tbody></table>


# Shuffler

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

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

### Configuration

<details>

<summary>JSON</summary>

```json
{
    "options": {
        "shuffleSpeed": 350,
        "numberOfShuffles": 15,
        "startAnimationDuration": 1500
    },
    "texts": {
      "en": {
        "game_button_play": "Play now"
      },
      "fr": {
        "game_button_play": "Je joue"
      },
      "nl": {
        "game_button_play": "Speel nu"
      }
    },
    "images": {
      "image_top": GAME_URL + "/box_top.png",
      "image_bottom": GAME_URL + "/box_bottom.png",
      "image_close": GAME_URL + "/box_closed.png",
      "image_obj": GAME_URL + "/item.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>shuffleSpeed
</code></pre></td><td>Integer</td><td>Speed of the shuffle moves.</td><td>350</td></tr><tr><td><pre><code>numberOfShuffles
</code></pre></td><td>Integer</td><td>Total number of shuffles before the customer can choose one of the boxes.</td><td>15</td></tr><tr><td><pre><code>startAnimationDuration
</code></pre></td><td>Integer</td><td>Duration before the item falls into one of the boxes.</td><td>1500</td></tr><tr><td><pre><code>game_button_play
</code></pre></td><td>Text</td><td>Text for the button that is displayed at the start of the game.</td><td>"Play now"</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>image_top
</code></pre></td><td>175 x 175px</td><td>Top part of the <mark style="color:red;">open</mark> box.</td><td><a href="https://statics.lucky-cycle.com/files/_games/shuffle/box_top.png">/box_top.png</a></td></tr><tr><td><pre><code>image_bottom
</code></pre></td><td>175 x 175px</td><td>Bottom part of the <mark style="color:red;">open</mark> box.</td><td><a href="https://statics.lucky-cycle.com/files/_games/shuffle/box_bottom.png">/box_bottom.png</a></td></tr><tr><td><pre><code>image_close
</code></pre></td><td>175 x 175px</td><td><mark style="color:red;">Closed</mark> box.</td><td><a href="https://statics.lucky-cycle.com/files/_games/shuffle/box_closed.png">/box_closed.png</a></td></tr><tr><td><pre><code>image_obj
</code></pre></td><td>100 x 100px</td><td>Item to be hidden in the box <mark style="color:orange;">(must fit in the box)</mark>.</td><td><a href="https://statics.lucky-cycle.com/files/_games/shuffle/item.png">/item.png</a></td></tr></tbody></table>


# Slicer

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

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

### Configuration

<details>

<summary>JSON</summary>

```json
{
  "options": {
    "header_background_color": "black",
    "header_text_color": "white",
    "fruits": [
      {
        "name": "apple",
        "points": 5,
        "width": 62,
        "height": 59,
        "minimum_horizontal_speed": 1,
        "maximum_horizontal_speed": 2,
        "minimum_vertical_speed": 4,
        "maximum_vertical_speed": 5,
        "is_a_bomb": 0,
        "img_whole_src": GAME_URL + "/apple-w.png",
        "img_Left_src": GAME_URL + "/apple-l.png",
        "img_Right_src": GAME_URL + "/apple-r.png",
        "img_Stain_src": GAME_URL + "/apple-s.png"
      },
      {
        "name": "peach",
        "points": 5,
        "width": 66,
        "height": 66,
        "minimum_horizontal_speed": 1,
        "maximum_horizontal_speed": 2,
        "minimum_vertical_speed": 4,
        "maximum_vertical_speed": 5,
        "is_a_bomb": 0,
        "img_whole_src": GAME_URL + "/peach-w.png",
        "img_Left_src": GAME_URL + "/peach-l.png",
        "img_Right_src": GAME_URL + "/peach-r.png",
        "img_Stain_src": GAME_URL + "/peach-s.png"
      },
      {
        "name": "strawberry",
        "points": 10,
        "width": 68,
        "height": 72,
        "minimum_horizontal_speed": 1,
        "maximum_horizontal_speed": 2,
        "minimum_vertical_speed": 4,
        "maximum_vertical_speed": 5,
        "is_a_bomb": 0,
        "img_whole_src": GAME_URL + "/strawberry-w.png",
        "img_Left_src": GAME_URL + "/strawberry-l.png",
        "img_Right_src": GAME_URL + "/strawberry-r.png",
        "img_Stain_src": GAME_URL + "/strawberry-s.png"
      },
      {
        "name": "watermelon",
        "points": 1,
        "width": 98,
        "height": 85,
        "minimum_horizontal_speed": 1,
        "maximum_horizontal_speed": 2,
        "minimum_vertical_speed": 4,
        "maximum_vertical_speed": 5,
        "is_a_bomb": 0,
        "img_whole_src": GAME_URL + "/watermelon-w.png",
        "img_Left_src": GAME_URL + "/watermelon-l.png",
        "img_Right_src": GAME_URL + "/watermelon-r.png",
        "img_Stain_src": GAME_URL + "/watermelon-s.png"
      },
      {
        "name": "bomb",
        "points": 0,
        "width": 66,
        "height": 68,
        "minimum_horizontal_speed": 3,
        "maximum_horizontal_speed": 5,
        "minimum_vertical_speed": 4,
        "maximum_vertical_speed": 5,
        "is_a_bomb": 1,
        "img_whole_src": GAME_URL + "/bomb-w.png",
        "img_Left_src": "",
        "img_Right_src": "",
        "img_Stain_src": GAME_URL + "/bomb-s.png"
      }
    ],
    "lives": 3,
    "tutorial_fruit_number": 0,
    "tutorial_bomb_number": 4,
    "min_fruits_per_wave": 1,
    "max_fruits_per_wave": 3,
    "seconds_between_wave": 3,
    "gravity_strenght": 1,
    "height_percent_before_fall_start": 75,
    "cut_trail_width": 5,
    "cut_trail_color": "red",
    "fruit_missed_deduct_lives": false,
    "spawn_bombs": true,
    "fruit_bounce": true,
    "timer": 60,
    "text_police": "Arial",
    "overlay_width": 600,
    "overlay_height": 600
  },
  "texts": {
    "en": {
      "score": "Score",
      "remaining_lives": "✕&nbsp;❤️",
      "time_left": "Time remaining",
      "tutorial_text_1": "Cut fruit to score points.",
      "tutorial_text_2": "Each bomb you cut costs you one life."
    },
    "fr": {
      "score": "Score ",
      "remaining_lives": "✕&nbsp;❤️",
      "time_left": "Temps restant ",
      "tutorial_text_1": "Coupez les fruits pour accumuler les points.",
      "tutorial_text_2": "Chaque bombe coupée vous fais perdre une vie."
    },
    "nl": {
      "score": "Score",
      "remaining_lives": "✕&nbsp;❤️",
      "time_left": "Resterende tijd",
      "tutorial_text_1": "Snijd vruchten om punten te scoren.",
      "tutorial_text_2": "Elke bom die je doorsnijdt kost je een leven."
    }
  },
  "sounds": {},
  "images": {
    "background_image": GAME_URL + "/background.png",
    "tutorial_background_image": GAME_URL + "/tuto-background.png",
    "gameover_image": GAME_URL + "/game-over.png",
    "newgame_circle_image": {
      "en": GAME_URL + "/new-game.png",
      "fr": GAME_URL + "/new-game.png",
      "nl": GAME_URL + "/new-game.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>header_background_color
header_text_color
</code></pre></td><td>String</td><td>Colour / background of the header.</td><td>"black" / "white"</td></tr><tr><td><pre><code>fruits []
</code></pre></td><td>Objects</td><td>Items that will need to be cut in half <em>("is_a_bomb": 0)</em> or not <em>("is_a_bomb": 1)</em>.</td><td>[ {...} ]</td></tr><tr><td><pre><code>lives
</code></pre></td><td>Integer</td><td>Number of lives before game over (= chances to miss).</td><td>3</td></tr><tr><td><pre><code>tutorial_fruit_number
</code></pre></td><td>Integer</td><td>Indicates which item will be displayed in the tutorial as <mark style="color:green;">good</mark>.</td><td>0</td></tr><tr><td><pre><code>tutorial_bomb_number
</code></pre></td><td>Integer</td><td>Indicates which item will be displayed in the tutorial as <mark style="color:orange;">bad</mark>.</td><td>4</td></tr><tr><td><pre><code>min_fruits_per_wave / max_
</code></pre></td><td>Integer</td><td>Amount of items that could be rendered at the same time.</td><td>1 / 3</td></tr><tr><td><pre><code>seconds_between_wave
</code></pre></td><td>Integer</td><td>Delay between each new wave.</td><td>3</td></tr><tr><td><pre><code>gravity_strenght
</code></pre></td><td>Integer</td><td>Strength of the items' gravity (y speed).</td><td>1</td></tr><tr><td><pre><code>height_percent_before_fall_start
</code></pre></td><td>Integer</td><td>Height reached before the items start falling back (in percents).</td><td>75</td></tr><tr><td><pre><code>cut_trail_width
</code></pre></td><td>Integer</td><td>Width of the cursor animation.</td><td>5</td></tr><tr><td><pre><code>cut_trail_color
</code></pre></td><td>String</td><td>Colour of the cursor animation.</td><td>"red"</td></tr><tr><td><pre><code>fruit_missed_deduct_lives
</code></pre></td><td>Boolean</td><td><mark style="color:yellow;">Option</mark> to lose one live if a good item isn't cut before falling back out of the screen.</td><td>false</td></tr><tr><td><pre><code>spawn_bombs
</code></pre></td><td>Boolean</td><td><mark style="color:yellow;">Option</mark> to display bad items in the game (must have bad items in the <em>fruits</em> array).</td><td>true</td></tr><tr><td><pre><code>fruit_bounce
</code></pre></td><td>Boolean</td><td><mark style="color:yellow;">Option</mark> to make items bounce on left and right "walls" (if set to <em>false</em>, will leave the screen).</td><td>true</td></tr><tr><td><pre><code>timer
</code></pre></td><td>Integer</td><td>Duration of the game (in seconds).</td><td>60</td></tr><tr><td><pre><code>text_police
</code></pre></td><td>String</td><td>Font to be used in the game (<em>Google Fonts)</em>.</td><td>"Arial"</td></tr><tr><td><pre><code>overlay_width / _height
</code></pre></td><td>Integer</td><td>Size of the canvas.</td><td>600 / 600</td></tr><tr><td><pre><code>score
</code></pre></td><td>String</td><td>Text in the header.</td><td>"Score"</td></tr><tr><td><pre><code>remaining_lives
</code></pre></td><td>String</td><td>Text in the header.</td><td>"✕&#x26;nbsp;❤️"</td></tr><tr><td><pre><code>time_left
</code></pre></td><td>String</td><td>Text in the header (displayed if no lives).</td><td>"Time remaining"</td></tr><tr><td><pre><code>tutorial_text_1
</code></pre></td><td>String</td><td>Tutorial text for <em>good</em> items.</td><td>"Cut fruit to score points."</td></tr><tr><td><pre><code>tutorial_text_2
</code></pre></td><td>String</td><td>Tutorial text for <em>bad</em> items.</td><td>"Each bomb you cut costs you one life."</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>img_whole_src
img_Left_src
img_Right_src
img_Stain_src
</code></pre></td><td>64 x 64px <em>(whole / left and right must be of the same size)</em><br>100 x 100px <em>(stain)</em></td><td>Visuals of an item.</td><td><a href="https://statics.lucky-cycle.com/files/_games/slicer/apple-w.png">/apple-w.png</a><br><a href="https://statics.lucky-cycle.com/files/_games/slicer/apple-l.png">/apple-l.png</a><br><a href="https://statics.lucky-cycle.com/files/_games/slicer/apple-r.png">/apple-r.png</a><br><a href="https://statics.lucky-cycle.com/files/_games/slicer/apple-s.png">/apple-s.png</a></td></tr><tr><td><pre><code>background_image
</code></pre></td><td>500 x 500px</td><td>Background of the game.</td><td><a href="https://statics.lucky-cycle.com/files/_games/slicer/background.png">/background.png</a></td></tr><tr><td><pre><code>tutorial_background_image
</code></pre></td><td>500 x 500px</td><td>Background of the tutorial.</td><td><a href="https://statics.lucky-cycle.com/files/_games/slicer/tuto-background.png">/tuto-background.png</a></td></tr><tr><td><pre><code>gameover_image
</code></pre></td><td>500 x 500px</td><td>Image displayed at the end of the game.</td><td><a href="https://statics.lucky-cycle.com/files/_games/slicer/game-over.png">/game-over.png</a></td></tr><tr><td><pre><code>newgame_circle_image
</code></pre></td><td>500 x 500px</td><td>Visual to put behind/around the tutorial items.</td><td><a href="https://statics.lucky-cycle.com/files/_games/slicer/new-game.png">/new-game.png</a></td></tr></tbody></table>


# Slot Machine

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

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

### Configuration

<details>

<summary>JSON</summary>

```json
{
  "options": {
    "background_color": "white",
    "speed": 0.08,
    "use_reward_image": false,
    "index_reward_image": 0,
    "border_width_offset_1": 0,
    "border_width_offset_2": 0,
    "border_width_offset_3": 0,
    "reel2_start_time": 1000,
    "reel3_start_time": 2000,
    "overlay_width": 550,
    "overlay_height": 380,
    "handle_height": 380
  },
  "texts": {
    "en": {
      "play_button": "Play now"
    },
    "fr": {
      "play_button": "Je joue"
    },
    "nl": {
      "play_button": "Speel nu"
    }
  },
  "images": {
    "overlay": GAME_URL + "/overlay.png",
    "handle": {
      "ball": GAME_URL + "/handle_ball.png",
      "handle": GAME_URL + "/handle_handle.png",
      "base": GAME_URL + "/handle_base.png"
    },
    "items": [
      GAME_URL + "/item-1.jpg",
      GAME_URL + "/item-2.jpg",
      GAME_URL + "/item-3.jpg",
      GAME_URL + "/item-4.jpg",
      GAME_URL + "/item-5.jpg",
      GAME_URL + "/item-6.jpg",
      GAME_URL + "/item-7.jpg",
      GAME_URL + "/item-8.jpg",
      GAME_URL + "/item-9.jpg"
    ],
    "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>background_color
</code></pre></td><td>String</td><td>Background color of the machine <mark style="color:$danger;">(should <strong>NOT</strong> be transparent if handle is visible)</mark>.</td><td>"white"</td></tr><tr><td><pre><code>speed
</code></pre></td><td>Integer</td><td>Rotation speed.</td><td>0.08</td></tr><tr><td><pre><code>border_width_offset_1 / _2 / _3
</code></pre></td><td>Integer</td><td>Adjust to match overlay.</td><td>0 / 0 / 0</td></tr><tr><td><pre><code>reel2_start_time
</code></pre></td><td>Integer</td><td>Delay for the second row.</td><td>1000</td></tr><tr><td><pre><code>reel3_start_time
</code></pre></td><td>Integer</td><td>Delay for the third row.</td><td>2000</td></tr><tr><td><pre><code>overlay_width / _height
</code></pre></td><td>Integer</td><td>Size of the overlay.</td><td>550 / 380</td></tr><tr><td><pre><code>handle_height
</code></pre></td><td>Integer</td><td>Height of the handle (must be smaller or equal to <em>overlay_height</em>).</td><td>380</td></tr><tr><td><pre><code>use_reward_image
</code></pre></td><td>Boolean</td><td>Use reward image in machine (must specify an image for each reward).</td><td>true</td></tr><tr><td><pre><code>index_image_no_reward
</code></pre></td><td>Integer</td><td><mark style="color:orange;">If </mark><em><mark style="color:orange;">use_reward_image</mark></em><mark style="color:orange;"> is false</mark>, specify which image is used in case of win (must be between 0 and 8).</td><td>0</td></tr><tr><td><pre><code>play_button
</code></pre></td><td>String <mark style="color:green;">(one per language)</mark></td><td>Text for the button that is displayed on small screens (instead of the handle).</td><td>"Play now" / "Je joue" / "Speel nu"</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>overlay
</code></pre></td><td>550 x 380px</td><td>Image used on top of the game. Must be transparent or items will be hidden.</td><td><a href="https://statics.lucky-cycle.com/files/_games/slot-machine/overlay.png">/overlay.png</a></td></tr><tr><td><pre><code>ball
</code></pre></td><td><em>120 x 120px</em></td><td>Component of the handle.</td><td><a href="https://statics.lucky-cycle.com/files/_games/slot-machine/handle_ball.png">/handle_ball.png</a></td></tr><tr><td><pre><code>handle
</code></pre></td><td><em>35 x 400px</em></td><td>Component of the handle.</td><td><a href="https://statics.lucky-cycle.com/files/_games/slot-machine/handle_handle.png">/handle_handle.png</a></td></tr><tr><td><pre><code>base
</code></pre></td><td><em>110 x 200px</em></td><td>Component of the handle.</td><td><a href="https://statics.lucky-cycle.com/files/_games/slot-machine/handle_base.png">handle_base.png</a></td></tr><tr><td><pre><code>items
</code></pre></td><td>150 x 150px <mark style="color:green;">(x9)</mark></td><td>Item displayed in the game. Must have 9 different items for the game to work.</td><td><a href="https://statics.lucky-cycle.com/files/_games/slot-machine/item-1.jpg">/item-1.jpg</a></td></tr></tbody></table>


# Snake

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

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

### Configuration

<details>

<summary>JSON</summary>

```json
{
  "options": {
    "header_background_color": "black",
    "header_text_color": "white",
    "number_case": 8,
    "spawn": {
      "x": 4,
      "y": 7
    },
    "case_per_second": 1.25,
    "max_case_per_second": 5,
    "acceleration_percent": 10,
    "direction": {
      "url": GAME_URL + "/arrow.png"
    },
    "snake": {
      "direction": "N",
      "url": GAME_URL + "/snake.png"
    },
    "apple": {
      "url": GAME_URL + "/apple.png"
    },
    "background": {
      "url": GAME_URL + "/background.png"
    },
    "tuto": {
      "mobile": GAME_URL + "/tutorial_mobile.gif",
      "desktop": GAME_URL + "/tutorial_desktop.gif"
    }
  },
  "texts": {
    "en": {
      "score": "Score",
      "unit": "Apple(s)"
    },
    "fr": {
      "score": "Score ",
      "unit": "Pomme(s)"
    },
    "nl": {
      "score": "Score",
      "unit": "Appel(s)"
    }
  },
  "images": {
    "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>header_background_color
header_text_color
</code></pre></td><td>String</td><td>Colour / background of the header.</td><td>"black" / "white"</td></tr><tr><td><pre><code>number_case
</code></pre></td><td>Integer</td><td>Number of cells in a row / column (total cells will be <em>number_cases</em>² as the game is always a square).</td><td>8</td></tr><tr><td><pre><code>spawn > x / y
</code></pre></td><td>Integer</td><td>Indexes of the start cell.</td><td>4 / 7</td></tr><tr><td><pre><code>case_per_second
</code></pre></td><td>Integer</td><td>Base speed.</td><td>1.25</td></tr><tr><td><pre><code>max_case_per_second
</code></pre></td><td>Integer</td><td>Max speed.</td><td>5</td></tr><tr><td><pre><code>acceleration_percent
</code></pre></td><td>Integer</td><td>Acceleration <em>(between 0 and 100)</em>.</td><td>10</td></tr><tr><td><pre><code>snake > direction
</code></pre></td><td>String</td><td>Starting direction <em>(could be N, S, E, W)</em>.</td><td>"N"</td></tr><tr><td><pre><code>score
</code></pre></td><td>String</td><td>Text in the header.</td><td>"Score"</td></tr><tr><td><pre><code>unit
</code></pre></td><td>String</td><td>Text in the header.</td><td>"Apple(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>direction > url
</code></pre></td><td>200 x 200px</td><td>Arrows (helper) to be displayed on touch screens.</td><td><a href="https://statics.lucky-cycle.com/files/_games/snake/arrow.png">/arrow.png</a></td></tr><tr><td><pre><code>snake > url
</code></pre></td><td><mark style="color:yellow;">(100*sprite)</mark> x 100px</td><td>Visual of the snake <mark style="color:orange;">(is a sprite of the snake parts!!)</mark>.</td><td><a href="https://statics.lucky-cycle.com/files/_games/snake/snake.png">/snake.png</a></td></tr><tr><td><pre><code>apple > url
</code></pre></td><td>100 x 100px</td><td>Visual of the item to retrieve.</td><td><a href="https://statics.lucky-cycle.com/files/_games/snake/apple.png">/apple.png</a></td></tr><tr><td><pre><code>background > url
</code></pre></td><td>500 x 500px</td><td>Background visual.</td><td><a href="https://statics.lucky-cycle.com/files/_games/snake/background.png">/background.png</a></td></tr><tr><td><pre><code>tuto > mobile / desktop
</code></pre></td><td>500 x 500px</td><td>Tutorial visual (can be animated, or not).</td><td><a href="https://statics.lucky-cycle.com/files/_games/snake/tutorial_desktop.gif">/tutorial_desktop.gif</a> / <a href="https://statics.lucky-cycle.com/files/_games/snake/tutorial_mobile.gif">/tutorial_mobile.gif</a></td></tr></tbody></table>


# 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>


# Tinder

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

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

### Configuration

<details>

<summary>JSON</summary>

```json
{
  "options": {
    "background_color": "transparent",
    "background_image": "",
    "half_shadow": false,
    "display_arrows": true,
    "display_thumbs": true,
    "thumbs_duration": 1500,
    "randomize": false,
    "display_explanation": false,
    "explanation_duration": 15000,
    "questions": {
      "en": [
        {
          "id": 1,
          "q": "Do you like this?",
          "r": "both",
          "left": "I like 👍",
          "right": "I don't like 👎",
          "card_front_url": GAME_URL + "/question1-1.png",
          "card_front_background_color": "white",
          "card_front_right_url": "",
          "card_front_right_background_color": "",
          "question_color": "white",
          "question_background_color": "rgba(14, 52, 16, .25)",
          "button_color": "white",
          "button_background_color": "rgba(14, 52, 16, .75)",
          "explanation": []
        },
        {
          "id": 2,
          "q": "Which do you prefer?",
          "r": "right",
          "left": "💕💕",
          "right": "🤫🐑",
          "card_front_url": GAME_URL + "/question2-1.png",
          "card_front_background_color": "white",
          "card_front_right_url": GAME_URL + "/question2-2.png",
          "card_front_right_background_color": "white",
          "question_color": "white",
          "question_background_color": "rgba(173, 85, 14, .75)",
          "button_color": "white",
          "button_background_color": "rgba(173, 85, 14, .25)",
          "explanation": []
        }
      ],
      "fr": [
        {
          "id": 1,
          "q": "Aimez-vous ceci&nbsp;?",
          "r": "both",
          "left": "J'aime 👍",
          "right": "Je n'aime pas 👎",
          "card_front_url": GAME_URL + "/question1-1.png",
          "card_front_background_color": "white",
          "card_front_right_url": "",
          "card_front_right_background_color": "",
          "question_color": "white",
          "question_background_color": "rgba(14, 52, 16, .25)",
          "button_color": "white",
          "button_background_color": "rgba(14, 52, 16, .75)",
          "explanation": []
        },
        {
          "id": 2,
          "q": "Que préférez-vous&nbsp;?",
          "r": "right",
          "left": "💕💕",
          "right": "🤫🐑",
          "card_front_url": GAME_URL + "/question2-1.png",
          "card_front_background_color": "white",
          "card_front_right_url": GAME_URL + "/question2-2.png",
          "card_front_right_background_color": "white",
          "question_color": "white",
          "question_background_color": "rgba(173, 85, 14, .75)",
          "button_color": "white",
          "button_background_color": "rgba(173, 85, 14, .25)",
          "explanation": []
        }
      ],
      "nl": [
        {
          "id": 1,
          "q": "Vind je dit leuk?",
          "r": "both",
          "left": "Ja 👍",
          "right": "Nee 👎",
          "card_front_url": GAME_URL + "/question1-1.png",
          "card_front_background_color": "white",
          "card_front_right_url": "",
          "card_front_right_background_color": "",
          "question_color": "white",
          "question_background_color": "rgba(14, 52, 16, .25)",
          "button_color": "white",
          "button_background_color": "rgba(14, 52, 16, .75)",
          "explanation": []
        },
        {
          "id": 2,
          "q": "Wat heb je liever?",
          "r": "right",
          "left": "💕💕",
          "right": "🤫🐑",
          "card_front_url": GAME_URL + "/question2-1.png",
          "card_front_background_color": "white",
          "card_front_right_url": GAME_URL + "/question2-2.png",
          "card_front_right_background_color": "white",
          "question_color": "white",
          "question_background_color": "rgba(173, 85, 14, .75)",
          "button_color": "white",
          "button_background_color": "rgba(173, 85, 14, .25)",
          "explanation": []
        }
      ]
    }
  },
  "texts": {
    "en": {
      "good": "Correct!",
      "bad": "Nope!"
    },
    "fr": {
      "good": "Correct&nbsp;!",
      "bad": "Non&nbsp;!"
    },
    "nl": {
      "good": "Correct!",
      "bad": "Fout!"
    }
  },
  "images": {
    "arrow_left": GAME_URL + "/arrow_left.png",
    "arrow_right": GAME_URL + "/arrow_right.png",
    "thumbs_up": GAME_URL + "/good.png",
    "thumbs_down": GAME_URL + "/bad.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>background_color
</code></pre></td><td>String</td><td>Background color of the game.</td><td>"transparent"</td></tr><tr><td><pre><code>background_image
</code></pre></td><td>String</td><td>Background image of the game <em>(will be on top of the bg_color)</em>.</td><td>""</td></tr><tr><td><pre><code>half_shadow
</code></pre></td><td>Boolean</td><td>Display a shadow overlay on the right half of the card.</td><td>false</td></tr><tr><td><pre><code>display_arrows
</code></pre></td><td>Boolean</td><td>Display the arrows icons on the answers area.</td><td>true</td></tr><tr><td><pre><code>display_thumbs
</code></pre></td><td>Boolean</td><td>Display the thumbs visuals (after a submission).</td><td>true</td></tr><tr><td><pre><code>thumbs_duration
</code></pre></td><td>Integer</td><td>Duration of the thumbs' animation (in milliseconds). <em>Only used if "display_thumbs" is set to <mark style="color:yellow;">true</mark>.</em></td><td>1500</td></tr><tr><td><p></p><pre><code>randomize
</code></pre></td><td>Boolean</td><td>Randomize the order of questions.</td><td>false</td></tr><tr><td><p></p><pre><code>display_explanation
</code></pre></td><td>Boolean</td><td>Display an explanation of the answer (if not empty).</td><td>false</td></tr><tr><td><p></p><pre><code>explanation_duration
</code></pre></td><td>Int</td><td>Delay before the explanation is over and the game switches to the next question (if <em>display_explanation</em> set to true, an explanation isn't empty).</td><td>15000</td></tr><tr><td><pre><code>questions > id
</code></pre></td><td>Int</td><td>Id of the question (should be <mark style="color:$danger;">unique</mark>).</td><td>1</td></tr><tr><td><pre><code>questions > q
</code></pre></td><td>String</td><td>Question to be asked to the player.</td><td>"..."</td></tr><tr><td><pre><code>questions > r
</code></pre></td><td>String</td><td>Indicate the good answer (can either be "left", "right" or "both").</td><td>"both"</td></tr><tr><td><pre><code>questions > left
</code></pre></td><td>String</td><td>Left answer (displayed on the clickable zone).</td><td>"..."</td></tr><tr><td><pre><code>questions > right
</code></pre></td><td>String</td><td>Right answer (displayed on the clickable zone).</td><td>"..."</td></tr><tr><td><pre><code>card_front_background_color / _right_background_color
</code></pre></td><td>String</td><td>Background color of the card(s).</td><td>white / ""</td></tr><tr><td><pre><code>question_color / _background_color
</code></pre></td><td>String</td><td>Color / background color of the question.</td><td>white / rgb(...)</td></tr><tr><td><pre><code>button_color / _background_color
</code></pre></td><td>String</td><td>Color / background color of the answers zone.</td><td>white / rgb(...)</td></tr><tr><td><p></p><pre><code>explanation
</code></pre></td><td>String</td><td>Explanation of the answer (only displayed if <em>display_explanation</em> is set to true).</td><td>/</td></tr><tr><td><p></p><pre><code>texts > good / bad
</code></pre></td><td>String</td><td>Title of the explanation screen (if <em>use_explanation</em> set to true).</td><td>"Correct!" / "Nope!"</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>questions > card_front_url / _right_url
</code></pre></td><td>550 x 580px (full card) <mark style="color:red;">or</mark> 275 x 580px (half card).</td><td>Visual(s) of the card. Can either be single, or two halves (vertically).</td><td><a href="https://statics.lucky-cycle.com/files/_games/tinder/question1-1.png">/question1-1.png</a> / <a href="https://statics.lucky-cycle.com/files/_games/tinder/question2-1.png">/question2-1.png</a></td></tr><tr><td><pre><code>arrow_left / arrow_right
</code></pre></td><td>150 x 150px <em>(can have other sizes)</em></td><td>Visuals on the sides of the labels.</td><td><a href="https://statics.lucky-cycle.com/files/_games/tinder/arrow_left.png">/arrow_left.png</a> /<br><a href="https://statics.lucky-cycle.com/files/_games/tinder/arrow_right.png">/arrow_right.png</a></td></tr><tr><td><pre><code>thumbs_up / thumbs_down
</code></pre></td><td>220 x 220px <em>(can have other sizes)</em></td><td>Visuals displayed after submitting an answer.</td><td><a href="https://statics.lucky-cycle.com/files/_games/tinder/good.png">/good.png</a> / <a href="https://statics.lucky-cycle.com/files/_games/tinder/bad.png">/bad.png</a></td></tr></tbody></table>


# Train

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

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

### Configuration

<details>

<summary>JSON</summary>

```json
{
  "options": {
    "aspect_ratio": "1:1",
    "cars": 3,
    "trail": 1,
    "train_size": 400,
    "reveal_size": 800,
    "train_y": 325,
    "box_y": -100,
    "box_padding": 50,
    "box_rotation": 10,
    "halo": "rgba(255, 255, 255, 0.25)",
    "animation_duration": 500,
    "reveal_fps": 120,
    "speed": 1.5,
    "use_reward_image": false
  },
  "texts": {
    "en": {},
    "fr": {},
    "nl": {}
  },
  "images": {
    "background": GAME_URL + "/background.png",
    "head": GAME_URL + "/head.png",
    "cars": [ GAME_URL + "/car.png" ],
    "box": GAME_URL + "/box.png",
    "halo": "",
    "win": GAME_URL + "/win.png",
    "lose": GAME_URL + "/lose.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>aspect_ratio
</code></pre></td><td>String</td><td>Ratio of the game (default is square).</td><td>"1:1"</td></tr><tr><td><pre><code>cars
</code></pre></td><td>Int</td><td>Number of cars in the train (head not included).</td><td>3</td></tr><tr><td><pre><code>trail
</code></pre></td><td>Int</td><td>Number of empty "spaces" before the train loops back.</td><td>1</td></tr><tr><td><pre><code>train_size
</code></pre></td><td>Int</td><td>Size of a car (square, x = y).</td><td>400</td></tr><tr><td><pre><code>reveal_size
</code></pre></td><td>Int</td><td>Final size of the reveal animation (square, x = y). </td><td>800</td></tr><tr><td><pre><code>train_y
</code></pre></td><td>Int</td><td>Vertical positioning of the train (relative to the container).</td><td>325</td></tr><tr><td><pre><code>box_y
</code></pre></td><td>Int</td><td>Vertical positioning of the box (relative to the train car).</td><td>-100</td></tr><tr><td><pre><code>box_padding
</code></pre></td><td>Int</td><td>Space around the box (to make it smaller than the car).</td><td>50</td></tr><tr><td><pre><code>box_rotation
</code></pre></td><td>Int</td><td>Rotation of the box (reversed between cars).</td><td>10</td></tr><tr><td><pre><code>halo
</code></pre></td><td>String</td><td>Background color for the reveal (circle shaped).</td><td>"rgba(255, 255, 255, 0.25)"</td></tr><tr><td><pre><code>animation_duration
</code></pre></td><td>Int</td><td>Duration (in milliseconds) of the reveal animation.</td><td>500</td></tr><tr><td><pre><code>reveal_fps
</code></pre></td><td>Int</td><td>Frames per second for the reveal animation.</td><td>120</td></tr><tr><td><pre><code>speed
</code></pre></td><td>Int</td><td>Speed of the train (horizontal).</td><td>1.5</td></tr><tr><td><pre><code>use_reward_image
</code></pre></td><td>Boolean</td><td>Decides if the animation should use the default <em>win</em> visual for the animation, or a specific one per reward (<em>lose</em> can't be changed).</td><td>false</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>1000 x 1000</td><td>Background of the game.</td><td><a href="https://statics.lucky-cycle.com/files/_games/train/background.png">/background.png</a></td></tr><tr><td><pre><code>head
</code></pre></td><td>500 x 500</td><td>Head of the train.</td><td><a href="https://statics.lucky-cycle.com/files/_games/train/head.png">/head.png</a></td></tr><tr><td><pre><code>cars
</code></pre></td><td>500 x 500</td><td>Car of the train.</td><td><a href="https://statics.lucky-cycle.com/files/_games/train/car.png">/car.png</a></td></tr><tr><td><pre><code>box
</code></pre></td><td>400 x 400</td><td>Box (closed).</td><td><a href="https://statics.lucky-cycle.com/files/_games/train/box.png">/box.png</a></td></tr><tr><td><pre><code>halo
</code></pre></td><td>500 x 500</td><td>Halo (can replace, or used in combination with the <em>halo</em> color option)</td><td>/</td></tr><tr><td><pre><code>win
</code></pre></td><td><mark style="color:yellow;">(500*sprite)</mark> x 500</td><td>Win sprite (each one must be square).</td><td><a href="https://statics.lucky-cycle.com/files/_games/train/win.png">/win.png</a></td></tr><tr><td><pre><code>lose
</code></pre></td><td><mark style="color:yellow;">(500*sprite)</mark> x 500</td><td>Lose sprite (each one must be square).</td><td><a href="https://statics.lucky-cycle.com/files/_games/train/lose.png">/lose.png</a></td></tr></tbody></table>


# Vintage Wheel

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

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

### Configuration

<details>

<summary>JSON</summary>

```json
{
  "options": {
    "visible_hitbox": false,
    "tile_width": 264,
    "tile_height": 202,
    "max_speed": 100,
    "nb_spin": 7,
    "acceleration_percent": 1.5,
    "use_reward_image": false,
    "index_reward_image": 0,
    "index_lose_image": 1
  },
  "texts": {
    "en": {
      "play_button": "Play now"
    },
    "fr": {
      "play_button": "Je joue"
    },
    "nl": {
      "play_button": "Speel nu"
    }
  },
  "images": {
    "base": GAME_URL + "/base.png",
    "needle": GAME_URL + "/needle.png",
    "overlay": GAME_URL + "/overlay.png",
    "side_0": GAME_URL + "/side-0.png",
    "side_1": GAME_URL + "/side-1.png",
    "items": [
      GAME_URL + "/item-1.png",
      GAME_URL + "/item-2.png",
      GAME_URL + "/item-3.png",
      GAME_URL + "/item-4.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>visible_hitbox
</code></pre></td><td>Boolean</td><td><mark style="color:purple;">[DEV]</mark> Display the hitboxes.</td><td>false</td></tr><tr><td><pre><code>tile_width
</code></pre></td><td>Integer</td><td>Width of a tile (images should all have the same size).</td><td>264</td></tr><tr><td><pre><code>tile_height
</code></pre></td><td>Integer</td><td>Height of a tile (images should all have the same size).</td><td>202</td></tr><tr><td><pre><code>max_speed
</code></pre></td><td>Integer</td><td>Maximum speed of the reel.</td><td>100</td></tr><tr><td><pre><code>nb_spin
</code></pre></td><td>Integer</td><td>Number of spins before the machine stops on a tile. </td><td>7</td></tr><tr><td><pre><code>acceleration_percent
</code></pre></td><td>Float</td><td>Acceleration speed.</td><td>1.5</td></tr><tr><td><pre><code>use_reward_image
</code></pre></td><td>Boolean</td><td>Adds the reward tile to the list <mark style="color:orange;">(only the <strong>won</strong> reward!!)</mark>.</td><td>false</td></tr><tr><td><pre><code>index_reward_image
</code></pre></td><td>Integer</td><td>Index of the winning tile (will stop on it if <mark style="color:blue;">won</mark>).</td><td>0</td></tr><tr><td><pre><code>index_lose_image
</code></pre></td><td>Integer</td><td>Index of the losing tile (will stop on it if <mark style="color:blue;">lost</mark>).</td><td>1</td></tr><tr><td><pre><code>play_button
</code></pre></td><td>String</td><td>Text for the button that is displayed at the start of the game.</td><td>"Play now" / "Je joue" / "Speel nu"</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>base
</code></pre></td><td>92 x 120px</td><td>Cursor's base.</td><td><a href="https://statics.lucky-cycle.com/files/_games/vintage-wheel/base.png">/base.png</a></td></tr><tr><td><pre><code>needle
</code></pre></td><td>49 x 24px</td><td>Cursor's needle.</td><td><a href="https://statics.lucky-cycle.com/files/_games/vintage-wheel/needle.png">/needle.png</a></td></tr><tr><td><pre><code>overlay
</code></pre></td><td>468 x 380px</td><td>Overlay (of the reel, <strong>will be deformed!</strong>).</td><td><a href="https://statics.lucky-cycle.com/files/_games/vintage-wheel/overlay.png">/overlay.png</a></td></tr><tr><td><pre><code>side_0 / _1
</code></pre></td><td>45 x 380px</td><td>Sides of the machine <em><mark style="color:yellow;">(both images will be displayed on one side, switching every second, and mirrored on the other side)</mark></em>.</td><td><a href="https://statics.lucky-cycle.com/files/_games/vintage-wheel/side-0.png">/side-0.png</a> / <a href="https://statics.lucky-cycle.com/files/_games/vintage-wheel/side-1.png">/side-1.png</a></td></tr><tr><td><pre><code>items
</code></pre></td><td>264 x 202px <em>(each)</em></td><td>Items that will be displayed in the reel. <em>If less than 10 items in the array, some will be duplicated.</em></td><td><a href="https://statics.lucky-cycle.com/files/_games/vintage-wheel/item-1.png">/item-1.png</a></td></tr></tbody></table>


# Wheel

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

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

### Configuration

<details>

<summary>JSON</summary>

```json
{
    "options": {
      "idle_spin": true,
      "play_poke": true,
      "initial_rotation": 116,
      "spin_time": 5,
      "nb_slices": 5,
      "index_image_win": 0,
      "index_image_lose": 2,
      "use_rewards": false,
      "rewards": {},
      "accessibility": false
    },
    "texts": {
      "en": {
        "start": "Play now"
      },
      "fr": {
        "start": "Je joue"
      },
      "nl": {
        "start": "Speel nu"
      }
    },
    "images": {
      "en" : {
        "pin": GAME_URL + "/pin.png",
        "wheel": GAME_URL + "/wheel.png"
      },
      "fr" : {
        "pin": GAME_URL + "/pin.png",
        "wheel": GAME_URL + "/wheel.png"
      },
      "nl" : {
        "pin": GAME_URL + "/pin.png",
        "wheel": GAME_URL + "/wheel.png"
      }
    }
}
```

</details>

### Options

<table><thead><tr><th>Key</th><th>Type</th><th>Explanation</th><th>Default</th></tr></thead><tbody><tr><td><pre><code>idle_spin
</code></pre></td><td>Boolean</td><td>Make the wheel spin before click.</td><td>true</td></tr><tr><td><pre><code>play_poke
</code></pre></td><td>Boolean</td><td><mark style="color:red;">[Wheelio]</mark> Play the poke or not.</td><td>true</td></tr><tr><td><p></p><pre><code>initial_rotation
</code></pre></td><td>Int</td><td>Initial rotation of the wheel (in degrees).</td><td>116</td></tr><tr><td><pre><code>spin_time
</code></pre></td><td>Integer</td><td>Time for which the wheel will keep spinning before stopping (in seconds).</td><td>5</td></tr><tr><td><pre><code>nb_slices
</code></pre></td><td>Integer</td><td>Indicate the number of quarters in the wheel (invisible for the customer but needed for calculations).</td><td>5</td></tr><tr><td><pre><code>index_image_win
</code></pre></td><td>Integer</td><td>Select on which slice of the wheel it will stop in case of <em>win</em> <mark style="color:orange;">(and if </mark><em><mark style="color:orange;">use_reward_image</mark></em><mark style="color:orange;"> is set to </mark><em><mark style="color:orange;">false</mark></em><mark style="color:orange;">)</mark>.</td><td>0</td></tr><tr><td><pre><code>index_image_lose
</code></pre></td><td>Integer</td><td>Select on which slice of the wheel it will stop in case of <em>lose</em>.</td><td>2</td></tr><tr><td><pre><code>use_rewards
</code></pre></td><td>Boolean</td><td>Indicate if the wheel should have a specific number of slices (see <em>nb_slices</em>) or if rewards should determine it.</td><td>false</td></tr><tr><td><p></p><pre><code>rewards
</code></pre></td><td>Object</td><td>If <em>use_rewards</em> is set to true, should map the rewards and positions.</td><td>{}</td></tr><tr><td><p></p><pre><code>accessibility
</code></pre></td><td>Boolean</td><td>Switches the game to a <em><mark style="color:$warning;"><strong>reduced motion</strong></mark></em> version.</td><td>false</td></tr><tr><td><pre><code>start
</code></pre></td><td>Text</td><td>Text for the button that is displayed at the start of the game.</td><td>"Play now" / "Je joue" / "Speel nu"</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>pin
</code></pre></td><td>120 x 120px</td><td>Let the customer know on which quarter the wheel stopped.</td><td><a href="https://statics.lucky-cycle.com/files/_games/wheel/pin.png">/pin.png</a></td></tr><tr><td><pre><code>wheel
</code></pre></td><td>550 x 550px</td><td>Visual of the wheel.</td><td><a href="https://statics.lucky-cycle.com/files/_games/wheel/wheel.png">/wheel.png</a></td></tr></tbody></table>


# \_template\_to\_duplicate\_

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

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

### Configuration

<details>

<summary>JSON</summary>

```json
{}
```

</details>

### Options

| Key | Type | Explanation | Default |
| --- | ---- | ----------- | ------- |
|     |      |             |         |

### Assets

| Key | Size    | Explanation | Default                                                          |
| --- | ------- | ----------- | ---------------------------------------------------------------- |
|     | X x Ypx |             | [/img.png](https://statics.lucky-cycle.com/files/_games/img.png) |


# Campagnes

## Sections

1. [Introduction](#introduction)
2. [Templates](#templates)

***

## Introduction

La plateforme *Campaigns* est le fruit d'une longue réflexion, alimentée par notre expérience et expertise dans la création d'opérations web simples et dynamiques.

Conçue pour répondre aux besoins de votre entreprise, elle se base sur 3 axes (<mark style="color:blue;">qualité</mark>, <mark style="color:orange;">sécurité</mark> et <mark style="color:purple;">flexibilité</mark>) et apporte de nombreuses nouvelles fonctionnalités :

1. <mark style="color:blue;">**Responsive "by design"**</mark>**&#x20;:** Nos campagnes sont conçues pour s'adapter automatiquement à tous les types d'appareils et tailles d'écrans, offrant ainsi une <mark style="color:blue;">expérience fluide</mark> et intuitive à vos utilisateurs, et ce, qu'ils utilisent un smartphone, une tablette ou un ordinateur.
2. <mark style="color:blue;">**Des templates qui évoluent**</mark>**&#x20;:** Nos templates graphiques standard sont maintenues et évoluent dans le temps, que ce soit par des <mark style="color:blue;">correctifs</mark> ou des <mark style="color:blue;">ajouts/améliorations</mark> dont toutes les prochaines opérations bénéficient automatiquement. Nous ajoutons également de nouvelles templates, comme un flux *"chatbot"* optimisé pour la collecte de données, prévu pour l'hiver 2023.
3. <mark style="color:blue;">**Une expérience multi-langues, multi-pays**</mark>**&#x20;:** Avec ou sans bouton pour permettre à l'utilisateur de les modifier, nos campagnes peuvent être <mark style="color:blue;">déclinées en plusieurs langues et/ou pays</mark> avec, pour chacun, son propre règlement, mentions légales, etc. !&#x20;
4. <mark style="color:blue;">**Un large panel de données récoltables**</mark>**&#x20;:** Le formulaire inclut dans nos campagnes permet de récolter de nombreuses données auprès de vos clients facilement : <mark style="color:blue;">civilité, nom/prénom, email, téléphone/GSM, adresse, opt-ins, etc.</mark> Tous les champs peuvent en outre être rendus obligatoires ou non, et les labels et sous-labels personnalisés en fonction de vos envies.\
   \ <mark style="color:green;">Remarque :</mark> Pour la **France** et sans coût additionnel (mais sur demande), nous proposons l'intégration *HexaVia/HexaPoste* afin de suggérer villes et voies sur base du code postal entré par le client. Pour le reste du monde, nous utilisons *Google Address*, avec les mêmes fonctionnalités.
5. <mark style="color:blue;">**Des exports standardisés**</mark>**&#x20;:** Les données récoltées sont automatiquement nettoyées par notre système et <mark style="color:blue;">exportables au format CSV</mark> (ou envoyées en temps réel via API - sous réserve de développement en ce sens, n'hésitez pas à contacter notre équipe si vous êtes intéressés par cette option).
6. <mark style="color:blue;">**Intégration avec**</mark><mark style="color:blue;">**&#x20;**</mark>*<mark style="color:blue;">**Google Tag Manager**</mark>*<mark style="color:blue;">**,**</mark><mark style="color:blue;">**&#x20;**</mark>*<mark style="color:blue;">**Google Analytics**</mark>*<mark style="color:blue;">**&#x20;**</mark><mark style="color:blue;">**et**</mark><mark style="color:blue;">**&#x20;**</mark>*<mark style="color:blue;">**Cookie First**</mark>***&#x20;:** Nos campagnes permettent d'ajouter sans surcoût vos clés GTM, GA et CF et d'ainsi <mark style="color:blue;">suivre les performances</mark>, <mark style="color:blue;">traquer le comportement de vos clients</mark> ou de <mark style="color:blue;">gérer leur acceptation des cookies</mark> notamment. D'autres scripts spécifiques sont intégrables sur devis.
7. <mark style="color:orange;">**Des performances supérieures**</mark>**&#x20;:** Notre plateforme, hostée sur *Microsoft Azure*, est dotée d'une <mark style="color:orange;">infrastructure robuste</mark> et redondante, garantissant des performances supérieures et une disponibilité maximale. De plus, le serveur peut ajuster ses ressources en fonction de la demande, lui permettant d'automatiquement <mark style="color:orange;">supporter des pics de trafic</mark> ou de charge.
8. *<mark style="color:orange;">**reCaptcha**</mark>*<mark style="color:orange;">**, partout, tout le temps**</mark>**&#x20;:** Nos campagnes sont protégées contre les attaques automatisées grâce à *reCaptcha*. Ce système de vérification, proposé par *Google*, renforce la sécurité de tous nos formulaires en <mark style="color:orange;">détectant et bloquant les activités malveillantes</mark>.
9. <mark style="color:purple;">**Mode "sandbox"**</mark>**&#x20;:** Une fois configurée par notre équipe, une <mark style="color:purple;">opération</mark> est <mark style="color:purple;">prévisualisable</mark> via l'ajout d'un paramètre dans son URL, en conditions réelles, avant son lancement ! Une seule contrainte : les éventuels bons de réduction que vous souhaitez distribuer ne seront pas activés, et vous en recevrez un autre généré à la place, afin d'éviter toute fuite.
10. <mark style="color:purple;">**Domaine - Chez nous ou chez vous**</mark>**&#x20;:** Par défaut, une campagne est proposée avec un URL de type *lucky-cycle.com/ma-super-campagne*. Vous pouvez alors <mark style="color:purple;">envoyer vos clients directement sur notre lien</mark> ou l'intégrer <mark style="color:purple;">sur une page de votre site en tant qu'</mark>*<mark style="color:purple;">iframe</mark>*.\
    \ <mark style="color:green;">Remarque :</mark> Il est également possible de faire pointer nos opérations sur un <mark style="color:purple;">domaine que vous possédez</mark> (via une simple entrée DNS) et nous nous chargeons de alors de préparer ma-super-campagne.com et de lui générer un certificat SSL (*Let's Encrypt*, gratuit - certificat personnalisé en option).
11. <mark style="color:purple;">**Maintenance**</mark>**&#x20;:** Toute campagne peut, sur demande, être <mark style="color:purple;">mise en pause</mark> pendant que des ajustements sont apportés au paramétrage. Lorsque passée en mode maintenance, une opération est toujours accessible, mais un message préviendra vos clients de revenir plus tard pour jouer. Une fois les modifications effectuées, la campagne pourra reprendre comme si de rien n'était !

Tout en gardant ce qui faisait déjà notre force :

1. <mark style="color:blue;">**De multiples algorithmes**</mark>**&#x20;:** IGs (instants gagnants), probabilités, règles complexes. Notre système de gestion des dotations est parmi les plus performants du marché tout en étant <mark style="color:blue;">extrêmement personnalisable</mark>. Pas de panique toutefois, nous sommes là pour vous accompagner et vous recommander <mark style="color:blue;">la bonne configuration sur base de vos objectifs</mark>.
2. <mark style="color:blue;">**Un large catalogue d'animation**</mark>**&#x20;:** Nos templates embarquent toutes nos <mark style="color:blue;">jeux</mark>, existants et futurs, avec pour chacun diverses <mark style="color:blue;">options de configurations et d'habillage</mark>. *Roue de la fortune*, *bandit-manchot* et *carte à gratter* ne sont que quelques exemples d'animations pouvant être intégrée à votre campagne *(catalogue complet disponible* [*ici*](/games/index)*)*.
3. <mark style="color:blue;">**Et après ?**</mark>**&#x20;:** La participation d'un client ne s'arrête pas une fois qu'il a atteint la dernière page de l'opération. En effet, il est possible d'envoyer un <mark style="color:blue;">email</mark> de gain (avec ou sans coupon), de confirmation d'inscription au TAS (tirage au sort), aux gagnants, aux perdants... Notre template d'emailing est <mark style="color:blue;">personnalisable</mark> (image du header, textes, liens, code unique, CTA, etc.) et conçue pour fonctionner sur tous les appareils et fournisseurs de mails.\
   \ <mark style="color:green;">Remarque :</mark> Nous proposons également d'<mark style="color:blue;">autres intégrations (SMS et APIs notamment)</mark>, et nous nous ferons un plaisir de discuter avec vous de vos besoins et de vous transmettre le devis pour le produit adapté.
4. <mark style="color:purple;">**Un support de qualité**</mark>**&#x20;:** Notre équipe de support est à votre disposition pour vous accompagner dans la mise en place et la gestion de votre campagne. Que ce soit pour résoudre des problèmes, obtenir des conseils d'optimisation ou pour toute autre question technique ou commerciale, notre équipe compétente est là pour vous offrir une <mark style="color:purple;">assistance personnalisée et réactive</mark>.
5. <mark style="color:purple;">**Des possibilités de customisation**</mark>**&#x20;:** Nos templates viennent avec une <mark style="color:purple;">multitude d'options</mark> prévues. Toutefois, si vous avez des <mark style="color:purple;">demandes particulières</mark>, n'hésitez pas à nous en faire part et nous vous ferons un <mark style="color:purple;">devis personnalisé</mark> *(le surcoût sera directement relatif à la charge de développement nécessaire)*. Le must: si la fonctionnalité a pour vocation d'être utilisée de nombreuses fois, elle pourra être directement intégrée à la template pour activation future !
6. <mark style="color:purple;">**Du sur-mesure**</mark>**&#x20;:** Si vous souhaitez un <mark style="color:purple;">flux totalement différent</mark> de ceux proposés en standard, ou des <mark style="color:purple;">intégrations spécifiques</mark>, ou encore que la campagne ne soit <mark style="color:purple;">affichée sur votre site que dans certaines conditions</mark> *(utilisation d'un tag JavaScript),* nous serons ravis de voir avec vous comment réaliser la campagne qui vous convient et de vous transmettre un <mark style="color:purple;">devis dédié</mark>.

***

## Templates

Les onglets suivants présentent et détaillent les différentes possibilités de nos templates.

*Si vous avez une question ou un doute sur une option ou fonctionnalité, n'hésitez surtout pas à contacter notre équipe !*

{% content-ref url="/pages/vfoOFCv6CtWdXmngcXXb" %}
[Template Standard](/campaigns/index/template-standard)
{% endcontent-ref %}


# Template Standard

{% hint style="info" %}
Démo technique : <https://campaigns.lucky-cycle.com/template>
{% endhint %}

## Sections

1. [Ecrans](#ecrans)
2. [Squelette](#squelette)
3. [Personnalisation](#personnalisation-contenu) (contenu)
4. [Personnalisation](#personnalisation-habillage) (habillage)

***

## Ecrans

La template vient avec les écrans de parcours suivants :

1. [Bienvenue](#bienvenue)
2. [Formulaire](#formulaire)
3. [Preuve d'achat](#preuve-dachat)
4. [Animation / Jeu](#animation-jeu)
5. [Remerciements](#remerciements)

Et quatre écrans spéciaux :

* [Trop tôt](#trop-tot)
* [En pause](#en-pause)
* [Trop tard](#trop-tard)
* [Inéligible](#ineligible)

{% hint style="warning" %}
A noter que tous les écrans de parcours sont techniquement <mark style="color:orange;">optionnels</mark>, mais qu'une campagne nécessite un minimum d'écrans pour être viable.
{% endhint %}

***

### Bienvenue

* [x] **Slug :** /
* [x] **Accès :** Ouvert (si opération en cours, pages [*trop tôt*](#trop-tot) ou [*trop tard*](#trop-tard) sinon)
* [x] **Objectif :** Présenter l'opération et ses dotations

<figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2FXYiw0JbUqErAZmbKxvku%2Fbienvenue.png?alt=media&amp;token=3fd93454-8ceb-4678-b9ec-3c931cdd7c22" alt=""><figcaption><p>Bienvenue</p></figcaption></figure>

***

### Formulaire

* [x] **Slug :** /inscription
* [x] **Accès :** Ouvert (si opération en cours, pages [*trop tôt*](#trop-tot) ou [*trop tard*](#trop-tard) sinon)
* [x] **Objectif :** Récolte de données-client

<figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2FYnTYyO0NqSa9TYkKQCbU%2Fformulaire.png?alt=media&amp;token=86b766bf-0893-4deb-8e52-4e478eb89f60" alt=""><figcaption><p>Formulaire</p></figcaption></figure>

***

### Preuve d'achat

* [x] **Slug :** /preuve
* [x] **Accès :** Restreint, nécessite la complétion du [*formulaire*](#formulaire)
* [x] **Objectif :** Vérification de l'éligibilité d'un client

<figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2FsHwzcSfJncxg0pzu32kL%2Fpreuve.png?alt=media&amp;token=d4664869-b97c-4d41-9cb6-4f945d9fadd2" alt=""><figcaption><p>Preuve d'achat</p></figcaption></figure>

***

### Animation / Jeu

* [x] **Slug :** /jeu
* [x] **Accès :** Restreint, nécessite la complétion du [*formulaire*](#formulaire) (et soumission de la [*preuve d'achat*](#preuve-dachat) si applicable)
* [x] **Objectif :** Récompense, dévoilement de la dotation du client (si applicable)

<figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2FmwE7JmrelMZm4S04sUfv%2Fjeu.png?alt=media&amp;token=5fcf405a-b665-405e-ad4b-ae302e0d0d93" alt=""><figcaption><p>Animation / Jeu</p></figcaption></figure>

***

### Remerciements

* [x] **Slug :** /merci
* [x] **Accès :** Restreint, nécessite la complétion du [*formulaire*](#formulaire) (et soumission de la [*preuve d'achat*](#preuve-dachat) si applicable)
* [x] **Objectif :** Distribution du coupon (si applicable), options de redirection et/ou de partage social

<figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2FCI7tu8HrSUhtECrHEAU6%2Fmerci.png?alt=media&amp;token=464d5e57-a931-4b8a-beec-6e7bd7f7d8ee" alt=""><figcaption><p>Remerciements</p></figcaption></figure>

***

### Trop tôt

* [x] **Slug :** /tot
* [x] **Accès :** Ouvert (défaut si tentative d'accès à l'opération avant son lancement)
* [x] **Objectif :** Prévenir le client qu'il pourra revenir participer ultérieurement

<figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2FtJE2jb7qZxM7IaW0ziff%2Ftot.png?alt=media&amp;token=b6cba604-8a33-44c9-b902-a47f9299da83" alt=""><figcaption><p>Trop tôt</p></figcaption></figure>

***

### En pause

* [x] **Slug :** /pause
* [x] **Accès :** Ouvert (défaut si tentative d'accès à l'opération alors qu'elle est en maintenance)
* [x] **Objectif :** Prévenir le client que la campagne est en pause, mais qu'il pourra participer dans quelques minutes

<figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2FH8r4VVdIfomf4vHbUFsN%2Fpause.png?alt=media&amp;token=4b527b79-709f-4cd1-a7af-0f9a72f2443a" alt=""><figcaption><p>En pause</p></figcaption></figure>

***

### Trop tard

* [x] **Slug :** /tard
* [x] **Accès :** Ouvert (défaut si tentative d'accès à l'opération après qu'elle soit terminée)
* [x] **Objectif :** Prévenir le client que la campagne est clôturée

<figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2FYtbHE4nhRv6nnRSAxHt2%2Ftard.png?alt=media&amp;token=9c5d77c2-e3c8-4465-8cc0-4fc1ee0e1275" alt=""><figcaption><p>Trop tard</p></figcaption></figure>

***

### Inéligible

* [x] **Slug :** /ineligible
* [x] **Accès :** Ouvert (défaut si participation invalide en fonction de règles)
* [x] **Objectif :** Rediriger le client qui n'est pas éligible vers le règlement de la campagne

<figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2FFDzfc3gy8FcYxWwaLGMQ%2Fineligible.png?alt=media&amp;token=1e7f7737-61b0-462d-835d-f03732a8cb21" alt=""><figcaption><p>Inéligible</p></figcaption></figure>

***

## Squelette

La template est construite sur base d'un seul et unique squelette HTML / CSS, se déclinant comme suit :

* [Structure](#structure)
* [Rendu](#rendu)

***

### Structure

Chaque écran est séparé en trois composants avec, dans l'ordre :

1. Header *(commun à tous les écrans)*
2. Contenu *(variable)*
3. Footer *(commun à tous les écrans)*

{% tabs %}
{% tab title="Header" %}

* Comprend le logo du client et/ou de la campagne, ainsi que les dates de cette dernière.
* Est affiché au dessus du *contenu* en mode une seule colonne, mais à gauche sur *desktop* en mode deux colonnes (voir dans [Rendu](#rendu)).
* Peut être masqué.
  {% endtab %}

{% tab title="Contenu" %}

* Consiste en le contenu de l'écran courant, le contenu peut être un formulaire, une boîte de jeu, du texte, etc.
* Est-affiché en dessous du *header* et au dessus du *footer*.
* Centré en mode une seule colonne, mais à droite sur desktop en mode deux colonnes (voir dans [Rendu](#rendu)).
  {% endtab %}

{% tab title="Footer" %}

* Comprend les liens légaux de la campagne (règlement, mentions légales, politique de confidentialité, cookies, etc.).
* Est toujours affiché en bas de page, en dessous du *header* et *contenu*.
* Peut *techniquement* être masqué.
  {% endtab %}
  {% endtabs %}

<div data-full-width="false"><figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2FXGmpIQNatFLCnR3WCgDY%2Fstructure.png?alt=media&amp;token=8a4a44ff-cb5e-4734-b27b-4fff7d6ecb86" alt=""><figcaption><p>Structure (Header -> Contenu -> Footer)</p></figcaption></figure></div>

***

### Rendu

Si la structure des écrans est absolue, ces derniers peuvent être affichés de trois façons différentes :

1. [Une seule colonne](#une-seule-colonne) *(défaut)*
2. [Deux colonnes](#deux-colonnes) *(classique)*
3. [Deux colonnes](#deux-colonnes) *(inversé)*

{% hint style="warning" %}
A noter que le choix une colonne / deux colonnes est <mark style="color:orange;">global</mark> à l'opération, et n'est pas précisable par écran.
{% endhint %}

***

#### Une seule colonne

Mode par défaut, <mark style="color:green;">centre le contenu avec une largeur maximale de 900px</mark>.

En d'autres termes, sur grand écrans, le contenu sera accompagné de marges (identiques) à gauche et à droite, tandis que sur mobile, le contenu fera toute la largeur de l'écran.

<figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2FwD9z8v02etUCPnYkfAvL%2Fone.png?alt=media&amp;token=0fa22e94-23f8-448a-9dec-22c0c1633af6" alt=""><figcaption><p>Mode une seule colonne (desktop / mobile)</p></figcaption></figure>

***

#### Deux colonnes

Cette variante d'affichage permet de <mark style="color:green;">scinder les écrans en deux colonnes de tailles égales</mark> (à l'exception du *footer*), permettant d'avoir un visuel d'un côté, et le contenu de l'autre.

{% hint style="warning" %}
A noter que le header est par défaut déplacé dans la colonne vide (peut être masqué) et que, <mark style="color:orange;">sur mobile, les colonnes sont affichées les unes en dessous des autres</mark>.
{% endhint %}

<figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2F6dvgwKLkkOezcHZWaUEv%2Ftwo1.png?alt=media&amp;token=115d8ba6-03eb-4de8-bda7-ba31837a3bbb" alt=""><figcaption><p>Mode deux colonnes (classique)</p></figcaption></figure>

Il est également possible d'<mark style="color:green;">inverser les colonnes</mark> (sur *desktop* uniquement) si souhaité.

<figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2FVwWQN1UBxCB7f7sPftgX%2Ftwo2.png?alt=media&amp;token=765b3500-84ba-4576-a47d-06b4441ff394" alt=""><figcaption><p>Mode deux colonnes (inversé)</p></figcaption></figure>

***

## Personnalisation (contenu)

La template peut être personnalisée, aussi bien en terme de visuels que de contenu. Ci-dessous se trouve la liste (non exhaustive, mais extensive) des options actuellement disponibles :

* [Contenu générique](#contenu-generique)
* [Contenu spécifique](#contenu-specifique)

***

### Contenu générique

Le contenu textuel est intégralement personnalisable et, même s'il peut varier en fonction des spécificités de certains écrans, tous respectent à minima la template suivante :

```json
{
  "title": "",     // Texte enrichi
  "subtitle": "",  // Texte enrichi
  "content": [],   // Texte(s) enrichi(s) et/ou image(s)
  "cta": "",       // Texte enrichi
  "mentions": []   // Texte(s) enrichi(s)
}
```

Pour référence, voici les configurations *(simplifiées)* par défaut de la template :

<details>

<summary>Bienvenue</summary>

```json
{
  "title": "Votre texte de présentation",
  "subtitle": "avec des infos complémentaires",
  "content": [
    {
      "src": "/statics/demo/LC_welcome_fr.png",
      "alt": "Lots à gagner"
    }
  ],
  "cta": "Je&nbsp;joue",
  "mentions": []
}
```

</details>

<details>

<summary>Formulaire</summary>

```json
{
  "title": "Inscription",
  "subtitle": "",
  "content": [
    {
      "text": "Pour participer au jeu, saisissez vos informations personnelles."
    },
    {
      "text": "Tous les champs marqués d'un * sont nécessaires et obligatoires pour valider votre participation."
    },
    {
      "text": "La saisie d'informations erronées ou un remplissage incomplet du formulaire entraînera une annulation de votre participation."
    }
  ],
  "cta": "Je&nbsp;valide",
  "mentions": [
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit [...]"
  ]
}
```

</details>

<details>

<summary>Preuve d'achat</summary>

```json
{
  "title": "Je télécharge ma preuve d'achat",
  "subtitle": "",
  "content": [
    {
      "text": "Téléchargez la photocopie de votre facture ou du ticket de caisse dans son intégralité, en entourant impérativement au préalable&nbsp;: la date d'achat, le libellé et le prix des produits achetés porteurs de l'offre."
    },
    {
      "text": "Téléchargez la photocopie ou la photographie du code-barres de votre produit en vous assurant que les chiffres soient bien lisibles."
    },
    {
      "text": "(Seuls les formats jpeg, png, gif ou pdf sont acceptés. La taille du document ne doit pas dépasser 2Mo.)"
    }
  ],
  "cta": "Je&nbsp;valide",
  "mentions": []
}
```

</details>

<details>

<summary>Animation / Jeu</summary>

```json
{
  "title": "Grattez la carte pour découvrir si vous avez gagné&nbsp;!",
  "subtitle": "",
  "content": [],
  "mentions": [
    "Notre catalogue de jeux est disponible <a href=\"/game-demo/\" target=\"_blank\">ici</a>."
  ]
}
```

</details>

<details>

<summary>Remerciements</summary>

```json
{
  "title": "Merci de votre participation&nbsp;!",
  "subtitle": "",
  "content": [],
  "mentions": []
}
```

</details>

<details>

<summary>Trop tôt</summary>

<pre class="language-json"><code class="lang-json">{
  "title": "Un peu de patience, le jeu n'a pas encore débuté.",
  "subtitle": "Revenez le XX/XX pour participer&#x26;nbsp;!",
<strong>  "content": [],
</strong>  "mentions": []
}
</code></pre>

</details>

<details>

<summary>En pause</summary>

```json
{
  "title": "Le jeu est actuellement en maintenance.",
  "subtitle": "Revenez dans quelques minutes pour participer&nbsp;!",
  "content": [],
  "mentions": []
}
```

</details>

<details>

<summary>Trop tard</summary>

```json
{
  "title": "C'est fini pour cette fois.",
  "subtitle": "A bientôt pour d'autres jeux&nbsp;!",
  "content": [],
  "mentions": []
}
```

</details>

<details>

<summary>Inéligible</summary>

```json
{
  "title": "Vous n'êtes malheureusement pas éligible au jeu.",
  "subtitle": "",
  "content": [
    {
      "text": "Consultez le <a class=\"modal-link\" data-modal=\"reglement\" href=\"https://box.lucky-cycle.com/tc/247ebdf960616e8b70fc97caf637a068/fr\" target=\"_blank\">règlement</a> du jeu pour plus d'informations."
    }
  ],
  "mentions": []
}
```

</details>

***

### Contenu spécifique

En complément des contenus "génériques", certains écrans viennent avec des options spécifiques, listées ci-dessous (et toujours regroupées par écran) :

#### Formulaire

Choix parmi les champs suivants <mark style="color:red;">(maximum 1 utilisation par champ)</mark> :

<table><thead><tr><th width="237">Champ (libellé)</th><th width="150">Type</th><th>Spécificités</th></tr></thead><tbody><tr><td>Civilité</td><td>"Radio"</td><td><em>Valeurs possibles : Mme / Mr</em></td></tr><tr><td>Nom</td><td>Texte</td><td></td></tr><tr><td>Prénom</td><td>Texte</td><td></td></tr><tr><td>Email</td><td>Email</td><td></td></tr><tr><td>Téléphone</td><td>"Tel"</td><td></td></tr><tr><td>IBAN</td><td>Texte</td><td></td></tr><tr><td>Date de naissance</td><td>Texte</td><td></td></tr><tr><td><p>Adresse</p><ul><li><em>Code postal</em></li><li><em>Ville</em></li><li><em>Voie</em></li><li><em>Numéro</em></li><li><em>Bâtiment/Résidence</em></li></ul></td><td>Texte</td><td><p>Choix entre :</p><ul><li><em>Hexavia</em></li><li><em>Google Address</em></li><li><em>Standard (champs ouverts)</em></li></ul></td></tr><tr><td>Règlement</td><td>Case à cocher</td><td><strong>Forcément obligatoire</strong></td></tr><tr><td>Opt-in</td><td>Case à cocher</td><td><em>Devrait être optionnel</em><br><em><mark style="color:purple;">Ce champ peut être utilisé jusqu'à 3 fois</mark></em></td></tr></tbody></table>

Chaque champ du tableau ci-dessus vient également avec ces paramètres :

* [x] Obligatoire, ou non
* [x] Libellé personnalisable
* [x] Sous-libellé (optionnel), comme par exemple pour la date de naissance : *(jj/mm/aaaa)*

***

#### Preuve d'achat

Choix parmi les options suivantes <mark style="color:red;">(maximum 1)</mark> :

<table><thead><tr><th>Formulaire (libellés des champs)</th><th width="109.33333333333331">Type</th><th>Spécificités</th></tr></thead><tbody><tr><td><strong>A1:</strong> Facture ou ticket de caisse</td><td>Fichier</td><td><p>Nom du fichier précisable, défaut : </p><ul><li><em>TC_001</em></li></ul></td></tr><tr><td><p><strong>B1:</strong> Facture ou ticket de caisse</p><p><strong>B2:</strong> Code-barres </p></td><td>Fichier<br>Fichier</td><td><p>Nom des fichiers précisables, défaut :</p><ul><li><em>TC_001</em></li><li><em>GC_001</em></li></ul></td></tr><tr><td><strong>C1:</strong> Code de participation</td><td>Texte</td><td>Comparé avec une liste <em><mark style="color:orange;">(.CSV fourni en amont du lancement)</mark></em><br><br>Peut être à <strong>usage unique</strong> (brûlé après utilisation) ou <strong>générique</strong> (un même code est valable plusieurs fois)</td></tr></tbody></table>

{% hint style="warning" %}
Formats acceptés pour les fichiers : **JPG, JPEG, PNG, GIF et PDF**. Le poids d'un fichier ne peut en outre pas dépasser **2Mo**.
{% endhint %}

***Aide (info-bulle)***

Il est également possible d'ajouter une info-bulle permettant de donner au client un exemple de ticket de caisse *(variantes **A** et **B**)* et/ou d'emballage de produit avec code-barres *(variantes **B** et **C**)*.

<figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2FqFGot3oZhKS9aXJgRDGs%2Fhelper.png?alt=media&amp;token=387e7f3e-14db-4355-b48a-52ac020727db" alt=""><figcaption><p>Info-bulle sur l'écran de preuve d'achat</p></figcaption></figure>

***

#### Animation / Jeu

Nous classons les animations en 3 catégories :

<table data-view="cards"><thead><tr><th></th><th></th><th></th></tr></thead><tbody><tr><td><strong>Chance</strong></td><td>Animation servant à dévoiler le résultat <strong>pré-déterminé</strong> du jeu.</td><td></td></tr><tr><td><strong>Adresse</strong></td><td>Jeu à l'issue duquel le participant va se voir attribuer un <strong>score</strong>, score pouvant conditionner le résultat.</td><td></td></tr><tr><td><strong>Réflexion</strong></td><td>Animations à vocation plus éducative, dans lesquelles les <strong>actions</strong> du participant sont enregistrées, et peuvent conditionner le résultat.</td><td></td></tr></tbody></table>

{% hint style="success" %}
La seule différence "technique" entre ces catégories est que le résultat du jeu est calculé **avant le jeu dans le premier cas**, tandis qu'il est déterminé **après dans les deux autres**.\
\
Il est toutefois possible de ne **pas** utiliser le score du joueur dans les algorithmes pour les jeux d'adresse et de réflexion *(ce qui les ramène dans ce cas à des jeux de chance en ce qui concerne l'assignation des dotations)*.
{% endhint %}

Choix de l'animation parmi les options suivantes <mark style="color:red;">(maximum 1)</mark> :

{% tabs %}
{% tab title="Chance" %}

* [Black-Jack](/games/index/black-jack)
* [Brelan](/games/index/brelan)
* [Flip Cards](/games/index/flip-card)
* [Grabber](/games/index/grabber)
* [Pinata](/games/index/pinata)
* [Scratch Card](/games/index/scratch-card)
* [Scratch Nine](/games/index/scratch-nine) *(and -Triple)*
* [Shooter](/games/index/shooter)
* [Short](/games/index/short)
* [Shuffler](/games/index/shuffle)
* [Slot Machine](/games/index/slot-machine)
* [Vintage Wheel](/games/index/vintage-wheel)
* [Wheel](/games/index/wheel)
  {% endtab %}

{% tab title="Adresse" %}

* [Candy Crush](/games/index/candy-crush)
* [Catch'Em All!](/games/index/catch-all)
* [Dino Run](/games/index/dino-run)
* [Endless Runner](/games/index/endless)
* [Hidden Object](/games/index/hidden-object)
* [Paper Toss](/games/index/paper-toss)
* [Penalty](/games/index/penalty)
* [Slicer](/games/index/slicer)
* [Snake](/games/index/snake)
  {% endtab %}

{% tab title="Réflexion" %}

* [Memory](/games/index/memory)
* [Millionaire](/games/index/millionaire)
* [Personality](/games/index/personality)
* [Tinder](/games/index/tinder)
  {% endtab %}
  {% endtabs %}

{% hint style="info" %}
Il est possible de ne **pas** utiliser d'animation dans la template.\
\
Dans ce cas, le client passera directement du [formulaire](#formulaire) (ou de la [preuve d'achat](#preuve-dachat) en fonction du paramétrage) à l'écran de [remerciements](#remerciements).
{% endhint %}

***

#### Remerciements

Le contenu de l'écran de remerciements comprend certains **blocs spécifiques**, et peut être en outre personnalisé en fonction du **résultat** de la participation.

***Blocs spécifiques***

* Partage social *(textes du partage à préciser séparément)*

<table><thead><tr><th width="163">Paramètre</th><th width="119.33333333333331">Type</th><th>Spécificités</th></tr></thead><tbody><tr><td>Titre</td><td>Texte</td><td>Optionnel, affiché au dessus des icônes</td></tr><tr><td>Icônes</td><td>Booléen</td><td><p>Icônes avec pop-up de partage s'ouvrant au clic<br><br>Choix parmi :</p><ul><li><em>Facebook</em></li><li><em>Twitter</em></li><li><em>WhatsApp</em></li></ul></td></tr></tbody></table>

```json
{
  "title": "Partagez le jeu avec vos amis&nbsp;!",
  "facebook": true,
  "twitter": false,
  "whatsapp": false
}
```

* Redirection vers les comptes du client *(incompatible avec le partage social)*

<table><thead><tr><th width="160.33333333333331">Paramètre</th><th width="126">Type</th><th>Spécificités</th></tr></thead><tbody><tr><td>Titre</td><td>Texte</td><td>Optionnel, affiché au dessus des icônes</td></tr><tr><td>Réseaux</td><td>Texte (URL)</td><td><p>Icônes avec ouverture du lien précisé au clic<br><br>Réseaux supportés :</p><ul><li><em>Facebook</em></li><li><em>Instagram</em></li><li><em>Twitter</em></li></ul></td></tr></tbody></table>

```json
{
  "title": "Suivez nos actualités",
  "facebook": "https://www.facebook.com/luckycycle523/?utm_source=lck-demo",
  "instagram": "",
  "twitter": ""
}
```

* CTA avec redirection vers une page au choix

<table><thead><tr><th width="161.33333333333331">Paramètre</th><th width="127">Type</th><th>Spécificités</th></tr></thead><tbody><tr><td>Libellé</td><td>Texte</td><td>Libellé du CTA</td></tr><tr><td>Lien</td><td>Texte (URL)</td><td>Lien ouvert au clic du CTA</td></tr><tr><td>Cible</td><td>Texte</td><td>Comportement au clic : ouverture dans le même onglet (défaut) ou dans un nouvel onglet</td></tr></tbody></table>

```json
{
  "text": "Retour&nbsp;au&nbsp;site",
  "href": "https://www.luckycycle.com?utm_source=lck-demo",
  "target": "_top"
}
```

***Résultat***

Une participation peut avoir 6 statuts sur la template :

* Non jouée (0)
* Gagnée (1)
* Perdue (2)
* ~~Mauvaise réponse (3)~~ *<mark style="color:yellow;">Impossible actuellement</mark>*
* Inéligible (4)
* En erreur (5)

En fonction du statut de la participation, il est possible d'afficher au client un contenu différent sur l'écran de remerciements, aussi bien pour ce qui est du [contenu générique](#contenu-generique), que du [contenu spécifique](#contenu-specifique).

Ainsi, voici, à nouveau pour référence, la configuration *(simplifiée)* par défaut de la template avec, pour chaque statut, sa configuration spécifique :

<details>

<summary>Remerciements</summary>

```json
{
  "0": {
    "title": "Merci de votre participation&nbsp;!",
    "subtitle": "",
    "content": [],
    "share": {
      "title": "",
      "facebook": false,
      "twitter": false,
      "whatsapp": false
    },
    "social": {
      "title": "",
      "facebook": "",
      "instagram": "",
      "twitter": ""
    },
    "cta": {
      "text": "",
      "href": "",
      "target": ""
    },
    "mentions": []
  },
  "1": {
    "title": "Félicitations&nbsp;!",
    "subtitle": "",
    "content": [],
    "share": {
      "title": "",
      "facebook": false,
      "twitter": false,
      "whatsapp": false
    },
    "social": {
      "title": "Suivez nos actualités&nbsp;!",
      "facebook": "https://www.facebook.com/luckycycle523/",
      "instagram": "",
      "twitter": ""
    },
    "cta": {
      "text": "Retour&nbsp;au&nbsp;site",
      "href": "https://www.luckycycle.com?utm_source=lck-demo",
      "target": "_top"
    },
    "mentions": []
  },
  "2": {
    "title": "Dommage",
    "subtitle": "Vous avez perdu…",
    "content": [
      {
        "text": "Merci d'avoir participé&nbsp;!"
      }
    ],
    "share": {
      "title": "",
      "facebook": false,
      "twitter": false,
      "whatsapp": false
    },
    "social": {
      "title": "Suivez nos actualités&nbsp;!",
      "facebook": "https://www.facebook.com/luckycycle523/",
      "instagram": "",
      "twitter": ""
    },
    "cta": {
      "text": "Retour&nbsp;au&nbsp;site",
      "href": "https://www.luckycycle.com?utm_source=lck-demo",
      "target": "_top"
    },
    "mentions": []
  },
  "3": {
    "title": "Malheureusement,",
    "subtitle": "ce n'était pas la bonne réponse.",
    "content": [
      {
        "text": "Merci de votre participation&nbsp;!"
      }
    ],
    "share": {
      "title": "",
      "facebook": false,
      "twitter": false,
      "whatsapp": false
    },
    "social": {
      "title": "",
      "facebook": "",
      "instagram": "",
      "twitter": ""
    },
    "cta": {
      "text": "",
      "href": "",
      "target": ""
    },
    "mentions": []
  },
  "4": {
    "title": "Vous n'êtes malheureusement pas éligible au jeu.",
    "subtitle": "",
    "content": [
      {
        "text": "Consultez le <a class=\"modal-link\" data-modal=\"reglement\" href=\"https://box.lucky-cycle.com/tc/247ebdf960616e8b70fc97caf637a068/fr\" target=\"_blank\">règlement</a> du jeu pour plus d'informations."
      }
    ],
    "share": {
      "title": "",
      "facebook": false,
      "twitter": false,
      "whatsapp": false
    },
    "social": {
      "title": "",
      "facebook": "",
      "instagram": "",
      "twitter": ""
    },
    "cta": {
      "text": "",
      "href": "",
      "target": ""
    },
    "mentions": []
  },
  "5": {
    "title": "Une erreur est survenue,",
    "subtitle": "veuillez réessayer plus tard.",
    "content": [],
    "share": {
      "title": "",
      "facebook": false,
      "twitter": false,
      "whatsapp": false
    },
    "social": {
      "title": "",
      "facebook": "",
      "instagram": "",
      "twitter": ""
    },
    "cta": {
      "text": "",
      "href": "",
      "target": ""
    },
    "mentions": []
  }
}
```

</details>

####

***Cas particulier : Dotation***

En complément du contenu mentionné ci-dessus, il est également possible de personnaliser l'écran de fin pour les gagnants d'une dotation.

En effet, la page de [*remerciements*](#remerciements) est conçue de manière à permettre l'ajout d'un nom, d'une description et d'un visuel pour chaque lot, tout en stylisant leur contenu (via des balises HTML et classes CSS).

Voici un exemple *(simplifié)* pour la dotation gagnante de la démo :

```json
{
  "title": "Vous avez gagné un super prix !",
  "description": "<i>Sous réserve de la validité des <strong>preuves d'achats</strong> soumises.</i>",
  "image": "[...]/LC_prize_fr.png"
}
```

<div data-full-width="false"><figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2FpSKYcvbvgXkFsgF1Zr3b%2Freward.png?alt=media&amp;token=f17f9ec4-e996-4b51-bf1f-30f0979dec38" alt=""><figcaption><p>Contenu dynamique lié à une dotation</p></figcaption></figure></div>

{% hint style="warning" %}
A noter que, s'il est bien possible de passer des balises HTML dans le contenu dynamique des dotations, certaines limitations (de caractères, comme les *`&nbsp;`*&#x6E;otamment, ou de longueur) s'appliquent.
{% endhint %}

***

#### Header

Possibilité de préciser un logo ainsi que les dates de la campagne.

***

#### Footer

Listing des liens légaux avec, pour chacun, les paramètres suivants :

<table><thead><tr><th width="161.33333333333331">Paramètre</th><th width="106">Type</th><th>Spécificités</th></tr></thead><tbody><tr><td>Type</td><td>Sélection</td><td>Choix entre <strong>pop-in</strong> dans la page ou <strong>lien externe</strong> (ouvert dans un nouvel onglet)</td></tr><tr><td>Titre</td><td>Texte</td><td>Message affiché au client</td></tr><tr><td>Lien</td><td>Texte</td><td>Lien du document (si pop-in souhaitée, doit impérativement être un fichier <strong>PDF</strong>)</td></tr></tbody></table>

```json
{
  "type": "modal",
  "title": "Règlement",
  "link": "https://box.lucky-cycle.com/tc/247ebdf960616e8b70fc97caf637a068/fr"
}
```

***

## Personnalisation (habillage)

Indépendamment du contenu, la template peut également être personnalisable graphiquement. A noter que certains paramètres, comme la police choisie ou les couleurs, sont prévus pour être globaux, mais il est toujours possible de préciser une variante sur tel ou tel écran.

* [Habillage générique](#habillage-generique)
* [Habillage spécifique](#habillage-specifique)

***

### Habillage générique

Afin d'éviter de perdre les clients, les éléments suivants sont pensés pour être communs à tous les écrans et ainsi offrir une expérience unifiée tout au long du parcours :

* [Police](#police)
* [Couleurs](#couleurs)
* [Fond](#fond) *(couleur et image)*
* [Boutons](#boutons) *(CTAs)*
* [Langues](#langues) *(toggle)*

***

#### Police

La template accepte toutes les polices possibles *(sous réserve de pouvoir fournir un fichier TTF, OTF, WOFF ou WOFF2)*, toutefois, deux éléments sont à prendre en compte :

1. Les polices [Google Fonts](https://fonts.google.com/) sont à privilégier car
   * [x] Elles sont conçues pour fonctionner sur tous les *devices* et *OS* <mark style="color:red;">(ce qui n'est pas le cas d'autres polices, qui peuvent avoir un rendu totalement différent en fonction des clients !)</mark>
   * [x] Si une police *Google Fonts* a déjà été chargée (sur un autre site qu'il visite) par le client, elle devient automatiquement disponible sur le nôtre (pas de chargement)
2. Plusieurs polices peuvent être chargées en parallèle (par exemple pour avoir une police spécifique aux titres), mais <mark style="color:orange;">chaque police supplémentaire ajoute du temps de chargement additionnel à la page</mark>, ce qui peut s'avérer critique sur les connexions à bas débit.

Polices courantes (et complètes) suggérées :

* [Montserrat](https://fonts.google.com/specimen/Montserrat)
* [Raleway](https://fonts.google.com/specimen/Raleway)
* [Roboto](https://fonts.google.com/specimen/Roboto)
* [Ubuntu](https://fonts.google.com/specimen/Ubuntu)

***

#### Couleurs

Il est évidemment possible de préciser une couleur spécifique pour un élément donné, mais la template inclut une palette de 5 couleurs par défaut, qui sont appliquées sur tous les écrans :

<table><thead><tr><th width="241.5">Attribut</th><th>Correspondance</th></tr></thead><tbody><tr><td><em>--color-primary</em></td><td>Couleur des titres, sous-titres et de la croix des pop-ins, couleur de fond des boutons et du footer</td></tr><tr><td><em>--color-secondary</em></td><td>Couleur de la croix des pop-ins et couleur de fond des boutons et du footer <strong>au survol</strong> <em>("hover")</em></td></tr><tr><td><em>--color-text</em></td><td>Couleur par défaut des textes (appliqué partout sauf indication plus précise, comme pour les titres et sous-titres par exemple)</td></tr><tr><td><em>--color-dual-right</em></td><td><mark style="color:orange;">Spécifique au mode deux colonnes,</mark> couleur des textes dans le bloc de contenu <em>(optionnel)</em></td></tr><tr><td><em>--background-dual-right</em></td><td><mark style="color:orange;">Spécifique au mode deux colonnes,</mark> couleur de fond du bloc de contenu <em>(optionnel)</em></td></tr></tbody></table>

```css
{
  --color-primary: #222243;
  --color-secondary: #25306D;
  --color-text: white;
  --color-dual-right: black;
  --background-dual-right: white;
}
```

{% hint style="success" %}
En CSS, les couleurs peuvent au choix être précisées en hexadécimal *(#FF0000)*, en RG&#x42;*(-A, rgba(255, 0, 0, 1))* ou en anglais *(pour les couleurs de base uniquement, black / white)*.
{% endhint %}

***

#### Fond

Il est possible de préciser une couleur et/ou une image de fond, avec les paramètres suivants :

<table><thead><tr><th width="230.5">Attribut</th><th>Correspondance</th></tr></thead><tbody><tr><td><em>background-image</em></td><td>URL de l'image de fond</td></tr><tr><td><em>background-size</em></td><td>Indique si l'image doit couvrir le fond <em>(défaut)</em>, ou être contenue dans la page</td></tr><tr><td><em>background-position</em></td><td>Précise l'alignement (aussi bien horizontal que vertical) de l'image</td></tr><tr><td><em>background-repeat</em></td><td>Indique si l'image doit être appliquée plusieurs fois (uniquement si plus petite que la page, utilisé pour créer des mosaïques notamment)</td></tr><tr><td><em>background-color</em></td><td>Couleur de fond se trouvant derrière l'image, est utile lors du chargement de cette dernière, ou s'il n'y a pas d'image</td></tr></tbody></table>

```css
{
  background-image: url([...]/LC_background.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #8CCFBC;
}
```

{% hint style="success" %}
Nous recommandons une image de **1920x1080px** pour un fond devant couvrir la page. Il convient également de **compresser l'image** pour qu'elle ne dépasse pas 500ko, et de s'assurer qu'**aucun contenu important ne se trouve sur les côtés** gauche et droite, qui seront par défaut masqués sur petits écrans *(position center)*.
{% endhint %}

***

#### Boutons

Comme mentionné dans les [couleurs](#couleurs), les boutons viennent avec deux couleurs de fond globalisées (états *normal* et *survol*), et un texte blanc (ou noir, adapté par notre équipe en fonction des couleurs de fond). Il est toutefois possible de modifier le rendu des CTAs en précisant les paramètres suivants :

<table><thead><tr><th width="203.5">Attribut</th><th>Correspondance</th></tr></thead><tbody><tr><td><em>padding</em></td><td>Marges internes (permet d'avoir de l'espace autour du texte dans le bouton)</td></tr><tr><td><em>margin</em></td><td>Marges externes (permet d'éviter que le bouton ne soit collé à d'autres éléments)</td></tr><tr><td><em>text-transform</em></td><td>Forçage des majuscules, minuscules, première lettre en majuscule, etc.</td></tr><tr><td><em>border-radius</em></td><td>Arrondi des coins (peut être exagéré pour avoir un ovale ou un rond en fonction du contenu)</td></tr><tr><td><em>font-size</em></td><td>Taille de la police (utile principalement pour grossir le bouton par rapport au reste du contenu)</td></tr><tr><td><em>font-weight</em></td><td>Graisse de la police (dépend des styles inclus dans une police, mais permet de préciser une épaisseur de trait)</td></tr></tbody></table>

***

#### Langues

Dans le cas d'une opération multi-langues, il est possible d'afficher au client un (ou plusieurs) bouton(s, en fonction du nombre de langues disponibles) lui permettant de changer la langue d'affichage.

Si ces bouton reprennent, par défaut, les mêmes [couleurs](#couleurs) que les CTAs, il peuvent être [personnalisés](#boutons) de la même manière que ces derniers.

{% hint style="warning" %}
Si activés, les boutons de langue sont affichés sur tous les écrans, mais **la participation sera enregistrée dans la langue active au moment de la soumission du formulaire**.\
\
Tout changement ultérieur de langue ne sera sauvé que localement et ne pourra être restitué à l'issue de la campagne.
{% endhint %}

***

### Habillage spécifique

Ci-dessous sont listées les mises en page spécifiques pouvant être appliquées sur certains écrans :

* [Carte](#carte) *(container -> tous les écrans)*
* [Explosion](#explosion) *(post-animation -> écran jeu)*

***

#### Carte

La template propose un système de carte *(box-container)* pouvant englober du contenu, et ce, afin de le mettre en évidence.

Ceci est notamment utilisé sur les écrans du [formulaire](#formulaire), de la [preuve d'achat](#preuve-dachat) et des [remerciements](#remerciements) afin de faire ressortir certains éléments du fond de la page.

Les cartes peuvent être ajoutées autour de n'importe quel contenu, mais attention que certains éléments (comme les formulaires) viennent en un bloc et ne peuvent être dissociés.

```html
<!-- Contenu normal -->

<div class="box-container">
  <!-- Contenu de carte -->
</div>

<!-- Contenu normal -->
```

***

#### Explosion

La page de [jeu](#animation-jeu) peut déclencher une animation d'*explosion* à l'issue du jeu. Cette courte animation peut, au choix, être activée :

* Pour les gagnants uniquement *(résultat : 1, win)*
* Pour les perdants uniquement *(résultat : 2, lose)*
* Pour tout le monde
* Pour personne *(désactivée)*

Dans les trois premiers cas, l'image utilisée doit impérativement être un fichier *.PNG* avec **fond transparent** comprenant **6 blocs de 50x50px chacun**, alignés horizontalement comme suit :

<figure><img src="https://campaigns.lucky-cycle.com/assets/explosion/particles.png" alt=""><figcaption><p>Sprite pour l'explosion (300x50px)</p></figcaption></figure>

{% hint style="success" %}
Les éléments peuvent être de taille et de forme différentes, tant qu'ils respectent la contrainte du carré de 50x50px.
{% endhint %}


# Template Wheel

{% hint style="info" %}
Démo technique : <https://campaigns.lucky-cycle.com/template-wheel>
{% endhint %}

## Sections

1. [Ecrans](#ecrans)

***

## Ecrans


# Template GOTW

{% hint style="info" %}
Démo technique : <https://campaigns.lucky-cycle.com/itmbe-gotw>
{% endhint %}

## Sections

1. [Habillage](#habillage)
2. [Animation](#animations)
3. [Dotations](#dotations)
4. [Résumé](#resume)
5. [Newsletter](#newsletter)

***

## Habillage

La template consiste, pour tous les écrans, en un container centré responsive. Par défaut, la campagne est aux couleurs d'Intermarché mais, sont personnalisables :

1. Le **fond de la page**
   * peut être une couleur unie (<mark style="color:$success;">Hexa, RGB ou CMYK</mark> à fournir) ;
   * et/ou une image (<mark style="color:$success;">jpeg, png ou gif</mark>, idéalement en <mark style="color:orange;">1920x1080px</mark> - attention au poids de l'image pour éviter un long temps de chargement côté clients, <mark style="color:$danger;">maximum 1.5Mo</mark>).
2. Le **logo**
   * <mark style="color:$success;">jpeg, png, gif ou svg</mark>, ne devrait pas dépasser <mark style="color:orange;">500px de large</mark> et <mark style="color:$danger;">maximum 0.35Mo</mark>.
3. Les **couleurs** du thème
   * Couleur 1 : background bouton initial ;
   * Couleur 2 : background survol bouton + background footer ;
   * Couleur 3 : couleur du texte (hors boutons et footer qui sont blancs).
4. Le(s) **picto(s)** de la (des) dotation(s)
   * <mark style="color:$success;">jpeg, png, gif ou svg</mark>, ratio 1:1 *(carré)*, ne devrait pas dépasser <mark style="color:orange;">300px de côté</mark> et <mark style="color:$danger;">maximum 0.25Mo</mark> chacun.
5. Les visuels de l'**animation** (voir [point dédié](#animation)).

<figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2F1Bi5Zew7lhwsqAZzydNa%2Fstructure.png?alt=media&amp;token=352b22bb-3884-474d-ab46-bf67bc0f1a8c" alt=""><figcaption><p>Habillage par défaut (couleurs 1: rouge #E30613, 2: noir #000000 et 3: noir #000000)</p></figcaption></figure>

<figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2FxsTtj0hJ7RlWGe9qZice%2Fexemple.png?alt=media&amp;token=62e8f38e-c7e5-4063-804e-2ac18bc82cf3" alt=""><figcaption><p>Exemple Chiquita (avec logo png, fond png, pictos par défaut et couleurs 1: bleu #005CA8, 2: fushia #E6007E et 3: noir #000000)</p></figcaption></figure>

***

## Animation

Il est possible de choisir entre 3 animations <mark style="color:purple;">(1)</mark> pour la campagne, sans que cette décision n'influence la distribution des lots. Les spécificités de chacune sont comme suit :

{% tabs %}
{% tab title="Carte à gratter" %}
{% hint style="info" %}
Démo technique : <https://campaigns.lucky-cycle.com/utils/games?game=scratch-card>
{% endhint %}

Options de configuration <mark style="color:yellow;">(si souhaité, sinon utilisation des éléments</mark> <mark style="color:yellow;"></mark>*<mark style="color:yellow;">"par défaut"</mark>*<mark style="color:yellow;">)</mark> :

| Utilisation                   | Type                | Taille    | Spécificités                                              |
| ----------------------------- | ------------------- | --------- | --------------------------------------------------------- |
| Overlay (visuel à gratter)    | Image (jpeg ou png) | 550x380px | *<mark style="color:$danger;">Pas</mark> de transparence* |
| Win (affiché si jeu gagnant)  | Image (jpeg ou png) | 550x380px | /                                                         |
| Lose (affiché si jeu perdant) | Image (jpeg ou png) | 550x380px | /                                                         |
| Cursor (grattoir)             | Image (jpeg ou png) | 128x128px | Carré (ratio 1:1)                                         |

<div><figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2FRxsietgo3R3UBiM6DkPS%2Foverlay.png?alt=media&amp;token=24f29efd-8de0-451d-83db-2583072c2b8e" alt="" width="275"><figcaption><p>Overlay</p></figcaption></figure> <figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2FrjPe11Oc73M0smCfTm9s%2Fwin.png?alt=media&amp;token=22078ac1-2909-4433-aa25-2b94c469f6c9" alt="" width="275"><figcaption><p>Win</p></figcaption></figure> <figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2FJHg4VXmbtxLKKO8HwT5L%2Flose.png?alt=media&amp;token=5d17c5d1-61a9-48c9-b65c-18e5df43f8ff" alt="" width="275"><figcaption><p>Lose</p></figcaption></figure> <figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2FQI26D9KtMBO2d2hd0wGH%2Fcursor.png?alt=media&amp;token=ad7e4a62-3cd2-4a92-91ca-ef162f8dc9b5" alt="" width="96"><figcaption><p>Cursor</p></figcaption></figure></div>
{% endtab %}

{% tab title="Puzzle" %}
{% hint style="info" %}
Démo technique : <https://campaigns.lucky-cycle.com/utils/games?game=swapper>
{% endhint %}

Options de configuration <mark style="color:yellow;">(si souhaité, sinon utilisation des éléments</mark> <mark style="color:yellow;"></mark>*<mark style="color:yellow;">"par défaut"</mark>*<mark style="color:yellow;">)</mark> :

| Utilisation                   | Type                | Taille    | Spécificités                                              |
| ----------------------------- | ------------------- | --------- | --------------------------------------------------------- |
| Overlay (visuel à assembler)  | Image (jpeg ou png) | 550x380px | *<mark style="color:$danger;">Pas</mark> de transparence* |
| Win (affiché si jeu gagnant)  | Image (jpeg ou png) | 550x380px | /                                                         |
| Lose (affiché si jeu perdant) | Image (jpeg ou png) | 550x380px | /                                                         |

<div><figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2FRxsietgo3R3UBiM6DkPS%2Foverlay.png?alt=media&amp;token=24f29efd-8de0-451d-83db-2583072c2b8e" alt="" width="275"><figcaption><p>Overlay</p></figcaption></figure> <figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2FrjPe11Oc73M0smCfTm9s%2Fwin.png?alt=media&amp;token=22078ac1-2909-4433-aa25-2b94c469f6c9" alt="" width="275"><figcaption><p>Win</p></figcaption></figure> <figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2FJHg4VXmbtxLKKO8HwT5L%2Flose.png?alt=media&amp;token=5d17c5d1-61a9-48c9-b65c-18e5df43f8ff" alt="" width="275"><figcaption><p>Lose</p></figcaption></figure></div>
{% endtab %}

{% tab title="Roue de la Fortune" %}
{% hint style="info" %}
Démo technique : <https://campaigns.lucky-cycle.com/utils/games?game=wheel>
{% endhint %}

Options de configuration <mark style="color:yellow;">(si souhaité, sinon utilisation des éléments</mark> <mark style="color:yellow;"></mark>*<mark style="color:yellow;">"par défaut"</mark>*<mark style="color:yellow;">)</mark> :

| Utilisation               | Type                | Taille    | Spécificités                                                                                                                                                                                                                                                                                                  |
| ------------------------- | ------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Wheel (visuel de la roue) | Image (jpeg ou png) | 550x550px | *Le visuel doit être <mark style="color:$danger;">carré</mark> (ratio 1:1) avec la <mark style="color:$danger;">roue centrée.</mark> Les quartiers doivent tous être <mark style="color:$danger;">de taille égale</mark>, et <mark style="color:$danger;">débuter "à midi" (ligne verticale centrée)</mark>*. |
| Pin (curseur)             | Image (jpeg ou png) | 120x120px | /                                                                                                                                                                                                                                                                                                             |

<div><figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2FA2op9zaHmXCM2paXP4y0%2Fwheel.png?alt=media&amp;token=d7f87228-d201-4d49-9d1b-12995fe536bc" alt="" width="275"><figcaption><p>Wheel</p></figcaption></figure> <figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2Fi08XVHsGeuVeRBe1O35T%2Fpin.png?alt=media&amp;token=d50dcf6e-1898-435b-aa54-483a61792eaa" alt="" width="90"><figcaption><p>Pin</p></figcaption></figure></div>
{% endtab %}
{% endtabs %}

***

## Dotations

Il est possible de distribuer jusqu'à 3 dotations "bon de réduction" différentes <mark style="color:purple;">(1-3)</mark> par campagne, et, sont à préciser pour chacune :

* la valeur (€) ;
* la quantité à mettre en jeu ;
* les libellés (FR+NL) à afficher au client ;
* *Optionnel :* nom du visuel à utiliser comme picto <mark style="color:purple;">(visuel à fournir, voir</mark> [*<mark style="color:purple;">Habillage</mark>*](#habillage)*<mark style="color:purple;">, point 4</mark>*<mark style="color:purple;">)</mark>.

***Exemple de tableau basé sur les données de l'exemple plus haut :***

<table data-full-width="false"><thead><tr><th data-type="number">Valeur</th><th data-type="number">Quantité</th><th>Libellé FR</th><th>Libellé NL</th><th>Visuel Picto</th></tr></thead><tbody><tr><td>1.5</td><td>100</td><td>1,50€ de réduction</td><td>€1,50 korting</td><td><em>mon_picto_perso_1.png</em></td></tr><tr><td>3</td><td>50</td><td>3€ de réduction</td><td>€3 korting</td><td>/ <mark style="color:yellow;">(défaut)</mark></td></tr></tbody></table>

***

## Résumé

<mark style="color:$danger;">Obligatoire</mark> :

* [x] Animation : choix parmi la liste ;
* [x] Dotations : listing avec valeur, quantité et libellés.

<mark style="color:blue;">Optionnel</mark> :

* [ ] Fond de la page : couleur et/ou image ;
* [ ] Logo : image ;
* [ ] Couleurs du thème ;
* [ ] Animation : visuels personnalisés ;
* [ ] Picto(s) de la (des) dotation(s) *+ préciser à quel lot rattacher*.

## Newsletter

Pour la newsletter qui redirigera les clients vers le jeu, sont à prévoir :

| **Visuel** (FR+NL si texte inclus) | ![](https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2FAmLjhZi5bMrKlFSqWMCV%2Fnewsletter-lolaliza-header.jpg?alt=media\&token=695d30ae-75d0-4063-9117-24f4f0b5b84c)                                                                                        | / *<mark style="color:yellow;">(idem FR car pas de texte à traduire dans l'image)</mark>*                                                                                                                                                                                                      |
| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Titre court** (FR+NL)            | Jouez & gagnez jusqu’à 300€ de shopping chez LolaLiza 👗                                                                                                                                                                                                                                                                        | Speel mee & win tot €300 shopping bij LolaLiza 👗                                                                                                                                                                                                                                              |
| **Texte** (FR+NL)                  | <p>Découvrez <strong>LolaLiza</strong>, la <strong>marque belge</strong> aux <strong>looks tendances et féminins</strong>.</p><p></p><p>Participez maintenant, grattez votre carte <strong>100% gagnante</strong> et découvrez immédiatement votre prix.<br><br><strong>Jusqu'à 300€ de crédit shopping à gagner !</strong></p> | <p>Ontdek <strong>LolaLiza</strong>, het <strong>Belgische merk</strong> met <strong>trendy en vrouwelijke looks</strong>.</p><p></p><p>Doe nu mee, kras uw <strong>100% winnende</strong> kaart en ontdek meteen uw prijs.<br><br><strong>Tot wel €300 shoppingtegoed te winnen!</strong></p> |
| **CTA** (FR+NL)                    | JE PARTICIPE                                                                                                                                                                                                                                                                                                                    | IK DOE MEE                                                                                                                                                                                                                                                                                     |

<figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2F01yWYc5LRhTbhepU8CPo%2Fnewsletter.png?alt=media&amp;token=0552a2e2-35f1-45ed-8c90-d1312b4371d3" alt="" width="375"><figcaption><p>Exemple de blocs newsletter Intermarché.</p></figcaption></figure>