Merge pull request 'feature/add-winpoint-on-reel' (#46) from feature/add-winpoint-on-reel into develop

Reviewed-on: #46

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

@@ -1,11 +0,0 @@
----
-sidebar_position: 5
----
-
-# Prensent Win
-
-> To be added
-
----
-
-> To be added

docs/02-setup-main-game/05-main-scene/05-win-point-on-reel.md

@@ -0,0 +1,148 @@
+---
+sidebar_position: 5
+---
+
+# Win Point on Reel
+
+## Overview
+
+- Displays win points for each payline, including scatter wins.
+
+![Overview](../img/05-main-scene/win-point-on-reel/win-point-overview.png)
+
+## Implementation
+
+### Prefab Locations
+
+#### In Core
+
+<table>
+  <thead>
+    <tr>
+      <th style={{ width: "300px" }}>Path</th>
+      <th style={{ width: "400px" }}>Example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>assets\core-assets\hyper-core\packages\on-reel-present-win-point\prefab</code></td>
+      <td><center>![Core Prefab](../img/05-main-scene/win-point-on-reel/win-point-core.png)</center></td>
+    </tr>
+  </tbody>
+</table>
+
+#### In Game
+
+<table>
+  <thead>
+    <tr>
+      <th style={{ width: "300px" }}>Path</th>
+      <th style={{ width: "400px" }}>Example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>assets\game-assets\prefabs</code></td>
+      <td><center>![Copied Prefab](../img/05-main-scene/win-point-on-reel/prefab-on-reel-in-game.png)</center></td>
+    </tr>
+  </tbody>
+</table>
+
+### Setup Steps
+
+#### Steps 1: Add Prefab to Scene
+
+Add the win point on reel prefab to your main scene.
+
+<table>
+  <thead>
+    <tr>
+      <th style={{ width: "300px" }}>Component</th>
+      <th style={{ width: "400px" }}>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>on-reel-present-win-point</code></td>
+      <td><code>A component to **show/hide** points on reels</code></td>
+    </tr>
+    <tr>
+      <td><code>hyper-present-win-point</code></td>
+      <td><code>Manages win point presentation flow</code></td>
+    </tr>
+  </tbody>
+</table>
+
+
+    ![Overview](../img/05-main-scene/win-point-on-reel/win-point-component.png)
+
+#### Steps 2: Configure Node Targets
+Set the target node where each win point label appears and define its size and offset.
+
+    ![Overview](../img/05-main-scene/win-point-on-reel/win-point-node-target-component.png)
+
+<table>
+  <thead>
+    <tr>
+      <th style={{ width: "200px" }}>Property</th>
+      <th style={{ width: "100px" }}>Type</th>
+      <th style={{ width: "400px" }}>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>labelPosition</code></td>
+      <td><code>cc.Vec2</code></td>
+      <td>Offset position for the win point label</td>
+    </tr>
+    <tr>
+      <td><code>nodeTarget</code></td>
+      <td><code>cc.Node</code></td>
+      <td>Target node containing the label</td>
+    </tr>
+    <tr>
+      <td><code>cellItemSize</code></td>
+      <td><code>cc.Vec2</code></td>
+      <td>Size of each slot cell</td>
+    </tr>
+    <tr>
+      <td><code>defaultFontSize</code></td>
+      <td><code>number</code></td>
+      <td>Default font size for the label</td>
+    </tr>
+  </tbody>
+</table>
+
+#### Steps 3: Set Up Label Component
+
+
+![Overview](../img/05-main-scene/win-point-on-reel/win-point-label-component.png)
+
+- **Component**:            
+    - Displays win values on the reels.
+    - Supports formatted text (number, currency).
+
+- **Custom Font**:                   
+    Add a custom font to style the win label.         
+<table>
+  <thead>
+    <tr>
+      <th style={{ width: "300px" }}>Path</th>
+      <th style={{ width: "400px" }}>Example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>assets\game-assets\fonts\preloads\main-game\fnt-win-point-on-reel</code></td>
+      <td><center>![Overview](../img/05-main-scene/win-point-on-reel/add-font.png)</center></td>
+    </tr>
+  </tbody>
+</table>
+
+:::tip
+   - **Position And Size**: Follow Game Design.
+:::
+
+ ## Game Result Examples
+
+ ![Overview](../img/05-main-scene/win-point-on-reel/win-point-result.png)|