@lamppost/create-ink-player 1.0.0

package/template/rsbuild.config.ts

@@ -0,0 +1,38 @@
+import { defineConfig } from "@rsbuild/core";
+import { pluginImageCompress } from "@rsbuild/plugin-image-compress";
+import { pluginPreact } from "@rsbuild/plugin-preact";
+import { pluginSass } from "@rsbuild/plugin-sass";
+import { pluginSvgr } from "@rsbuild/plugin-svgr";
+
+export default defineConfig({
+    output: {
+        assetPrefix: "./",
+    },
+    dev: {
+        hmr: false,
+    },
+    tools: {
+        rspack(_config, { addRules }) {
+            addRules([
+                {
+                    test: /\.ink$/,
+                    use: ["@lamppost/ink-player/ink-loader"],
+                },
+            ]);
+        },
+    },
+    resolve: {
+        alias: {
+            react: "preact/compat",
+            "react-dom/test-utils": "preact/test-utils",
+            "react-dom": "preact/compat",
+            "react/jsx-runtime": "preact/jsx-runtime",
+        },
+    },
+    plugins: [
+        pluginPreact(),
+        pluginSass(),
+        pluginSvgr(),
+        pluginImageCompress(),
+    ],
+});

package/template/src/About.tsx

@@ -0,0 +1,45 @@
+import type { ScreenProps } from "@lamppost/ink-player";
+import Button from "react-bootstrap/Button";
+import Card from "react-bootstrap/Card";
+import Spinner from "react-bootstrap/Spinner";
+
+/**
+ * The component is provided with the following props:
+ * - setPage: A function to navigate to a different screen
+ * - loading: A boolean indicating if the game is loading
+ *
+ * Use setPage("game") to navigate to the game screen.
+ */
+export function About({ setPage, loading }: ScreenProps) {
+    return (
+        <Card>
+            {/*
+            // You can add an image here and it'll display at the
+            // top of the page.
+            // import topImage from "./assets/images/top-image.jpg";
+            <Card.Img
+                variant="top"
+                src={topImage}
+                alt="LampPost Player top image"
+            />
+            */}
+            <Card.Body>
+                {/* You can put anything else you want in here! */}
+                <Button
+                    variant="primary"
+                    size="lg"
+                    onClick={() => setPage("game")}
+                    disabled={loading}
+                >
+                    {loading ? (
+                        <>
+                            <Spinner animation="border" size="sm" /> Loading...
+                        </>
+                    ) : (
+                        "Start Playing"
+                    )}
+                </Button>
+            </Card.Body>
+        </Card>
+    );
+}

package/template/src/env.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="@rsbuild/core/types" />
+
+declare module "*.svg" {
+    const content: string;
+    export default content;
+}
+declare module "*.svg?react" {
+    const ReactComponent: React.FunctionComponent<
+        React.SVGProps<SVGSVGElement>
+    >;
+    export default ReactComponent;
+}
+
+declare module "*.ink" {
+    const content: { inkVersion: number };
+    export default content;
+}

package/template/src/index.ts

@@ -0,0 +1,100 @@
+import { init } from "@lamppost/ink-player";
+import locationPlugin from "@lamppost/ink-player/plugins/location";
+import textInputPlugin from "@lamppost/ink-player/plugins/text-input";
+
+import "@lamppost/ink-player/styles.css";
+import "./styles.scss";
+
+import { About } from "./About";
+
+init({
+    /**
+     * The name of the game. It will be used in the following ways:
+     * - As the title of the browser tab
+     * - As the name of the game in the header (if no shortGameName is provided)
+     * - As the ID for storing the saved games in the browser's local storage
+     */
+    gameName: "Lamp Post Player",
+
+    /**
+     * Load the Ink story. Change this to point to your own story file.
+     */
+    loadStory: () => import("../story/game.ink"),
+
+    /**
+     * The short name of the game. It will be used as the name of the game
+     * in the header. If not provided, the gameName will be used.
+     */
+    // shortGameName: "LampPost Player",
+
+    /**
+     * Whether to enable dark mode. If not provided, dark mode will not be
+     * enabled. If enabled, it will turn on the toggle in the header,
+     * load the user's preference from their computer, and store the result
+     * in the browser's local storage.
+     */
+    // enableDarkMode: false,
+
+    /**
+     * The default theme to use. If not provided, the default theme will be
+     * "light".
+     */
+    // defaultTheme: "light",
+
+    /**
+     * The favicon of the game. If not provided, no favicon will be used.
+     * This should point to a favicon image file. The import would look
+     * something like:
+     *   import Favicon from "./assets/images/icon.svg";
+     */
+    // favicon: Favicon,
+
+    /**
+     * The default name of the save file. If not provided, the save file
+     * will be named "Untitled Save". This should be a function that takes
+     * the current state of the game and returns a string.
+     */
+    // defaultSaveName: (currentState) =>
+    //     `${currentState.tags["Chapter Title"] ?? "Untitled Chapter"}: ${currentState.tags.Location ?? "Unknown Location"}`,
+
+    /**
+     * Any tags that should persist between knots. Providing a tag here will
+     * ensure that things like portraits (for example) will still be visible
+     * even if they are not explicitly mentioned in the knot.
+     * You can stop a sticky tag from persisting by setting it to "None" in
+     * your Ink story.
+     */
+    // stickyTags: ["Portrait", "Location", "BackgroundMusic"],
+
+    /**
+     * The screens to display in the game. The only required screen is "Game".
+     */
+    screens: [
+        {
+            id: "home",
+            title: "Home",
+            component: About,
+        },
+        {
+            id: "game",
+            title: "Story",
+            component: "Game",
+        },
+        {
+            id: "history",
+            title: "History",
+            component: "History",
+        },
+    ],
+
+    /**
+     * The plugins to use in the game.
+     *
+     * You can add more plugins by importing them from the @lamppost/ink-player package.
+     *
+     * For example, to add the location plugin, you would do:
+     *   import locationPlugin from "@lamppost/ink-player/plugins/location";
+     *   plugins: [textInputPlugin({}), locationPlugin({})],
+     */
+    plugins: [textInputPlugin({}), locationPlugin({})],
+});

package/template/src/styles.scss

@@ -0,0 +1 @@
+// Put any custom styles you want here!

package/template/story/game.ink

@@ -0,0 +1,13 @@
+->start
+
+=== start
+A simple test game. Modify this to make your game!
+
+* [Make a choice.]
+* [A disabled choice. # disabled]
+
+-
+
+You made a choice! You win!
+
+-> END

package/template/tsconfig.json

@@ -0,0 +1,30 @@
+{
+    "compilerOptions": {
+        "lib": ["DOM", "ES2020"],
+        "jsx": "react-jsx",
+        "target": "ES2020",
+        "noEmit": true,
+        "skipLibCheck": true,
+        "jsxImportSource": "preact",
+        "useDefineForClassFields": true,
+
+        /* modules */
+        "module": "ESNext",
+        "moduleDetection": "force",
+        "moduleResolution": "bundler",
+        "verbatimModuleSyntax": true,
+        "resolveJsonModule": true,
+        "allowImportingTsExtensions": true,
+        "noUncheckedSideEffectImports": true,
+        "paths": {
+            "react": ["./node_modules/preact/compat/"],
+            "react-dom": ["./node_modules/preact/compat/"]
+        },
+
+        /* type checking */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true
+    },
+    "include": ["src", "src/env.d.ts", "rsbuild.config.ts"]
+}