@rohal12/spindle 0.1.0

package/src/components/macros/Print.tsx

@@ -0,0 +1,48 @@
+import { useStoryStore } from '../../store';
+import { useContext } from 'preact/hooks';
+import { evaluate } from '../../expression';
+import { LocalsContext } from '../../markup/render';
+
+interface PrintProps {
+  rawArgs: string;
+  className?: string;
+  id?: string;
+}
+
+export function Print({ rawArgs, className, id }: PrintProps) {
+  const variables = useStoryStore((s) => s.variables);
+  const temporary = useStoryStore((s) => s.temporary);
+  const locals = useContext(LocalsContext);
+
+  // Merge locals into variables for expression evaluation
+  const mergedVars = { ...variables };
+  const mergedTemps = { ...temporary };
+  for (const [key, val] of Object.entries(locals)) {
+    if (key.startsWith('$')) mergedVars[key.slice(1)] = val;
+    else if (key.startsWith('_')) mergedTemps[key.slice(1)] = val;
+  }
+
+  try {
+    const result = evaluate(rawArgs, mergedVars, mergedTemps);
+    const display = result == null ? '' : String(result);
+    if (className || id)
+      return (
+        <span
+          id={id}
+          class={className}
+        >
+          {display}
+        </span>
+      );
+    return <>{display}</>;
+  } catch (err) {
+    return (
+      <span
+        class="error"
+        title={String(err)}
+      >
+        {`{print error: ${(err as Error).message}}`}
+      </span>
+    );
+  }
+}

package/src/components/macros/QuickLoad.tsx

@@ -0,0 +1,33 @@
+import { useStoryStore } from '../../store';
+
+interface QuickLoadProps {
+  className?: string;
+  id?: string;
+}
+
+export function QuickLoad({ className, id }: QuickLoadProps) {
+  const load = useStoryStore((s) => s.load);
+  const hasSave = useStoryStore((s) => s.hasSave);
+  // Subscribe to saveVersion so we re-render when a save is created
+  useStoryStore((s) => s.saveVersion);
+  const cls = className ? `menubar-button ${className}` : 'menubar-button';
+  const disabled = !hasSave();
+
+  const handleClick = () => {
+    if (confirm('Load saved game? Current progress will be lost.')) {
+      load();
+    }
+  };
+
+  return (
+    <button
+      id={id}
+      class={cls}
+      title="Quick Load (F9)"
+      disabled={disabled}
+      onClick={handleClick}
+    >
+      QuickLoad
+    </button>
+  );
+}

package/src/components/macros/QuickSave.tsx

@@ -0,0 +1,22 @@
+import { useStoryStore } from '../../store';
+
+interface QuickSaveProps {
+  className?: string;
+  id?: string;
+}
+
+export function QuickSave({ className, id }: QuickSaveProps) {
+  const save = useStoryStore((s) => s.save);
+  const cls = className ? `menubar-button ${className}` : 'menubar-button';
+
+  return (
+    <button
+      id={id}
+      class={cls}
+      title="Quick Save (F6)"
+      onClick={() => save()}
+    >
+      QuickSave
+    </button>
+  );
+}

package/src/components/macros/Radiobutton.tsx

