yarn-spinner-runner-ts 0.1.1 → 0.1.2-b

package/src/react/DialogueView.tsx

@@ -1,14 +1,26 @@
-import React from "react";
+import React, { useRef, useEffect, useState } from "react";
 import type { RuntimeResult } from "../runtime/results.js";
 import { DialogueScene } from "./DialogueScene.js";
 import type { SceneCollection } from "../scene/types.js";
-import "./dialogue.css";
+import { TypingText } from "./TypingText.js";
+// Note: CSS is imported in the browser demo entry point (examples/browser/main.tsx)
+// This prevents Node.js from trying to resolve CSS imports during tests
 
 export interface DialogueViewProps {
   result: RuntimeResult | null;
   onAdvance: (optionIndex?: number) => void;
   className?: string;
   scenes?: SceneCollection;
+  // Typing animation options
+  enableTypingAnimation?: boolean;
+  typingSpeed?: number;
+  showTypingCursor?: boolean;
+  cursorCharacter?: string;
+  // Auto-advance after typing completes
+  autoAdvanceAfterTyping?: boolean;
+  autoAdvanceDelay?: number; // Delay in ms after typing completes before auto-advancing
+  // Pause before advance
+  pauseBeforeAdvance?: number; // Delay in ms before advancing when clicking (0 = no pause)
 }
 
 // Helper to parse CSS string into object
@@ -68,10 +80,57 @@ function parseCss(cssStr: string | undefined): React.CSSProperties {
   return styles;
 }
 
