update final free spin

docs/03-setup-special-feature/02-free-spin copy.md

@@ -1,105 +0,0 @@
----
-sidebar_position: 2
----
-
-# Free Spins Implementation Guide
-
-## Overview
-The Free Spins feature provides bonus rounds where players:
-- Receive complimentary spins
-- Can win prizes without additional bets
-- Often encounter enhanced winning opportunities
-
-![Free Spins Overview](./img/freespins/fs-trigger.jpg)
-
-## Setup Process
-
-### 1. Asset Configuration
-
-#### Core Components
-Required prefabs from core package:
-![Core Assets](./img/freespins/freespin-prefabs-core.png)
-
-#### Game-Specific Assets
-Implementation prefabs:
-![Game Assets](./img/freespins/freespin-prefabs-game.png)
-
-### 2. Background Configuration
-
-1. **Animation Setup**
-   ```typescript
-   // Add to Animation Provider
-   animationProvider.addAnimation('freespin-background');
-   ```
-   ![Animation Config](./img/freespins/add-anim-background.png)
-
-2. **Display Modes**
-   | Mode | Configuration |
-   |------|---------------|
-   | Landscape | ![Landscape](./img/freespins/set-background-freespin-landscape.png) |
-   | Portrait | ![Portrait](./img/freespins/set-background-freespin-portrait.png) |
-
-### 3. Feature Implementation
-
-#### Scene Structure
-Required components:
-- Trigger Display
-- Retrigger Handler
-- Win Presentation
-
-![Scene Components](./img/freespins/featrue-freespin-in-scenes.png)
-
-#### Component Setup
-
-1. **Trigger Configuration**
-   - Add assets:
-     - Fonts
-     - Textures
-   ![Trigger Setup](./img/freespins/trigger-freespin.png)
-
-2. **Retrigger Configuration**
-   - Configure display elements
-   ![Retrigger Setup](./img/freespins/retrigger-freespin.png)
-
-3. **Win Display**
-   - Set congratulations assets
-   ![Win Setup](./img/freespins/win-freespin.png)
-
-:::tip Configuration Guidelines
-Maintain consistency with game design specifications for:
-- Font selection
-- Visual elements
-- Animation timing
-:::
-
-### 4. Optional Enhancements
-
-#### Sidebands
-Classic slot visual enhancement:
-```typescript
-interface SidebandConfig {
-    particleEffect: 'particle-free-sideband';
-    background: 'sideband-back';
-    foreground: 'sideband';
-    shine: 'sideband-shine';
-    liquid: 'sideband-static';
-    indicator: 'indicator-static';
-}
-```
-![Sideband Implementation](./img/freespins/freespin-sideband.png)
-
-#### Transitions
-Polish between game states:
-1. Configure animation provider
-2. Set node mappings
-![Transition Config](./img/freespins/setup-transition.png)
-
-## Implementation Examples
-
-### Feature Flow
-1. **Trigger**
-   ![Trigger Example](./img/freespins/fs-trigger.jpg)
-2. **Active State**
-   ![Active Example](./img/freespins/fs-scene.jpg)
-3. **Completion**
-   ![Complete Example](./img/freespins/fs-congra.jpg)

docs/03-setup-special-feature/02-free-spin.md

@@ -8,7 +8,6 @@ sidebar_position: 2
 The **Free Spin (or Free Games) Feature** awards players a set number of spins without requiring additional bets. During these spins, players can still win prizes—often larger than in the base game—without spending any of their own credits.
 ![Free Spin Overview](./img/freespins/fs-trigger.jpg)
 
-
 ## Implementation Guide
 
 ### Prepare Assets
@@ -18,32 +17,11 @@ The **Free Spin (or Free Games) Feature** awards players a set number of spins w
 | **Core Components**    | Locate the prefabs from the core package.         | ![Core Prefabs](./img/freespins/freespin-prefabs-core.png) |
 | **Game-Specific Components** | Prefabs are already present in the main game scene. | ![Game Prefabs](./img/freespins/freespin-prefabs-game.png) |
 
