Merge pull request 'add-full-empty-structure' (#5) from add-setup-manual into develop

Reviewed-on: #5

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

@@ -18,7 +18,7 @@ Each game features specific slot items displayed on the reel panel. By default,
 
 For `Roma Legacy`, there are 8 slot items total, including **Wild**.
 
-![Symbols](./img/symbols.png)
+![Symbols](./img/01-game-config/symbols.png)
 
 To define the 7 additional items for this game, create the following script:
 
@@ -109,7 +109,7 @@ When the game is opened, the reel panel should display a **default pattern** tha
 
 For instance, the following item pattern should not be used, as it contains two win lines:
 
-![Win Pattern](./img/win-pattern.png)
+![Win Pattern](./img/01-game-config/win-pattern.png)
 
 To keep the gameplay experience fresh, the displayed pattern should be selected randomly each time. At a minimum, three non-winning patterns should be available.
 
@@ -138,7 +138,7 @@ The results of those 3 patterns are shown below:
 
 |            Pattern 1            |            Pattern 2            |            Pattern 3            | 
 |---------------------------------|---------------------------------|---------------------------------|
-|![Pattern 1](./img/pattern-1.png)|![Pattern 2](./img/pattern-2.png)|![Pattern 3](./img/pattern-3.png)|
+|![Pattern 1](./img/01-game-config/pattern-1.png)|![Pattern 2](./img/01-game-config/pattern-2.png)|![Pattern 3](./img/01-game-config/pattern-3.png)|
 
 ## Hyper Gaming Integration
 

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

@@ -12,7 +12,7 @@ The login simulator scene allows you to run the game using a session account dur
 
 This scene includes a `login-hyper-gaming` object used to establish a connection with a running environment of your choice.
 
-![Preview Scene](./img/preview-scene.png)
+![Preview Scene](./img/02-preview-scene/preview-scene.png)
 
 Available environments:
 
@@ -25,5 +25,5 @@ To use preview scene, simply choose an Enviroment and put in the Game ID, then s
 :::tip
 You should set the preview scene as a start scene in `Project Setting`. With that, no matter which scene your are on, when the game starts, it will always load preview scene first.
 
-![Preview Scene Setting](./img/preview-scene-setting.png)
+![Preview Scene Setting](./img/02-preview-scene/preview-scene-setting.png)
 :::

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

@@ -22,7 +22,7 @@ Hyper Slot Game uses a two-stage loading process:
 
 |              Preload                 |             Postload            |
 |--------------------------------------|---------------------------------|
-| ![Preload](./img/preload-static.png) | ![Postload](./img/postload.png) |
+| ![Preload](./img/03-preload-scene/preload-static.png) | ![Postload](./img/03-preload-scene/postload.png) |
 
 Preload and postload assets are organized by scene.
 
@@ -51,11 +51,11 @@ Based on the selected language configuration, the game will download the corresp
 
 |    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/03-preload-scene/title-buy-bonus.png)|![Buy Bonus ZH](./img/03-preload-scene/title-buy-bonus_zh.png)|![Buy Bonus TH](./img/03-preload-scene/title-buy-bonus_th.png)|
 
 ## Setting Up the Preload Scene
 
-![Preload Scene Setup](./img/preload-scene.png)
+![Preload Scene Setup](./img/03-preload-scene/preload-scene.png)
 
 To set up the Preload Scene, simply open the scene and run the **preload-hyper** command from the **P4F Editor** package.
 

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

@@ -12,7 +12,7 @@ This is where the actual preload asset downloading begins, accompanied by a prog
 
 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 Roma Legacy](./img/04-loading-scene/loading-roma-legacy.png)
 
 ## Loading Hyper vs New Loading Hyper
 
@@ -23,29 +23,29 @@ In Hyper Slot games, there are 2 styles of loading scene:
 
 |                  loading-hyper                        |                       new-loading-hyper                         |
 |-------------------------------------------------------|-----------------------------------------------------------------|
