Merge pull request 'feature/add-setup-popup-panel' (#21) from feature/add-setup-popup-panel into develop

Reviewed-on: #21

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

@@ -125,7 +125,11 @@ The mobile interface adapts to both landscape and portrait orientations:
 | Portrait    | ![Mobile Portrait](./img/05-main-scene/menu-portrait.png) |
 
 
-### UI Panel Desktop
+### UI Sideband
+> To Be Added:
+> - Prepare the asset
+> - Run helper / p4f menu or setup manually
+### UI Bottom Bar Desktop
 
 #### Step 1: Setup Prefab Editor    
 
@@ -230,18 +234,30 @@ Create new node and configuration in your main scene:
 ### UI Panel Mobile
 
 #### Step 1: Setup Prefab
-| Step | Action | image |
+
-|------|---------|--------------|
+| Step | Action                      | Description                                     | Image Reference                                                      |
-| 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) |
+| 1    | Locate `mobile-ui` Prefab   | Search for the `mobile-ui` prefab               | ![Locate Prefabs](./img/05-main-scene/search-mobile-ui.png)          |
-| 3. Locate Prefab | Search for `buy-feature` prefab | ![Locate Prefabs](./img/05-main-scene/buy-feature-bonus-mobile.png) |    
+| 2    | Clone Assets                | Copy the required assets                        | ![Asset Placement](./img/05-main-scene/mobile-ui-prefab.png)         |
+| 3    | Paste Assets                | Paste into: `assets/game-assets/prefabs/mobile` | -                                                                    |
+| 4    | Locate `buy-feature` Prefab | Search for the `buy-feature` prefab             | ![Locate Prefabs](./img/05-main-scene/buy-feature-bonus-mobile.png)  |
+| 5    | Paste Prefab                | Paste into: `assets/game-assets/prefabs/mobile` | -                                                                    |
+
+
+:::tip File Structure
+Maintain this directory structure for proper prefab references:
+```
+assets/
+└── game-assets/
+    └── prefabs/
+        └── mobile/
+            ├── Exp: mobile-ui.prefab
+            └── Exp: buy-feature.prefab
+```
+:::
 
 #### 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 |
 |------------------|----------------------|
@@ -262,7 +278,7 @@ Create new node and configuration in your main scene:
 
 #### Step 4: Apply Textures 
 
-##### Texture Mobile Ui   
+##### 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)
@@ -385,6 +401,56 @@ If the game have design animation for background, we will do this step.
 
 ## Setup Popup Panel
 
-> To Be Added:
+### Overview
-> - Prepare the asset
+
-> - Run helper / p4f menu or setup manually
+A popup is a temporary UI element that overlays the main content to provide additional information or options to the user.
+
+|![Popup overview exit](./img/05-main-scene/popup-disconnet.png)|![Popup overview disconnect](./img/05-main-scene/popup-exit-game.png)|![Popup overview disconnect](./img/05-main-scene/popup-credit-game.png)|
+|---------------------------------------------------------------|---------------------------------------------------------------------|---------------------------------------------------------------------|
+
+
+### Popup in the Game
+The popup panel is already integrated into the main scenes `template-main-game`.
+
+![Popup In Game](./img/05-main-scene/popup-panel-in-game.png)       
+
+
+| **Node Type**        | **Location Description**                  | **Screenshot**                                              |
+| -------------------- | ----------------------------- | ------------------------------------------------------------------------|
+| **Definition Node**  | Before configuring the popup prefab  | ![Popup Definition](./img/05-main-scene/popup-before.png)        |
+| **Positioning Node** | After adjusting the prefab's position in scene | ![Popup Position](./img/05-main-scene/popup-after.png) |
+
+#### Detail configuring:
+
+##### Multiple Popup Panel:
+
+![Popup Position](./img/05-main-scene/popup-multi-panel.png) 
+
+To use the Multiple Popup layout, reference target `hyper-multiple-popup.prefab` in core:
+:::info
+    **Path**    : *assets/core-assets/hyper-core/packages/popup-panel/prefabs/hyper-multiple-popup.prefab*        
+:::
+
+##### Manual Popup Panel:
+
+-  This popup is self-configured using shared textures and layout structure.
+-  The color theme and style may vary depending on the game design.
+
+⚠️ Note:
+The **Exit Game** Popup only appears in **Desktop**.
+
+![Exit Game Popup In Game](./img/05-main-scene/popup-exit-in-game.png)
+
+##### Texture Path & Asset Info:
+✅ Exit popup textures have been successfully packed.      
+🔗 Refer to the full asset structure guide: [Complete Assets Structure Guide](http://localhost:3000/docs/category/game-asset-structure)         
+
+**Texture Path:**:      
+`assets\game-assets\textures\desktop\preloads\main-game\exit`      
+
+**Preview Result**:         
+![Popup overview exit](./img/05-main-scene/popup-exit-game.png)
+
+
+
+