Merge pull request 'feature/add-freeround' (#50) from feature/add-freeround into develop

Reviewed-on: #50

docs/02-setup-main-game/05-main-scene/08-free-round.md

@@ -1,11 +1,105 @@
 ---
-sidebar_position: 8
+sidebar_position: 16
+title: Free Round
+description: Display and manage remaining free rounds in the game.
 ---
 
 # Free Round
 
-> To be added
+## Overview
+
+- Handles the **display** and **logic** for tracking remaining free rounds in a slot game.  
+- Supports both **desktop** and **mobile**, including animation and event handling.
+
+| Orientation | Preview |
+|-------------|---------|
+| Desktop     | ![Desktop](../img/05-main-scene/freeround-counter/overview-freeround-desktop.png) |
+| Mobile      | ![Mobile](../img/05-main-scene/freeround-counter/overview-freeround.png)          |
 
 ---
 
-> To be added
+## Implementation
+
+### Prefab Location
+
+#### In Core
+
+| Path                                                                 | Example                                                                                  |
+|---------------------------------------------------------------------|------------------------------------------------------------------------------------------|
+| `assets\core-assets\hyper-core\packages\freeround-count-box\prefabs` | <center>![Core Prefab](../img/05-main-scene/freeround-counter/freeround-path-prefabs.png)</center> |
+
+#### In Game
+
+| Path                              | Example                                                                                           |
+|-----------------------------------|---------------------------------------------------------------------------------------------------|
+| `assets\game-assets\prefabs`      | <center>![Copied Prefab](../img/05-main-scene/freeround-counter/freeround-path-prefabs-in-game.png)</center> |
+
+### General Setup
+
+![Copied Prefab](../img/05-main-scene/freeround-counter/freeround-counter-general.png) 
+
+- Component that manages and displays the free rounds counter. 
+
+![Copied Prefab](../img/05-main-scene/freeround-counter/freeround-counter-setting-general.png)
+
+**(platform)**: Desktop / Mobile <span class="red-star">*</span>
+
+| Property      | Description                              |
+|---------------|------------------------------------------|
+| `duration`    | Animation duration in seconds (fade In/Out) |
+| `content`     | Container node for the counter           |
+| `labelLeft`   | Label displaying remaining free rounds   |
+
+---
+
+### Platform Setup
+
+#### Desktop
+
+| Component                | Description                                                                                                   |
+|--------------------------|---------------------------------------------------------------------------------------------------------------|
+| `Platform-ui-controller` | [Platform UI Controller](http://localhost:3000/docs/faqs/setup-cocos-scene#Platform-ui-controller)           |
+
+![Overview](../img/05-main-scene/freeround-counter/freeround-counter-setup-desktop.png)
+
+---
+
+#### Mobile
+
+| Component             | Description                                                                                                              |
+|-----------------------|--------------------------------------------------------------------------------------------------------------------------|
+| `Platform-ui-controller` | [Platform UI Controller](http://localhost:3000/docs/faqs/setup-cocos-scene#Platform-ui-controller)                  |
+| `UI Mobile Position`      | [UI Mobile Position](http://localhost:3000/docs/faqs/setup-cocos-scene#ui-mobile-landscape--portrait--position)     |
+
+![Overview](../img/05-main-scene/freeround-counter/freeround-counter-setup-mobile.png)
+
+### Font Setup
+
+<table>
+  <thead>
+    <tr>
+      <th style={{ width: "700px" }}>Preview</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><center>![Add Font](../img/05-main-scene/freeround-counter/add-font.png)</center></td>
+    </tr>
+  </tbody>
+</table>
+
+:::tip
+   - **Position And Size**: Follow Game Design.
+:::
+
+
+## Game Result Examples
+
+*To show the free round popup, make sure the main scene includes the popup panel.*               
+<span class="red-star">*</span> More Detail: [Popup Panel](http://localhost:3000/docs/setup-main-game/main-scene/popup-panel#multiple-popup-panel)
+
+|Platform|Popup|Action|Result|
+|--------|-----|------|------|
+|Desktop|![Desktop](../img/05-main-scene/freeround-counter/popup-freeround-counter-desktop.png)|click → Start|![Add Font](../img/05-main-scene/freeround-counter/overview-freeround-desktop.png)|
+|Mobile|![Mobile](../img/05-main-scene/freeround-counter/popup-freeround-counter-mobile.png)|click → Start|![Add Font](../img/05-main-scene/freeround-counter/overview-freeround.png)|
+

src/css/custom.css

@@ -28,3 +28,6 @@
   --ifm-color-primary-lightest: #4fddbf;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
+.red-star {
+  color: red;
+}