add popup panel

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

@@ -246,18 +246,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 |
 |------------------|----------------------|
@@ -278,7 +290,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)
@@ -405,6 +417,54 @@ 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
+The popup panel is already integrated into main scenes. It is separated into two parts for modular use:
+
+|![Popup overview exit](./img/05-main-scene/popup-disconnet.png)|![Popup overview disconnect](./img/05-main-scene/popup-exit-game.png)|
+|---------------------------------------------------------------|---------------------------------------------------------------------|
+
+
+### Popup in the Game
+The popup panel is already integrated into the main scenes.
+
+![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 the core prefab:
+:::info
+    **Prefab**  : *hyper-multiple-popup.prefab*   
+    **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)
+
+**Exit Popup Texture Path**:
+:::info
+**Path**: *assets\game-assets\textures\desktop\preloads\main-game\exit*
+:::
+**Preview Result**:     
+![Popup overview exit](./img/05-main-scene/popup-exit-game.png)
+
+
+
+