yarn-spinner-runner-ts 0.1.0

package/src/react/DialogueView.tsx

@@ -0,0 +1,160 @@
+import React from "react";
+import type { RuntimeResult } from "../runtime/results.js";
+import { DialogueScene } from "./DialogueScene.js";
+import type { SceneCollection } from "../scene/types.js";
+import "./dialogue.css";
+
+export interface DialogueViewProps {
+  result: RuntimeResult | null;
+  onAdvance: (optionIndex?: number) => void;
+  className?: string;
+  scenes?: SceneCollection;
+}
+
+// Helper to parse CSS string into object
+function parseCss(cssStr: string | undefined): React.CSSProperties {
+  if (!cssStr) return {};
+  const styles: React.CSSProperties = {};
+  // Improved parser: handles quoted values and commas
+  // Split by semicolon, but preserve quoted strings
+  const rules: string[] = [];
+  let currentRule = "";
+  let inQuotes = false;
+  let quoteChar = "";
+  
+  for (let i = 0; i < cssStr.length; i++) {
+    const char = cssStr[i];
+    if ((char === '"' || char === "'") && !inQuotes) {
+      inQuotes = true;
+      quoteChar = char;
+      currentRule += char;
+    } else if (char === quoteChar && inQuotes) {
+      inQuotes = false;
+      quoteChar = "";
+      currentRule += char;
+    } else if (char === ";" && !inQuotes) {
+      rules.push(currentRule.trim());
+      currentRule = "";
+    } else {
+      currentRule += char;
+    }
+  }
+  if (currentRule.trim()) {
+    rules.push(currentRule.trim());
+  }
+  
+  rules.forEach((rule) => {
+    if (!rule) return;
+    const colonIndex = rule.indexOf(":");
+    if (colonIndex === -1) return;
+    const prop = rule.slice(0, colonIndex).trim();
+    const value = rule.slice(colonIndex + 1).trim();
+    if (prop && value) {
+      // Convert kebab-case to camelCase
+      const camelProp = prop.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+      // Remove quotes from value if present, and strip !important (React doesn't support it)
+      let cleanValue = value.trim();
+      if (cleanValue.endsWith("!important")) {
+        cleanValue = cleanValue.slice(0, -10).trim();
+      }
+      if (cleanValue.startsWith('"') && cleanValue.endsWith('"')) {
+        cleanValue = cleanValue.slice(1, -1);
+      } else if (cleanValue.startsWith("'") && cleanValue.endsWith("'")) {
+        cleanValue = cleanValue.slice(1, -1);
+      }
+      (styles as any)[camelProp] = cleanValue;
+    }
+  });
+  return styles;
+}
+
+export function DialogueView({ result, onAdvance, className, scenes }: DialogueViewProps) {
+  const sceneName = result?.type === "text" || result?.type === "options" ? result.scene : undefined;
+  const speaker = result?.type === "text" ? result.speaker : undefined;
+  const sceneCollection = scenes || { scenes: {} };
+
+  if (!result) {
+    return (
+      <div className={`yd-empty ${className || ""}`}>
+        <p>Dialogue ended or not started.</p>
+      </div>
+    );
+  }
+
+  if (result.type === "text") {
+    const nodeStyles = parseCss(result.nodeCss);
+    return (
+      <div className="yd-container">
+        <DialogueScene sceneName={sceneName} speaker={speaker} scenes={sceneCollection} />
+        <div
+          className={`yd-dialogue-box ${result.isDialogueEnd ? "yd-text-box-end" : ""} ${className || ""}`}
+          style={nodeStyles} // Only apply dynamic node CSS
+          onClick={() => !result.isDialogueEnd && onAdvance()}
+        >
+          <div className="yd-text-box">
+            {result.speaker && (
+              <div className="yd-speaker">
+                {result.speaker}
+              </div>
+            )}
+            <p className={`yd-text ${result.speaker ? "yd-text-with-speaker" : ""}`}>
+              {result.text || "\u00A0"}
+            </p>
+            {!result.isDialogueEnd && (
+              <div className="yd-continue">
+                ▼
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (result.type === "options") {
+    const nodeStyles = parseCss(result.nodeCss);
+    return (
+      <div className="yd-container">
+        <DialogueScene sceneName={sceneName} speaker={speaker} scenes={sceneCollection} />
+        <div className={`yd-options-container ${className || ""}`}>
+          <div className="yd-options-box" style={nodeStyles}>
+            <div className="yd-options-title">Choose an option:</div>
+            <div className="yd-options-list">
+              {result.options.map((option, index) => {
+                const optionStyles = parseCss(option.css);
+                return (
+                  <button
+                    key={index}
+                    className="yd-option-button"
+                    onClick={() => onAdvance(index)}
+                    style={optionStyles} // Only apply dynamic option CSS
+                  >
+                    {option.text}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Command result - auto-advance
+  if (result.type === "command") {
+    // Auto-advance commands after a brief moment
+    React.useEffect(() => {
+      const timer = setTimeout(() => onAdvance(), 50);
+      return () => clearTimeout(timer);
+    }, [result.command, onAdvance]);
+
+    return (
+      <div className={`yd-command ${className || ""}`}>
+        <p>Executing: {result.command}</p>
+      </div>
+    );
+  }
+
+  return null;
+}
+

package/src/react/dialogue.css

@@ -0,0 +1,181 @@
+/* Yarn Dialogue System Styles */
+
+/* Main dialogue container */
+.yd-container {
+  position: relative;
+  width: 100%;
+  min-height: 400px;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Scene container */
+.yd-scene {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  min-height: 400px;
+  background-color: rgba(26, 26, 46, 1);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  transition: opacity 0.6s ease-in-out;
+  z-index: 0;
+  overflow: visible;
+  pointer-events: none;
+}
+
+/* Scene background transition overlay */
+.yd-scene-next {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  z-index: 0;
+}
+
+/* Actor image */
+.yd-actor {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  max-height: 70%;
+  max-width: 40%;
+  object-fit: contain;
+  z-index: 1;
+  transition: opacity 0.3s ease-in-out;
+  opacity: 1;
+  pointer-events: none;
+}
+
+/* Dialogue box container */
+.yd-dialogue-box {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  margin: 20px;
+  width: calc(100% - 40px);
+  cursor: pointer;
+}
+
+.yd-dialogue-box.yd-text-box-end {
+  cursor: default;
+}
+
+/* Text dialogue box content */
+.yd-text-box {
+  background-color: rgba(30, 30, 60, 0.9);
+  border: 2px solid #4a9eff;
+  border-radius: 12px;
+  padding: 20px;
+  color: #ffffff;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  min-height: 120px;
+}
+
+/* Speaker label */
+.yd-speaker {
+  background-color: #4a9eff;
+  color: #ffffff;
+  padding: 8px 16px;
+  border-radius: 8px;
+  display: inline-block;
+  margin-bottom: 12px;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+/* Dialogue text */
+.yd-text {
+  margin: 0;
+  font-size: 18px;
+  line-height: 1.6;
+}
+
+.yd-text-with-speaker {
+  margin-top: 12px;
+}
+
+/* Continue indicator */
+.yd-continue {
+  text-align: right;
+  margin-top: 12px;
+  font-size: 24px;
+  color: #4a9eff;
+}
+
+/* Options container */
+.yd-options-container {
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  margin: 20px;
+  width: calc(100% - 40px);
+}
+
+.yd-options-box {
+  background-color: rgba(30, 30, 60, 0.9);
+  border: 2px solid #4a9eff;
+  border-radius: 12px;
+  padding: 20px;
+  color: #ffffff;
+}
+
+.yd-options-title {
+  margin-bottom: 16px;
+  font-size: 16px;
+  color: #a0a0ff;
+}
+
+.yd-options-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* Option button */
+.yd-option-button {
+  border: none;
+  border-radius: 8px;
+  padding: 16px 20px;
+  font-size: 16px;
+  cursor: pointer;
+  text-align: left;
+  transition: transform 0.1s, opacity 0.1s;
+  font-family: inherit;
+  background-color: #4a9eff;
+  color: #ffffff;
+}
+
+.yd-option-button:hover {
+  transform: scale(1.02);
+  opacity: 0.9;
+}
+
+/* Command result */
+.yd-command {
+  padding: 20px;
+  text-align: center;
+  color: #888;
+}
+
+/* Empty/ended dialogue */
+.yd-empty {
+  padding: 20px;
+  text-align: center;
+}
+

package/src/react/useYarnRunner.tsx

@@ -0,0 +1,33 @@
+import { useState, useCallback, useRef } from "react";
+import { YarnRunner, type IRProgram, type RunnerOptions, type RuntimeResult } from "../runtime/runner.js";
+
+export function useYarnRunner(
+  program: IRProgram,
+  options: RunnerOptions
+): {
+  result: RuntimeResult | null;
+  advance: (optionIndex?: number) => void;
+  runner: YarnRunner;
+} {
+  const runnerRef = useRef<YarnRunner | null>(null);
+  const [result, setResult] = useState<RuntimeResult | null>(null);
+
+  // Initialize runner only once
+  if (!runnerRef.current) {
+    runnerRef.current = new YarnRunner(program, options);
+    setResult(runnerRef.current.currentResult);
+  }
+
+  const runner = runnerRef.current;
+
+  const advance = useCallback(
+    (optionIndex?: number) => {
+      runner.advance(optionIndex);
+      setResult(runner.currentResult);
+    },
+    [runner]
+  );
+
+  return { result, advance, runner };
+}
+

package/src/runtime/commands.ts

@@ -0,0 +1,183 @@
+/**
+ * Command parser and handler utilities for Yarn Spinner commands.
+ * Commands like <<command_name arg1 arg2>> or <<command_name "arg with spaces">>
+ */
+
+import type { ExpressionEvaluator as Evaluator } from "./evaluator";
+
+export interface ParsedCommand {
+  name: string;
+  args: string[];
+  raw: string;
+}
+
+/**
+ * Parse a command string like "command_name arg1 arg2" or "set variable value"
+ */
+export function parseCommand(content: string): ParsedCommand {
+  const trimmed = content.trim();
+  if (!trimmed) {
+    throw new Error("Empty command");
+  }
+
+  const parts: string[] = [];
+  let current = "";
+  let inQuotes = false;
+  let quoteChar = "";
+
+  for (let i = 0; i < trimmed.length; i++) {
+    const char = trimmed[i];
+
+    if ((char === '"' || char === "'") && !inQuotes) {
+      inQuotes = true;
+      quoteChar = char;
+      continue;
+    }
+
+    if (char === quoteChar && inQuotes) {
+      inQuotes = false;
+      quoteChar = "";
+      parts.push(current);
+      current = "";
+      continue;
+    }
+
+    if (char === " " && !inQuotes) {
+      if (current.trim()) {
+        parts.push(current.trim());
+        current = "";
+      }
+      continue;
+    }
+
+    current += char;
+  }
+
+  if (current.trim()) {
+    parts.push(current.trim());
+  }
+
+  if (parts.length === 0) {
+    throw new Error("No command name found");
+  }
+
+  return {
+    name: parts[0],
+    args: parts.slice(1),
+    raw: content,
+  };
+}
+
+/**
+ * Built-in command handlers for common Yarn Spinner commands.
+ */
+export class CommandHandler {
+  private handlers = new Map<string, (args: string[], evaluator?: Evaluator) => void | Promise<void>>();
+  private variables: Record<string, unknown>;
+
+  constructor(variables: Record<string, unknown> = {}) {
+    this.variables = variables;
+    this.registerBuiltins();
+  }
+
+  /**
+   * Register a command handler.
+   */
+  register(name: string, handler: (args: string[], evaluator?: Evaluator) => void | Promise<void>): void {
+    this.handlers.set(name.toLowerCase(), handler);
+  }
+
+  /**
+   * Execute a parsed command.
+   */
+  async execute(parsed: ParsedCommand, evaluator?: Evaluator): Promise<void> {
+    const handler = this.handlers.get(parsed.name.toLowerCase());
+    if (handler) {
+      await handler(parsed.args, evaluator);
+    } else {
+      console.warn(`Unknown command: ${parsed.name}`);
+    }
+  }
+
+  private registerBuiltins(): void {
+    // <<set $var to expr>> or <<set $var = expr>> or <<set $var expr>>
+    this.register("set", (args, evaluator) => {
+      if (!evaluator) return;
+      if (args.length < 2) return;
+      const varNameRaw = args[0];
+      let exprParts = args.slice(1);
+      if (exprParts[0] === "to") exprParts = exprParts.slice(1);
+      if (exprParts[0] === "=") exprParts = exprParts.slice(1);
+      const expr = exprParts.join(" ");
+      let value = evaluator.evaluateExpression(expr);
+      
+      // If value is a string starting with ".", try to resolve as enum shorthand
+      if (typeof value === "string" && value.startsWith(".")) {
+        const enumType = evaluator.getEnumTypeForVariable(varNameRaw);
+        if (enumType) {
+          value = evaluator.resolveEnumValue(value, enumType);
+        }
+      }
+      
+      const key = varNameRaw.startsWith("$") ? varNameRaw.slice(1) : varNameRaw;
+      // Setting a variable converts it from smart to regular
+      this.variables[key] = value;
+      evaluator.setVariable(key, value);
+    });
+
+    // <<declare $var = expr>>
+    this.register("declare", (args, evaluator) => {
+      if (!evaluator) return;
+      if (args.length < 3) return; // name, '=', expr
+      const varNameRaw = args[0];
+      let exprParts = args.slice(1);
+      if (exprParts[0] === "=") exprParts = exprParts.slice(1);
+      const expr = exprParts.join(" ");
+      
+      const key = varNameRaw.startsWith("$") ? varNameRaw.slice(1) : varNameRaw;
+      
+      // Check if expression is "smart" (contains operators, comparisons, or variable references)
+      // Smart variables: expressions with operators, comparisons, logical ops, or function calls
+      const isSmart = /[+\-*/%<>=!&|]/.test(expr) || 
+                      /\$\w+/.test(expr) || // references other variables
+                      /[a-zA-Z_]\w*\s*\(/.test(expr); // function calls
+      
+      if (isSmart) {
+        // Store as smart variable - will recalculate on each access
+        evaluator.setSmartVariable(key, expr);
+        // Also store initial value in variables for immediate use
+        const initialValue = evaluator.evaluateExpression(expr);
+        this.variables[key] = initialValue;
+      } else {
+        // Regular variable - evaluate once and store
+        let value = evaluator.evaluateExpression(expr);
+        
+        // Check if expr is an enum value (EnumName.CaseName or .CaseName)
+        if (typeof value === "string") {
+          // Try to extract enum name from EnumName.CaseName
+          const enumMatch = expr.match(/^([A-Za-z_][A-Za-z0-9_]*)\.([A-Za-z_][A-Za-z0-9_]*)$/);
+          if (enumMatch) {
+            const enumName = enumMatch[1];
+            value = evaluator.resolveEnumValue(expr, enumName);
+          } else if (value.startsWith(".")) {
+            // Shorthand - we can't infer enum type from declaration alone
+            // Store as-is, will be resolved on first use if variable has enum type
+            value = value;
+          }
+        }
+        
+        this.variables[key] = value;
+        evaluator.setVariable(key, value);
+      }
+    });
+
+    // <<stop>> - no-op, just a marker
+    this.register("stop", () => {
+      // Dialogue stop marker
+    });
+  }
+}
+
+// Forward reference type (avoid circular import)
+type ExpressionEvaluator = import("./evaluator").ExpressionEvaluator;
+