add setup info pages

docs/02-setup-main-game/05-main-scene/02-background.md

@@ -7,6 +7,7 @@ sidebar_position: 2
 Is the visual scenery that appears behind the gameplay elements.
 
 ---
+## Overivew
 
 The background consists of 2 parts: **Landscape** and **Portrait**.
 
@@ -18,25 +19,25 @@ The background consists of 2 parts: **Landscape** and **Portrait**.
 |**Background Landscape**<br/>![Background Overview Landscape](./img/02-background/bg-overview-landscape-3.png)|<br/>![Background Overview Landscape](./img/02-background/bg-overview-landscape-1.png)|<br/>![Background Overview Landscape](./img/02-background/bg-overview-landscape-2.png)|
 |**Background Portrait**<br/>![Background Overview Portrait](./img/02-background/bg-overview-portrait-2.png)||<br/>![Background Overview Portrait](./img/02-background/bg-overview-portrait-1.png)|
 
-### 1. Prepare the assets
+## 1. Prepare the assets
 | | Assets | Description |
 |:-:|--------------|---------|
 |**Static**<br/>|![Background Prepare Landscape](./img/02-background/bg-prepare-assets-static.png)|Static background is necessary for the game|
 |**Animation**<br/>|![Background Prepare Portrait](./img/02-background/bg-prepare-assets-anim.png)|Animation background may or may not be present, depending on the game design|
 
-### 2. Setup Background Landscape
+## 2. Setup Background Landscape
     
     We use sprite frame background for landscape from prepared assets.
 
     ![Background Setup Landscape](./img/02-background/bg-setup-landscape.png)
 
-### 3. Setup Background Portrait
+## 3. Setup Background Portrait
 
     We use sprite frame background for mobile from prepared assets.
 
     ![Background Setup Portrait](./img/02-background/bg-setup-portrait.png)
 
-### 4. Setup Background Animation
+## 4. Setup Background Animation
 
 If the game have design animation for background, we will do this step.
 

docs/02-setup-main-game/05-main-scene/09-info-page.md

@@ -1,31 +0,0 @@
----
-sidebar_position: 9
----
-
-# Info Page
-
-Info Page (Information Page) provides players with essential details about how the game works. It helps players understand the rules, features, symbols, payout structures, and other gameplay mechanics.
-
----
-
-## Paytable
-
-Shows the value of each symbol and how much players can win from different combinations.
-
-## Special Feature
-
-Describes bonus rounds, free spins, jackpots, or other special win features.
-
-## Gamble Feature
-
-The Gamble Feature is a special option that allows players to risk their recent winnings for a chance to multiply them. 
-
-## Game Rules
-
-Explains the basic mechanics and objectives of the game.
-
-## Winning Lines or Ways
-
-This section shows the valid winning combinations or paylines.
-
-> To be added

docs/02-setup-main-game/05-main-scene/09-info-pages.md

