add table in content

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

@@ -2,7 +2,7 @@
 sidebar_position: 5
 ---
 
-# Win Point On Reel
+# Win Point on Reel
 
 ## Overview
 
@@ -13,55 +13,136 @@ sidebar_position: 5
 
 ## Implementation
 
-### Core Prefabs
+### Prefab Locations
 
-| Path | Example |
+#### In Core
-|------|---------|
+
-| `assets\core-assets\hyper-core\packages\on-reel-present-win-point\prefab` | ![Overview](../img/05-main-scene/win-point-on-reel/win-point-core.png) |
+<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.  
+#### Steps 1: Add Prefab to Scene
 
-- Add the win point on reel prefab to your main 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>
 
-    | Component                       | Description                                         |
-    |----------------------------------|-----------------------------------------------------|
-    | `on-reel-present-win-point`      | Component to **show/hide** points on reels          |
-    | `hyper-present-win-point`        | Manages win point presentation flow                 |
 
     ![Overview](../img/05-main-scene/win-point-on-reel/win-point-component.png)
 
-#### Steps 2. 
+#### Steps 2: Configure Node Targets
-- Manages the display and animation of win point labels at specific reel positions in the slot game.
+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)
 
-    | Property           | Type      | Description                                 |
+<table>
-    |--------------------|-----------|---------------------------------------------|
+  <thead>
-    | `labelPosition`    | `cc.Vec2` | Offset position for the win point label     |
+    <tr>
-    | `nodeTarget`       | `cc.Node` | Target node containing the label            |
+      <th style={{ width: "200px" }}>Property</th>
-    | `cellItemSize`     | `cc.Vec2` | Size of each slot cell                      |
+      <th style={{ width: "100px" }}>Type</th>
-    | `defaultFontSize`  | `number`  | Default font size for the label             |
+      <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
+#### Steps 3: Set Up Label Component
 
-- Set Up Label
 
 ![Overview](../img/05-main-scene/win-point-on-reel/win-point-label-component.png)
 
-    - Add `label-point`:            
+- **Component**:            
-        - **Display:** Shows win points on reels.
+    - Displays win values on the reels.
-        - **Formatting:** Supports number and currency formats for localization.
+    - Supports formatted text (number, currency).
-
-    - Add Font:                   
-        - Add a custom font asset to the win point component.           
-
-        |           path            |                   example                                     |
-        |---------------------------|---------------------------------------------------------------|
-        |path: `assets\game-assets\fonts\preloads\main-game\fnt-win-point-on-reel`|![Overview](../img/05-main-scene/win-point-on-reel/add-font.png)|
 
+- **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