Merge pull request 'add manual-powerplay & format powerplay' (#71) from feature/add-powerplay into develop

Reviewed-on: #71
Reviewed-by: Pham Huynh Duc Huy <huy.pham@mercurystudiogroup.com>

docs/03-setup-special-feature/03-powerplay.md

@@ -11,94 +11,134 @@ sidebar_position: 3
 ![Desktop Bottom Bar](./img/powerplay/preview3.png)
 
 ---
+
 ## Prepare Prefabs
 
-### Step 1: power-play-panel.prefab
+### Step 1: `power-play-panel.prefab`
 
-**Copy** `template-power-play-panel`
+**Copy**  
-from `assets\core-assets\hyper-core\packages\power-panel\prefabs\template-power-play-panel.prefab`
+`template-power-play-panel`  
+from  
+`assets/core-assets/hyper-core/packages/power-panel/prefabs/template-power-play-panel.prefab`
 
-![Add Symbol Texture](./img/powerplay/from-powerplay-panel.png)
+![From Template](./img/powerplay/from-powerplay-panel.png)
+
+**Paste & Rename To**  
+`assets/game-assets/prefabs/power-play-panel.prefab`
 
-**Past & rename** `assets\game-assets\prefabs\power-play-panel.prefab`
 :::warning
-Must rename to **power-play-panel**
+Must rename the prefab to **`power-play-panel`**
-:::  
+:::
 
-![Add Symbol Texture](./img/powerplay/powerplay-panel-to.png)
+![Renamed Prefab](./img/powerplay/powerplay-panel-to.png)
-
-### Step 2: mobile-power-play-panel
-
-**Copy** `template-mobile-power-play-panel`
-from `assets\core-assets\hyper-core\packages\ui\mobile-ui\prefabs\templates\template-mobile-power-play-panel.prefab`
-
-![Add Symbol Texture](./img/powerplay/mobile-from.png)
-
-**Past & rename** `assets\game-assets\prefabs\mobile\power-play-panel.prefab`
-:::warning
-Must rename to **mobile-power-play-panel**
-:::  
-
-![Add Symbol Texture](./img/powerplay/mobile-to.png)
-
-### Step 3: template-label
-
-**Copy 5 prefab** `template-label-auto-selection` & `template-label-title` 
-
-**From** `assets\core-assets\slotty-core\packages\power-panel\editor\`
-
-![Add Symbol Texture](./img/powerplay/label-template-from.png)
-
-**To** `assets\game-assets\editor\`
-
-![Add Symbol Texture](./img/powerplay/label-template-to.png)
 
 ---
-## Edit prefab
 
-### Step 1: label-template
+### Step 2: `mobile-power-play-panel`
 
-**Follow Design: edit these prefab**
+**Copy**  
+`template-mobile-power-play-panel`  
+from  
+`assets/core-assets/hyper-core/packages/ui/mobile-ui/prefabs/templates/template-mobile-power-play-panel.prefab`
 
-![Add Symbol Texture](./img/powerplay/label-template-to.png)
+![From Template](./img/powerplay/mobile-from.png)
 
+**Paste & Rename To**  
+`assets/game-assets/prefabs/mobile/power-play-panel.prefab`
 
-| Component            | Description                                       |
+:::warning
-| -------------------- | ------------------------------------------------- |
+Must rename the prefab to **`mobile-power-play-panel`**
-| **Label Outline**    | Add an outline to make the text stand out.        |
+:::
-| **Label Shadow**     | Add a shadow for better contrast and readability. |
+
-| -------------------- | ------------------------------------------------- |
+![Renamed Prefab](./img/powerplay/mobile-to.png)
 
 ---
+
+### Step 3: `template-label`
+
+**Copy 5 Prefabs from**  
+`assets/core-assets/slotty-core/packages/power-panel/editor/`
+
+![From Folder](./img/powerplay/label-template-from.png)
+
+**To**  
+`assets/game-assets/editor/`
+
+![To Folder](./img/powerplay/label-template-to.png)
+
+---
+
+## Edit Prefab
+
+**Follow the design and edit the prefab accordingly:**
+
+![Prefab Design](./img/powerplay/label-template-to.png)
+
+| Component         | Description                                       |
+|------------------|---------------------------------------------------|
+| **Label Outline** | Add an outline to make the text stand out.        |
+| **Label Shadow**  | Add a shadow for better contrast and readability. |
+
+---
+
 ## Setup Main Scene
 
-Drag **power-play-panel** in your main scene:     
+Drag the `power-play-panel` prefab into your main scene:
 
-![Add Symbol Texture](./img/powerplay/ref-prefab.png)  
+![Main Scene Setup](./img/powerplay/ref-prefab.png)
-
----
-## Setup Mobile-ui
-
-Open prefab **mobile-ui**
-
-Drag **mobile-power-play-panel** into this script:
-
-![Add Symbol Texture](./img/powerplay/ref-mobile.png)  
 
 ---
 
-## Apply Textures 
+## Setup Mobile UI
 
-**Checklist assets**  
+Open the **`mobile-ui`** prefab and drag in the `mobile-power-play-panel`:
- ![main scenes](./img/powerplay/asset-desktop.png)   ![main scenes](./img/powerplay/asset-mobile.png)   
 
- 
+![Mobile UI Setup](./img/powerplay/ref-mobile.png)
-**Run the Helper Tool** to configure **PowerplayDesktop** helper.
 
-![Add Symbol Texture](./img/powerplay/desktop-helper.png)
+---
 
-**Run the Helper Tool** to configure **PowerplayMobile** helper.
+## Apply Textures
 
-![Add Symbol Texture](./img/powerplay/mobile-helper.png)
+### Prepare these assets
 
----
+![Assets Desktop](./img/powerplay/asset-desktop.png)
+![Assets Mobile](./img/powerplay/asset-mobile.png)
+
+
+### Configure Helpers
+
+- Run the **Helper Tool** to configure `PowerplayDesktop`  
+  ![Desktop Helper](./img/powerplay/desktop-helper.png)
+
+- Run the **Helper Tool** to configure `PowerplayMobile`  
+  ![Mobile Helper](./img/powerplay/mobile-helper.png)
+
+---
+
+## Manual Powerplay
+
+![Manual Powerplay](./img/powerplay/manual-powerplay-review.png)
+
+### Two Ways to Activate:
+
+#### 1. Local
+Append this param to the local URL:  
+`http://localhost:7456/?minNormalBet=10`
+
+#### 2. Game Live
+- Step 1: Set a breakpoint like the image below:  
+  ![Breakpoint](./img/powerplay/test-manual-powerplay.png)
+
+- Step 2: Reload the page and run this code at the breakpoint:  
+  ```js
+  params.GameSettings.config.minNormalBet = 10;
+
+### Setup manual-powerplay
+
+**In the main scene**: create a node and add the corresponding script.
+
+![Setup Manual Powerplay](./img/powerplay/manual-powerplay-setup.png)
+
+:::warning
+If your game already has **`shortcut-buy-feature`** set up, this node may already be configured.
+:::