Merge pull request 'add set up main game' (#2) from add-setup-manual into develop

Reviewed-on: #2

docs/01-setup-the-project/03-setup-custom-engine.md

@@ -2,9 +2,9 @@
 sidebar_position: 3
 ---
 
-# Set Custom Cocos Engine
+# Setup Custom Cocos Engine
 
-Link project to a custom Cocos Engine.
+Set **Javascript Engine Path** to a **custom Cocos Engine**.
 
 Thank to the open source nature of Cocos Creator, we are able to customize some of the function in the source code to meet the requirement for Hyper Slot Game.
 

docs/02-setup-main-game/01-game-config.md

@@ -2,7 +2,7 @@
 sidebar_position: 1
 ---
 
-# Adding Game Configuration
+# Game Configuration
 
 While the core logic is responsible for calculations and maintaining the game state, it's the client's responsibility to define all game-specific information.
 
@@ -55,7 +55,7 @@ To establish this mapping, use the following configuration script:
 
 ```jsx title="assets/game-assets/scripts/configs/extend-hyper-gaming-config.js"
 var HyperGamingConfig = require('hyper-gaming-config');
-var SlottyItem = require("slotty-item");
+var SlottyItem = require('slotty-item');
 
 HyperGamingConfig.itemMapper['BONUS'] = SlottyItem.Bonus;
 HyperGamingConfig.itemMapper['PIC1'] =  SlottyItem.Pic1;
@@ -147,7 +147,9 @@ To connect and interact with the Hyper Gaming server, we need to register two ke
 To register these, add the `_registerInjection` function in `extend-slotty-setting.js`:
 
 ```jsx title="assets/game-assets/scripts/slotty-settings/extend-slotty-setting.js"
-SlottySetting.prototype._registerInjection = function () {
+var DIContainer = p4fcore.require('di-container');
+
+BaseSlottySetting.prototype._registerInjection = function () {
     DIContainer.Register('serverConfig', require('hyper-gaming-config'));
     DIContainer.Register('serverHandler', p4fslot.require('hyper-gaming-server-handler'));
 };
@@ -158,12 +160,12 @@ In addition to server modules, all Hyper Gaming projects should initialize the f
 In the same `extend-slotty-setting.js`, add this function:
 
 ```jsx title="assets/game-assets/scripts/slotty-settings/extend-slotty-setting.js"
-var HyperSoundHandler = require('extend-sound-handler');
+var HyperSoundHandler = require('sound-handler');
 var UISoundHandler = require('ui-sound-handler');
 var HyperHotkeyHandler = require('hyper-hotkey-handler');
 var HyperNotificationHandler = require('hyper-notification-handler');
 
-SlottySetting.prototype._initializeParameter = function () {
+BaseSlottySetting.prototype._initializeParameter = function () {
     new UISoundHandler();
     new HyperSoundHandler();
     new HyperHotkeyHandler();

docs/02-setup-main-game/02-preview-scene.md

@@ -12,8 +12,8 @@ This scene includes a `login-hyper-gaming` object used to establish a connection
 
 Available environments:
 
-- **DEMO** : similar to [ https://gaming-world.joker88.club/]( https://gaming-world.joker88.club/). This environment uses a demo account, so no login is required. Some features are disabled, but the outcome feature is enabled, allowing you to select specific outcomes for testing purposes.
+- **DEMO** : similar to [https://gaming-world.joker88.club]( https://gaming-world.joker88.club/). This environment uses a demo account, so no login is required. Some features are disabled, but the outcome feature is enabled, allowing you to select specific outcomes for testing purposes.
-- **SAT** : similar to [http://fns.joker88.club/] (http://fns.joker88.club/). This environment requires a valid account to log in. Except for the outcome feature, all other features are enabled, including replay and resume functionality.
+- **SAT** : similar to [http://fns.joker88.club](http://fns.joker88.club/). This environment requires a valid account to log in. Except for the outcome feature, all other features are enabled, including replay and resume functionality.
 - **LOCAL** : Use this only if other environments are unavailable. By manually setting up session data, you can run the game locally. Not recommended for regular use.
 
 To use preview scene, simply choose an Enviroment and put in the Game ID, then save the scene.

docs/02-setup-main-game/03-preload-scene.md

@@ -8,7 +8,7 @@ The Preload Scene is where you define which assets will be downloaded **before**
 
 Setting up the preload system involves several steps, depending on the types of assets and specific download requirements.
 
-Check out the [Game Assets Structure](./) for more detail.
+Check out the [Game Assets Structure](../category/game-asset-structure) for more detail.
 
 ## Preload vs Postload
 
@@ -45,9 +45,9 @@ Hyper Slot Game supports localization through both text and raw asset replacemen
 
 Based on the selected language configuration, the game will download the corresponding localized assets instead of the default English versions.
 
-|        Assets         |  EN           |  ZH          | TH |
+|    Assets     |                    EN                   |                      ZH                     |                     TH                      |
-|-----------------------|---------------|--------------|----|
+|---------------|-----------------------------------------|---------------------------------------------|---------------------------------------------|
-| Text Buy Bonus        |  ![Buy Bonus EN](./img/title-buy-bonus.png)    | ![Buy Bonus ZH](./img/title-buy-bonus_zh.png)    | ![Buy Bonus TH](./img/title-buy-bonus_th.png)|
+|Text Buy Bonus|![Buy Bonus EN](./img/title-buy-bonus.png)|![Buy Bonus ZH](./img/title-buy-bonus_zh.png)|![Buy Bonus TH](./img/title-buy-bonus_th.png)|
 
 ## Setting Up the Preload Scene
 

docs/02-setup-main-game/04-loading-scene.md

@@ -0,0 +1,55 @@
+---
+sidebar_position: 4
+---
+
+# Loading Scene
+
+This is where the actual preload asset downloading begins, accompanied by a progress bar to indicate loading status.
+
+In addition to loading assets, Hyper Slot Game also uses this scene to showcase the game’s main features through in-game advertisements.
+
+![Loading Roma Legacy](./img/loading-roma-legacy.png)
+
+## Loading Hyper vs New Loading Hyper
+
+In Hyper Slot games, there are 2 styles of loading scene:
+
+- **loading-hyper**: The default loading setup. Displays all advertising features on a single screen, with an option to automatically launch the game once all preload assets are downloaded.
+- **new-hyper-loading**: A newer loading style that presents advertising features in a paginated layout. This version does not include an option to start the game automatically.
+
+|                  loading-hyper                        |                       new-loading-hyper                         |
+|-------------------------------------------------------|-----------------------------------------------------------------|
+|![loading-hyper](./img/hyper-loading-lucky-rooster.png)|![new-loading-hyper](./img/new-hyper-loading-gates-of-wealth.png)|
+
+## Setup loading scene
+
+To set up the loading scene, use the appropriate command from the `P4F Editor` package: `loading-hyper` or `new-loading-hyper`, depending on your requirements.
+
+![Loading Hyper](./img/hyper-loading.png) ![New Loading Hyper](./img/new-hyper-loading.png)
+
+Running either command will generate a complete loading scene, including both landscape and portrait layouts.
+
+Once the scene is generated, you can customize it by positioning UI elements and assigning the appropriate assets.
+
+![Loading Node Tree](./img/loading-node-tree.png)
+
+One of the best features of these commands is that they can also automatically load all required assets for the loading scene.
+
+If you run the command without setting up the assets, you’ll see an empty loading scene like this:
+
+![Loading Raw Scene](./img/loading-raw-scene.png)
+
+However, with a proper asset setup, the loading scene will appear fully populated, like this:
+
+![Loading Full Assets Scene](./img/loading-full-assets-scene.png)
+
+:::info
+For detailed guidelines on how to set up loading assets, refer to the [Game Asset Structure](../category/game-asset-structure) manual.
+:::
+
+:::tip
+For testing purposes, you don’t need a full asset setup. \
+Just set up the ***btn-start*** node in the Node Tree and you’re good to go.
+
+![Loading Button Setup](./img/loading-button-setup.png)
+:::

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

@@ -0,0 +1,26 @@
+---
+sidebar_position: 5
+---
+
+# Main Scene
+
+This is where all the magic happen.
+
+Main scene is the most complicated scene with hundreds of object, script and config.
+
+![Main Scene Wireframe](./img/main-scene-wireframe.png)
+
+Yet it is suprisingly simple to use.
+
+By following step by step setup, you'll have a working main scene in no time.
+
+:::info
+In fact, if all of the other scenes are setup properly, you can even run test the game without any setup on main scene.
+
+Try to run the project, you'll the result as below. It doesn't look like much but it is actually a game running without visual assets.
+
+![Run Test](./img/run-test.png)
+:::
+
+## Setup Reel Slot
+