---
sidebar_position: 4
---

# Set Up Spinning Panel


## Overview

The **reel slot panel** is just one part of the overall **spinning panel** system.

Other required panels include:

- `landing-panel`
- `tension-panel`
- `present-win-cell-panel`
- `present-win-border-panel`

Each panel can be quickly set up using the **Generate Panel** function from its helper script.

---

## Set Up Panel

- Landing Panel: 

    ![Landing Panel](../img/05-main-scene/landing-panel.png)     

To define Landing Panel, create the following script:

:::warning
    ```jsx title="assets/game-assets/scripts/slotty-settings/extend-slotty-setting.js"
    SlottySetting.prototype._registerInjection = function () {
        DIContainer.Register('landingGenerator', require('landing-generator'));
    };
    ```
:::

- Present Win Cell Panel:

    ![Present Win Cell Panel](../img/05-main-scene/present-win-cell-panel.png)

- Present Win Cell Panel:

    ![Present Win Border Panel](../img/05-main-scene/present-win-border-panel.png)

- Tension Panel:

    ![Tension Panel](../img/05-main-scene/tension-panel.png)

    If the tension use a custom size frame, we can change the option **sizeMode** to **Custom** and set the static frame and size.

    ![Tension Size Custom](../img/05-main-scene/tension-panel-custom.png)    

    **check toggle General Panel** 

    ![Tension Size Custom](../img/05-main-scene/note-bug-tension.png)    
    To define Tension Panel, create the following script:
    :::warning
    ```jsx title="assets/game-assets/scripts/slotty-settings/extend-slotty-setting.js"
    SlottySetting.prototype._registerInjection = function () {
        DIContainer.Register('tensionGenerator', require('tension-generator'));
    };
    ```
    :::