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

Reviewed-on: #40

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

@@ -1,11 +1,86 @@
 ---
 sidebar_position: 15
 ---
-
 # Jackpot Setup
 
 ---
 
 ## Overview
 
+- **Jackpot Feature** is a system where there are **multiple levels (tiers)** of prizes, usually increasing in value. This structure gives players a chance to win **smaller jackpots more frequently**, while still keeping a large top prize available.
 
+| Tier  | Description                  | Preview                                                    |
+|-------|------------------------------|------------------------------------------------------------|
+| Grand | The top prize, very rare <br />and often worth thousands  <br />or even millions(especially if it's progressive)|![Grand](../img/05-main-scene/jackpot-panel/jackpot-grand.png) |
+| Major | A significant prize, harder to win.        | ![Major](../img/05-main-scene/jackpot-panel/jackpot-major.png) |
+| Minor | A bit higher in value, still fairly common.        | ![Minor](../img/05-main-scene/jackpot-panel/jackpot-minor.png) |
+| Mini  | The smallest and easiest to win.  | ![Mini](../img/05-main-scene/jackpot-panel/jackpot-mini.png)   |
+
+- The panel is responsive and supports both desktop and mobile layouts:
+
+| Orientation | Preview                                                    |
+|-------------|------------------------------------------------------------|
+| Desktop     | ![Desktop](../img/05-main-scene/jackpot-panel/jackpot-desktop.png) |
+| Mobile      | ![Mobile](../img/05-main-scene/jackpot-panel/jackpot-mobile.png)   |
+
+## Implementation
+
+### Core Prefabs
+
+- Use the prefabs located at:  
+
+    |`assets/core-assets/jackpot-package/prefabs`|![Core](../img/05-main-scene/jackpot-panel/jackpot-core-prefabs.png)|
+    |--------------------------------------------|--------------------------------------------------------------------|
+
+### Setup Steps
+
+#### Desktop
+
+- Add the jackpot prefab to your main scene.
+- Set its position to **(0, 0)**.
+
+        ![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
+
+- Configure the jackpot node for both landscape and portrait orientations.
+- Use `UI Mobile Position` for a responsive layout.
+
+        ![Mobile](../img/05-main-scene/jackpot-panel/jackpot-in-mobile.png)
+
+         More info: [UI Mobile Position](http://localhost:3000/docs/faqs/setup-cocos-scene#ui-mobile-landscape--portrait--position)
+
+- Example using `Platform Node Spawner`:
+
+        ![Mobile Spawner](../img/05-main-scene/jackpot-panel/jackpot-in-mobile-spawner.png)
+
+        More info: [Platform Node Spawner](http://localhost:3000/docs/faqs/setup-cocos-scene#platform-node-spawner)
+
+### Result
+
+- The jackpot panel works seamlessly across all platforms and orientations.
+
+        ![Result](../img/05-main-scene/jackpot-panel/jackpot-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)                      |
+:::
+
+
+## Game Result Examples
+
+| Win Tier | Example |
+|----------|------------------------------------------------------------------|
+| Grand    | ![Grand](../img/05-main-scene/jackpot-panel/jackpot-grand-win.jpg) |
+| Major    | ![Major](../img/05-main-scene/jackpot-panel/jackpot-major-win.jpg) |
+| Minor    | ![Minor](../img/05-main-scene/jackpot-panel/jackpot-minor-win.jpg) |
+| Mini     | ![Mini](../img/05-main-scene/jackpot-panel/jackpot-mini-win.jpg)   |

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

@@ -22,3 +22,27 @@ Use this configuration to control which prefabs appear based on the current plat
 |--------------------|----------------------|-----------------------------------------------|
 | **Desktop Toggle** |  ✅ Enabled          | Show node on desktop                          |
 | **Mobile Toggle**  |  ❌ Disabled         | Hide node on mobile                           |
+
+
+## Node Spawner
+
+Spawns a prefab at the same position as the original node and then removes the node.
+
+#### Usage
+
+- On scene start, the prefab replaces the node.
+1. Attach the script to a placeholder node.
+2. Set the `prefab` property in the Inspector.
+
+
+## UI Mobile Landscape / Portrait  Position
+
+Positions a node at a specific location when the device is in landscape / portrait mode on mobile.
+
+#### Usage
+
+1. Attach the script to your node.
+2. Set `default Position` in the Inspector.
+3. The position updates automatically in mobile landscape / portrait mode.
+
+![Position](./img/default-setting.png)