-export function DialogueView({ result, onAdvance, className, scenes }: DialogueViewProps) {
+export function DialogueView({
+  result,
+  onAdvance,
+  className,
+  scenes,
+  enableTypingAnimation = false,
+  typingSpeed = 50, // Characters per second (50 cps = ~20ms per character)
+  showTypingCursor = true,
+  cursorCharacter = "|",
+  autoAdvanceAfterTyping = false,
+  autoAdvanceDelay = 500,
+  pauseBeforeAdvance = 0,
+}: DialogueViewProps) {
   const sceneName = result?.type === "text" || result?.type === "options" ? result.scene : undefined;
   const speaker = result?.type === "text" ? result.speaker : undefined;
   const sceneCollection = scenes || { scenes: {} };
+  const [typingComplete, setTypingComplete] = useState(false);
+  const [currentTextKey, setCurrentTextKey] = useState(0);
+  const [skipTyping, setSkipTyping] = useState(false);
+  const advanceTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Reset typing completion when text changes
+  useEffect(() => {
+    if (result?.type === "text") {
+      setTypingComplete(false);
+      setSkipTyping(false);
+      setCurrentTextKey((prev) => prev + 1); // Force re-render of TypingText
+    }
+    // Cleanup any pending advance timeouts when text changes
+    return () => {
+      if (advanceTimeoutRef.current) {
+        clearTimeout(advanceTimeoutRef.current);
+        advanceTimeoutRef.current = null;
+      }
+    };
+  }, [result?.type === "text" ? result.text : null]);
+
+  // Handle auto-advance after typing completes
+  useEffect(() => {
+    if (
+      autoAdvanceAfterTyping &&
+      typingComplete &&
+      result?.type === "text" &&
+      !result.isDialogueEnd
+    ) {
+      const timer = setTimeout(() => {
+        onAdvance();
+      }, autoAdvanceDelay);
+      return () => clearTimeout(timer);
+    }
+  }, [autoAdvanceAfterTyping, typingComplete, result, onAdvance, autoAdvanceDelay]);
 
   if (!result) {
     return (
@@ -83,13 +142,43 @@ export function DialogueView({ result, onAdvance, className, scenes }: DialogueV
 
   if (result.type === "text") {
     const nodeStyles = parseCss(result.nodeCss);
+    const displayText = result.text || "\u00A0";
+    const shouldShowContinue = !result.isDialogueEnd && !enableTypingAnimation;
+
+    const handleClick = () => {
+      if (result.isDialogueEnd) return;
+      
+      // If typing is in progress, skip it; otherwise advance
+      if (enableTypingAnimation && !typingComplete) {
+        // Skip typing animation
+        setSkipTyping(true);
+        setTypingComplete(true);
+      } else {
+        // Clear any pending timeout
+        if (advanceTimeoutRef.current) {
+          clearTimeout(advanceTimeoutRef.current);
+          advanceTimeoutRef.current = null;
+        }
+
+        // Apply pause before advance if configured
+        if (pauseBeforeAdvance > 0) {
+          advanceTimeoutRef.current = setTimeout(() => {
+            onAdvance();
+            advanceTimeoutRef.current = null;
+          }, pauseBeforeAdvance);
+        } else {
+          onAdvance();
+        }
+      }
+    };
+
     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()}
+          onClick={handleClick}
         >
           <div className="yd-text-box">
             {result.speaker && (
@@ -98,9 +187,21 @@ export function DialogueView({ result, onAdvance, className, scenes }: DialogueV
               </div>
             )}
             <p className={`yd-text ${result.speaker ? "yd-text-with-speaker" : ""}`}>
-              {result.text || "\u00A0"}
+              {enableTypingAnimation ? (
+                <TypingText
+                  key={currentTextKey}
+                  text={displayText}
+                  typingSpeed={typingSpeed}
+                  showCursor={showTypingCursor}
+                  cursorCharacter={cursorCharacter}
+                  disabled={skipTyping}
+                  onComplete={() => setTypingComplete(true)}
+                />
+              ) : (
+                displayText
+              )}
             </p>
-            {!result.isDialogueEnd && (
+            {shouldShowContinue && (
               <div className="yd-continue">
                 ▼
               </div>

package/src/react/TypingText.tsx

@@ -0,0 +1,132 @@
+import React, { useState, useEffect, useRef } from "react";
+
+export interface TypingTextProps {
+  text: string;
+  typingSpeed?: number;
+  showCursor?: boolean;
+  cursorCharacter?: string;
+  cursorBlinkDuration?: number;
+  cursorClassName?: string;
+  className?: string;
+  onComplete?: () => void;
+  disabled?: boolean;
+}
+
+export function TypingText({
+  text,
+  typingSpeed = 100,
+  showCursor = true,
+  cursorCharacter = "|",
+  cursorBlinkDuration = 530,
+  cursorClassName = "",
+  className = "",
+  onComplete,
+  disabled = false,
+}: TypingTextProps) {
+  const [displayedText, setDisplayedText] = useState("");
+  const [cursorVisible, setCursorVisible] = useState(true);
+  const cursorIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const typingTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const onCompleteRef = useRef(onComplete);
+  
+  useEffect(() => {
+    onCompleteRef.current = onComplete;
+  }, [onComplete]);
+
+  // Handle cursor blinking
+  useEffect(() => {
+    if (!showCursor || disabled) {
+      return;
+    }
+    cursorIntervalRef.current = setInterval(() => {
+      setCursorVisible((prev) => !prev);
+    }, cursorBlinkDuration);
+    return () => {
+      if (cursorIntervalRef.current) {
+        clearInterval(cursorIntervalRef.current);
+      }
+    };
+  }, [showCursor, cursorBlinkDuration, disabled]);
+
+  // Handle typing animation
+  useEffect(() => {
+    if (disabled) {
+      // If disabled, show full text immediately
+      setDisplayedText(text);
+      if (onCompleteRef.current && text.length > 0) {
+        onCompleteRef.current();
+      }
+      return;
+    }
+
+    // Reset when text changes
+    setDisplayedText("");
+
+    if (text.length === 0) {
+      if (onCompleteRef.current) {
+        onCompleteRef.current();
+      }
+      return;
+    }
+
+    let index = 0;
+    const typeNextCharacter = () => {
+      if (index < text.length) {
+        index++;
+        setDisplayedText(text.slice(0, index));
+        
+       
+        // If speed is 0 or very small, type next character immediately (use requestAnimationFrame for smoother animation)
+        if (typingSpeed <= 0) {
+          // Use requestAnimationFrame for instant/smooth rendering
+          requestAnimationFrame(() => {
+            typeNextCharacter();
+          });
+        } else {
+          typingTimeoutRef.current = setTimeout(() => {
+            typeNextCharacter();
+          }, typingSpeed);
+        }
+      } else {
+        if (onCompleteRef.current) {
+          onCompleteRef.current();
+        }
+      }
+    };
+
+    // Start typing
+    if (typingSpeed <= 0) {
+      // Start immediately if speed is 0
+      requestAnimationFrame(() => {
+        typeNextCharacter();
+      });
+    } else {
+      typingTimeoutRef.current = setTimeout(() => {
+        typeNextCharacter();
+      }, typingSpeed);
+    }
+
+    return () => {
+      if (typingTimeoutRef.current) {
+        clearTimeout(typingTimeoutRef.current);
+      }
+    };
+  }, [text, disabled]);
+
+  return (
+    <span className={className}>
+      <span>{displayedText}</span>
+      {showCursor && !disabled && (
+        <span
+          className={`yd-typing-cursor ${cursorClassName}`}
+          style={{
+            opacity: cursorVisible ? 1 : 0,
+            transition: `opacity ${cursorBlinkDuration / 2}ms ease-in-out`,
+          }}
+        >
+          {cursorCharacter}
+        </span>
+      )}
+    </span>
+  );
+}

package/src/react/css.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Type declarations for CSS module imports
+ * This allows TypeScript to recognize CSS imports without errors
+ */
+declare module "*.css" {
+  const content: string;
+  export default content;
+}
+

package/src/react/useYarnRunner.tsx

@@ -1,5 +1,7 @@
 import { useState, useCallback, useRef } from "react";
-import { YarnRunner, type IRProgram, type RunnerOptions, type RuntimeResult } from "../runtime/runner.js";
+import { YarnRunner, type RunnerOptions } from "../runtime/runner.js";
+import type { IRProgram } from "../compile/ir.js";
+import type { RuntimeResult } from "../runtime/results.js";
 
 export function useYarnRunner(
   program: IRProgram,

package/src/runtime/commands.ts

@@ -162,7 +162,7 @@ export class CommandHandler {
           } 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;
+            // Value is already set correctly above
           }
         }
         
@@ -178,6 +178,3 @@ export class CommandHandler {
   }
 }
 
-// Forward reference type (avoid circular import)
-type ExpressionEvaluator = import("./evaluator").ExpressionEvaluator;
-

package/src/runtime/evaluator.ts

@@ -202,7 +202,6 @@ export class ExpressionEvaluator {
     
     // Try shorthand enum: .CaseName (requires context from variables)
     if (expr.startsWith(".") && expr.length > 1) {
-      const caseName = expr.slice(1);
       // Try to infer enum from variable types - for now, return as-is and let validation handle it
       return expr;
     }