Merge pull request 'feature/add-jackpot-panel' (#56) from feature/add-jackpot-panel into develop

Reviewed-on: #56

docs/02-setup-main-game/05-main-scene/15-jackpot-panel.md

@@ -1,8 +1,7 @@
 ---
 sidebar_position: 15
 ---
-# Jackpot Setup
-
+# Jackpot 
 ---
 
 ## Overview
@@ -25,28 +24,30 @@ sidebar_position: 15
 
 ## Implementation
 
-### Core Prefabs
+### Prepare Assets
 
 - Use the prefabs located at:  
 
     |`assets/core-assets/jackpot-package/prefabs`|![Core](../img/05-main-scene/jackpot-panel/jackpot-core-prefabs.png)|
     |--------------------------------------------|--------------------------------------------------------------------|
 
-### Setup Steps
+### Setup
 
-#### Desktop
+#### Jackpot runner
 
-- Add the jackpot prefab to your main scene.
-- Set its position to **(0, 0)**.
+##### Desktop
+
+- The node jackpot to your main scene:
 
         ![Desktop](../img/05-main-scene/jackpot-panel/jackpot-in-desktop.png)
 
         More info: [Platform Node Spawner](http://localhost:3000/docs/faqs/setup-cocos-scene#platform-node-spawner)
 
-#### Mobile
+##### Mobile
 
 - Configure the jackpot node for both landscape and portrait orientations.
-- Use `UI Mobile Position` for a responsive layout.
+
+- Use `UI Mobile landscape Position` and `UI Mobile portrait Position` for a responsive layout.
 
         ![Mobile](../img/05-main-scene/jackpot-panel/jackpot-in-mobile.png)
 
@@ -58,21 +59,16 @@ sidebar_position: 15
 
         More info: [Platform Node Spawner](http://localhost:3000/docs/faqs/setup-cocos-scene#platform-node-spawner)
 
-### Result
+#### Result Panel
 
 - The jackpot panel works seamlessly across all platforms and orientations.
 
-        ![Result](../img/05-main-scene/jackpot-panel/jackpot-result.png)
+        ![Result](../img/05-main-scene/jackpot-panel/jackpot-positon-result.png)  
 
         More info: [Node Spawner](http://localhost:3000/docs/faqs/setup-cocos-scene#node-spawner)
 
 :::tip
-**Sibling Index Order:**
-| Node Name                              | Sibling Index | Notes                                 |
-|----------------------------------------|---------------|---------------------------------------|
-| `jackpot-runner-panel-desktop-spawner` | Lowest        | Usually at the bottom                 |
-| `container-jackpot-runner-mobile`      | Middle        | Between desktop and result panels     |
-| `jackpot-result-panel-spawner`         | Highest       | Always on top <br />   ![Result](../img/05-main-scene/jackpot-panel/jackpot-positon-result.png)                      |
+- Follow the game design layout.                  
 :::
 
 

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

@@ -0,0 +1,62 @@
+---
+sidebar_position: 18
+title: Gamble
+description: Display Gamble
+---
+
+# Gamble
+
+### 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>|
+
+
+### Scene Hierarchy
+
+Place the node in the following scene structure:
+
+<table>
+  <thead>
+    <tr>
+      <th style={{ width: "500px" }}>Path</th>
+      <th style={{ width: "500px" }}>Example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+            ```
+                Canvas
+                └── [main-view]
+                    └── [game-view]
+                        └── [gamble-loader]
+            ```
+        </td>
+      <td><center>![Scene Structure](../img/05-main-scene/gamle/gamble-structure.png)</center></td>
+    </tr>
+  </tbody>
+</table>
+---
+
+### Gamble Setup
+
+- In node component include:
+
+    ![Scene Structure](../img/05-main-scene/gamle/gamble-component.png)
+
+#### `gamble-loader`
+
+- A component for managing the loading and unloading of gambling scenes in a game.
+
+| Property         | Type      | Description                                             |
+|------------------|-----------|---------------------------------------------------------|
+| 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) |

docs/faqs/03-setup-cocos-scene.md

@@ -45,4 +45,20 @@ Positions a node at a specific location when the device is in landscape / portra
 2. Set `default Position` in the Inspector.
 3. The position updates automatically in mobile landscape / portrait mode.
 
-![Position](./img/default-setting.png)
+![Position](./img/default-setting.png)
+
+## Orientation UI Controller
+
+Manage UI visibility based on device orientation (landscape or portrait).
+
+![Position](./img/orientation-ui-controller.png)
+
+| Property            | Type    | Default   | Description                                                                                  |
+|---------------------|---------|-----------|----------------------------------------------------------------------------------------------|
+| **isLandscape**     | Boolean | true      | Indicates if the UI should be visible in landscape mode. Automatically syncs with ***isPortrait***. |
+| **isPortrait**      | Boolean | false     | Indicates if the UI should be visible in portrait mode. Automatically syncs with ***isLandscape***. |
+| **useActiveObject** | Boolean | false     | Visibility method:<br />- `false`: Uses opacity (0-255)<br />- `true`: Uses node active state       |
+
+**Notes:**
+- Automatically keeps landscape and portrait states in sync.
+- Supports both opacity and active state for controlling visibility.

template/00-template-content.md

@@ -0,0 +1,15 @@
+---
+sidebar_position: -1
+---
+
+# Name
+
+## Overview
+
+## Implementation
+
+### Prepare assets
+
+### Setup
+
+ ## Game Result Examples