-|![loading-hyper](./img/hyper-loading-lucky-rooster.png)|![new-loading-hyper](./img/new-hyper-loading-gates-of-wealth.png)|
+|![loading-hyper](./img/04-loading-scene/hyper-loading-lucky-rooster.png)|![new-loading-hyper](./img/04-loading-scene/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)
+![Loading Hyper](./img/04-loading-scene/hyper-loading.png) ![New Loading Hyper](./img/04-loading-scene/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)
+![Loading Node Tree](./img/04-loading-scene/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)
+![Loading Raw Scene](./img/04-loading-scene/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)
+![Loading Full Assets Scene](./img/04-loading-scene/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.
@@ -55,5 +55,5 @@ For detailed guidelines on how to set up loading assets, refer to the [Game Asse
 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)
+![Loading Button Setup](./img/04-loading-scene/loading-button-setup.png)
 :::

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

@@ -10,7 +10,7 @@ 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)
+![Main Scene Wireframe](./img/05-main-scene/main-scene-wireframe.png)
 
 Yet it is suprisingly simple to use.
 
@@ -21,8 +21,90 @@ In fact, if all of the other scenes are setup properly, you can even run test th
 
 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)
+![Run Test](./img/05-main-scene/run-test.png)
 :::
 
 ## Setup Reel Slot
 
+---
+
+1. Prepare the asset for symbols.
+
+    ![Add Symbol Texture](./img/05-main-scene/add-symbol-texture.png)
+
+2. Add symbols to **SpriteFrameProvider** which allows those symbols to be accessed globally from the code.
+
+    ![Sprite Frame Provider](./img/05-main-scene/sprite-frame-provider.png)
+
+3. Config reel slot using `reel-scroller-helper`. 
+
+    ![Reel Scroller Helper](./img/05-main-scene/reel-scroller-helper.png)
+
+    | Properties | Explaination | Example |
+    |------------|--------------|---------|
+    |**Cell Item Script Name**|The name of the script will be attached to each cell item.|![cell-item-script-name](./img/05-main-scene/hyper-cell-item.png)|
+    | **Scroller Script Name** | the name of the script for handling the spinning logic.|![scroller](./img/05-main-scene/scroller.png)|
+    |**Row Count x Reel Count**| the number of Slot Item each row and column in the reel slot panel.|![reel-row-column](./img/05-main-scene/reel-row-column.png)|
+    |**Cell Size**| the size of each cells.|![cell-size](./img/05-main-scene/cell-size.png)|
+    |**Cell Spacing**| the distance between each cells horizontally and vertically.||
+    |**Cell Dim Color**| set the dark color for the non-win cells when showing winning animation for each line.|![dim-cell-color](./img/05-main-scene/dim-cell-color.png)|
+    |**Top Count and Bot Count**| for spinning logic to work, a certain number of cell will be added to the top and bottom of the reel.|![cell-top-bottom](./img/05-main-scene/cell-top-bottom.png)|
+
+4. Generate panel using `reel-scroller-helper`.
+
+    ![Generate Panel](./img/05-main-scene/generate-panel.png)
+
+:::tip
+There is a popup panel covering the entire game scene. You should turn off this panel to see the other component clearly.
+:::
+
+## Setup Spinning Panel
+
+Reel slot panel is just one part one the spinning panel. 
+
+There are other panels that need to be setup: **landing-panel**, **tension-panel**, **present-win-cell-panel** and **present-win-border-panel**.
+
+The setup is very straightforward by using the `Generate Panel` command in each panel's helper class.
+
+- Landing Panel: 
+
+    ![Landing Panel](./img/05-main-scene/landing-panel.png)
+
+- Present Win Cell Panel:
+
+    ![Present Win Cell Panel](./img/05-main-scene/present-win-cell-panel.png)
+
+- Present Win Cell Panel:
+
+    ![Present Win Border Panel](./img/05-main-scene/present-win-border-panel.png)
+
+- Tension Panel:
+
+    ![Tension Panel](./img/05-main-scene/tension-panel.png)
+
+    If the tension use a custom size frame, we can change the option **sizeMode** to **Custom** and set the static frame and size.
+
+    ![Tension Size Custom](./img/05-main-scene/tension-panel-custom.png)
+
+## Setup UI Panel
+
+> To be Added:
+> - Different UI Layout on Desktop and Mobile
+> - Which helper/p4f menu can be used
+
+## Setup Background
+
+> To Be Added: 
+> - show how many background: desktop, mobile, main game, free game, gamble, reel bg, slot panel bg.
+
+## Setup Animation Provider
+
+> To Be Added:
+> - How to run helper / p4f menu
+> - How to setup static frame / fps
+
+## Setup Popup Panel
+
+> To Be Added:
+> - Prepare the asset
+> - Run helper / p4f menu or setup manually

