@rohal12/spindle 0.1.0

package/src/components/SaveLoadDialog.tsx

@@ -0,0 +1,403 @@
+import { useState, useEffect, useCallback, useRef } from 'preact/hooks';
+import { useStoryStore } from '../store';
+import type { SaveRecord } from '../saves/types';
+import {
+  getSavesGrouped,
+  createSave,
+  overwriteSave,
+  deleteSaveById,
+  renameSave,
+  exportSave,
+  importSave,
+  type PlaythroughGroup,
+} from '../saves/save-manager';
+
+interface SaveLoadDialogProps {
+  onClose: () => void;
+}
+
+function relativeTime(iso: string): string {
+  const diff = Date.now() - new Date(iso).getTime();
+  const secs = Math.floor(diff / 1000);
+  if (secs < 60) return 'just now';
+  const mins = Math.floor(secs / 60);
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 30) return `${days}d ago`;
+  return new Date(iso).toLocaleDateString();
+}
+
+function formatDate(iso: string): string {
+  return new Date(iso).toLocaleDateString(undefined, {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+}
+
+export function SaveLoadDialog({ onClose }: SaveLoadDialogProps) {
+  const [mode, setMode] = useState<'save' | 'load'>('load');
+  const [groups, setGroups] = useState<PlaythroughGroup[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [status, setStatus] = useState<{
+    text: string;
+    type: 'success' | 'error';
+  } | null>(null);
+  const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
+  const [renamingId, setRenamingId] = useState<string | null>(null);
+  const [renameValue, setRenameValue] = useState('');
+  const renameInputRef = useRef<HTMLInputElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const storyData = useStoryStore((s) => s.storyData);
+  const playthroughId = useStoryStore((s) => s.playthroughId);
+  const getSavePayload = useStoryStore((s) => s.getSavePayload);
+  const loadFromPayload = useStoryStore((s) => s.loadFromPayload);
+  const ifid = storyData?.ifid ?? '';
+
+  const refresh = useCallback(async () => {
+    if (!ifid) return;
+    const data = await getSavesGrouped(ifid);
+    setGroups(data);
+    setLoading(false);
+  }, [ifid]);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  useEffect(() => {
+    if (renamingId && renameInputRef.current) {
+      renameInputRef.current.focus();
+      renameInputRef.current.select();
+    }
+  }, [renamingId]);
+
+  const showStatus = (text: string, type: 'success' | 'error' = 'success') => {
+    setStatus({ text, type });
+    setTimeout(() => setStatus(null), 3000);
+  };
+
+  const toggleCollapse = (id: string) => {
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const handleNewSave = async () => {
+    if (!ifid || !playthroughId) return;
+    try {
+      const payload = getSavePayload();
+      await createSave(ifid, playthroughId, payload);
+      showStatus('Save created');
+      await refresh();
+    } catch {
+      showStatus('Failed to create save', 'error');
+    }
+  };
+
+  const handleOverwrite = async (saveId: string) => {
+    try {
+      const payload = getSavePayload();
+      await overwriteSave(saveId, payload);
+      showStatus('Save overwritten');
+      await refresh();
+    } catch {
+      showStatus('Failed to overwrite save', 'error');
+    }
+  };
+
+  const handleLoad = async (save: SaveRecord) => {
+    try {
+      loadFromPayload(save.payload);
+      showStatus('Game loaded');
+      setTimeout(onClose, 500);
+    } catch {
+      showStatus('Failed to load save', 'error');
+    }
+  };
+
+  const handleDelete = async (saveId: string) => {
+    if (!confirm('Delete this save?')) return;
+    try {
+      await deleteSaveById(saveId);
+      showStatus('Save deleted');
+      await refresh();
+    } catch {
+      showStatus('Failed to delete save', 'error');
+    }
+  };
+
+  const handleRenameStart = (save: SaveRecord) => {
+    setRenamingId(save.meta.id);
+    setRenameValue(save.meta.title);
+  };
+
+  const handleRenameConfirm = async () => {
+    if (!renamingId || !renameValue.trim()) return;
+    try {
+      await renameSave(renamingId, renameValue.trim());
+      setRenamingId(null);
+      showStatus('Save renamed');
+      await refresh();
+    } catch {
+      showStatus('Failed to rename', 'error');
+    }
+  };
+
+  const handleRenameKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Enter') handleRenameConfirm();
+    else if (e.key === 'Escape') setRenamingId(null);
+  };
+
+  const handleExport = async (saveId: string) => {
+    try {
+      const data = await exportSave(saveId);
+      if (!data) return;
+      const blob = new Blob([JSON.stringify(data, null, 2)], {
+        type: 'application/json',
+      });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `save-${data.save.meta.title.replace(/[^a-z0-9]/gi, '_')}.json`;
+      a.click();
+      URL.revokeObjectURL(url);
+      showStatus('Save exported');
+    } catch {
+      showStatus('Failed to export save', 'error');
+    }
+  };
+
+  const handleImport = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileSelected = async (e: Event) => {
+    const input = e.target as HTMLInputElement;
+    const file = input.files?.[0];
+    if (!file) return;
+    input.value = '';
+
+    try {
+      const text = await file.text();
+      const data = JSON.parse(text);
+      await importSave(data, ifid);
+      showStatus('Save imported');
+      await refresh();
+    } catch (err) {
+      showStatus(
+        err instanceof Error ? err.message : 'Failed to import save',
+        'error',
+      );
+    }
+  };
+
+  const handleBackdrop = (e: MouseEvent) => {
+    if ((e.target as HTMLElement).classList.contains('saves-overlay')) {
+      onClose();
+    }
+  };
+
+  const totalSaves = groups.reduce((n, g) => n + g.saves.length, 0);
+
+  return (
+    <div
+      class="saves-overlay"
+      onClick={handleBackdrop}
+    >
+      <div class="saves-panel">
+        <div class="saves-header">
+          <div class="saves-header-left">
+            <div class="saves-mode-toggle">
+              <button
+                class={mode === 'save' ? 'active' : ''}
+                onClick={() => setMode('save')}
+              >
+                Save
+              </button>
+              <button
+                class={mode === 'load' ? 'active' : ''}
+                onClick={() => setMode('load')}
+              >
+                Load
+              </button>
+            </div>
+          </div>
+          <button
+            class="saves-close"
+            onClick={onClose}
+          >
+            ✕
+          </button>
+        </div>
+
+        <div class="saves-toolbar">
+          <button
+            class="saves-toolbar-button"
+            onClick={handleImport}
+          >
+            Import
+          </button>
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept=".json"
+            style="display:none"
+            onChange={handleFileSelected}
+          />
+        </div>
+
+        <div class="saves-body">
+          {loading ? (
+            <div class="saves-empty">Loading...</div>
+          ) : totalSaves === 0 && mode === 'load' ? (
+            <div class="saves-empty">No saves yet</div>
+          ) : (
+            groups.map((group) => {
+              const isCollapsed = collapsed.has(group.playthrough.id);
+              const isCurrentPt = group.playthrough.id === playthroughId;
+
+              // Save mode: only show current playthrough
+              // Load mode: hide empty non-current playthroughs (irrecoverable)
+              if (mode === 'save' && !isCurrentPt) return null;
+              if (mode === 'load' && group.saves.length === 0 && !isCurrentPt)
+                return null;
+
+              return (
+                <div
+                  class="playthrough-group"
+                  key={group.playthrough.id}
+                >
+                  <div
+                    class="playthrough-header"
+                    onClick={() => toggleCollapse(group.playthrough.id)}
+                  >
+                    <span
+                      class={`playthrough-chevron ${isCollapsed ? '' : 'open'}`}
+                    >
+                      ▶
+                    </span>
+                    <span class="playthrough-label">
+                      {group.playthrough.label}
+                      {isCurrentPt ? ' (current)' : ''}
+                    </span>
+                    <span class="playthrough-date">
+                      {formatDate(group.playthrough.createdAt)}
+                    </span>
+                  </div>
+
+                  {!isCollapsed && (
+                    <div class="playthrough-saves">
+                      {group.saves.map((save) => (
+                        <div
+                          class="save-slot"
+                          key={save.meta.id}
+                        >
+                          <div class="save-slot-info">
+                            {renamingId === save.meta.id ? (
+                              <input
+                                ref={renameInputRef}
+                                class="save-rename-input"
+                                value={renameValue}
+                                onInput={(e) =>
+                                  setRenameValue(
+                                    (e.target as HTMLInputElement).value,
+                                  )
+                                }
+                                onKeyDown={handleRenameKeyDown}
+                                onBlur={handleRenameConfirm}
+                              />
+                            ) : (
+                              <div class="save-slot-title">
+                                {save.meta.title}
+                              </div>
+                            )}
+                            <div class="save-slot-meta">
+                              <span>{save.meta.passage}</span>
+                              <span>{relativeTime(save.meta.updatedAt)}</span>
+                            </div>
+                          </div>
+                          <div class="save-slot-actions">
+                            {mode === 'save' ? (
+                              <button
+                                class="save-slot-action primary"
+                                onClick={() => handleOverwrite(save.meta.id)}
+                              >
+                                Save Here
+                              </button>
+                            ) : (
+                              <button
+                                class="save-slot-action primary"
+                                onClick={() => handleLoad(save)}
+                              >
+                                Load
+                              </button>
+                            )}
+                            <button
+                              class="save-slot-action"
+                              onClick={() => handleRenameStart(save)}
+                            >
+                              Rename
+                            </button>
+                            <button
+                              class="save-slot-action"
+                              onClick={() => handleExport(save.meta.id)}
+                            >
+                              Export
+                            </button>
+                            <button
+                              class="save-slot-action danger"
+                              onClick={() => handleDelete(save.meta.id)}
+                            >
+                              Delete
+                            </button>
+                          </div>
+                        </div>
+                      ))}
+
+                      {mode === 'save' && isCurrentPt && (
+                        <button
+                          class="save-slot-new"
+                          onClick={handleNewSave}
+                        >
+                          + New Save
+                        </button>
+                      )}
+                    </div>
+                  )}
+                </div>
+              );
+            })
+          )}
+
+          {mode === 'save' &&
+            !loading &&
+            !groups.some((g) => g.playthrough.id === playthroughId) && (
+              <div class="playthrough-group">
+                <div class="playthrough-saves">
+                  <button
+                    class="save-slot-new"
+                    onClick={handleNewSave}
+                  >
+                    + New Save
+                  </button>
+                </div>
+              </div>
+            )}
+        </div>
+
+        {status && (
+          <div class={`saves-status ${status.type === 'error' ? 'error' : ''}`}>
+            {status.text}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/SettingsDialog.tsx

@@ -0,0 +1,106 @@
+import { useState } from 'preact/hooks';
+import { settings, type SettingDef } from '../settings';
+
+interface SettingsDialogProps {
+  onClose: () => void;
+}
+
+function SettingControl({ name, def }: { name: string; def: SettingDef }) {
+  const [value, setValue] = useState(() => settings.get(name));
+
+  const update = (newValue: unknown) => {
+    setValue(newValue);
+    settings.set(name, newValue);
+  };
+
+  switch (def.type) {
+    case 'toggle':
+      return (
+        <label class="settings-row">
+          <span>{def.config.label}</span>
+          <input
+            type="checkbox"
+            checked={!!value}
+            onChange={(e) => update((e.target as HTMLInputElement).checked)}
+          />
+        </label>
+      );
+
+    case 'list':
+      return (
+        <label class="settings-row">
+          <span>{def.config.label}</span>
+          <select
+            value={String(value)}
+            onChange={(e) => update((e.target as HTMLSelectElement).value)}
+          >
+            {def.config.options.map((opt) => (
+              <option
+                key={opt}
+                value={opt}
+              >
+                {opt}
+              </option>
+            ))}
+          </select>
+        </label>
+      );
+
+    case 'range':
+      return (
+        <label class="settings-row">
+          <span>
+            {def.config.label}: {String(value)}
+          </span>
+          <input
+            type="range"
+            min={def.config.min}
+            max={def.config.max}
+            step={def.config.step}
+            value={Number(value)}
+            onInput={(e) =>
+              update(parseFloat((e.target as HTMLInputElement).value))
+            }
+          />
+        </label>
+      );
+  }
+}
+
+export function SettingsDialog({ onClose }: SettingsDialogProps) {
+  const defs = settings.getDefinitions();
+
+  const handleBackdrop = (e: MouseEvent) => {
+    if ((e.target as HTMLElement).classList.contains('settings-overlay')) {
+      onClose();
+    }
+  };
+
+  return (
+    <div
+      class="settings-overlay"
+      onClick={handleBackdrop}
+    >
+      <div class="settings-panel">
+        <div class="settings-header">
+          <span>Settings</span>
+          <button
+            class="settings-close"
+            onClick={onClose}
+          >
+            ✕
+          </button>
+        </div>
+        <div class="settings-body">
+          {Array.from(defs.entries()).map(([name, def]) => (
+            <SettingControl
+              key={name}
+              name={name}
+              def={def}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/StoryInterface.tsx

@@ -0,0 +1,31 @@
+import { useMemo } from 'preact/hooks';
+import { useStoryStore } from '../store';
+import { tokenize } from '../markup/tokenizer';
+import { buildAST } from '../markup/ast';
+import { renderNodes } from '../markup/render';
+
+const DEFAULT_MARKUP = '{story-title}{back}{forward}{restart}{quicksave}{quickload}{saves}{settings}';
+
+export function StoryInterface() {
+  const storyData = useStoryStore((s) => s.storyData);
+
+  const overridePassage = storyData?.passages.get('StoryInterface');
+  const markup =
+    overridePassage !== undefined ? overridePassage.content : DEFAULT_MARKUP;
+
+  const content = useMemo(() => {
+    try {
+      const tokens = tokenize(markup);
+      const ast = buildAST(tokens);
+      return renderNodes(ast);
+    } catch (err) {
+      return (
+        <span class="error">
+          Error in StoryInterface: {(err as Error).message}
+        </span>
+      );
+    }
+  }, [markup]);
+
+  return <>{content}</>;
+}

package/src/components/macros/Back.tsx

@@ -0,0 +1,23 @@
+import { useStoryStore } from '../../store';
+
+interface BackProps {
+  className?: string;
+  id?: string;
+}
+
+export function Back({ className, id }: BackProps) {
+  const goBack = useStoryStore((s) => s.goBack);
+  const canGoBack = useStoryStore((s) => s.historyIndex > 0);
+  const cls = className ? `menubar-button ${className}` : 'menubar-button';
+
+  return (
+    <button
+      id={id}
+      class={cls}
+      onClick={goBack}
+      disabled={!canGoBack}
+    >
+      ← Back
+    </button>
+  );
+}

package/src/components/macros/Button.tsx

@@ -0,0 +1,49 @@
+import { useStoryStore } from '../../store';
+import { execute } from '../../expression';
+import { renderInlineNodes } from '../../markup/render';
+import type { ASTNode } from '../../markup/ast';
+
+interface ButtonProps {
+  rawArgs: string;
+  children: ASTNode[];
+  className?: string;
+  id?: string;
+}
+
+export function Button({ rawArgs, children, className, id }: ButtonProps) {
+  const handleClick = () => {
+    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 {button ${rawArgs}}:`, err);
+      return;
+    }
+
+    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]);
+      }
+    }
+  };
+
+  const cls = className ? `macro-button ${className}` : 'macro-button';
+
+  return (
+    <button
+      id={id}
+      class={cls}
+      onClick={handleClick}
+    >
+      {renderInlineNodes(children)}
+    </button>
+  );
+}

package/src/components/macros/Checkbox.tsx

@@ -0,0 +1,41 @@
+import { useStoryStore } from '../../store';
+
+interface CheckboxProps {
+  rawArgs: string;
+  className?: string;
+  id?: string;
+}
+
+function parseArgs(rawArgs: string): { varName: string; label: string } {
+  const match = rawArgs.match(/^\s*(["']?\$\w+["']?)\s+["']?(.+?)["']?\s*$/);
+  if (!match) {
+    return { varName: rawArgs.trim(), label: '' };
+  }
+  const varName = match[1].replace(/["']/g, '');
+  const label = match[2];
+  return { varName, label };
+}
+
+export function Checkbox({ rawArgs, className, id }: CheckboxProps) {
+  const { varName, label } = 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-checkbox ${className}` : 'macro-checkbox';
+
+  return (
+    <label
+      id={id}
+      class={cls}
+    >
+      <input
+        type="checkbox"
+        checked={!!value}
+        onChange={() => setVariable(name, !value)}
+      />
+      {label ? ` ${label}` : null}
+    </label>
+  );
+}