yarn-spinner-runner-ts
Version:
TypeScript parser, compiler, and runtime for Yarn Spinner 3.x with React adapter [NPM package](https://www.npmjs.com/package/yarn-spinner-runner-ts)
89 lines (87 loc) • 4.06 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useMemo } from "react";
import { parseYarn } from "../parse/parser.js";
import { compile } from "../compile/compiler.js";
import { DialogueView } from "./DialogueView.js";
import { parseScenes } from "../scene/parser.js";
const DEFAULT_YARN = `title: Start
scene: scene1
---
<< declare $hasBadge = false >>
Narrator: Welcome to [b]yarn-spinner-ts[/b], {$playerName}!
Narrator: Current street cred: {$reputation}
npc: This is a dialogue system powered by Yarn Spinner.
Narrator: Click anywhere to continue, or choose an option below.
-> Start the adventure &css{backgroundColor: #4a9eff; color: white;} [if $hasBadge]
Narrator: Great! Let's begin your journey.
<<jump NextScene>>
-> Learn more &css{backgroundColor: #2ecc71; color: red;}
Narrator: Yarn Spinner is a powerful narrative scripting language.
npc: It supports variables, conditions, and branching stories.
<<jump NextScene>>
===
title: NextScene
---
npc: blablabla
Narrator: You've reached the next scene!
Narrator: The dialogue system supports rich features like:
Narrator: • Variables and expressions
Narrator: • Conditional branching
Narrator: • Options with CSS styling
Narrator: • Commands and functions
Narrator: This is the end of the demo. Refresh to start again!
===`;
const DEFAULT_SCENES = `
scenes:
scene1: https://i.pinimg.com/1200x/73/f6/86/73f686e3c62e5982055ce34ed5c331b9.jpg
actors:
user: https://i.pinimg.com/1200x/d3/ed/cd/d3edcd8574301cf78f5e93ecca57e18b.jpg
Narrator: https://i.pinimg.com/1200x/ad/8d/f4/ad8df4186827c20ba5bdb98883e12262.jpg
npc: https://i.pinimg.com/1200x/81/12/1c/81121c69ef3e5bf657a7bacd9ff9d08e.jpg
`;
export function DialogueExample() {
const [yarnText] = useState(DEFAULT_YARN);
const [error, setError] = useState(null);
const enableTypingAnimation = false;
const scenes = useMemo(() => {
try {
return parseScenes(DEFAULT_SCENES);
}
catch (e) {
console.warn("Failed to parse scenes:", e);
return { scenes: {} };
}
}, []);
const program = useMemo(() => {
try {
setError(null);
const ast = parseYarn(yarnText);
return compile(ast);
}
catch (e) {
setError(e instanceof Error ? e.message : String(e));
return null;
}
}, [yarnText]);
const customFunctions = useMemo(() => ({
greet: () => { console.log('test'); },
double: (num) => Number(num) * 2
}), []);
return (_jsx("div", { style: {
minHeight: "100vh",
backgroundColor: "#1a1a2e",
padding: "20px",
display: "flex",
flexDirection: "column",
alignItems: "center",
}, children: _jsxs("div", { style: { maxWidth: "1000px", width: "100%" }, children: [_jsx("h1", { style: { color: "#ffffff", textAlign: "center", marginBottom: "30px" }, children: "yarn-spinner-ts Dialogue Demo" }), error && (_jsxs("div", { style: {
backgroundColor: "#ff4444",
color: "#ffffff",
padding: "16px",
borderRadius: "8px",
marginBottom: "20px",
}, children: [_jsx("strong", { children: "Error:" }), " ", error] })), _jsx(DialogueView, { program: program || { nodes: {}, enums: {} }, startNode: "Start", scenes: scenes, variables: { playerName: "V", reputation: 3 }, enableTypingAnimation: enableTypingAnimation, showTypingCursor: true, typingSpeed: 20, cursorCharacter: "$", autoAdvanceAfterTyping: true, autoAdvanceDelay: 2000, actorTransitionDuration: 1000, pauseBeforeAdvance: enableTypingAnimation ? 1000 : 0, onStoryEnd: (info) => {
console.log('Story ended with variables:', info.variables);
}, functions: customFunctions })] }) }));
}
//# sourceMappingURL=DialogueExample.js.map