diff --git a/docs/01-setup-the-project/02-add-submodules.md b/docs/01-setup-the-project/02-add-submodules.md
index 0ed4690..0c76f71 100644
--- a/docs/01-setup-the-project/02-add-submodules.md
+++ b/docs/01-setup-the-project/02-add-submodules.md
@@ -32,7 +32,7 @@ Then run the follwing command:
git submodule add -f ../hyper-editor-package.git packages
```
-## Internation Theme vs Chinese Theme
+## International Theme vs Chinese Theme
Depend on the theme of your game, add these commands:
diff --git a/docs/01-setup-the-project/03-setup-custom-engine.md b/docs/01-setup-the-project/03-setup-custom-engine.md
index e12dabd..1c65e70 100644
--- a/docs/01-setup-the-project/03-setup-custom-engine.md
+++ b/docs/01-setup-the-project/03-setup-custom-engine.md
@@ -8,7 +8,7 @@ Set **Javascript Engine Path** to a **custom Cocos Engine**.
Thanks to the open source nature of Cocos Creator, we are able to customize some of the function in the source code to meet the requirement for Hyper Slot Game.
-For the detail of the Custom Engine, take a look at this [**Custom Cocos Engine documentation**](../custom-cocos-engine/custom-cocos-engine.md)
+For the detail of the Custom Engine, take a look at this [**Custom Cocos Engine documentation**](../category/custom-cocos-engine)
**Clone the repository**
diff --git a/docs/02-setup-main-game/05-main-scene/01-system.md b/docs/02-setup-main-game/05-main-scene/01-system.md
index 97bb9f5..52d82a4 100644
--- a/docs/02-setup-main-game/05-main-scene/01-system.md
+++ b/docs/02-setup-main-game/05-main-scene/01-system.md
@@ -2,19 +2,25 @@
sidebar_position: 1
---
-# System
----
+# System Setup
-## Sprite Frame Provider Setup
+## Overview
+The **System** module provides global access to sprite frames and animation assets, enabling efficient resource management across the game.
-**SpriteFrameProvider** gives global access to **sprite frames** from anywhere in the codebase.
+## Sprite Frame Provider
+The **SpriteFrameProvider** allows global access to sprite frames from anywhere in the codebase.

----
+**Setup Steps:**
+1. Configure the **SpriteFrameProvider** to register sprite assets.
+2. Ensure all sprite frames are added to the provider for global access.
-## Animation Provider Setup
+## Animation Provider
+The **Animation Provider** manages and exposes game-related animation assets globally.
-The **Animation Provider** manages and exposes all game-related **animation assets** globally.
+
-
\ No newline at end of file
+**Setup Steps:**
+1. Register animation assets in the **Animation Provider**.
+2. Verify that animations are correctly linked to their respective prefabs.
\ No newline at end of file
diff --git a/docs/02-setup-main-game/05-main-scene/02-background.md b/docs/02-setup-main-game/05-main-scene/02-background.md
index 0a2c0de..7a3416b 100644
--- a/docs/02-setup-main-game/05-main-scene/02-background.md
+++ b/docs/02-setup-main-game/05-main-scene/02-background.md
@@ -2,76 +2,50 @@
sidebar_position: 2
---
-# Background
+# Background Setup
-Is the visual scenery that appears behind the gameplay elements.
+## Overview
+The background serves as the visual scenery behind gameplay elements, supporting both **Landscape** (Desktop and Mobile) and **Portrait** (Mobile only) orientations.
----
-## Overivew
+| Orientation | Desktop | Mobile |
+|-------------|---------|--------|
+| **Landscape** |  |  |
+| **Portrait** |  |  |
-The background consists of 2 parts: **Landscape** and **Portrait**.
+## Asset Preparation
+| Type | Assets | Description |
+|------|--------|-------------|
+| **Static** |  | Required for all games. |
+| **Animation** |  | Optional, depending on game design. |
-- **Landscape** use for Desktop and Mobile landscape.
-- **Portrait** only use for Mobile portrait.
+## Setup Steps
+1. **Landscape Background**:
+ - Use the prepared sprite frame for the landscape background.
+ - 
-| | Desktop | Mobile |
-|:-:|--------------|---------|
-|**Background Landscape**
|
|
|
-|**Background Portrait**
||
|
+2. **Portrait Background**:
+ - Use the prepared sprite frame for the mobile portrait background.
+ - 
-## 1. Prepare the assets
-| | Assets | Description |
-|:-:|--------------|---------|
-|**Static**
||Static background is necessary for the game|
-|**Animation**
||Animation background may or may not be present, depending on the game design|
-
-## 2. Setup Background Landscape
-
- We use sprite frame background for landscape from prepared assets.
-
- 
-
-## 3. Setup Background Portrait
-
- We use sprite frame background for mobile from prepared assets.
-
- 
-
-## 4. Setup Background Animation
-
-If the game have design animation for background, we will do this step.
-
-**Setp 1:** Using hepler to generate animation from prepared assets
-
- 
- 
-
-**Setp 2:**. Stup for spine-animation
- - `Is Loop`: is β
because this animation will play through the game.
- - `Static Sprite Frame`: It will be displayed when the animation has not finished loading.
-
- 
- 
-
-**Setp 3:**. Add animation background with components below:
-
- **Landscape:**
- - Create `Empty Node` with name `anim-background-main-game`.
- - Add `animation-play-on-enable` with animation name in **Animation Provider**.
- - Add `background-scaler`, used to resize according to screen resolution.
-
- 
-
- **Portrait:**
-
- - Create `Empty Node` with name `mobile-background-anim-portrait`.
- - Add `mobile-portrait-background-ui-controller` to display only on **Mobile**.
- - Add `orientation-ui-controller` to display on Portrait with the options below.
-
- 
-
- - Create `Empty Node` with name `anim-background-main-game`.
- - Add `animation-play-on-enable` with animation name in **Animation Provider**.
- - Add `portrait-anim-background-scaler`, used to resize according to screen resolution.
-
- 
\ No newline at end of file
+3. **Animated Background** (if applicable):
+ - **Step 1**: Use the helper tool to generate animations from prepared assets.
+ - 
+ - 
+ - **Step 2**: Configure spine animation settings:
+ - Enable **Is Loop** to ensure continuous playback.
+ - Set a **Static Sprite Frame** for display before the animation loads.
+ - 
+ - 
+ - **Step 3**: Add animation nodes:
+ - **Landscape**:
+ - Create an `Empty Node` named `anim-background-main-game`.
+ - Add the `animation-play-on-enable` component with the animation name from the **Animation Provider**.
+ - Add the `background-scaler` component to resize based on screen resolution.
+ - 
+ - **Portrait**:
+ - Create an `Empty Node` named `mobile-background-anim-portrait`.
+ - Add the `mobile-portrait-background-ui-controller` and `orientation-ui-controller` components for mobile portrait display.
+ - Create a child `Empty Node` named `anim-background-main-game`.
+ - Add the `animation-play-on-enable` and `portrait-anim-background-scaler` components.
+ - 
+ - 
\ No newline at end of file
diff --git a/docs/02-setup-main-game/05-main-scene/03-reel-slot.md b/docs/02-setup-main-game/05-main-scene/03-reel-slot.md
index dce226d..6caea1c 100644
--- a/docs/02-setup-main-game/05-main-scene/03-reel-slot.md
+++ b/docs/02-setup-main-game/05-main-scene/03-reel-slot.md
@@ -1,50 +1,43 @@
---
-sidebar_position: 2
+sidebar_position: 3
---
-# Set Up Reel Slot
----
+# Reel Slot Setup
-### Prepare Assets
-
- Add the symbol textures and reel frame:
+## Overview
+The reel slot system manages the core spinning mechanics of the game.
- |||
- |------------------------------------------------------------------|--------------------------------------------------------------|
+## Asset Preparation
+- Add symbol textures and reel frames:
+ - 
+ - 
-### Add symbols to `SpriteFrameProvider`
+## Sprite Frame Provider
+- Add symbols to the **SpriteFrameProvider** for global access.
+ - 
- This allows symbols to be accessed globally from code:
+## Reel Frame
+- Configure the reel frame:
+ - 
+ - 
- 
+## Configuration
+Use the `reel-scroller-helper` to set up spinning behavior:
-### Add Reel Frame
+
- | | |
- |--------------------------------------------------------------------|--------------------------------------------------------------|
+| Property | Description | Example |
+|----------|-------------|---------|
+| **Cell Item Script Name** | Script attached to each cell item. |  |
+| **Scroller Script Name** | Script handling spinning logic. |  |
+| **Row Count x Reel Count** | Number of slot items per row and column. |  |
+| **Cell Size** | Size of each cell. |  |
+| **Cell Spacing** | Horizontal and vertical distance between cells. | - |
+| **Cell Dim Color** | Dark color for non-winning cells during win animations. |  |
+| **Top Count and Bot Count** | Additional cells at the top and bottom for spinning logic. |  |
-### Configure the Reel Slot
+## Generate Reel Panel
+- Use the `reel-scroller-helper` to auto-generate the reel panel.
+ - 
-Use `reel-scroller-helper` to configure spinning behavior:
-
- 
-
- | Properties | Description | Example |
- |------------|--------------|---------|
- |**Cell Item Script Name**|The name of the script will be attached to each cell item.||
- | **Scroller Script Name** | the name of the script for handling the spinning logic.||
- |**Row Count x Reel Count**| the number of Slot Item each row and column in the reel slot panel.||
- |**Cell Size**| the size of each cells.||
- |**Cell Spacing**| the distance between each cells horizontally and vertically.||
- |**Cell Dim Color**| set the dark color for the non-win cells when showing winning animation for each line.||
- |**Top Count and Bot Count**| for spinning logic to work, a certain number of cell will be added to the top and bottom of the reel.||
-
-### Generate Reel Panel
-
- Use `reel-scroller-helper` to auto-generate the full panel:
-
- 
-
-:::tip
-A popup may be covering the scene. Disable it temporarily to clearly view and edit the reel slot components.
-:::
+**Tip**: Temporarily disable any popups covering the scene to view and edit reel slot components clearly.
\ No newline at end of file
diff --git a/docs/02-setup-main-game/05-main-scene/04-spinning-panel.md b/docs/02-setup-main-game/05-main-scene/04-spinning-panel.md
index 8ac0d05..81a96ac 100644
--- a/docs/02-setup-main-game/05-main-scene/04-spinning-panel.md
+++ b/docs/02-setup-main-game/05-main-scene/04-spinning-panel.md
@@ -2,64 +2,36 @@
sidebar_position: 4
---
-# Set Up Spinning Panel
-
+# Spinning Panel Setup
## Overview
+The spinning panel system includes the **reel slot panel** and additional panels: `landing-panel`, `tension-panel`, `present-win-cell-panel`, and `present-win-border-panel`.
-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:
-
- 
-
-To define Landing Panel, create the following script:
-
-:::warning
- ```jsx title="assets/game-assets/scripts/slotty-settings/extend-slotty-setting.js"
+## Panel Setup
+- **Landing Panel**:
+ - 
+ - **Script**:
+ ```jsx
SlottySetting.prototype._registerInjection = function () {
DIContainer.Register('landingGenerator', require('landing-generator'));
};
```
-:::
-- Present Win Cell Panel:
+- **Present Win Cell Panel**:
+ - 
- 
+- **Present Win Border Panel**:
+ - 
-- Present Win Cell Panel:
-
- 
-
-- Tension Panel:
-
- 
-
- If the tension use a custom size frame, we can change the option **sizeMode** to **Custom** and set the static frame and size.
-
- 
-
- **check toggle General Panel**
-
- 
- To define Tension Panel, create the following script:
- :::warning
- ```jsx title="assets/game-assets/scripts/slotty-settings/extend-slotty-setting.js"
+- **Tension Panel**:
+ - 
+ - For custom size frames, set **sizeMode** to **Custom** and configure the static frame and size.
+ - 
+ - **Check Toggle**: Ensure the general panel toggle is correctly set.
+ - 
+ - **Script**:
+ ```jsx
SlottySetting.prototype._registerInjection = function () {
DIContainer.Register('tensionGenerator', require('tension-generator'));
};
- ```
- :::
+ ```
\ No newline at end of file
diff --git a/docs/02-setup-main-game/05-main-scene/05-win-point-on-reel.md b/docs/02-setup-main-game/05-main-scene/05-win-point-on-reel.md
index b702d90..e70ef16 100644
--- a/docs/02-setup-main-game/05-main-scene/05-win-point-on-reel.md
+++ b/docs/02-setup-main-game/05-main-scene/05-win-point-on-reel.md
@@ -5,143 +5,43 @@ sidebar_position: 5
# Win Point on Reel
## Overview
+The **Win Point on Reel** system displays win points for each payline, including scatter wins.
-- Displays win points for each payline, including scatter wins.
+
-
+## Asset Preparation
+- **Core Assets**:
+ - Path: `assets/core-assets/hyper-core/packages/on-reel-present-win-point/prefab`
+ - 
-## Implementation
+- **Game Assets**:
+ - Path: `assets/game-assets/prefabs`
+ - 
-### Prepare Asssets
+## Setup
+1. **Add Prefab to Scene**:
+ - Add the `on-reel-present-win-point` prefab to the main scene.
+ - Components:
+ - `on-reel-present-win-point`: Controls visibility of win points.
+ - `hyper-present-win-point`: Manages presentation flow.
+ - 
-#### In Core
+2. **Configure Node Targets**:
+ - Set the target node for win point labels and define size/offset.
+ - 
+ - Properties:
+ | Property | Type | Description |
+ |----------|------|-------------|
+ | `labelPosition` | `cc.Vec2` | Offset position for the win point label. |
+ | `nodeTarget` | `cc.Node` | Target node containing the label. |
+ | `cellItemSize` | `cc.Vec2` | Size of each slot cell. |
+ | `defaultFontSize` | `number` | Default font size for the label. |
-
-
-
- Path |
- Example |
-
-
-
-
- assets\core-assets\hyper-core\packages\on-reel-present-win-point\prefab |
-  |
-
-
-
+3. **Set Up Label Component**:
+ - Displays win values with support for formatted text (number, currency).
+ - Add a custom font:
+ - Path: `assets/game-assets/fonts/preloads/main-game/fnt-win-point-on-reel`
+ - 
+ - 
-#### In Game
-
-
-
-
- Path |
- Example |
-
-
-
-
- assets\game-assets\prefabs |
-  |
-
-
-
-
-### Setup
-
-#### Steps 1: Add Prefab to Scene
-
-Add the win point on reel prefab to your main scene.
-
-
-
-
- Component |
- Description |
-
-
-
-
- on-reel-present-win-point |
- A component to **show/hide** points on reels |
-
-
- hyper-present-win-point |
- Manages win point presentation flow |
-
-
-
-
- 
-
-#### Steps 2: Configure Node Targets
-Set the target node where each win point label appears and define its size and offset.
-
- 
-
-
-
-
- Property |
- Type |
- Description |
-
-
-
-
- labelPosition |
- cc.Vec2 |
- Offset position for the win point label |
-
-
- nodeTarget |
- cc.Node |
- Target node containing the label |
-
-
- cellItemSize |
- cc.Vec2 |
- Size of each slot cell |
-
-
- defaultFontSize |
- number |
- Default font size for the label |
-
-
-
-
-#### Steps 3: Set Up Label Component
-
-
-
-
-- **Component**:
- - Displays win values on the reels.
- - Supports formatted text (number, currency).
-
-- **Custom Font**:
- Add a custom font to style the win label.
-
-
-
- Path |
- Example |
-
-
-
-
- assets\game-assets\fonts\preloads\main-game\fnt-win-point-on-reel |
-  |
-
-
-
-
-:::tip
- - **Position And Size**: Follow Game Design.
-:::
-
- ## Game Result Examples
-
- |
\ No newline at end of file
+**Tip**: Follow game design specifications for position and size.
\ No newline at end of file
diff --git a/docs/02-setup-main-game/05-main-scene/06-special-win.md b/docs/02-setup-main-game/05-main-scene/06-special-win.md
index 2675298..74f52a9 100644
--- a/docs/02-setup-main-game/05-main-scene/06-special-win.md
+++ b/docs/02-setup-main-game/05-main-scene/06-special-win.md
@@ -2,174 +2,91 @@
sidebar_position: 6
---
-# Special Win
-
----
+# Special Win System
## Overview
+Special Wins are high-value reward events categorized by payout thresholds:
-Special Wins are high-value reward events in slot games, cagegorized based on the payout threshold:
-
-| Win Type | Trigger Threshold | Preview |
-|-----------|-----------------------|----------------|
-| **Big Win** | Medium payout |  |
-| **Super Win** | High payout |  |
-| **Mega Win** | Maximum payout |  |
-
-Each type delivers increasing visual excitement to highlight significant player rewards.
-
----
+| Win Type | Trigger Threshold | Preview |
+|----------|-------------------|---------|
+| **Big Win** | Medium payout |  |
+| **Super Win** | High payout |  |
+| **Mega Win** | Maximum payout |  |
## Implementation
+### Asset Preparation
+- Components:
+ | Component | Purpose |
+ |-----------|---------|
+ | `hyper-special-win-initializer` | Initializes the system. |
+ | `hyper-present-special-win` | Manages animation sequences and display logic. |
+ | `hyper-special-win-label-point-effect` | Controls win amount visualization. |
+ - 
-### Prepare Assets
+- **Coin Effect System**:
+ - Variants for different game theme:
+ | Submodule | Theme | Preview |
+ |-----------|-------|---------|
+ | `hyper-coin-shower-international` | International |  |
+ | `hyper-coin-shower-chinese` | Chinese |  |
-The special win system consists of three main components:
+- **Static Assets**:
+ | Platform | Path | Preview |
+ |----------|------|---------|
+ | Desktop | `assets/textures/desktop/preloads/special-wins` |  |
+ | Mobile | `assets/textures/mobile/preloads/special-wins` |  |
-| Component | Purpose |
-|-----------|---------|
-| `hyper-special-win-initializer` | Handles system initialization and setup |
-| `hyper-present-special-win` | Manages animation sequences and display logic |
-| `hyper-special-win-label-point-effect` | Controls win amount visualization |
+### Animation Setup
+1. **Animation Resources**:
+ - Path:
+ | Platform | Path | Preview |
+ |----------|------|---------|
+ | Desktop | `assets/textures/desktop/postloads/anim-special-win` |  |
+ | Mobile | `assets/textures/mobile/postloads/anim-special-win` |  |
-
+2. **Animation Flow**:
+ ```mermaid
+ graph TD
+ SW[Special Wins] --> BW[Big Win]
+ SW --> SPW[Super Win]
+ SW --> MW[Mega Win]
-#### Coin Effect System
+ BW --> BWI[bigwin-in] --> BWL[bigwin-loop] --> BWO[bigwin-out]
+ SPW --> SPWI[superwin-in] --> SPWL[superwin-loop] --> SPWO[superwin-out]
+ MW --> MWI[megawin-in] --> MWL[megawin-loop] --> MWO[megawin-out]
-The coin shower effect uses prefab variants for different markets:
+ classDef inStage fill:#e6f3ff,stroke:#666
+ classDef loopStage fill:#fff2cc,stroke:#666
+ classDef outStage fill:#f8cecc,stroke:#666
+ classDef winType fill:#d5e8d4,stroke:#82b366
+ classDef specialWin fill:#fff4dd,stroke:#ff0000
-
+ class BWI,SPWI,MWI inStage
+ class BWL,SPWL,MWL loopStage
+ class BWO,SPWO,MWO outStage
+ class BW,SPW,MW winType
+ class SW specialWin
+ linkStyle default stroke-width:2px,stroke:#ff0000
+ ```
+ - 
-| Submodule | Theme | Preview |
-|-------------|---------------|---------------|
-| `hyper-coin-shower-international` | International |  |
-| `hyper-coin-shower-chinese` | Chinese |  |
+3. **Animation Settings**:
+ - Configure static fallback and loop animations:
+ | Setting | Example |
+ |---------|---------|
+ | Static Fallback |  |
+ | Loop Animation |  |
-:::tip
-- Position the Special Win node as per game design
-:::
+4. **Font Configuration**:
+ - Path: `assets/game-assets/fonts/preloads/main-game/fnt-special-win`
+ - Steps:
+ 1. Import font files.
+ - 
+ 2. Add font to the special win component.
+ - 
+ 3. Configure text alignment, font size, and spacing.
+ - 
----
-
-### Setup
-
-#### 1. Static Resources
-
-Store static assets in platform-specific directories:
-
-| Platform | Path | Preview |
-|----------|------|---------|
-| Desktop | `assets/textures/desktop/preloads/special-wins` |  |
-| Mobile | `assets/textures/mobile/preloads/special-wins` |  |
-
-π [View Platform Asset Structure](/docs/cagegory/game-asset-structure)
-
----
-
-#### 2. Animation Setup
-
-##### Special Win Animation Flow
-
-```mermaid
-%%{init: {'theme': 'base', 'themeVariables': { 'fontSize': '25px', 'fontFamily': 'arial' }}}%%
-graph TD
- %% Win Types with Thresholds
- SW[Special Wins] --> BW["Big Win"]
- SW --> SPW["Super Win"]
- SW --> MW["Mega Win"]
-
- %% Big Win stages with flow
- BW --> BWI[bigwin-in]
- BWI --> BWL[bigwin-loop]
- BWL --> BWO[bigwin-out]
-
- %% Super Win stages with flow
- SPW --> SPWI[superwin-in]
- SPWI --> SPWL[superwin-loop]
- SPWL --> SPWO[superwin-out]
-
- %% Mega Win stages with flow
- MW --> MWI[megawin-in]
- MWI --> MWL[megawin-loop]
- MWL --> MWO[megawin-out]
-
- %% Legend nodes
- L0["Feature Name"]-->L1["Win Types"] --> L2["In State"] --> L3["Loop State"] --> L4["Out State"]
- class L0 specialWin
- class L1 winType
- class L2 inStage
- class L3 loopStage
- class L4 outStage
-
- %% Style definitions
- classDef inStage fill:#e6f3ff,stroke:#666,font-size:25px
- classDef loopStage fill:#fff2cc,stroke:#666,font-size:25px
- classDef outStage fill:#f8cecc,stroke:#666,font-size:25px
- classDef winType fill:#d5e8d4,stroke:#82b366,font-size:25px
- classDef specialWin fill:#fff4dd,stroke:#ff0000,font-size:25px
-
- class BWI,SPWI,MWI inStage
- class BWL,SPWL,MWL loopStage
- class BWO,SPWO,MWO outStage
- class BW,SPW,MW winType
- class SW specialWin
-
- %% Adjust node spacing
- linkStyle default stroke-width:4px,stroke:#ff0000
-```
- 
-
-##### Step 1: Add Animation Resources
-
-Place animated assets in the following directories:
-
-| Platform | Path | Preview |
-|----------|------|---------|
-| Desktop | `assets/textures/desktop/postloads/anim-special-win` |  |
-| Mobile | `assets/textures/mobile/postloads/anim-special-win` |  |
-
-##### Step 2: Configure Animation Settings
-
-| Setting | Example |
-|------------------|---------|
-| Static Fallback |  |
-| Loop Animation |  |
-
-π [View Animation Provider Setup](/docs/setup-main-game/main-scene/system#animation-provider-setup)
-
-:::tip
-- Move assets to `custom-scale/` directory to resolve image quality issues
-- Asset paths may vary by project configuration
-:::
-
-##### Step 3: Font Configuration
-
-- **Path:** `assets\game-assets\fonts\preloads\main-game\fnt-special-win`
-- Follow these steps to configure fonts for special win displays:
-
-1. **Package Font Assets**
- - Import font files into project
-
- 
-
-2. **Font Integration**
- - Add font asset to special win component
-
- 
-
-3. **Layout Settings**
-
- - Configure text alignment
- - Adjust font size and spacing
-
- 
-
-
-:::tip
-Customize font styles based on each game's design.
-:::
-
-## Game Result Example
-
-The game result display for Special Wins should match the style and format shown in the Overview section.
-π [Game Result Example](/docs/setup-main-game/main-scene/special-win#overview)
+**Tip**:
+- Move assets to `custom-scale/` to resolve image quality issues.
+- Customize font styles based on game design.
\ No newline at end of file
diff --git a/docs/02-setup-main-game/05-main-scene/07-item-description.md b/docs/02-setup-main-game/05-main-scene/07-item-description.md
index f2ef36a..b767ecb 100644
--- a/docs/02-setup-main-game/05-main-scene/07-item-description.md
+++ b/docs/02-setup-main-game/05-main-scene/07-item-description.md
@@ -4,73 +4,61 @@ sidebar_position: 7
# Item Description
-Provides players with detailed information about each item in the game.
-
-
----
-
## Overview
+The **Item Description** system provides detailed information about game items, including payouts and descriptions.

-## Prepare the assets
+## Asset Preparation
| Assets | Description |
|--------|-------------|
-|  | Used to Setup the background. |
-|  | Used to Setup the static symbol. |
-|  | Used to Setup the animation symbol. |
-|  | Used to Setup the payout/description. |
+|  | Background setup. |
+|  | Static symbol setup. |
+|  | Animation symbol setup. |
+|  | Payout or description text setup. |
-## Setup Prefabs Item Description
+## Setup
+1. **Locate Template Prefabs**:
+ - Search for the `template-item-description` prefab.
+ - 
+2. **Clone Assets**:
+ - Copy and paste to the game assets location, removing unnecessary prefixes.
+ - 
-| Step | Action | Description | Image Reference |
-| :--: | :----- | :---------- | :-------------: |
-| 1 | Locate all template prefabs needed for the **Item Description** | Search for the `template-item-description` prefab. |  |
-| 2 | Clone assets| Copy and paste them to the game assets location, then rename the copied prefabs by removing unnecessary prefixes. |  |
+### Prefab Configurations
+- **item-description-small** (Items with win payout only):
+ - 
+ - Steps:
+ | Step | Action | Image Reference |
+ |------|--------|-----------------|
+ | 1 | Set **Sprite Frame** in `background` using prepared assets. |  |
+ | 2 | Name prefab as `item-description-` and set **Animation Name** in **Animation Provider**. |  |
+ | 3 | Set **Sprite Frame** in `sprite-item` using prepared assets. |  |
+ | 4 | Adjust **Color**, **Font**, and **Font Size** in `multi-x...` and `odds-x...`. Use [Bitmap Font Creator](http://localhost:3000/docs/category/game-asset-structure) if needed. |  |
-### item-description-small
+- **item-description-no-odds** (Items with description only):
+ - 
+ - Steps:
+ | Step | Action | Image Reference |
+ |------|--------|-----------------|
+ | 1 | Set **Sprite Frame** in `background` using prepared assets. |  |
+ | 2 | Name prefab as `item-description-` and set **Animation Name** in **Animation Provider**. |  |
+ | 3 | Set **Sprite Frame** in `sprite-item` using prepared assets. |  |
+ | 4 | Set **String**, **Color**, **Font**, and **Font Size** in `description`. Use [Bitmap Font Creator](http://localhost:3000/docs/category/game-asset-structure) if needed. |  |
- Setup the `item-description-small` prefab for items have a win payout:
-
- 
+- **item-description-big** (Items with both payout and description):
+ - 
+ - Steps:
+ | Step | Action | Image Reference |
+ |------|--------|-----------------|
+ | 1 | Set **Sprite Frame** in `background` using prepared assets. |  |
+ | 2 | Follow **Step 4** of `item-description-small` for payout setup. | [See Small Setup](#item-description-small) |
+ | 3 | Follow **Step 4** of `item-description-no-odds` for description setup. | [See No-Odds Setup](#item-description-no-odds) |
- | Step | Action | Image Reference |
- | :--: | :----- | :-------------: |
- | 1 | - Setup the **Sprite Frame** in the `background` using the prepared assets. |
 |
- | 2 | - Name the item prefab following the format item-description-**name**".
- Setup the **Animation Name** to match the item's name in the **Animation Provider**.|  |
- | 3 | - Setup the **Sprite Frame** in the `sprite-item` using the same name as the item from the prepared assets. |  |
- | 4 | - Adjust **Color**, **Font** and **Font Size** in `multi-x...` and `oods-x...` according to the game design.
- Use [Bitmap Font Creator](http://localhost:3000/docs/category/game-asset-structure) if you need to create a Bitmap Font.|  |
-
-
-### item-description-no-odds
- Setup the `item-description-no-odds` prefab for items that have a description but no win payout:
-
- 
-
- | Step | Action | Image Reference |
- | :--: | :----- | :-------------: |
- | 1 | - Setup the **Sprite Frame** in the `background` using the prepared assets. |
 |
- | 2 | - Name the item prefab following the format item-description-**name**".
- Setup **Animation Name** to match the item's name in the **Animation Provider**.|  |
- | 3 | - Setup the **Sprite Frame** in the `sprite-item` using the same name as the item from the prepared assets. |  |
- | 4 | - Set the **String** and adjust **Color**, **Font** and **Font Size** in the `description` according to the game design.
- Use [Bitmap Font Creator](http://localhost:3000/docs/category/game-asset-structure) if you need to create a Bitmap Font. |  |
-
-### item-description-big
- Setup the `item-description-big` prefab for items that include both a win payout and a description:
-
- 
-
- | Step | Action | Image Reference |
- | :--: | :----- | :-------------: |
- | 1 | - Setup the **Sprite Frame** in the `background` using the prepared assets. |
 |
- | 2 | - Setup the payout by following **Step 4** in **Setup prefab `item-description-small`** | [Configure Item Description Small](./item-description#item-description-small) | |
- | 3 | - Setup the description by following **Step 4** in **Setup prefab `item-description-no-odds`** | [Configure Item Description No Odds](./item-description#item-description-no-odds) | |
-
-:::tip
- Use Helper to setup:
- 1. Setup **Content Size** and **Cell Item Size** according to the game design.
- 2. Use prepared bitmap fonts to Setup the **Labels** font.
- 3. Click **Set Size** to run the helper.
- 4. Setup the **Background**, **Sprite Frame**, **Animation**, **Payout**, **Description** of the item using the prepared assets.
-
- 
-:::
\ No newline at end of file
+**Tip**:
+- Use the helper tool to configure:
+ 1. Set **Content Size** and **Cell Item Size** per game design.
+ 2. Use prepared bitmap fonts for **Labels**.
+ 3. Click **Set Size** to run the helper.
+ 4. Configure **Background**, **Sprite Frame**, **Animation**, **Payout**, and **Description** using prepared assets.
+ - 
\ No newline at end of file
diff --git a/docs/02-setup-main-game/05-main-scene/08-free-round.md b/docs/02-setup-main-game/05-main-scene/08-free-round.md
index 2d1c63b..fc5a816 100644
--- a/docs/02-setup-main-game/05-main-scene/08-free-round.md
+++ b/docs/02-setup-main-game/05-main-scene/08-free-round.md
@@ -1,128 +1,67 @@
---
-sidebar_position: 16
+sidebar_position: 8
title: Free Round
description: Display and manage remaining free rounds in the game.
---
-# Free Round
+# Free Round System
## Overview
-
-- Handles the **display** and **logic** for tracking remaining free rounds in a slot game.
-- Supports both **desktop** and **mobile**, including animation and event handling.
+The **Free Round** system manages the display and logic for tracking remaining free rounds in the game, supporting both desktop and mobile platforms.
| Platform | Preview |
|----------|---------|
-| Desktop |  |
-| Mobile |  |
+| Desktop |  |
+| Mobile |  |
----
+## Asset Preparation
+- **Core Assets**:
+ - Path: `assets/core-assets/hyper-core/packages/freeround-count-box/prefabs`
+ - 
+- **Game Assets**:
+ - Path: `assets/game-assets/prefabs`
+ - 
+## Setup
+1. **General Configuration**:
+ - Ensure script references correct nodes.
+ - 
+ - Properties:
+ | Property | Description |
+ |----------|-------------|
+ | `duration` | Duration of fade in/out animation (seconds). |
+ | `content` | Container node for the counter. |
+ | `labelLeft` | Label showing remaining free rounds. |
+ - 
-## Implementation
+2. **Platform Setup**:
+ - **Desktop**:
+ - Add `Platform-ui-controller` component.
+ - 
+ - **Mobile**:
+ - Add `Platform-ui-controller` and `UI Mobile Position` components.
+ - 
-### Prepare Assets
+3. **Asset Setup**:
+ - **Desktop**:
+ - Path: `assets/game-assets/textures/desktop/preloads/main-game/custom-scale`
+ - 
+ - **Mobile**:
+ - Path: `assets/game-assets/textures/mobile/preloads/main-game/custom-scale`
+ - 
+ - **Common**:
+ - Free Round Background: 
-- Copy or parse prefabs from core to game assets.
+4. **Font Setup**:
+ - 
-#### Core
-
-| Path | Preview |
-|------|---------|
-| `assets/core-assets/hyper-core/packages/freeround-count-box/prefabs` |  |
-
-#### Game
-
-| Path | Preview |
-|------|---------|
-| `assets/game-assets/prefabs` | |
-
----
-
-### Setup
-
-- Ensure the script references the correct nodes.
-
-
-
-- Manages and displays the remaining free round count in-game.
-
-"
-
-| Property | Description |
-|---------------|--------------------------------------------|
-| `duration` | Duration of fade in/out animation (seconds) |
-| `content` | Container node for the counter |
-| `labelLeft` | Label showing remaining free rounds |
-
----
-
-#### Platform Setup
-
-- Ensure that the desktop and mobile prefabs are positioned differently in the main game scene for proper layout on each platform.
-
-##### Desktop
-
-
-
-| Component | Description |
-|-------------------------|-------------|
-| `Platform-ui-controller` | [View Setup](/docs/faqs/setup-cocos-scene#platform-ui-controller) |
-
-
-##### Mobile
-
-
-
-| Component | Description |
-|-------------------------|-------------|
-| `Platform-ui-controller` | [View Setup](/docs/faqs/setup-cocos-scene#platform-ui-controller) |
-| `UI Mobile Position` | [Mobile Position Setup](/docs/faqs/setup-cocos-scene#ui-mobile-landscape--portrait--position) |
-
----
-
-#### Asset Setup
-
-##### Desktop
-
-| Path | Preview |
-|------|---------|
-| `assets/game-assets/textures/desktop/preloads/main-game/custom-scale` |  |
-
-##### Mobile
-
-| Path | Preview |
-|------|---------|
-| `assets/game-assets/textures/mobile/preloads/main-game/custom-scale` |  |
-
-##### Common
-
-- **Free Round Background**
- 
-
-π More: [Game Asset Structure](/docs/category/game-asset-structure)
-
-:::tip
-- **Position & Size**: Follow the game design layout.
-- **Asset Packing**: Use separate textures for Desktop and Mobile.
-:::
-
----
-
-#### Font Setup
-
-| Preview |
-|---------|
-|  |
-
----
+**Tip**:
+- Follow game design for position and size.
+- Use separate textures for Desktop and Mobile.
+- Ensure the main scene includes the popup panel ([See Popup Panel Guide](http://localhost:3000/docs/setup-main-game/main-scene/popup-panel#multiple-popup-panel)).
## Game Result Example
-
-Make sure the main scene includes the popup panel.
-π [See Popup Panel Guide](/docs/setup-main-game/main-scene/popup-panel#multiple-popup-panel)
-
-| Platform | Popup | Action | Result |
-|----------|--------|---------------|--------|
-| Desktop |  | Click β Start |  |
-| Mobile |  | Click β Start |  |
+| Platform | Popup | Action | Result |
+|----------|-------|--------|--------|
+| Desktop |  | Click β Start |  |
+| Mobile |  | Click β Start |  |
\ No newline at end of file
diff --git a/docs/02-setup-main-game/05-main-scene/09-info-pages.md b/docs/02-setup-main-game/05-main-scene/09-info-pages.md
index 44c8c09..ef2367a 100644
--- a/docs/02-setup-main-game/05-main-scene/09-info-pages.md
+++ b/docs/02-setup-main-game/05-main-scene/09-info-pages.md
@@ -4,107 +4,95 @@ sidebar_position: 9
# Info Pages
-Info Pages (Information Pages) provide players with essential details about how the game works. It helps player understand the rules, features, symbols, payout structures, and other gameplay mechanics.
-
----
## Overview
+**Info Pages** provide players with details about game rules, features, symbols, payout structures, and mechanics. They are divided into **Paytable** and **Rules** sections, with different layouts for Desktop and Mobile.
-- **Desktop** consists Paytable and Rules in **Info Pages**.
-- **Mobile** is divided into 2 parts Paytable and Rules
+| Platform | Desktop | Mobile |
+|----------|---------|--------|
+| Paytable/Rules | 

 | 
 |
-|Desktop | Mobile |
-|:------:|:------:|
-|||
-|
||
-
-## Prepare the assets
+## Asset Preparation
| Assets | Description |
|--------|-------------|
-||Used to setup **Rules** or image in RichText|
-||Used to setup **Paytable**|
+|  | Used for **Rules** or RichText images. |
+|  | Used for **Paytable** setup. |
-## Setup Prefabs Desktop
-
-| Step | Action | Description | Image Reference |
-| :--: | :----- | :---------- | :---------------------------------------------------------------------------------------------: |
-| 1 | Locate all template prefabs need for **Info Pages Desktop** | Search for the `desktop-hyper-info-panel` prefab. |  |
-| 2 | Clone assets| Copy/Pase to game assets location, then rename the copied prefabs by removing unnecessary prefixes. |  |
+## Desktop Setup
+1. **Locate Template Prefabs**:
+ - Search for the `desktop-hyper-info-panel` prefab.
+ - 
+2. **Clone Assets**:
+ - Copy and paste to the game assets location, removing unnecessary prefixes.
+ - 
### desktop-info-panel
-
- | Step | Action | Image Reference |
- | :--: | :----- | :-------------: |
- | 1 | Change **Color** in `page-background` follow the game design.|
 |
- | 2 | Change **Color** in `menu-header-background` follow the game design. |  |
- | 3 | Update **Prefab** in `paytable-content` from prepared prefabs. |  ||
- | 4 | Update **Prefab** in `rules-content` from prepared prefabs.|  |
+| Step | Action | Image Reference |
+|------|--------|-----------------|
+| 1 | Change **Color** in `page-background` per game design. |  |
+| 2 | Change **Color** in `menu-header-background` per game design. |  |
+| 3 | Update **Prefab** in `paytable-content` using prepared prefabs. |  |
+| 4 | Update **Prefab** in `rules-content` using prepared prefabs. |  |
### desktop-paytable-content
+- **Item with Payout**:
+ - 
+ - Steps:
+ | Step | Action | Image Reference |
+ |------|--------|-----------------|
+ | 1 | Set **Item Name** and **Odds Items** per game design. |  |
+ | 2 | Set **Sprite Frame** in `item-display` using prepared assets. |  |
+ | 3 | Change **Color** in `multi-x...` and `odds-x...` per game design. |  |
+ | 4 | Adjust **Font** and **Font Size** in `multi-x...` and `odds-x...`. Use [Bitmap Font Creator](http://localhost:3000/docs/category/game-asset-structure) if needed. |  |
-- Paytable: Consist **Item with Payout** and **Item with Description**.
+- **Item with Description**:
+ - 
+ - Steps:
+ | Step | Action | Image Reference |
+ |------|--------|-----------------|
+ | 1 | Set **Name** per game design. |  |
+ | 2 | Set **Sprite Frame** in `item-display` using prepared assets. |  |
+ | 3 | Change **String** in `description` per game design. |  |
- - Setup **Item with Payout**:
-
- 
-
- | Step | Action | Image Reference |
- | :--: | :----- | :-------------: |
- | 1 | Setup Item with **Item Name** and **Odds Items** follow the game design.|
 |
- | 2 | Setup **Sprite Frame** in `item-display` same name with item from prepared assets. |  |
- | 3 | Change **Color** in `multi-x...` and `oods-x...` follow the game design. |  ||
- | 4 | - Change **Font** and **Font Size** in `multi-x...` and `oods-x...` follow the game design.
- Use [Bitmap Font Creator](http://localhost:3000/docs/category/game-asset-structure) to create Font Bitmap if you need it.|  |
-
- - Setup **Item with Description**:
-
- 
-
- | Step | Action | Image Reference |
- | :--: | :----- | :-------------: |
- | 1 | Setup Item with **Name** follow the game design. |
 |
- | 2 | Setup **Sprite Frame** in `item-display` same name with item from prepared assets. |  |
- | 3 | Change **String** in `description` follow the game design. |  |
-
-- Feature Game: Depending on each game, there will be different feature: **FREESPIN BONUS**, **BONUS FEATURE**, ...
-
- - Title : Change **String** and **Color** in `freespins-bonus-title` follow the game design.
- - Image : Setup **Sprite Frame** `freespins-bonus-image-...` use from prepared assets.
- - Description: Change **String** in `freespins-bonus-description` ollow the game design.
-
-| Overivew | Configure |
-| :--------------: | :------------------: |
-|  |  |
-|  |  |
+- **Feature Game**:
+ - Configure based on game features (e.g., **FREESPIN BONUS**, **BONUS FEATURE**):
+ - **Title**: Update **String** and **Color** in `freespins-bonus-title`.
+ - **Image**: Set **Sprite Frame** in `freespins-bonus-image-...` using prepared assets.
+ - **Description**: Update **String** in `freespins-bonus-description`.
+ - 
+ - 
+ - 
+ - 
### desktop-rules-content
- There are 2 types: **Lines** and **Ways**.
- 1. Setup **Sprite Frame** in `lines-image` from prepared assets.
- 2. Change **Color** in `lines-title` follow game desgin.
- 3. If the game is **Ways**:
- - Change **String** in `lines-title` is **WIN WAYS/DYNAWAYS**.
- - Enable and update **String** in `lines-description`.
+- Types: **Lines** or **Ways**.
+- Steps:
+ 1. Set **Sprite Frame** in `lines-image` using prepared assets.
+ 2. Change **Color** in `lines-title` per game design.
+ 3. For **Ways**:
+ - Update **String** in `lines-title` to **WIN WAYS/DYNAWAYS**.
+ - Enable and update **String** in `lines-description`.
+ - 
+ - 
+ - 
+ - 
-| Overivew | Configure |
-| :--------------: | :------------------: |
-|  |  |
-|  |  |
+## Mobile Setup
+1. **Locate Template Prefabs**:
+ - Search for the `mobile-ui` prefab.
+ - 
+2. **Clone Assets**:
+ - Copy and paste to the game assets location, removing unnecessary prefixes.
+ - 
+3. **Configure Prefabs**:
+ - Configure `mobile-paytable-content` and `mobile-rules-content` as described in [Desktop Setup](#desktop-setup).
+4. **Spawner Positions**:
+ - For **Paytable**: Use `mobile-paytable-content-spawner` in the `mobile-ui` prefab.
+ - 
+ - For **Rules**: Use `mobile-rule-content-spawner` in the `mobile-ui` prefab.
+ - 
-## Setup Prefabs Mobile
-
-| Step | Action | Description | Image Reference |
-| :--: | :----- | :---------- | :-------------: |
-| 1 | Locate all template prefabs need for **Info Pages Mobile**| Search for the `mobile-ui` prefab. |
 |
-| 2 | Clone assets| Copy/Pase to game assets location, then rename the copied prefabs by removing unnecessary prefixes. |  |
-| 3 | Configure prefabs| We will configure `mobile-paytable-content` and `mobile-rules-content` the same as configure for desktop. | [Configure prefabs Desktop](./info-pages#setup-prefabs-desktop) |
-| 4 | Locate **Paytable** spawner position in `mobile-ui`, then use prefab configured.| Search for the `mobile-paytable-content-spawner` in `mobile-ui` prefab. |  |
-| 5 | Locate **Rules** spawner position in `mobile-ui`, then use prefab configured.| Search for the `mobile-rule-content-spawner` in `mobile-ui` prefab. |
 |
-
-:::tip
-
-If the game already have server, we will check config settings from server.
-
-1. Run DevTools on Browser, on tab **Network** find message with **event** = "config".
-
-2. Check values in **paytable** and compare it with what we've done.
-
-
-:::
\ No newline at end of file
+**Tip**:
+- If the game has a server, verify config settings:
+ 1. Open DevTools, navigate to the **Network** tab, and find the message with **event** = "config".
+ 2. Compare **paytable** values with the configured setup.
+ - 
\ No newline at end of file
diff --git a/docs/02-setup-main-game/05-main-scene/10-desktop-bottom-bar-ui.md b/docs/02-setup-main-game/05-main-scene/10-desktop-bottom-bar-ui.md
index 2a67f13..e19ca38 100644
--- a/docs/02-setup-main-game/05-main-scene/10-desktop-bottom-bar-ui.md
+++ b/docs/02-setup-main-game/05-main-scene/10-desktop-bottom-bar-ui.md
@@ -1,99 +1,58 @@
---
sidebar_position: 10
---
-# Bottom Bar UI (Desktop)
-### Overview
-- Full bottom bar with all controls visible
-- Horizontal layout maximizing screen width
+# Desktop Bottom Bar UI
-
+## Overview
+The **Bottom Bar UI** provides a functional interface for gameplay controls on desktop, using a horizontal layout to maximize screen width.
-### Step 1: Set Up Prefab Editor
+
-| Step | Action | image |
-|------|---------|--------------|
-| 1. Locate Prefab | Search for `ui-bottom-bar-panel` prefab |  |
-| 2. Find Assets | Navigate to `core/editor` directory |  |
-| 3. Clone Assets | Copy / Paste to game assets location |  |
+## Implementation
+1. **Set Up Prefab Editor**:
+ - **Locate Prefab**:
+ - Search for `ui-bottom-bar-panel` prefab.
+ - 
+ - **Find Assets**:
+ - Navigate to `core/editor` directory.
+ - 
+ - **Clone Assets**:
+ - Copy and paste to the game assets location.
+ - 
----
+2. **Configure Prefabs**:
+ - **Core Prefabs Structure**:
+ - Path: `assets/core-assets/hyper-core/packages/ui/desktop-ui/prefabs`
+ - 
+ - **Rename Prefabs**:
+ - Remove unnecessary prefixes:
+ | Prefix to Remove | Original Name | Final Name |
+ |------------------|---------------|------------|
+ | `template-new-` | `template-new-ui-bottom-bar-panel` | `ui-bottom-bar-panel` |
+ | `template-` | `template-button-auto-selection` | `button-auto-selection` |
+ - 
+ - **Customize `button-auto-selection` Label**:
+ - Use `template-label-auto-selection` to adjust appearance.
+ - Add **Label Outline** and **Label Shadow** for better readability.
+ - 
+ - **Customize `ui-bottom-bar-panel` Label**:
+ - Use `assets/game-assets/editor/bottom-ui/template-label-title`.
+ - Include a localization component for multi-language support.
+ - 
+ - **FormatText Properties**:
+ | Property | Description | Example |
+ |----------|-------------|---------|
+ | `default` | Initial formatting state | `false` |
+ | `notify` | Formatting update callback | Updates when value changes |
-### Step 2: Configure Prefabs
+3. **Set Up UI in Main Scene**:
+ - Create a new node and configure in the main scene.
+ - 
-#### Core Prefabs Structure
-Navigate to the location where the prefabs: `assets\core-assets\hyper-core\packages\ui\desktop-ui\prefabs\`
-
+4. **Apply Textures**:
+ - Ensure assets for bottom UI and button UI text are complete.
+ - 
-#### Rename Prefabs
-Rename the copied prefabs by removing unnecessary prefixes:
-| Prefix to Remove | Original Prefab Name | Final Name |
-|------------------|----------------------|------------|
-| `template-new-` | `template-new-ui-bottom-bar-panel` | `ui-bottom-bar-panel` |
-| `template-` | `template-button-auto-selection` | `button-auto-selection` |
-
-
-```jsx title="The folder structure is as follows:"
- assets\game-assets\prefabs
-```
-
-
-
-
-#### Customize *`button-auto-selection`* Label
-
-**Follow Design:**
-Use the `template-label-auto-selection` to customize the appearance of the label inside the `button-auto-selection` prefab.
-
-| Component | Description |
-| -------------------- | ------------------------------------------------- |
-| **Label Outline** | Add an outline to make the text stand out. |
-| **Label Shadow** | Add a shadow for better contrast and readability. |
-| -------------------- | ------------------------------------------------- |
-
-
-
-#### Customize *`ui-bottom-bar-panel`* Label
-Use `assets\game-assets\editor\bottom-ui\template-label-title` to customize the `ui-bottom-bar-panel`:
-:::info
-π[Follow the same configuration as Button Auto Selection Labels](#customize-button-auto-selection-label)
-Bottom bar labels include a localization component for multi-language support
-:::
-
-
-
-The `FormatText` property controls text formatting behavior for label components:
-
-| Property | Description | Example |
-|----------|-------------|---------|
-| `default` | Initial formatting state | `false` |
-| `notify` | Formatting update callback | Updates when value changes |
-
----
-
-### Step 3: Set Up UI In Main Scenes
-
-Create new node and configuration in your main scene:
-
-
-#### Platform Node Spawner Settings
-
-π Details: [Platform Node Spawner](http://localhost:3000/docs/faqs/setup-cocos-scene#platform-node-spawner)
-
-### Step 4: Apply Textures
-
-#### Texture Button Bar
-Checklist assets completed for bottom UI and button UI text
-:::info
-π Details: [Game Asset Structure](http://localhost:3000/docs/category/game-asset-structure)
-:::
- 
-
-#### Run the Helper Tool
-
-To configure the bottom bar UI helper.
-:::info
-πDetails: [UI Bottom Bar Desktop Helper](http://localhost:3000/docs/submodule/hyper-editor-package#mobile-ui-helper)
-:::
-
----
\ No newline at end of file
+5. **Run Helper Tool**:
+ - Configure the bottom bar UI using the helper tool.
\ No newline at end of file
diff --git a/docs/02-setup-main-game/05-main-scene/11-ui-mobile-panel.md b/docs/02-setup-main-game/05-main-scene/11-ui-mobile-panel.md
index 6a69ede..4f4324c 100644
--- a/docs/02-setup-main-game/05-main-scene/11-ui-mobile-panel.md
+++ b/docs/02-setup-main-game/05-main-scene/11-ui-mobile-panel.md
@@ -1,106 +1,96 @@
---
sidebar_position: 11
---
+
# Mobile UI Panel
-### Overview
-The mobile interface adapts to both landscape and portrait orientations:
+## Overview
+The Mobile UI provides a responsive interface for gameplay controls, adapting to both **Landscape** and **Portrait** orientations on mobile devices.
-| Orientation | Preview |
-|-------------|----------|
+| Orientation | Preview |
+|-------------|---------|
| Landscape |  |
-| Portrait | 
+| Portrait |  |
+## Implementation
### Step 1: Set Up Prefabs
+Configure the necessary prefabs for the Mobile UI.
-| Step | Action | Description | Image Reference |
-| ---- | --------------------------- | ----------------------------------------------- | ------------------------------------------------------------------- |
-| 1 | Locate `mobile-ui` Prefab | Search for the `mobile-ui` prefab |  |
-| 2 | Clone Assets | Copy the required assets |  |
-| 3 | Paste Assets | Paste into: `assets/game-assets/prefabs/mobile` | - |
-| 4 | Locate `buy-feature` Prefab | Search for the `buy-feature` prefab |  |
-| 5 | Paste Prefab | Paste into: `assets/game-assets/prefabs/mobile` | - |
+| Step | Action | Description | Image Reference |
+|------|--------|-------------|-----------------|
+| 1 | Locate `mobile-ui` Prefab | Search for the `mobile-ui` prefab in the project assets. |  |
+| 2 | Clone Assets | Copy the required assets to the game assets directory. |  |
+| 3 | Paste Assets | Paste into: `assets/game-assets/prefabs/mobile`. | - |
+| 4 | Locate `buy-feature` Prefab | Search for the `buy-feature` prefab. |  |
+| 5 | Paste Prefab | Paste into: `assets/game-assets/prefabs/mobile`. | - |
-
-:::tip File Structure
-Maintain this directory structure for proper prefab references:
+**Tip**: Maintain the following directory structure for proper prefab references:
```
assets/
βββ game-assets/
βββ prefabs/
βββ mobile/
- βββ Exp: mobile-ui.prefab
- βββ Exp: buy-feature.prefab
+ βββ mobile-ui.prefab
+ βββ buy-feature.prefab
```
-:::
-### Step 2: Rename Prefabs
+### Step 2: Rename Prefabs
+Rename the copied prefabs by removing unnecessary prefixes to ensure consistency.
-Rename the copied prefabs by removing unnecessary prefixes:
-| Prefix to Remove | Final Name |
-|------------------|----------------------|
-| `template-` | |
+| Prefix to Remove | Example |
+|------------------|---------|
+| `template-` |  |
-### Step 3: Configure UI in Main Scenes
+### Step 3: Configure UI in Main Scene
+Add and configure a new node in the main scene to integrate the Mobile UI.
-Create new node and configuration in your main scene:
-
+
-#### Platform Node Spawner Settings
+**Platform Node Spawner Settings**:
-π Details: [Platform Node Spawner](http://localhost:3000/docs/faqs/setup-cocos-scene#platform-node-spawner)
+### Step 4: Apply Textures
+Ensure all Mobile UI assets are prepared and applied correctly.
-### Step 4: Apply Textures
+
-#### Texture Mobile UI
+**Run the Helper Tool**:
+- Use the Mobile UI helper tool to configure the UI components.
-Checklist assets completed for Mobile UI
+### Step 5: Set Color Theme for Mobile UI
+Customize the color theme for the Mobile UI using the `helper-paint-color-ui-mobile.js` component to apply theme-based colors across UI elements.
-:::info
-πDetails [Game Asset Structure](http://localhost:3000/docs/category/game-asset-structure)
-:::
- 
+**Follow Design**:
+| Landscape | Portrait |
+|-----------|----------|
+|  |  |
-#### Run the Helper Tool
+**Configuration Steps**:
+1. **Access the Helper Component**:
+ - Locate the `helper-paint-color-ui-mobile.js` component in the node inspector.
+ - 
-To configure the mobile UI helper.
-:::info
-πDetails: [Mobile Ui Helper](http://localhost:3000/docs/submodule/hyper-editor-package#mobile-ui-helper)
-:::
+2. **Configure Color Properties**:
+ - Adjust the following properties to match the game design:
-
+| # | Property | Description | Example |
+|---|----------|-------------|---------|
+| 0 | **Paint Color** | Triggers repainting of UI components. |  |
+| 1 | **Main UI Normal Color** | Default color for UI elements (e.g., Buy, Close, Auto). |  |
+| 2 | **Main UI Highlight Color** | Color for highlighted or selected UI elements. |  |
+| 3 | **Toggle State Off Color** | Color for toggles in the off state. |  |
+| 4 | **Toggle State On Color** | Color for toggles in the on state. |  |
+| 5 | **Background Info Page Color** | Background color for info pages. |  |
+| 6 | **Background Menu Color** | Background color for menus. |  |
+| 7 | **Background Point Panel Color** | Background color for point/balance panels. |  |
+| 8 | **Background Bottom Bar Color** | Background color for the bottom bar (Portrait only). |  |
+| 9 | **Button Quit Color** | Color for the Quit button. |  |
+| 10 | **Button Cancel Color** | Color for the Cancel button. |  |
+| 11 | **Label Balance Normal Color** | Color for the balance label in normal state. |  |
+| 12 | **Label Balance Spin Color** | Color for the balance label during spins. |  |
+| 13 | **Button Plus/Minus Auto Color** | Color for Plus/Minus buttons in autoplay. |  |
+| 14 | **Label Start Auto Color** | Color for the Start Autoplay label. |  |
+| 15 | **Label Outline Notification** | Outline color and width for notifications. |  |
+| 16 | **Total Win Medium Win Color** | Color for medium win labels. |  |
-### Step 5: Set Color Theme for Mobile Menu UI
-
-#### Follow Design:
-
-| |  |
-|---------|-------|
-
-#### Overview
-The `helper-paint-color-ui-mobile.js` component is a customizable color painter for various UI elements in a MOBILE UI. It allows designers and developers to easily apply theme-based colors across the game interface.
-
-
-
-|Ordinal number| Properties | Explaination | Example |
-|--------------|-------------------------------------|--------------------------------------------|--------------------------------------------------------------------------------------------------|
-|0 |**paintColor** |Trigger to repaint UI components | |
-|1 | **Main Ui Normal Color** |Default color of UI elements |  |
-|2 | **Main Ui Highlight Color** | Highlight color for selected UI elements |  |
-|3 | **Toggle State Off Color** | Color of toggle when off |  |
-|4 | **Toggle State On Color** | Color of toggle when on |  |
-|5 | **Background Info Page Color** | Info screen background |  |
-|6 | **Background Menu Color** | Menu background color |  |
-|7 | **Background Point Panel Color** | Background panel for point/balance UI | |
-|8 | **Background Bottom Bar Color** | Background bottom bar (show only mobile portrait) |  |
-|9 | **Button Quit Color** | Quit button color |  |
-|10 | **Button Cancel Color** | Cancel button color |  |
-|11 | **Label Balance Normal Color** | Normal balance label color |  |
-|12 | **Label Balance Spin Color** | During-spin label color |  |
-|13 | **Button Plus Minus Auto Color** | Button plus/Minus autoplay | |
-|14 | **Label Start Auto Color** | Start autoplay label |  |
-|15 | **Label Outline Notification** | Outline color + width config | |
-|16 | **Total Win Medium Win Color** | Color for label medium win |  |
-
----
\ No newline at end of file
+**Tip**: Ensure color values align with the gameβs visual design specifications.
\ No newline at end of file
diff --git a/docs/02-setup-main-game/05-main-scene/12-popup-panel.md b/docs/02-setup-main-game/05-main-scene/12-popup-panel.md
index aca866c..8d31634 100644
--- a/docs/02-setup-main-game/05-main-scene/12-popup-panel.md
+++ b/docs/02-setup-main-game/05-main-scene/12-popup-panel.md
@@ -2,61 +2,47 @@
sidebar_position: 12
---
-
# Popup Panel
-### Overview
-
-A popup is a temporary UI element that overlays the main content to provide additional information or options to the user.
-
-||||
-|---------------------------------------------------------------|---------------------------------------------------------------------|---------------------------------------------------------------------|
+## Overview
+The **Popup Panel** is a temporary UI element that overlays the main game content to display additional information or user options, such as exit prompts or disconnection notices.
+| Exit Popup | Disconnect Popup | Credit Popup |
+|------------|------------------|--------------|
+|  |  |  |
## Multiple Popup Panel
-The popup panel is already integrated into the main scenes `template-main-game`.
+The **Multiple Popup Panel** is pre-integrated into the main scene via the `template-main-game` prefab, allowing multiple popups to be managed efficiently.
-
+
- Detail configuring:
-
-#### Base Setting
-
-:::info
-
-
-To use the Multiple Popup layout, reference target `hyper-multiple-popup.prefab` in core:
-
-**Path** : *assets/core-assets/hyper-core/packages/popup-panel/prefabs/hyper-multiple-popup.prefab*
-:::
+**Base Settings**:
+- **Prefab**: `hyper-multiple-popup.prefab`
+- **Path**: `assets/core-assets/hyper-core/packages/popup-panel/prefabs/hyper-multiple-popup.prefab`
+- **Configuration**: Reference the prefab in the main scene to enable multiple popup layouts.
+- 
## Manual Popup Panel
+Manually configured popups allow for custom textures and layouts, tailored to the gameβs design. Note that the **Exit Game** popup is exclusive to the Desktop platform.
-:::info
-- This popup is self-configured using shared textures and layout structure.
-- The color theme and style may vary depending on the game design.
-- Note: **Exit Game** Popup only in **Desktop**.
-:::
+**Setup Steps**:
+1. **Prepare Assets**:
+ - **Path**: `assets/game-assets/textures/desktop/preloads/main-game/exit`
+ - **Example**: 
-#### Pack Assets
+2. **Configure Prefabs**:
+ - Locate and clone the popup prefab to `assets/game-assets/prefabs`.
+ - Structure the prefab as shown:
+ - 
-- *Prepare asset to pack*.
+3. **Apply Textures**:
+ - Manually drag and drop images onto the corresponding nodes in the editor.
+ - 
-π Click here to follow the setup pack assets: [Here](http://localhost:3000/docs/category/game-asset-structure)
+4. **Preview Result**:
+ - Verify the popup displays correctly in the game.
+ - 
-| Path | Example |
-|---------------------------------|-----------------------------------------------------|
-|`assets\game-assets\textures\desktop\preloads\main-game\exit`||
-
-- Structure prefabs:
-
-
-
-- Manually drag and drop the image onto the node:
-
-
-
-**Preview Result**:
-
-
----
\ No newline at end of file
+**Tip**:
+- Ensure textures align with the gameβs color theme and design specifications.
+- Test the popup on Desktop to confirm functionality for the Exit Game feature.
\ No newline at end of file
diff --git a/docs/02-setup-main-game/05-main-scene/13-game-logo.md b/docs/02-setup-main-game/05-main-scene/13-game-logo.md
index 31a3108..b02997d 100644
--- a/docs/02-setup-main-game/05-main-scene/13-game-logo.md
+++ b/docs/02-setup-main-game/05-main-scene/13-game-logo.md
@@ -5,126 +5,112 @@ sidebar_position: 13
# Game Logo
## Overview
-The game logo is a crucial branding element that must be consistently displayed across all platforms and orientations.
+The **Game Logo** is a key branding element displayed consistently across all platforms and orientations to reinforce the gameβs identity.
| Platform | Orientation | Preview |
-|----------|------------|----------|
-| Desktop | Standard |  |
-| Mobile | Landscape |  |
-| Mobile | Portrait |  |
+|----------|-------------|---------|
+| Desktop | Standard |  |
+| Mobile | Landscape |  |
+| Mobile | Portrait |  |
## Implementation
### Prepare Assets
#### 1. Core Setup
-Location: `assets\core-assets\hyper-core\packages\hyper-logo-animation`
-
-```typescript
-// filepath: assets\core-assets\hyper-core\packages\logo-animation\hyper-logo-animation.js
-onLoad: function () {
- var self = this;
- // Initialize animation states
- self.animPlay = AnimationProvider.Instance.GetAnimation('anim-logo-play');
- self.animIdle = AnimationProvider.Instance.GetAnimation('anim-logo-idle');
-}
-```
+- **Location**: `assets/core-assets/hyper-core/packages/hyper-logo-animation`
+- **Script**: Initialize animation states for the logo.
+ ```typescript
+ // File: assets/core-assets/hyper-core/packages/logo-animation/hyper-logo-animation.js
+ onLoad: function () {
+ const self = this;
+ // Initialize animation states
+ self.animPlay = AnimationProvider.Instance.GetAnimation('anim-logo-play');
+ self.animIdle = AnimationProvider.Instance.GetAnimation('anim-logo-idle');
+ }
+ ```
#### 2. Required Assets
-##### Static Assets
+**Static Assets**:
| Platform | Location | Preview |
|----------|----------|---------|
-| Desktop | `assets\game-assets\textures\desktop\preloads\main-game\custom-scale` |  |
-| Mobile | `assets\game-assets\textures\mobile\preloads\main-game\custom-scale` |  |
+| Desktop | `assets/game-assets/textures/desktop/preloads/main-game/custom-scale` |  |
+| Mobile | `assets/game-assets/textures/mobile/preloads/main-game/custom-scale` |  |
-##### Animation Assets
+**Animation Assets**:
| Platform | Location | Preview |
|----------|----------|---------|
-| Desktop | `assets\game-assets\textures\desktop\postloads\main-game\animations` |  |
-| Mobile | `assets\game-assets\textures\mobile\postloads\main-game\animations` |  |
+| Desktop | `assets/game-assets/textures/desktop/postloads/main-game/animations` |  |
+| Mobile | `assets/game-assets/textures/mobile/postloads/main-game/animations` |  |
#### 3. Animation Settings
-1. Configure Provider
+1. **Configure Animation Provider**:
+ - Register the logo animations in the Animation Provider.
+ - 
- 
-
-2. Setup States
-
- - In `anim-logo-play` and `anim-logo-idle`,Enable static frame for loading state:
-
- 
-
- - Configure continuous loop playback:
-
- 
+2. **Set Up Animation States**:
+ - Enable a static frame for the loading state in `anim-logo-play` and `anim-logo-idle`.
+ - 
+ - Configure continuous loop playback for animations.
+ - 
### Setup
#### Desktop Configuration
+1. **Base Settings**:
+ - Configure the logo node in the main scene.
+ - 
-1. Base Settings
+2. **Node Setup**:
+ - Add the `hyper-logo-animation` component to the logo node.
+ - ```typescript
+ Components: {
+ animation: 'hyper-logo-animation',
+ }
+ ```
+ - 
- 
-
- π Details: [Platform UI Controller](http://localhost:3000/docs/faqs/setup-cocos-scene#platform-ui-controller)
-
-2. Node Setup
- ```typescript
- Components: {
- animation: 'hyper-logo-animation',
- }
- ```
- 
-
-:::tip
- - **Position And Size**: Follow Game Design.
-:::
+**Tip**: Adjust position and size according to the game design specifications.
#### Mobile Configuration
##### Landscape Mode
-
-1. Node Setup
-
- | Component | Description |
- |-------------------------------------------|--------------------------------------------------|
- | `hyper-logo-animation` | Plays and manages the logo animation |
- | `node-position-by-jackpot` | Moves the logo based on the jackpot display state |
- | `landscape-logo-spine-aspect-ratio-keeper`| Keeps the logo size consistent on all screens (**Exp: 1.0**) |
-
- 
+1. **Node Setup**:
+ - Configure the logo node with the following components:
+ | Component | Description |
+ |-----------|-------------|
+ | `hyper-logo-animation` | Plays and manages the logo animation. |
+ | `node-position-by-jackpot` | Adjusts logo position based on jackpot display state. |
+ | `landscape-logo-spine-aspect-ratio-keeper` | Maintains consistent logo size (e.g., 1.0). |
+ - 
##### Portrait Mode
+1. **Node Setup**:
+ - Configure the logo node with the following components:
+ | Component | Description |
+ |-----------|-------------|
+ | `hyper-logo-animation` | Plays and manages the logo animation. |
+ | `node-position-by-jackpot` | Adjusts logo position based on jackpot display state. |
+ | `spine-aspect-ratio-keeper` | Maintains consistent logo size (e.g., 1.0). |
+ - 
-1. Node Setup
+2. **Position Settings**:
+ - Adjust logo position based on jackpot state:
+ | State | Position | Example |
+ |-------|----------|---------|
+ | Jackpot Active | Upper position |  |
+ | Jackpot Inactive | Default position |  |
- | Component | Description |
- |----------------------------|--------------------------------------------------|
- | `hyper-logo-animation` | Plays and manages the logo animation |
- | `node-position-by-jackpot` | Moves the logo based on the jackpot display state |
- | `spine-aspect-ratio-keeper`| Keeps the logo size consistent on all screens (**Exp: 1.0** ) |
+3. **Size Settings**:
+ - Use the `spine-aspect-ratio-keeper` component to maintain logo proportions.
+ - 
+ - **Settings**:
+ | Setting | Description | Default Value |
+ |---------|-------------|---------------|
+ | **Default Scale** | Initial scale factor for the node. | Configurable (e.g., 1.0) |
+ | **Default Size** | Base width and height for scaling. | Configurable (e.g., 1050 x 1680) |
- 
-
-2. Position Settings
-
- | State | Position | Example |
- |-------|----------|---------|
- | Jackpot Active | Upper position |  |
- | Jackpot Inactive | Default position |  |
-
-3. Size Settings
-
- Using componet `spine-aspect-ratio-keeper` :
-
- 
-
- | Setting | Description | Default Value |
- | ----------------- | -------------------------------------------- | --------------------- |
- | **Default Scale** | Initial scale factor applied to the node | Configurable per game (**Exp: 1.0**) |
- | **Default Size** | Base width and height used for scaling logic | Configurable per game (**Exp: 1050 x 1680**) |
-
-:::tip
-- Check static logo display under slow network conditions.
-:::
\ No newline at end of file
+**Tip**:
+- Test the static logo display under slow network conditions to ensure fallback works.
+- Verify animation states (`play` and `idle`) for smooth transitions.
\ No newline at end of file
diff --git a/docs/02-setup-main-game/05-main-scene/15-jackpot-panel.md b/docs/02-setup-main-game/05-main-scene/15-jackpot-panel.md
index 436d8d1..3fd3fd6 100644
--- a/docs/02-setup-main-game/05-main-scene/15-jackpot-panel.md
+++ b/docs/02-setup-main-game/05-main-scene/15-jackpot-panel.md
@@ -1,82 +1,61 @@
---
sidebar_position: 15
---
-# Jackpot
----
+
+# Jackpot Panel
## Overview
+The **Jackpot Feature** offers multiple prize tiers, each with increasing value, providing players with frequent smaller wins and the chance for a large top prize. The panel is responsive, supporting both desktop and mobile layouts.
-- **Jackpot Feature** is a system where there are **multiple levels (tiers)** of prizes, usually increasing in value. This structure gives players a chance to win **smaller jackpots more frequently**, while still keeping a large top prize available.
+**Jackpot Tiers**:
+| Tier | Description | Preview |
+|------|-------------|---------|
+| Grand | The top prize, rare and often worth thousands or millions (progressive). |  |
+| Major | A significant prize, less frequent but substantial. |  |
+| Minor | A moderately valuable prize, relatively common. |  |
+| Mini | The smallest prize, easiest to win. |  |
-| Tier | Description | Preview |
-|-------|------------------------------|------------------------------------------------------------|
-| Grand | The top prize, very rare
and often worth thousands
or even millions(especially if it's progressive)| |
-| Major | A significant prize, harder to win. |  |
-| Minor | A bit higher in value, still fairly common. |  |
-| Mini | The smallest and easiest to win. |  |
-
-- The panel is responsive and supports both desktop and mobile layouts:
-
-| Orientation | Preview |
-|-------------|------------------------------------------------------------|
-| Desktop |  |
-| Mobile |  |
+**Platform Support**:
+| Orientation | Preview |
+|-------------|---------|
+| Desktop |  |
+| Mobile |  |
## Implementation
### Prepare Assets
-
-- Use the prefabs located at:
-
- |`assets/core-assets/jackpot-package/prefabs`||
- |--------------------------------------------|--------------------------------------------------------------------|
+- **Prefab Location**:
+ - Path: `assets/core-assets/jackpot-package/prefabs`
+ - Example: 
### Setup
-#### Jackpot runner
+#### Jackpot Runner
##### Desktop
-
-- The node jackpot to your main scene:
-
- 
-
- More info: [Platform Node Spawner](/docs/faqs/setup-cocos-scene#platform-node-spawner)
+1. **Add Node**:
+ - Integrate the jackpot node into the main scene.
+ - 
##### Mobile
+1. **Configure Node**:
+ - Set up the jackpot node for both landscape and portrait orientations.
+ - Use `UI Mobile Landscape Position` and `UI Mobile Portrait Position` components for responsiveness.
+ - 
-- Configure the jackpot node for both landscape and portrait orientations.
-
-- Use `UI Mobile landscape Position` and `UI Mobile portrait Position` for a responsive layout.
-
- 
-
- More info: [UI Mobile Position](/docs/faqs/setup-cocos-scene#ui-mobile-landscape--portrait--position)
-
-- Example using `Platform Node Spawner`:
-
- 
-
- More info: [Platform Node Spawner](/docs/faqs/setup-cocos-scene#platform-node-spawner)
+2. **Platform Node Spawner**:
+ - Example: 
#### Result Panel
+- Ensure the jackpot panel displays correctly across all platforms and orientations.
+- 
-- The jackpot panel works seamlessly across all platforms and orientations.
-
- 
-
- More info: [Node Spawner](/docs/faqs/setup-cocos-scene#node-spawner)
-
-:::tip
-- Follow the game design layout.
-:::
-
+**Tip**: Follow the game design layout for positioning and sizing.
## Game Result Examples
-
| Win Tier | Example |
-|----------|------------------------------------------------------------------|
-| Grand |  |
-| Major |  |
-| Minor |  |
-| Mini |  |
+|----------|---------|
+| Grand |  |
+| Major |  |
+| Minor |  |
+| Mini |  |
\ No newline at end of file
diff --git a/docs/02-setup-main-game/05-main-scene/16-idle-animation.md b/docs/02-setup-main-game/05-main-scene/16-idle-animation.md
index 3ca25e4..02901ec 100644
--- a/docs/02-setup-main-game/05-main-scene/16-idle-animation.md
+++ b/docs/02-setup-main-game/05-main-scene/16-idle-animation.md
@@ -1,26 +1,29 @@
---
sidebar_position: 16
---
+
# Idle Animation
----
-
## Overview
+The **Idle Animation** enhances the visual appeal of the game by animating slot symbols during idle states, providing a dynamic and engaging experience.
+
+| Static Preview | Animated Preview |
+|--------|-------------|
+|  |  |
- 
## Prepare the assets
| Assets | Description |
|--------|-------------|
-|  | Used to Setup the static sprite frame. |
-|  | Used to Setup the idle animation. |
+|  | Static sprite frame for the idle state. |
+|  | Animation assets for the idle animation. |
## Setup Idle Animation
### Configure Settings
- Create the following script:
+ Create a script to register the idle animation components with the dependency injection container.
```jsx title="assets/game-assets/scripts/slotty-settings/extend-slotty-setting.js"
var BaseSlottySetting = p4fslot.require('slotty-setting');
var DIContainer = p4fcore.require('di-container');
@@ -44,14 +47,18 @@ BaseSlottySetting.prototype._registerInjection = function () {

### Configure Scene
-1. Search for the `idle-animation-panel` prefab.
-2. Drag the "prefab" into "scene".
-3. Click "Generate Panel".
-
-
+1. **Locate Prefab**:
+ - Search for the `idle-animation-panel` prefab.
+2. **Add to Scene**:
+ - Drag the prefab into the main scene.
+3. **Generate Panel**:
+ - Click **Generate Panel** to set up the animation panel.
+ -
:::warning
-When using **prefab** directly from **core-assets**, you should convert to **Regular Node**.
+When using prefabs directly from `core-assets`, convert them to a **Regular Node** to avoid reference issues.

-:::
\ No newline at end of file
+:::
+
+**Tip**: Test the idle animation in the game to ensure smooth playback and proper looping.
\ No newline at end of file
diff --git a/docs/02-setup-main-game/05-main-scene/17-win-limit.md b/docs/02-setup-main-game/05-main-scene/17-win-limit.md
index 6ed6bc8..b8d8ad3 100644
--- a/docs/02-setup-main-game/05-main-scene/17-win-limit.md
+++ b/docs/02-setup-main-game/05-main-scene/17-win-limit.md
@@ -1,76 +1,54 @@
---
sidebar_position: 17
title: Win Limit
-description: Display limit win
+description: Display win limit popups during gameplay.
---
# Win Limit
## Overview
+The **Win Limit** system displays popups when specific win conditions are met, enhancing player feedback and interaction.
-#### Win Limit
+- **Win Limit Popup**: Appears when a playerβs win points reach a predefined threshold.
+ - 
+- **Gamble Win Limit Popup**: Triggered during the gamble feature when the maximum number of gamble attempts (typically 5) is reached.
+ - 
-- The **Win Limit** popup appears during gameplay when the player's win points reach a predefined threshold.
-
-
-
-#### Gamble Win Limit
-
-- The **Gamble Win Limit** popup is triggered during the gamble feature when the player reaches the maximum number of allowed gamble attempts (typically 5).
-
-
-
----
-
-### Prepare Assets
+## Prepare Assets
#### Prefab Location
-
-| Path | Prefab Name |
-|----------------------------------------------------------|------------------------------|
-| `assets/core-assets/hyper-core/packages/present/prefabs` | `present-win-limit-reached` |
+| Path | Prefab Name |
+|------|-------------|
+| `assets/core-assets/hyper-core/packages/present/prefabs` | `present-win-limit-reached` |
#### Scene Hierarchy
-
Place the prefab in the following scene structure:
-
```
Canvas
βββ [main-view]
βββ [game-view]
βββ [present-win-limit-reached]
```
+- 
-
-
----
-
-### Setup
+## Setup
#### Assets
+- Drag and drop the required images onto the corresponding nodes in the editor.
+- 
-- Drag and drop the required image onto the node in the editor:
-
-
-
-| Drag Sprite | Node Name |
-|-------------------------|-----------------------|
-| `you-won` | `you-won` |
-| `win-limit-reached` | `win-limit-reached` |
-| `gamble-limit-reached` | `gamble-limit-reached`|
-| `btn-normal` | `btn-continue` |
-| `text-continue` | `continue` |
-
+| Sprite | Node Name |
+|--------|-----------|
+| `you-won` | `you-won` |
+| `win-limit-reached` | `win-limit-reached` |
+| `gamble-limit-reached` | `gamble-limit-reached` |
+| `btn-normal` | `btn-continue` |
+| `text-continue` | `continue` |
#### Font
+- Use a custom font to match the win label style, aligning with the gameβs theme.
+- 
-- Use a **custom font** to match the win label style for your game theme.
-
-
-
----
-
-:::tip
-- Follow the game design layout for assets and fonts.
-- Win limit configuration may vary by game.
-:::
+**Tip**:
+- Follow the game design layout for asset placement and font styling.
+- Verify win limit configurations to ensure they match game-specific thresholds.
\ No newline at end of file
diff --git a/docs/02-setup-main-game/05-main-scene/18-Gamble.md b/docs/02-setup-main-game/05-main-scene/18-Gamble.md
index 5cdbe0e..c1757e3 100644
--- a/docs/02-setup-main-game/05-main-scene/18-Gamble.md
+++ b/docs/02-setup-main-game/05-main-scene/18-Gamble.md
@@ -8,7 +8,7 @@ description: Display Gamble
## Overview
-**Gamble** in slot games is a feature that lets players risk their winnings for a chance to double (or multiply) them, usually by guessing a card color.
+The **Gamble Feature** allows players to risk their winnings for a chance to double or multiply them, typically by guessing a cardβs color. It is supported across desktop and mobile platforms in both landscape and portrait orientations.
| Device Type | Preview |
|---------------|-----------------------------------------------------------------------------|
@@ -23,7 +23,7 @@ description: Display Gamble
#### Scene Hierarchy
-Place the node in the following scene structure:
+Place the gamble node in the following scene structure:
diff --git a/docs/02-setup-main-game/05-main-scene/18-buy-feature.md b/docs/02-setup-main-game/05-main-scene/18-buy-feature.md
index e8defb8..cf25e3e 100644
--- a/docs/02-setup-main-game/05-main-scene/18-buy-feature.md
+++ b/docs/02-setup-main-game/05-main-scene/18-buy-feature.md
@@ -6,8 +6,8 @@ sidebar_position: 18
---
## Overview
-
-
+The **Buy Feature** allows players to purchase direct access to bonus rounds, enhancing gameplay engagement.
+
## Implementation
@@ -15,20 +15,20 @@ sidebar_position: 18
| Assets | Description |
| :----: |-------------|
-|
| Used to Setup the static sprite frame. |
-|
 | Used to Setup the animations. |
-|
 | Used to Setup the label cost. |
+|
| Static sprite frame for the buy feature panel. |
+|
 | Animation assets for the buy feature button and panel. |
+|
 | Label for displaying the cost of the buy feature. |
|
 | - Search for the `template-shortcut-buy-feature-board` prefab.
- Copy and paste them to the game assets location, then rename the copied prefabs by removing unnecessary prefixes.|
### Setup Animations
-1. Using hepler to generate animations using the prepared assets
+1. **Generate Animations**:
+ - Use the helper tool to create animations from prepared assets.


-2. Configure Spine Animation
-
- Set **Is Loop** β
for `anim-button-open-buy-bonus-enable` and `anim-board-shortcut-buy-bonus-idle`.
+2. **Configure Spine Animation**:
+ - Set **Is Loop** β
for `anim-button-open-buy-bonus-enable` and `anim-board-shortcut-buy-bonus-idle`.

@@ -52,8 +52,9 @@ sidebar_position: 18
### Configure Scene
-
-1. Drag the `shortcut-buy-feature-panel`, `shortcut-buy-feature-board` into the **Scene** at this position.
-2. Update **Prefab** in the `shortcut-buy-feature-button`.
+1. **Add Prefabs**:
+ - Drag the `shortcut-buy-feature-panel`, `shortcut-buy-feature-board` into the **Scene** at this position.
+2. **Update Prefab**:
+ - Update **Prefab** in the `shortcut-buy-feature-button`.

\ No newline at end of file
diff --git a/docs/02-setup-main-game/img/05-main-scene/special-win-coin-internation.png b/docs/02-setup-main-game/img/05-main-scene/special-win-coin-international.png
similarity index 100%
rename from docs/02-setup-main-game/img/05-main-scene/special-win-coin-internation.png
rename to docs/02-setup-main-game/img/05-main-scene/special-win-coin-international.png
diff --git a/docs/06-submodule/_category_.json b/docs/06-submodule/_category_.json
index bdbd8f2..76a46d2 100644
--- a/docs/06-submodule/_category_.json
+++ b/docs/06-submodule/_category_.json
@@ -1,5 +1,5 @@
{
- "position": 10,
+ "position": 6,
"label": "Submodules",
"collapsible": true,
"collapsed": false,
diff --git a/docs/faqs/01-engine.md b/docs/07-faqs/01-engine.md
similarity index 100%
rename from docs/faqs/01-engine.md
rename to docs/07-faqs/01-engine.md
diff --git a/docs/faqs/02-setup-asset.md b/docs/07-faqs/02-setup-asset.md
similarity index 100%
rename from docs/faqs/02-setup-asset.md
rename to docs/07-faqs/02-setup-asset.md
diff --git a/docs/faqs/03-setup-cocos-scene.md b/docs/07-faqs/03-setup-cocos-scene.md
similarity index 100%
rename from docs/faqs/03-setup-cocos-scene.md
rename to docs/07-faqs/03-setup-cocos-scene.md
diff --git a/docs/faqs/04-core-library.md b/docs/07-faqs/04-core-library.md
similarity index 100%
rename from docs/faqs/04-core-library.md
rename to docs/07-faqs/04-core-library.md
diff --git a/docs/faqs/_category_.json b/docs/07-faqs/_category_.json
similarity index 87%
rename from docs/faqs/_category_.json
rename to docs/07-faqs/_category_.json
index 60862ae..a077dc3 100644
--- a/docs/faqs/_category_.json
+++ b/docs/07-faqs/_category_.json
@@ -1,4 +1,5 @@
{
+ "position": 7,
"label": "FAQS",
"collapsible": true,
"collapsed": false,
diff --git a/docs/faqs/img/ambslot.png b/docs/07-faqs/img/ambslot.png
similarity index 100%
rename from docs/faqs/img/ambslot.png
rename to docs/07-faqs/img/ambslot.png
diff --git a/docs/faqs/img/bug-report-1.png b/docs/07-faqs/img/bug-report-1.png
similarity index 100%
rename from docs/faqs/img/bug-report-1.png
rename to docs/07-faqs/img/bug-report-1.png
diff --git a/docs/faqs/img/bug-report-2.png b/docs/07-faqs/img/bug-report-2.png
similarity index 100%
rename from docs/faqs/img/bug-report-2.png
rename to docs/07-faqs/img/bug-report-2.png
diff --git a/docs/faqs/img/bug-report-3.png b/docs/07-faqs/img/bug-report-3.png
similarity index 100%
rename from docs/faqs/img/bug-report-3.png
rename to docs/07-faqs/img/bug-report-3.png
diff --git a/docs/faqs/img/cocos-icon.png b/docs/07-faqs/img/cocos-icon.png
similarity index 100%
rename from docs/faqs/img/cocos-icon.png
rename to docs/07-faqs/img/cocos-icon.png
diff --git a/docs/faqs/img/cocos-layout-2.png b/docs/07-faqs/img/cocos-layout-2.png
similarity index 100%
rename from docs/faqs/img/cocos-layout-2.png
rename to docs/07-faqs/img/cocos-layout-2.png
diff --git a/docs/faqs/img/cocos-layout.png b/docs/07-faqs/img/cocos-layout.png
similarity index 100%
rename from docs/faqs/img/cocos-layout.png
rename to docs/07-faqs/img/cocos-layout.png
diff --git a/docs/faqs/img/cocos-pick-color-2.png b/docs/07-faqs/img/cocos-pick-color-2.png
similarity index 100%
rename from docs/faqs/img/cocos-pick-color-2.png
rename to docs/07-faqs/img/cocos-pick-color-2.png
diff --git a/docs/faqs/img/cocos-pick-color.png b/docs/07-faqs/img/cocos-pick-color.png
similarity index 100%
rename from docs/faqs/img/cocos-pick-color.png
rename to docs/07-faqs/img/cocos-pick-color.png
diff --git a/docs/faqs/img/default-setting.png b/docs/07-faqs/img/default-setting.png
similarity index 100%
rename from docs/faqs/img/default-setting.png
rename to docs/07-faqs/img/default-setting.png
diff --git a/docs/faqs/img/editor-pattern.png b/docs/07-faqs/img/editor-pattern.png
similarity index 100%
rename from docs/faqs/img/editor-pattern.png
rename to docs/07-faqs/img/editor-pattern.png
diff --git a/docs/faqs/img/fa-chai.png b/docs/07-faqs/img/fa-chai.png
similarity index 100%
rename from docs/faqs/img/fa-chai.png
rename to docs/07-faqs/img/fa-chai.png
diff --git a/docs/faqs/img/funky-game.png b/docs/07-faqs/img/funky-game.png
similarity index 100%
rename from docs/faqs/img/funky-game.png
rename to docs/07-faqs/img/funky-game.png
diff --git a/docs/faqs/img/giocoplus.png b/docs/07-faqs/img/giocoplus.png
similarity index 100%
rename from docs/faqs/img/giocoplus.png
rename to docs/07-faqs/img/giocoplus.png
diff --git a/docs/faqs/img/goldy.png b/docs/07-faqs/img/goldy.png
similarity index 100%
rename from docs/faqs/img/goldy.png
rename to docs/07-faqs/img/goldy.png
diff --git a/docs/faqs/img/hot-dog.png b/docs/07-faqs/img/hot-dog.png
similarity index 100%
rename from docs/faqs/img/hot-dog.png
rename to docs/07-faqs/img/hot-dog.png
diff --git a/docs/faqs/img/joker.png b/docs/07-faqs/img/joker.png
similarity index 100%
rename from docs/faqs/img/joker.png
rename to docs/07-faqs/img/joker.png
diff --git a/docs/faqs/img/nextspin.png b/docs/07-faqs/img/nextspin.png
similarity index 100%
rename from docs/faqs/img/nextspin.png
rename to docs/07-faqs/img/nextspin.png
diff --git a/docs/faqs/img/orientation-ui-controller.png b/docs/07-faqs/img/orientation-ui-controller.png
similarity index 100%
rename from docs/faqs/img/orientation-ui-controller.png
rename to docs/07-faqs/img/orientation-ui-controller.png
diff --git a/docs/faqs/img/pgsoft.png b/docs/07-faqs/img/pgsoft.png
similarity index 100%
rename from docs/faqs/img/pgsoft.png
rename to docs/07-faqs/img/pgsoft.png
diff --git a/docs/faqs/img/pixi-logo.png b/docs/07-faqs/img/pixi-logo.png
similarity index 100%
rename from docs/faqs/img/pixi-logo.png
rename to docs/07-faqs/img/pixi-logo.png
diff --git a/docs/faqs/img/pixi-logo.svg b/docs/07-faqs/img/pixi-logo.svg
similarity index 100%
rename from docs/faqs/img/pixi-logo.svg
rename to docs/07-faqs/img/pixi-logo.svg
diff --git a/docs/faqs/img/pragmatic.png b/docs/07-faqs/img/pragmatic.png
similarity index 100%
rename from docs/faqs/img/pragmatic.png
rename to docs/07-faqs/img/pragmatic.png
diff --git a/docs/faqs/img/rich-text.png b/docs/07-faqs/img/rich-text.png
similarity index 100%
rename from docs/faqs/img/rich-text.png
rename to docs/07-faqs/img/rich-text.png
diff --git a/docs/faqs/img/rich88.png b/docs/07-faqs/img/rich88.png
similarity index 100%
rename from docs/faqs/img/rich88.png
rename to docs/07-faqs/img/rich88.png
diff --git a/docs/faqs/img/scrollbar.png b/docs/07-faqs/img/scrollbar.png
similarity index 100%
rename from docs/faqs/img/scrollbar.png
rename to docs/07-faqs/img/scrollbar.png
diff --git a/docs/faqs/img/text-shrink-expect.png b/docs/07-faqs/img/text-shrink-expect.png
similarity index 100%
rename from docs/faqs/img/text-shrink-expect.png
rename to docs/07-faqs/img/text-shrink-expect.png
diff --git a/docs/faqs/img/text-shrink-output.png b/docs/07-faqs/img/text-shrink-output.png
similarity index 100%
rename from docs/faqs/img/text-shrink-output.png
rename to docs/07-faqs/img/text-shrink-output.png
diff --git a/docs/08-change-logs/01-core.md b/docs/08-change-logs/01-core.md
new file mode 100644
index 0000000..f5eb589
--- /dev/null
+++ b/docs/08-change-logs/01-core.md
@@ -0,0 +1,4 @@
+---
+sidebar_position: 1
+title: CORE
+---
diff --git a/docs/08-change-logs/02-base-script.md b/docs/08-change-logs/02-base-script.md
new file mode 100644
index 0000000..957558f
--- /dev/null
+++ b/docs/08-change-logs/02-base-script.md
@@ -0,0 +1,5 @@
+---
+sidebar_position: 2
+title: BaseScript
+
+---
diff --git a/docs/08-change-logs/03-template.md b/docs/08-change-logs/03-template.md
new file mode 100644
index 0000000..eb2c639
--- /dev/null
+++ b/docs/08-change-logs/03-template.md
@@ -0,0 +1,5 @@
+---
+sidebar_position: 3
+title: Template
+
+---
diff --git a/docs/08-change-logs/04-inca.md b/docs/08-change-logs/04-inca.md
new file mode 100644
index 0000000..648c318
--- /dev/null
+++ b/docs/08-change-logs/04-inca.md
@@ -0,0 +1,10 @@
+---
+sidebar_position: 4
+title: Game INCA
+---
+
+# Change history
+---
+## 25/05/2025
+- Change the calculation method for the fake jackpot winning rate. (build version: **fullpack_5_92\games\pack_1_11**)
+- Change bet method to BET OPTION (request by THONG).
diff --git a/docs/08-change-logs/_category_.json b/docs/08-change-logs/_category_.json
new file mode 100644
index 0000000..6bf0a29
--- /dev/null
+++ b/docs/08-change-logs/_category_.json
@@ -0,0 +1,9 @@
+{
+ "position": 8,
+ "label": "Change Logs",
+ "collapsible": true,
+ "collapsed": false,
+ "link": {
+ "title": "Change Logs"
+ }
+}
\ No newline at end of file