add doc for freespin

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

@@ -7,6 +7,140 @@ sidebar_position: 2
 ## Overview
 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
 
-### Prepare Assets
+
+## Implementation Guide
+
+### Prepare Assets
+
+| Component Type         | Description                                       | Visual |
+|------------------------|---------------------------------------------------|--------|
+| **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: Set Display Parameters
+
+- Configure **landscape** and **portrait** modes:
+
+![Landscape Background](./img/freespins/set-background-freespin-landscape.png)  
+![Portrait Background](./img/freespins/set-background-freespin-portrait.png)
+
+#### Step 3: Asset Example
+
+![Background Assets](./img/freespins/assets-freespin-background.png)
+
+---
+
+#### Main Scene Structure
+
+Your scene should include the following nodes:
+
+- **Trigger**
+- **Retrigger**
+- **Win**
+
+![Scene Structure](./img/freespins/featrue-freespin-in-scenes.png)
+
+---
+
+#### Component Configuration
+
+##### 1. Free Spin Trigger
+
+- Add fonts and textures for Free Spin trigger.
+
+![Trigger](./img/freespins/trigger-freespin.png)
+
+##### 2. Free Spin Retrigger
+
+- Add fonts and textures to show retrigger effect.
+
+![Retrigger](./img/freespins/retrigger-freespin.png)
+
+##### 3. Free Spin Win
+
+- Add congratulations font and texture.
+
+![Win](./img/freespins/win-freespin.png)
+
+:::tip Best Practice
+Follow the visual and font flow as defined by your game's design system.
+:::
+
+---
+
+#### Free Spins Count Box
+
+| Step | Description | Image |
+|------|-------------|-------|
+| 1    | Locate prefab in Core: `freespins-count-box` | ![Core Prefab](./img/freespins/find-freespin-box.png) |
+| 2    | Add the prefab to main game scene | ![In Scene](./img/freespins/game-freespin-box.png) |
+| 3    | Desktop / Mobile | ![mode mobile](./img/freespins/both-mode-mobile.png) 
+
+![Assets](./img/freespins/assets-freespin-count.png) 
+
+**Asset Mapping:**
+
+| Asset Name | Node/Preference Name |
+|------------|----------------------|
+| `box-freespin` |     `bg`         |
+| `freespins`    | `freespins`      |
+
+---
+
+#### Sidebands (Optional)
+
+- Optional visual element, commonly used in classic or legacy slot designs.
+
+![Sidebands](./img/freespins/freespin-sideband.png)
+
+**Setup Instructions:**
+
+![Sideband Assets](./img/freespins/assets-freespind-sideband.png)
+
+**Asset Mapping:**
+
+| Asset Name | Node/Preference Name |
+|------------|----------------------|
+| `anim-free-sideband-static` | `particle-free-sideband` |
+| `sideband-back`            | `sideband-back`          |
+| `sideband`                 | `sideband`               |
+| `sideband-shine`           | `sideband-shine`         |
+| `sideband-static`          | `liquid`                 |
+| `indicator-static`         | `indicator-static`       |
+
+---
+
+#### Transition Effects (Optional)
+
+- These transitions create visual polish between game phases.
+
+![Transition Setup](./img/freespins/setup-transition.png)
+
+Steps:
+
+1. Add transition animation to the **Animation Provider**.
+2. Match the animation name with the correct node.
+
+**Example Result:**
+
+![Transition Result](./img/freespins/fs-transition.jpg)
+
+---
+
+## Final Result Examples
+
+| Phase | Image |
+|-------|-------|
+| Trigger | ![Trigger](./img/freespins/fs-trigger.jpg) |
+| Active Scene | ![Scene](./img/freespins/fs-scene.jpg) |
+| Completion | ![Congrats](./img/freespins/fs-congra.jpg) |