add docs fo mobile ui

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

@@ -90,8 +90,6 @@ The setup is very straightforward by using the `Generate Panel` command in each
 
 ### UI Panel Overview
 
-#### Available Layouts
-
 The UI system supports both desktop and mobile layouts design.
 
 #### 🖥️ Desktop Layout
@@ -103,62 +101,59 @@ The UI system supports both desktop and mobile layouts design.
 #### 📱 Mobile Layout
 The mobile interface adapts to both landscape and portrait orientations:
 
-| Orientation  | Preview |
+| Orientation | Preview  |
-|------------|----------|
+|-------------|----------|
-| Landscape | ![Mobile Landscape](./img/05-main-scene/menu-landscape.png) |
+| Landscape   | ![Mobile Landscape](./img/05-main-scene/menu-landscape.png) |
-| Portrait | ![Mobile Portrait](./img/05-main-scene/menu-portrait.png) |
+| Portrait    | ![Mobile Portrait](./img/05-main-scene/menu-portrait.png) |
 
 
-### :one: **Add Prefabs For Desktop**
+### UI Panel Desktop
 
-#### Step 1: Setup Prefab Files 
+#### Step 1: Setup Prefab Editor    
 
-1. **Locate Required Prefabs**  
+| Step | Action | image |
-   - Find `ui-bottom-bar-panel` prefab  
+|------|---------|--------------|
-   ![Locate Prefabs](./img/05-main-scene/add-texture-bottom-bar-prefab.png) 
+| 1. Locate Prefab | Search for `ui-bottom-bar-panel` prefab | ![Locate Prefabs](./img/05-main-scene/add-texture-bottom-bar-prefab.png) |
+| 2. Copy Assets | Navigate to `core/editor` directory | ![Copy UI Folder](./img/05-main-scene/add-texture-label-prefab.png) |
+| 3. Place Assets | Copy / Paste to game assets location | ![Asset Placement](./img/05-main-scene/editor-texture-label-prefab.png) |
 
-2. **Copy UI Assets**   
+---
-   - Go to **core/editor** directory    
-   - Copy the `bottom-ui` folder    
-   ![Copy UI Folder](./img/05-main-scene/add-texture-label-prefab.png)  
-
-3. **Place Assets in Game Directory**   
-   - Paste the copied `bottom-ui` folder    
-   ![Asset Placement](./img/05-main-scene/editor-texture-label-prefab.png)  
 
 #### Step 2: Configure Prefabs  
 
-1. **Core Prefabs**   
+##### Core Prefabs Structure 
-   ![Directory Structure](./img/05-main-scene/add-texture-bottom-bar-prefab2.png)   
+Navigate to the location where the prefabs:
-
+![Directory Structure](./img/05-main-scene/add-texture-bottom-bar-prefab2.png)   
-2. **Copied Prefab**      
-
-At here:
 
+##### 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-new-`  | `template-new-ui-bottom-bar-panel` | `ui-bottom-bar-panel`     |
-| `template-` | `template-button-auto-selection` | `button-auto-selection` |
+| `template-`      | `template-button-auto-selection`   | `button-auto-selection` |     
 
 ![Prefab Naming Example](./img/05-main-scene/rename-prefab.png)
 
+#### Customize *`button-auto-selection`* Label
+
+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. |
+| -------------------- | ------------------------------------------------- |
 
-#### Button Auto Selection Label
-Use `template-label-auto-selection` to customize the `button-auto-selection`:
-- Modify text color
-- Add Label Outline component
-- Add Label Shadow component
 ![Label Configuration Options](./img/05-main-scene/option-for-label.png)
 
-#### Ui Bottom Bar Panel Label
+#### Customize *`ui-bottom-bar-panel`* Label
 Use `template-label-title` to customize the `ui-bottom-bar-panel`:  
