add setup info pages

Reviewed-on: #40

docs/02-setup-main-game/05-main-scene/02-background.md

@@ -7,6 +7,7 @@ sidebar_position: 2
 Is the visual scenery that appears behind the gameplay elements.
 
 ---
+## Overivew
 
 The background consists of 2 parts: **Landscape** and **Portrait**.
 
@@ -18,25 +19,25 @@ The background consists of 2 parts: **Landscape** and **Portrait**.
 |**Background Landscape**<br/>![Background Overview Landscape](./img/02-background/bg-overview-landscape-3.png)|<br/>![Background Overview Landscape](./img/02-background/bg-overview-landscape-1.png)|<br/>![Background Overview Landscape](./img/02-background/bg-overview-landscape-2.png)|
 |**Background Portrait**<br/>![Background Overview Portrait](./img/02-background/bg-overview-portrait-2.png)||<br/>![Background Overview Portrait](./img/02-background/bg-overview-portrait-1.png)|
 
-### 1. Prepare the assets
+## 1. Prepare the assets
 | | Assets | Description |
 |:-:|--------------|---------|
 |**Static**<br/>|![Background Prepare Landscape](./img/02-background/bg-prepare-assets-static.png)|Static background is necessary for the game|
 |**Animation**<br/>|![Background Prepare Portrait](./img/02-background/bg-prepare-assets-anim.png)|Animation background may or may not be present, depending on the game design|
 
-### 2. Setup Background Landscape
+## 2. Setup Background Landscape
     
     We use sprite frame background for landscape from prepared assets.
 
     ![Background Setup Landscape](./img/02-background/bg-setup-landscape.png)
 
-### 3. Setup Background Portrait
+## 3. Setup Background Portrait
 
     We use sprite frame background for mobile from prepared assets.
 
     ![Background Setup Portrait](./img/02-background/bg-setup-portrait.png)
 
-### 4. Setup Background Animation
+## 4. Setup Background Animation
 
 If the game have design animation for background, we will do this step.
 

docs/02-setup-main-game/05-main-scene/06-special-win.md

@@ -1,11 +0,0 @@
----
-sidebar_position: 6
----
-
-# Special Win
-
-Is a game mechanic that allows players to earn significantly higher rewards than usual, typically triggered by rare or specific conditions during gameplay.
-
----
-
-> To be added

docs/02-setup-main-game/05-main-scene/07-item-description.md

@@ -4,8 +4,25 @@ sidebar_position: 7
 
 # Item Description
 
-> To be Add
+Provides players with detailed information about each item of the game.
+
 
 ---
 
-> To be Add
+## Overview
+
+![Item Description Overview](./img/07-item-description/overview.png)
+
+## Prepare the assets
+| Assets | Description |
+|--------|-------------|
+|![Info Page Prepare Assets](./img/07-item-description/prepare-assets-1.png)|Used to setup background|
+|![Info Page Prepare Assets](./img/07-item-description/prepare-assets-2.png)|Used to setup for static symbol|
+|![Info Page Prepare Assets](./img/07-item-description/prepare-assets-3.png)|Used to setup for animation symbol|
+
+## Setup Prefabs Item Description
+
+| Step | Action | Description | Image Reference |
+| :--: | :----- | :---------- | :-------------: |
+| 1    | Locate all template prefabs need for **Item Description** | Search for the `template-item-description` prefab | ![Locate Prefabs](./img/07-item-description/prepare-prefabs-1.png) |
+| 2    | Clone assets| Copy/Pase to game assets location, then rename the copied prefabs by removing unnecessary prefixes. | ![Locate Prefabs](./img/07-item-description/prepare-prefabs-2.png) |

docs/02-setup-main-game/05-main-scene/09-info-page.md