@@ -0,0 +1,81 @@
+---
+sidebar_position: 9
+---
+
+# Info Pages
+
+Info Pages (Information Pages) provide players with essential details about how the game works. It helps player understand the rules, features, symbols, payout structures, and other gameplay mechanics.
+
+---
+## Overivew
+
+- **Desktop** consists Paytable and Rules in **Info Pages**.
+- **Mobile** is divided into 2 parts Paytable and Rules
+
+|Desktop | Mobile |
+|:------:|:------:|
+|![Background Overview Landscape](./img/09-info-page/overview-desktop-1.png)|![Background Overview Landscape](./img/09-info-page/overview-mobile-1.png)|
+|![Background Overview Landscape](./img/09-info-page/overview-desktop-2.png)<br/>![Background Overview Landscape](./img/09-info-page/overview-desktop-3.png)|![Background Overview Portrait](./img/09-info-page/overview-mobile-2.png)|
+
+## Prepare the assets
+| Assets | Description |
+|--------|-------------|
+|![Info Page Prepare Assets](./img/09-info-page/prepare-assets-1.png)|Used to setup **Rules** or image in RichText|
+|![Info Page Prepare Assets](./img/09-info-page/prepare-assets-2.png)|Used to setup **Paytable**|
+
+## Setup Prefabs Desktop
+
+| Step | Action | Description | Image Reference |
+| :--: | :----- | :---------- | :---------------------------------------------------------------------------------------------: |
+| 1    | Locate all template prefabs need for **Info Page Desktop** | Search for the `desktop-hyper-info-panel` prefab | ![Locate Prefabs](./img/09-info-page/prepare-prefabs-desktop-1.png) |
+| 2    | Clone assets| Copy/Pase to game assets location, then rename the copied prefabs by removing unnecessary prefixes. | ![Locate Prefabs](./img/09-info-page/prepare-prefabs-desktop-2.png) |
+| 3    | Get settings config| - Run DevTools on Browser.<br/>- On tab Console, find message with **event** = `config`.<br/>- Get values in context = `paytable` to setup for Item Payout with Item name and Odds | ![Info Page Prepare Assets](./img/09-info-page/prepare-setting-config.png) |
+
+### desktop-info-panel
+    
+    Change color `page-background`, `menu-header-background` follow the game design.
+
+    ![Locate Prefabs](./img/09-info-page/configure-prefab-desktop-1.png)
+
+### desktop-paytable-content
+
+- Paytable: Consist **Item with Payout** and **Item with Description**
+
+    ![Locate Prefabs](./img/09-info-page/configure-prefab-desktop-3.png) ![Locate Prefabs](./img/09-info-page/configure-prefab-desktop-4.png) 
+
+| Action | Item with Payout | Item with Description|
+| ------ | :--------------: | :------------------: |
+| Setup Item with **Name** and **Odds** follow the game design.  | ![Locate Prefabs](./img/09-info-page/configure-prefab-desktop-5.png) | ![Locate Prefabs](./img/09-info-page/configure-prefab-desktop-8.png) |
+| Setup sprite frame `item-display` same name with Item from prepared assets. | ![Locate Prefabs](./img/09-info-page/configure-prefab-desktop-6.png) | ![Locate Prefabs](./img/09-info-page/configure-prefab-desktop-9.png) |
+| Change color **odds value** follow the game design. | ![Locate Prefabs](./img/09-info-page/configure-prefab-desktop-7.png) ||
+| Change **description** follow the game design. | | ![Locate Prefabs](./img/09-info-page/configure-prefab-desktop-10.png) |
+
+- Feature Game: Depending on each game, there will be different features. Includes of 3 parts
+    - Title : Change Text and Color follow the game design.
+    - Image : Use from prepared assets.
+    - Description: Change Text follow the game design.
+
+| Overivew | Configure  |
+| :--------------: | :------------------: |
+| ![Locate Prefabs](./img/09-info-page/configure-prefab-desktop-11.png) | ![Locate Prefabs](./img/09-info-page/configure-prefab-desktop-12.png) |
+| ![Locate Prefabs](./img/09-info-page/configure-prefab-desktop-13.png) | ![Locate Prefabs](./img/09-info-page/configure-prefab-desktop-14.png) |
+
+### desktop-rules-content
+
+    1. Add new Node is child of `lines` name `lines-image` with **Sprite** Component
+    2. Use sprite frame **lines** from prepared assets.
+    3. Description: Change Text follow the game design.
+
+| Overivew | Configure  |
+| :--------------: | :------------------: |
+| ![Locate Prefabs](./img/09-info-page/configure-prefab-desktop-15.png) | ![Locate Prefabs](./img/09-info-page/configure-prefab-desktop-16.png) |
+
+## Setup Prefabs Mobile
+
+| Step | Action | Description | Image Reference |
+| :--: | :----- | :---------- | :-------------: |
+| 1    | Locate all template prefabs need for **Info Page Mobile** | Search for the `mobile-ui` prefab | ![Locate Prefabs](./img/09-info-page/prepare-prefabs-mobile-1.png) |
+| 2    | Clone assets| Copy/Pase to game assets location, then rename the copied prefabs by removing unnecessary prefixes. | ![Locate Prefabs](./img/09-info-page/prepare-prefabs-mobile-2.png) |
+| 3    | Configure prefabs| We will do the same as configure for desktop. |  |
+| 4    | Locate **Paytable** spawner position in `mobile-ui`, then use prefab configured.| Search for the `mobile-paytable-content-spawner` in `mobile-ui` prefab. | ![Locate Prefabs](./img/09-info-page/configure-prefab-mobile-1.png) |
+| 5    | Locate **Rules** spawner position in `mobile-ui`, then use prefab configured.| Search for the `mobile-rule-content-spawner` in `mobile-ui` prefab. | ![Locate Prefabs](./img/09-info-page/configure-prefab-mobile-2.png) |