-:::tip
+:::info
-[Detailed configuration the same Button Auto Selection Label](#button-auto-selection-label) 
+*[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**  
 :::
-Bottom bar labels include a localization component for multi-language support:
-![[Localization Component](./img/05-main-scene/component-locale.png)
 
-#### FormatText
+![component-locale](./img/05-main-scene/component-locale.png)  
 
 The `FormatText` property controls text formatting behavior for label components:
 
@@ -167,27 +162,112 @@ The `FormatText` property controls text formatting behavior for label components
 | `default` | Initial formatting state | `false` |
 | `notify` | Formatting update callback | Updates when value changes |
 
+---
+#### Step 3: Setup Ui In Main Scenes
 
-#### Step 3: Apply Textures 
+Create the following node configuration in your main scene:         
+![main scenes](./img/05-main-scene/prepare-ui-bottom-bar.png)    
 
-1. **Run the Helper Tool**
+##### Platform Node Spawner Settings
-   - Open the UI Desktop Helper 
-   - Select texture assignment options  
-   ![Helper Tool](./img/05-main-scene/run-ui-desktop-helper.png)    
 
-2. **Verify Results**   
+| Setting | Value | Description |
+|---------|-------|-------------|
+| Desktop Toggle | ✓ Enabled | Show prefabs for desktop platform |
+| Mobile Toggle | ☐ Disabled | Hide prefabs for mobile platform |
+| Target Prefab | `ui-bottom-bar-panel` | References prefab |
+
+#### Step 4: Apply Textures 
+
+##### Texture Button Bar    
+✅ Checklist assets completed for bottom UI and button UI text   
+🔗 [Follow is by Complete Assets Structure Guide](http://localhost:3000/docs/category/game-asset-structure):         
+ ![main scenes](./img/05-main-scene/prepare-ui-bottom-bar.png)    
+
+##### Run the Helper Tool
+- Open the UI Desktop Helper 
+- Select texture assignment options  
+![Helper Tool](./img/05-main-scene/run-ui-desktop-helper.png)    
+
+##### Verify Results  
    
-   **Auto Selection Component**     
+*Auto Selection*    
-   ![Auto Selection Result](./img/05-main-scene/result-btn-auto-selection.png)
+![Auto Selection Result](./img/05-main-scene/result-btn-auto-selection.png)     
 
-   **Bottom Bar Component** 
+*Bottom Bar* 
-   ![Bottom Bar Result](./img/05-main-scene/result-buttom-bar.png)
+![Bottom Bar Result](./img/05-main-scene/result-buttom-bar.png)
 
-:::tip Success Verification
+---
-✔️ Check all textures are correctly mapped  
+
-✔️ Verify button states display properly    
+### UI Panel Mobile
-✔️ Confirm UI layout matches design 
+
-:::
+#### Step 1: Setup Prefab
+| Step | Action | image |
+|------|---------|--------------|
+| 1. Locate Prefab | Search for `mobile-ui` prefab | ![Locate Prefabs](./img/05-main-scene/search-mobile-ui.png) |
+| 2. Place Assets | Copy to game assets location | ![Asset Placement](./img/05-main-scene/mobile-ui-prefab.png) |
+| 3. Locate Prefab | Search for `buy-feature` prefab | ![Locate Prefabs](./img/05-main-scene/buy-feature-bonus-mobile.png) |    
+
+#### Step 2: Rename Prefabs      
+Rename the copied prefabs by removing unnecessary prefixes: 
+| Prefix to Remove | Final Name |
+|------------------|----------------------|
+| `template-`      |![Prefab Naming Example](./img/05-main-scene/result-rename-mobile.png)   |   
+
+#### Step 3: Setup Ui In Main Scenes
+
+Create the following node configuration in your main scene:         
+![main scenes](./img/05-main-scene/set-positon-mobile-ui.png)   
+
+##### Platform Node Spawner Settings
+
+| Setting | Value | Description |
+|---------|-------|-------------|
+| Mobile Toggle | ✓ Enabled | Show prefabs for mobile platform |
+| Desktop Toggle | ☐ Disabled | Hide prefabs for desktop platform |
+| Target Prefab | `mobile-ui` | References prefab |
+
+#### Step 4: Apply Textures 
+
+##### Texture Mobile Ui   
+✅ Checklist assets completed for Mobile UI  
+🔗 [Follow is by Complete Assets Structure Guide](http://localhost:3000/docs/category/game-asset-structure):         
+ ![main scenes](./img/05-main-scene/add-texture-mobile-ui.png)
+
+##### Run the Helper Tool
+- Open the UI Mobile Helper 
+- Select texture assignment options  
+![Helper Tool](./img/05-main-scene/run-ui-mobile-helper.png)    
+
+##### Results  
+   
+*main ui button added textures*  
+| ![Auto Selection Result](./img/05-main-scene/result-mobile-button.png)  | 
+  
+
+#### Step 4: Setup Color For Menu Mobile UI
+
+*Gerenal picker color* using `helper-paint-color-ui-mobile`    
+| ![Auto Selection Result](./img/05-main-scene/result-mobile-ui.png)  | ![Auto Selection Result](./img/05-main-scene/set-color-menu-ui.png) | 
+|---------|-------|
+
+|Ordinal number| Properties | Explaination | Example |
+|--------------|------------|--------------|---------|
+|1             | **Main Ui Normal Color**          | pick color: #45AEFF  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/buy.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/close.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/tru.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/cong.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/auto.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/balance.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/balance1.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/balance2.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/setting.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/paytable.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/rule.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/cheat.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/button-exit.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/icon-toggle.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/icon-toggle1.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/icon-toggle2.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/icon-toggle3.png) |
+|2             | **Main Ui Highlight Color**       | pick color: #A8CBFF  | ![Auto Selection Result](./img/05-main-scene/main-ui-highlight-color.png) |
+|3             | **Toggle State Off Color**        | pick color: #45AEFF  | ![Auto Selection Result](./img/05-main-scene/toggle-off.png) |
+|4             | **Toggle State On Color**         | pick color: #A8CBFF  | ![Auto Selection Result](./img/05-main-scene/toggle-on.png) |
+|5             | **Background Info Page Color**    | pick color: #000000  | ![Auto Selection Result](./img/05-main-scene/background-menu.png)|
+|6             | **Background Menu Color**         | pick color: #000000  | ![Auto Selection Result](./img/05-main-scene/background-menu.png) |
+|7             | **Background Point Panel Color**  | pick color: #000000  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/background-win-point.png) |
+|8             | **Background Bottom Bar Color**   | pick color: #FFFFFF  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/background-bottom-bar.png) |
+|9             | **Button Quit Color**             | pick color: #45AEFF  | ![Auto Selection Result](./img/05-main-scene/btn-quit-game.png) |
+|10            | **Button Cancel Color**           | pick color: #616160  | ![Auto Selection Result](./img/05-main-scene/btn-cancel-game.png) |1
+|11            | **Label Balance Normal Color**    | pick color: #7DFFDF  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/win-point-color.png) |
+|12            | **Label Balance Spin Color**      | pick color: #FFFFFF  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/spin-point-color.png) |
+|13            | **Button Plus Minus Auto Color**  | pick color: #FFFFFF  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/btn-plus-minus-auto.png) |
+|14            | **Label Start Auto Color**        | pick color: #FFFFFF  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/button%20start.png) |
+|15            | **Label Outline Notification**    | pick color: #FFFFFF  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/outline-notifcation.png) |
+|16            | **Total Win Medium Win Color**    | pick color: #FFFFFF  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/win-point-special-color.png) |
 
 ---