Merge remote-tracking branch 'origin/feature/add-setup-ui-panel-main-game' into feature/add-set-up-background-main-game

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

@@ -88,9 +88,211 @@ The setup is very straightforward by using the `Generate Panel` command in each
 
 ## Setup UI Panel
 
-> To be Added:
+### UI Panel Overview
-> - Different UI Layout on Desktop and Mobile
+
-> - Which helper/p4f menu can be used
+The UI system supports both desktop and mobile layouts design.
+
+#### 🖥️ Desktop Layout
+- Full bottom bar with all controls visible
+- Horizontal layout maximizing screen width
+
+![Desktop UI Layout](./img/05-main-scene/bottom-ui-desktop.png)
+
+#### 📱 Mobile Layout
+The mobile interface adapts to both landscape and portrait orientations:
+
+| Orientation | Preview  |
+|-------------|----------|
+| Landscape   | ![Mobile Landscape](./img/05-main-scene/menu-landscape.png) |
+| Portrait    | ![Mobile Portrait](./img/05-main-scene/menu-portrait.png) |
+
+
+### UI Panel Desktop
+
+#### Step 1: Setup Prefab Editor    
+
+| Step | Action | image |
+|------|---------|--------------|
+| 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 from `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) |
+
+---
+
+#### Step 2: Configure Prefabs  
+
+##### Core Prefabs Structure 
+Navigate to the location where the prefabs:
+![Directory Structure](./img/05-main-scene/add-texture-bottom-bar-prefab2.png)   
+
+##### 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
+```
+
+
+![Prefab Naming Example](./img/05-main-scene/rename-prefab.png)
+
+#### Customize *`button-auto-selection`* Label  
+
+**Follow Game 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. |
+| -------------------- | ------------------------------------------------- |
+
+![Label Configuration Options](./img/05-main-scene/option-for-label.png)
+
+#### Customize *`ui-bottom-bar-panel`* Label
+Use `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**  
+:::
+
+![component-locale](./img/05-main-scene/component-locale.png)  
+
+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: Setup Ui In Main Scenes
+
+Create the following node configuration in your main scene:         
+![main scenes](./img/05-main-scene/prepare-ui-bottom-bar.png)    
+
+##### Platform Node Spawner Settings
+
+| 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 prefab*    
+![Auto Selection Result](./img/05-main-scene/result-btn-auto-selection.png)     
+
+*Bottom Bar prefab* 
+![Bottom Bar Result](./img/05-main-scene/result-buttom-bar.png)         
+
+*In game*       
+![Auto Selection Result](./img/05-main-scene/btn-auto-selection.png)     
+![Bottom Bar Result](./img/05-main-scene/result-buttom-bar-in-game.png)
+
+---
+
+### UI Panel Mobile
+
+#### 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 
+
+```jsx title="The folder structure is as follows:"
+    assets\game-assets\prefabs\mobile
+```
+
+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 
+
+**Follow Game Design For Mobile UI:**   
+
+| ![Auto Selection Result](./img/05-main-scene/menu-landscape.png)| ![Auto Selection Result](./img/05-main-scene/menu-portrait.png)  |
+|---------|-------|
+
+##### 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.
+  
+![Auto Selection Result](./img/05-main-scene/set-color-menu-ui.png)    
+
+|Ordinal number| Properties | Explaination | Example |
+|--------------|------------|--------------|---------|
+|0             |**paintColor**  |Trigger to repaint UI components   | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/paint-color-trigger.png)|
+|1             | **Main Ui Normal Color**          |Default color of UI elements | ![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**       | Highlight color for selected UI elements  | ![Auto Selection Result](./img/05-main-scene/main-ui-highlight-color.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/button%20start.png) |
+|3             | **Toggle State Off Color**        | Color of toggle when off  | ![Auto Selection Result](./img/05-main-scene/toggle-off.png) |
+|4             | **Toggle State On Color**         | Color of toggle when on  | ![Auto Selection Result](./img/05-main-scene/toggle-on.png) |
+|5             | **Background Info Page Color**    | Info screen background  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/background-info.png)|
+|6             | **Background Menu Color**         | Menu background color  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/background-menu.png) |
+|7             | **Background Point Panel Color**  | Background panel for point/balance UI  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/background-win-point.png) |
+|8             | **Background Bottom Bar Color**   | Background bottom bar (show only mobile portrait)  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/background-bottom-bar.png) |
+|9             | **Button Quit Color**             | Quit button color  | ![Auto Selection Result](./img/05-main-scene/btn-quit-game.png) |
+|10            | **Button Cancel Color**           | Cancel button color  | ![Auto Selection Result](./img/05-main-scene/btn-cancel-game.png) |1
+|11            | **Label Balance Normal Color**    | Normal balance label color  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/win-point-color.png) |
+|12            | **Label Balance Spin Color**      | During-spin label color  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/spin-point-color.png) |
+|13            | **Button Plus Minus Auto Color**  | Button plus/Minus autoplay  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/btn-plus-minus-auto.png) |
+|14            | **Label Start Auto Color**        | Start autoplay label  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/button%20start.png) |
+|15            | **Label Outline Notification**    | Outline color + width config | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/outline-notifcation.png) |
+|16            | **Total Win Medium Win Color**    | Color for medium win effects  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/win-point-special-color.png) |
+
+---
 
 ## Setup Background