-
-### Setup
-
-#### Step 1: Configure Animation Provider
-
-- Add Free Spin background animation in **Animation Provider**.
-
-![Add Animation](./img/freespins/add-anim-background.png)
-
-#### Step 2: Configure Display
-
-- **landscape**:
-
-![Landscape Background](./img/freespins/set-background-freespin-landscape.png)  
-
-- **portrait**:
-
-![Portrait Background](./img/freespins/set-background-freespin-portrait.png)
-
-#### Step 3: Asset Example
-
-![Background Assets](./img/freespins/assets-freespin-background.png)
-
 ---
 
-#### Main Scene Structure Free Spins
+### Setup Scene
+
+#### Structure Free Spins
 
 Your scene should include the following nodes:
 
@@ -51,6 +29,8 @@ Your scene should include the following nodes:
 - **Retrigger**
 - **Win**
 
+***Example Scene Structure:***
+
 ![Scene Structure](./img/freespins/featrue-freespin-in-scenes.png)
 
 |      Property            | Description                                               |
@@ -61,38 +41,45 @@ Your scene should include the following nodes:
 | `freeSideBandContainer`  | Activates the Free Spins side band visual.                |
 
 ---
-
 #### Component Configuration
 
-##### Trigger and Retrigger Setup
+##### Trigger & Retrigger
 
-Configure animations for both trigger and retrigger.
+To configure the Free Spin **trigger** and **retrigger** components, follow these steps:
 
-![content](./img/freespins/add-anim-freespin.png)               
+1. **Add Animations** 
-![content](./img/freespins/add-anim-content.png)
 
-| Node Name | Purpose                                          | Location in Core Package                                   |
+Include the required animations for both the trigger and retrigger elements.
-|-----------| ------------------------------------------------ | ---------------------------------------------------------- |
-| `content` | Zoom-in and zoom-out animation | `assets/core-assets/slotty-core/packages/feature-game/animations` |
 
-![config](./img/freespins/freespin-trigger.png)
+![Add Animation](./img/freespins/add-anim-freespin.png)
+![Add Animation Content](./img/freespins/add-anim-content.png)
 
-|       Property         |      Description          |
+| Node Name | Purpose                                 | Location in Core Package                                         |
-|------------------------|---------------------------|
+|-----------|-----------------------------------------|------------------------------------------------------------------|
-| `durationPresentation` |  Specifies how long (in seconds) the animation trigger plays before auto-stopping  |
+| `content` | Handles zoom-in and zoom-out animations | `assets/core-assets/slotty-core/packages/feature-game/animations` |
+
+![Trigger Config](./img/freespins/freespin-trigger.png)
+
+| Property               | Description                                                              |
+|------------------------|--------------------------------------------------------------------------|
+| `durationPresentation` | Duration (in seconds) the trigger animation plays before auto-stopping   |
+
+2. **Add Background Animation Effect**  
 
 ![Effect Example](./img/freespins/effect-explosive.png)
 
-| Prefab Name | Purpose                                          | Location in Core Package                                   |
+| Prefab Name | Purpose                                         | Location in Core Package                                    |
-| ----------- | ------------------------------------------------ | ---------------------------------------------------------- |
+|-------------|-------------------------------------------------|-------------------------------------------------------------|
-| `explosive` | Background animation effect triggered by numbers | `assets/core-assets/hyper-core/packages/explosive/prefabs` |
+| `explosive` | Background animation effect triggered           | `assets/core-assets/hyper-core/packages/explosive/prefabs`  |
 
-![particles](./img/freespins/textture-particles.png)
+3. **Configure Particle Effects**  
-![particles](./img/freespins/set-particles-scale.png)
 
