Loading...
;
// Render based on passage type
if (passage.type === "story") {
const { components } = passage.display();
// Render story components
}
}
```
```tsx
function PassageRenderer() {
const [passage, renderId] = useCurrentPassage();
// Use renderId as a React key to force remount on navigation
return (
{passage &&
);
}
```
--------------------------------
### Unsupported MDX Components
Source: https://github.com/laruss/react-text-game/blob/main/apps/docs/docs/mdx-integration.md
Shows examples of custom React components that are not supported in MDX and will be ignored by the plugin.
```mdx
{text}
); const CustomMainMenu = () => (My Custom Game
# Header
```
--------------------------------
### Audio System: Create and Control Audio Tracks
Source: https://github.com/laruss/react-text-game/blob/main/packages/core/README.md
Use `createAudio` to create audio tracks and `AudioManager` for global controls. Audio state is automatically persisted.
```typescript
import { createAudio, AudioManager } from "@react-text-game/core/audio";
// Create an audio track
const bgMusic = createAudio("/audio/background.mp3", {
id: "bg-music",
volume: 0.7,
loop: true,
});
// Play the track
await bgMusic.play();
// Control individual tracks
bgMusic.setVolume(0.5);
bgMusic.pause();
bgMusic.resume();
bgMusic.stop();
// Global controls
AudioManager.setMasterVolume(0.8);
AudioManager.muteAll();
AudioManager.pauseAll();
```
--------------------------------
### Example Spanish Translation File for a Passage
Source: https://github.com/laruss/react-text-game/blob/main/docs/todo-i18n-plan.md
This JSON file represents auto-filled translations for a game passage in Spanish, serving as the default language content.
```json
{
"header": "El Comienzo",
"text": "Te despiertas en un bosque oscuro...",
"actions": {
"explore": "Explorar el bosque",
"rest": "Descansar"
}
}
```
--------------------------------
### Registering Migrations
Source: https://github.com/laruss/react-text-game/blob/main/packages/core/MIGRATIONS.md
Demonstrates how to register migration functions using the `registerMigration` API, showcasing both simple and complex scenarios with and without generics.
```APIDOC
## POST /registerMigration
### Description
Registers a migration function to transform save data from one version to another.
### Method
POST
### Endpoint
/registerMigration
### Parameters
#### Request Body
- **migration** (object) - Required - An object containing migration details.
- **migration.from** (string) - Required - The source version (e.g., "1.0.0").
- **migration.to** (string) - Required - The target version (e.g., "1.1.0").
- **migration.description** (string) - Required - A human-readable description of the migration.
- **migration.migrate** (function) - Required - A pure function that takes the current save data and returns the transformed data.
### Request Example
```json
{
"migration": {
"from": "1.0.0",
"to": "1.1.0",
"description": "Add settings",
"migrate": "(save) => ({ ...save, settings: {} })"
}
}
```
### Response
#### Success Response (200)
- **message** (string) - Confirmation message.
#### Response Example
```json
{
"message": "Migration registered successfully."
}
```
### Error Handling
- Throws an error if a migration for the same from→to path is already registered.
```
--------------------------------
### Direct Save/Load Operations
Source: https://context7.com/laruss/react-text-game/llms.txt
For advanced usage, you can directly call save, load, and delete functions, or access the Dexie database. Ensure the core library is installed.
```typescript
import { saveGame, loadGame, getAllSaves, deleteSave, db } from "@react-text-game/core/saves";
await saveGame("manual-save", gameData, "Before boss fight", screenshotBase64);
const save = await loadGame(1);
const allSaves = await getAllSaves();
await deleteSave(1);
// Direct Dexie database access
const customSave = await db.saves.where("name").equals("manual-save").first();
```
--------------------------------
### Extend BaseGameObject for Advanced Entities
Source: https://github.com/laruss/react-text-game/blob/main/packages/core/README.md
Extend `BaseGameObject` for class-based designs, private fields, or inheritance. This example shows a custom `Inventory` class with an `addItem` method.
```typescript
import { BaseGameObject } from "@react-text-game/core";
class Inventory extends BaseGameObject<{ items: string[] }> {
constructor() {
super({
id: "inventory",
variables: { items: [] },
});
}
addItem(item: string) {
this._variables.items.push(item);
this.save();
}
}
```
--------------------------------
### Initialize Game with Language Detection and HTTP Backend
Source: https://github.com/laruss/react-text-game/blob/main/apps/docs/docs/i18n.md
Configure the game to use i18next plugins for language detection and loading translations from an HTTP backend. This approach avoids embedding translation resources directly and allows for dynamic loading.
```typescript
import LanguageDetector from "i18next-browser-languagedetector";
import HttpBackend from "i18next-http-backend";
await Game.init({
gameName: "Galactic Courier",
translations: {
defaultLanguage: "en",
fallbackLanguage: "en",
// Leave resources empty to load from the backend
resources: {},
modules: [LanguageDetector, HttpBackend],
},
});
```
--------------------------------
### Monitor Current Passage with useCurrentPassage Hook
Source: https://github.com/laruss/react-text-game/blob/main/apps/docs/docs/core-concepts.md
Use this hook to get the current passage and receive reactive updates. Ensure a passage is loaded before rendering content.
```tsx
import { useCurrentPassage } from "@react-text-game/core";
function GameScreen() {
const passage = useCurrentPassage();
if (!passage) return Loading...
;
return {/* Render passage */}
;
}
```
--------------------------------
### Build Static Website Content
Source: https://github.com/laruss/react-text-game/blob/main/apps/docs/README.md
Generates static website content into the 'build' directory, ready for hosting on any static content service.
```bash
yarn build
```
--------------------------------
### React Hooks for Save System Integration
Source: https://context7.com/laruss/react-text-game/llms.txt
Integrate game saving and loading functionality into your React application using provided hooks. Ensure the core library is installed.
```typescript
import {
useSaveSlots,
useSaveGame,
useLoadGame,
useDeleteGame,
useLastLoadGame,
useExportSaves,
useImportSaves,
useRestartGame,
} from "@react-text-game/core/saves";
// Save slots with live updates
function SaveLoadScreen() {
const slots = useSaveSlots({ count: 5 });
const saveGame = useSaveGame();
const loadGame = useLoadGame();
const deleteGame = useDeleteGame();
const { hasLastSave, loadLastGame, isLoading } = useLastLoadGame();
const exportSaves = useExportSaves();
const importSaves = useImportSaves();
const restartGame = useRestartGame();
return (
Save Slots
{slots.map((slot, index) => (
Slot {index + 1}: {slot.data ? `Saved ${new Date(slot.data.timestamp).toLocaleString()}` : "Empty"}
))}