@@ -0,0 +1,59 @@
+import { useStoryStore } from '../../store';
+
+interface RadiobuttonProps {
+  rawArgs: string;
+  className?: string;
+  id?: string;
+}
+
+function parseArgs(rawArgs: string): {
+  varName: string;
+  value: string;
+  label: string;
+} {
+  // {radiobutton "$var" "value" "Label text"}
+  const match = rawArgs.match(
+    /^\s*(["']?\$\w+["']?)\s+["'](.+?)["']\s+["']?(.+?)["']?\s*$/,
+  );
+  if (!match) {
+    // Try simpler: $var value label
+    const parts = rawArgs.trim().split(/\s+/);
+    return {
+      varName: (parts[0] || '').replace(/["']/g, ''),
+      value: parts[1] || '',
+      label: parts.slice(2).join(' '),
+    };
+  }
+  return {
+    varName: match[1].replace(/["']/g, ''),
+    value: match[2],
+    label: match[3],
+  };
+}
+
+export function Radiobutton({ rawArgs, className, id }: RadiobuttonProps) {
+  const { varName, value: radioValue, label } = parseArgs(rawArgs);
+  const name = varName.startsWith('$') ? varName.slice(1) : varName;
+
+  const currentValue = useStoryStore((s) => s.variables[name]);
+  const setVariable = useStoryStore((s) => s.setVariable);
+
+  const cls = className
+    ? `macro-radiobutton ${className}`
+    : 'macro-radiobutton';
+
+  return (
+    <label
+      id={id}
+      class={cls}
+    >
+      <input
+        type="radio"
+        name={`radio-${name}`}
+        checked={currentValue === radioValue}
+        onChange={() => setVariable(name, radioValue)}
+      />
+      {label ? ` ${label}` : null}
+    </label>
+  );
+}

package/src/components/macros/Repeat.tsx

@@ -0,0 +1,53 @@
+import { createContext } from 'preact';
+import { useState, useEffect, useCallback } from 'preact/hooks';
+import { renderNodes } from '../../markup/render';
+import { parseDelay } from '../../utils/parse-delay';
+import type { ASTNode } from '../../markup/ast';
+
+export const RepeatContext = createContext<{ stop: () => void }>({
+  stop: () => {},
+});
+
+interface RepeatProps {
+  rawArgs: string;
+  children: ASTNode[];
+  className?: string;
+  id?: string;
+}
+
+export function Repeat({ rawArgs, children, className, id }: RepeatProps) {
+  const delay = parseDelay(rawArgs);
+  const [count, setCount] = useState(0);
+  const [stopped, setStopped] = useState(false);
+
+  const stop = useCallback(() => setStopped(true), []);
+
+  useEffect(() => {
+    if (stopped) return;
+    const interval = setInterval(() => {
+      setCount((c) => c + 1);
+    }, delay);
+    return () => clearInterval(interval);
+  }, [delay, stopped]);
+
+  if (count === 0 && !stopped) return null;
+
+  const cls = className ? `macro-repeat ${className}` : undefined;
+
+  const content = (
+    <RepeatContext.Provider value={{ stop }}>
+      {renderNodes(children)}
+    </RepeatContext.Provider>
+  );
+
+  if (cls || id)
+    return (
+      <span
+        id={id}
+        class={cls}
+      >
+        {content}
+      </span>
+    );
+  return content;
+}

package/src/components/macros/Restart.tsx

@@ -0,0 +1,27 @@
+import { useStoryStore } from '../../store';
+
+interface RestartProps {
+  className?: string;
+  id?: string;
+}
+
+export function Restart({ className, id }: RestartProps) {
+  const restart = useStoryStore((s) => s.restart);
+  const cls = className ? `menubar-button ${className}` : 'menubar-button';
+
+  const handleClick = () => {
+    if (confirm('Restart the story? All progress will be lost.')) {
+      restart();
+    }
+  };
+
+  return (
+    <button
+      id={id}
+      class={cls}
+      onClick={handleClick}
+    >
+      ↺ Restart
+    </button>
+  );
+}

package/src/components/macros/Saves.tsx

@@ -0,0 +1,25 @@
+import { useState } from 'preact/hooks';
+import { SaveLoadDialog } from '../SaveLoadDialog';
+
+interface SavesProps {
+  className?: string;
+  id?: string;
+}
+
+export function Saves({ className, id }: SavesProps) {
+  const [open, setOpen] = useState(false);
+  const cls = className ? `menubar-button ${className}` : 'menubar-button';
+
+  return (
+    <>
+      <button
+        id={id}
+        class={cls}
+        onClick={() => setOpen(true)}
+      >
+        Saves
+      </button>
+      {open && <SaveLoadDialog onClose={() => setOpen(false)} />}
+    </>
+  );
+}

package/src/components/macros/Set.tsx

@@ -0,0 +1,36 @@
+import { useLayoutEffect } from 'preact/hooks';
+import { useStoryStore } from '../../store';
+import { execute } from '../../expression';
+
+interface SetProps {
+  rawArgs: string;
+}
+
+export function Set({ rawArgs }: SetProps) {
+  useLayoutEffect(() => {
+    const state = useStoryStore.getState();
+    const vars = structuredClone(state.variables);
+    const temps = structuredClone(state.temporary);
+
+    try {
+      execute(rawArgs, vars, temps);
+    } catch (err) {
+      console.error(`spindle: Error in {set ${rawArgs}}:`, err);
+      return;
+    }
+
+    // Diff and apply changes
+    for (const key of Object.keys(vars)) {
+      if (vars[key] !== state.variables[key]) {
+        state.setVariable(key, vars[key]);
+      }
+    }
+    for (const key of Object.keys(temps)) {
+      if (temps[key] !== state.temporary[key]) {
+        state.setTemporary(key, temps[key]);
+      }
+    }
+  }, []);
+
+  return null;
+}

package/src/components/macros/SettingsButton.tsx

@@ -0,0 +1,29 @@
+import { useState } from 'preact/hooks';
+import { settings } from '../../settings';
+import { SettingsDialog } from '../SettingsDialog';
+
+interface SettingsButtonProps {
+  className?: string;
+  id?: string;
+}
+
+export function SettingsButton({ className, id }: SettingsButtonProps) {
+  const [open, setOpen] = useState(false);
+
+  if (!settings.hasAny()) return null;
+
+  const cls = className ? `menubar-button ${className}` : 'menubar-button';
+
+  return (
+    <>
+      <button
+        id={id}
+        class={cls}
+        onClick={() => setOpen(true)}
+      >
+        ⚙ Settings
+      </button>
+      {open && <SettingsDialog onClose={() => setOpen(false)} />}
+    </>
+  );
+}

package/src/components/macros/Stop.tsx

@@ -0,0 +1,12 @@
+import { useLayoutEffect, useContext } from 'preact/hooks';
+import { RepeatContext } from './Repeat';
+
+export function Stop() {
+  const { stop } = useContext(RepeatContext);
+
+  useLayoutEffect(() => {
+    stop();
+  }, [stop]);
+
+  return null;
+}

package/src/components/macros/StoryTitle.tsx

@@ -0,0 +1,20 @@
+import { useStoryStore } from '../../store';
+
+interface StoryTitleProps {
+  className?: string;
+  id?: string;
+}
+
+export function StoryTitle({ className, id }: StoryTitleProps) {
+  const name = useStoryStore((s) => s.storyData?.name || '');
+  const cls = className ? `story-title ${className}` : 'story-title';
+
+  return (
+    <span
+      id={id}
+      class={cls}
+    >
+      {name}
+    </span>
+  );
+}

package/src/components/macros/Switch.tsx

@@ -0,0 +1,69 @@
+import { useStoryStore } from '../../store';
+import { useContext } from 'preact/hooks';
+import { evaluate } from '../../expression';
+import { LocalsContext, renderNodes } from '../../markup/render';
+import type { Branch } from '../../markup/ast';
+
+interface SwitchProps {
+  rawArgs: string;
+  branches: Branch[];
+}
+
+export function Switch({ rawArgs, branches }: SwitchProps) {
+  const variables = useStoryStore((s) => s.variables);
+  const temporary = useStoryStore((s) => s.temporary);
+  const locals = useContext(LocalsContext);
+
+  const mergedVars = { ...variables };
+  const mergedTemps = { ...temporary };
+  for (const [key, val] of Object.entries(locals)) {
+    if (key.startsWith('$')) mergedVars[key.slice(1)] = val;
+    else if (key.startsWith('_')) mergedTemps[key.slice(1)] = val;
+  }
+
+  let switchValue: unknown;
+  try {
+    switchValue = evaluate(rawArgs, mergedVars, mergedTemps);
+  } catch (err) {
+    return (
+      <span
+        class="error"
+        title={String(err)}
+      >
+        {`{switch error: ${(err as Error).message}}`}
+      </span>
+    );
+  }
+
+  // Find matching {case} branch or {default}
+  let defaultBranch: Branch | null = null;
+  for (const branch of branches) {
+    // {default} has empty rawArgs
+    if (branch.rawArgs === '') {
+      defaultBranch = branch;
+      continue;
+    }
+
+    try {
+      const caseValue = evaluate(branch.rawArgs, mergedVars, mergedTemps);
+      if (switchValue === caseValue) {
+        return <>{renderNodes(branch.children)}</>;
+      }
+    } catch (err) {
+      return (
+        <span
+          class="error"
+          title={String(err)}
+        >
+          {`{case error: ${(err as Error).message}}`}
+        </span>
+      );
+    }
+  }
+
+  if (defaultBranch) {
+    return <>{renderNodes(defaultBranch.children)}</>;
+  }
+
+  return null;
+}

package/src/components/macros/Textarea.tsx

@@ -0,0 +1,41 @@
+import { useStoryStore } from '../../store';
+
+interface TextareaProps {
+  rawArgs: string;
+  className?: string;
+  id?: string;
+}
+
+function parseArgs(rawArgs: string): { varName: string; placeholder: string } {
+  const match = rawArgs.match(
+    /^\s*(["']?\$\w+["']?)\s*(?:["'](.*)["'])?\s*$/,
+  );
+  if (!match) {
+    return { varName: rawArgs.trim(), placeholder: '' };
+  }
+  const varName = match[1].replace(/["']/g, '');
+  const placeholder = match[2] || '';
+  return { varName, placeholder };
+}
+
+export function Textarea({ rawArgs, className, id }: TextareaProps) {
+  const { varName, placeholder } = parseArgs(rawArgs);
+  const name = varName.startsWith('$') ? varName.slice(1) : varName;
+
+  const value = useStoryStore((s) => s.variables[name]);
+  const setVariable = useStoryStore((s) => s.setVariable);
+
+  const cls = className ? `macro-textarea ${className}` : 'macro-textarea';
+
+  return (
+    <textarea
+      id={id}
+      class={cls}
+      value={value == null ? '' : String(value)}
+      placeholder={placeholder}
+      onInput={(e) =>
+        setVariable(name, (e.target as HTMLTextAreaElement).value)
+      }
+    />
+  );
+}

package/src/components/macros/Textbox.tsx

@@ -0,0 +1,40 @@
+import { useStoryStore } from '../../store';
+
+interface TextboxProps {
+  rawArgs: string;
+  className?: string;
+  id?: string;
+}
+
+function parseArgs(rawArgs: string): { varName: string; placeholder: string } {
+  const match = rawArgs.match(
+    /^\s*(["']?\$\w+["']?)\s*(?:["'](.*)["'])?\s*$/,
+  );
+  if (!match) {
+    return { varName: rawArgs.trim(), placeholder: '' };
+  }
+  const varName = match[1].replace(/["']/g, '');
+  const placeholder = match[2] || '';
+  return { varName, placeholder };
+}
+
+export function Textbox({ rawArgs, className, id }: TextboxProps) {
+  const { varName, placeholder } = parseArgs(rawArgs);
+  const name = varName.startsWith('$') ? varName.slice(1) : varName;
+
+  const value = useStoryStore((s) => s.variables[name]);
+  const setVariable = useStoryStore((s) => s.setVariable);
+
+  const cls = className ? `macro-textbox ${className}` : 'macro-textbox';
+
+  return (
+    <input
+      type="text"
+      id={id}
+      class={cls}
+      value={value == null ? '' : String(value)}
+      placeholder={placeholder}
+      onInput={(e) => setVariable(name, (e.target as HTMLInputElement).value)}
+    />
+  );
+}

package/src/components/macros/Timed.tsx

@@ -0,0 +1,63 @@
+import { useState, useEffect } from 'preact/hooks';
+import { renderNodes } from '../../markup/render';
+import { parseDelay } from '../../utils/parse-delay';
+import type { ASTNode, Branch } from '../../markup/ast';
+
+interface TimedProps {
+  rawArgs: string;
+  children: ASTNode[];
+  branches: Branch[];
+  className?: string;
+  id?: string;
+}
+
+export function Timed({
+  rawArgs,
+  children,
+  branches,
+  className,
+  id,
+}: TimedProps) {
+  // Section 0 = initial children, sections 1..N = {next} branches
+  // Each section has its own delay
+  const sections: { delay: number; nodes: ASTNode[] }[] = [];
+
+  // Initial content with the timed delay
+  sections.push({ delay: parseDelay(rawArgs), nodes: children });
+
+  // {next} branches
+  for (const branch of branches) {
+    const delay = branch.rawArgs ? parseDelay(branch.rawArgs) : 0;
+    sections.push({ delay, nodes: branch.children });
+  }
+
+  const [visibleIndex, setVisibleIndex] = useState(-1);
+
+  useEffect(() => {
+    if (visibleIndex >= sections.length - 1) return;
+
+    const nextIndex = visibleIndex + 1;
+    const delay = sections[nextIndex].delay;
+
+    const timer = setTimeout(() => {
+      setVisibleIndex(nextIndex);
+    }, delay);
+
+    return () => clearTimeout(timer);
+  }, [visibleIndex, sections.length]);
+
+  if (visibleIndex < 0) return null;
+
+  const content = renderNodes(sections[visibleIndex].nodes);
+
+  if (className || id)
+    return (
+      <span
+        id={id}
+        class={className}
+      >
+        {content}
+      </span>
+    );
+  return <>{content}</>;
+}

package/src/components/macros/Type.tsx

@@ -0,0 +1,83 @@
+import { useState, useEffect, useRef } from 'preact/hooks';
+import { renderInlineNodes } from '../../markup/render';
+import { parseDelay } from '../../utils/parse-delay';
+import type { ASTNode } from '../../markup/ast';
+
+interface TypeProps {
+  rawArgs: string;
+  children: ASTNode[];
+  className?: string;
+  id?: string;
+}
+
+export function Type({ rawArgs, children, className, id }: TypeProps) {
+  const speed = parseDelay(rawArgs);
+  const containerRef = useRef<HTMLSpanElement>(null);
+  const [totalChars, setTotalChars] = useState(0);
+  const [visibleChars, setVisibleChars] = useState(0);
+
+  // After first render, measure total text length
+  useEffect(() => {
+    if (containerRef.current) {
+      const text = containerRef.current.textContent || '';
+      setTotalChars(text.length);
+    }
+  }, []);
+
+  // Typewriter interval
+  useEffect(() => {
+    if (totalChars === 0) return;
+    if (visibleChars >= totalChars) return;
+
+    const timer = setInterval(() => {
+      setVisibleChars((c) => {
+        if (c >= totalChars) {
+          clearInterval(timer);
+          return c;
+        }
+        return c + 1;
+      });
+    }, speed);
+
+    return () => clearInterval(timer);
+  }, [totalChars, speed]);
+
+  const done = visibleChars >= totalChars && totalChars > 0;
+
+  const cls = [
+    'macro-type',
+    done ? 'macro-type-done' : '',
+    className || '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <span
+      id={id}
+      class={cls}
+      ref={containerRef}
+      style={{
+        clipPath:
+          totalChars > 0 && !done
+            ? undefined
+            : undefined,
+      }}
+    >
+      <span
+        class="macro-type-inner"
+        style={{
+          display: 'inline',
+          visibility: totalChars === 0 ? 'hidden' : 'visible',
+          clipPath:
+            totalChars > 0 && !done
+              ? `inset(0 ${((totalChars - visibleChars) / totalChars) * 100}% 0 0)`
+              : undefined,
+        }}
+      >
+        {renderInlineNodes(children)}
+      </span>
+      {!done && totalChars > 0 && <span class="macro-type-cursor" />}
+    </span>
+  );
+}