-| Node Name   | Purpose                                                                               | Location in Core Package                                    |
+![Particles](./img/freespins/textture-particles.png)
-|-------------|---------------------------------------------------------------------------------------|-------------------------------------------------------------|
+![Set Particles Scale](./img/freespins/set-particles-scale.png)
-| `particles` | - Particle effects around title and number triggers.<br/>- Set scale to `1` for visibility | `assets/core-assets/slotty-core/packages/present/particles` |
+
+| Node Name   | Purpose                                                                                 | Location in Core Package                                   |
+|-------------|-----------------------------------------------------------------------------------------|------------------------------------------------------------|
+| `particles` | - Particle effects around title and number triggers.<br/>- Set scale to `1` for visibility. | `assets/core-assets/slotty-core/packages/present/particles` |
 
 :::tip
 Set up the **present freespin retrigger** in the same way as the **present freespin trigger**.
@@ -124,7 +111,7 @@ Add fonts and textures to show retrigger effect.
 |-------------------------|-----------------------------------------------------------------------------------------------|
 | `content`               | Node for displaying the win animation content.                                                |
 | `durationPresentWin`    | Duration (in seconds) that the win presentation is shown.                                     |
-| `animation`             | Animation controller for the win presentation.<br/>Located at: `assets/core-assets/slotty-core/packages/feature-game/animations` |
+| `animation`             | - Animation controller for the win presentation.<br/>- Located at: `assets/core-assets/slotty-core/packages/feature-game/animations` |
 | `clipStartPresentation` | Animation clip played when the win presentation starts.                                       |
 | `clipStopPresentation`  | Animation clip played when the win presentation ends.                                         |
 | `allowPresentWinPoint`  | Enables the display of win points during the presentation.                                    |
@@ -143,61 +130,112 @@ Follow the visual and font flow as defined by your game's design system.
 :::
 
 ---
-
 #### Free Spins Count Box
 
-| Step | Description                                   | Image                                         |
+The **Free Spins Count Box** displays the remaining number of free spins to the player. Follow these steps to set it up:
-|------|-----------------------------------------------|-----------------------------------------------|
-| 1    | Locate the `freespins-count-box` prefab in the Core package. | ![Core Prefab](./img/freespins/find-freespin-box.png) |
-| 2    | Add the `freespins-count-box` prefab to your main game scene. | ![In Scene](./img/freespins/game-freespin-box.png) |
-| 3    | Verify appearance in both desktop and mobile modes. | ![mode mobile](./img/freespins/both-mode-mobile.png) |
 
-##### Platform Setup
+##### Steps to Add the Count Box
+
+| Step | Description                                                                 | Image                                         |
+|------|-----------------------------------------------------------------------------|-----------------------------------------------|
+| 1    | Locate the `freespins-count-box` prefab in the Core package.                | ![Core Prefab](./img/freespins/find-freespin-box.png) |
+| 2    | Add the `freespins-count-box` prefab to your main game scene.               | ![In Scene](./img/freespins/game-freespin-box.png) |
+| 3    | Verify its appearance in both desktop and mobile modes.                     | ![Mobile Mode](./img/freespins/both-mode-mobile.png) |
+
+##### Platform-Specific Setup
+
+Assign the appropriate node and controller for each platform:
 
 | Platform | Node Name                | Component to Add            | Example Image                                         |
 |----------|--------------------------|-----------------------------|-------------------------------------------------------|
 | Desktop  | `freespins-box-desktop`  | `Platform-ui-controller`    | ![Desktop Controller](./img/freespins/add-script-freespin-counter.png) |
 | Mobile   | `freespins-box-mobile`   | `Platform-ui-controller`    | ![Mobile Controller](./img/freespins/add-script-freespin-counter-mobile.png) |
 
