Merge pull request 'feature/20250521-update-doc' (#78) from feature/20250521-update-doc into develop

Reviewed-on: #78
This commit is contained in:
Pham Huynh Duc Huy 2025-06-10 19:43:04 +08:00
commit 42b04f3699
8 changed files with 1389 additions and 361 deletions

View File

@ -52,9 +52,8 @@ The **Item Description** system provides detailed information about game items,
| Step | Action | Image Reference |
|------|--------|-----------------|
| 1 | Set **Sprite Frame** in `background` using prepared assets. | ![Step 1](./img/07-item-description/setup-item-big-1.png) |
| 2 | Follow **Step 4** of `item-description-small` for payout setup. | [See Small Setup](#item-description-small) |
| 3 | Follow **Step 4** of `item-description-no-odds` for description setup. | [See No-Odds Setup](#item-description-no-odds) |
| 2 | Follow **Step 4** of `item-description-small` for payout setup. | [See Small Setup](#prefab-configurations) |
| 3 | Follow **Step 4** of `item-description-no-odds` for description setup. | [See No-Odds Setup](#prefab-configurations) |
**Tip**:
- Use the helper tool to configure:
1. Set **Content Size** and **Cell Item Size** per game design.

View File

@ -73,9 +73,9 @@ Place the gamble node in the following scene structure:
![Backgrounds](../img/05-main-scene/gamble/add-background-gamble.png)
1. Use background scenes for the gamble feature:
- `gamble-background-landscape` : [Setup Background Landscape](/docs/setup-main-game/main-scene/background#2-setup-background-landscape)
- `gamble-background-landscape` : [Setup Background Landscape](/docs/setup-main-game/main-scene/background#setup-steps)
- `gamble-background-portrait` : [Setup Background Portrait](/docs/setup-main-game/main-scene/background#3-setup-background-portrait)
- `gamble-background-portrait` : [Setup Background Portrait](/docs/setup-main-game/main-scene/background#setup-steps)
2. Attach the `orientation-ui-controller` component to both `gamble-background-landscape` and `gamble-background-portrait` nodes.
3. The `gamble-background-portrait` node has a dedicated component for portrait mode:
@ -87,4 +87,4 @@ Place the gamble node in the following scene structure:
## Game Result Example
Make sure the main scene includes the Win Limit Panel.
🔗 More Info [Game Result](/docs/setup-main-game/main-scene/win-limit#gamble-win-limit)
🔗 More Info [Game Result](/docs/setup-main-game/main-scene/win-limit#overview)

View File

@ -62,6 +62,12 @@ const config: Config = {
sidebarPath: require.resolve('./sidebars.ts'),
},
],
[
require.resolve('docusaurus-lunr-search'),
{
languages: ['en'],
},
],
],
themes: [
@ -90,6 +96,10 @@ const config: Config = {
position: 'left',
sidebarId: 'apiSidebar',
},
{
type: 'search',
position: 'right',
},
{
href: 'https://gitea.plp19.com/dev-public/doc-slot-core-manual',
label: 'Gitea',
@ -102,8 +112,8 @@ const config: Config = {
copyright: `Copyright © ${new Date().getFullYear()} Mercury Studio, Inc.`,
},
prism: {
theme: prismThemes.github,
darkTheme: prismThemes.dracula,
theme: prismThemes.vsLight,
darkTheme: prismThemes.vsDark,
},
} satisfies Preset.ThemeConfig,
};

1493
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -15,19 +15,21 @@
"typecheck": "tsc"
},
"dependencies": {
"@docusaurus/core": "^3.8.0",
"@docusaurus/preset-classic": "^3.8.0",
"@docusaurus/theme-mermaid": "^3.8.0",
"@docusaurus/core": "^3.8.1",
"@docusaurus/preset-classic": "^3.8.1",
"@docusaurus/theme-mermaid": "^3.8.1",
"@mdx-js/react": "^3.0.0",
"clsx": "^2.0.0",
"docusaurus-lunr-search": "^3.6.0",
"lunr": "^2.3.9",
"prism-react-renderer": "^2.3.0",
"react": "^19.0.0",
"react-dom": "^19.0.0"
},
"devDependencies": {
"@docusaurus/module-type-aliases": "^3.8.0",
"@docusaurus/tsconfig": "^3.8.0",
"@docusaurus/types": "^3.8.0",
"@docusaurus/module-type-aliases": "^3.8.1",
"@docusaurus/tsconfig": "^3.8.1",
"@docusaurus/types": "^3.8.1",
"typescript": "~5.6.2"
},
"browserslist": {

View File

@ -19,13 +19,13 @@
/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
--ifm-color-primary: #25c2a0;
--ifm-color-primary-dark: #21af90;
--ifm-color-primary-darker: #1fa588;
--ifm-color-primary-darkest: #1a8870;
--ifm-color-primary-light: #29d5b0;
--ifm-color-primary-lighter: #32d8b4;
--ifm-color-primary-lightest: #4fddbf;
--ifm-color-primary: #2e8555;
--ifm-color-primary-dark: #29784c;
--ifm-color-primary-darker: #277148;
--ifm-color-primary-darkest: #205d3b;
--ifm-color-primary-light: #33925d;
--ifm-color-primary-lighter: #359962;
--ifm-color-primary-lightest: #3cad6e;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}
.red-star {

View File

@ -4,10 +4,32 @@
*/
.heroBanner {
padding: 4rem 0;
padding: 8rem;
text-align: center;
position: relative;
overflow: hidden;
background: url('/img/background.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: white;
}
[data-theme='dark'] .heroBanner {
background: url('/img/background.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.heroLogo {
max-width: 300px;
/* margin-bottom: 2rem; */
filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}
[data-theme='dark'] .heroLogo {
filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
}
@media screen and (max-width: 996px) {
@ -20,4 +42,184 @@
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}
.buttons :global(.button) {
background: rgba(255, 255, 255, 0.3);
border: 2px solid rgba(255, 255, 255, 0.6);
color: white;
transition: all 0.3s ease;
backdrop-filter: blur(5px);
font-weight: 500;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}
.buttons :global(.button:hover) {
background: rgba(255, 255, 255, 0.4);
border-color: rgba(255, 255, 255, 0.8);
transform: translateY(-2px);
box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}
[data-theme='dark'] .buttons :global(.button) {
background: rgba(255, 255, 255, 0.3);
border: 2px solid rgba(255, 255, 255, 0.6);
color: white;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
font-weight: 500;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
[data-theme='dark'] .buttons :global(.button:hover) {
background: rgba(255, 255, 255, 0.4);
border-color: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
.hero__subtitle {
color: rgba(255, 255, 255, 0.8);
font-size: 1.2rem;
margin-bottom: 2rem;
}
[data-theme='dark'] .hero__subtitle {
color: rgba(255, 255, 255, 0.7);
}
.features {
display: flex;
align-items: center;
padding: 0rem 0;
width: 100%;
background: var(--ifm-background-color);
}
.featureIcon {
display: block;
font-size: 3rem;
transition: transform 0.2s ease-in-out;
}
.featureIcon:hover {
transform: scale(1.1);
}
.text--center {
color: var(--ifm-color-emphasis-800);
}
.text--center h3 {
color: var(--ifm-color-emphasis-900);
}
.text--center p {
color: var(--ifm-color-emphasis-700);
}
[data-theme='dark'] .text--center {
color: var(--ifm-color-emphasis-200);
}
[data-theme='dark'] .text--center h3 {
color: var(--ifm-color-emphasis-100);
}
[data-theme='dark'] .text--center p {
color: var(--ifm-color-emphasis-300);
}
.section {
padding: 4rem 0;
}
.sectionTitle {
text-align: center;
margin-bottom: 3rem;
font-size: 2.5rem;
color: #2a2a2a;
}
.techStack {
background: #f8f9fa;
}
.techGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
padding: 0 1rem;
}
.techItem {
background: white;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease-in-out;
}
.techItem:hover {
transform: translateY(-5px);
}
.techItem h4 {
margin-bottom: 0.5rem;
color: #2a2a2a;
}
.techItem p {
margin: 0;
color: #666;
}
.stepsGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
padding: 0 1rem;
}
.stepCard {
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease-in-out;
text-decoration: none;
color: inherit;
}
.stepCard:hover {
transform: translateY(-5px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.stepCard h3 {
margin-bottom: 1rem;
color: #2a2a2a;
}
.stepCard p {
margin: 0;
color: #666;
}
@media screen and (max-width: 768px) {
.techGrid,
.stepsGrid {
grid-template-columns: 1fr;
}
.section {
padding: 2rem 0;
}
.sectionTitle {
font-size: 2rem;
margin-bottom: 0.5rem;
}
}

BIN
static/img/background.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 MiB