@@ -1,31 +0,0 @@
----
-sidebar_position: 9
----
-
-# Info Page
-
-Info Page (Information Page) provides players with essential details about how the game works. It helps players understand the rules, features, symbols, payout structures, and other gameplay mechanics.
-
----
-
-## Paytable
-
-Shows the value of each symbol and how much players can win from different combinations.
-
-## Special Feature
-
-Describes bonus rounds, free spins, jackpots, or other special win features.
-
-## Gamble Feature
-
-The Gamble Feature is a special option that allows players to risk their recent winnings for a chance to multiply them. 
-
-## Game Rules
-
-Explains the basic mechanics and objectives of the game.
-
-## Winning Lines or Ways
-
-This section shows the valid winning combinations or paylines.
-
-> To be added

docs/02-setup-main-game/05-main-scene/09-info-pages.md

@@ -0,0 +1,100 @@
+---
+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.
+
+---
+## Overivew
+
+- **Desktop** consists Paytable and Rules in **Info Pages**.
+- **Mobile** is divided into 2 parts Paytable and Rules
+
+|Desktop | Mobile |
+|:------:|:------:|
+|![Background Overview Landscape](./img/09-info-page/overview-desktop-1.png)|![Background Overview Landscape](./img/09-info-page/overview-mobile-1.png)|
+|![Background Overview Landscape](./img/09-info-page/overview-desktop-2.png)<br/>![Background Overview Landscape](./img/09-info-page/overview-desktop-3.png)|![Background Overview Portrait](./img/09-info-page/overview-mobile-2.png)|
+
+## Prepare the assets
+| Assets | Description |
+|--------|-------------|
+|![Info Page Prepare Assets](./img/09-info-page/prepare-assets-1.png)|Used to setup **Rules** or image in RichText|
+|![Info Page Prepare Assets](./img/09-info-page/prepare-assets-2.png)|Used to setup **Paytable**|
+
+## 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 | ![Locate Prefabs](./img/09-info-page/prepare-prefabs-desktop-1.png) |
+| 2    | Clone assets| Copy/Pase to game assets location, then rename the copied prefabs by removing unnecessary prefixes. | ![Locate Prefabs](./img/09-info-page/prepare-prefabs-desktop-2.png) |
+| 3    | Get settings config| - Run DevTools on Browser.<br/>- On tab Console, find message with **event** = `config`.<br/>- Get values in context = `paytable` to setup for Item Payout with Item name and Odds | <img width="1500"/> ![Info Page Prepare Assets](./img/09-info-page/prepare-setting-config.png) |
+
+### desktop-info-panel
+
+    | Step | Action | Image Reference |
+        | :--: | :----- | :-------------: |
+        | 1 | Change **Color** in `page-background` follow the game design..| <img width="400"/>![Locate Prefabs](./img/09-info-page/configure-panel-1.png) |
+        | 2 | Change **Color** in `menu-header-background` follow the game design. | ![Locate Prefabs](./img/09-info-page/configure-panel-2.png) |
+        | 3 | Update **Prefab** in `paytable-content` from prepared prefabs. | ![Locate Prefabs](./img/09-info-page/configure-panel-3.png) ||
+        | 4 | Update **Prefab** in `rules-content` from prepared prefabs..| ![Locate Prefabs](./img/09-info-page/configure-panel-4.png) |
+
+### desktop-paytable-content
+
+- Paytable: Consist **Item with Payout** and **Item with Description**
+
+    ![Locate Prefabs](./img/09-info-page/configure-paytable-1.png) ![Locate Prefabs](./img/09-info-page/configure-paytable-2.png) 
+
+    - Setup **Item with Payout**
+     
+        | Step | Action | Image Reference |
+        | :--: | :----- | :-------------: |
+        | 1 | Setup Item with **Item Name** and **Odds Items** follow the game design.| <img width="1000"/> ![Locate Prefabs](./img/09-info-page/configure-item-payout-1.png) |
+        | 2 | Setup **Sprite Frame** in `item-display` same name with item from prepared assets. | ![Locate Prefabs](./img/09-info-page/configure-item-payout-2.png) |
+        | 3 | Change **Color** in<br/> `multi-x...`<br/>`oods-x...`<br/> follow the game design. | ![Locate Prefabs](./img/09-info-page/configure-item-payout-3.png) ||
+        | 4 | - Change **Font** and **Font Size** in<br/> `multi-x...`<br/>`oods-x...`<br/> follow the game design.<br/> - Use [Bitmap Font Creator](http://localhost:3000/docs/category/game-asset-structure) to create Font Bitmap if you need it.| ![Locate Prefabs](./img/09-info-page/configure-item-payout-4.png) |
+
+    - Setup **Item with Description**
+     
+        | Step | Action | Image Reference |
+        | :--: | :----- | :-------------: |
+        | 1 | Setup Item with **Name** follow the game design. | <img width="1250"/> ![Locate Prefabs](./img/09-info-page/configure-item-description-1.png) |
+        | 2 | Setup **Sprite Frame** in `item-display` same name with item from prepared assets. | ![Locate Prefabs](./img/09-info-page/configure-item-description-2.png) |
+        | 3 | Change **String** in `description` follow the game design. |  ![Locate Prefabs](./img/09-info-page/configure-item-description-3.png) |
+
+- 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  |
+| :--------------: | :------------------: |
+| ![Locate Prefabs](./img/09-info-page/configure-feature-game-1.png) | ![Locate Prefabs](./img/09-info-page/configure-feature-game-2.png) |
+| ![Locate Prefabs](./img/09-info-page/configure-feature-game-3.png) | ![Locate Prefabs](./img/09-info-page/configure-feature-game-4.png) |
+
+### desktop-rules-content
+    There are 2 types: **LINES** and **DYNAWAYS**
+    1. Setup **Sprite Frame** in `lines-image` from prepared assets.
+    2. Change **Color** in `lines-title` follow game desgin.
+    3. If the game is **Dynaways**
+        - Change **String** in `lines-title` is **DYNAWAYS**.
+        - Enable and update **String** in `lines-description`.
+
+| Overivew | Configure  |
+| :--------------: | :------------------: |
+| ![Locate Prefabs](./img/09-info-page/configure-rules-1.png) | ![Locate Prefabs](./img/09-info-page/configure-rules-2.png) |
+| ![Locate Prefabs](./img/09-info-page/configure-rules-3.png) | ![Locate Prefabs](./img/09-info-page/configure-rules-4.png) |
+
+## Setup Prefabs Mobile
+
+| Step | Action | Description | Image Reference |
+| :--: | :----- | :---------- | :-------------: |
+| 1    | Locate all template prefabs need for **Info Pages Mobile**| Search for the `mobile-ui` prefab |<img width="2000"/>![Locate Prefabs](./img/09-info-page/prepare-prefabs-mobile-1.png) |
+| 2    | Clone assets| Copy/Pase to game assets location, then rename the copied prefabs by removing unnecessary prefixes. | ![Locate Prefabs](./img/09-info-page/prepare-prefabs-mobile-2.png) |
+| 3    | Configure prefabs| We will do the same as configure for desktop. |  |
+| 4    | Locate **Paytable** spawner position in `mobile-ui`, then use prefab configured.| Search for the `mobile-paytable-content-spawner` in `mobile-ui` prefab. | ![Locate Prefabs](./img/09-info-page/configure-prefab-mobile-1.png) |
+| 5    | Locate **Rules** spawner position in `mobile-ui`, then use prefab configured.| Search for the `mobile-rule-content-spawner` in `mobile-ui` prefab. | <img width="1500"/>![Locate Prefabs](./img/09-info-page/configure-prefab-mobile-2.png) |

docs/02-setup-main-game/05-main-scene/14-special-win.md

@@ -0,0 +1,170 @@
+---
+sidebar_position: 6
+---
+
+# Special Win Setup
+
+---
+
+## Overview
+
+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         | ![Big](../img/05-main-scene/special-win-big.png) |
+| **Super Win** | High payout           | ![Super](../img/05-main-scene/special-win-super.png) |
+| **Mega Win**  | Maximum payout        | ![Mega](../img/05-main-scene/special-win-mega.png) |
+
+Each type delivers increasing visual excitement to highlight significant player rewards.
+
+---
+
+## Implementation
+
+### Core Components
+
+The special win system consists of three main components:
+
+| 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 |
+
+![Component Architecture](../img/05-main-scene/special-win-in-game.png)
+
+#### Coin Effect System
+
+The coin shower effect uses prefab variants for different markets:
+
+![Base Coin Asset](../img/05-main-scene/special-win-coin.png)
+
+| Submodule   |   Theme |    Preview    |
+|-------------|---------------|---------------|
+| `hyper-coin-shower-international` | International | ![International Version](../img/05-main-scene/special-win-coin-internation.png) |
+| `hyper-coin-shower-chinese` | Chinese | ![Chinese Version](../img/05-main-scene/special-win-coin-chinese.png) |
+
+:::tip
+- Position the Special Win node as per game design
+:::
+
+---
+
+### Asset Configuration
+
+#### 1. Static Resources
+
+Store static assets in platform-specific directories:
+
+| Platform | Path | Preview |
+|----------|------|---------|
+| Desktop  | `assets/textures/desktop/preloads/special-wins` | ![Desktop](../img/05-main-scene/special-win-folder-desktop.png) |
+| Mobile   | `assets/textures/mobile/preloads/special-wins`  | ![Mobile](../img/05-main-scene/special-win-folder-mobile.png) |
+
+🔗 [View Platform Asset Structure](http://localhost:3000/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
+```
+    ![Type Names](../img/05-main-scene/special-win-type-name.png)
+
+##### Step 1: Add Animation Resources
+
+Place animated assets in the following directories:
+
+| Platform | Path | Preview |
+|----------|------|---------|
+| Desktop  | `assets/textures/desktop/postloads/anim-special-win` | ![Desktop](../img/05-main-scene/special-win-folder-desktop-anim.png) |
+| Mobile   | `assets/textures/mobile/postloads/anim-special-win`  | ![Mobile](../img/05-main-scene/special-win-folder-mobile-anim.png) |
+
+##### Step 2: Configure Animation Settings
+
+| Setting         | Example |
+|------------------|---------|
+| Static Fallback  | ![Static](../img/05-main-scene/special-win-static.png) |
+| Loop Animation   | ![Loop](../img/05-main-scene/special-win-loop.png) |
+
+🔗 [View Animation Provider Setup](http://localhost:3000/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
+
+   ![Font Packaging](../img/05-main-scene/special-win-pack-font.png)
+
+2. **Font Integration**
+   - Add font asset to special win component
+
+   ![Font Integration](../img/05-main-scene/special-win-font.png)
+
+3. **Layout Settings**
+
+   - Configure text alignment           
+   - Adjust font size and spacing               
+
+   ![Font Layout](../img/05-main-scene/special-win-font-align.png)
+
+
+:::tip
+Customize font styles based on each game's design.
+:::

docs/02-setup-main-game/05-main-scene/15-jackpot-panel.md

@@ -0,0 +1,86 @@
+---
+sidebar_position: 15
+---
+# Jackpot Setup
+
+---
+
+## Overview
+
+- **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.
+
+| Tier  | Description                  | Preview                                                    |
+|-------|------------------------------|------------------------------------------------------------|
+| Grand | The top prize, very rare <br />and often worth thousands  <br />or even millions(especially if it's progressive)|![Grand](../img/05-main-scene/jackpot-panel/jackpot-grand.png) |
+| Major | A significant prize, harder to win.        | ![Major](../img/05-main-scene/jackpot-panel/jackpot-major.png) |
+| Minor | A bit higher in value, still fairly common.        | ![Minor](../img/05-main-scene/jackpot-panel/jackpot-minor.png) |
+| Mini  | The smallest and easiest to win.  | ![Mini](../img/05-main-scene/jackpot-panel/jackpot-mini.png)   |
+
+- The panel is responsive and supports both desktop and mobile layouts:
+
+| Orientation | Preview                                                    |
+|-------------|------------------------------------------------------------|
+| Desktop     | ![Desktop](../img/05-main-scene/jackpot-panel/jackpot-desktop.png) |
+| Mobile      | ![Mobile](../img/05-main-scene/jackpot-panel/jackpot-mobile.png)   |
+
+## Implementation
+
+### Core Prefabs
+
+- Use the prefabs located at:  
+
+    |`assets/core-assets/jackpot-package/prefabs`|![Core](../img/05-main-scene/jackpot-panel/jackpot-core-prefabs.png)|
+    |--------------------------------------------|--------------------------------------------------------------------|
+
+### Setup Steps
+
+#### Desktop
+
+- Add the jackpot prefab to your main scene.
+- Set its position to **(0, 0)**.
+
+        ![Desktop](../img/05-main-scene/jackpot-panel/jackpot-in-desktop.png)
+
+        More info: [Platform Node Spawner](http://localhost:3000/docs/faqs/setup-cocos-scene#platform-node-spawner)
+
+#### Mobile
+
+- Configure the jackpot node for both landscape and portrait orientations.
+- Use `UI Mobile Position` for a responsive layout.
+
+        ![Mobile](../img/05-main-scene/jackpot-panel/jackpot-in-mobile.png)
+
+         More info: [UI Mobile Position](http://localhost:3000/docs/faqs/setup-cocos-scene#ui-mobile-landscape--portrait--position)
+
+- Example using `Platform Node Spawner`:
+
+        ![Mobile Spawner](../img/05-main-scene/jackpot-panel/jackpot-in-mobile-spawner.png)
+
+        More info: [Platform Node Spawner](http://localhost:3000/docs/faqs/setup-cocos-scene#platform-node-spawner)
+
+### Result
+
+- The jackpot panel works seamlessly across all platforms and orientations.
+
+        ![Result](../img/05-main-scene/jackpot-panel/jackpot-result.png)
+
+        More info: [Node Spawner](http://localhost:3000/docs/faqs/setup-cocos-scene#node-spawner)
+
+:::tip
+**Sibling Index Order:**
+| Node Name                              | Sibling Index | Notes                                 |
+|----------------------------------------|---------------|---------------------------------------|
+| `jackpot-runner-panel-desktop-spawner` | Lowest        | Usually at the bottom                 |
+| `container-jackpot-runner-mobile`      | Middle        | Between desktop and result panels     |
+| `jackpot-result-panel-spawner`         | Highest       | Always on top <br />   ![Result](../img/05-main-scene/jackpot-panel/jackpot-positon-result.png)                      |
+:::
+
+
+## Game Result Examples
+
+| Win Tier | Example |
+|----------|------------------------------------------------------------------|
+| Grand    | ![Grand](../img/05-main-scene/jackpot-panel/jackpot-grand-win.jpg) |
+| Major    | ![Major](../img/05-main-scene/jackpot-panel/jackpot-major-win.jpg) |
+| Minor    | ![Minor](../img/05-main-scene/jackpot-panel/jackpot-minor-win.jpg) |
+| Mini     | ![Mini](../img/05-main-scene/jackpot-panel/jackpot-mini-win.jpg)   |

docs/faqs/03-setup-cocos-scene.md

@@ -22,3 +22,27 @@ Use this configuration to control which prefabs appear based on the current plat
 |--------------------|----------------------|-----------------------------------------------|
 | **Desktop Toggle** |  ✅ Enabled          | Show node on desktop                          |
 | **Mobile Toggle**  |  ❌ Disabled         | Hide node on mobile                           |
+
+
+## Node Spawner
+
+Spawns a prefab at the same position as the original node and then removes the node.
+
+#### Usage
+
+- On scene start, the prefab replaces the node.
+1. Attach the script to a placeholder node.
+2. Set the `prefab` property in the Inspector.
+
+
+## UI Mobile Landscape / Portrait  Position
+
+Positions a node at a specific location when the device is in landscape / portrait mode on mobile.
+
+#### Usage
+
+1. Attach the script to your node.
+2. Set `default Position` in the Inspector.
+3. The position updates automatically in mobile landscape / portrait mode.
+
+![Position](./img/default-setting.png)