LiveGame

Returns the Storable instance

• return: Storable - Storable

Starts a new game

• return this

Load a saved game

After calling this method, the current game state will be lost, and the stage will trigger force reset

**Note: **Even if you change just a single line of script, the saved game might not be compatible with the new version

Example:

const savedGame = {
    // ...saved game data
};
 
// use hook inside a component
const {game} = useGame();
 
// pass the saved game data to the game instance
game.getLiveGame().deserialize(savedGame);

• savedGame: SavedGame - SavedGame

Serialize the current game state

You can use this to save the game state to a file or a database

**Note: **Even if you change just a single line of script, the saved game might not be compatible with the new version

• return: SavedGame - See SavedGame`

Called when a character says something

• fc: (event: LiveGameEvent["event:character.prompt"]) => void - See LiveGameEvent
• Returns LiveGameEventToken - See LiveGameEventToken

const {game} = useGame();
const [texts, setTexts] = useState<string[]>([]);
 
useEffect(() => {
    const token = game.getLiveGame().onCharacterPrompt((event) => {
        setTexts((prevTexts) => [...prevTexts, event.text]);
    });
 
    return () => {
        token.cancel();
    };
}, []);
 
return (
    <div>
        {/* Your Text Log */}
    </div>
);

Called when a menu is completed

• fc: (event: LiveGameEvent["event:menu.choose"]) => void - See LiveGameEvent
• Returns LiveGameEventToken - See LiveGameEventToken

Capture the game screenshot, will only include the player element

Returns a PNG image base64-encoded data URL

**Note: **Image returned by this method is not compressed, and it is not affected by the screenshotQuality option

const {game} = useGame();
 
function handleButtonClick() {
    game.getLiveGame().capturePng().then((dataUrl) => {
        // do something with the dataUrl
    });
}

• Returns Promise<string>

Capture the game screenshot, will only include the player element

Returns compressed JPEG image data URL

• Returns Promise<string>

Capture the game screenshot, will only include the player element

Returns an SVG data URL

• Returns Promise<string>

Capture the game screenshot, will only include the player element

Returns a PNG image blob

• Returns Promise<Blob | null>

Request full screen on Chrome/Safari/Firefox/IE/Edge/Opera, the player element will be full screen

Note: this method should be called in response to a user gesture (for example, a click event)

Safari iOS and Webview iOS aren't supported, for more information, see MDN-requestFullscreen (opens in a new tab)

• options?: FullscreenOptions | undefined
• Returns Promise<void> | void

Exit full screen

• Returns Promise<void> | void

Listen to the events of the player element

const {game} = useGame();
 
useEffect(() => {
    return game.getLiveGame().onPlayerEvent("click", (event) => {
        // do something
    }).cancel;
}, []);

• type: K - The event type
• listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any - The event listener
• options?: boolean | AddEventListenerOptions
• Returns LiveGameEventToken

Get the game history. This method is used to create backlog.

import { useGame, GameHistory } from "narraleaf-react";

const game = useGame();
const history = game.getHistory();
 
function handleUndo(history: GameHistory) {
    game.undo(history.token);
}
 
return (
    <div>
        <h3>Backlog</h3>
 
        {history.map((item) => (
            <div
                key={item.token}
                onClick={() => handleUndo(item)}
            >
                {/* show the action text */}
                {/* text is available when the action is "say" or "menu" */}
                {item.element.text}
            </div>
        ))}
    </div>
);

• Returns GameHistory[] - The game history, see GameHistory

Undo the game action.

game.undo(history.token);

• token?: string - The token of the history item, see GameHistory. If not provided, the last action will be undone.

Create a notification.

The style of the notification is defined by Notification.

game.notify("Save success");

• message: string - The message to notify
• duration?: number - The duration of the notification, default is 3000ms

Wait for the router to exit.

This method is useful when you want to create a new game and wait for the router to exit.

const {game} = useGame();
const router = useRouter();
const liveGame = game.getLiveGame();
 
useEffect(() => {
    router.clear().cleanHistory();
 
    const token = liveGame
        .newGame()
        .waitForRouterExit()
    
    token
        .promise
        .then(() => {
            dispatchState({ isPlaying: true });
        });
 
    return () => {
        token.cancel();
    };
}, []);

• Returns { promise: Promise<void>; cancel: VoidFunction; }

Listen to the events of the window

const {game} = useGame();
 
useEffect(() => {
    return game.getLiveGame().onWindowEvent("resize", (event) => {
        // handle window resize
    }).cancel;
}, []);

• type: K - The event type
• listener: (this: Window, ev: WindowEventMap[K]) => any - The event listener
• options?: boolean | AddEventListenerOptions
• Returns LiveGameEventToken - See LiveGameEventToken

Reset the game state

Note: Calling this method will lose the current game state

const {game} = useGame();
const router = useRouter();
 
game.getLiveGame().reset();
router.clear().cleanHistory().push("home");