update content special win

docs/02-setup-main-game/05-main-scene/14-setup-sprite-frame-provider.md

@@ -24,19 +24,31 @@ Each type delivers increasing visual excitement to highlight significant player
 
 ### Core Components
 
-| Component                        | Description                     |
+The special win system consists of three main components:
-|----------------------------------|---------------------------------|
-| `hyper-special-win-initializer` | Initializes the special win system |
-| `hyper-present-special-win`     | Controls display and animation flow |
-| `hyper-special-win-label-point-effect` | Shows the win amount visually |
 
-![Component Setup](../img/05-main-scene/special-win-in-game.png)
+| Component | Purpose |
+|-----------|---------|
+| `hyper-special-win-initializer` | Handles system initialization and setup |
+| `hyper-present-special-win` | Manages animation sequences and display logic |
+| `hyper-special-win-label-point-effect` | Controls win amount visualization |
+
+![Component Architecture](../img/05-main-scene/special-win-in-game.png)
+
+#### Coin Effect System
+
+The coin shower effect uses prefab variants for different markets:
+
+![Base Coin Asset](../img/05-main-scene/special-win-coin.png)
+
+| Prefab Name | Market Target | Asset Preview |
+|-------------|---------------|---------------|
+| `hyper-coin-shower-international` | Global markets | ![International Version](../img/05-main-scene/special-win-coin-internation.png) |
+| `hyper-coin-shower-chinese` | Chinese market | ![Chinese Version](../img/05-main-scene/special-win-coin-chinese.png) |
 
 :::tip
-Place the Special Win as defined by the game design.
+Position the Special Win node as per game design
 :::
 
-
 ---
 
 ### Asset Configuration
@@ -56,16 +68,56 @@ Store static assets in platform-specific directories:
 
 #### 2. Animation Setup
 
-##### Animation Naming Convention
+##### Special Win Animation Flow
 
-Each animation type must follow the defined naming pattern per platform:
+```mermaid
+%%{init: {'theme': 'base', 'themeVariables': { 'fontSize': '25px', 'fontFamily': 'arial' }}}%%
+graph TD
+    %% Win Types with Thresholds
+    SW[Special Wins] --> BW["Big Win"]
+    SW --> SPW["Super Win"]
+    SW --> MW["Mega Win"]
 
-- name type:
+    %% Big Win stages with flow
-    - bigwin
+    BW --> BWI[bigwin-in]
-    - superwin
+    BWI --> BWL[bigwin-loop]
-    - megawin
+    BWL --> BWO[bigwin-out]
 
-![Type Names](../img/05-main-scene/special-win-type-name.png)
+    %% Super Win stages with flow
+    SPW --> SPWI[superwin-in]
+    SPWI --> SPWL[superwin-loop]
+    SPWL --> SPWO[superwin-out]
+
+    %% Mega Win stages with flow
+    MW --> MWI[megawin-in]
+    MWI --> MWL[megawin-loop]
+    MWL --> MWO[megawin-out]
+
+     %% Legend nodes
+    L0["Feature Name"]-->L1["Win Types"] --> L2["In Stage"] --> L3["Loop Stage"] --> L4["Out Stage"]
+    class L0 specialWin
+    class L1 winType
+    class L2 inStage
+    class L3 loopStage
+    class L4 outStage
+
+    %% Style definitions
+    classDef inStage fill:#e6f3ff,stroke:#666,font-size:25px
+    classDef loopStage fill:#fff2cc,stroke:#666,font-size:25px
+    classDef outStage fill:#f8cecc,stroke:#666,font-size:25px
+    classDef winType fill:#d5e8d4,stroke:#82b366,font-size:25px
+    classDef specialWin fill:#fff4dd,stroke:#ff0000,font-size:25px
+
+    class BWI,SPWI,MWI inStage
+    class BWL,SPWL,MWL loopStage
+    class BWO,SPWO,MWO outStage
+    class BW,SPW,MW winType
+    class SW specialWin
+
+    %% Adjust node spacing
+    linkStyle default stroke-width:4px
+```
+    ![Type Names](../img/05-main-scene/special-win-type-name.png)
 
 ##### Step 1: Add Animation Resources
 
@@ -86,6 +138,27 @@ Place animated assets in the following directories:
 [View Animation Provider Setup](http://localhost:3000/docs/setup-main-game/main-scene/system#animation-provider-setup)
 
 :::tip
-Static and animation paths may vary by game. Adjust as needed.
+Static and animation folder paths may vary by game. Adjust as needed.
 :::
 
+##### Step 3: Font Configuration
+
+- **Path:** `assets\game-assets\fonts\preloads\main-game\fnt-special-win`         
+- Follow these steps to configure fonts for special win displays:         
+
+1. **Package Font Assets**
+   - Import font files into project
+   ![Font Packaging](../img/05-main-scene/special-win-pack-font.png)
+
+2. **Font Integration**
+   - Add font asset to special win component
+   ![Font Integration](../img/05-main-scene/special-win-font.png)
+
+3. **Layout Settings**
+   - Configure text alignment
+   - Adjust font size and spacing
+   ![Font Layout](../img/05-main-scene/special-win-font-align.png)
+
+:::tip
+Customize font styles based on each game's design.
+:::

docusaurus.config.ts

@@ -31,6 +31,10 @@ const config: Config = {
     locales: ['en'],
   },
 
+  markdown: {
+    mermaid: true
+  },
+
   presets: [
     [
       'classic',
@@ -48,6 +52,10 @@ const config: Config = {
       } satisfies Preset.Options,
     ],
   ],
+  themes: [
+    // ...existing themes if any...
+    '@docusaurus/theme-mermaid'
+  ],
 
   themeConfig: {
     // Replace with your project's social card