useLiveGame

您可以使用此钩子访问实时游戏对象。

注意: 此钩子只能在 GameProvider 的后代组件中使用。

function useLiveGame(): LiveGame;

有关 LiveGame，请参见 LiveGame。

用法

import {useLiveGame} from "narraleaf-react";

function myComponent() {
    const liveGame = useLiveGame();
 
    useEffect(() => {
        // 访问故事服务
        const gallery = liveGame.story?.getService<Gallery>("gallery");
        
        // 访问游戏状态
        const currentScene = liveGame.scene;
        
        // 访问偏好设置
        const preferences = liveGame.preferences;
    }, [liveGame]);
}

常见用例

访问服务

function GalleryComponent() {
    const liveGame = useLiveGame();
    
    const gallery = liveGame.story?.getService<Gallery<{timestamp: number}>>("gallery");
    
    if (gallery) {
        const allItems = gallery.$getAll();
        return (
            <div>
                {Object.keys(allItems).map(name => (
                    <div key={name}>{name}</div>
                ))}
            </div>
        );
    }
    
    return null;
}

访问游戏状态

function GameStatusComponent() {
    const liveGame = useLiveGame();
    
    return (
        <div>
            <p>当前场景: {liveGame.scene?.name}</p>
            <p>游戏状态: {liveGame.state}</p>
        </div>
    );
}

useGame usePreference