Merge pull request 'feature/add-gamle' (#66) from feature/add-gamle into develop

Reviewed-on: #66

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

@@ -6,18 +6,22 @@ description: Display Gamble
 
 # Gamble
 
-### Overview
+## Overview
 
 **Gamble** in slot games is a feature that lets players risk their winnings for a chance to double (or multiply) them, usually by guessing a card color.
 
 | Device Type   | Preview                                                                     |
 |---------------|-----------------------------------------------------------------------------|
-| Desktop       | ![Desktop](../img/05-main-scene/gamle/gamble-desktop.png)                   |
-| Landscape     | ![Landscape](../img/05-main-scene/gamle/gamble-landscape.png)               |
-| Portrait      | <center>![Portrait](../img/05-main-scene/gamle/gamble-portrait.png)</center>|
+| Desktop       | ![Desktop](../img/05-main-scene/gamble/gamble-desktop.png)                   |
+| Landscape     | ![Landscape](../img/05-main-scene/gamble/gamble-landscape.png)               |
+| Portrait      | <center>![Portrait](../img/05-main-scene/gamble/gamble-portrait.png)</center>|
 
 
-### Scene Hierarchy
+## Implementation
+
+### Prepare Assets
+
+#### Scene Hierarchy
 
 Place the node in the following scene structure:
 
@@ -38,20 +42,21 @@ Place the node in the following scene structure:
                         └── [gamble-loader]
             ```
         </td>
-      <td><center>![Scene Structure](../img/05-main-scene/gamle/gamble-structure.png)</center></td>
+      <td><center>![Scene Structure](../img/05-main-scene/gamble/gamble-structure.png)</center></td>
     </tr>
   </tbody>
 </table>
 ---
 
-### Gamble Setup
+### Setup
 
 - In node component include:
 
-    ![Scene Structure](../img/05-main-scene/gamle/gamble-component.png)
+![Scene Structure](../img/05-main-scene/gamble/gamble-component.png)
 
-#### `gamble-loader`
+#### Components
 
+**`gamble-loader`**         
 - A component for managing the loading and unloading of gambling scenes in a game.
 
 | Property         | Type      | Description                                             |
@@ -59,4 +64,27 @@ Place the node in the following scene structure:
 | nodeBackground   | cc.Node   | Background node reference                               |
 | sceneGamble      | String    | Name of the gamble scene                                |
 | rootGambleName   | String    | Root node name for the gamble scene                     |
-| rootGamble       | Node      | Runtime reference to the gamble root node (initialized in ctor) |
+
+
+**`gamble-panel-mobile-scaler`**      
+
+#### Backgrounds
+
+![Backgrounds](../img/05-main-scene/gamble/add-background-gamble.png)
+
+1. Use background scenes for the gamble feature:
+  - `gamble-background-landscape` : [Setup Background Landscape](/docs/setup-main-game/main-scene/background#2-setup-background-landscape)
+
+  - `gamble-background-portrait` : [Setup Background Portrait](/docs/setup-main-game/main-scene/background#3-setup-background-portrait)
+
+2. Attach the `orientation-ui-controller` component to both `gamble-background-landscape` and `gamble-background-portrait` nodes.  
+  3. The `gamble-background-portrait` node has a dedicated component for portrait mode:
+
+    ![gamble-background-portrait](../img/05-main-scene/gamble/gamble-portrait-component.png)
+
+    This component handles properties and logic specific to the portrait layout.
+
+## Game Result Example
+
+Make sure the main scene includes the Win Limit Panel.  
+🔗 More Info [Game Result](/docs/setup-main-game/main-scene/win-limit#gamble-win-limit)