From 04750a2f6cacdc6c7fcab6b9c22806502bd671ac Mon Sep 17 00:00:00 2001
From: dungdq <dung.do@ao360.com.vn>
Date: Mon, 12 May 2025 11:30:50 +0700
Subject: [PATCH] update docs for portrait

---
 docs/02-setup-main-game/05-main-scene.md | 64 ++++++++++++++----------
 1 file changed, 38 insertions(+), 26 deletions(-)

diff --git a/docs/02-setup-main-game/05-main-scene.md b/docs/02-setup-main-game/05-main-scene.md
index 69f5475..cdf0605 100644
--- a/docs/02-setup-main-game/05-main-scene.md
+++ b/docs/02-setup-main-game/05-main-scene.md
@@ -483,7 +483,7 @@ The game logo is a crucial branding element that must be consistently displayed
 | Mobile | Landscape | ![Landscape View](./img/05-main-scene/logo-overview.png) |
 | Mobile | Portrait | ![Portrait View](./img/05-main-scene/logo-overview-portrait.png) |
 
-### Animation Configuration
+### Logo Configuration
 
 #### 1. Core Setup
 Location: `assets\core-assets\hyper-core\packages\logo-animation`
@@ -527,14 +527,17 @@ onLoad: function () {
 
    ![Provider Setup](./img/05-main-scene/logo-anim-loop.png)
 
-### Platform-Specific Setup
+### Platform Setup
 
 #### Desktop Configuration
+
 1. Base Settings        
 
    ![Desktop Settings](./img/05-main-scene/logo-setting-desktop.png)
 
-   *Node Setup*
+🔗 Click [Here](#platform-node-spawner-settings) to follow `platform-ui-controller`
+
+2. Node Setup
    ```typescript
    Components: {
      animation: 'hyper-logo-animation',
@@ -542,34 +545,35 @@ onLoad: function () {
    ```
    ![Desktop Setup](./img/05-main-scene/logo-script-desktop.png)
 
-
-2. Position Guidelines
-   - Follow design specifications
-   - Avoid UI element overlap
-   - Consider screen layout
+:::tip
+   - **Position And Size**: Follow Game Design.
+:::
 
 #### Mobile Configuration
 
 ##### Landscape Mode
+
 1. Node Setup
-   ```typescript
-   Components: {
-     animation: 'hyper-logo-animation',
-     scaling: 'landscape-logo-spine-aspect-ratio-keeper'
-   }
-   ```
-   ![Landscape Setup](./img/05-main-scene/logo-mobile-landcape.png)
+  
+    | Component                                 | Description                                      |
+    |-------------------------------------------|--------------------------------------------------|
+    | `hyper-logo-animation`                    | Plays and manages the logo animation             |
+    | `node-position-by-jackpot`                | Moves the logo based on the jackpot display state |
+    | `landscape-logo-spine-aspect-ratio-keeper`| Keeps the logo size consistent on all screens  (**Exp: 1.0**)   |
+   
+    ![Landscape Setup](./img/05-main-scene/logo-mobile-landcape.png)
 
 ##### Portrait Mode
 
-1. Node Configuration
+1. Node Setup
 
-| Component                  | Description                                      |
-|----------------------------|--------------------------------------------------|
-| `hyper-logo-animation`     | Plays and manages the logo animation             |
-| `node-position-by-jackpot` | Moves the logo based on the jackpot display state |
-| `spine-aspect-ratio-keeper`| Keeps the logo size consistent on all screens    |
+    | Component                  | Description                                      |
+    |----------------------------|--------------------------------------------------|
+    | `hyper-logo-animation`     | Plays and manages the logo animation             |
+    | `node-position-by-jackpot` | Moves the logo based on the jackpot display state |
+    | `spine-aspect-ratio-keeper`| Keeps the logo size consistent on all screens (**Exp: 1.0** ) |
 
+    ![Portrait Setup](./img/05-main-scene/logo-mobile-portrait.png)
 
 2. Position Settings
 
@@ -578,9 +582,17 @@ onLoad: function () {
    | Jackpot Active | Upper position | ![Active](./img/05-main-scene/logo-portrait-jackpot.png) |
    | Jackpot Inactive | Default position | ![Inactive](./img/05-main-scene/logo-portrait-no-jackpot.png) |
 
-:::tip Best Practices
-- Test on multiple device sizes
-- Verify animations load properly
-- Check positioning in all game states
-- Ensure consistent scaling
+3. Size Settings
+
+    Using componet `spine-aspect-ratio-keeper` :
+
+    ![Portrait Logo Configuration](./img/05-main-scene/logo-center-align.png)    
+
+    | Setting           | Description                                  | Default Value         |
+    | ----------------- | -------------------------------------------- | --------------------- |
+    | **Default Scale** | Initial scale factor applied to the node     | Configurable per game (**Exp: 1.0**) |
+    | **Default Size**  | Base width and height used for scaling logic | Configurable per game (**Exp: 1050 x 1680**) |
+
+:::tip
+- Check Logo Static when is lowest Network
 :::
\ No newline at end of file