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

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