Merge pull request 'add powerplay' (#70) from feature/add-powerplay into develop

Reviewed-on: #70

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

@@ -4,4 +4,101 @@ sidebar_position: 3
 
 # Powerplay
 
-> To be added
+## Overview
+
+![Desktop Bottom Bar](./img/powerplay/preview1.png)
+![Desktop Bottom Bar](./img/powerplay/preview2.png)
+![Desktop Bottom Bar](./img/powerplay/preview3.png)
+
+---
+## Prepare Prefabs
+
+### Step 1: power-play-panel.prefab
+
+**Copy** `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)
+
+**Past & rename** `assets\game-assets\prefabs\power-play-panel.prefab`
+:::warning
+Must rename to **power-play-panel**
+:::  
+
+![Add Symbol Texture](./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
+
+**Follow Design: edit these prefab**
+
+![Add Symbol Texture](./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:     
+
+![Add Symbol Texture](./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 
+
+**Checklist assets**  
+ ![main scenes](./img/powerplay/asset-desktop.png)   ![main scenes](./img/powerplay/asset-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.
+
+![Add Symbol Texture](./img/powerplay/mobile-helper.png)
+
+---