docs/03-setup-special-feature/01-free-spin.md

@@ -0,0 +1,7 @@
+---
+sidebar_position: 1
+---
+
+# Free Spin
+
+> To be added

docs/03-setup-special-feature/02-gamble.md

@@ -0,0 +1,7 @@
+---
+sidebar_position: 2
+---
+
+# Gamble
+
+> To be added

docs/03-setup-special-feature/03-powerplay.md

@@ -0,0 +1,7 @@
+---
+sidebar_position: 3
+---
+
+# Powerplay
+
+> To be added

docs/03-setup-special-feature/04-respin.md

@@ -0,0 +1,7 @@
+---
+sidebar_position: 4
+---
+
+# Respin
+
+> To be added

docs/03-setup-special-feature/05-custom-bonus-game.md

@@ -0,0 +1,7 @@
+---
+sidebar_position: 5
+---
+
+# Custom Bonus Game
+
+> To be added

docs/03-setup-special-feature/06-free-round.md

@@ -0,0 +1,7 @@
+---
+sidebar_position: 6
+---
+
+# Free Round
+
+> To be added

docs/03-setup-special-feature/_category_.json

@@ -0,0 +1,17 @@
+{
+    "position": 2,
+    "label": "Setup Special Feature",
+    "collapsible": true,
+    "collapsed": false,
+    "link": {
+        "type": "generated-index",
+        "title": "Setup Special Feature",
+        "description": "This section will guide you through the process of setting up the special feature logic and structure.",
+        "keywords": [
+            "setup",
+            "special feature",
+            "game logic",
+            "structure"
+        ]
+    }
+}

docs/04-game-asset-structure/01-default-assets-structure.md

@@ -0,0 +1,7 @@
+---
+sidebar_position: 1
+---
+
+# Default Asset Structure
+
+> To be added

docs/04-game-asset-structure/02-texture-packer.md

@@ -0,0 +1,7 @@
+---
+sidebar_position: 2
+---
+
+# Texture Packer
+
+> To be added

docs/04-game-asset-structure/_category_.json

