サービス

import {Service} from "narraleaf-react";

type GalleryActions = {
    add: [name: string];
};

type GalleryData = {
    unlocked: string[];
};

class Gallery extends Service<GalleryActions, GalleryData> {
    // カスタムデータ
    unlocked: string[] = [];

    constructor() {
        super();

        // アクションハンドラーを登録する。name の型は GalleryActions から決まる
        this.on("add", (ctx, name) => {
            this.unlocked.push(name);
        });
    }

    /* データをゲームと一緒に保存し、セーブから復元する */
    serialize(): GalleryData {
        return {
            unlocked: [...this.unlocked],
        };
    }

    deserialize(data: GalleryData): void {
        this.unlocked = [...data.unlocked];
    }

    /* カスタムサービスロジック */
    add(name: string) {
        // アクションをトリガーする
        return this.trigger("add", name);
    }
}

const gallery = new Gallery();
story.registerService("gallery", gallery);

myScene.action([
    gallery
        .add("image1")
        .add("image2")
        .add("image3"),
]);

type MyCustomActions = {
    myAction: [arg0: string, arg1: number];
};

type MyCustomData = {
    count: number;
};

class MyCustomService extends Service<MyCustomActions, MyCustomData> {
    count = 0;

    /**
     * サービスをデータにシリアライズする
     *
     * **注:** データは JSON にシリアライズ可能でなければならない。保存するものがない場合は null を返す
     */
    serialize(): MyCustomData | null {
        return {count: this.count};
    }

    /**
     * サービスにデータを読み込む
     * @param data serialize が返したデータ
     */
    deserialize(data: MyCustomData): void {
        this.count = data.count;
    }
}

class MyCustomService extends Service<MyCustomActions, MyCustomData> {
    constructor() {
        super();

        // ctx、arg0、arg1 の型は MyCustomActions から決まる
        this.on("myAction", (ctx, arg0, arg1) => {
            // カスタムロジック
        });
    }

    /* serialize と deserialize */
}

this.on("load", async (ctx, url: string) => {
    const response = await fetch(url, { signal: ctx.signal });
    const data = await response.json();
    if (ctx.signal.aborted) return; // 待っている間にキャンセルされた：ゲームには触らない

    this.data = data;
});

type MinigameActions = {
    countdown: [seconds: number];
    fishing: [];
};

class Minigames extends Service<MinigameActions, null> {
    constructor() {
        super();

        // すぐに終える：スキップするとカウントダウンがすぐに終わる。
        this.on("countdown", async (ctx, seconds) => {
            await new Promise<void>(resolve => {
                const timer = setTimeout(resolve, seconds * 1000);
                ctx.skip.onRequest(() => {
                    clearTimeout(timer);
                    resolve();
                });
                ctx.signal.addEventListener("abort", () => clearTimeout(timer));
            });
        });

        // 拒否する：早送りはプレイヤーの代わりにミニゲームを遊べないので、ここで止まる。
        this.on("fishing", async (ctx) => {
            ctx.skip.refuse("waiting for the fishing minigame");
            await playFishing(ctx.signal);
        });
    }

    serialize() {
        return null;
    }

    deserialize() {
    }
}

const service = new MyCustomService();

scene.action([
    service.trigger("myAction", "foo", 123)
]);

class MyCustomService extends Service<MyCustomActions, MyCustomData> {
    myAction(arg0: string, arg1: number) {
        return this.trigger("myAction", arg0, arg1);
    }
}

const service = new MyCustomService();

scene.action([
    service.myAction("foo", 123),

    service
        .myAction("foo", 123)  // アクションはラップされ、チェーン可能になる
        .myAction("bar", 456), // チェーンの挙動はゲームが自動的に管理する
]);

const story = new Story(/* ... */);
story.registerService("gallery", gallery);

function GalleryPage() {
    const liveGame = useLiveGame();
    const gallery = liveGame.story?.getService<Gallery>("gallery");

    return (
        <ul>
            {gallery?.unlocked.map((name) => (
                <li key={name}>{name}</li>
            ))}
        </ul>
    );
}