add setup idle animation

Reviewed-on: #55

docs/02-setup-main-game/05-main-scene/16-idle-animation.md

@@ -0,0 +1,57 @@
+---
+sidebar_position: 16
+---
+# Idle Animation
+
+---
+
+## Overview
+
+![Locate Prefabs](./img/16-idle-animation/overview.png) ![Major](./img/16-idle-animation/overview.gif)
+
+## Prepare the assets
+
+| Assets | Description |
+|--------|-------------|
+| ![Info Page Prepare Assets](./img/16-idle-animation/prepare-assets-1.png) | Used to Setup the static sprite frame. |
+| ![Info Page Prepare Assets](./img/16-idle-animation/prepare-assets-2.png) | Used to Setup the idle animation. |
+
+## Setup Idle Animation
+
+### Configure Settings
+
+        Create the following script:
+```jsx title="assets/game-assets/scripts/slotty-settings/extend-slotty-setting.js"
+var BaseSlottySetting = p4fslot.require('slotty-setting');
+var DIContainer = p4fcore.require('di-container');
+
+BaseSlottySetting.prototype._registerInjection = function () {
+    DIContainer.Register('cellItemRender', require('idle-cell-item-render'));
+    DIContainer.Register('idleAnimationHandler', require('idle-animation-handler'));
+};
+```
+
+### Setup Animations
+1. Using hepler to generate animation using the prepared assets
+
+    ![Background Setup Helper Anim](./img/16-idle-animation/setup-anim-helper-1.png)
+    ![Background Setup Helper Anim](./img/16-idle-animation/setup-anim-helper-2.png)
+
+2. Configure Spine Animation
+    - Set **Is Loop** ✅.
+    - Setup the **Static Sprite Frame** using the prepared assets.
+
+    ![Background Setup Animation](./img/16-idle-animation/setup-anim-1.png)
+### Configure Scene
+
+1. Search for the `idle-animation-panel` prefab.
+2. Drag the "prefab" into "scene".
+3. Click "Generate Panel".
+
+![Locate Prefabs](./img/16-idle-animation/configure-scene-1.png)
+
+:::warning
+When using **prefab** directly from **core-assets**, you should convert to **Regular Node**.
+
+![Locate Prefabs](./img/16-idle-animation/configure-scene-warning.png)
+:::

docs/02-setup-main-game/05-main-scene/17-win-limit.md

@@ -0,0 +1,72 @@
+---
+sidebar_position: 17
+title: Win Limit
+description: Display limit win
+---
+
+# Win Limit
+
+### Overview
+
+#### Win Limit
+
+- The **Win Limit** popup appears during gameplay when the player's win points reach a predefined threshold.
+
+![Win Limit Popup](../img/05-main-scene/win-limit/overview.png)
+
+#### Gamble Win Limit
+
+- The **Gamble Win Limit** popup is triggered during the gamble feature when the player reaches the maximum number of allowed gamble attempts (typically 5).
+
+![Gamble Win Limit Popup](../img/05-main-scene/win-limit/overview-gamble.png)
+
+---
+
+### Prefab Location
+
+| Path                                                     | Prefab Name                  |
+|----------------------------------------------------------|------------------------------|
+| `assets/core-assets/hyper-core/packages/present/prefabs` | `present-win-limit-reached`  |
+
+### Scene Hierarchy
+
+Place the prefab in the following scene structure:
+
+```
+Canvas
+└── [main-view]
+    └── [game-view]
+        └── [present-win-limit-reached]
+```
+
+![Scene Structure](../img/05-main-scene/win-limit/win-limit-component.png)
+
+---
+
+### Asset Setup
+
+- Drag and drop the required image onto the node in the editor:
+
+![Asset Setup](../img/05-main-scene/win-limit/assets-win-limit.png)
+
+|      Drag Sprite        |     Node Name         |
+|-------------------------|-----------------------|
+| `you-won`               | `you-won`             |
+| `win-limit-reached`     | `win-limit-reached`   |
+| `gamble-limit-reached`  | `gamble-limit-reached`|
+| `btn-normal`            | `btn-continue`        |
+| `text-continue`         | `continue`            |
+
+
+### Font
+
+- Use a **custom font** to match the win label style for your game theme.
+
+![Font](../img/05-main-scene/win-limit/add-font.png)
+
+---
+
+:::tip
+- Follow the game design layout for assets and fonts.
+- Win limit configuration may vary by game.
+:::