add setup info pages

Reviewed-on: #40

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

@@ -14,54 +14,54 @@ Info Pages (Information Pages) provide players with essential details about how
 
 |Desktop | Mobile |
 |:------:|:------:|
-|![Background Overview Landscape](./img/09-info-pages/overview-desktop-1.png)|![Background Overview Landscape](./img/09-info-pages/overview-mobile-1.png)|
+|![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-pages/overview-desktop-2.png)<br/>![Background Overview Landscape](./img/09-info-pages/overview-desktop-3.png)|![Background Overview Portrait](./img/09-info-pages/overview-mobile-2.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-pages/prepare-assets-1.png)|Used to setup **Rules** or image in RichText|
+|![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-pages/prepare-assets-2.png)|Used to setup **Paytable**|
+|![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 Pages Desktop** | Search for the `desktop-hyper-info-panel` prefab | ![Locate Prefabs](./img/09-info-pages/prepare-prefabs-desktop-1.png) |
+| 1    | Locate all template prefabs need for **Info Pages 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-pages/prepare-prefabs-desktop-2.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 | <img width="1500"/> ![Info Page Prepare Assets](./img/09-info-pages/prepare-setting-config.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 | <img width="1500"/> ![Info Page Prepare Assets](./img/09-info-page/prepare-setting-config.png) |
 
 ### desktop-info-panel
 
     | Step | Action | Image Reference |
         | :--: | :----- | :-------------: |
-        | 1 | Change **Color** in `page-background` follow the game design..| <img width="400"/>![Locate Prefabs](./img/09-info-pages/configure-panel-1.png) |
+        | 1 | Change **Color** in `page-background` follow the game design..| <img width="400"/>![Locate Prefabs](./img/09-info-page/configure-panel-1.png) |
-        | 2 | Change **Color** in `menu-header-background` follow the game design. | ![Locate Prefabs](./img/09-info-pages/configure-panel-2.png) |
+        | 2 | Change **Color** in `menu-header-background` follow the game design. | ![Locate Prefabs](./img/09-info-page/configure-panel-2.png) |
-        | 3 | Update **Prefab** in `paytable-content` from prepared prefabs. | ![Locate Prefabs](./img/09-info-pages/configure-panel-3.png) ||
+        | 3 | Update **Prefab** in `paytable-content` from prepared prefabs. | ![Locate Prefabs](./img/09-info-page/configure-panel-3.png) ||
-        | 4 | Update **Prefab** in `rules-content` from prepared prefabs..| ![Locate Prefabs](./img/09-info-pages/configure-panel-4.png) |
+        | 4 | Update **Prefab** in `rules-content` from prepared prefabs..| ![Locate Prefabs](./img/09-info-page/configure-panel-4.png) |
 
 ### desktop-paytable-content
 
 - Paytable: Consist **Item with Payout** and **Item with Description**
 
-    ![Locate Prefabs](./img/09-info-pages/configure-paytable-1.png) ![Locate Prefabs](./img/09-info-pages/configure-paytable-2.png) 
+    ![Locate Prefabs](./img/09-info-page/configure-paytable-1.png) ![Locate Prefabs](./img/09-info-page/configure-paytable-2.png) 
 
     - Setup **Item with Payout**
      
         | Step | Action | Image Reference |
         | :--: | :----- | :-------------: |
-        | 1 | Setup Item with **Item Name** and **Odds Items** follow the game design.| <img width="1000"/> ![Locate Prefabs](./img/09-info-pages/configure-item-payout-1.png) |
+        | 1 | Setup Item with **Item Name** and **Odds Items** follow the game design.| <img width="1000"/> ![Locate Prefabs](./img/09-info-page/configure-item-payout-1.png) |
-        | 2 | Setup **Sprite Frame** in `item-display` same name with item from prepared assets. | ![Locate Prefabs](./img/09-info-pages/configure-item-payout-2.png) |
+        | 2 | Setup **Sprite Frame** in `item-display` same name with item from prepared assets. | ![Locate Prefabs](./img/09-info-page/configure-item-payout-2.png) |
-        | 3 | Change **Color** in<br/> `multi-x...`<br/>`oods-x...`<br/> follow the game design. | ![Locate Prefabs](./img/09-info-pages/configure-item-payout-3.png) ||
+        | 3 | Change **Color** in<br/> `multi-x...`<br/>`oods-x...`<br/> follow the game design. | ![Locate Prefabs](./img/09-info-page/configure-item-payout-3.png) ||
-        | 4 | - Change **Font** and **Font Size** in<br/> `multi-x...`<br/>`oods-x...`<br/> follow the game design.<br/> - Use [Bitmap Font Creator](http://localhost:3000/docs/category/game-asset-structure) to create Font Bitmap if you need it.| ![Locate Prefabs](./img/09-info-pages/configure-item-payout-4.png) |
+        | 4 | - Change **Font** and **Font Size** in<br/> `multi-x...`<br/>`oods-x...`<br/> follow the game design.<br/> - Use [Bitmap Font Creator](http://localhost:3000/docs/category/game-asset-structure) to create Font Bitmap if you need it.| ![Locate Prefabs](./img/09-info-page/configure-item-payout-4.png) |
 
     - Setup **Item with Description**
      
         | Step | Action | Image Reference |
         | :--: | :----- | :-------------: |
-        | 1 | Setup Item with **Name** follow the game design. | <img width="1250"/> ![Locate Prefabs](./img/09-info-pages/configure-item-description-1.png) |
+        | 1 | Setup Item with **Name** follow the game design. | <img width="1250"/> ![Locate Prefabs](./img/09-info-page/configure-item-description-1.png) |
-        | 2 | Setup **Sprite Frame** in `item-display` same name with item from prepared assets. | ![Locate Prefabs](./img/09-info-pages/configure-item-description-2.png) |
+        | 2 | Setup **Sprite Frame** in `item-display` same name with item from prepared assets. | ![Locate Prefabs](./img/09-info-page/configure-item-description-2.png) |
-        | 3 | Change **String** in `description` follow the game design. |  ![Locate Prefabs](./img/09-info-pages/configure-item-description-3.png) |
+        | 3 | Change **String** in `description` follow the game design. |  ![Locate Prefabs](./img/09-info-page/configure-item-description-3.png) |
 
 - Feature Game:
 
@@ -73,8 +73,8 @@ Info Pages (Information Pages) provide players with essential details about how
 
 | Overivew | Configure  |
 | :--------------: | :------------------: |
-| ![Locate Prefabs](./img/09-info-pages/configure-feature-game-1.png) | ![Locate Prefabs](./img/09-info-pages/configure-feature-game-2.png) |
+| ![Locate Prefabs](./img/09-info-page/configure-feature-game-1.png) | ![Locate Prefabs](./img/09-info-page/configure-feature-game-2.png) |
-| ![Locate Prefabs](./img/09-info-pages/configure-feature-game-3.png) | ![Locate Prefabs](./img/09-info-pages/configure-feature-game-4.png) |
+| ![Locate Prefabs](./img/09-info-page/configure-feature-game-3.png) | ![Locate Prefabs](./img/09-info-page/configure-feature-game-4.png) |
 
 ### desktop-rules-content
     There are 2 types: **LINES** and **DYNAWAYS**
@@ -86,15 +86,15 @@ Info Pages (Information Pages) provide players with essential details about how
 
 | Overivew | Configure  |
 | :--------------: | :------------------: |
-| ![Locate Prefabs](./img/09-info-pages/configure-rules-1.png) | ![Locate Prefabs](./img/09-info-pages/configure-rules-2.png) |
+| ![Locate Prefabs](./img/09-info-page/configure-rules-1.png) | ![Locate Prefabs](./img/09-info-page/configure-rules-2.png) |
-| ![Locate Prefabs](./img/09-info-pages/configure-rules-3.png) | ![Locate Prefabs](./img/09-info-pages/configure-rules-4.png) |
+| ![Locate Prefabs](./img/09-info-page/configure-rules-3.png) | ![Locate Prefabs](./img/09-info-page/configure-rules-4.png) |
 
 ## Setup Prefabs Mobile
 
 | Step | Action | Description | Image Reference |
 | :--: | :----- | :---------- | :-------------: |
-| 1    | Locate all template prefabs need for **Info Pages Mobile**| Search for the `mobile-ui` prefab |<img width="2000"/>![Locate Prefabs](./img/09-info-pages/prepare-prefabs-mobile-1.png) |
+| 1    | Locate all template prefabs need for **Info Pages Mobile**| Search for the `mobile-ui` prefab |<img width="2000"/>![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-pages/prepare-prefabs-mobile-2.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-pages/configure-prefab-mobile-1.png) |
+| 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. | <img width="1500"/>![Locate Prefabs](./img/09-info-pages/configure-prefab-mobile-2.png) |
+| 5    | Locate **Rules** spawner position in `mobile-ui`, then use prefab configured.| Search for the `mobile-rule-content-spawner` in `mobile-ui` prefab. | <img width="1500"/>![Locate Prefabs](./img/09-info-page/configure-prefab-mobile-2.png) |