-##### Asset Setup
+##### Asset Configuration
+
+Ensure the correct assets are used for each platform:
 
 | Platform | Asset Path                                                        | Example Image                                                                 |
 |----------|-------------------------------------------------------------------|-------------------------------------------------------------------------------|
 | Desktop  | `assets/game-assets/textures/desktop/preloads/main-game/custom-scale` | ![Desktop Assets](./img/freespins/freespin-counter-box-desktop.png) |
 | Mobile   | `assets/game-assets/textures/mobile/preloads/main-game/custom-scale`  | ![Mobile Assets](./img/freespins/freespin-counter-box-mobile.png)  |
-| Common   | Freespins Background                                             | ![common Asset](./img/freespins/freespin-counter-box-common.png) |
+| Common   | Freespins Box Background                                              | ![Common Asset](./img/freespins/freespin-counter-box-common.png) |
 
-##### Asset Font
+##### Font Setup
 
-![common Asset](./img/freespins/set-font-freespin-count-box.png) 
+Set the font for the count box display:
+
+![Font Setup](./img/freespins/set-font-freespin-count-box.png)
 
 ---
+#### Free Spin Background Setup
+
+##### 1. Add Animation to Animation Provider
+
+Add the Free Spin background animation to your **Animation Provider**.
+
+![Add Animation](./img/freespins/add-anim-background.png)
+
+##### 2. Configure Background Display
+
+Set up the background for both landscape and portrait modes:
+
+- **Landscape Mode**  
+
+![Landscape Background](./img/freespins/set-background-freespin-landscape.png)
+
+- **Portrait Mode**  
+
+![Portrait Background](./img/freespins/set-background-freespin-portrait.png)
+
+
+##### 3. Asset Example
+
+Example background assets for Free Spin:
+
+![Background Assets](./img/freespins/assets-freespin-background.png)
+
 
 #### Sidebands (Optional)
 
-- Optional visual element, commonly used in classic or legacy slot designs.
+Sidebands are optional visual elements, often used in classic slot game designs.
 
-| Overview                                   | Setup                                        |
+| Preview | Asset Structure |
-|-------------------------------------------|----------------------------------------------|
+|---------|----------------|
 | ![Sidebands](./img/freespins/freespin-sideband.png) | ![Sideband Assets](./img/freespins/assets-freespind-sideband.png) |
 
+**Setup Steps:**
+
+1. **Add Preference:**  
+    Add the free sideband preference in your configuration.  
+    ![Add Preference](./img/freespins/add-preference-free-sideband.png)
+
+2. **Assign Texture:**  
+    Set the correct texture for the free sideband.  
+    ![Add Texture](./img/freespins/add-texture-free-sideband.png)
 
 **Asset Mapping:**
 
-| Asset Name | Node/Preference Name |
+| Asset Name                | Node/Preference Name    |
-|------------|----------------------|
+|---------------------------|------------------------|
 | `anim-free-sideband-static` | `particle-free-sideband` |
-| `sideband-back`            | `sideband-back`          |
+| `sideband-back`           | `sideband-back`        |
-| `sideband`                 | `sideband`               |
+| `sideband`                | `sideband`             |
-| `sideband-shine`           | `sideband-shine`         |
+| `sideband-shine`          | `sideband-shine`       |
-| `sideband-static`          | `liquid`                 |
+| `sideband-static`         | `liquid`               |
-| `indicator-static`         | `indicator-static`       |
+| `indicator-static`        | `indicator-static`     |
 
 ---
 
 #### Transition Effects (Optional)
 
-create new node and add `transition`, `transition-scaler` component.
+##### Setup: Create Transition Node
+
+1. **Create a new node** in your scene for the transition effect.
+2. **Add the following components** to this node:
+    - `transition`
+    - `transition-scaler`
+3. Configure the transition properties as required for your effect.
 
 ![Transition Setup](./img/freespins/setup-transition.png)
 
@@ -216,7 +254,6 @@ create new node and add `transition`, `transition-scaler` component.
 
 ![Transition Setup](./img/freespins/add-anim-transition.png)
 
-
 **add preferrence**
 
 Configure preferences as needed for your transition.