@@ -6,10 +6,11 @@
     "link": {
         "type": "generated-index",
         "title": "Game Asset Structure",
-        "description": "Asset folder structure for Hyper Slot Game",
+        "description": "Explain the structure of game assets and how to use them.",
         "keywords": [
-            "setup",
+            "game",
-            "main game",
+            "asset",
+            "structure",
             "game logic",
             "structure"
         ]

docs/05-custom-cocos-engine/01-custom-javascript-library.md

@@ -0,0 +1,7 @@
+---
+sidebar_position: 1
+---
+
+# Custom Javascript Library
+
+> To be added

docs/05-custom-cocos-engine/02-hyper-package.md

@@ -0,0 +1,7 @@
+---
+sidebar_position: 2
+---
+
+# Hyper Package
+
+> To be added

docs/05-custom-cocos-engine/_category_.json

@@ -0,0 +1,19 @@
+{
+    "position": 2,
+    "label": "Custom Cocos Engine",
+    "collapsible": true,
+    "collapsed": false,
+    "link": {
+        "type": "generated-index",
+        "title": "Custom Cocos Engine",
+        "description": "Explain each feature of the custom Cocos engine and how to use it.",
+        "keywords": [
+            "custom",
+            "cocos",
+            "engine",
+            "game engine",
+            "game logic",
+            "structure"
+        ]
+    }
+}

docs/06-submodule/04-hyper-slot-template.md

@@ -4,4 +4,4 @@ sidebar_position: 4
 
 # Hyper Slot Template
 
-This template is designed for Hyper Slot style of game which contains almost everything needed to star with ease.
+This template is designed for Hyper Slot style of game which contains almost everything needed to start with ease.

docs/06-submodule/_category_.json

@@ -0,0 +1,16 @@
+{
+    "position": 10,
+    "label": "Submodules",
+    "collapsible": true,
+    "collapsed": false,
+    "link": {
+        "type": "generated-index",
+        "title": "Submodules",
+        "description": "Explain the purpose of each submodules and how to use them effectively.",
+        "keywords": [
+            "submodules",
+            "game logic",
+            "structure"
+        ]
+    }
+}

docs/custom-cocos-engine/custom-cocos-engine.md

@@ -1,3 +0,0 @@
-# Custom Cocos Engine
-
-> To be added

docs/faqs/_category_.json

@@ -1,8 +1,8 @@
 {
-    "label": "Engine Option",
+    "label": "FAQS",
     "collapsible": true,
     "collapsed": false,
     "link": {
-        "title": "Engine Option"
+        "title": "FAQS"
     }
 }

docs/game-asset-structure/default-assets-structure.md

@@ -1 +0,0 @@
-# Default Asset Structure

docs/submodule/_category_.json

@@ -1,10 +0,0 @@
-{
-    "position": 10,
-    "label": "Submodules",
-    "collapsible": true,
-    "collapsed": false,
-    "link": {
-        "type": "generated-index",
-        "title": "Submodule Documentation"
-    }
-}

src/components/HomepageFeatures/index.tsx

@@ -1,6 +1,6 @@
-import type {ReactNode} from 'react';
-import clsx from 'clsx';
 import Heading from '@theme/Heading';
+import clsx from 'clsx';
+import type { ReactNode } from 'react';
 import styles from './styles.module.css';
 
 type FeatureItem = {
@@ -15,8 +15,7 @@ const FeatureList: FeatureItem[] = [
     Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
     description: (
       <>
-        Docusaurus was designed from the ground up to be easily installed and
+        Use the sidebar menu to quickly find the topics you need — whether you're setting up your first project or exploring advanced features
-        used to get your website up and running quickly.
       </>
     ),
   },
@@ -25,24 +24,23 @@ const FeatureList: FeatureItem[] = [
     Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
     description: (
       <>
-        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
+        You'll find practical examples, step-by-step instructions, and detailed explaination, so you can focus on building your HTML5 slot game with confidence and speed.
-        ahead and move your docs into the <code>docs</code> directory.
       </>
     ),
   },
   {
-    title: 'Powered by React',
+    title: 'Beginner Friendly',
     Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
     description: (
       <>
-        Extend or customize your website layout by reusing React. Docusaurus can
+        Designed for beginners, it takes care of the complex logic so you can focus on building your game. With just a few lines of code, you’ll have a working slot machine ready to go!
-        be extended while reusing the same header and footer.
       </>
     ),
   },
 ];
 
-function Feature({title, Svg, description}: FeatureItem) {
+function Feature({ title, Svg, description }: FeatureItem)
+{
   return (
     <div className={clsx('col col--4')}>
       <div className="text--center">
@@ -56,7 +54,8 @@ function Feature({title, Svg, description}: FeatureItem) {
   );
 }
 
-export default function HomepageFeatures(): ReactNode {
+export default function HomepageFeatures(): ReactNode
+{
   return (
     <section className={styles.features}>
       <div className="container">